|
1 /** |
|
2 * Option Tree UI |
|
3 * |
|
4 * Dependencies: jQuery, jQuery UI, ColorPicker |
|
5 * |
|
6 * @author Derek Herman (derek@valendesigns.com) |
|
7 */ |
|
8 ;(function($) { |
|
9 OT_UI = { |
|
10 processing: false, |
|
11 init: function() { |
|
12 this.init_hide_body(); |
|
13 this.init_sortable(); |
|
14 this.init_add(); |
|
15 this.init_edit(); |
|
16 this.init_remove(); |
|
17 this.init_edit_title() |
|
18 this.init_edit_id(); |
|
19 this.init_activate_layout(); |
|
20 this.init_upload(); |
|
21 this.init_upload_remove(); |
|
22 this.init_numeric_slider(); |
|
23 this.init_tabs(); |
|
24 this.init_radio_image_select(); |
|
25 this.init_select_wrapper(); |
|
26 this.fix_upload_parent(); |
|
27 this.fix_colorpicker(); |
|
28 this.fix_textarea(); |
|
29 this.replicate_ajax(); |
|
30 this.reset_settings(); |
|
31 }, |
|
32 init_hide_body: function(elm,type) { |
|
33 var css = '.option-tree-setting-body'; |
|
34 if ( type == 'parent' ) { |
|
35 $(css).not( elm.parent().parent().children(css) ).hide(); |
|
36 } else if ( type == 'child' ) { |
|
37 elm.closest('ul').find(css).not( elm.parent().parent().children(css) ).hide(); |
|
38 } else if ( type == 'child-add' ) { |
|
39 elm.children().find(css).hide(); |
|
40 } else if ( type == 'toggle' ) { |
|
41 elm.parent().parent().children(css).toggle(); |
|
42 } else { |
|
43 $(css).hide(); |
|
44 } |
|
45 }, |
|
46 init_remove_active: function(elm,type) { |
|
47 var css = '.option-tree-setting-edit'; |
|
48 if ( type == 'parent' ) { |
|
49 $(css).not(elm).removeClass('active'); |
|
50 } else if ( type == 'child' ) { |
|
51 elm.closest('ul').find(css).not(elm).removeClass('active'); |
|
52 } else if ( type == 'child-add' ) { |
|
53 elm.children().find(css).removeClass('active'); |
|
54 } else { |
|
55 $(css).removeClass('active'); |
|
56 } |
|
57 }, |
|
58 init_sortable: function() { |
|
59 $('.option-tree-sortable').each( function() { |
|
60 if ( $(this).children('li').length ) { |
|
61 var elm = $(this); |
|
62 elm.show(); |
|
63 elm.sortable({ |
|
64 items: 'li:not(.ui-state-disabled)', |
|
65 handle: 'div.open', |
|
66 placeholder: 'ui-state-highlight', |
|
67 start: function (event, ui) { |
|
68 ui.placeholder.height(ui.item.height()-2); |
|
69 }, |
|
70 stop: function(evt, ui) { |
|
71 setTimeout( |
|
72 function(){ |
|
73 OT_UI.update_ids(elm); |
|
74 }, |
|
75 200 |
|
76 ) |
|
77 } |
|
78 }); |
|
79 } |
|
80 }); |
|
81 }, |
|
82 init_add: function() { |
|
83 $('.option-tree-section-add').live('click', function(e) { |
|
84 e.preventDefault(); |
|
85 OT_UI.add(this,'section'); |
|
86 }); |
|
87 $('.option-tree-setting-add').live('click', function(e) { |
|
88 e.preventDefault(); |
|
89 OT_UI.add(this,'setting'); |
|
90 }); |
|
91 $('.option-tree-help-add').live('click', function(e) { |
|
92 e.preventDefault(); |
|
93 OT_UI.add(this,'the_contextual_help'); |
|
94 }); |
|
95 $('.option-tree-choice-add').live('click', function(e) { |
|
96 e.preventDefault(); |
|
97 OT_UI.add(this,'choice'); |
|
98 }); |
|
99 $('.option-tree-list-item-add').live('click', function(e) { |
|
100 e.preventDefault(); |
|
101 OT_UI.add(this,'list_item'); |
|
102 }); |
|
103 $('.option-tree-list-item-setting-add').live('click', function(e) { |
|
104 e.preventDefault(); |
|
105 if ( $(this).parents('ul').parents('ul').hasClass('ui-sortable') ) { |
|
106 alert(option_tree.setting_limit); |
|
107 return false; |
|
108 } |
|
109 OT_UI.add(this,'list_item_setting'); |
|
110 }); |
|
111 }, |
|
112 init_edit: function() { |
|
113 $('.option-tree-setting-edit').live('click', function(e) { |
|
114 e.preventDefault(); |
|
115 if ( $(this).parents().hasClass('option-tree-setting-body') ) { |
|
116 OT_UI.init_remove_active($(this),'child'); |
|
117 OT_UI.init_hide_body($(this),'child'); |
|
118 } else { |
|
119 OT_UI.init_remove_active($(this),'parent'); |
|
120 OT_UI.init_hide_body($(this), 'parent'); |
|
121 } |
|
122 $(this).toggleClass('active'); |
|
123 OT_UI.init_hide_body($(this), 'toggle'); |
|
124 }); |
|
125 }, |
|
126 init_remove: function() { |
|
127 $('.option-tree-setting-remove').live('click', function(event) { |
|
128 event.preventDefault(); |
|
129 if ( $(this).parents('li').hasClass('ui-state-disabled') ) { |
|
130 alert(option_tree.remove_no); |
|
131 return false; |
|
132 } |
|
133 var agree = confirm(option_tree.remove_agree); |
|
134 if (agree) { |
|
135 var list = $(this).parents('ul'); |
|
136 OT_UI.remove(this); |
|
137 setTimeout( function() { |
|
138 OT_UI.update_ids(list); |
|
139 }, 200 ); |
|
140 } |
|
141 return false; |
|
142 }); |
|
143 }, |
|
144 init_edit_title: function() { |
|
145 $('.option-tree-setting-title').live('keyup', function() { |
|
146 OT_UI.edit_title(this); |
|
147 }); |
|
148 }, |
|
149 init_edit_id: function() { |
|
150 $('.section-id').live('keyup', function(){ |
|
151 OT_UI.update_id(this); |
|
152 }); |
|
153 }, |
|
154 init_activate_layout: function() { |
|
155 $('.option-tree-layout-activate').live('click', function() { |
|
156 var active = $(this).parents('.option-tree-setting').find('.open').text(); |
|
157 $('.option-tree-layout-activate').removeClass('active'); |
|
158 $(this).toggleClass('active'); |
|
159 $('.active-layout-input').attr({'value':active}); |
|
160 }); |
|
161 $('#option-tree-options-layouts-form select').live('change', function() { |
|
162 var agree = confirm(option_tree.activate_layout_agree); |
|
163 if (agree) { |
|
164 $('#option-tree-options-layouts-form').submit(); |
|
165 } else { |
|
166 var active = $('#the_current_layout').attr('value'); |
|
167 $('#option-tree-options-layouts-form select option[value="' + active + '"]').attr({'selected':'selected'}); |
|
168 $('#option-tree-options-layouts-form select').prev('span').replaceWith('<span>' + active + '</span>'); |
|
169 } |
|
170 }); |
|
171 }, |
|
172 add: function(elm,type) { |
|
173 var self = this, |
|
174 list = '', |
|
175 list_class = '', |
|
176 name = '', |
|
177 post_id = 0, |
|
178 get_option = '', |
|
179 settings = ''; |
|
180 if ( type == 'the_contextual_help' ) { |
|
181 list = $(elm).parent().find('ul:last'); |
|
182 list_class = 'list-contextual-help'; |
|
183 } else if ( type == 'choice' ) { |
|
184 list = $(elm).parent().children('ul'); |
|
185 list_class = 'list-choice'; |
|
186 } else if ( type == 'list_item' ) { |
|
187 list = $(elm).parent().children('ul'); |
|
188 list_class = 'list-sub-setting'; |
|
189 } else if ( type == 'list_item_setting' ) { |
|
190 list = $(elm).parent().children('ul'); |
|
191 list_class = 'list-sub-setting'; |
|
192 } else { |
|
193 list = $(elm).parent().find('ul:first'); |
|
194 list_class = ( type == 'section' ) ? 'list-section' : 'list-setting'; |
|
195 } |
|
196 name = list.data('name'); |
|
197 post_id = list.data('id'); |
|
198 get_option = list.data('getOption'); |
|
199 settings = $('#'+name+'_settings_array').val(); |
|
200 if ( this.processing === false ) { |
|
201 this.processing = true; |
|
202 var count = parseInt(list.children('li').length); |
|
203 if ( type == 'list_item' ) { |
|
204 list.find('li input.option-tree-setting-title', self).each(function(){ |
|
205 var setting = $(this).attr('name'), |
|
206 regex = /\[([0-9]+)\]/, |
|
207 matches = setting.match(regex), |
|
208 id = null != matches ? parseInt(matches[1]) : 0; |
|
209 id++; |
|
210 if ( id > count) { |
|
211 count = id; |
|
212 } |
|
213 }); |
|
214 } |
|
215 $.ajax({ |
|
216 url: option_tree.ajax, |
|
217 type: 'post', |
|
218 data: { |
|
219 action: 'add_' + type, |
|
220 count: count, |
|
221 name: name, |
|
222 post_id: post_id, |
|
223 get_option: get_option, |
|
224 settings: settings, |
|
225 type: type |
|
226 }, |
|
227 complete: function( data ) { |
|
228 if ( type == 'choice' || type == 'list_item_setting' ) { |
|
229 OT_UI.init_remove_active(list,'child-add'); |
|
230 OT_UI.init_hide_body(list,'child-add'); |
|
231 } else { |
|
232 OT_UI.init_remove_active(); |
|
233 OT_UI.init_hide_body(); |
|
234 } |
|
235 list.append('<li class="ui-state-default ' + list_class + '">' + data.responseText + '</li>'); |
|
236 list.children().last().find('.option-tree-setting-edit').toggleClass('active'); |
|
237 list.children().last().find('.option-tree-setting-body').toggle(); |
|
238 list.children().last().find('.option-tree-setting-title').focus(); |
|
239 if ( type != 'the_contextual_help' ) { |
|
240 OT_UI.update_ids(list); |
|
241 } |
|
242 setTimeout( function() { |
|
243 OT_UI.init_sortable(); |
|
244 OT_UI.init_select_wrapper(); |
|
245 OT_UI.init_numeric_slider(); |
|
246 }, 500); |
|
247 self.processing = false; |
|
248 } |
|
249 }); |
|
250 } |
|
251 }, |
|
252 remove: function(e) { |
|
253 $(e).parent().parent().parent('li').remove(); |
|
254 }, |
|
255 edit_title: function(e) { |
|
256 if ( this.timer ) { |
|
257 clearTimeout(e.timer); |
|
258 } |
|
259 this.timer = setTimeout( function() { |
|
260 $(e).parent().parent().parent().parent().parent().children('.open').text(e.value); |
|
261 }, 100); |
|
262 return true; |
|
263 }, |
|
264 update_id: function(e) { |
|
265 if ( this.timer ) { |
|
266 clearTimeout(e.timer); |
|
267 } |
|
268 this.timer = setTimeout( function() { |
|
269 OT_UI.update_ids($(e).parents('ul')); |
|
270 }, 100); |
|
271 return true; |
|
272 }, |
|
273 update_ids: function(list) { |
|
274 var last_section, section, list_items = list.children('li'); |
|
275 list_items.each(function(index) { |
|
276 if ( $(this).hasClass('list-section') ) { |
|
277 section = $(this).find('.section-id').val().trim().toLowerCase().replace(/[^a-z0-9]/gi,'_'); |
|
278 if (!section) { |
|
279 section = $(this).find('.section-title').val().trim().toLowerCase().replace(/[^a-z0-9]/gi,'_'); |
|
280 } |
|
281 if (!section) { |
|
282 section = last_section; |
|
283 } |
|
284 } |
|
285 if ($(this).hasClass('list-setting') ) { |
|
286 $(this).find('.hidden-section').attr({'value':section}); |
|
287 } |
|
288 last_section = section; |
|
289 }); |
|
290 }, |
|
291 init_upload: function() { |
|
292 $(document).on('click', '.ot_upload_media', function() { |
|
293 var field_id = $(this).parent('.option-tree-ui-upload-parent').find('input').attr('id'), |
|
294 post_id = $(this).attr('rel'), |
|
295 btnContent = ''; |
|
296 if ( window.wp && wp.media ) { |
|
297 window.ot_media_frame = window.ot_media_frame || new wp.media.view.MediaFrame.Select({ |
|
298 title: $(this).attr('title'), |
|
299 button: { |
|
300 text: option_tree.upload_text |
|
301 }, |
|
302 multiple: false |
|
303 }); |
|
304 window.ot_media_frame.on('select', function() { |
|
305 var attachment = window.ot_media_frame.state().get('selection').first(), |
|
306 href = attachment.attributes.url, |
|
307 mime = attachment.attributes.mime, |
|
308 regex = /^image\/(?:jpe?g|png|gif|x-icon)$/i; |
|
309 if ( mime.match(regex) ) { |
|
310 btnContent += '<div class="option-tree-ui-image-wrap"><img src="'+href+'" alt="" /></div>'; |
|
311 } |
|
312 btnContent += '<a href="javascript:(void);" class="option-tree-ui-remove-media option-tree-ui-button red light" title="'+option_tree.remove_media_text+'"><span class="icon trash-can">'+option_tree.remove_media_text+'</span></a>'; |
|
313 $('#'+field_id).val(href); |
|
314 $('#'+field_id+'_media').remove(); |
|
315 $('#'+field_id).parent().parent('div').append('<div class="option-tree-ui-media-wrap" id="'+field_id+'_media" />'); |
|
316 $('#'+field_id+'_media').append(btnContent).slideDown(); |
|
317 window.ot_media_frame.off('select'); |
|
318 }).open(); |
|
319 } else { |
|
320 var backup = window.send_to_editor, |
|
321 intval = window.setInterval( |
|
322 function() { |
|
323 if ( $('#TB_iframeContent').length > 0 && $('#TB_iframeContent').attr('src').indexOf( "&field_id=" ) !== -1 ) { |
|
324 $('#TB_iframeContent').contents().find('#tab-type_url').hide(); |
|
325 } |
|
326 $('#TB_iframeContent').contents().find('.savesend .button').val(option_tree.upload_text); |
|
327 }, 50); |
|
328 tb_show('', 'media-upload.php?post_id='+post_id+'&field_id='+field_id+'&type=image&TB_iframe=1'); |
|
329 window.send_to_editor = function(html) { |
|
330 var href = $(html).find('img').attr('src'); |
|
331 if ( typeof href == 'undefined') { |
|
332 href = $(html).attr('src'); |
|
333 } |
|
334 if ( typeof href == 'undefined') { |
|
335 href = $(html).attr('href'); |
|
336 } |
|
337 var image = /\.(?:jpe?g|png|gif|ico)$/i; |
|
338 if (href.match(image) && OT_UI.url_exists(href)) { |
|
339 btnContent += '<div class="option-tree-ui-image-wrap"><img src="'+href+'" alt="" /></div>'; |
|
340 } |
|
341 btnContent += '<a href="javascript:(void);" class="option-tree-ui-remove-media option-tree-ui-button red light" title="'+option_tree.remove_media_text+'"><span class="icon trash-can">'+option_tree.remove_media_text+'</span></a>'; |
|
342 $('#'+field_id).val(href); |
|
343 $('#'+field_id+'_media').remove(); |
|
344 $('#'+field_id).parent().parent('div').append('<div class="option-tree-ui-media-wrap" id="'+field_id+'_media" />'); |
|
345 $('#'+field_id+'_media').append(btnContent).slideDown(); |
|
346 OT_UI.fix_upload_parent(); |
|
347 tb_remove(); |
|
348 window.clearInterval(intval); |
|
349 window.send_to_editor = backup; |
|
350 }; |
|
351 } |
|
352 return false; |
|
353 }); |
|
354 }, |
|
355 init_upload_remove: function() { |
|
356 $('.option-tree-ui-remove-media').live('click', function(event) { |
|
357 event.preventDefault(); |
|
358 var agree = confirm(option_tree.remove_agree); |
|
359 if (agree) { |
|
360 OT_UI.remove_image(this); |
|
361 return false; |
|
362 } |
|
363 return false; |
|
364 }); |
|
365 }, |
|
366 init_upload_fix: function(elm) { |
|
367 var id = $(elm).attr('id'), |
|
368 val = $(elm).val(), |
|
369 img = $(elm).parent().next('option-tree-ui-media-wrap').find('img'), |
|
370 src = img.attr('src'), |
|
371 btnContent = ''; |
|
372 if ( val != src ) { |
|
373 img.attr('src', val); |
|
374 } |
|
375 if ( val !== '' && ( typeof src == 'undefined' || src == false ) && OT_UI.url_exists(val) ) { |
|
376 var image = /\.(?:jpe?g|png|gif|ico)$/i; |
|
377 if (val.match(image)) { |
|
378 btnContent += '<div class="option-tree-ui-image-wrap"><img src="'+val+'" alt="" /></div>'; |
|
379 } |
|
380 btnContent += '<a href="javascript:(void);" class="option-tree-ui-remove-media option-tree-ui-button red light" title="'+option_tree.remove_media_text+'"><span class="icon trash-can">'+option_tree.remove_media_text+'</span></a>'; |
|
381 $('#'+id).val(val); |
|
382 $('#'+id+'_media').remove(); |
|
383 $('#'+id).parent().parent('div').append('<div class="option-tree-ui-media-wrap" id="'+id+'_media" />'); |
|
384 $('#'+id+'_media').append(btnContent).slideDown(); |
|
385 } else if ( val == '' || ! OT_UI.url_exists(val) ) { |
|
386 $(elm).parent().next('.option-tree-ui-media-wrap').remove(); |
|
387 } |
|
388 }, |
|
389 init_numeric_slider: function() { |
|
390 $(".ot-numeric-slider-wrap").each(function() { |
|
391 var hidden = $(".ot-numeric-slider-hidden-input", this), |
|
392 value = hidden.val(), |
|
393 helper = $(".ot-numeric-slider-helper-input", this); |
|
394 if ( ! value ) { |
|
395 value = hidden.data("min"); |
|
396 helper.val(value) |
|
397 } |
|
398 $(".ot-numeric-slider", this).slider({ |
|
399 min: hidden.data("min"), |
|
400 max: hidden.data("max"), |
|
401 step: hidden.data("step"), |
|
402 value: value, |
|
403 slide: function(event, ui) { |
|
404 hidden.add(helper).val(ui.value); |
|
405 } |
|
406 }); |
|
407 }); |
|
408 }, |
|
409 init_tabs: function() { |
|
410 $(".wrap.settings-wrap .ui-tabs").tabs({ |
|
411 fx: { |
|
412 opacity: "toggle", |
|
413 duration: "fast" |
|
414 } |
|
415 }); |
|
416 $(".wrap.settings-wrap .ui-tabs a.ui-tabs-anchor").on("click", function(event, ui) { |
|
417 var obj = "input[name='_wp_http_referer']"; |
|
418 if ( $(obj).length > 0 ) { |
|
419 var url = $(obj).val(), |
|
420 hash = $(this).attr('href'); |
|
421 if ( url.indexOf("#") != -1 ) { |
|
422 var o = url.split("#")[1], |
|
423 n = hash.split("#")[1]; |
|
424 url = url.replace(o, n); |
|
425 } else { |
|
426 url = url + hash; |
|
427 } |
|
428 $(obj).val(url); |
|
429 } |
|
430 }); |
|
431 }, |
|
432 init_radio_image_select: function() { |
|
433 $('.option-tree-ui-radio-image').live('click', function() { |
|
434 $(this).closest('.type-radio-image').find('.option-tree-ui-radio-image').removeClass('option-tree-ui-radio-image-selected'); |
|
435 $(this).toggleClass('option-tree-ui-radio-image-selected'); |
|
436 $(this).parent().find('.option-tree-ui-radio').attr('checked', true); |
|
437 }); |
|
438 }, |
|
439 init_select_wrapper: function() { |
|
440 $('.option-tree-ui-select').each(function () { |
|
441 if ( ! $(this).parent().hasClass('select-wrapper') ) { |
|
442 $(this).wrap('<div class="select-wrapper" />'); |
|
443 $(this).parent('.select-wrapper').prepend('<span>' + $(this).find('option:selected').text() + '</span>'); |
|
444 } |
|
445 }); |
|
446 $('.option-tree-ui-select').live('change', function () { |
|
447 $(this).prev('span').replaceWith('<span>' + $(this).find('option:selected').text() + '</span>'); |
|
448 }); |
|
449 $('.option-tree-ui-select').bind($.browser.msie ? 'click' : 'change', function(event) { |
|
450 $(this).prev('span').replaceWith('<span>' + $(this).find('option:selected').text() + '</span>'); |
|
451 }); |
|
452 }, |
|
453 bind_colorpicker: function(field_id) { |
|
454 $('#'+field_id).ColorPicker({ |
|
455 onSubmit: function(hsb, hex, rgb) { |
|
456 $('#'+field_id).val('#'+hex); |
|
457 }, |
|
458 onBeforeShow: function () { |
|
459 $(this).ColorPickerSetColor(this.value); |
|
460 return false; |
|
461 }, |
|
462 onChange: function (hsb, hex, rgb) { |
|
463 var bc = $.inArray(hex, [ 'FFFFFF', 'FFF', 'ffffff', 'fff' ]) != -1 ? 'ccc' : hex; |
|
464 $('#cp_'+field_id).css({'backgroundColor':'#'+hex,'borderColor':'#'+bc}); |
|
465 $('#cp_'+field_id).prev('input').attr('value', '#'+hex); |
|
466 } |
|
467 }) |
|
468 .bind('keyup', function(){ |
|
469 $(this).ColorPickerSetColor(this.value); |
|
470 }); |
|
471 }, |
|
472 fix_upload_parent: function() { |
|
473 $('.option-tree-ui-upload-input').live('focus blur', function(){ |
|
474 $(this).parent('.option-tree-ui-upload-parent').toggleClass('focus'); |
|
475 OT_UI.init_upload_fix(this); |
|
476 }); |
|
477 }, |
|
478 remove_image: function(e) { |
|
479 $(e).parent().parent().find('.option-tree-ui-upload-input').attr('value',''); |
|
480 $(e).parent('.option-tree-ui-media-wrap').remove(); |
|
481 }, |
|
482 fix_colorpicker: function() { |
|
483 $('.cp_input').live('blur', function() { |
|
484 $('.cp_input').each( function(index, el) { |
|
485 var val = $(el).val(); |
|
486 var reg = /^[A-Fa-f0-9]{6}$/; |
|
487 if( reg.test(val) && val != '' ) { |
|
488 $(el).attr('value', '#'+val) |
|
489 } else if ( val == '' ) { |
|
490 $(this).next('.cp_box').css({'background':'#f1f1f1','border-color':'#ccc'}); |
|
491 } |
|
492 }); |
|
493 }); |
|
494 }, |
|
495 fix_textarea: function() { |
|
496 $('.wp-editor-area').focus( function(){ |
|
497 $(this).parent('div').css({borderColor:'#bbb'}); |
|
498 }).blur( function(){ |
|
499 $(this).parent('div').css({borderColor:'#ccc'}); |
|
500 }); |
|
501 }, |
|
502 replicate_ajax: function() { |
|
503 if (location.href.indexOf("#") != -1) { |
|
504 var url = $("input[name=\'_wp_http_referer\']").val(), |
|
505 hash = location.href.substr(location.href.indexOf("#")); |
|
506 $("input[name=\'_wp_http_referer\']").val( url + hash ); |
|
507 this.scroll_to_top(); |
|
508 } |
|
509 setTimeout( function() { |
|
510 $(".wrap.settings-wrap .fade").fadeOut("fast"); |
|
511 }, 3000 ); |
|
512 }, |
|
513 reset_settings: function() { |
|
514 $(".reset-settings").live("click", function(event){ |
|
515 var agree = confirm(option_tree.reset_agree); |
|
516 if (agree) { |
|
517 return true; |
|
518 } else { |
|
519 return false; |
|
520 } |
|
521 event.preventDefault(); |
|
522 }); |
|
523 }, |
|
524 url_exists: function(url) { |
|
525 var http = new XMLHttpRequest(); |
|
526 http.open('HEAD', url, false); |
|
527 http.send(); |
|
528 return http.status!=404; |
|
529 }, |
|
530 scroll_to_top: function() { |
|
531 setTimeout( function() { |
|
532 $(this).scrollTop(0); |
|
533 }, 50 ); |
|
534 } |
|
535 }; |
|
536 $(document).ready( function() { |
|
537 OT_UI.init(); |
|
538 }); |
|
539 })(jQuery); |