@ulu/frontend 0.0.3

package/js/deprecated/mini-collapsible.js

@@ -0,0 +1,607 @@
+// =============================================================================
+// Collapsibles Mini
+// =============================================================================
+
+// Version:         1.0.9
+// 
+// Requires:        Ally.js v1.4.1
+
+// Changes:         1.0.2 | Added clickWithinCloses
+//                  1.0.3 | Tested In NVDA on Firefox Windows (everything works for basic and accordion)
+//                  1.0.4 | Fixed duplicate ID, remove incorrect aria-selected attr
+//                  1.0.5 | Converted to ES module
+//                  1.0.6 | Added the ability to change the toggle text with [data-cc-state-text]
+//                  1.0.7 | Added ability to fade instead of just slide
+//                  1.0.8 | Added dependency ally.js for focus trapping, and added
+//                          option for closeOnEscape.
+//                  1.0.9 | Added event object from click/keyboard that caused change
+
+// Description:     Mini collapsible module that supports basic show and hide
+//                  and accordions. This is not maintained with the Informatics
+//                  core module Collapsibles but works similarly, based on 
+//                  version 4.0.7. 
+//                  - Handlers are attached to the document for convenience.
+//                  - Self managed option exists for those that want to manage the click handlers.
+//                  - Callbacks for change in state (before and after)
+//                  - Type support: 
+//                    - hide/show
+//                    - accordion
+//                    - tabs (with keyboard controls) @coming-soon
+
+// Support:         - Built to work in legacy jQuery 1.12 (may not work in newer versions)
+//                  - Uses ES5 include polyfill for:
+//                    - Array.every(), Array.forEach()
+//                    - Object.assign
+//                    - Function.bind() 
+
+// Options:         See the "defaults" object below for options and descriptions. All default
+//                  properties can be modified and viewed at MiniCollapsibles.defaults [object]
+
+
+// Setup:           1. Create the correct markup (see below)
+//                     - This plugin will set the aria attributes for you with one exception
+//                       if an element is added to the page after calling the constructor
+//                       you will need to run instance.init(); to do the same for new elements.
+//                       For convenience the module provides a method to update all instances with:
+// 
+//                       MiniCollapsibles.parse()
+// 
+//                     - This can be avoided by including the aria attributes in the HTML
+//                       use the ariaStates object below for reference on what attributes
+//                       should be set initially (based on if you want it open or closed)
+//                  2. Setup an instance by calling the constructor:
+// 
+//                     var dropdown = new MiniCollapsible({
+//                       container:  '.collapsible',
+//                       toggle:     '.collapsible__toggle',
+//                       content:    '.collapsible__content',
+//                       slide:      500
+//                     });
+//  
+//                  3. Setup the CSS, the only requirement is adding display none when closed 
+//                     on the content container:
+
+//                     .collapsible__content {
+//                       display: none;
+//                     }
+//                     .collapsible__content[data-cc-state="open"] {
+//                       display: block;
+//                     }
+// 
+// Markup:          See comments below code  
+
+
+// Todo:            - Tabs type (time permitting)
+//                    - Add arrow key cycler from framework collapsible module
+
+import maintain from 'ally.js/maintain/_maintain';
+import { hasRequiredProps } from "../utils/object.js";
+
+const requiredProps = ['selectorContainer', 'selectorToggle', 'selectorContent'];
+const hasRequired = hasRequiredProps(requiredProps);
+const $ = jQuery;
+const $document = $(document);
+const merge = Object.assign;
+const elementsFocusable = [
+  'a[href]',
+  'button:not([disabled])',
+  'area[href]',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'iframe','object',
+  'embed','*[tabindex]',
+  '*[contenteditable]'
+];
+const selectorFocusable = elementsFocusable.join(' ');
+const dataKeyParsed = "MiniCollapsibleInit";
+const defaults = {
+  idPrefix:             'mc-id--',          // So user can adjust if needed
+  selectorContainer:    null,               // (required, string) Selector
+  selectorToggle:       null,               // see above
+  selectorContent:      null,               // see above
+  selectorContext:      'body',             // (string) Selector for container that holds multiple collapsibles (oneOpenPerContext)
+  aria:                 true,               // (boolean) Toggle aria attributes for accessibility
+  selfManaged:          false,              // (boolean) The module will not handle the clicks (Attach yourself and run methods yourself)
+  clickOutsideCloses:   false,              // Will close the collapsible if it's open and the user clicks outside, not available to self managed
+  clickWithinCloses:    false,              // Useful for menus
+  focusoutCloses:       false,              // Focusing away from the element closes it
+  closeOnEscape:        false,              // Add escape key handler when collapsible is open 
+  onChangeBefore:       null,               // Callback(elements, newState, event) called before open/closed/toggled
+  onChangeAfter:        null,               // Callback(elements, newState, event) called after open/closed/toggled
+  attr:                 'data-cc-state',    // The attribute to use to indicate the state (for styling), for adding a class use the callbacks
+  slide:                false,              // Whether or not to use jQuery slide animation pass value for duration or false, also can use keywords
+  fade:                 false,              // Whether or not to use jQuery fadeIn/Out animation pass value for duration or false, also can use keywords (Cannot slide and fade)
+  oneOpenPerContext:    false,              // If enabled the selector for "context" will be used to close all others before opening a new one
+  closeBeforeOpen:      true,               // The closing of other items in the context (may be expanded to other things in future) should be done before opening another
+  type:                 'basic',            // The type of collapsible (basic, accordion, tabs[not created yet])
+  trapFocus:            false               // Only allow focusing within the open collapsible
+};
+// Object holds info for plugin internally
+const managed = {
+  all: [],
+  click: {
+    // ".container-selector .toggle-selector" : { instance object }
+  },
+  clickOutside: {
+    // ".container-selector .toggle-selector" : { instance object }
+  },
+  clickWithin: {
+    // ".container-selector .toggle-selector" : { instance object }
+  }
+};
+let ariaStates = {
+  basic: {
+    init: {                                 // Dev note: Use this property to add specific props for this type (non dynamic like aria-role, etc)
+      toggle: null,
+      content: null,
+      container: null,
+      callback: null                        // Dev note: Use this for doing custom stuff
+    },                             
+    open: {
+      toggle: {
+        'aria-expanded' : 'true',
+      },
+      content: {
+        'aria-hidden' : 'false'
+      }
+    },
+    closed: {
+      toggle: {
+        'aria-expanded' : 'false',
+      },
+      content: {
+        'aria-hidden' : 'true'
+      }
+    }
+  }
+};
+let instanceCount = 0;
+
+// Adding other merged Aria States
+ariaStates.accordion = merge({}, ariaStates.basic, {
+  init: {
+    callback: function(elements) {
+      if (elements.index === 0) {
+        elements.context.attr('aria-label', 'Accordion Control Group Buttons');
+      }
+    }
+  }
+});
+
+
+
+class MiniCollapsible {
+  constructor(options) {
+    if (!hasRequired(options)) {
+      console.warn('MiniCollapsible: Missing required options:', options);
+    }
+
+    merge(this, defaults, options);
+    managed.all.push(this); // Register 
+
+    // Click handlers
+    if (!this.selfManaged) {
+      var clickSelector = this.clickSelector();
+      managed.click[clickSelector] = this; 
+
+      if (this.clickOutsideCloses) {
+        managed.clickOutside[clickSelector] = this;
+      }
+      if (this.clickWithinCloses) {
+        managed.clickWithin[this.clickSelectorWithin()] = this; 
+      }
+    }
+
+    this.init();
+  }
+  // Plugin Interface to re-parse plugin managed collapsibles
+  static parse() {
+    var all = managed.all;
+    for(var k = 0, l = all.length; k < l; k++) {
+      all[k].init();
+    }
+  }
+  clickSelector() {
+    return this.selectorContainer + ' ' + this.selectorToggle;
+  }
+  clickSelectorWithin() {
+    return this.selectorContainer + ' ' + this.selectorContent;
+  }
+  openSelector() {
+    return this.selectorContainer + '[' + this.attr + '="open"]';
+  }
+  handleClick(event, $toggle) {
+    var elements = this.getElements($toggle);
+    this.toggle(elements, event);
+  }
+  getElements($toggle) {
+
+    var $container = $toggle.closest(this.selectorContainer),
+        $content = $container.find(this.selectorContent).first();
+    return {
+      container: $container,
+      toggle: $toggle,
+      content: $content,
+      context: $container.closest(this.selectorContext),
+      all: $container.add($toggle).add($content)
+    };
+  }
+  getElementsFromContainer($container) {
+     var $toggle = $container.find(this.selectorToggle).first(),
+        $content = $container.find(this.selectorContent).first();
+    return {
+      container: $container,
+      toggle: $toggle,
+      content: $content,
+      context: $container.closest(this.selectorContext),
+      all: $container.add($toggle).add($content)
+    };
+  }
+  getElementsFromContent($content) {
+    var $container = $content.closest(this.selectorContainer),
+        $toggle = $container.find(this.selectorToggle).first();
+    return {
+      container: $container,
+      toggle: $toggle,
+      content: $content,
+      context: $container.closest(this.selectorContext),
+      all: $container.add($toggle).add($content)
+    };
+  }
+  getElementsArray($container) {
+    // Expects multiple containers returns arrays of elements objects
+    var self = this,
+        elementsArray = [];
+    
+    function collect() {
+      elementsArray.push(self.getElementsFromContainer($(this)));
+    }
+
+    $container.each(collect);
+    return elementsArray;
+  }
+  getOtherElements({ container, content, toggle }) {
+
+    var $context = container.closest(this.selectorContext),
+        $container = $context.find(this.selectorContainer).not(container),
+        $toggle = $context.find(this.selectorToggle).not(toggle),
+        $content = $context.find(this.selectorContent).not(content);
+
+    return {
+      container: $container,
+      toggle: $toggle,
+      content: $content,
+      context: $context,
+      all: $container.add($toggle).add($content)
+    };
+  }
+  // Switched the state
+  toggle(elements, event) {
+    const state = this.getState(elements),
+        isOpening = state === "closed",
+        changeTo = isOpening ? "open" : "closed",
+        change = () => this.setState(elements, changeTo, event);
+    if (isOpening && this.oneOpenPerContext) {
+      if (this.closeBeforeOpen) {
+        this.setState(this.getOtherElements(elements), "closed", event, change);
+      } else {
+        this.setState(this.getOtherElements(elements), "closed", event);
+        change();
+      }
+    } else {
+      change();
+    }
+  }
+  setState(elements, state, event, onComplete) {
+    const handleComplete = () => onComplete && onComplete();
+    // Don't want to fire callbacks if no changes were made
+    if (!elements.container.length) return handleComplete();
+
+    // Callback after element is open/closed
+    const after = () => {
+      elements.all.attr(this.attr, state);
+      if (this.onChangeAfter) {
+        this.onChangeAfter.call(this, elements, state, event);
+      }
+      if (this.aria) {
+        this.setAriaAttr(elements, state);
+      }
+      if (this.trapFocus) {
+        this.setTrapFocus(elements, state);
+      } 
+      if (this.closeOnEscape) {
+        this.setEscapeClose(elements, state);
+      }
+      if (this.focusoutCloses) {
+        this.setFocusoutCloses(elements, state);
+      }
+      
+      // Change the toggle text if user passes state text object
+      const textState = elements.toggle.data('cc-state-text');
+      if (textState) {
+        elements.toggle.text(textState[state]);
+      }
+      handleComplete();
+    }
+    // Change the state and call callback
+    if (this.onChangeBefore) {
+      this.onChangeBefore.call(this, elements, state, event);
+    }
+    if (this.slide) {
+      elements.content[state === "open" ? "slideDown" : "slideUp"](this.slide, after);
+    } else if (this.fade) {
+      elements.content[state === "open" ? "fadeIn" : "fadeOut"](this.slide, after);
+    } else {
+      after();
+    }
+  }
+  getState({ content }) {
+    return content.attr(this.attr) || "closed";
+  }
+  setAriaAttr(elements, state, setImmutable) {
+
+    var ariaAttrs = ariaStates[this.type],
+        ariaInit = ariaAttrs.init,
+        ariaState = ariaAttrs[state],
+        toggleAttrs = ariaState.toggle,
+        contentAttrs = ariaState.content;
+
+    if (setImmutable) {
+
+      var tid = this.uniqueId(),
+          cid = this.uniqueId();
+
+      toggleAttrs = merge(toggleAttrs, ariaInit.toggle, { 
+        "id": tid, 
+        "aria-controls" : cid,
+      });
+
+      contentAttrs = merge(contentAttrs, ariaInit.content, { 
+        "id": cid, 
+        "aria-labelledby" : tid 
+      });
+
+      if (ariaInit.container) {
+        elements.container.attr(ariaInit.container);
+      }
+      if (ariaInit.context) {
+        elements.context.attr(ariaInit.context);
+      }
+      // Do custom stuff
+      if (ariaInit.callback) {
+        ariaInit.callback.call(this, elements);
+      }
+    }
+
+    elements.toggle.attr(toggleAttrs);
+    elements.content.attr(contentAttrs);
+  }
+  /**
+   *   Attaches temporary ally handler for disabling
+   *   focus outside of the collapsible instance
+   *   @param {Object} elements
+   *   @param {String} state
+   */
+  setTrapFocus(elements, state) {
+    const filter = elements.container.get(0);
+    if (state === "open") {
+      this._focusTrapHandler = maintain.disabled({ filter });
+    } else if (this.focusTrapHandler) {
+      this._focusTrapHandler.disengage();
+      delete this._focusTrapHandler;
+    }
+  }
+  /**
+   *   Attaches temporary handler for the escape key
+   *   while the collapsible is open. Removing it when
+   *   it closes.
+   *   @param {Object} elements
+   *   @param {String} state
+   */
+  setEscapeClose(elements, state) {
+    const { container } = elements;
+    if (state === "open") {
+      this._escapeCloseHandler = e => {
+        if (e.keyCode === 27)  {
+          this.setState(elements, "closed", e);
+          container.off('keyup', handler);
+          delete this._escapeCloseHandler;
+        }
+      };
+      container.on('keyup', this._escapeCloseHandler);
+    } else if (this._escapeCloseHandler) {
+      container.off('keyup', this._escapeCloseHandler);
+      delete this._escapeCloseHandler;
+    }
+  }
+  setFocusoutCloses(elements, state) {
+    const { container } = elements;
+    if (state === "open") {
+      this._focusoutClosesHandler = e => {
+        if (!container.get(0).contains(e.relatedTarget)) {
+          console.log('Closed due to focu out');
+          this.setState(elements, "closed", e);
+          delete this._focusoutClosesHandler;
+        }
+      };
+      container.on('focusout', this._focusoutClosesHandler);
+    } else if (this._focusoutClosesHandler) {
+      container.off('focusout', this._focusoutClosesHandler);
+      delete this._focusoutClosesHandler;
+    }
+  }
+  init() {
+    this.each(this.initElementSet);
+  }
+  initElementSet(elements) {
+    // Check if they are already setting attributes if not set them
+    if (elements.container.data(dataKeyParsed)) {
+      return;
+    }
+    var state = this.getState(elements);
+    this.setAriaAttr(elements, state, true);
+    elements.container.data(dataKeyParsed, true);
+  }
+  each(callback) {
+
+    $(this.selectorContainer).each(eachContainer.bind(this));
+
+    function eachContainer(index, container) {
+      var $container = $(container),
+          $toggle = $container.find(this.selectorToggle).first(), 
+          $content = $container.find(this.selectorContent).first();
+
+      var elements = {
+        container: $container, 
+        toggle: $toggle, 
+        content: $content, 
+        index: index,
+        context: $container.closest(this.selectorContext),
+        all: $container.add($toggle).add($content)
+      };
+
+      callback.call(this, elements);
+    }
+  }
+  // Function should test DOM for an ID and return one that doesn't exist.
+  // - User can override this function if needed
+  uniqueId(attempt) {
+
+    attempt = attempt === undefined ? 1 : ++attempt;
+
+    var id = this.idPrefix + (++instanceCount),
+        el = $('#' + id);
+
+    // Check to make sure this ID isn't in the DOM (try again)
+    // The attempt limit is so this doesn't go into infinite loop for some 
+    // reason (very unlikely but it didn't feel right leaving the 
+    // opportunity to loop forever)
+    if (el.length && attempt < 50) {
+      return this.uniqueId(attempt);
+    } else {
+      return id;
+    } 
+  }
+}
+
+// Attaching properties to class so user can modify globally
+MiniCollapsible.defaults = defaults;
+MiniCollapsible.ariaStates = ariaStates;
+MiniCollapsible.managed = managed;
+
+$document.on('click', onClick); // Module click handler
+
+// Internal Functions
+// =============================================================================
+
+function onClick(event) {
+  var $target = $(event.target),
+      selector,
+      $toggle,
+      $content,
+      instance,
+      elements;
+      
+
+  // Check for open instances before changing new ones
+  for (selector in managed.clickOutside) {
+    // Need to select all open
+    instance = managed.clickOutside[selector];
+    ifOutsideClose(instance, $target, event);
+  }
+  // Check all instances
+  for (selector in managed.click) {
+    $toggle = $target.closest(selector);
+    if ($toggle.length) {
+      instance = managed.click[selector];
+      instance.handleClick(event, $toggle);
+    }
+  }
+  // check Click within and close
+  for (selector in managed.clickWithin) {
+    $content = $target.closest(selector);
+    if ($content.length) {
+      instance = managed.clickWithin[selector];
+      elements = instance.getElementsFromContent($content);
+      instance.setState(elements, 'closed', event);
+    }
+  }
+}
+function ifOutsideClose(self, $target, event) {
+  // Decide if the current click target is a toggle
+  var cont = self.selectorContainer,
+      contOpen = self.openSelector(),
+      $targetContainer = $target.parents(cont).addBack(cont),
+      $openContainer = $document.find(contOpen).not($targetContainer);
+
+  // Then close the open containers
+  if ($openContainer.length) {
+    var elementsArray = self.getElementsArray($openContainer);
+    for(var i = 0; i < elementsArray.length; i++){
+      self.setState(elementsArray[i], "closed", event);
+    } 
+  }
+}
+
+export default MiniCollapsible;
+
+/* 
+  Markup Example:
+
+  <!-- Basic Hide and Show -->
+  <div class="collapsible" data-cc-state="closed">
+    <button class="collapsible__toggle" type="button" data-cc-state="closed" data-cc-state-text='{ "open" : "Hide Filters", "closed" : "Show Filters" }'>
+      Open Me
+    </button>
+    <div class="collapsible__content" data-cc-state="closed">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu molestie est. Proin ante augue, sollicitudin at diam sed, ullamcorper vehicula libero. Vestibulum hendrerit, arcu eget viverra imperdiet, ipsum nunc consectetur sapien, eu tincidunt velit leo vel neque. Quisque sit amet venenatis turpis. Donec ac faucibus nisi. Aliquam nec rhoncus
+      </p>
+    </div>
+  </div>
+
+  <!-- Example accordion -->
+  <ul class="accordion">
+    <li class="accordion__item" data-cc-state="open">
+      <button class="accordion__toggle" data-cc-state="open" type="button">
+        <strong>Toggle the accordion</strong>
+      </button>
+      <div class="accordion__content" data-cc-state="open">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu molestie est. Proin ante augue, sollicitudin at diam sed, ullamcorper vehicula libero. Vestibulum hendrerit, arcu eget viverra imperdiet, ipsum nunc consectetur sapien, eu tincidunt velit leo vel neque. Quisque sit amet venenatis turpis. Donec ac faucibus nisi. Aliquam nec rhoncus turpis, sit amet euismod sem. Morbi facilisis, ipsum eget fermentum interdum, ligula diam tincidunt nisi, eu auctor lacus sem maximus erat. Sed at metus ex. Nam vestibulum convallis magna, et ultricies eros suscipit non. Quisque ornare semper ipsum vitae tempor. Aliquam semper ante leo, eget pretium nisi fringilla quis.
+        </p>
+      </div>
+    </li>
+    <li class="accordion__item" data-cc-state="closed">
+      <button class="accordion__toggle" data-cc-state="closed">
+        <strong>Toggle the accordion</strong>
+      </button>
+      <div class="accordion__content" data-cc-state="closed">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu molestie est. Proin ante augue, sollicitudin at diam sed, ullamcorper vehicula libero. Vestibulum hendrerit, arcu eget viverra imperdiet, ipsum nunc consectetur sapien, eu tincidunt velit leo vel neque. Quisque sit amet venenatis turpis. Donec ac faucibus nisi. Aliquam nec rhoncus turpis, sit amet euismod sem. Morbi facilisis, ipsum eget fermentum interdum, ligula diam tincidunt nisi, eu auctor lacus sem maximus erat. Sed at metus ex. Nam vestibulum convallis magna, et ultricies eros suscipit non. Quisque ornare semper ipsum vitae tempor. Aliquam semper ante leo, eget pretium nisi fringilla quis.
+        </p>
+      </div>
+    </li>
+    <li class="accordion__item" data-cc-state="closed">
+      <button class="accordion__toggle" data-cc-state="closed">
+        <strong>Toggle the accordion</strong>
+      </button>
+      <div class="accordion__content" data-cc-state="closed">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu molestie est. Proin ante augue, sollicitudin at diam sed, ullamcorper vehicula libero. Vestibulum hendrerit, arcu eget viverra imperdiet, ipsum nunc consectetur sapien, eu tincidunt velit leo vel neque. Quisque sit amet venenatis turpis. Donec ac faucibus nisi. Aliquam nec rhoncus turpis, sit amet euismod sem. Morbi facilisis, ipsum eget fermentum interdum, ligula diam tincidunt nisi, eu auctor lacus sem maximus erat. Sed at metus ex. Nam vestibulum convallis magna, et ultricies eros suscipit non. Quisque ornare semper ipsum vitae tempor. Aliquam semper ante leo, eget pretium nisi fringilla quis.
+        </p>
+      </div>
+    </li>
+    <li class="accordion__item" data-cc-state="closed">
+      <button class="accordion__toggle" data-cc-state="closed">
+        <strong>Toggle the accordion</strong>
+      </button>
+      <div class="accordion__content" data-cc-state="closed">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu molestie est. Proin ante augue, sollicitudin at diam sed, ullamcorper vehicula libero. Vestibulum hendrerit, arcu eget viverra imperdiet, ipsum nunc consectetur sapien, eu tincidunt velit leo vel neque. Quisque sit amet venenatis turpis. Donec ac faucibus nisi. Aliquam nec rhoncus turpis, sit amet euismod sem. Morbi facilisis, ipsum eget fermentum interdum, ligula diam tincidunt nisi, eu auctor lacus sem maximus erat. Sed at metus ex. Nam vestibulum convallis magna, et ultricies eros suscipit non. Quisque ornare semper ipsum vitae tempor. Aliquam semper ante leo, eget pretium nisi fringilla quis.
+        </p>
+      </div>
+    </li>
+  </ul>
+*/

package/js/deprecated/script-loader.js

@@ -0,0 +1,60 @@
+// Would be used in the head of the document
+(function(d, w) {
+  
+  // The constructor will set unique props
+  // And it will create/init the script tag
+  function ScriptLoader(url, callback) {
+    
+    // Add the script tag
+    var s = d.createElement("script");
+    s.src = url;
+    s.async = true;
+    
+    // Funciton to be run when script is loaded and executed
+    // Note: This will be bound to this object
+    function init() {
+      for (var i = 0; i < this.callbacks.length; i++) {
+        this.callbacks[i].call(this);
+      }
+      delete this.callbacks;
+      this.loaded = true;
+    }
+    
+    // Unique Props
+    this.callbacks = [];
+    this.loaded = false;
+    this.script = s;
+    
+    // Ability to add callbacks when creating object
+    if (callback) this.callbacks.push(callback);
+    
+    // Add listener for load and then attach document
+    s.addEventListener("load", init.bind(this));
+    
+    // If the script is placed in the head we  
+    // will make sure the the body exists
+    var ds = d.readyState;
+    
+    if (ds === "complete" || 
+        ds === "loaded" || 
+        ds === "interactive") {
+      // document has been parsed
+      d.body.appendChild(s);
+    } else {
+      // Attach after the body is ready
+      d.addEventListener("DOMContentLoaded", function() {
+        d.body.appendChild(s);
+      });
+    }
+  }
+  
+  // This method allows the user to add callbacks to be 
+  // called when script is loaded and executed
+  ScriptLoader.prototype.onLoad = function(callback) {
+    if (!this.loaded) this.callbacks.push(callback);
+    else callback.call(this);
+  };
+  
+  // Create key for global access to class
+  window.ScriptLoader = ScriptLoader;
+}(document, window));