UMD loader

[spotman]

Hi there!

I'm using your awesome plugin in web frontend. It's based on Require.JS loader so your module is loaded via shim config.

define([
    "jquery",
    "jquery.slidebars"
], function ($, slidebars) {
   ...........
});

Because of async loading of the jquery there is an error "$ is not defined" in your plugin. It may be resolved via wrapping your plugin code into UMD loader from here https://github.com/umdjs/umd/blob/master/jqueryPluginCommonjs.js

What do you think about this improvement?

[adchsm]

Hi there,

I probably wont add this as I intend to change Slidebars quite dramatically, steer it away from being a plugin and from jQuery, to just being a pure JS framework. It might be a while yet, but its heading that way.

Your free to fork Slidebars bar though and create and a UMD loaded version in case anyone else might find it useful too.

Thanks, Adam

[spotman]

Hi, Adam!

Your plans are very good! UMD loader is the better way to load JS modules and plugins, it does not rely on your choice of underlying library. It allows developer to manage dependencies and build modular JS apps. So there is no concerns to implement it now and drop JQuery in the future. Moreover, you may use UMD as the base for the future improvements.

For example, today your plugin has the main function which is connected to JQuery.slidebars property. And today your plugin may look like this (simplified version):

define("slidebars", [
    "jquery"  // Your current version is built on top of JQuery
], function ($) {
    var mainFunction = function(options) {
        // The main code goes here

        // It uses JQuery today
        var siteContainer = $("#sb-site");
    };

    // Creating JQuery shortcut
    $.slidebars = mainFunction;

    // And return the function as module result
    return mainFunction;
});

So everybody may use it as JQuery shortcut or as AMD module:

// Classic usage
$.slidebars({ ... });

// AMD usage
require([
  'slidebars'
], function(slidebars) {
    slidebars({ ... });
});

Everybody who will use your plugin as AMD module would not have any problems when you drop JQuery and change your plugin code like this:

// Your future framework core
define("slidebars.core", [
], function() {

    return {
        initSlideBars: function(options) {
            // Initialization moved to framework core
        }
    };

});

define("slidebars", [
    // No JQuery dependency
    "slidebars.core" // Inject framework code
], function (core) {
    // The same function with the same options
    var mainFunction = function(options) {

        // Delegate init to core methods
        core.initSlideBars(options);
    };

    // No JQuery shortcut

    // Return the same function as module result
    return mainFunction;
});

[adchsm]

Ahh, that's very interesting, thanks for letting me know. I'll be sure to research into this and implement it at some point. I'm fairly new to JS, I just built this plugin because I couldn't find one that was up to my expectations!

[spotman]

My choice of your plugin was the same :) Maybe I`ll made a PR for you in the near future (it would be the good point for you to start from).

[adchsm]

Thanks :)

That would be great, thank you for your help.

[KingScooty]

@spotman, just followed your tips to get this plugin working with requireJS. I've got it working, but for some reason, the plugin doesn't work for iOS anymore. Any ideas?

[spotman]

Hi, @KingScooty !

May you show me the updated code?

[KingScooty]

I've just managed to fix it! It was actually unrelated the AMD. It's to do with the css transitions. I'm going to fork the code, and make a pull request with the correct fixes! :)

[spotman]

@KingScooty nice to hear! :)