[Summary view] [Print] [Text view]

   1  /**
   2   * Customise the dock for this theme.
   3   *
   4   * Tasks we do within this function:
   5   *   - Add 'block' as a class to the dock panel so that its items are styled the same as they are when being displayed
   6   *     in page as blocks.
   7   *   - Constrain the width of the docked block to the window width using a responsible max-width.
   8   *   - Handle the opening/closing of the Bootstrap collapsible navbar on small screens.
   9   */
  10  function customise_dock_for_theme(dock) {
  11      // Add the "block" class to docked blocks.
  12      // This prevents having to restyle all docked blocks and simply use standard block styling.
  13      // First we wait until the panel has been generated.
  14      dock.on('dock:panelgenerated', function() {
  15          // Then we wait until the panel it is being shown for the first time.
  16          dock.get('panel').once('dockpanel:beforeshow', function() {
  17              // Finally we add the block class.
  18              Y.all('.dockeditempanel_content').addClass('block');
  19          });
  20          dock.get('panel').on('dockpanel:beforeshow', function() {
  21              var content = Y.all('.dockeditempanel_content');
  22              // Finally set a responsible max width.
  23              content.setStyle('maxWidth', content.get('winWidth') - dock.get('dockNode').get('offsetWidth') - 10);
  24          });
  25      });
  26  
  27      // Handle the opening/closing of the bootstrap collapsible navbar on small screens.
  28      // This is a complex little bit of JS because we need to simulate Bootstrap actions in order to measure height changes
  29      // in the dom and apply them as spacing to the dock.
  30      dock.on('dock:initialised', function() {
  31          var navbar = Y.one('header.navbar'),
  32              navbarbtn = Y.one('header.navbar .btn-navbar'),
  33              navcollapse = Y.one('header.navbar .nav-collapse'),
  34              container = Y.one('#dock .dockeditem_container'),
  35              margintop = null,
  36              newmargintop = null,
  37              diff = null;
  38          if (navbar && navbarbtn && container) {
  39              margintop = parseInt(container.getStyle('marginTop').replace(/px$/, ''), 10);
  40              diff = margintop - parseInt(navbar.get('offsetHeight'), 10);
  41              navbarbtn.ancestor().on('click', function() {
  42                  // We need to fake the collapsible region being active, this JS *ALWAYS* executes before the bootstrap JS.
  43                  navcollapse.toggleClass('active');
  44                  if (!this.hasClass('active')) {
  45                      newmargintop = (parseInt(navbar.get('offsetHeight'), 10) + diff);
  46                      container.setStyle('marginTop', newmargintop + 'px');
  47                  } else {
  48                      container.setStyle('marginTop', margintop + 'px');
  49                  }
  50                  // Undo the simulation.
  51                  navcollapse.toggleClass('active');
  52                  // Tell the dock things have changed so that it automatically resizes things.
  53                  dock.fire('dock:itemschanged');
  54              }, navbarbtn);
  55          }
  56      });
  57  }