cms/drupal/modules/dashboard/dashboard.js
changeset 541 e756a8c72c3d
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/drupal/modules/dashboard/dashboard.js	Fri Sep 08 12:04:06 2017 +0200
@@ -0,0 +1,223 @@
+/**
+ * @file
+ * Attaches behaviors for the Dashboard module.
+ */
+
+(function ($) {
+
+/**
+ * Implements Drupal.behaviors for the Dashboard module.
+ */
+Drupal.behaviors.dashboard = {
+  attach: function (context, settings) {
+    $('#dashboard', context).once(function () {
+      $(this).prepend('<div class="customize clearfix"><ul class="action-links"><li><a href="#">' + Drupal.t('Customize dashboard') + '</a></li></ul><div class="canvas"></div></div>');
+      $('.customize .action-links a', this).click(Drupal.behaviors.dashboard.enterCustomizeMode);
+    });
+    Drupal.behaviors.dashboard.addPlaceholders();
+    if (Drupal.settings.dashboard.launchCustomize) {
+      Drupal.behaviors.dashboard.enterCustomizeMode();
+    }
+  },
+
+  addPlaceholders: function() {
+    $('#dashboard .dashboard-region .region').each(function () {
+      var empty_text = "";
+      // If the region is empty
+      if ($('.block', this).length == 0) {
+        // Check if we are in customize mode and grab the correct empty text
+        if ($('#dashboard').hasClass('customize-mode')) {
+          empty_text = Drupal.settings.dashboard.emptyRegionTextActive;
+        } else {
+          empty_text = Drupal.settings.dashboard.emptyRegionTextInactive;
+        }
+        // We need a placeholder.
+        if ($('.dashboard-placeholder', this).length == 0) {
+          $(this).append('<div class="dashboard-placeholder"></div>');
+        }
+        $('.dashboard-placeholder', this).html(empty_text);
+      }
+      else {
+        $('.dashboard-placeholder', this).remove();
+      }
+    });
+  },
+
+  /**
+   * Enters "customize" mode by displaying disabled blocks.
+   */
+  enterCustomizeMode: function () {
+    $('#dashboard').addClass('customize-mode customize-inactive');
+    Drupal.behaviors.dashboard.addPlaceholders();
+    // Hide the customize link
+    $('#dashboard .customize .action-links').hide();
+    // Load up the disabled blocks
+    $('div.customize .canvas').load(Drupal.settings.dashboard.drawer, Drupal.behaviors.dashboard.setupDrawer);
+  },
+
+  /**
+   * Exits "customize" mode by simply forcing a page refresh.
+   */
+  exitCustomizeMode: function () {
+    $('#dashboard').removeClass('customize-mode customize-inactive');
+    Drupal.behaviors.dashboard.addPlaceholders();
+    location.href = Drupal.settings.dashboard.dashboard;
+  },
+
+  /**
+   * Sets up the drag-and-drop behavior and the 'close' button.
+   */
+  setupDrawer: function () {
+    $('div.customize .canvas-content input').click(Drupal.behaviors.dashboard.exitCustomizeMode);
+    $('div.customize .canvas-content').append('<a class="button" href="' + Drupal.settings.dashboard.dashboard + '">' + Drupal.t('Done') + '</a>');
+
+    // Initialize drag-and-drop.
+    var regions = $('#dashboard div.region');
+    regions.sortable({
+      connectWith: regions,
+      cursor: 'move',
+      cursorAt: {top:0},
+      dropOnEmpty: true,
+      items: '> div.block, > div.disabled-block',
+      placeholder: 'block-placeholder clearfix',
+      tolerance: 'pointer',
+      start: Drupal.behaviors.dashboard.start,
+      over: Drupal.behaviors.dashboard.over,
+      sort: Drupal.behaviors.dashboard.sort,
+      update: Drupal.behaviors.dashboard.update
+    });
+  },
+
+  /**
+   * Makes the block appear as a disabled block while dragging.
+   *
+   * This function is called on the jQuery UI Sortable "start" event.
+   *
+   * @param event
+   *  The event that triggered this callback.
+   * @param ui
+   *  An object containing information about the item that is being dragged.
+   */
+  start: function (event, ui) {
+    $('#dashboard').removeClass('customize-inactive');
+    var item = $(ui.item);
+
+    // If the block is already in disabled state, don't do anything.
+    if (!item.hasClass('disabled-block')) {
+      item.css({height: 'auto'});
+    }
+  },
+
+  /**
+   * Adapts block's width to the region it is moved into while dragging.
+   *
+   * This function is called on the jQuery UI Sortable "over" event.
+   *
+   * @param event
+   *  The event that triggered this callback.
+   * @param ui
+   *  An object containing information about the item that is being dragged.
+   */
+  over: function (event, ui) {
+    var item = $(ui.item);
+
+    // If the block is in disabled state, remove width.
+    if ($(this).closest('#disabled-blocks').length) {
+      item.css('width', '');
+    }
+    else {
+      item.css('width', $(this).width());
+    }
+  },
+
+  /**
+   * Adapts a block's position to stay connected with the mouse pointer.
+   *
+   * This function is called on the jQuery UI Sortable "sort" event.
+   *
+   * @param event
+   *  The event that triggered this callback.
+   * @param ui
+   *  An object containing information about the item that is being dragged.
+   */
+  sort: function (event, ui) {
+    var item = $(ui.item);
+
+    if (event.pageX > ui.offset.left + item.width()) {
+      item.css('left', event.pageX);
+    }
+  },
+
+  /**
+   * Sends block order to the server, and expand previously disabled blocks.
+   *
+   * This function is called on the jQuery UI Sortable "update" event.
+   *
+   * @param event
+   *   The event that triggered this callback.
+   * @param ui
+   *   An object containing information about the item that was just dropped.
+   */
+  update: function (event, ui) {
+    $('#dashboard').addClass('customize-inactive');
+    var item = $(ui.item);
+
+    // If the user dragged a disabled block, load the block contents.
+    if (item.hasClass('disabled-block')) {
+      var module, delta, itemClass;
+      itemClass = item.attr('class');
+      // Determine the block module and delta.
+      module = itemClass.match(/\bmodule-(\S+)\b/)[1];
+      delta = itemClass.match(/\bdelta-(\S+)\b/)[1];
+
+      // Load the newly enabled block's content.
+      $.get(Drupal.settings.dashboard.blockContent + '/' + module + '/' + delta, {},
+        function (block) {
+          if (block) {
+            item.html(block);
+          }
+
+          if (item.find('div.content').is(':empty')) {
+            item.find('div.content').html(Drupal.settings.dashboard.emptyBlockText);
+          }
+
+          Drupal.attachBehaviors(item);
+        },
+        'html'
+      );
+      // Remove the "disabled-block" class, so we don't reload its content the
+      // next time it's dragged.
+      item.removeClass("disabled-block");
+    }
+
+    Drupal.behaviors.dashboard.addPlaceholders();
+
+    // Let the server know what the new block order is.
+    $.post(Drupal.settings.dashboard.updatePath, {
+        'form_token': Drupal.settings.dashboard.formToken,
+        'regions': Drupal.behaviors.dashboard.getOrder
+      }
+    );
+  },
+
+  /**
+   * Returns the current order of the blocks in each of the sortable regions.
+   *
+   * @return
+   *   The current order of the blocks, in query string format.
+   */
+  getOrder: function () {
+    var order = [];
+    $('#dashboard div.region').each(function () {
+      var region = $(this).parent().attr('id').replace(/-/g, '_');
+      var blocks = $(this).sortable('toArray');
+      $.each(blocks, function() {
+        order.push(region + '[]=' + this);
+      });
+    });
+    order = order.join('&');
+    return order;
+  }
+};
+
+})(jQuery);