[Summary view] [Print] [Text view]

   1  /* global MANAGER */
   2  
   3  /**
   4   * This file contains the Block Region class used by the drag and drop manager.
   5   *
   6   * Provides drag and drop functionality for blocks.
   7   *
   8   * @module moodle-core-blockdraganddrop
   9   */
  10  
  11  /**
  12   * Constructs a new block region object.
  13   *
  14   * @namespace M.core.blockdraganddrop
  15   * @class BlockRegion
  16   * @constructor
  17   * @extends Base
  18   */
  19  var BLOCKREGION = function() {
  20      BLOCKREGION.superclass.constructor.apply(this, arguments);
  21  };
  22  BLOCKREGION.prototype = {
  23      /**
  24       * Called during the initialisation process of the object.
  25       * @method initializer
  26       */
  27      initializer: function() {
  28          var node = this.get('node');
  29          Y.log('Block region `' + this.get('region') + '` initialising', 'info');
  30          if (!node) {
  31              Y.log('block region known about but no HTML structure found for it. Guessing structure.', 'warn');
  32              node = this.create_and_add_node();
  33          }
  34          var body = Y.one('body'),
  35              hasblocks = node.all('.' + CSS.BLOCK).size() > 0,
  36              hasregionclass = this.get_has_region_class();
  37          this.set('hasblocks', hasblocks);
  38          if (!body.hasClass(hasregionclass)) {
  39              body.addClass(hasregionclass);
  40          }
  41          body.addClass((hasblocks) ? this.get_used_region_class() : this.get_empty_region_class());
  42          body.removeClass((hasblocks) ? this.get_empty_region_class() : this.get_used_region_class());
  43      },
  44      /**
  45       * Creates a generic block region node and adds it to the DOM at the best guess location.
  46       * Any calling of this method is an unfortunate circumstance.
  47       * @method create_and_add_node
  48       * @return Node The newly created Node
  49       */
  50      create_and_add_node: function() {
  51          var c = Y.Node.create,
  52              region = this.get('region'),
  53              node = c('<div id="block-region-' + region + '" data-droptarget="1"></div>')
  54                  .addClass(CSS.BLOCKREGION)
  55                  .setData('blockregion', region),
  56              regions = this.get('manager').get('regions'),
  57              i,
  58              haspre = false,
  59              haspost = false,
  60              added = false,
  61              pre,
  62              post;
  63  
  64          for (i in regions) {
  65              if (regions[i].match(/(pre|left)/)) {
  66                  haspre = regions[i];
  67              } else if (regions[i].match(/(post|right)/)) {
  68                  haspost = regions[i];
  69              }
  70          }
  71  
  72          if (haspre !== false && haspost !== false) {
  73              if (region === haspre) {
  74                  post = Y.one('#block-region-' + haspost);
  75                  if (post) {
  76                      post.insert(node, 'before');
  77                      added = true;
  78                  }
  79              } else {
  80                  pre = Y.one('#block-region-' + haspre);
  81                  if (pre) {
  82                      pre.insert(node, 'after');
  83                      added = true;
  84                  }
  85              }
  86          }
  87          if (added === false) {
  88              Y.one('body').append(node);
  89          }
  90          this.set('node', node);
  91  
  92          return node;
  93      },
  94  
  95      /**
  96       * Change the move icons to enhanced drag handles and changes the cursor to a move icon when over the header.
  97       * @param M.core.dragdrop the block manager
  98       * @method change_block_move_icons
  99       */
 100      change_block_move_icons: function(manager) {
 101          var handle, icon;
 102          this.get('node').all('.' + CSS.BLOCK + ' a.' + CSS.EDITINGMOVE).each(function(moveicon) {
 103              moveicon.setStyle('cursor', 'move');
 104              handle = manager.get_drag_handle(moveicon.getAttribute('title'), '', 'icon', true);
 105              icon = handle.one('img');
 106              icon.addClass('iconsmall');
 107              icon.removeClass('icon');
 108              moveicon.replace(handle);
 109          });
 110      },
 111  
 112      /**
 113       * Returns the class name on the body that signifies the document knows about this region.
 114       * @method get_has_region_class
 115       * @return String
 116       */
 117      get_has_region_class: function() {
 118          return 'has-region-' + this.get('region');
 119      },
 120  
 121      /**
 122       * Returns the class name to use on the body if the region contains no blocks.
 123       * @method get_empty_region_class
 124       * @return String
 125       */
 126      get_empty_region_class: function() {
 127          return 'empty-region-' + this.get('region');
 128      },
 129  
 130      /**
 131       * Returns the class name to use on the body if the region contains blocks.
 132       * @method get_used_region_class
 133       * @return String
 134       */
 135      get_used_region_class: function() {
 136          return 'used-region-' + this.get('region');
 137      },
 138  
 139      /**
 140       * Returns the node to use as the drop target for this region.
 141       * @method get_droptarget
 142       * @return Node
 143       */
 144      get_droptarget: function() {
 145          var node = this.get('node');
 146          if (node.test('[data-droptarget="1"]')) {
 147              return node;
 148          }
 149          return node.one('[data-droptarget="1"]');
 150      },
 151  
 152      /**
 153       * Enables the block region so that we can be sure the user can see it.
 154       * This is done even if it is empty.
 155       * @method enable
 156       */
 157      enable: function() {
 158          Y.one('body').addClass(this.get_used_region_class()).removeClass(this.get_empty_region_class());
 159      },
 160  
 161      /**
 162       * Disables the region if it contains no blocks, essentially hiding it from the user.
 163       * @method disable_if_required
 164       */
 165      disable_if_required: function() {
 166          if (this.get('node').all('.' + CSS.BLOCK).size() === 0) {
 167              Y.one('body').addClass(this.get_empty_region_class()).removeClass(this.get_used_region_class());
 168          }
 169      }
 170  };
 171  Y.extend(BLOCKREGION, Y.Base, BLOCKREGION.prototype, {
 172      NAME: 'core-blocks-dragdrop-blockregion',
 173      ATTRS: {
 174  
 175          /**
 176           * The drag and drop manager that created this block region instance.
 177           * @attribute manager
 178           * @type M.core.blockdraganddrop.Manager
 179           * @writeOnce
 180           */
 181          manager: {
 182              // Can only be set during initialisation and must be set then.
 183              writeOnce: 'initOnly',
 184              validator: function(value) {
 185                  return Y.Lang.isObject(value) && value instanceof MANAGER;
 186              }
 187          },
 188  
 189          /**
 190           * The name of the block region this object represents.
 191           * @attribute region
 192           * @type String
 193           * @writeOnce
 194           */
 195          region: {
 196              // Can only be set during initialisation and must be set then.
 197              writeOnce: 'initOnly',
 198              validator: function(value) {
 199                  return Y.Lang.isString(value);
 200              }
 201          },
 202  
 203          /**
 204           * The node the block region HTML starts at.s
 205           * @attribute region
 206           * @type Y.Node
 207           */
 208          node: {
 209              validator: function(value) {
 210                  return Y.Lang.isObject(value) || Y.Lang.isNull(value);
 211              }
 212          },
 213  
 214          /**
 215           * True if the block region currently contains blocks.
 216           * @attribute hasblocks
 217           * @type Boolean
 218           * @default false
 219           */
 220          hasblocks: {
 221              value: false,
 222              validator: function(value) {
 223                  return Y.Lang.isBoolean(value);
 224              }
 225          }
 226      }
 227  });