[Summary view] [Print] [Text view]

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