[Summary view] [Print] [Text view]

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