www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/color/color.js

   1 /**
   2 * DO NOT EDIT THIS FILE.
   3 * See the following change record for more information,
   4 * https://www.drupal.org/node/2815083
   5 * @preserve
   6 **/
   7
   8 (function ($, Drupal) {
   9   Drupal.behaviors.color = {
  10     attach: function attach(context, settings) {
  11       var i = void 0;
  12       var j = void 0;
  13       var colors = void 0;
  14
  15       var form = $(context).find('#system-theme-settings .color-form').once('color');
  16       if (form.length === 0) {
  17         return;
  18       }
  19       var inputs = [];
  20       var hooks = [];
  21       var locks = [];
  22       var focused = null;
  23
  24       $('<div class="color-placeholder"></div>').once('color').prependTo(form);
  25       var farb = $.farbtastic('.color-placeholder');
  26
  27       var reference = settings.color.reference;
  28       Object.keys(reference || {}).forEach(function (color) {
  29         reference[color] = farb.RGBToHSL(farb.unpack(reference[color]));
  30       });
  31
  32       var height = [];
  33       var width = [];
  34
  35       function preview() {
  36         Drupal.color.callback(context, settings, form, farb, height, width);
  37       }
  38
  39       function resetScheme() {
  40         form.find('#edit-scheme').each(function () {
  41           this.selectedIndex = this.options.length - 1;
  42         });
  43       }
  44
  45       function shiftColor(given, ref1, ref2) {
  46         var d = void 0;
  47
  48         given = farb.RGBToHSL(farb.unpack(given));
  49
  50         given[0] += ref2[0] - ref1[0];
  51
  52         if (ref1[1] === 0 || ref2[1] === 0) {
  53           given[1] = ref2[1];
  54         } else {
  55           d = ref1[1] / ref2[1];
  56           if (d > 1) {
  57             given[1] /= d;
  58           } else {
  59             given[1] = 1 - (1 - given[1]) * d;
  60           }
  61         }
  62
  63         if (ref1[2] === 0 || ref2[2] === 0) {
  64           given[2] = ref2[2];
  65         } else {
  66           d = ref1[2] / ref2[2];
  67           if (d > 1) {
  68             given[2] /= d;
  69           } else {
  70             given[2] = 1 - (1 - given[2]) * d;
  71           }
  72         }
  73
  74         return farb.pack(farb.HSLToRGB(given));
  75       }
  76
  77       function callback(input, color, propagate, colorScheme) {
  78         var matched = void 0;
  79
  80         $(input).css({
  81           backgroundColor: color,
  82           color: farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
  83         });
  84
  85         if ($(input).val() && $(input).val() !== color) {
  86           $(input).val(color);
  87
  88           if (propagate) {
  89             i = input.i;
  90             for (j = i + 1;; ++j) {
  91               if (!locks[j - 1] || $(locks[j - 1]).is('.is-unlocked')) {
  92                 break;
  93               }
  94               matched = shiftColor(color, reference[input.key], reference[inputs[j].key]);
  95               callback(inputs[j], matched, false);
  96             }
  97             for (j = i - 1;; --j) {
  98               if (!locks[j] || $(locks[j]).is('.is-unlocked')) {
  99                 break;
 100               }
 101               matched = shiftColor(color, reference[input.key], reference[inputs[j].key]);
 102               callback(inputs[j], matched, false);
 103             }
 104
 105             preview();
 106           }
 107
 108           if (!colorScheme) {
 109             resetScheme();
 110           }
 111         }
 112       }
 113
 114       Object.keys(settings.gradients || {}).forEach(function (i) {
 115         $('.color-preview').once('color').append('<div id="gradient-' + i + '"></div>');
 116         var gradient = $('.color-preview #gradient-' + i);
 117
 118         height.push(parseInt(gradient.css('height'), 10) / 10);
 119
 120         width.push(parseInt(gradient.css('width'), 10) / 10);
 121
 122         for (j = 0; j < (settings.gradients[i].direction === 'vertical' ? height[i] : width[i]); ++j) {
 123           gradient.append('<div class="gradient-line"></div>');
 124         }
 125       });
 126
 127       form.find('#edit-scheme').on('change', function () {
 128         var schemes = settings.color.schemes;
 129         var colorScheme = this.options[this.selectedIndex].value;
 130         if (colorScheme !== '' && schemes[colorScheme]) {
 131           colors = schemes[colorScheme];
 132           Object.keys(colors || {}).forEach(function (fieldName) {
 133             callback($('#edit-palette-' + fieldName), colors[fieldName], false, true);
 134           });
 135           preview();
 136         }
 137       });
 138
 139       function focus(e) {
 140         var input = e.target;
 141
 142         if (focused) {
 143           $(focused).off('keyup', farb.updateValue).off('keyup', preview).off('keyup', resetScheme).parent().removeClass('item-selected');
 144         }
 145
 146         focused = input;
 147         farb.linkTo(function (color) {
 148           callback(input, color, true, false);
 149         });
 150         farb.setColor(input.value);
 151         $(focused).on('keyup', farb.updateValue).on('keyup', preview).on('keyup', resetScheme).parent().addClass('item-selected');
 152       }
 153
 154       form.find('.js-color-palette input.form-text').each(function () {
 155         this.key = this.id.substring(13);
 156
 157         farb.linkTo(function () {}).setColor('#000').linkTo(this);
 158
 159         var i = inputs.length;
 160         if (inputs.length) {
 161           var toggleClick = true;
 162           var lock = $('<button class="color-palette__lock">' + Drupal.t('Unlock') + '</button>').on('click', function (e) {
 163             e.preventDefault();
 164             if (toggleClick) {
 165               $(this).addClass('is-unlocked').html(Drupal.t('Lock'));
 166               $(hooks[i - 1]).attr('class', locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-up' : 'color-palette__hook');
 167               $(hooks[i]).attr('class', locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-down' : 'color-palette__hook');
 168             } else {
 169               $(this).removeClass('is-unlocked').html(Drupal.t('Unlock'));
 170               $(hooks[i - 1]).attr('class', locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-down');
 171               $(hooks[i]).attr('class', locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-up');
 172             }
 173             toggleClick = !toggleClick;
 174           });
 175           $(this).after(lock);
 176           locks.push(lock);
 177         }
 178
 179         var hook = $('<div class="color-palette__hook"></div>');
 180         $(this).after(hook);
 181         hooks.push(hook);
 182
 183         $(this).parent().find('.color-palette__lock').trigger('click');
 184         this.i = i;
 185         inputs.push(this);
 186       }).on('focus', focus);
 187
 188       form.find('.js-color-palette label');
 189
 190       inputs[0].focus();
 191
 192       preview();
 193     }
 194   };
 195 })(jQuery, Drupal);