context_ui.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. (function($) {
  2. /**
  3. * Context plugin form.
  4. */
  5. function DrupalContextPlugins(form) {
  6. this.form = form;
  7. // Sync the form selector and state field with the list of plugins currently enabled.
  8. this.setState = function() {
  9. var state = [];
  10. $('.context-plugin-list > li', this.form).each(function() {
  11. var plugin = $(this).attr('class').split('context-plugin-')[1].split(' ')[0];
  12. if ($(this).is('.disabled')) {
  13. $('.context-plugin-selector select option[value="'+plugin+'"]', this.form).show();
  14. }
  15. else {
  16. state.push(plugin);
  17. $('.context-plugin-selector select option[value="'+plugin+'"]', this.form).hide();
  18. }
  19. });
  20. // Set the hidden plugin list state.
  21. $('.context-plugin-selector input.context-plugins-state', this.form).val(state.join(','));
  22. // Reset the selector.
  23. $('.context-plugin-selector select', this.form).val(0);
  24. return this;
  25. };
  26. // Add a plugin to the list.
  27. this.addPlugin = function(plugin) {
  28. $('.context-plugin-list > li.context-plugin-'+plugin, this.form).removeClass('disabled');
  29. this.showForm(plugin).setState();
  30. return this;
  31. };
  32. // Remove a plugin from the list.
  33. this.removePlugin = function(plugin) {
  34. $('.context-plugin-list > li.context-plugin-'+plugin, this.form).addClass('disabled');
  35. this.hideForm(plugin).setState();
  36. return this;
  37. };
  38. // Show a plugin form.
  39. this.showForm = function(plugin) {
  40. $('.context-plugin-forms > .context-plugin-form.active-form', this.form).removeClass('active-form');
  41. $('.context-plugin-forms > .context-plugin-form-'+plugin, this.form).addClass('active-form');
  42. $('.context-plugin-list > li > a').removeClass('active-form');
  43. $('.context-plugin-list > li.context-plugin-'+plugin+' > a').addClass('active-form');
  44. return this;
  45. };
  46. // Show a plugin form.
  47. this.hideForm = function(plugin) {
  48. $('.context-plugin-forms > .context-plugin-form-'+plugin, this.form).removeClass('active-form');
  49. $('.context-plugin-list > li.context-plugin-'+plugin+' > a').removeClass('active-form');
  50. return this;
  51. };
  52. // Select handler.
  53. $('.context-plugin-selector select', this.form).change(function() {
  54. var plugins = $(this).parents('div.context-plugins').data('contextPlugins');
  55. if (plugins) {
  56. var plugin = $(this).val();
  57. plugins.addPlugin(plugin);
  58. }
  59. });
  60. // Show form handler.
  61. $('.context-plugin-list > li > a', this.form).click(function() {
  62. var plugins = $(this).parents('div.context-plugins').data('contextPlugins');
  63. if (plugins) {
  64. var plugin = $(this).attr('href').split('#context-plugin-form-')[1];
  65. plugins.showForm(plugin);
  66. }
  67. return false;
  68. });
  69. // Remove handler.
  70. $('.context-plugin-list span.remove', this.form).click(function() {
  71. var plugins = $(this).parents('div.context-plugins').data('contextPlugins');
  72. if (plugins) {
  73. var plugin = $(this).parent().attr('href').split('#context-plugin-form-')[1];
  74. plugins.removePlugin(plugin);
  75. }
  76. return false;
  77. });
  78. // Set the plugin states.
  79. this.setState();
  80. }
  81. Drupal.behaviors.context_ui = { attach: function(context) {
  82. // Initialize context plugin form.
  83. $('form div.context-plugins:not(.context-ui-processed)').each(function() {
  84. $(this).addClass('context-ui-processed');
  85. $(this).data('contextPlugins', new DrupalContextPlugins($(this)));
  86. });
  87. // Initialize context editor.
  88. if ($().pageEditor) {
  89. $('form.context-editor:not(.context-ui-processed)')
  90. .addClass('context-ui-processed')
  91. .pageEditor()
  92. .each(function() {
  93. var editor = $(this);
  94. var defaultContext = $('li.context-editable', this).attr('id').split('context-editable-trigger-')[1];
  95. $(this).data('defaultContext', defaultContext);
  96. // Attach start/end handlers to editable contexts.
  97. $('li.context-editable a.edit', editor).click(function() {
  98. var trigger = $(this).parents('li.context-editable').addClass('context-editing');
  99. var context = trigger.attr('id').split('context-editable-trigger-')[1];
  100. editor.pageEditor('start', context);
  101. return false;
  102. });
  103. $('li.context-editable a.done', editor).click(function() {
  104. editor.pageEditor('end');
  105. return false;
  106. });
  107. $(editor).submit(function() {
  108. if (editor.pageEditor('isEditing')) {
  109. editor.pageEditor('end');
  110. }
  111. });
  112. // Handler for start event.
  113. editor.bind('start.pageEditor', function(event, context) {
  114. // Fallback to first context if param is empty.
  115. if (!context) {
  116. context = $(this).data('defaultContext');
  117. $('li#context-editable-trigger-'+context, this).addClass('context-editing');
  118. }
  119. $(document.body).addClass('context-editing');
  120. $('#context-editable-'+context, this).show();
  121. });
  122. // Handler for end event.
  123. editor.bind('end.pageEditor', function(event, context) {
  124. $(document.body).removeClass('context-editing');
  125. $('div.contexts div.context-editable', this).hide();
  126. $('li.context-editable').removeClass('context-editing');
  127. $('form.context-editor').addClass('edited');
  128. });
  129. });
  130. }
  131. }};
  132. })(jQuery);