Framework7 v2
Support Framework7
stars forks
Improve this Doc

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):

// 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();

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

var query = app.utils.parseUrlQuery('http://google.com/?id=5&foo=bar');
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

var params = { foo: 'bar', id: 5 };
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

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(requestID)- Cancels an animation frame request

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

removeDiacritics

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

  • text - string - Text string
var text = app.utils.removeDiacritics('ÁÓL');
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.
app.utils.nextFrame(function() {
  // do something on next frame
});

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

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

now

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

var time = app.utils.now();
setTimeout(function () {
  var timeDiff = app.utils.now() - now;
  console.log(timeDiff + 'ms past');
}, 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.

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 = {
  bannana: 10,
  pineapple: 20,
}

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

console.log(a); // { apple: 0, cherry: 97, bannana: 10, peneapple: 20 }
var a = {
  apple: 0,
  cherry: 97
};
var b = {
  bannana: 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, bannana: 10, peneapple: 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, peneapple: 20 }