annotate sites/all/modules/ctools/js/stylizer.js @ 9:830c812b520f

added smtp module
author root <root@paio.local>
date Mon, 28 Oct 2013 15:34:27 +0000
parents ff03f76ab3fe
children
rev   line source
danielebarchiesi@0 1
danielebarchiesi@0 2 (function ($) {
danielebarchiesi@0 3 Drupal.CTools = Drupal.CTools || {};
danielebarchiesi@0 4 Drupal.CTools.Stylizer = {};
danielebarchiesi@0 5
danielebarchiesi@0 6 Drupal.CTools.Stylizer.addFarbtastic = function(context) {
danielebarchiesi@0 7 // This behavior attaches by ID, so is only valid once on a page.
danielebarchiesi@0 8 if ($('ctools_stylizer_color_scheme_form .color-form.Stylizer-processed').size()) {
danielebarchiesi@0 9 return;
danielebarchiesi@0 10 }
danielebarchiesi@0 11
danielebarchiesi@0 12 var form = $('.color-form', context);
danielebarchiesi@0 13 var inputs = [];
danielebarchiesi@0 14 var hooks = [];
danielebarchiesi@0 15 var locks = [];
danielebarchiesi@0 16 var focused = null;
danielebarchiesi@0 17
danielebarchiesi@0 18 // Add Farbtastic
danielebarchiesi@0 19 $(form).prepend('<div id="placeholder"></div>').addClass('color-processed');
danielebarchiesi@0 20 var farb = $.farbtastic('#placeholder');
danielebarchiesi@0 21
danielebarchiesi@0 22 // Decode reference colors to HSL
danielebarchiesi@0 23 /*var reference = Drupal.settings.Stylizer.reference.clone();
danielebarchiesi@0 24 for (i in reference) {
danielebarchiesi@0 25 reference[i] = farb.RGBToHSL(farb.unpack(reference[i]));
danielebarchiesi@0 26 } */
danielebarchiesi@0 27
danielebarchiesi@0 28 // Set up colorscheme selector
danielebarchiesi@0 29 $('#edit-scheme', form).change(function () {
danielebarchiesi@0 30 var colors = this.options[this.selectedIndex].value;
danielebarchiesi@0 31 if (colors != '') {
danielebarchiesi@0 32 colors = colors.split(',');
danielebarchiesi@0 33 for (i in colors) {
danielebarchiesi@0 34 callback(inputs[i], colors[i], false, true);
danielebarchiesi@0 35 }
danielebarchiesi@0 36 }
danielebarchiesi@0 37 });
danielebarchiesi@0 38
danielebarchiesi@0 39 /**
danielebarchiesi@0 40 * Shift a given color, using a reference pair (ref in HSL).
danielebarchiesi@0 41 *
danielebarchiesi@0 42 * This algorithm ensures relative ordering on the saturation and luminance
danielebarchiesi@0 43 * axes is preserved, and performs a simple hue shift.
danielebarchiesi@0 44 *
danielebarchiesi@0 45 * It is also symmetrical. If: shift_color(c, a, b) == d,
danielebarchiesi@0 46 * then shift_color(d, b, a) == c.
danielebarchiesi@0 47 */
danielebarchiesi@0 48 function shift_color(given, ref1, ref2) {
danielebarchiesi@0 49 // Convert to HSL
danielebarchiesi@0 50 given = farb.RGBToHSL(farb.unpack(given));
danielebarchiesi@0 51
danielebarchiesi@0 52 // Hue: apply delta
danielebarchiesi@0 53 given[0] += ref2[0] - ref1[0];
danielebarchiesi@0 54
danielebarchiesi@0 55 // Saturation: interpolate
danielebarchiesi@0 56 if (ref1[1] == 0 || ref2[1] == 0) {
danielebarchiesi@0 57 given[1] = ref2[1];
danielebarchiesi@0 58 }
danielebarchiesi@0 59 else {
danielebarchiesi@0 60 var d = ref1[1] / ref2[1];
danielebarchiesi@0 61 if (d > 1) {
danielebarchiesi@0 62 given[1] /= d;
danielebarchiesi@0 63 }
danielebarchiesi@0 64 else {
danielebarchiesi@0 65 given[1] = 1 - (1 - given[1]) * d;
danielebarchiesi@0 66 }
danielebarchiesi@0 67 }
danielebarchiesi@0 68
danielebarchiesi@0 69 // Luminance: interpolate
danielebarchiesi@0 70 if (ref1[2] == 0 || ref2[2] == 0) {
danielebarchiesi@0 71 given[2] = ref2[2];
danielebarchiesi@0 72 }
danielebarchiesi@0 73 else {
danielebarchiesi@0 74 var d = ref1[2] / ref2[2];
danielebarchiesi@0 75 if (d > 1) {
danielebarchiesi@0 76 given[2] /= d;
danielebarchiesi@0 77 }
danielebarchiesi@0 78 else {
danielebarchiesi@0 79 given[2] = 1 - (1 - given[2]) * d;
danielebarchiesi@0 80 }
danielebarchiesi@0 81 }
danielebarchiesi@0 82
danielebarchiesi@0 83 return farb.pack(farb.HSLToRGB(given));
danielebarchiesi@0 84 }
danielebarchiesi@0 85
danielebarchiesi@0 86 /**
danielebarchiesi@0 87 * Callback for Farbtastic when a new color is chosen.
danielebarchiesi@0 88 */
danielebarchiesi@0 89 function callback(input, color, propagate, colorscheme) {
danielebarchiesi@0 90 // Set background/foreground color
danielebarchiesi@0 91 $(input).css({
danielebarchiesi@0 92 backgroundColor: color,
danielebarchiesi@0 93 'color': farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
danielebarchiesi@0 94 });
danielebarchiesi@0 95
danielebarchiesi@0 96 // Change input value
danielebarchiesi@0 97 if (input.value && input.value != color) {
danielebarchiesi@0 98 input.value = color;
danielebarchiesi@0 99
danielebarchiesi@0 100 // Update locked values
danielebarchiesi@0 101 if (propagate) {
danielebarchiesi@0 102 var i = input.i;
danielebarchiesi@0 103 for (j = i + 1; ; ++j) {
danielebarchiesi@0 104 if (!locks[j - 1] || $(locks[j - 1]).is('.unlocked')) break;
danielebarchiesi@0 105 var matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
danielebarchiesi@0 106 callback(inputs[j], matched, false);
danielebarchiesi@0 107 }
danielebarchiesi@0 108 for (j = i - 1; ; --j) {
danielebarchiesi@0 109 if (!locks[j] || $(locks[j]).is('.unlocked')) break;
danielebarchiesi@0 110 var matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
danielebarchiesi@0 111 callback(inputs[j], matched, false);
danielebarchiesi@0 112 }
danielebarchiesi@0 113
danielebarchiesi@0 114 }
danielebarchiesi@0 115
danielebarchiesi@0 116 // Reset colorscheme selector
danielebarchiesi@0 117 if (!colorscheme) {
danielebarchiesi@0 118 resetScheme();
danielebarchiesi@0 119 }
danielebarchiesi@0 120 }
danielebarchiesi@0 121
danielebarchiesi@0 122 }
danielebarchiesi@0 123
danielebarchiesi@0 124 /**
danielebarchiesi@0 125 * Reset the color scheme selector.
danielebarchiesi@0 126 */
danielebarchiesi@0 127 function resetScheme() {
danielebarchiesi@0 128 $('#edit-scheme', form).each(function () {
danielebarchiesi@0 129 this.selectedIndex = this.options.length - 1;
danielebarchiesi@0 130 });
danielebarchiesi@0 131 }
danielebarchiesi@0 132
danielebarchiesi@0 133 // Focus the Farbtastic on a particular field.
danielebarchiesi@0 134 function focus() {
danielebarchiesi@0 135 var input = this;
danielebarchiesi@0 136 // Remove old bindings
danielebarchiesi@0 137 focused && $(focused).unbind('keyup', farb.updateValue)
danielebarchiesi@0 138 .unbind('keyup', resetScheme)
danielebarchiesi@0 139 .parent().removeClass('item-selected');
danielebarchiesi@0 140
danielebarchiesi@0 141 // Add new bindings
danielebarchiesi@0 142 focused = this;
danielebarchiesi@0 143 farb.linkTo(function (color) { callback(input, color, true, false); });
danielebarchiesi@0 144 farb.setColor(this.value);
danielebarchiesi@0 145 $(focused).keyup(farb.updateValue).keyup(resetScheme)
danielebarchiesi@0 146 .parent().addClass('item-selected');
danielebarchiesi@0 147 }
danielebarchiesi@0 148
danielebarchiesi@0 149 // Initialize color fields
danielebarchiesi@0 150 $('#palette input.form-text', form)
danielebarchiesi@0 151 .each(function () {
danielebarchiesi@0 152 // Extract palette field name
danielebarchiesi@0 153 this.key = this.id.substring(13);
danielebarchiesi@0 154
danielebarchiesi@0 155 // Link to color picker temporarily to initialize.
danielebarchiesi@0 156 farb.linkTo(function () {}).setColor('#000').linkTo(this);
danielebarchiesi@0 157
danielebarchiesi@0 158 // Add lock
danielebarchiesi@0 159 var i = inputs.length;
danielebarchiesi@0 160 if (inputs.length) {
danielebarchiesi@0 161 var lock = $('<div class="lock"></div>').toggle(
danielebarchiesi@0 162 function () {
danielebarchiesi@0 163 $(this).addClass('unlocked');
danielebarchiesi@0 164 $(hooks[i - 1]).attr('class',
danielebarchiesi@0 165 locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook'
danielebarchiesi@0 166 );
danielebarchiesi@0 167 $(hooks[i]).attr('class',
danielebarchiesi@0 168 locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook down' : 'hook'
danielebarchiesi@0 169 );
danielebarchiesi@0 170 },
danielebarchiesi@0 171 function () {
danielebarchiesi@0 172 $(this).removeClass('unlocked');
danielebarchiesi@0 173 $(hooks[i - 1]).attr('class',
danielebarchiesi@0 174 locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down'
danielebarchiesi@0 175 );
danielebarchiesi@0 176 $(hooks[i]).attr('class',
danielebarchiesi@0 177 locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook both' : 'hook up'
danielebarchiesi@0 178 );
danielebarchiesi@0 179 }
danielebarchiesi@0 180 );
danielebarchiesi@0 181 $(this).after(lock);
danielebarchiesi@0 182 locks.push(lock);
danielebarchiesi@0 183 };
danielebarchiesi@0 184
danielebarchiesi@0 185 // Add hook
danielebarchiesi@0 186 var $this = $(this);
danielebarchiesi@0 187 var hook = $('<div class="hook"></div>');
danielebarchiesi@0 188 $this.after(hook);
danielebarchiesi@0 189 hooks.push(hook);
danielebarchiesi@0 190
danielebarchiesi@0 191 $this.parent().find('.lock').click();
danielebarchiesi@0 192 this.i = i;
danielebarchiesi@0 193 inputs.push(this);
danielebarchiesi@0 194 })
danielebarchiesi@0 195 .focus(focus);
danielebarchiesi@0 196
danielebarchiesi@0 197 $('#palette label', form);
danielebarchiesi@0 198
danielebarchiesi@0 199 // Focus first color
danielebarchiesi@0 200 focus.call(inputs[0]);
danielebarchiesi@0 201 };
danielebarchiesi@0 202
danielebarchiesi@0 203 Drupal.behaviors.CToolsColorSettings = {
danielebarchiesi@0 204 attach: function() {
danielebarchiesi@0 205 $('.ctools-stylizer-color-edit:not(.ctools-color-processed)')
danielebarchiesi@0 206 .addClass('ctools-color-processed')
danielebarchiesi@0 207 .each(function() {
danielebarchiesi@0 208 Drupal.CTools.Stylizer.addFarbtastic('#' + $(this).attr('id'));
danielebarchiesi@0 209 });
danielebarchiesi@0 210
danielebarchiesi@0 211 $('div.form-item div.ctools-style-icon:not(.ctools-color-processed)')
danielebarchiesi@0 212 .addClass('ctools-color-processed')
danielebarchiesi@0 213 .click(function() {
danielebarchiesi@0 214 $widget = $('input', $(this).parent());
danielebarchiesi@0 215 // Toggle if a checkbox, turn on if a radio.
danielebarchiesi@0 216 $widget.attr('checked', !$widget.attr('checked') || $widget.is('input[type=radio]'));
danielebarchiesi@0 217 });
danielebarchiesi@0 218 }
danielebarchiesi@0 219 }
danielebarchiesi@0 220 })(jQuery);