mooSocial Javascript upgrade guide

Overview

The Javascript Layer of Moosocial is changed in the way that it is divided into modules . It is using RequireJS as module loader to load nested moosocial javascript  module dependencies . It means that you need to change the way you are using the jQuery in your customization code .

Requires only jQuery library

If your code requires only jQuery library that looked like the sample code below  :

$( document ).ready(function() {

    // Your code

});

 You can upgrade it  like this :

require(["jquery"], function($){

    $( document ).ready(function() {

         // Your code

      });

});

Requires jQuery library and plugin which doesn’t support AMD

We assume that you are want to add magnificPopup plugin which is saved in mooStie/app/webroot/js/sample/jquery.mp.min.js , you need go to moosite/app/Lib/MooViewListener.php , then:

1. Adding the code
   • 'magnificPopupSample’=>$v->Helpers->MooRequirejs->assetUrlJS('js/sample/jquery.mp.min.js'),
   • below the line 532 ( mooSocial 2.4.0)
   • 'textcomplete'=>$v->Helpers->MooRequirejs->assetUrlJS('js/global/jquery-textcomplete/jquery.textcomplete.js'),
2. Adding  the code
   • 'magnificPopupSample'=>array("deps" =>array('jquery')),
   • below the line 599 ( mooSocial 2.4.0)
   • 'simplemodal'=>array("deps" =>array('jquery','mooPhrase')),

You can using the magnificPopupSample plugin is very simple by using this code  :

require(["jquery”,'magnificPopupSample'], function($){

$('.attached-image').magnificPopup({
    type:'image',
    gallery: { enabled: true },
    zoom: {
        enabled: true,
        opener: function(openerElement) {
            return openerElement;
        }
    }
});

Requires jQuery library and plugin which  support AMD

If the plugin supports AMD , you just do the step 1 in “requires jQuery library and plugin which doesn’t support AMD” . Then using the example code bellow ( we assumed that we are using  the mooAlert plugin in mooSite ) 

require(["mooAlert"],function(mooAlert){  mooAlert.alert('please_select_area_for_cropping');});

How to check your plugin is using that supports AMD 

You can check the the plugin is using the Universal Module Definition pattern , for more infomatinon , see https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/amd%2Bcommonjs/pluginCore.js