|
1 /** |
|
2 * @file |
|
3 * Attaches behaviors for the Dashboard module. |
|
4 */ |
|
5 |
|
6 (function ($) { |
|
7 |
|
8 /** |
|
9 * Implements Drupal.behaviors for the Dashboard module. |
|
10 */ |
|
11 Drupal.behaviors.dashboard = { |
|
12 attach: function (context, settings) { |
|
13 $('#dashboard', context).once(function () { |
|
14 $(this).prepend('<div class="customize clearfix"><ul class="action-links"><li><a href="#">' + Drupal.t('Customize dashboard') + '</a></li></ul><div class="canvas"></div></div>'); |
|
15 $('.customize .action-links a', this).click(Drupal.behaviors.dashboard.enterCustomizeMode); |
|
16 }); |
|
17 Drupal.behaviors.dashboard.addPlaceholders(); |
|
18 if (Drupal.settings.dashboard.launchCustomize) { |
|
19 Drupal.behaviors.dashboard.enterCustomizeMode(); |
|
20 } |
|
21 }, |
|
22 |
|
23 addPlaceholders: function() { |
|
24 $('#dashboard .dashboard-region .region').each(function () { |
|
25 var empty_text = ""; |
|
26 // If the region is empty |
|
27 if ($('.block', this).length == 0) { |
|
28 // Check if we are in customize mode and grab the correct empty text |
|
29 if ($('#dashboard').hasClass('customize-mode')) { |
|
30 empty_text = Drupal.settings.dashboard.emptyRegionTextActive; |
|
31 } else { |
|
32 empty_text = Drupal.settings.dashboard.emptyRegionTextInactive; |
|
33 } |
|
34 // We need a placeholder. |
|
35 if ($('.dashboard-placeholder', this).length == 0) { |
|
36 $(this).append('<div class="dashboard-placeholder"></div>'); |
|
37 } |
|
38 $('.dashboard-placeholder', this).html(empty_text); |
|
39 } |
|
40 else { |
|
41 $('.dashboard-placeholder', this).remove(); |
|
42 } |
|
43 }); |
|
44 }, |
|
45 |
|
46 /** |
|
47 * Enters "customize" mode by displaying disabled blocks. |
|
48 */ |
|
49 enterCustomizeMode: function () { |
|
50 $('#dashboard').addClass('customize-mode customize-inactive'); |
|
51 Drupal.behaviors.dashboard.addPlaceholders(); |
|
52 // Hide the customize link |
|
53 $('#dashboard .customize .action-links').hide(); |
|
54 // Load up the disabled blocks |
|
55 $('div.customize .canvas').load(Drupal.settings.dashboard.drawer, Drupal.behaviors.dashboard.setupDrawer); |
|
56 }, |
|
57 |
|
58 /** |
|
59 * Exits "customize" mode by simply forcing a page refresh. |
|
60 */ |
|
61 exitCustomizeMode: function () { |
|
62 $('#dashboard').removeClass('customize-mode customize-inactive'); |
|
63 Drupal.behaviors.dashboard.addPlaceholders(); |
|
64 location.href = Drupal.settings.dashboard.dashboard; |
|
65 }, |
|
66 |
|
67 /** |
|
68 * Sets up the drag-and-drop behavior and the 'close' button. |
|
69 */ |
|
70 setupDrawer: function () { |
|
71 $('div.customize .canvas-content input').click(Drupal.behaviors.dashboard.exitCustomizeMode); |
|
72 $('div.customize .canvas-content').append('<a class="button" href="' + Drupal.settings.dashboard.dashboard + '">' + Drupal.t('Done') + '</a>'); |
|
73 |
|
74 // Initialize drag-and-drop. |
|
75 var regions = $('#dashboard div.region'); |
|
76 regions.sortable({ |
|
77 connectWith: regions, |
|
78 cursor: 'move', |
|
79 cursorAt: {top:0}, |
|
80 dropOnEmpty: true, |
|
81 items: '> div.block, > div.disabled-block', |
|
82 placeholder: 'block-placeholder clearfix', |
|
83 tolerance: 'pointer', |
|
84 start: Drupal.behaviors.dashboard.start, |
|
85 over: Drupal.behaviors.dashboard.over, |
|
86 sort: Drupal.behaviors.dashboard.sort, |
|
87 update: Drupal.behaviors.dashboard.update |
|
88 }); |
|
89 }, |
|
90 |
|
91 /** |
|
92 * Makes the block appear as a disabled block while dragging. |
|
93 * |
|
94 * This function is called on the jQuery UI Sortable "start" event. |
|
95 * |
|
96 * @param event |
|
97 * The event that triggered this callback. |
|
98 * @param ui |
|
99 * An object containing information about the item that is being dragged. |
|
100 */ |
|
101 start: function (event, ui) { |
|
102 $('#dashboard').removeClass('customize-inactive'); |
|
103 var item = $(ui.item); |
|
104 |
|
105 // If the block is already in disabled state, don't do anything. |
|
106 if (!item.hasClass('disabled-block')) { |
|
107 item.css({height: 'auto'}); |
|
108 } |
|
109 }, |
|
110 |
|
111 /** |
|
112 * Adapts block's width to the region it is moved into while dragging. |
|
113 * |
|
114 * This function is called on the jQuery UI Sortable "over" event. |
|
115 * |
|
116 * @param event |
|
117 * The event that triggered this callback. |
|
118 * @param ui |
|
119 * An object containing information about the item that is being dragged. |
|
120 */ |
|
121 over: function (event, ui) { |
|
122 var item = $(ui.item); |
|
123 |
|
124 // If the block is in disabled state, remove width. |
|
125 if ($(this).closest('#disabled-blocks').length) { |
|
126 item.css('width', ''); |
|
127 } |
|
128 else { |
|
129 item.css('width', $(this).width()); |
|
130 } |
|
131 }, |
|
132 |
|
133 /** |
|
134 * Adapts a block's position to stay connected with the mouse pointer. |
|
135 * |
|
136 * This function is called on the jQuery UI Sortable "sort" event. |
|
137 * |
|
138 * @param event |
|
139 * The event that triggered this callback. |
|
140 * @param ui |
|
141 * An object containing information about the item that is being dragged. |
|
142 */ |
|
143 sort: function (event, ui) { |
|
144 var item = $(ui.item); |
|
145 |
|
146 if (event.pageX > ui.offset.left + item.width()) { |
|
147 item.css('left', event.pageX); |
|
148 } |
|
149 }, |
|
150 |
|
151 /** |
|
152 * Sends block order to the server, and expand previously disabled blocks. |
|
153 * |
|
154 * This function is called on the jQuery UI Sortable "update" event. |
|
155 * |
|
156 * @param event |
|
157 * The event that triggered this callback. |
|
158 * @param ui |
|
159 * An object containing information about the item that was just dropped. |
|
160 */ |
|
161 update: function (event, ui) { |
|
162 $('#dashboard').addClass('customize-inactive'); |
|
163 var item = $(ui.item); |
|
164 |
|
165 // If the user dragged a disabled block, load the block contents. |
|
166 if (item.hasClass('disabled-block')) { |
|
167 var module, delta, itemClass; |
|
168 itemClass = item.attr('class'); |
|
169 // Determine the block module and delta. |
|
170 module = itemClass.match(/\bmodule-(\S+)\b/)[1]; |
|
171 delta = itemClass.match(/\bdelta-(\S+)\b/)[1]; |
|
172 |
|
173 // Load the newly enabled block's content. |
|
174 $.get(Drupal.settings.dashboard.blockContent + '/' + module + '/' + delta, {}, |
|
175 function (block) { |
|
176 if (block) { |
|
177 item.html(block); |
|
178 } |
|
179 |
|
180 if (item.find('div.content').is(':empty')) { |
|
181 item.find('div.content').html(Drupal.settings.dashboard.emptyBlockText); |
|
182 } |
|
183 |
|
184 Drupal.attachBehaviors(item); |
|
185 }, |
|
186 'html' |
|
187 ); |
|
188 // Remove the "disabled-block" class, so we don't reload its content the |
|
189 // next time it's dragged. |
|
190 item.removeClass("disabled-block"); |
|
191 } |
|
192 |
|
193 Drupal.behaviors.dashboard.addPlaceholders(); |
|
194 |
|
195 // Let the server know what the new block order is. |
|
196 $.post(Drupal.settings.dashboard.updatePath, { |
|
197 'form_token': Drupal.settings.dashboard.formToken, |
|
198 'regions': Drupal.behaviors.dashboard.getOrder |
|
199 } |
|
200 ); |
|
201 }, |
|
202 |
|
203 /** |
|
204 * Returns the current order of the blocks in each of the sortable regions. |
|
205 * |
|
206 * @return |
|
207 * The current order of the blocks, in query string format. |
|
208 */ |
|
209 getOrder: function () { |
|
210 var order = []; |
|
211 $('#dashboard div.region').each(function () { |
|
212 var region = $(this).parent().attr('id').replace(/-/g, '_'); |
|
213 var blocks = $(this).sortable('toArray'); |
|
214 $.each(blocks, function() { |
|
215 order.push(region + '[]=' + this); |
|
216 }); |
|
217 }); |
|
218 order = order.join('&'); |
|
219 return order; |
|
220 } |
|
221 }; |
|
222 |
|
223 })(jQuery); |