[Summary view] [Print] [Text view]

   1  // $Id: flexible-admin.js,v 1.1.2.5 2010/06/23 00:35:40 merlinofchaos Exp $
   2  
   3  Drupal.flexible = Drupal.flexible || {};
   4  
   5  Drupal.flexible.splitters = [];
   6  
   7  /**
   8   * Fix the height of all splitters to be the same as the items they are
   9   * splitting.
  10   */
  11  Drupal.flexible.fixHeight = function() {
  12    for (i in Drupal.flexible.splitters) {
  13      Drupal.flexible.splitters[i].fixHeight();
  14    }
  15  }
  16  
  17  Drupal.behaviors.flexibleAdmin = function(context) {
  18    // Show/hide layout manager button
  19    $('input#panels-flexible-toggle-layout:not(.panels-flexible-processed)', context)
  20      .addClass('panels-flexible-processed')
  21      .click(function() {
  22        $('.panel-flexible-admin')
  23          .toggleClass('panel-flexible-no-edit-layout')
  24          .toggleClass('panel-flexible-edit-layout');
  25  
  26        if ($('.panel-flexible-admin').hasClass('panel-flexible-edit-layout')) {
  27          $(this).val(Drupal.t('Hide layout designer'));
  28          Drupal.flexible.fixHeight();
  29        }
  30        else {
  31          $(this).val(Drupal.t('Show layout designer'));
  32        }
  33        return false;
  34      });
  35  
  36    // Window splitter behavior.
  37    $('div.panels-flexible-splitter:not(.panels-splitter-processed)', context)
  38      .addClass('panels-splitter-processed')
  39      .each(function() {
  40        Drupal.flexible.splitters.push(new Drupal.flexible.splitter($(this)));
  41      });
  42  
  43    // Sometimes the splitter IS the context and the above syntax won't
  44    // catch that.
  45    if ($(context).hasClass('panels-flexible-splitter')) {
  46      $(context)
  47        .addClass('panels-splitter-processed')
  48        .each(function() {
  49          Drupal.flexible.splitters.push(new Drupal.flexible.splitter($(this)));
  50        });
  51    }
  52  
  53    Drupal.flexible.fixHeight();
  54  };
  55  
  56  Drupal.flexible.splitter = function($splitter) {
  57    var splitter = this;
  58  
  59    this.fixHeight = function() {
  60      // Set the splitter height to the shorter of the two:
  61      $splitter.height(Math.max(this.left.outerHeight(), this.right.outerHeight()));
  62    }
  63  
  64    function splitterStart(event) {
  65      // Show splitting classes.
  66  //    splitter.left.addClass('flexible-splitting');    // Safari selects A/B text on a move
  67  //    splitter.right.addClass('flexible-splitting');    // Safari selects A/B text on a move
  68  //    splitter.splitter.addClass('flexible-splitter-splitting');
  69  
  70      // Bind motion events.
  71      $(document)
  72        .bind("mousemove", splitterMove)
  73        .bind("mouseup", splitterEnd);
  74  
  75      // Calculate some data about our split regions:
  76      splitter.getSizes();
  77  
  78      // The X coordinate where we clicked.
  79      splitter.startX = event.pageX;
  80  
  81      // The current sizes of the left/right panes.
  82      splitter.currentLeft = parseFloat(splitter.left_width) * parseFloat(splitter.left_scale);
  83      splitter.currentRight = parseFloat(splitter.right_width) * parseFloat(splitter.right_scale);
  84  
  85      // The starting sizes of the left right panes.
  86      splitter.startLeft = splitter.currentLeft;
  87      splitter.startRight = splitter.currentRight;
  88  
  89      if (splitter.left_width_type == splitter.right_width_type) {
  90        // If they're the same type, add the two together so we know how
  91        // much space we have for splitting.
  92        splitter.max = splitter.startLeft + splitter.startRight;
  93  
  94        // calculate unit size and min/max width.
  95        if (splitter.left_width_type == '%') {
  96          splitter.left_total = splitter.left.width() / (splitter.left_width / 100);
  97          // One pixel is equivalent to what percentage of the total?
  98          splitter.left_unit = (1 / splitter.left_total) * 100;
  99          splitter.left_min = 5; // minimum % we'll use.
 100        }
 101        else {
 102          splitter.left_unit = 1;
 103          splitter.left_min = 25; // minimum pixels we'll use.
 104        }
 105        if (splitter.right_width_type == '%') {
 106          splitter.right_total = splitter.right.width() / (splitter.right_width / 100);
 107          // One pixel is equivalent to what percentage of the total?
 108          splitter.right_unit = (1 / splitter.right_total) * 100;
 109          splitter.right_min = 5; // minimum % we'll use.
 110        }
 111        else {
 112          splitter.right_unit = 1;
 113          splitter.right_min = 25; // minimum pixels we'll use.
 114        }
 115      }
 116      else {
 117        // Figure out the parent blob's width and set the max to that
 118        splitter.parent = $splitter.parent().parent();
 119  
 120        if (splitter.left_width_type != 'px') {
 121          // Only the 'px' side can resize.
 122          splitter.left_unit = 0;
 123          splitter.right_unit = 1;
 124          splitter.right_min = 25;
 125          splitter.right_padding = parseInt(splitter.parent.css('padding-right'));
 126          splitter.right_parent = parseInt(splitter.right.parent().css('margin-right'));
 127          splitter.max = splitter.right.width() + splitter.left.parent().width() -
 128            (splitter.left.siblings(':not(.panels-flexible-splitter)').length * 25) - 25;
 129        }
 130        else {
 131          splitter.right_unit = 0;
 132          splitter.left_unit = 1;
 133          splitter.left_min = 25;
 134          splitter.left_padding = parseInt(splitter.parent.css('padding-left'));
 135          splitter.left_parent = parseInt(splitter.left.parent().css('margin-left'));
 136          if (splitter.right_id) {
 137            splitter.max = splitter.left.width() + splitter.right.parent().width() -
 138              (splitter.right.siblings(':not(.panels-flexible-splitter)').length * 25) - 25;
 139          }
 140          else {
 141            var subtract = 0;
 142            splitter.left.siblings(':not(.panels-flexible-splitter)').each(function() { subtract += $(this).width()});
 143            splitter.max = splitter.left.parent().width() - subtract;
 144          }
 145        }
 146      }
 147  
 148      var offset = $(splitter.splitter).offset();
 149  
 150      // Create boxes to display widths left and right of the mouse pointer.
 151      // Create left box only if left box is mobile.
 152      if (splitter.left_unit) {
 153        splitter.left_box = $('<div class="flexible-splitter-hover-box">&nbsp;</div>');
 154        $('body').append(splitter.left_box);
 155        splitter.left_box.css('top', offset.top);
 156        splitter.left_box.css('left', event.pageX - 65);
 157  
 158      if (splitter.left_width_type == '%') {
 159          var left = splitter.currentLeft / splitter.left_scale;
 160          splitter.left_box.html(left.toFixed(2) + splitter.left_width_type);
 161        }
 162        else {
 163          // make sure pixel values are always whole integers.
 164          splitter.currentLeft = parseInt(splitter.currentLeft);
 165          splitter.left_box.html(splitter.currentLeft + splitter.left_width_type);
 166        }
 167      }
 168  
 169      // Create the right box if the right side is mobile.
 170      if (splitter.right_unit) {
 171        splitter.right_box = $('<div class="flexible-splitter-hover-box"></div>');
 172        $('body').append(splitter.right_box);
 173        splitter.right_box.css('top', offset.top);
 174        splitter.right_box.css('left', event.pageX + 5);
 175        if (splitter.right_width_type == '%') {
 176          var right = splitter.currentRight / splitter.right_scale;
 177          splitter.right_box.html(right.toFixed(2) + splitter.right_width_type);
 178        }
 179        else {
 180          // make sure pixel values are always whole integers.
 181          splitter.currentRight = parseInt(splitter.currentRight);
 182          splitter.right_box.html(splitter.currentRight + splitter.right_width_type);
 183        }
 184      }
 185  
 186      return false;
 187    };
 188  
 189    function splitterMove(event) {
 190      var diff = splitter.startX - event.pageX;
 191      var moved = 0;
 192      // Bah, javascript has no logical xor operator
 193      if ((splitter.left_unit && !splitter.right_unit) ||
 194        (!splitter.left_unit && splitter.right_unit)) {
 195        // This happens when one side is fixed and the other side is fluid. The
 196        // fixed side actually adjusts while the fluid side does not. However,
 197        // in order to move the fluid side we have to adjust the padding
 198        // on our parent object.
 199        if (splitter.left_unit) {
 200          // Only the left box is allowed to move.
 201          splitter.currentLeft = splitter.startLeft - diff;
 202  
 203          if (splitter.currentLeft < splitter.left_min) {
 204            splitter.currentLeft = splitter.left_min;
 205          }
 206          if (splitter.currentLeft > splitter.max) {
 207            splitter.currentLeft = splitter.max;
 208          }
 209  
 210          // If the shift key is pressed, go with 1% or 10px boundaries.
 211          if (event.shiftKey) {
 212            splitter.currentLeft = parseInt(splitter.currentLeft / 10) * 10;
 213          }
 214          moved = (splitter.startLeft - splitter.currentLeft);
 215        }
 216        else {
 217          // Only the left box is allowed to move.
 218          splitter.currentRight = splitter.startRight + diff;
 219  
 220          if (splitter.currentRight < splitter.right_min) {
 221            splitter.currentRight = splitter.right_min;
 222          }
 223          if (splitter.currentRight > splitter.max) {
 224            splitter.currentRight = splitter.max;
 225          }
 226  
 227          // If the shift key is pressed, go with 1% or 10px boundaries.
 228          if (event.shiftKey) {
 229            splitter.currentRight = parseInt(splitter.currentRight / 10) * 10;
 230          }
 231          moved = (splitter.currentRight - splitter.startRight);
 232        }
 233      }
 234      else {
 235        // If they are both the same type, do this..
 236        // Adjust the left side by the amount we moved.
 237        var left = -1 * diff * splitter.left_unit;
 238  
 239        splitter.currentLeft = splitter.startLeft + left;
 240  
 241        if (splitter.currentLeft < splitter.left_min) {
 242          splitter.currentLeft = splitter.left_min;
 243        }
 244        if (splitter.currentLeft > splitter.max - splitter.right_min) {
 245          splitter.currentLeft = splitter.max - splitter.right_min;
 246        }
 247  
 248        // If the shift key is pressed, go with 1% or 10px boundaries.
 249        if (event.shiftKey) {
 250          if (splitter.left_width_type == '%') {
 251            splitter.currentLeft = parseInt(splitter.currentLeft / splitter.left_scale) * splitter.left_scale;
 252          }
 253          else {
 254            splitter.currentLeft = parseInt(splitter.currentLeft / 10) * 10;
 255          }
 256        }
 257  
 258        // Now automatically make the right side to be the other half.
 259        splitter.currentRight = splitter.max - splitter.currentLeft;
 260  
 261        // recalculate how far we've moved into pixels so we can adjust our visible
 262        // boxes.
 263        moved = (splitter.startLeft - splitter.currentLeft) / splitter.left_unit;
 264      }
 265  
 266      if (splitter.left_unit) {
 267        splitter.left_box.css('left', splitter.startX - 65 - moved);
 268        if (splitter.left_width_type == '%') {
 269          var left = splitter.currentLeft / splitter.left_scale;
 270          splitter.left_box.html(left.toFixed(2) + splitter.left_width_type);
 271        }
 272        else {
 273          splitter.left_box.html(parseInt(splitter.currentLeft) + splitter.left_width_type);
 274        }
 275  
 276        // Finally actually move the left side
 277        splitter.left.css('width', splitter.currentLeft + splitter.left_width_type);
 278      }
 279      else {
 280        // if not moving the left side, adjust the parent padding instead.
 281        splitter.parent.css('padding-right', (splitter.right_padding + moved) + 'px');
 282        splitter.right.parent().css('margin-right', (splitter.right_parent - moved) + 'px');
 283      }
 284  
 285      if (splitter.right_unit) {
 286        splitter.right_box.css('left', splitter.startX + 5 - moved);
 287        if (splitter.right_width_type == '%') {
 288          var right = splitter.currentRight / splitter.right_scale;
 289          splitter.right_box.html(right.toFixed(2) + splitter.right_width_type);
 290        }
 291        else {
 292          splitter.right_box.html(parseInt(splitter.currentRight) + splitter.right_width_type);
 293        }
 294  
 295        // Finally actually move the right side
 296        splitter.right.css('width', splitter.currentRight + splitter.right_width_type);
 297      }
 298      else {
 299        // if not moving the right side, adjust the parent padding instead.
 300        splitter.parent.css('padding-left', (splitter.left_padding - moved) + 'px');
 301        splitter.left.parent().css('margin-left', (splitter.left_parent + moved) + 'px');
 302        if (jQuery.browser.msie) {
 303          splitter.left.parent().css('left', splitter.currentLeft);
 304        }
 305      }
 306      return false;
 307    };
 308  
 309    function splitterEnd(event) {
 310      if (splitter.left_unit) {
 311        splitter.left_box.remove();
 312      }
 313  
 314      if (splitter.right_unit) {
 315        splitter.right_box.remove();
 316      }
 317  
 318      splitter.left.removeClass("flexible-splitting");    // Safari selects A/B text on a move
 319      splitter.right.removeClass("flexible-splitting");    // Safari selects A/B text on a move
 320      splitter.splitter.removeClass("flexible-splitter-splitting");    // Safari selects A/B text on a move
 321      splitter.left.css("-webkit-user-select", "text");    // let Safari select text again
 322      splitter.right.css("-webkit-user-select", "text");    // let Safari select text again
 323  
 324      if (splitter.left_unit) {
 325        splitter.left_width = splitter.currentLeft / parseFloat(splitter.left_scale);
 326      }
 327  
 328      if (splitter.right_unit) {
 329        splitter.right_width = splitter.currentRight / parseFloat(splitter.right_scale);
 330      }
 331  
 332      splitter.putSizes();
 333      Drupal.flexible.fixHeight();
 334  
 335      $(document)
 336        .unbind("mousemove", splitterMove)
 337        .unbind("mouseup", splitterEnd);
 338  
 339      // Store the data on the server.
 340      $.ajax({
 341        type: "POST",
 342        url: Drupal.settings.flexible.resize,
 343        data: {
 344          'left': splitter.left_id,
 345          'left_width': splitter.left_width,
 346          'right': splitter.right_id,
 347          'right_width': splitter.right_width
 348        },
 349        global: true,
 350        success: Drupal.CTools.AJAX.respond,
 351        error: function() {
 352          alert("An error occurred while attempting to process " + Drupal.settings.flexible.resize);
 353        },
 354        dataType: 'json'
 355      });
 356    };
 357  
 358    this.getSizes = function() {
 359      splitter.left_width = $splitter.children('.panels-flexible-splitter-left-width').html();
 360      splitter.left_scale = $splitter.children('.panels-flexible-splitter-left-scale').html();
 361      splitter.left_width_type = $splitter.children('.panels-flexible-splitter-left-width-type').html();
 362      splitter.right_width = $splitter.children('.panels-flexible-splitter-right-width').html();
 363      splitter.right_scale = $splitter.children('.panels-flexible-splitter-right-scale').html();
 364      splitter.right_width_type = $splitter.children('.panels-flexible-splitter-right-width-type').html();
 365    };
 366  
 367    this.putSizes = function() {
 368      $(splitter.left_class + '-width').html(splitter.left_width);
 369      if (splitter.left_class != splitter.right_class) {
 370        $(splitter.right_class + '-width').html(splitter.right_width);
 371      }
 372    }
 373  
 374    splitter.splitter = $splitter;
 375    splitter.left_class = $splitter.children('.panels-flexible-splitter-left').html();
 376    splitter.left_id = $splitter.children('.panels-flexible-splitter-left-id').html();
 377    splitter.left = $(splitter.left_class);
 378    splitter.right_class = $splitter.children('.panels-flexible-splitter-right').html();
 379    splitter.right_id = $splitter.children('.panels-flexible-splitter-right-id').html();
 380    splitter.right = $(splitter.right_class);
 381  
 382    $splitter
 383      .bind("mousedown", splitterStart);
 384  
 385  };
 386  
 387  /**
 388   * Provide an AJAX response command to allow the server to request
 389   * height fixing.
 390   */
 391  Drupal.CTools.AJAX.commands.flexible_fix_height = function() {
 392    Drupal.flexible.fixHeight();
 393  };
 394  
 395  /**
 396   * Provide an AJAX response command to fix the first/last bits of a
 397   * group.
 398   */
 399  Drupal.CTools.AJAX.commands.flexible_fix_firstlast = function(data) {
 400    $(data.selector + ' > div > .' + data.base)
 401      .removeClass(data.base + '-first')
 402      .removeClass(data.base + '-last');
 403  
 404    $(data.selector + ' > div > .' + data.base + ':first')
 405      .addClass(data.base + '-first');
 406    $(data.selector + ' > div > .' + data.base + ':last')
 407      .addClass(data.base + '-last');
 408  };
 409