Utils

Framework7 utils is a set of helper methods that used internally and can be handy during development as well.

It is avaialable as a **utils** property of Framework7 class (Framework7.utils) and same property on initialized app instance (app.utils):

  1. // If we need it in place where we don't have access to app instance or before we init the app
  2. var now = Framework7.utils.now();
  5. // After we init the app we can access it as app instance property
  6. var app = new Framework7({ /*...*/ });
  7. var now = app.utils.now();

Utils Methods

parseUrlQuery()

app.utils.parseUrlQuery(url)- parse url query get parameters

  • url - string - url with GET parameters. Required.

Method returns object with query parameters

  1. var query = app.utils.parseUrlQuery('http://google.com/?id=5&foo=bar');
  2. console.log(query); // { id: 5, foo: 'bar' }

serializeObject()

app.utils.serializeObject(object)- Create a serialized representation of a plain object suitable for use in a URL query string

  • object - object - Object to serialize

returns a new unique array

  1. var params = { foo: 'bar', id: 5 };
  2. console.log(app.utils.serializeObject(params)); // 'foo=bar&id=5'

requestAnimationFrame()

app.utils.requestAnimationFrame(callback)- Cross-browser implementation on requestAnimationFrame

  • callback - function - function to call when it’s time to update your animation for the next repaint

returns animation request id, that uniquely identifies the entry in the callback list

  1. var animId;
  2. function anim() {
  3.   var left = parseInt($$('#anim').css('left'), 10) + 1;
  4.   $$('#anim').css({left: left + 'px'})
  5.   animId = app.utils.requestAnimationFrame(anim);
  6. }
  7. animId = app.utils.requestAnimationFrame(anim);

cancelAnimationFrame()

app.utils.cancelAnimationFrame(requestID)- Cancels an animation frame request

  • requestID - number - The ID value returned by the call to app.utils.requestAnimationFrame() that requested the callback
  1. app.utils.cancelAnimationFrame(animId);

removeDiacritics()

app.utils.removeDiacritics(text)- Replace diacritics in specified text string with standard latin characters

  • text - string - Text string
  1. var text = app.utils.removeDiacritics('ÁÓL');
  2. console.log(text); //-> 'AOL'

nextFrame()

app.utils.nextFrame(callback)- Executes code on next available animation frame.

  • callback - string - function to call when it’s time to update your animation for the next repaint.
  1. app.utils.nextFrame(function() {
  2.   // do something on next frame
  3. });

nextTick()

app.utils.nextTick(callback, delay)- executes code after required delay. Basically alias for setTimeout

  • callback - string - function to call after specified delay
  • delay - number - delay in ms. Optional, by deault is 0

returns timeout ID

  1. app.utils.nextTick(function() {
  2.   // do something on next tick
  3. });

now()

app.utils.now()- returns current timestamp in ms

  1. var now = app.utils.now();
  2. setTimeout(function () {
  3.   var timeDiff = app.utils.now() - now;
  4.   console.log(timeDiff + 'ms past');
  5. }, 2000);

extend()

app.utils.extend(target, …from)- extends target object with properties and methods from from objects

  • target - object - target object to extend
  • from - object - objects to copy properties and methods from

returns target object with extended properties and methods

This method becomes very handy if you need to extend one object with properties of others or when you need a deep copy of an object.

  1. var a = {
  2.   apple: 0,
  3.   cherry: 97
  4. };
  5. // Pass as empty object as target to copy a into b
  6. var b = app.utils.extend({}, a);
  8. console.log(b); // { apple: 0, cherry: 97 }
  9. console.log(a === b); // false
  1. var a = {
  2.   apple: 0,
  3.   cherry: 97
  4. };
  5. var b = {
  6.   banana: 10,
  7.   pineapple: 20,
  8. }
  10. // Extends a with b
  11. app.utils.extend(a, b);
  13. console.log(a); // { apple: 0, cherry: 97, banana: 10, pineapple: 20 }
  1. var a = {
  2.   apple: 0,
  3.   cherry: 97
  4. };
  5. var b = {
  6.   banana: 10,
  7.   pineapple: 20,
  8. }
  10. // Create new object c from the merge of a and b
  11. var c = app.utils.extend({}, a, b);
  13. console.log(c); // { apple: 0, cherry: 97, banana: 10, pineapple: 20 }
  1. var a = {
  2.   apple: 0,
  3.   cherry: 97
  4. };
  5. var b = {
  6.   apple: 10,
  7.   pineapple: 20,
  8. }
  10. // Extend a with b
  11. app.utils.extend(a, b);
  13. console.log(a); // { apple: 10, cherry: 97, pineapple: 20 }

uniqueNumber()

app.utils.uniqueNumber()- returns unique number, increased by 1 with every call

  1. app.utils.uniqueNumber(); // -> 2
  3. app.utils.uniqueNumber(); // -> 3
  5. app.utils.uniqueNumber(); // -> 4

id()

app.utils.id(mask, map)- generates random ID-like string

  • mask - string - ID string mask, by default is xxxxxxxxxx
  • map - string - characters that will be used for generation, by default is 0123456789abcdef

returns randomly generated string

  1. app.utils.id() // -> ffe28ab56e
  3. app.utils.id('xxxx-xxxx-xxxx-xxxx') // -> 1ea3-f127-dc67-627d
  5. app.utils.id('xxxx-xxxx', 'abcd') // -> aabc-ccda

preloaderContent

There are properties that contain theme-related (iOS, MD or Aurora) content of Preloader element. Theses properties can be useful if you create preloaders dynamically.

app.utils.iosPreloaderContent- contains required preloader inner content (HTML string) for iOS theme

app.utils.mdPreloaderContent- contains required preloader inner content (HTML string) for MD theme

app.utils.auroraPreloaderContent- contains required preloader inner content (HTML string) for Aurora theme

  1. // call method dynamically based on current app theme
  2. var preloaderContent = app.utils[app.theme + 'PreloaderContent'];
  4. // create required preloader content
  5. var myPreloader = '<div class="preloader">' + preloaderContent + '</div>';
  7. // add it somewhere
  8. $('.something').append(myPreloader);

colorHexToRgb()

app.utils.colorHexToRgb(hexColor)- converts HEX color to RGB color

  • hexColor - string - HEX color string

returns [R, G, B] array

  1. app.utils.colorHexToRgb('#f00') // -> [255, 0, 0]

colorRgbToHex()

app.utils.colorRgbToHex(R, G, B)- converts RGB color to HEX color

  • R - number - red value (0 - 255)
  • G - number - green value (0 - 255)
  • B - number - blue value (0 - 255)

returns HEX color string

  1. app.utils.colorHexToRgb(255, 0, 0) // -> '#ff0000'

colorRgbToHsl()

app.utils.colorRgbToHsl(R, G, B)- converts RGB color to HSL color

  • R - number - red value (0 - 255)
  • G - number - green value (0 - 255)
  • B - number - blue value (0 - 255)

returns [H, S, L] array

  1. app.utils.colorRgbToHsl(255, 0, 0) // -> [0, 1, 0.5]

colorHslToRgb()

app.utils.colorHslToRgb(H, S, L)- converts HSL color to RGB color

  • H - number - hue value (0 - 360)
  • S - number - saturation value (0 - 1)
  • L - number - lightness value (0 - 1)

returns [R, G, B] array

  1. app.utils.colorHslToRgb(0, 1, 0.5) // -> [255, 0, 0]

colorHsbToHsl()

app.utils.colorHsbToHsl(H, S, B)- converts HSB(V) color to HSL color

  • H - number - hue value (0 - 360)
  • S - number - saturation value (0 - 1)
  • B - number - brightness value (0 - 1)

returns [H, S, L] array

  1. app.utils.colorHsbToHsl(360, 0.5, 0.5) // -> [360, 0.33, 0.375]

colorHslToHsb()

app.utils.colorHslToHsb(H, S, L)- converts HSL color to HSB(V) color

  • H - number - hue value (0 - 360)
  • S - number - saturation value (0 - 1)
  • L - number - lightness value (0 - 1)

returns [H, S, L] array

  1. app.utils.colorHslToHsb(360, 0.5, 0.5) // -> [360, 0.66, 0.75]

colorThemeCSSProperties()

app.utils.colorThemeCSSProperties(hexColor)- returns object with generate CSS variables required to set specified theme color

  • hexColor - string - HEX color string

returns object with required CSS variables and their values.

app.utils.colorThemeCSSProperties(R, G, B)- returns object with generate CSS variables required to set specified theme color

  • R - number - red value
  • G - number - green value
  • B - number - blue value

returns object with required CSS variables and their values.

  1. app.utils.colorThemeCSSProperties('#f00')
  2. /* returns the following object:
  3. {
  4.   "--f7-theme-color": "#f00",
  5.   "--f7-theme-color-rgb": "255, 0, 0",
  6.   "--f7-theme-color-shade": "#d60000",
  7.   "--f7-theme-color-tint": "#ff2929"
  8. }
  9. */
  1. app.utils.colorThemeCSSProperties(255, 0, 0)
  2. /* returns the following object:
  3. {
  4.   "--f7-theme-color": "#f00",
  5.   "--f7-theme-color-rgb": "255, 0, 0",
  6.   "--f7-theme-color-shade": "#d60000",
  7.   "--f7-theme-color-tint": "#ff2929"
  8. }
  9. */