General¶

General javaScript helpers:

• fw.FW_URI - URI to the framework directory.

• fw.SITE_URI - URI to the site root directory.

• fw.intval(value) - alternative to php intval(). Returns 0 on failure, instead of NaN like parseInt() does.

• fw.md5(string) - calculate md5 hash of the string.

• fw.loading - show loading on the page.

  Tip

  Useful when doing AJAX requests and want to inform your users about that.

  fw.loading.show();
  
  setTimeout(function(){
      fw.loading.hide();
  }, 3000);
  

  The show() and hide() methods can be called multiple times. If show() is called 10 times, then hide() should be called 10 times for loading to disappear. This is done for cases when this helper is used by multiple asynchronous scripts, the loading should not disappear until all scripts complete the work.

• fw.capitalizeFirstLetter(text) - capitalizes the first letter of a string.

• fw.ops(properties, value, obj, delimiter) - same as fw_aks(...) from PHP Helpers, but for javascript objects.

  var obj = {foo: {}};
  
  fw.ops('foo/bar', 'demo', obj);
  
  console.log(obj); // {foo: {bar: 'demo'}}
  

• fw.opg(properties, obj, defaultValue, delimiter) - same as fw_akg(...) from PHP Helpers, but for javascript objects.

  var obj = {foo: {bar: 'hello'}};
  
  console.log( fw.opg('foo/bar', obj) ); // 'hello'
  

• fw.randomMD5() - generate random md5.

Options Modal¶

Modal with options. Display html generated from a given options array. After the user completes the form and presses “Save”, values are available as a javascript object.

var modal = new fw.OptionsModal({
    title: 'Custom Title',
    options: [
        {'test_1': {
            'type': 'text',
            'label': 'Test1'
        }},
        {'test_2': {
            'type': 'textarea',
            'label': 'Test2'
        }}
    ],
    values: {
        'test_1': 'Default 1',
        'test_2': 'Default 2'
    },
    size: 'small' // 'medium', 'large'
});

// listen for values change
modal.on('change:values', function(modal, values) {
    console.log(values);
});

// replace values
modal.set('values', {
    'test_1': 'Custom 1',
    'test_2': 'Custom 2'
});

modal.open();

fw()->backend->enqueue_options_static($modal_options);

Events¶

fwEvents is a global object on which you can trigger or listen custom events. This way different scripts can communicate with each other.

// script-1.js

fwEvents.on('script-2:message', function(data){
    console.log('script-1 received a message from script-2: '+ data.message);
});

// script-2.js

fwEvents.trigger('script-2:message', {message: 'Hello World!'});