Utilities

PixelAdmin package contains Javascript utilities that you can use in your code.

js/src/pixeladmin.js

pixeladmin.js is a core script that performs some initial setup and defines basic PixelAdmin object.

After loading, pixeladmin.js script will fire up window resize event.
RequireJS warning: You need to load core pixeladmin.js file before PixelAdmin components: 

require(['px/pixeladmin', 'px/plugins/px-file'], function() {
  ...
});
Usage

PixelAdmin.methodName();
Usage

require(['px/pixeladmin'], function(px) {
  px.methodName();

  // or

  window.PixelAdmin.methodName();
  PixelAdmin.methodName();
});
Attributes

You can access to an attribute of PixelAdmin object using the syntax: 


PixelAdmin.attributeName

Attribute name Description
isRtl true if the <html> element has dir="rtl" attribute, otherwise false.
isMobile true if navigator.userAgent attribute contains mobile-specific string, otherwise false.
isLocalStorageSupported true if browser supports Local Storage, otherwise false.
options

Application-wide options: 


{
  resizeDelay:      100,     // Delayed resize timer
  storageKeyPrefix: 'px_s_', // Prefix for stored keys in the Local Storage
  cookieKeyPrefix:  'px_c_', // Prefix for stored keys in the Cookies
}
Methods

You can call a public method of PixelAdmin object using the syntax: 


PixelAdmin.methodName(argumentOne, argumentTwo)

Method name Description
getScreenSize

Returns current screen size. Returning values:

  • xs - extra small screen size.
  • sm - small screen size.
  • md - medium screen size.
  • lg - large screen size.
  • xl - extra large screen size.
storage.set(key, value)

Store key/value pair in the Local Storage. To store multiple key/value pairs, pass a hash object as a first parameter to the method.

Note: If Local Storage is not supported by the browser, then values will be stored in the Cookies. 


// Local storage will contain "px_s_one" key
PixelAdmin.storage.set('one', 1);

// Local storage will contain "px_s_two", "px_s_three", "px_s_four" keys
PixelAdmin.storage.set({
  two: 2,
  three: 3,
  four: 4
});
storage.get(key)

Get value from the Local Storage by key. To get multiple values, pass an array of keys as a first parameter to the method. If key is not exists, then null will be returned.

Note: If Local Storage is not supported by the browser, then values will be loaded from the Cookies. 


// Returns 1
PixelAdmin.storage.get('one');

// Returns null
PixelAdmin.storage.get('one-one');

// Returns
// {
//   two: 2,
//   three: 3,
//   four: 4
// }
PixelAdmin.storage.get(['two', 'three', 'four']);
cookies.set(key, value)

Store key/value pair in the Cookies. To store multiple key/value pairs, pass a hash object as a first parameter to the method. 


// Cookies will contain "px_c_five" key
PixelAdmin.cookies.set('five', 5);

// Cookies will contain "px_c_six", "px_c_seven", "px_c_eight" keys
PixelAdmin.cookies.set({
  six: 6,
  seven: 7,
  eight: 8
});
cookies.get(key)

Get value from the Cookies by key. To get multiple values, pass an array of keys as a first parameter to the method. If key is not exists, then null will be returned. 


// Returns '5'
PixelAdmin.cookies.get('five');

// Returns null
PixelAdmin.cookies.get('five-five');

// Returns
// {
//   six: '6',
//   seven: '7',
//   eight: '8'
// }
PixelAdmin.cookies.get(['six', 'seven', 'eight']);
Events

pixeladmin.js script fires some events on window object. You can subscribe on those events using the syntax: 


$(window).on('px.event', function(e) {
  // ...
});

Event Description
load This event is fired when the basic setup is completed.
resize Delayed resize event, fired when window resize is complete.
resize.xs This event is fired when screen size is changed to extra small.
resize.sm This event is fired when screen size is changed to small.
resize.md This event is fired when screen size is changed to medium.
resize.lg This event is fired when screen size is changed to large.
resize.xl This event is fired when screen size is changed to extra large.

js/src/util.js

util.js script defines pxUtil object that contains utility methods.

Usage

pxUtil.methodName();
Usage

require(['px/util'], function(pxUtil) {
  pxUtil.methodName();
});
Methods

You can call a public method of pxUtil object using the syntax: 


pxUtil.methodName(argumentOne, argumentTwo)

Method name Description
generateUniqueId Returns unique ID.
escapeRegExp(str) Returns RegEx-safe string.
hexToRgba(color, opacity) Convert HEX color to RGBA color with given opacity. Returns string rgba(...).
triggerResizeEvent Trigger window resize event. Do not require jQuery.
hasClass(elem, className) Returns true if the DOM elem are assigned the given className, otherwise returns false. Do not require jQuery.
addClass(elem, classes) Adds the specified classes to the DOM elem. classes - One or more space-separated classes / array of classes to be added to the class attribute of DOM elem. Do not require jQuery.
removeClass(elem, classes) Removes the specified classes from the DOM elem. classes - One or more space-separated classes / array of classes to be removed from the class attribute of DOM elem. Do not require jQuery.
toggleClass(elem, classes) Adds or removes the specified classes from the DOM elem, depending on the class's presence. classes - One or more space-separated classes / array of classes to be added/removed from the class attribute of DOM elem. Do not require jQuery.