skinr.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. (function ($) {
  2. // Make sure our objects are defined.
  3. Drupal.CTools = Drupal.CTools || {};
  4. Drupal.Skinr = Drupal.Skinr || {};
  5. Drupal.Skinr.editUrl = 'admin/settings/skinr/edit/nojs';
  6. Drupal.Skinr.infoUrl = 'admin/settings/skinr/info';
  7. Drupal.behaviors.Skinr = {
  8. attach: function(context, settings) {
  9. for (var i in settings.skinr['areas']) {
  10. var $module = settings.skinr['areas'][i]['module'];
  11. var $elements = settings.skinr['areas'][i]['elements'];
  12. var $id = settings.skinr['areas'][i]['id'];
  13. var $region = $('.skinr-id-' + $id).once('skinr-region', function() {});
  14. if (settings.skinr['areas'][i]['classes'] == undefined) {
  15. settings.skinr['areas'][i]['classes'] = $($region).attr('class');
  16. }
  17. if ($region.length > 0) {
  18. var $links = '';
  19. for (var $j in $elements) {
  20. var $classes = '';
  21. if ($j == 0) {
  22. $classes += ' first';
  23. }
  24. if ($j == $elements.length - 1) {
  25. $classes += ' last';
  26. }
  27. if ($elements.length > 1) {
  28. $links += '<li class="skinr-link-' + $j + $classes + '"><a href="' + settings.basePath + Drupal.Skinr.editUrl + '/' + $module + '/' + $elements[$j] + '/' + $elements +'" class="skinr-link ctools-use-dialog">' + Drupal.t('Edit skin') + ' ' + (parseInt($j) + 1) + '</a></li>';
  29. }
  30. else {
  31. $links = '<li class="skinr-link-0 first last"><a href="' + settings.basePath + Drupal.Skinr.editUrl + '/' + $module + '/' + $elements[$j] +'" class="skinr-link ctools-use-dialog">' + Drupal.t('Edit skin') + '</a></li>';
  32. }
  33. }
  34. var $wrapper_classes = '';
  35. if ($module == 'page') {
  36. $wrapper_classes += ' skinr-links-wrapper-page';
  37. }
  38. $region.prepend('<div class="skinr-links-wrapper' + $wrapper_classes + '"><ul class="skinr-links">' + $links + '</ul></div>');
  39. $region.get(0).skinr = { 'module': $module, 'elements': $elements, 'id': $id };
  40. Drupal.behaviors.Dialog($region);
  41. };
  42. }
  43. $('div.skinr-links-wrapper', context).once('skinr-links-wrapper', function () {
  44. var $wrapper = $(this);
  45. var $region = $wrapper.closest('.skinr-region');
  46. var $links = $wrapper.find('ul.skinr-links');
  47. var $trigger = $('<a class="skinr-links-trigger" href="#" />').text(Drupal.t('Configure')).click(
  48. function () {
  49. $wrapper.find('ul.skinr-links').stop(true, true).slideToggle(100);
  50. $wrapper.toggleClass('skinr-links-active');
  51. return false;
  52. }
  53. );
  54. // Attach hover behavior to trigger and ul.skinr-links.
  55. $trigger.add($links).hover(
  56. function () { $region.addClass('skinr-region-active'); },
  57. function () { $region.removeClass('skinr-region-active'); }
  58. );
  59. // Hide the contextual links when user rolls out of the .skinr-links-region.
  60. $region.bind('mouseleave', Drupal.Skinr.hideLinks).click(Drupal.Skinr.hideLinks);
  61. // Prepend the trigger.
  62. $links.end().prepend($trigger);
  63. });
  64. // Add a close handler to the dialog.
  65. if (Drupal.Dialog.dialog && !Drupal.Dialog.dialog.hasClass('skinr-dialog-processed')) {
  66. Drupal.Dialog.dialog.addClass('skinr-dialog-processed').bind('dialogbeforeclose', function(event, ui) {
  67. // Reset all the applied style changes.
  68. for (var i in Drupal.settings.skinr['areas']) {
  69. var $id = Drupal.settings.skinr['areas'][i]['id'];
  70. var $classes = Drupal.settings.skinr['areas'][i]['classes'];
  71. $('.skinr-id-' + $id).attr('class', $classes);
  72. }
  73. });
  74. }
  75. }
  76. }
  77. /**
  78. * Disables outline for the region contextual links are associated with.
  79. */
  80. Drupal.Skinr.hideLinks = function () {
  81. $(this).closest('.skinr-region')
  82. .find('.skinr-links-active').removeClass('skinr-links-active')
  83. .find('ul.skinr-links').hide();
  84. };
  85. Drupal.behaviors.SkinrLivePreview = {
  86. attach: function(context, settings) {
  87. $('#skinr-ui-form .skinr-ui-current-theme :input:not(.skinr-live-preview-processed)', context).addClass('skinr-live-preview-processed').change(function () {
  88. var $tag = $(this).attr('tagName');
  89. $tag = $tag.toLowerCase();
  90. var $module = $('#skinr-ui-form #edit-module').val();
  91. var $element = $('#skinr-ui-form #edit-element').val();
  92. var $elements = $('#skinr-ui-form #edit-elements').val();
  93. if (!$elements) {
  94. $elements = $element;
  95. }
  96. var $name = $(this).attr('name');
  97. $name = $name.replace(/skinr_settings\[.*_group\]\[[^\]]*\]\[([^\]]*)\]/, '$1');
  98. var $classes = '';
  99. var $add_classes = $(this).val();
  100. if ($tag == 'select') {
  101. $(this).find('option').each(function() {
  102. $classes += ' ' + $(this).attr('value');
  103. });
  104. }
  105. else if ($tag == 'input') {
  106. }
  107. // Use AJAX to grab the CSS and JS filename.
  108. $.ajax({
  109. type: 'GET',
  110. dataType: 'json',
  111. url: Drupal.settings.basePath + Drupal.Skinr.infoUrl + '/' + $name + '/' + $add_classes,
  112. success: function($data) {
  113. var $command = {
  114. command: 'skinrAfterupdate',
  115. module: $module,
  116. elements: $elements,
  117. classes: {
  118. remove: $classes,
  119. add: $add_classes
  120. },
  121. css: $data.css,
  122. js: $data.js,
  123. nosave: true
  124. };
  125. Drupal.CTools.AJAX.commands.skinrAfterupdate($command);
  126. }
  127. });
  128. });
  129. }
  130. }
  131. /**
  132. * AJAX responder command to dismiss the modal.
  133. */
  134. Drupal.CTools.AJAX.commands.skinrAfterupdate = function(command) {
  135. if (command.module && command.elements && (command.classes.remove || command.classes.add)) {
  136. if (command.css) {
  137. for (var j in command.css) {
  138. $(document.createElement('link')).attr({href: Drupal.settings.basePath + command.css[j].path, media: command.css[j].media, rel: 'stylesheet', type: 'text/css'}).appendTo('head');
  139. }
  140. }
  141. if (command.js) {
  142. for (var j in command.js) {
  143. $.getScript(Drupal.settings.basePath + command.js[j].path);
  144. }
  145. }
  146. for (var i in Drupal.settings.skinr['areas']) {
  147. if (Drupal.settings.skinr['areas'][i]['module'] == command.module && Drupal.settings.skinr['areas'][i]['elements'] == command.elements) {
  148. $('.skinr-id-' + Drupal.settings.skinr['areas'][i]['id']).removeClass(command.classes.remove).addClass(command.classes.add);
  149. if (command.nosave == undefined || command.nosave == false) {
  150. Drupal.settings.skinr['areas'][i]['classes'] = $('.skinr-id-' + Drupal.settings.skinr['areas'][i]['id']).attr('class');
  151. }
  152. }
  153. }
  154. }
  155. }
  156. })(jQuery);