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       Object.keys(settings.gradients || {}).forEach(function (i) {
  36         $('.color-preview').once('color').append('<div id="gradient-' + i + '"></div>');
  37         var gradient = $('.color-preview #gradient-' + i);
  38
  39         height.push(parseInt(gradient.css('height'), 10) / 10);
  40
  41         width.push(parseInt(gradient.css('width'), 10) / 10);
  42
  43         for (j = 0; j < (settings.gradients[i].direction === 'vertical' ? height[i] : width[i]); ++j) {
  44           gradient.append('<div class="gradient-line"></div>');
  45         }
  46       });
  47
  48       form.find('#edit-scheme').on('change', function () {
  49         var schemes = settings.color.schemes;
  50         var colorScheme = this.options[this.selectedIndex].value;
  51         if (colorScheme !== '' && schemes[colorScheme]) {
  52           colors = schemes[colorScheme];
  53           Object.keys(colors || {}).forEach(function (fieldName) {
  54             callback($('#edit-palette-' + fieldName), colors[fieldName], false, true);
  55           });
  56           preview();
  57         }
  58       });
  59
  60       function preview() {
  61         Drupal.color.callback(context, settings, form, farb, height, width);
  62       }
  63
  64       function shiftColor(given, ref1, ref2) {
  65         var d = void 0;
  66
  67         given = farb.RGBToHSL(farb.unpack(given));
  68
  69         given[0] += ref2[0] - ref1[0];
  70
  71         if (ref1[1] === 0 || ref2[1] === 0) {
  72           given[1] = ref2[1];
  73         } else {
  74           d = ref1[1] / ref2[1];
  75           if (d > 1) {
  76             given[1] /= d;
  77           } else {
  78             given[1] = 1 - (1 - given[1]) * d;
  79           }
  80         }
  81
  82         if (ref1[2] === 0 || ref2[2] === 0) {
  83           given[2] = ref2[2];
  84         } else {
  85           d = ref1[2] / ref2[2];
  86           if (d > 1) {
  87             given[2] /= d;
  88           } else {
  89             given[2] = 1 - (1 - given[2]) * d;
  90           }
  91         }
  92
  93         return farb.pack(farb.HSLToRGB(given));
  94       }
  95
  96       function callback(input, color, propagate, colorScheme) {
  97         var matched = void 0;
  98
  99         $(input).css({
 100           backgroundColor: color,
 101           color: farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
 102         });
 103
 104         if ($(input).val() && $(input).val() !== color) {
 105           $(input).val(color);
 106
 107           if (propagate) {
 108             i = input.i;
 109             for (j = i + 1;; ++j) {
 110               if (!locks[j - 1] || $(locks[j - 1]).is('.is-unlocked')) {
 111                 break;
 112               }
 113               matched = shiftColor(color, reference[input.key], reference[inputs[j].key]);
 114               callback(inputs[j], matched, false);
 115             }
 116             for (j = i - 1;; --j) {
 117               if (!locks[j] || $(locks[j]).is('.is-unlocked')) {
 118                 break;
 119               }
 120               matched = shiftColor(color, reference[input.key], reference[inputs[j].key]);
 121               callback(inputs[j], matched, false);
 122             }
 123
 124             preview();
 125           }
 126
 127           if (!colorScheme) {
 128             resetScheme();
 129           }
 130         }
 131       }
 132
 133       function resetScheme() {
 134         form.find('#edit-scheme').each(function () {
 135           this.selectedIndex = this.options.length - 1;
 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);