stylizer.js 6.3 KB

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