[Summary view] [Print] [Text view]

   1  YUI.add('gallery-bootstrap-engine', function(Y) {
   2  
   3  /**
   4   * Bootstrap Engine for Plug and Play widgets. This class is meant to be used in
   5   * conjuntion with the Injection Engine (gallery-bootstrap-engine). It facilitates the use of
   6   * an iframe as a sandbox to execute certain tasks and/or a presention element.
   7   *
   8   * @module gallery-bootstrap-engine
   9   * @requires node, base-base
  10   * @class Y.BootstrapEngine
  11   * @param config {Object} Configuration object
  12   * @extends Y.Base
  13   * @constructor
  14   */
  15  
  16  ///////////////////////////////////////////////////////////////////////////
  17  //
  18  // Private shorthands, constants and variables
  19  //
  20  ///////////////////////////////////////////////////////////////////////////
  21  
  22  var ATTR_HOST = 'host';
  23  
  24  ///////////////////////////////////////////////////////////////////////////
  25  //
  26  // Class definition
  27  //
  28  ///////////////////////////////////////////////////////////////////////////
  29  
  30  function BootstrapEngine () {
  31      BootstrapEngine.superclass.constructor.apply(this, arguments);
  32  }
  33  
  34  Y.mix(BootstrapEngine, {
  35  
  36      /**
  37       * The identity of the class.
  38       * @property BootstrapEngine.NAME
  39       * @type string
  40       * @static
  41       * @final
  42       * @readOnly
  43       * @default 'bootstrap'
  44       */
  45      NAME: 'bootstrap',
  46  
  47      /**
  48       * Static property used to define the default attribute configuration of
  49       * the class.
  50       * @property BootstrapEngine.ATTRS
  51       * @type Object
  52       * @protected
  53       * @static
  54       */
  55      ATTRS: {
  56          /**
  57           * @attribute container
  58           * @type {Selector|Node}
  59           * @writeOnce
  60           * @description selector or node for the iframe's container. This is relative to the parent document.
  61           */
  62          container: {
  63               getter: function (v) {
  64                   var host = this.get(ATTR_HOST);
  65                   return host && host.one( v );
  66               }
  67          },
  68          /**
  69           * @attribute iframe
  70           * @type {Node}
  71           * @readyOnly
  72           * @description Node reference to the iframe on the parent document.
  73           */
  74          iframe: {
  75              getter: function () {
  76                  var c = this.get('container');
  77                  return c && c.one('iframe' );
  78              }
  79          },
  80          /**
  81           * @attribute host
  82           * @type {Object}
  83           * @readyOnly
  84           * @description A "Y" reference bound to the parent document.
  85           */
  86          host: {
  87              readyOnly: true
  88          },
  89          /**
  90           * @attribute ready
  91           * @type {Boolean}
  92           * @readyOnly
  93           * @description A "Y" reference bound to the parent document.
  94           */
  95          ready: {
  96              value: false,
  97              readyOnly: true
  98          }
  99      }
 100  
 101  });
 102  
 103  Y.extend(BootstrapEngine, Y.Base, {
 104      /**
 105       * Any extra YUI module that you want to use by default in HOST YUI instance.
 106       * "node" module will be added automatically since it's required by bootstrap.
 107       * @property EXTRAS
 108       * @type Array
 109       * @default []
 110       */
 111      EXTRAS: [],
 112  
 113      /**
 114       * Construction logic executed during Bootstrap Engine instantiation.
 115       *
 116       * @method initializer
 117       * @param cfg {Object} Initial configuration
 118       * @protected
 119       */
 120      initializer: function () {
 121          var instance = this,
 122              parent, win, doc,
 123              use = Y.Array(instance.EXTRAS),
 124              host,
 125              callBootFn = function () {
 126                  // finishing the initialization process async to facilitate
 127                  // addons to hook into _boot/_init/_bind/_ready if needed.
 128                  // todo: after migrating to 3.4 this is not longer needed, and we can use initializer and destroyer
 129                  // in each extension
 130                  Y.later(0, instance, function() {
 131                      instance._boot();
 132                  });
 133              };
 134  
 135          try {
 136              parent = Y.config.win.parent;
 137              win = parent && parent.window;
 138              doc = win && win.document;
 139          } catch(e) {
 140          }
 141  
 142          // parent is optional to facilitate testing and headless execution
 143          if (parent && win && doc) {
 144              host = YUI({
 145                  bootstrap: false,
 146                  win: win,
 147                  doc: doc
 148              });
 149              use.push('node', function() {
 150                  callBootFn();
 151              });
 152  
 153              // Creating a new YUI instance bound to the parent window
 154              instance._set(ATTR_HOST, host.use.apply(host, use));
 155          } else {
 156              callBootFn();
 157          }
 158      },
 159  
 160      /**
 161       * Basic initialization routine, styling the iframe, binding events and
 162       * connecting the bootstrap engine with the injection engine.
 163       *
 164       * @method _boot
 165       * @protected
 166       */
 167      _boot: function () {
 168          var instance = this,
 169              auto;
 170          // connecting with the injection engine before doing anything else
 171          auto = instance._connect();
 172          // adjust the iframe container in preparation for the first display action
 173          instance._styleIframe();
 174          // create some objects and markup
 175          instance._init();
 176          // binding some extra events
 177          instance._bind();
 178          // if the connect process wants to automatically execute the _ready, it should returns true.
 179          if (auto) {
 180              // connecting the bootstrap with the injection engine
 181              instance._ready();
 182          }
 183          // marking the system as ready
 184          instance._set('ready', true);
 185      },
 186  
 187      /**
 188       * Connects the bootstrap with the injection engine running in the parent window. This method
 189       * defines the hand-shake process between them. This method is meant to be called by
 190       * the bootstrap engine _init method to start the connection.
 191       *
 192       * @method _connect
 193       * @protected
 194       */
 195      _connect: function () {
 196          var guid = Y.config.guid, // injection engine guid value
 197              host = this.get(ATTR_HOST),
 198              pwin = host && host.config.win,
 199              // getting a reference to the parent window callback function to notify
 200              // to the injection engine that the bootstrap is ready
 201              callback = guid && pwin && pwin.YUI && pwin.YUI.Env[guid];
 202  
 203          // connecting bootstrap with the injection engines
 204          return ( callback ? callback ( this ) : false );
 205      },
 206  
 207      /**
 208       * Basic initialization routine, usually to create markup, new objects and attributes, etc.
 209       * Overrides/Extends this prototype method to do your mojo.
 210       *
 211       * @method _init
 212       * @protected
 213       */
 214      _init: function () {
 215      },
 216  
 217      /**
 218       * Defines the binding logic for the bootstrap engine, listening for some attributes
 219       * that might change, and defining the set of events that can be exposed to the injection engine.
 220       * Overrides/Extends this prototype method to do your mojo.
 221       *
 222       * @method _bind
 223       * @protected
 224       */
 225      _bind: function () {
 226      },
 227  
 228      /**
 229       * This method will be called only if the connect response with "true", you can use this
 230       * to control the state of the initialization from the injection engine since it might
 231       * take some time to load the stuff in the iframe, and the user might interact with the page
 232       * invalidating the initialization routine.
 233       * Overrides/Extends this prototype method to do your mojo.
 234       *
 235       * @method _ready
 236       * @protected
 237       */
 238      _ready : function () {
 239       },
 240  
 241       /**
 242        * The iframe that holds the bootstrap engine sometimes is used as a UI overlay.
 243        * In this case, you can style it through this method. By default, it will set
 244        * border, frameBorder, marginWidth, marginHeight, leftMargin and topMargin to
 245        * cero, and allowTransparency to true.
 246        *
 247        * @method _styleIframe
 248        * @protected
 249        */
 250       _styleIframe: function () {
 251           var iframe = this.get('iframe');
 252           // making the iframe optional to facilitate tests
 253           if (iframe) {
 254               Y.each (['border', 'marginWidth', 'marginHeight', 'leftMargin', 'topMargin'], function (name) {
 255                   iframe.setAttribute(name, 0);
 256               });
 257           }
 258       }
 259  
 260  });
 261  
 262  Y.BootstrapEngine = BootstrapEngine;
 263  
 264  
 265  }, '@VERSION@' ,{requires:['node','base-base']});
 266  
 267  YUI.add('gallery-bootstrap-collapse', function(Y) {
 268  
 269  /**
 270  A Plugin which provides collapsing/expanding behaviors on a Node with
 271  compatible syntax and markup from Twitter's Bootstrap project.
 272  
 273  @module gallery-bootstrap-collapse
 274  **/
 275  
 276  /**
 277  A Plugin which provides collapsing and expanding behaviors on a Node with
 278  compatible syntax and markup from Twitter's Bootstrap project.
 279  
 280  It possible to have dynamic behaviors without incorporating any
 281  JavaScript by setting <code>data-toggle=collapse</code> on any element.
 282  
 283  However, it can be manually plugged into any node or node list.
 284  
 285  @example
 286  
 287      var node = Y.one('.someNode');
 288      node.plug( Y.Bootstrap.Collapse, config );
 289  
 290      node.collapse.show();
 291  
 292  @class Bootstrap.Collapse
 293  **/
 294  
 295  function CollapsePlugin() {
 296      CollapsePlugin.superclass.constructor.apply(this, arguments);
 297  }
 298  
 299  CollapsePlugin.NAME = 'Bootstrap.Collapse';
 300  CollapsePlugin.NS   = 'collapse';
 301  
 302  Y.extend(CollapsePlugin, Y.Plugin.Base, {
 303      defaults : {
 304          duration  : 0.25,
 305          easing    : 'ease-in',
 306          showClass : 'in',
 307          hideClass : 'out',
 308  
 309          groupSelector : '> .accordion-group > .in'
 310      },
 311  
 312      transitioning: false,
 313  
 314      initializer : function(config) {
 315          this._node = config.host;
 316  
 317          this.config = Y.mix( config, this.defaults );
 318  
 319          this.publish('show', { preventable : true, defaultFn : this.show });
 320          this.publish('hide', { preventable : true, defaultFn : this.hide });
 321  
 322          this._node.on('click', this.toggle, this);
 323      },
 324  
 325      _getTarget: function() {
 326          var node = this._node,
 327              container;
 328  
 329          if ( node.getData('target') ) {
 330              container = Y.one( node.getData('target') );
 331          }
 332          else if ( node.getAttribute('href').indexOf('#') >= 0 ) {
 333              container = Y.one( node.getAttribute('href').substr( node.getAttribute('href').indexOf('#') ) );
 334          }
 335          return container;
 336      },
 337  
 338      /**
 339      * @method hide
 340      * @description Hide the collapsible target, specified by the host's
 341      * <code>data-target</code> or <code>href</code> attribute.
 342      */
 343      hide: function() {
 344          var node      = this._getTarget();
 345  
 346          if ( this.transitioning ) {
 347              return;
 348          }
 349  
 350          if ( node ) {
 351              this._hideElement(node);
 352          }
 353      },
 354  
 355      /**
 356      * @method show
 357      * @description Show the collapsible target, specified by the host's
 358      * <code>data-target</code> or <code>href</code> attribute.
 359      */
 360      show: function() {
 361          var node      = this._getTarget(),
 362              host      = this._node,
 363              self      = this,
 364              parent,
 365              group_selector = this.config.groupSelector;
 366  
 367          if ( this.transitioning ) {
 368              return;
 369          }
 370  
 371          if ( host.getData('parent') ) {
 372              parent = Y.one( host.getData('parent') );
 373              if ( parent ) {
 374                  parent.all(group_selector).each( function(el) {
 375                      self._hideElement(el);
 376                  });
 377              }
 378          }
 379          this._showElement(node);
 380      },
 381  
 382      /**
 383      @method toggle
 384      @description Toggle the state of the collapsible target, specified
 385      by the host's <code>data-target</code> or <code>href</code>
 386      attribute. Calls the <code>show</code> or <code>hide</code> method.
 387      **/
 388      toggle : function(e) {
 389          if ( e && Y.Lang.isFunction(e.preventDefault) ) {
 390              e.preventDefault();
 391          }
 392  
 393          var target = this._getTarget();
 394  
 395          if ( target.hasClass( this.config.showClass ) ) {
 396              this.fire('hide');
 397          } else {
 398              this.fire('show');
 399          }
 400      },
 401  
 402      /**
 403      @method _transition
 404      @description Handles the transition between showing and hiding.
 405      @protected
 406      @param node {Node} node to apply transitions to
 407      @param method {String} 'hide' or 'show'
 408      **/
 409      _transition : function(node, method) {
 410          var self        = this,
 411              config      = this.config,
 412              duration    = config.duration,
 413              easing      = config.easing,
 414              // If we are hiding, then remove the show class.
 415              removeClass = method === 'hide' ? config.showClass : config.hideClass,
 416              // And if we are hiding, add the hide class.
 417              addClass    = method === 'hide' ? config.hideClass : config.showClass,
 418  
 419              to_height   = method === 'hide' ? 0 : null,
 420              event       = method === 'hide' ? 'hidden' : 'shown',
 421  
 422              complete = function() {
 423                  node.removeClass(removeClass);
 424                  node.addClass(addClass);
 425                  self.transitioning = false;
 426                  this.fire( event );
 427              };
 428  
 429          if ( to_height === null ) {
 430              to_height = 0;
 431              node.all('> *').each(function(el) {
 432                  to_height += el.get('scrollHeight');
 433              });
 434          }
 435  
 436          this.transitioning = true;
 437  
 438          node.transition({
 439              height   : to_height +'px',
 440              duration : duration,
 441              easing   : easing
 442          }, complete);
 443      },
 444  
 445      /**
 446      @method _hideElement
 447      @description Calls the <code>_transition</code> method to hide a node.
 448      @protected
 449      @param node {Node} node to hide.
 450      **/
 451      _hideElement : function(node) {
 452          this._transition(node, 'hide');
 453  /*
 454          var showClass = this.showClass,
 455              hideClass = this.hideClass;
 456  
 457          node.removeClass(showClass);
 458          node.addClass(hideClass);
 459  */
 460      },
 461  
 462      /**
 463      @method _showElement
 464      @description Calls the <code>_transition</code> method to show a node.
 465      @protected
 466      @param node {Node} node to show.
 467      **/
 468      _showElement : function(node) {
 469          this._transition(node, 'show');
 470  /*
 471          var showClass = this.showClass,
 472              hideClass = this.hideClass;
 473          node.removeClass(hideClass);
 474          node.addClass(showClass);
 475  */
 476      }
 477  });
 478  
 479  Y.namespace('Bootstrap').Collapse = CollapsePlugin;
 480  
 481  
 482  
 483  }, '@VERSION@' ,{requires:['plugin','transition','event','event-delegate']});
 484  
 485  YUI.add('gallery-bootstrap-dropdown', function(Y) {
 486  
 487  /**
 488  A Plugin which provides dropdown behaviors for dropdown buttons and menu
 489  groups. This utilizes the markup from the Twitter Bootstrap Project.
 490  
 491  @module gallery-bootstrap-dropdown
 492  **/
 493  
 494  /**
 495  A Plugin which provides dropdown behaviors for dropdown buttons and menu
 496  groups. This utilizes the markup from the Twitter Bootstrap Project.
 497  
 498  To automatically gain this functionality, you can simply add the
 499  <code>data-toggle=dropdown</code> attribute to any element.
 500  
 501  It can also be plugged into any node or node list.
 502  
 503  @example
 504  
 505    var node = Y.one('.someNode');
 506    node.plug( Y.Bootstrap.Dropdown );
 507    node.dropdown.show();
 508  
 509  @class Bootstrap.Dropdown
 510  **/
 511  
 512  var NS = Y.namespace('Bootstrap');
 513  
 514  function DropdownPlugin() {
 515    DropdownPlugin.superclass.constructor.apply(this, arguments);
 516  }
 517  
 518  DropdownPlugin.NAME = 'Bootstrap.Dropdown';
 519  DropdownPlugin.NS   = 'dropdown';
 520  
 521  Y.extend( DropdownPlugin, Y.Plugin.Base, {
 522      defaults : {
 523          className : 'open',
 524          target    : 'target',
 525          selector  : ''
 526      },
 527      initializer : function(config) {
 528          this._node = config.host;
 529  
 530          this.config = Y.mix( config, this.defaults );
 531  
 532          this.publish('show', { preventable : true, defaultFn : this.show });
 533          this.publish('hide', { preventable : true, defaultFn : this.hide });
 534  
 535          this._node.on('click', this.toggle, this);
 536      },
 537  
 538      toggle : function() {
 539          var target    = this.getTarget(),
 540              className = this.config.className;
 541  
 542          target.toggleClass( className );
 543          target.once('clickoutside', function() {
 544              target.toggleClass( className );
 545          });
 546      },
 547  
 548      show : function() {
 549          this.getTarget().addClass( this.config.className );
 550      },
 551      hide : function() {
 552          this.getTarget().removeClass( this.config.className );
 553      },
 554      open : function() {
 555          this.getTarget().addClass( this.config.className );
 556      },
 557      close : function() {
 558          this.getTarget().removeClass( this.config.className );
 559      },
 560  
 561      /**
 562      @method getTarget
 563      @description Fetches a Y.NodeList or Y.Node that should be used to modify class names
 564      **/
 565      getTarget : function() {
 566          var node     = this._node,
 567              selector = node.getData( this.config.target ),
 568              target;
 569  
 570          if ( !selector ) {
 571              selector = node.getAttribute('href');
 572              selector = target && target.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7
 573          }
 574  
 575          target = Y.all(selector);
 576          if ( target.size() === 0 ) {
 577              target = node.get('parentNode');
 578          }
 579  
 580          return target;
 581      }
 582  });
 583  
 584  NS.Dropdown = DropdownPlugin;
 585  NS.dropdown_delegation = function() {
 586      Y.delegate('click', function(e) {
 587          var target = e.currentTarget;
 588          e.preventDefault();
 589  
 590          if ( typeof e.target.dropdown === 'undefined' ) {
 591              target.plug( DropdownPlugin );
 592              target.dropdown.toggle();
 593          }
 594      }, document.body, '*[data-toggle=dropdown]' );
 595  };
 596  
 597  
 598  }, '@VERSION@' ,{requires:['plugin','event','event-outside']});
 599  YUI.add('moodle-theme_bootstrapbase-bootstrap', function (Y, NAME) {
 600  
 601  /**
 602  The Moodle Bootstrap theme's bootstrap JavaScript
 603  
 604  @namespace Moodle
 605  @module theme_bootstrapbase-bootstrap
 606  **/
 607  
 608  /**
 609  The Moodle Bootstrap theme's bootstrap JavaScript
 610  
 611  @class Moodle.theme_bootstrapbase.bootstrap
 612  @uses node
 613  @uses selector-css3
 614  @constructor
 615  **/
 616  var CSS = {
 617          ACTIVE: 'active'
 618      },
 619      SELECTORS = {
 620          NAVBAR_BUTTON: '.btn-navbar',
 621          // FIXME This is deliberately wrong because of a breaking issue in the upstream library.
 622          TOGGLECOLLAPSE: '*[data-disabledtoggle="collapse"]'
 623      },
 624      NS = Y.namespace('Moodle.theme_bootstrapbase.bootstrap');
 625  
 626  /**
 627   * Initialise the Moodle Bootstrap theme JavaScript
 628   *
 629   * @method init
 630   */
 631  NS.init = function() {
 632      // We must use these here and *must not* add them to the list of dependencies until
 633      // Moodle fully supports the gallery.
 634      // When debugging is disabled and we seed the Loader with out configuration, if these
 635      // are in the requires array, then the Loader will try to load them from the CDN. It
 636      // does not know that we have added them to the module rollup.
 637      Y.use('gallery-bootstrap-dropdown',
 638              'gallery-bootstrap-collapse',
 639              'gallery-bootstrap-engine', function() {
 640  
 641          // Set up expandable and show.
 642          NS.setup_toggle_expandable();
 643          NS.setup_toggle_show();
 644  
 645          // Set up upstream dropdown delegation.
 646          Y.Bootstrap.dropdown_delegation();
 647      });
 648  };
 649  
 650  /**
 651   * Setup toggling of the Toggle Collapse
 652   *
 653   * @method setup_toggle_expandable
 654   * @private
 655   */
 656  NS.setup_toggle_expandable = function() {
 657      Y.delegate('click', this.toggle_expandable, Y.config.doc, SELECTORS.TOGGLECOLLAPSE, this);
 658  };
 659  
 660  /**
 661   * Use the Y.Bootstrap.Collapse plugin to toggle collapse.
 662   *
 663   * @method toggle_expandable
 664   * @private
 665   * @param {EventFacade} e
 666   */
 667  NS.toggle_expandable = function(e) {
 668      if (typeof e.currentTarget.collapse === 'undefined') {
 669          // Only plug if we haven't already.
 670          e.currentTarget.plug(Y.Bootstrap.Collapse);
 671  
 672          // The plugin will now catch the click and handle the toggle.
 673          // We only need to do this when we plug the node for the first
 674          // time.
 675          e.currentTarget.collapse.toggle();
 676          e.preventDefault();
 677      }
 678  };
 679  
 680  /**
 681   * Set up the show toggler for activating the navigation bar
 682   *
 683   * @method setup_toggle_show
 684   * @private
 685   */
 686  NS.setup_toggle_show = function() {
 687      Y.delegate('click', this.toggle_show, Y.config.doc, SELECTORS.NAVBAR_BUTTON);
 688  };
 689  
 690  /**
 691   * Toggle hiding of the navigation bar
 692   *
 693   * @method toggle_show
 694   * @private
 695   * @param {EventFacade} e
 696   */
 697  NS.toggle_show = function(e) {
 698      // Toggle the active class on both the clicked .btn-navbar and the
 699      // associated target, defined by a CSS selector string set as the
 700      // data-target attribute on the .btn-navbar element in question.
 701      //
 702      // This will allow for us to have multiple .btn-navbar elements
 703      // each with their own collapse/expand targets - these targets
 704      // should be of class .nav-collapse.
 705      var myTarget = this.get('parentNode').one(this.getAttribute('data-target'));
 706      if (myTarget) {
 707          this.siblings(".btn-navbar").removeClass(CSS.ACTIVE);
 708          myTarget.siblings(".nav-collapse").removeClass(CSS.ACTIVE);
 709          myTarget.toggleClass(CSS.ACTIVE);
 710      }
 711      e.currentTarget.toggleClass(CSS.ACTIVE);
 712  };
 713  
 714  
 715  }, '@VERSION@', {"requires": ["node", "selector-css3"]});