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