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