Utils

• Utils Methods
• parseUrlQuery()
• serializeObject()
• requestAnimationFrame()
• cancelAnimationFrame()
• nextFrame()
• nextTick()
• now()
• extend()
• uniqueNumber()
• id()
• preloaderContent
• colorHexToRgb()
• colorRgbToHex()
• colorRgbToHsl()
• colorHslToRgb()
• colorHsbToHsl()
• colorHslToHsb()
• colorThemeCSSProperties()

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

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

// If we need it in place where we don't have access to app instance or before we init the app
var now = Framework7.utils.now();


// After we init the app we can access it as app instance property
var app = new Framework7({ /*...*/ });
var now = app.utils.now();

It can also be imported using ES modules:

import { utils } from 'framework7';

Utils Methods

parseUrlQuery()

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

serializeObject()

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

requestAnimationFrame()

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

cancelAnimationFrame()

app.utils.cancelAnimationFrame(animId);

nextFrame()

app.utils.nextFrame(function() {
  // do something on next frame
});

nextTick()

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

now()

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

extend()

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.

var a = {
  apple: 0,
  cherry: 97
};
// Pass as empty object as target to copy a into b
var b = app.utils.extend({}, a);

console.log(b); // { apple: 0, cherry: 97 }
console.log(a === b); // false

var a = {
  apple: 0,
  cherry: 97
};
var b = {
  banana: 10,
  pineapple: 20,
}

// Extends a with b
app.utils.extend(a, b);

console.log(a); // { apple: 0, cherry: 97, banana: 10, pineapple: 20 }

var a = {
  apple: 0,
  cherry: 97
};
var b = {
  banana: 10,
  pineapple: 20,
}

// Create new object c from the merge of a and b
var c = app.utils.extend({}, a, b);

console.log(c); // { apple: 0, cherry: 97, banana: 10, pineapple: 20 }

var a = {
  apple: 0,
  cherry: 97
};
var b = {
  apple: 10,
  pineapple: 20,
}

// Extend a with b
app.utils.extend(a, b);

console.log(a); // { apple: 10, cherry: 97, pineapple: 20 }

uniqueNumber()

app.utils.uniqueNumber(); // -> 2

app.utils.uniqueNumber(); // -> 3

app.utils.uniqueNumber(); // -> 4

id()

app.utils.id() // -> ffe28ab56e

app.utils.id('xxxx-xxxx-xxxx-xxxx') // -> 1ea3-f127-dc67-627d

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.

// call method dynamically based on current app theme
var preloaderContent = app.utils[app.theme + 'PreloaderContent'];

// create required preloader content
var myPreloader = '<div class="preloader">' + preloaderContent + '</div>';

// add it somewhere
$('.something').append(myPreloader);

colorHexToRgb()

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

colorRgbToHex()

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

colorRgbToHsl()

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

colorHslToRgb()

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

colorHsbToHsl()

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

colorHslToHsb()

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

colorThemeCSSProperties()

app.utils.colorThemeCSSProperties('#f00')
/* returns the following object:
{
  "--f7-theme-color": "#f00",
  "--f7-theme-color-rgb": "255, 0, 0",
  "--f7-theme-color-shade": "#d60000",
  "--f7-theme-color-tint": "#ff2929"
}
*/

app.utils.colorThemeCSSProperties(255, 0, 0)
/* returns the following object:
{
  "--f7-theme-color": "#f00",
  "--f7-theme-color-rgb": "255, 0, 0",
  "--f7-theme-color-shade": "#d60000",
  "--f7-theme-color-tint": "#ff2929"
}
*/