5
|
1 |
/*global ajaxurl, isRtl */ |
0
|
2 |
var wpWidgets; |
|
3 |
(function($) { |
|
4 |
|
|
5 |
wpWidgets = { |
|
6 |
|
|
7 |
init : function() { |
5
|
8 |
var rem, the_id, |
|
9 |
self = this, |
|
10 |
chooser = $('.widgets-chooser'), |
|
11 |
selectSidebar = chooser.find('.widgets-chooser-sidebars'), |
|
12 |
sidebars = $('div.widgets-sortables'), |
|
13 |
isRTL = !! ( 'undefined' !== typeof isRtl && isRtl ); |
0
|
14 |
|
5
|
15 |
$('#widgets-right .sidebar-name').click( function() { |
|
16 |
var $this = $(this), |
|
17 |
$wrap = $this.closest('.widgets-holder-wrap'); |
|
18 |
|
|
19 |
if ( $wrap.hasClass('closed') ) { |
|
20 |
$wrap.removeClass('closed'); |
|
21 |
$this.parent().sortable('refresh'); |
0
|
22 |
} else { |
5
|
23 |
$wrap.addClass('closed'); |
0
|
24 |
} |
|
25 |
}); |
|
26 |
|
5
|
27 |
$('#widgets-left .sidebar-name').click( function() { |
|
28 |
$(this).closest('.widgets-holder-wrap').toggleClass('closed'); |
0
|
29 |
}); |
|
30 |
|
5
|
31 |
$(document.body).bind('click.widgets-toggle', function(e) { |
|
32 |
var target = $(e.target), |
|
33 |
css = { 'z-index': 100 }, |
|
34 |
widget, inside, targetWidth, widgetWidth, margin; |
0
|
35 |
|
|
36 |
if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) { |
|
37 |
widget = target.closest('div.widget'); |
|
38 |
inside = widget.children('.widget-inside'); |
5
|
39 |
targetWidth = parseInt( widget.find('input.widget-width').val(), 10 ), |
|
40 |
widgetWidth = widget.parent().width(); |
0
|
41 |
|
|
42 |
if ( inside.is(':hidden') ) { |
5
|
43 |
if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('div.widgets-sortables').length ) { |
|
44 |
if ( widget.closest('div.widget-liquid-right').length ) { |
|
45 |
margin = isRTL ? 'margin-right' : 'margin-left'; |
|
46 |
} else { |
|
47 |
margin = isRTL ? 'margin-left' : 'margin-right'; |
|
48 |
} |
|
49 |
|
|
50 |
css[ margin ] = widgetWidth - ( targetWidth + 30 ) + 'px'; |
|
51 |
widget.css( css ); |
0
|
52 |
} |
5
|
53 |
widget.addClass( 'open' ); |
0
|
54 |
inside.slideDown('fast'); |
|
55 |
} else { |
|
56 |
inside.slideUp('fast', function() { |
5
|
57 |
widget.attr( 'style', '' ); |
|
58 |
widget.removeClass( 'open' ); |
0
|
59 |
}); |
|
60 |
} |
|
61 |
e.preventDefault(); |
|
62 |
} else if ( target.hasClass('widget-control-save') ) { |
|
63 |
wpWidgets.save( target.closest('div.widget'), 0, 1, 0 ); |
|
64 |
e.preventDefault(); |
|
65 |
} else if ( target.hasClass('widget-control-remove') ) { |
|
66 |
wpWidgets.save( target.closest('div.widget'), 1, 1, 0 ); |
|
67 |
e.preventDefault(); |
|
68 |
} else if ( target.hasClass('widget-control-close') ) { |
5
|
69 |
widget = target.closest('div.widget'); |
|
70 |
widget.removeClass( 'open' ); |
|
71 |
wpWidgets.close( widget ); |
0
|
72 |
e.preventDefault(); |
|
73 |
} |
|
74 |
}); |
|
75 |
|
5
|
76 |
sidebars.children('.widget').each( function() { |
|
77 |
var $this = $(this); |
|
78 |
|
|
79 |
wpWidgets.appendTitle( this ); |
|
80 |
|
|
81 |
if ( $this.find( 'p.widget-error' ).length ) { |
|
82 |
$this.find( 'a.widget-action' ).trigger('click'); |
|
83 |
} |
0
|
84 |
}); |
|
85 |
|
|
86 |
$('#widget-list').children('.widget').draggable({ |
|
87 |
connectToSortable: 'div.widgets-sortables', |
|
88 |
handle: '> .widget-top > .widget-title', |
|
89 |
distance: 2, |
|
90 |
helper: 'clone', |
|
91 |
zIndex: 100, |
|
92 |
containment: 'document', |
5
|
93 |
start: function( event, ui ) { |
|
94 |
var chooser = $(this).find('.widgets-chooser'); |
|
95 |
|
0
|
96 |
ui.helper.find('div.widget-description').hide(); |
|
97 |
the_id = this.id; |
5
|
98 |
|
|
99 |
if ( chooser.length ) { |
|
100 |
// Hide the chooser and move it out of the widget |
|
101 |
$( '#wpbody-content' ).append( chooser.hide() ); |
|
102 |
// Delete the cloned chooser from the drag helper |
|
103 |
ui.helper.find('.widgets-chooser').remove(); |
|
104 |
self.clearWidgetSelection(); |
|
105 |
} |
0
|
106 |
}, |
5
|
107 |
stop: function() { |
|
108 |
if ( rem ) { |
0
|
109 |
$(rem).hide(); |
5
|
110 |
} |
0
|
111 |
|
|
112 |
rem = ''; |
|
113 |
} |
|
114 |
}); |
|
115 |
|
|
116 |
sidebars.sortable({ |
|
117 |
placeholder: 'widget-placeholder', |
|
118 |
items: '> .widget', |
|
119 |
handle: '> .widget-top > .widget-title', |
|
120 |
cursor: 'move', |
|
121 |
distance: 2, |
|
122 |
containment: 'document', |
5
|
123 |
start: function( event, ui ) { |
|
124 |
var height, $this = $(this), |
|
125 |
$wrap = $this.parent(), |
|
126 |
inside = ui.item.children('.widget-inside'); |
|
127 |
|
|
128 |
if ( inside.css('display') === 'block' ) { |
|
129 |
inside.hide(); |
|
130 |
$(this).sortable('refreshPositions'); |
|
131 |
} |
|
132 |
|
|
133 |
if ( ! $wrap.hasClass('closed') ) { |
|
134 |
// Lock all open sidebars min-height when starting to drag. |
|
135 |
// Prevents jumping when dragging a widget from an open sidebar to a closed sidebar below. |
|
136 |
height = ui.item.hasClass('ui-draggable') ? $this.height() : 1 + $this.height(); |
|
137 |
$this.css( 'min-height', height + 'px' ); |
|
138 |
} |
0
|
139 |
}, |
|
140 |
|
5
|
141 |
stop: function( event, ui ) { |
|
142 |
var addNew, widgetNumber, $sidebar, $children, child, item, |
|
143 |
$widget = ui.item, |
|
144 |
id = the_id; |
|
145 |
|
|
146 |
if ( $widget.hasClass('deleting') ) { |
|
147 |
wpWidgets.save( $widget, 1, 0, 1 ); // delete widget |
|
148 |
$widget.remove(); |
0
|
149 |
return; |
|
150 |
} |
|
151 |
|
5
|
152 |
addNew = $widget.find('input.add_new').val(); |
|
153 |
widgetNumber = $widget.find('input.multi_number').val(); |
0
|
154 |
|
5
|
155 |
$widget.attr( 'style', '' ).removeClass('ui-draggable'); |
0
|
156 |
the_id = ''; |
|
157 |
|
5
|
158 |
if ( addNew ) { |
|
159 |
if ( 'multi' === addNew ) { |
|
160 |
$widget.html( |
|
161 |
$widget.html().replace( /<[^<>]+>/g, function( tag ) { |
|
162 |
return tag.replace( /__i__|%i%/g, widgetNumber ); |
|
163 |
}) |
|
164 |
); |
|
165 |
|
|
166 |
$widget.attr( 'id', id.replace( '__i__', widgetNumber ) ); |
|
167 |
widgetNumber++; |
|
168 |
|
|
169 |
$( 'div#' + id ).find( 'input.multi_number' ).val( widgetNumber ); |
|
170 |
} else if ( 'single' === addNew ) { |
|
171 |
$widget.attr( 'id', 'new-' + id ); |
0
|
172 |
rem = 'div#' + id; |
|
173 |
} |
5
|
174 |
|
|
175 |
wpWidgets.save( $widget, 0, 0, 1 ); |
|
176 |
$widget.find('input.add_new').val(''); |
|
177 |
$( document ).trigger( 'widget-added', [ $widget ] ); |
|
178 |
} |
|
179 |
|
|
180 |
$sidebar = $widget.parent(); |
|
181 |
|
|
182 |
if ( $sidebar.parent().hasClass('closed') ) { |
|
183 |
$sidebar.parent().removeClass('closed'); |
|
184 |
$children = $sidebar.children('.widget'); |
|
185 |
|
|
186 |
// Make sure the dropped widget is at the top |
|
187 |
if ( $children.length > 1 ) { |
|
188 |
child = $children.get(0); |
|
189 |
item = $widget.get(0); |
|
190 |
|
|
191 |
if ( child.id && item.id && child.id !== item.id ) { |
|
192 |
$( child ).before( $widget ); |
|
193 |
} |
|
194 |
} |
|
195 |
} |
|
196 |
|
|
197 |
if ( addNew ) { |
|
198 |
$widget.find( 'a.widget-action' ).trigger('click'); |
|
199 |
} else { |
|
200 |
wpWidgets.saveOrder( $sidebar.attr('id') ); |
|
201 |
} |
|
202 |
}, |
|
203 |
|
|
204 |
activate: function() { |
|
205 |
$(this).parent().addClass( 'widget-hover' ); |
|
206 |
}, |
|
207 |
|
|
208 |
deactivate: function() { |
|
209 |
// Remove all min-height added on "start" |
|
210 |
$(this).css( 'min-height', '' ).parent().removeClass( 'widget-hover' ); |
|
211 |
}, |
|
212 |
|
|
213 |
receive: function( event, ui ) { |
|
214 |
var $sender = $( ui.sender ); |
|
215 |
|
|
216 |
// Don't add more widgets to orphaned sidebars |
|
217 |
if ( this.id.indexOf('orphaned_widgets') > -1 ) { |
|
218 |
$sender.sortable('cancel'); |
0
|
219 |
return; |
|
220 |
} |
|
221 |
|
5
|
222 |
// If the last widget was moved out of an orphaned sidebar, close and remove it. |
|
223 |
if ( $sender.attr('id').indexOf('orphaned_widgets') > -1 && ! $sender.children('.widget').length ) { |
|
224 |
$sender.parents('.orphan-sidebar').slideUp( 400, function(){ $(this).remove(); } ); |
0
|
225 |
} |
|
226 |
} |
5
|
227 |
}).sortable( 'option', 'connectWith', 'div.widgets-sortables' ); |
0
|
228 |
|
|
229 |
$('#available-widgets').droppable({ |
|
230 |
tolerance: 'pointer', |
|
231 |
accept: function(o){ |
5
|
232 |
return $(o).parent().attr('id') !== 'widget-list'; |
0
|
233 |
}, |
|
234 |
drop: function(e,ui) { |
|
235 |
ui.draggable.addClass('deleting'); |
5
|
236 |
$('#removing-widget').hide().children('span').empty(); |
0
|
237 |
}, |
|
238 |
over: function(e,ui) { |
|
239 |
ui.draggable.addClass('deleting'); |
|
240 |
$('div.widget-placeholder').hide(); |
|
241 |
|
5
|
242 |
if ( ui.draggable.hasClass('ui-sortable-helper') ) { |
0
|
243 |
$('#removing-widget').show().children('span') |
|
244 |
.html( ui.draggable.find('div.widget-title').children('h4').html() ); |
5
|
245 |
} |
0
|
246 |
}, |
|
247 |
out: function(e,ui) { |
|
248 |
ui.draggable.removeClass('deleting'); |
|
249 |
$('div.widget-placeholder').show(); |
5
|
250 |
$('#removing-widget').hide().children('span').empty(); |
|
251 |
} |
|
252 |
}); |
|
253 |
|
|
254 |
// Area Chooser |
|
255 |
$( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) { |
|
256 |
var $element = $( element ), |
|
257 |
name = $element.find( '.sidebar-name h3' ).text(), |
|
258 |
id = $element.find( '.widgets-sortables' ).attr( 'id' ), |
|
259 |
li = $('<li tabindex="0">').text( $.trim( name ) ); |
|
260 |
|
|
261 |
if ( index === 0 ) { |
|
262 |
li.addClass( 'widgets-chooser-selected' ); |
|
263 |
} |
|
264 |
|
|
265 |
selectSidebar.append( li ); |
|
266 |
li.data( 'sidebarId', id ); |
|
267 |
}); |
|
268 |
|
|
269 |
$( '#available-widgets .widget .widget-title' ).on( 'click.widgets-chooser', function() { |
|
270 |
var $widget = $(this).closest( '.widget' ); |
|
271 |
|
|
272 |
if ( $widget.hasClass( 'widget-in-question' ) || $( '#widgets-left' ).hasClass( 'chooser' ) ) { |
|
273 |
self.closeChooser(); |
|
274 |
} else { |
|
275 |
// Open the chooser |
|
276 |
self.clearWidgetSelection(); |
|
277 |
$( '#widgets-left' ).addClass( 'chooser' ); |
|
278 |
$widget.addClass( 'widget-in-question' ).children( '.widget-description' ).after( chooser ); |
|
279 |
|
|
280 |
chooser.slideDown( 300, function() { |
|
281 |
selectSidebar.find('.widgets-chooser-selected').focus(); |
|
282 |
}); |
|
283 |
|
|
284 |
selectSidebar.find( 'li' ).on( 'focusin.widgets-chooser', function() { |
|
285 |
selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' ); |
|
286 |
$(this).addClass( 'widgets-chooser-selected' ); |
|
287 |
} ); |
|
288 |
} |
|
289 |
}); |
|
290 |
|
|
291 |
// Add event handlers |
|
292 |
chooser.on( 'click.widgets-chooser', function( event ) { |
|
293 |
var $target = $( event.target ); |
|
294 |
|
|
295 |
if ( $target.hasClass('button-primary') ) { |
|
296 |
self.addWidget( chooser ); |
|
297 |
self.closeChooser(); |
|
298 |
} else if ( $target.hasClass('button-secondary') ) { |
|
299 |
self.closeChooser(); |
|
300 |
} |
|
301 |
}).on( 'keyup.widgets-chooser', function( event ) { |
|
302 |
if ( event.which === $.ui.keyCode.ENTER ) { |
|
303 |
if ( $( event.target ).hasClass('button-secondary') ) { |
|
304 |
// Close instead of adding when pressing Enter on the Cancel button |
|
305 |
self.closeChooser(); |
|
306 |
} else { |
|
307 |
self.addWidget( chooser ); |
|
308 |
self.closeChooser(); |
|
309 |
} |
|
310 |
} else if ( event.which === $.ui.keyCode.ESCAPE ) { |
|
311 |
self.closeChooser(); |
0
|
312 |
} |
|
313 |
}); |
|
314 |
}, |
|
315 |
|
5
|
316 |
saveOrder : function( sidebarId ) { |
|
317 |
var data = { |
0
|
318 |
action: 'widgets-order', |
|
319 |
savewidgets: $('#_wpnonce_widgets').val(), |
|
320 |
sidebars: [] |
|
321 |
}; |
|
322 |
|
5
|
323 |
if ( sidebarId ) { |
|
324 |
$( '#' + sidebarId ).find( '.spinner:first' ).addClass( 'is-active' ); |
|
325 |
} |
|
326 |
|
0
|
327 |
$('div.widgets-sortables').each( function() { |
5
|
328 |
if ( $(this).sortable ) { |
|
329 |
data['sidebars[' + $(this).attr('id') + ']'] = $(this).sortable('toArray').join(','); |
|
330 |
} |
0
|
331 |
}); |
|
332 |
|
5
|
333 |
$.post( ajaxurl, data, function() { |
|
334 |
$( '.spinner' ).removeClass( 'is-active' ); |
0
|
335 |
}); |
|
336 |
}, |
|
337 |
|
5
|
338 |
save : function( widget, del, animate, order ) { |
|
339 |
var sidebarId = widget.closest('div.widgets-sortables').attr('id'), |
|
340 |
data = widget.find('form').serialize(), a; |
|
341 |
|
0
|
342 |
widget = $(widget); |
5
|
343 |
$( '.spinner', widget ).addClass( 'is-active' ); |
0
|
344 |
|
|
345 |
a = { |
|
346 |
action: 'save-widget', |
|
347 |
savewidgets: $('#_wpnonce_widgets').val(), |
5
|
348 |
sidebar: sidebarId |
0
|
349 |
}; |
|
350 |
|
5
|
351 |
if ( del ) { |
|
352 |
a.delete_widget = 1; |
|
353 |
} |
0
|
354 |
|
|
355 |
data += '&' + $.param(a); |
|
356 |
|
5
|
357 |
$.post( ajaxurl, data, function(r) { |
0
|
358 |
var id; |
|
359 |
|
|
360 |
if ( del ) { |
5
|
361 |
if ( ! $('input.widget_number', widget).val() ) { |
0
|
362 |
id = $('input.widget-id', widget).val(); |
|
363 |
$('#available-widgets').find('input.widget-id').each(function(){ |
5
|
364 |
if ( $(this).val() === id ) { |
0
|
365 |
$(this).closest('div.widget').show(); |
5
|
366 |
} |
0
|
367 |
}); |
|
368 |
} |
|
369 |
|
|
370 |
if ( animate ) { |
|
371 |
order = 0; |
|
372 |
widget.slideUp('fast', function(){ |
|
373 |
$(this).remove(); |
|
374 |
wpWidgets.saveOrder(); |
|
375 |
}); |
|
376 |
} else { |
|
377 |
widget.remove(); |
|
378 |
} |
|
379 |
} else { |
5
|
380 |
$( '.spinner' ).removeClass( 'is-active' ); |
0
|
381 |
if ( r && r.length > 2 ) { |
5
|
382 |
$( 'div.widget-content', widget ).html( r ); |
|
383 |
wpWidgets.appendTitle( widget ); |
|
384 |
$( document ).trigger( 'widget-updated', [ widget ] ); |
0
|
385 |
} |
|
386 |
} |
5
|
387 |
if ( order ) { |
0
|
388 |
wpWidgets.saveOrder(); |
5
|
389 |
} |
0
|
390 |
}); |
|
391 |
}, |
|
392 |
|
|
393 |
appendTitle : function(widget) { |
|
394 |
var title = $('input[id*="-title"]', widget).val() || ''; |
|
395 |
|
5
|
396 |
if ( title ) { |
0
|
397 |
title = ': ' + title.replace(/<[^<>]+>/g, '').replace(/</g, '<').replace(/>/g, '>'); |
5
|
398 |
} |
0
|
399 |
|
|
400 |
$(widget).children('.widget-top').children('.widget-title').children() |
|
401 |
.children('.in-widget-title').html(title); |
|
402 |
|
|
403 |
}, |
|
404 |
|
5
|
405 |
close : function(widget) { |
|
406 |
widget.children('.widget-inside').slideUp('fast', function() { |
|
407 |
widget.attr( 'style', '' ); |
0
|
408 |
}); |
|
409 |
}, |
|
410 |
|
5
|
411 |
addWidget: function( chooser ) { |
|
412 |
var widget, widgetId, add, n, viewportTop, viewportBottom, sidebarBounds, |
|
413 |
sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'), |
|
414 |
sidebar = $( '#' + sidebarId ); |
|
415 |
|
|
416 |
widget = $('#available-widgets').find('.widget-in-question').clone(); |
|
417 |
widgetId = widget.attr('id'); |
|
418 |
add = widget.find( 'input.add_new' ).val(); |
|
419 |
n = widget.find( 'input.multi_number' ).val(); |
|
420 |
|
|
421 |
// Remove the cloned chooser from the widget |
|
422 |
widget.find('.widgets-chooser').remove(); |
|
423 |
|
|
424 |
if ( 'multi' === add ) { |
|
425 |
widget.html( |
|
426 |
widget.html().replace( /<[^<>]+>/g, function(m) { |
|
427 |
return m.replace( /__i__|%i%/g, n ); |
|
428 |
}) |
|
429 |
); |
|
430 |
|
|
431 |
widget.attr( 'id', widgetId.replace( '__i__', n ) ); |
|
432 |
n++; |
|
433 |
$( '#' + widgetId ).find('input.multi_number').val(n); |
|
434 |
} else if ( 'single' === add ) { |
|
435 |
widget.attr( 'id', 'new-' + widgetId ); |
|
436 |
$( '#' + widgetId ).hide(); |
|
437 |
} |
|
438 |
|
|
439 |
// Open the widgets container |
|
440 |
sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed'); |
|
441 |
|
|
442 |
sidebar.append( widget ); |
|
443 |
sidebar.sortable('refresh'); |
|
444 |
|
|
445 |
wpWidgets.save( widget, 0, 0, 1 ); |
|
446 |
// No longer "new" widget |
|
447 |
widget.find( 'input.add_new' ).val(''); |
|
448 |
|
|
449 |
$( document ).trigger( 'widget-added', [ widget ] ); |
|
450 |
|
|
451 |
/* |
|
452 |
* Check if any part of the sidebar is visible in the viewport. If it is, don't scroll. |
|
453 |
* Otherwise, scroll up to so the sidebar is in view. |
|
454 |
* |
|
455 |
* We do this by comparing the top and bottom, of the sidebar so see if they are within |
|
456 |
* the bounds of the viewport. |
|
457 |
*/ |
|
458 |
viewportTop = $(window).scrollTop(); |
|
459 |
viewportBottom = viewportTop + $(window).height(); |
|
460 |
sidebarBounds = sidebar.offset(); |
|
461 |
|
|
462 |
sidebarBounds.bottom = sidebarBounds.top + sidebar.outerHeight(); |
|
463 |
|
|
464 |
if ( viewportTop > sidebarBounds.bottom || viewportBottom < sidebarBounds.top ) { |
|
465 |
$( 'html, body' ).animate({ |
|
466 |
scrollTop: sidebarBounds.top - 130 |
|
467 |
}, 200 ); |
|
468 |
} |
|
469 |
|
|
470 |
window.setTimeout( function() { |
|
471 |
// Cannot use a callback in the animation above as it fires twice, |
|
472 |
// have to queue this "by hand". |
|
473 |
widget.find( '.widget-title' ).trigger('click'); |
|
474 |
}, 250 ); |
|
475 |
}, |
|
476 |
|
|
477 |
closeChooser: function() { |
|
478 |
var self = this; |
|
479 |
|
|
480 |
$( '.widgets-chooser' ).slideUp( 200, function() { |
|
481 |
$( '#wpbody-content' ).append( this ); |
|
482 |
self.clearWidgetSelection(); |
0
|
483 |
}); |
|
484 |
}, |
|
485 |
|
5
|
486 |
clearWidgetSelection: function() { |
|
487 |
$( '#widgets-left' ).removeClass( 'chooser' ); |
|
488 |
$( '.widget-in-question' ).removeClass( 'widget-in-question' ); |
0
|
489 |
} |
|
490 |
}; |
|
491 |
|
5
|
492 |
$(document).ready( function(){ wpWidgets.init(); } ); |
0
|
493 |
|
|
494 |
})(jQuery); |