[Summary view] [Print] [Text view]

   1  // $Id: skinr.js,v 1.1.2.22 2010/05/01 20:11:11 jgirlygirl Exp $
   2  
   3  (function ($) {
   4  
   5  // Make sure our objects are defined.
   6  Drupal.CTools = Drupal.CTools || {};
   7  Drupal.Skinr = Drupal.Skinr || {
   8    editUrl: 'admin/build/skinr/edit/nojs',
   9    infoUrl: 'admin/build/skinr/info',
  10    unloadBehaviors: {},
  11  
  12    loadedFiles: { 'css': [], 'js': [] },
  13    loadedFilesSnapshot: { 'css': [], 'js': [] },
  14  
  15    preparedUnload: {},
  16    finalizedUnload: {},
  17  
  18    submitted: false
  19  };
  20  
  21  /**
  22   * Register functions to run when a skin is unloaded. This usually happens
  23   * when previewing a skin.
  24   */
  25  Drupal.Skinr.registerUnload = function($script_id, $skin, $options, $function) {
  26    if (!$.isArray($options)) {
  27      $options = [$options];
  28    }
  29  
  30    if (Drupal.Skinr.unloadBehaviors[$skin] == undefined) {
  31      Drupal.Skinr.unloadBehaviors[$skin] = {};
  32    }
  33  
  34    for (var $i in $options) {
  35      if (Drupal.Skinr.unloadBehaviors[$skin][$options[$i]] == undefined) {
  36        Drupal.Skinr.unloadBehaviors[$skin][$options[$i]] = {};
  37      }
  38      Drupal.Skinr.unloadBehaviors[$skin][$options[$i]][$script_id] = $function;
  39    }
  40  }
  41  
  42  /**
  43   * Register a skin option to be unloaded.
  44   */
  45  Drupal.Skinr.prepareUnload = function($skin, $options) {
  46    if (!$.isArray($options)) {
  47      $options = [$options];
  48    }
  49  
  50    if (Drupal.Skinr.preparedUnload[$skin] == undefined) {
  51      Drupal.Skinr.preparedUnload[$skin] = [];
  52    }
  53  
  54    for (var $i in $options) {
  55      if ($.inArray($options[$i], Drupal.Skinr.preparedUnload[$skin]) < 0) {
  56        Drupal.Skinr.preparedUnload[$skin][Drupal.Skinr.preparedUnload[$skin].length] = $options[$i];
  57      }
  58    }
  59  }
  60  
  61  /**
  62   * Register a skin option to be unloaded when resetting the dialog.
  63   */
  64  Drupal.Skinr.finalUnload = function($skin, $options) {
  65    if (!$.isArray($options)) {
  66      $options = [$options];
  67    }
  68  
  69    if (Drupal.Skinr.finalizedUnload[$skin] == undefined) {
  70      Drupal.Skinr.finalizedUnload[$skin] = [];
  71    }
  72  
  73    for (var $i in $options) {
  74      if ($.inArray($options[$i], Drupal.Skinr.finalizedUnload[$skin]) < 0) {
  75        Drupal.Skinr.finalizedUnload[$skin][Drupal.Skinr.finalizedUnload[$skin].length] = $options[$i];
  76      }
  77    }
  78  }
  79  
  80  /**
  81   * Go through each skin option that was prepared for unload and run the
  82   * associated regaistered function.
  83   */
  84  Drupal.Skinr.unload = function() {
  85    for (var $skin_name in Drupal.Skinr.preparedUnload) {
  86      if (Drupal.Skinr.preparedUnload[$skin_name] != undefined) {
  87        $skin = Drupal.Skinr.preparedUnload[$skin_name];
  88        for (var $j in $skin) {
  89          $option = $skin[$j];
  90          if (Drupal.Skinr.unloadBehaviors[$skin_name] != undefined) {
  91            if (Drupal.Skinr.unloadBehaviors[$skin_name][$option] != undefined) {
  92              $functions = Drupal.Skinr.unloadBehaviors[$skin_name][$option];
  93              for (var $k in $functions) {
  94                if ($.isFunction(Drupal.Skinr.unloadBehaviors[$skin_name][$option][$k])) {
  95                  Drupal.Skinr.unloadBehaviors[$skin_name][$option][$k]();
  96                }
  97              }
  98            }
  99          }
 100        }
 101      }
 102    }
 103  
 104    Drupal.Skinr.preparedUnload = {};
 105  }
 106  
 107  /**
 108   * Initialize skinr's edit cogs.
 109   */
 110  Drupal.behaviors.Skinr = function(context) {
 111    // Take a snapshot of the current list of files.
 112    if (this.initialized == undefined) {
 113      this.initialized = true;
 114      Drupal.Skinr.registerFile(null, null, null);
 115      Drupal.Skinr.freezeFiles();
 116    }
 117  
 118    for (var i in Drupal.settings.skinr['areas']) {
 119      var $module = Drupal.settings.skinr['areas'][i]['module'];
 120      var $sids = Drupal.settings.skinr['areas'][i]['sids'];
 121      var $id = Drupal.settings.skinr['areas'][i]['id'];
 122  
 123      var $region = $('.skinr-id-' + $id + ':not(.skinr-region-processed)', context).addClass('skinr-region-processed');
 124      if (Drupal.settings.skinr['areas'][i]['classes'] == undefined) {
 125        Drupal.settings.skinr['areas'][i]['classes'] = $($region).attr('class');
 126      }
 127  
 128      if ($region.length > 0) {
 129        var $links = '';
 130        for (var $j in $sids) {
 131          var $classes = '';
 132          if ($j == 0) {
 133            $classes += ' first';
 134          }
 135          if ($j == $sids.length - 1) {
 136            $classes += ' last';
 137          }
 138          if ($sids.length > 1) {
 139            $links += '<li class="skinr-link-' + $j + $classes + '"><a href="' + Drupal.settings.basePath + Drupal.Skinr.editUrl + '/' + $module + '/' + $sids[$j] + '/' + $sids +'" class="skinr-link ctools-use-dialog">' + Drupal.t('Edit skin') + ' ' + (parseInt($j) + 1) + '</a></li>';
 140          }
 141          else {
 142            $links = '<li class="skinr-link-0 first last"><a href="' + Drupal.settings.basePath + Drupal.Skinr.editUrl + '/' + $module + '/' + $sids[$j] +'" class="skinr-link ctools-use-dialog">' + Drupal.t('Edit skin') + '</a></li>';
 143          }
 144        }
 145  
 146        var $wrapper_classes = '';
 147        if ($module == 'page') {
 148          $wrapper_classes += ' skinr-links-wrapper-page';
 149        }
 150  
 151        $region.prepend('<div class="skinr-links-wrapper' + $wrapper_classes + '"><ul class="skinr-links">' + $links + '</ul></div>');
 152        $region.get(0).skinr = { 'module': $module, 'sids': $sids, 'id': $id };
 153  
 154        Drupal.behaviors.Dialog($region);
 155      };
 156    }
 157  
 158    $('div.skinr-links-wrapper:not(.skinr-links-wrapper-processed)', context).addClass('skinr-links-wrapper-processed').each(function () {
 159      var $wrapper = $(this);
 160      var $region = $wrapper.closest('.skinr-region');
 161      var $links = $wrapper.find('ul.skinr-links');
 162      var $trigger = $('<a class="skinr-links-trigger" href="#" />').text(Drupal.t('Configure')).click(
 163        function () {
 164          $wrapper.find('ul.skinr-links').stop(true, true).slideToggle(100);
 165          $wrapper.toggleClass('skinr-links-active');
 166          return false;
 167        }
 168      );
 169  
 170      // Attach hover behavior to trigger and ul.skinr-links.
 171      $trigger.add($links).hover(
 172        function () { $region.addClass('skinr-region-active'); },
 173        function () { $region.removeClass('skinr-region-active'); }
 174      );
 175      // Hide the contextual links when user rolls out of the .skinr-links-region.
 176      $region.bind('mouseleave', Drupal.Skinr.hideLinks).click(Drupal.Skinr.hideLinks);
 177      // Prepend the trigger.
 178      $links.end().prepend($trigger);
 179    });
 180  
 181    // Add an open and a close handler to the dialog.
 182    if (Drupal.Dialog.dialog && !Drupal.Dialog.dialog.hasClass('skinr-dialog-processed')) {
 183      Drupal.Dialog.dialog.addClass('skinr-dialog-processed').bind('dialogbeforeclose', Drupal.Skinr.dialogBeforeClose);
 184    }
 185  }
 186  
 187  /**
 188   * Disables outline for the region contextual links are associated with.
 189   */
 190  Drupal.Skinr.hideLinks = function () {
 191    $(this).closest('.skinr-region')
 192      .find('.skinr-links-active').removeClass('skinr-links-active')
 193      .find('ul.skinr-links').hide();
 194  };
 195  
 196  /**
 197   * Cleanup function run before dialog is closed.
 198   */
 199  Drupal.Skinr.dialogBeforeClose = function(event, ui) {
 200    if (!Drupal.Skinr.submitted) {
 201      // Unload js.
 202      Drupal.Skinr.preparedUnload = Drupal.Skinr.finalizedUnload;
 203      Drupal.Skinr.unload();
 204      Drupal.Skinr.finalizedUnload = {};
 205  
 206      Drupal.Skinr.unfreezeFiles();
 207  
 208      // Reset all the applied style changes.
 209      for (var i in Drupal.settings.skinr['areas']) {
 210        var $id = Drupal.settings.skinr['areas'][i]['id'];
 211        var $classes = Drupal.settings.skinr['areas'][i]['classes'];
 212        $('.skinr-id-' + $id).attr('class', $classes);
 213      }
 214      // @todo Remove added CSS during preview.
 215  
 216      // Let's do another attach behaviors now that our classes are reset.
 217      Drupal.attachBehaviors();
 218    }
 219    Drupal.Skinr.submitted = false;
 220  }
 221  
 222  /**
 223   * Live preview functionality for skinr.
 224   */
 225  Drupal.behaviors.SkinrLivePreview = function(context) {
 226    $('#skinr-ui-form .skinr-ui-current-theme :input:not(.skinr-live-preview-processed)', context).addClass('skinr-live-preview-processed').change(function () {
 227      var $tag = $(this).attr('tagName');
 228      $tag = $tag.toLowerCase();
 229  
 230      var $module = $('#skinr-ui-form #edit-module').val();
 231      var $sid = $('#skinr-ui-form #edit-sid').val();
 232      var $sids = $('#skinr-ui-form #edit-sids').val();
 233      if (!$sids) {
 234        $sids = $sid;
 235      }
 236  
 237      var $name = $(this).attr('name');
 238      $name = $name.replace(/skinr_settings\[.*_group\]\[[^\]]*\]\[widgets\](\[[^\]]*\])?\[([^\]]*)\]/, '$2');
 239  
 240      var $rem_classes = '';
 241      var $add_classes = $(this).val();
 242  
 243      if ($tag == 'select') {
 244        $(this).find('option').each(function() {
 245          $rem_classes += ' ' + $(this).attr('value');
 246        });
 247      }
 248      else if ($tag == 'input') {
 249        var $type = $(this).attr('type');
 250        if ($type == 'checkbox') {
 251          $add_classes = '';
 252          $(this).closest('.form-checkboxes').find('input[type=checkbox]').each(function () {
 253            if ($(this).is(':checked')) {
 254              $add_classes += ' ' + $(this).attr('value');
 255            }
 256            else {
 257              $rem_classes += ' ' + $(this).attr('value');
 258            }
 259          });
 260        }
 261        else if ($type == 'radio') {
 262          $(this).closest('.form-radios').find('input[type=radio]').each(function () {
 263            $rem_classes += ' ' + $(this).attr('value');
 264          });
 265        }
 266      }
 267  
 268      // Use AJAX to grab the CSS and JS filename.
 269      $.ajax({
 270        type: 'GET',
 271        dataType: 'json',
 272        url: Drupal.settings.basePath + Drupal.Skinr.infoUrl + '/' + $name + '/' + $add_classes,
 273        success: function($data) {
 274  
 275          var $command = {
 276            command: 'skinrAfterupdate',
 277            module: $module,
 278            sids: $sids,
 279            classes: {
 280              remove: $rem_classes,
 281              add: $add_classes
 282            },
 283            css: $data.css,
 284            js: $data.js,
 285            nosave: true
 286          };
 287  
 288          Drupal.CTools.AJAX.commands.skinrAfterupdate($command);
 289        }
 290      });
 291    });
 292  }
 293  
 294  /**
 295   * AJAX responder command to dismiss the modal.
 296   */
 297  Drupal.CTools.AJAX.commands.skinrAfterupdate = function(command) {
 298    var $path, $el;
 299    Drupal.Skinr.finalizedUnload = {};
 300  
 301    if (command.nosave == undefined || command.nosave == false) {
 302      // Let the dialogBeforeClose function know we've submitted rather than
 303      Drupal.Skinr.submitted = true;
 304    }
 305  
 306    if (command.module && command.sids && (command.classes.remove || command.classes.add)) {
 307      if (command.css) {
 308        // First unload all unecessary stylesheets
 309        for (var j in command.css) {
 310          $path = Drupal.settings.basePath + command.css[j].path + '?' + Drupal.settings.skinr['css_js_query_string'];
 311          if (!command.css[j].enabled) {
 312            Drupal.Skinr.unloadFile('css', $path);
 313          }
 314        }
 315        // Then load the newly enabled ones
 316        for (var j in command.css) {
 317          $path = Drupal.settings.basePath + command.css[j].path + '?' + Drupal.settings.skinr['css_js_query_string'];
 318          if (command.css[j].enabled) {
 319            Drupal.Skinr.loadFile('css', $path, command.css[j].media);
 320          }
 321        }
 322      }
 323      if (command.js) {
 324        for (var j in command.js) {
 325          $path = Drupal.settings.basePath + command.js[j].path + '?' + Drupal.settings.skinr['css_js_query_string'];
 326          if (command.js[j].enabled) {
 327            Drupal.Skinr.loadFile('js', $path, null);
 328            if (command.nosave) {
 329              // Need to disable this js after closing dialog.
 330              Drupal.Skinr.finalUnload(command.js[j].skin, command.js[j].options);
 331            }
 332          }
 333          else {
 334            // Disable js.
 335            Drupal.Skinr.prepareUnload(command.js[j].skin, command.js[j].options);
 336          }
 337        }
 338      }
 339  
 340      // Unload.
 341      Drupal.Skinr.unload();
 342  
 343      for (var i in Drupal.settings.skinr['areas']) {
 344        if (Drupal.settings.skinr['areas'][i]['module'] == command.module && Drupal.settings.skinr['areas'][i]['sids'] == command.sids) {
 345          $('.skinr-id-' + Drupal.settings.skinr['areas'][i]['id']).removeClass(command.classes.remove).addClass(command.classes.add);
 346          if (command.nosave == undefined || command.nosave == false) {
 347            Drupal.settings.skinr['areas'][i]['classes'] = $('.skinr-id-' + Drupal.settings.skinr['areas'][i]['id']).attr('class');
 348          }
 349        }
 350      }
 351    }
 352  
 353    if (command.nosave == undefined || command.nosave == false) {
 354      // Update our snapshot of loaded files.
 355      Drupal.Skinr.freezeFiles();
 356    }
 357  }
 358  
 359  /**
 360   * Helper functions to keep track of loaded css and js files, and to
 361   * dynamically load and unload them.
 362   */
 363  
 364  Drupal.Skinr.freezeFiles = function () {
 365    Drupal.Skinr.loadedFilesSnapshot = jQuery.extend(true, {}, Drupal.Skinr.loadedFiles);
 366  }
 367  
 368  Drupal.Skinr.unfreezeFiles = function () {
 369    var $diff = Drupal.Skinr.diffFiles(Drupal.Skinr.loadedFiles['css'], Drupal.Skinr.loadedFilesSnapshot['css']);
 370    for ($i in $diff) {
 371      Drupal.Skinr.unloadFile('css', $diff[$i].file, $diff[$i].media);
 372    }
 373  
 374    var $diff = Drupal.Skinr.diffFiles(Drupal.Skinr.loadedFilesSnapshot['css'], Drupal.Skinr.loadedFiles['css']);
 375    for ($i in $diff) {
 376      Drupal.Skinr.loadFile('css', $diff[$i].file, $diff[$i].media);
 377    }
 378  }
 379  
 380  Drupal.Skinr.diffFiles = function($a, $b) {
 381    var $diff = $.grep($a, function($el, $key) {
 382      for (var $i in $b) {
 383        var $obj = $b[$i];
 384        if ($el.file == $obj.file && $el.media == $obj.media) {
 385          return false;
 386        }
 387      }
 388      return true;
 389    });
 390    return $diff;
 391  }
 392  
 393  Drupal.Skinr.registerFile = function($type, $file, $media) {
 394    if (this.initialized == undefined) {
 395      this.initialized = true;
 396      $el = $('link[rel*=style]').each(function() {
 397        Drupal.Skinr.registerFile('css', $(this).attr('href'), $(this).attr('media'));
 398      });
 399      $el = $('script[type*=javascript][src]').each(function() {
 400        Drupal.Skinr.registerFile('js', $(this).attr('src'));
 401      });
 402    }
 403  
 404    if (!$file) {
 405      return false;
 406    }
 407  
 408    if ($.inArray({ file: $file, media: $media }, Drupal.Skinr.loadedFiles[$type]) < 0) {
 409      Drupal.Skinr.loadedFiles[$type][Drupal.Skinr.loadedFiles[$type].length] = { file: $file, media: $media };
 410      return true;
 411    }
 412    return false;
 413  }
 414  
 415  Drupal.Skinr.unregisterFile = function($type, $file) {
 416    for (var $key in Drupal.Skinr.loadedFiles[$type]) {
 417      if (Drupal.Skinr.loadedFiles[$type][$key].file == $file) {
 418        Drupal.Skinr.loadedFiles[$type].splice($key, 1);
 419        return true;
 420      }
 421    }
 422    return false;
 423  }
 424  
 425  Drupal.Skinr.loadFile = function($type, $file, $media) {
 426    if (Drupal.Skinr.registerFile($type, $file, $media)) {
 427      if ($type == 'css') {
 428        $el = $('link[rel*=style][href=' + $file + ']');
 429        if ($el.get() == '') {
 430          $('<link />').attr({
 431            href: $file,
 432            media: $media,
 433            rel: 'stylesheet',
 434            type: 'text/css'
 435          }).appendTo('head');
 436        }
 437      }
 438      else if ($type == 'js') {
 439        try {
 440          $.getScript($file, function($data) {
 441            // This might be a bit excessive to run on every script load,
 442            // but the scripts load asynchronously.
 443            Drupal.attachBehaviors();
 444          });
 445        }
 446        catch (err) {
 447          Drupal.Skinr.unregisterFile($type, $file);
 448        }
 449      }
 450      return true;
 451    }
 452    return false;
 453  }
 454  
 455  Drupal.Skinr.unloadFile = function($type, $file) {
 456    if (Drupal.Skinr.unregisterFile($type, $file)) {
 457      if ($type == 'css') {
 458        $el = $('link[rel*=style][href=' + $file + ']');
 459        if ($el.get() != '') {
 460          $el.disabled = true;
 461          $el.remove();
 462        }
 463        return true;
 464      }
 465      // Can't unload js files!
 466    }
 467    return false;
 468  }
 469  
 470  })(jQuery);