[Summary view] [Print] [Text view]

   1  // $Id: panels_ipe.js,v 1.1.2.16 2010/10/19 20:05:19 merlinofchaos Exp $
   2  
   3  // Ensure the $ alias is owned by jQuery.
   4  (function($) {
   5  
   6  Drupal.PanelsIPE = {
   7    editors: {},
   8    bindClickDelete: function(context) {
   9      $('a.pane-delete:not(.pane-delete-processed)', context)
  10        .addClass('pane-delete-processed')
  11        .click(function() {
  12          if (confirm('Remove this pane?')) {
  13            $(this).parents('div.panels-ipe-portlet-wrapper').fadeOut('medium', function() {
  14              $(this).empty().remove();
  15            });
  16            $(this).parents('div.panels-ipe-display-container').addClass('changed');
  17          }
  18          return false;
  19        });
  20    }
  21  }
  22  
  23  // A ready function should be sufficient for this, at least for now
  24  $(function() {
  25    $.each(Drupal.settings.PanelsIPECacheKeys, function() {
  26      Drupal.PanelsIPE.editors[this] = new DrupalPanelsIPE(this, Drupal.settings.PanelsIPESettings[this]);
  27    });
  28  });
  29  
  30  Drupal.behaviors.PanelsIPE = function(context) {
  31    Drupal.PanelsIPE.bindClickDelete(context);
  32  };
  33  
  34  Drupal.CTools.AJAX.commands.initIPE = function(data) {
  35    if (Drupal.PanelsIPE.editors[data.key]) {
  36      Drupal.PanelsIPE.editors[data.key].initEditing(data.data);
  37    }
  38  };
  39  
  40  Drupal.CTools.AJAX.commands.unlockIPE = function(data) {
  41    if (confirm(data.message)) {
  42      var ajaxOptions = {
  43        type: "POST",
  44        url: data.break_path,
  45        data: { 'js': 1 },
  46        global: true,
  47        success: Drupal.CTools.AJAX.respond,
  48        error: function(xhr) {
  49          Drupal.CTools.AJAX.handleErrors(xhr, ipe.cfg.formPath);
  50        },
  51        dataType: 'json'
  52      };
  53  
  54      $.ajax(ajaxOptions);
  55    };
  56  };
  57  
  58  Drupal.CTools.AJAX.commands.endIPE = function(data) {
  59    if (Drupal.PanelsIPE.editors[data.key]) {
  60      Drupal.PanelsIPE.editors[data.key].endEditing(data);
  61    }
  62  };
  63  
  64  
  65  
  66  /**
  67   * Base object (class) definition for the Panels In-Place Editor.
  68   *
  69   * A new instance of this object is instanciated for every unique IPE on a given
  70   * page.
  71   *
  72   * Note that this form is provisional, and we hope to replace it with a more
  73   * flexible, loosely-coupled model that utilizes separate controllers for the
  74   * discrete IPE elements. This will result in greater IPE flexibility.
  75   */
  76  function DrupalPanelsIPE(cache_key, cfg) {
  77    var ipe = this;
  78    this.key = cache_key;
  79    this.state = {};
  80    this.control = $('div#panels-ipe-control-' + cache_key);
  81    this.initButton = $('div.panels-ipe-startedit', this.control);
  82    this.cfg = cfg;
  83    this.changed = false;
  84    this.sortableOptions = $.extend({
  85      revert: 200,
  86      dropOnEmpty: true, // default
  87      opacity: 0.75, // opacity of sortable while sorting
  88      // placeholder: 'draggable-placeholder',
  89      // forcePlaceholderSize: true,
  90      items: 'div.panels-ipe-portlet-wrapper',
  91      handle: 'div.panels-ipe-draghandle',
  92      tolerance: 'pointer',
  93      cursorAt: 'top',
  94      update: this.setChanged,
  95      scroll: true
  96      // containment: ipe.topParent,
  97    }, cfg.sortableOptions || {});
  98  
  99    this.initEditing = function(formdata) {
 100      ipe.topParent = $('div#panels-ipe-display-' + cache_key);
 101      ipe.backup = this.topParent.clone();
 102  
 103      // See http://jqueryui.com/demos/sortable/ for details on the configuration
 104      // parameters used here.
 105      ipe.changed = false;
 106  
 107      $('div.panels-ipe-sort-container', ipe.topParent).sortable(ipe.sortable_options);
 108  
 109      // Since the connectWith option only does a one-way hookup, iterate over
 110      // all sortable regions to connect them with one another.
 111      $('div.panels-ipe-sort-container', ipe.topParent)
 112        .sortable('option', 'connectWith', ['div.panels-ipe-sort-container']);
 113  
 114      $('div.panels-ipe-sort-container', ipe.topParent).bind('sortupdate', function() {
 115        ipe.changed = true;
 116      });
 117  
 118      $('.panels-ipe-form-container', ipe.control).append(formdata);
 119      // bind ajax submit to the form
 120      $('form', ipe.control).submit(function(event) {
 121        url = $(this).attr('action');
 122        try {
 123          var ajaxOptions = {
 124            type: 'POST',
 125            url: url,
 126            data: { 'js': 1 },
 127            global: true,
 128            success: Drupal.CTools.AJAX.respond,
 129            error: function(xhr) {
 130              Drupal.CTools.AJAX.handleErrors(xhr, url);
 131            },
 132            dataType: 'json'
 133          };
 134          $(this).ajaxSubmit(ajaxOptions);
 135        }
 136        catch (err) {
 137          alert("An error occurred while attempting to process " + url);
 138          return false;
 139        }
 140        return false;
 141      });
 142  
 143      $('input:submit', ipe.control).each(function() {
 144        if ($(this).attr('id') == 'panels-ipe-save') {
 145          $(this).click(ipe.saveEditing);
 146        };
 147        if ($(this).attr('id') == 'panels-ipe-cancel') {
 148          $(this).click(ipe.cancelEditing);
 149        };
 150      });
 151  
 152      // Perform visual effects in a particular sequence.
 153      ipe.initButton.css('position', 'absolute');
 154      ipe.initButton.fadeOut('normal');
 155      $('.panels-ipe-on').show('normal');
 156  //    $('.panels-ipe-on').fadeIn('normal');
 157      ipe.topParent.addClass('panels-ipe-editing');
 158    }
 159  
 160    this.endEditing = function(data) {
 161      $('.panels-ipe-form-container', ipe.control).empty();
 162      // Re-show all the IPE non-editing meta-elements
 163      $('div.panels-ipe-off').show('fast');
 164  
 165      // Re-hide all the IPE meta-elements
 166      $('div.panels-ipe-on').hide('fast');
 167      ipe.initButton.css('position', 'static');
 168      ipe.topParent.removeClass('panels-ipe-editing');
 169     $('div.panels-ipe-sort-container', ipe.topParent).sortable("destroy");
 170    };
 171  
 172    this.saveEditing = function() {
 173      // Put our button in.
 174      this.form.clk = this;
 175  
 176      $('div.panels-ipe-region', ipe.topParent).each(function() {
 177        var val = '';
 178        var region = $(this).attr('id').split('panels-ipe-regionid-')[1];
 179        $(this).find('div.panels-ipe-portlet-wrapper').each(function() {
 180          var id = $(this).attr('id').split('panels-ipe-paneid-')[1];
 181          if (id) {
 182            if (val) {
 183              val += ',';
 184            }
 185            val += id;
 186          }
 187        });
 188        $('input#edit-panel-pane-' + region, ipe.control).val(val);
 189      });
 190    }
 191  
 192    this.cancelEditing = function() {
 193      // Put our button in.
 194      this.form.clk = this;
 195  
 196      if (ipe.topParent.hasClass('changed')) {
 197        ipe.changed = true;
 198      }
 199  
 200      if (!ipe.changed || confirm(Drupal.t('This will discard all unsaved changes. Are you sure?'))) {
 201        ipe.topParent.fadeOut('medium', function() {
 202          ipe.topParent.replaceWith(ipe.backup.clone());
 203          ipe.topParent = $('div#panels-ipe-display-' + ipe.key);
 204  
 205          // Processing of these things got lost in the cloning, but the classes remained behind.
 206          // @todo this isn't ideal but I can't seem to figure out how to keep an unprocessed backup
 207          // that will later get processed.
 208          $('.ctools-use-modal-processed', ipe.topParent).removeClass('ctools-use-modal-processed');
 209          $('.pane-delete-processed', ipe.topParent).removeClass('pane-delete-processed');
 210          ipe.topParent.fadeIn('medium');
 211          Drupal.attachBehaviors();
 212        });
 213      }
 214      else {
 215        // Cancel the submission.
 216        return false;
 217      }
 218    };
 219  
 220    this.createSortContainers = function() {
 221      $('div.panels-ipe-region', this.topParent).each(function() {
 222        $('div.panels-ipe-portlet-marker', this).parent()
 223          .wrapInner('<div class="panels-ipe-sort-container" />');
 224  
 225        // Move our gadgets outside of the sort container so that sortables
 226        // cannot be placed after them.
 227        $('div.panels-ipe-portlet-static', this).each(function() {
 228          $(this).appendTo($(this).parent().parent());
 229        });
 230  
 231        // Add a marker so we can drag things to empty containers.
 232        $('div.panels-ipe-sort-container', this).append('<div>&nbsp;</div>');
 233      });
 234    }
 235  
 236    this.createSortContainers();
 237  
 238    var ajaxOptions = {
 239      type: "POST",
 240      url: ipe.cfg.formPath,
 241      data: { 'js': 1 },
 242      global: true,
 243      success: Drupal.CTools.AJAX.respond,
 244      error: function(xhr) {
 245        Drupal.CTools.AJAX.handleErrors(xhr, ipe.cfg.formPath);
 246      },
 247      dataType: 'json'
 248    };
 249  
 250    $('div.panels-ipe-startedit', this.control).click(function() {
 251      var $this = $(this);
 252      $.ajax(ajaxOptions);
 253    });
 254  };
 255  
 256  })(jQuery);