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_tabs();

    23       this.init_radio_image_select();

    24       this.init_select_wrapper();

    25       this.fix_upload_parent();

    26       this.fix_colorpicker();

    27       this.fix_textarea();

    28       this.replicate_ajax();

    29       this.reset_settings();

    30     },

    31     init_hide_body: function(elm,type) {

    32       var css = '.option-tree-setting-body';

    33       if ( type == 'parent' ) {

    34         $(css).not( elm.parent().parent().children(css) ).hide();

    35       } else if ( type == 'child' ) {

    36         elm.closest('ul').find(css).not( elm.parent().parent().children(css) ).hide();

    37       } else if ( type == 'child-add' ) {

    38         elm.children().find(css).hide();

    39       } else if ( type == 'toggle' ) {

    40         elm.parent().parent().children(css).toggle();

    41       } else {

    42         $(css).hide();

    43       }

    44     },

    45     init_remove_active: function(elm,type) {

    46       var css = '.option-tree-setting-edit';

    47       if ( type == 'parent' ) {

    48         $(css).not(elm).removeClass('active');

    49       } else if ( type == 'child' ) {

    50         elm.closest('ul').find(css).not(elm).removeClass('active');

    51       } else if ( type == 'child-add' ) {

    52         elm.children().find(css).removeClass('active');

    53       } else {

    54         $(css).removeClass('active');

    55       }

    56     },

    57     init_sortable: function() {

    58       $('.option-tree-sortable').each( function() {

    59         if ( $(this).children('li').length ) {

    60           var elm = $(this);

    61           elm.show();

    62           elm.sortable({

    63             items: 'li:not(.ui-state-disabled)',

    64             handle: 'div.open',

    65             placeholder: 'ui-state-highlight',

    66             start: function (event, ui) {

    67               ui.placeholder.height(ui.item.height()-2);

    68             },

    69             stop: function(evt, ui) {

    70               setTimeout(

    71                 function(){

    72                   OT_UI.update_ids(elm);

    73                 },

    74                 200

    75               )

    76             }

    77           });

    78         }

    79       });

    80     },

    81     init_add: function() {

    82       $('.option-tree-section-add').live('click', function(e) {

    83         e.preventDefault();

    84         OT_UI.add(this,'section');

    85       });

    86       $('.option-tree-setting-add').live('click', function(e) {

    87         e.preventDefault();

    88         OT_UI.add(this,'setting');

    89       });

    90       $('.option-tree-help-add').live('click', function(e) {

    91         e.preventDefault();

    92         OT_UI.add(this,'contextual_help');

    93       });

    94       $('.option-tree-choice-add').live('click', function(e) {

    95         e.preventDefault();

    96         OT_UI.add(this,'choice');

    97       });

    98       $('.option-tree-list-item-add').live('click', function(e) {

    99         e.preventDefault();

   100         OT_UI.add(this,'list_item');

   101       });

   102       $('.option-tree-list-item-setting-add').live('click', function(e) {

   103         e.preventDefault();

   104         if ( $(this).parents('ul').parents('ul').hasClass('ui-sortable') ) {

   105           alert(option_tree.setting_limit);

   106           return false;

   107         }

   108         OT_UI.add(this,'list_item_setting');

   109       });

   110     },

   111     init_edit: function() {

   112       $('.option-tree-setting-edit').live('click', function(e) {

   113         e.preventDefault();

   114         if ( $(this).parents().hasClass('option-tree-setting-body') ) {

   115           OT_UI.init_remove_active($(this),'child');

   116           OT_UI.init_hide_body($(this),'child');

   117         } else {

   118           OT_UI.init_remove_active($(this),'parent');

   119           OT_UI.init_hide_body($(this), 'parent');

   120         }

   121         $(this).toggleClass('active');

   122         OT_UI.init_hide_body($(this), 'toggle');

   123       });

   124     },

   125     init_remove: function() {

   126       $('.option-tree-setting-remove').live('click', function(event) {

   127         event.preventDefault();

   128         if ( $(this).parents('li').hasClass('ui-state-disabled') ) {

   129           alert(option_tree.remove_no);

   130           return false;

   131         }

   132         var agree = confirm(option_tree.remove_agree);

   133         if (agree) {

   134           var list = $(this).parents('ul');

   135           OT_UI.remove(this);

   136           setTimeout( function() { 

   137             OT_UI.update_ids(list); 

   138           }, 200 );

   139         }

   140         return false;

   141       });

   142     },

   143     init_edit_title: function() {

   144       $('.option-tree-setting-title').live('keyup', function() {

   145         OT_UI.edit_title(this);

   146       });

   147     },

   148     init_edit_id: function() {

   149       $('.section-id').live('keyup', function(){

   150         OT_UI.update_id(this);

   151       });

   152     },

   153     init_activate_layout: function() {

   154       $('.option-tree-layout-activate').live('click', function() { 

   155         var active = $(this).parents('.option-tree-setting').find('.open').text();

   156         $('.option-tree-layout-activate').removeClass('active');

   157         $(this).toggleClass('active');

   158         $('.active-layout-input').attr({'value':active});

   159       });

   160       $('#option-tree-options-layouts-form select').live('change', function() {

   161         var agree = confirm(option_tree.activate_layout_agree);

   162         if (agree) {

   163           $('#option-tree-options-layouts-form').submit();

   164         } else {

   165           var active = $('#the_current_layout').attr('value');

   166           $('#option-tree-options-layouts-form select option[value="' + active + '"]').attr({'selected':'selected'});

   167           $('#option-tree-options-layouts-form select').prev('span').replaceWith('<span>' + active + '</span>');

   168         }

   169       });

   170     },

   171     add: function(elm,type) {

   172       var self = this, 

   173           list = '', 

   174           list_class = '',

   175           name = '', 

   176           post_id = 0, 

   177           get_option = '', 

   178           settings = '';

   179       if ( type == 'contextual_help' ) {

   180         list = $(elm).parent().find('ul:last');

   181         list_class = 'list-contextual-help';

   182       } else if ( type == 'choice' ) {

   183         list = $(elm).parent().children('ul');

   184         list_class = 'list-choice';

   185       } else if ( type == 'list_item' ) {

   186         list = $(elm).parent().children('ul');

   187         list_class = 'list-sub-setting';

   188       } else if ( type == 'list_item_setting' ) {

   189         list = $(elm).parent().children('ul');

   190         list_class = 'list-sub-setting';

   191       } else {

   192         list = $(elm).parent().find('ul:first');

   193         list_class = ( type == 'section' ) ? 'list-section' : 'list-setting';

   194       }

   195       name = list.data('name');

   196       post_id = list.data('id');

   197       get_option = list.data('getOption');

   198       settings = $('#'+name+'_settings_array').val();

   199       if ( this.processing === false ) {

   200         this.processing = true;

   201         var count = parseInt(list.children('li').length);

   202         if ( type == 'list_item' ) {

   203           list.find('li input.option-tree-setting-title').each(function(){

   204             var settingidnumber = $(this).attr('name').replace(/[^0-9]/g, '');

   205             settingidnumber = parseInt(settingidnumber);

   206             settingidnumber++;

   207             if ((settingidnumber) > count) {

   208               count = settingidnumber;

   209             }

   210           });

   211         }

   212         $.ajax({

   213           url: option_tree.ajax,

   214           type: 'post',

   215           data: {

   216             action: 'add_' + type,

   217             count: count,

   218             name: name,

   219             post_id: post_id,

   220             get_option: get_option,

   221             settings: settings,

   222             type: type

   223           },

   224           complete: function( data ) {

   225             if ( type == 'choice' || type == 'list_item_setting' ) {

   226               OT_UI.init_remove_active(list,'child-add');

   227               OT_UI.init_hide_body(list,'child-add');

   228             } else {

   229               OT_UI.init_remove_active();

   230               OT_UI.init_hide_body();

   231             }

   232             list.append('<li class="ui-state-default ' + list_class + '">' + data.responseText + '</li>');

   233             list.children().last().find('.option-tree-setting-edit').toggleClass('active');

   234             list.children().last().find('.option-tree-setting-body').toggle();

   235             list.children().last().find('.option-tree-setting-title').focus();

   236             if ( type != 'contextual_help' ) {

   237               OT_UI.update_ids(list);

   238             }

   239             setTimeout( function() {

   240               OT_UI.init_sortable();

   241               OT_UI.init_select_wrapper();

   242             }, 500);

   243             self.processing = false;

   244           }

   245         });

   246       }

   247     },

   248     remove: function(e) {

   249       $(e).parent().parent().parent('li').remove();

   250     },

   251     edit_title: function(e) {

   252       if ( this.timer ) {

   253         clearTimeout(e.timer);

   254       }

   255       this.timer = setTimeout( function() {

   256         $(e).parent().parent().parent().parent().parent().children('.open').text(e.value);

   257       }, 100);

   258       return true;

   259     },

   260     update_id: function(e) {

   261       if ( this.timer ) {

   262         clearTimeout(e.timer);

   263       }

   264       this.timer = setTimeout( function() {

   265         OT_UI.update_ids($(e).parents('ul'));

   266       }, 100);

   267       return true;

   268     },

   269     update_ids: function(list) {

   270       var last_section, section, list_items = list.children('li');

   271       list_items.each(function(index) {

   272         if ( $(this).hasClass('list-section') ) {

   273           section = $(this).find('.section-id').val().trim().toLowerCase().replace(/[^a-z0-9]/gi,'_');

   274           if (!section) {

   275             section = $(this).find('.section-title').val().trim().toLowerCase().replace(/[^a-z0-9]/gi,'_');

   276           }

   277           if (!section) {

   278             section = last_section;

   279           }

   280         }

   281         if ($(this).hasClass('list-setting') ) {

   282           $(this).find('.hidden-section').attr({'value':section});

   283         }

   284         last_section = section;

   285       });

   286     },

   287     init_upload: function() {

   288       $('.ot_upload_media').live('click', function() {

   289         var field_id    = $(this).parent('.option-tree-ui-upload-parent').find('input').attr('id'),

   290             post_id     = $(this).attr('rel'),

   291             backup      = window.send_to_editor,

   292             btnContent  = '',

   293             intval      = window.setInterval(function() {

   294                             if ( $('#TB_iframeContent').attr('src').indexOf( "&field_id=" ) !== -1 ) {

   295                               $('#TB_iframeContent').contents().find('#tab-type_url').hide();

   296                             }

   297                             $('#TB_iframeContent').contents().find('.savesend .button').val(option_tree.upload_text); 

   298                           }, 50);

   299         tb_show('', 'media-upload.php?post_id='+post_id+'&field_id='+field_id+'&type=image&TB_iframe=1');

   300         window.send_to_editor = function(html) {

   301           var href = $(html).find('img').attr('src');

   302           if ( typeof href == 'undefined') {

   303             href = $(html).attr('href');

   304           }

   305           if (OT_UI.url_exists(href)) {

   306             var image = /\.(?:jpe?g|png|gif|ico)$/i;

   307             if (href.match(image)) {

   308               btnContent += '<div class="option-tree-ui-image-wrap"><img src="'+href+'" alt="" /></div>';

   309             }

   310             btnContent += '<a href="javascript:(void);" class="option-tree-ui-remove-media option-tree-ui-button" title="'+option_tree.remove_media_text+'"><span class="icon trash-can">'+option_tree.remove_media_text+'</span></a>';

   311           }

   312           $('#'+field_id).val(href);

   313           $('#'+field_id+'_media').remove();

   314           $('#'+field_id).parent().parent('div').append('<div class="option-tree-ui-media-wrap" id="'+field_id+'_media" />');

   315           $('#'+field_id+'_media').append(btnContent).slideDown();

   316           OT_UI.fix_upload_parent();

   317           tb_remove();

   318           window.clearInterval(intval);

   319           window.send_to_editor = backup;

   320   	    };

   321         return false;

   322       });

   323     },

   324     init_upload_remove: function() {

   325       $('.option-tree-ui-remove-media').live('click', function(event) {

   326         event.preventDefault();

   327         var agree = confirm(option_tree.remove_agree);

   328         if (agree) {

   329           OT_UI.remove_image(this);

   330           return false;

   331         }

   332         return false;

   333       });

   334     },

   335     init_upload_fix: function(elm) {

   336       var id  = $(elm).attr('id'),

   337           val = $(elm).val(),

   338           img = $(elm).parent().next('option-tree-ui-media-wrap').find('img'),

   339           src = img.attr('src'),

   340           btnContent = '';

   341       if ( val != src ) {

   342         img.attr('src', val);

   343       }

   344       if ( val !== '' && ( typeof src == 'undefined' || src == false ) && OT_UI.url_exists(val) ) {

   345         var image = /\.(?:jpe?g|png|gif|ico)$/i;

   346         if (val.match(image)) {

   347           btnContent += '<div class="option-tree-ui-image-wrap"><img src="'+val+'" alt="" /></div>';

   348         }

   349         btnContent += '<a href="javascript:(void);" class="option-tree-ui-remove-media option-tree-ui-button" title="'+option_tree.remove_media_text+'"><span class="icon trash-can">'+option_tree.remove_media_text+'</span></a>';

   350         $('#'+id).val(val);

   351         $('#'+id+'_media').remove();

   352         $('#'+id).parent().parent('div').append('<div class="option-tree-ui-media-wrap" id="'+id+'_media" />');

   353         $('#'+id+'_media').append(btnContent).slideDown();

   354       } else if ( val == '' || ! OT_UI.url_exists(val) ) {

   355         $(elm).parent().next('.option-tree-ui-media-wrap').remove();

   356       }

   357     },

   358     init_tabs: function() {

   359       $(".wrap.settings-wrap .ui-tabs").tabs({ 

   360         fx: { 

   361           opacity: "toggle", 

   362           duration: "fast" 

   363         }

   364       }).bind("tabsselect", function(event, ui) {

   365         $("input[name=\'_wp_http_referer\']").val(ui.tab);

   366       });

   367     },

   368     init_radio_image_select: function() {

   369       $('.option-tree-ui-radio-image').live('click', function() {

   370         $(this).closest('.type-radio-image').find('.option-tree-ui-radio-image').removeClass('option-tree-ui-radio-image-selected');

   371         $(this).toggleClass('option-tree-ui-radio-image-selected');

   372         $(this).parent().find('.option-tree-ui-radio').attr('checked', true);

   373       });

   374     },

   375     init_select_wrapper: function() {

   376       $('.option-tree-ui-select').each(function () {

   377         if ( ! $(this).parent().hasClass('select-wrapper') ) {

   378           $(this).wrap('<div class="select-wrapper" />');

   379           $(this).parent('.select-wrapper').prepend('<span>' + $(this).find('option:selected').text() + '</span>');

   380         }

   381       });

   382       $('.option-tree-ui-select').live('change', function () {

   383         $(this).prev('span').replaceWith('<span>' + $(this).find('option:selected').text() + '</span>');

   384       });

   385       $('.option-tree-ui-select').bind($.browser.msie ? 'click' : 'change', function(event) {

   386         $(this).prev('span').replaceWith('<span>' + $(this).find('option:selected').text() + '</span>');

   387       });

   388     },

   389     bind_colorpicker: function(field_id) {

   390       $('#'+field_id).ColorPicker({

   391         onSubmit: function(hsb, hex, rgb) {

   392           $('#'+field_id).val('#'+hex);

   393         },

   394         onBeforeShow: function () {

   395           $(this).ColorPickerSetColor(this.value);

   396           return false;

   397         },

   398         onChange: function (hsb, hex, rgb) {

   399           var bc = $.inArray(hex, [ 'FFFFFF', 'FFF', 'ffffff', 'fff' ]) != -1 ? 'ccc' : hex;

   400           $('#cp_'+field_id).css({'backgroundColor':'#'+hex,'borderColor':'#'+bc});

   401           $('#cp_'+field_id).prev('input').attr('value', '#'+hex);

   402         }

   403       })	

   404       .bind('keyup', function(){

   405         $(this).ColorPickerSetColor(this.value);

   406       });

   407     },

   408     fix_upload_parent: function() {

   409       $('.option-tree-ui-upload-input').live('focus blur', function(){

   410         $(this).parent('.option-tree-ui-upload-parent').toggleClass('focus');

   411         OT_UI.init_upload_fix(this);

   412       });

   413     },

   414     remove_image: function(e) {

   415       $(e).parent().parent().find('.option-tree-ui-upload-input').attr('value','');

   416       $(e).parent('.option-tree-ui-media-wrap').remove();

   417     },

   418     fix_colorpicker: function() {

   419       $('.cp_input').live('blur', function() {

   420         $('.cp_input').each( function(index, el) {

   421           var val = $(el).val();

   422           var reg = /^[A-Fa-f0-9]{6}$/;

   423           if( reg.test(val) && val != '' ) { 

   424             $(el).attr('value', '#'+val)

   425           } else if ( val == '' ) {

   426             $(this).next('.cp_box').css({'background':'#f1f1f1','border-color':'#ccc'});

   427           }

   428         });

   429       });

   430     },

   431     fix_textarea: function() {

   432       $('.wp-editor-area').focus( function(){

   433         $(this).parent('div').css({borderColor:'#bbb'});

   434       }).blur( function(){

   435         $(this).parent('div').css({borderColor:'#ccc'});

   436       });

   437     },

   438     replicate_ajax: function() {

   439       if (location.href.indexOf("#") != -1) {

   440         var url = $("input[name=\'_wp_http_referer\']").val(),

   441             hash = location.href.substr(location.href.indexOf("#"));

   442         $("input[name=\'_wp_http_referer\']").val( url + hash );

   443         this.scroll_to_top();

   444       }

   445       setTimeout( function() {

   446         $(".wrap.settings-wrap .fade").fadeOut("fast");

   447       }, 3000 );

   448     },

   449     reset_settings: function() {

   450       $(".reset-settings").live("click", function(event){

   451         var agree = confirm(option_tree.reset_agree);

   452         if (agree) {

   453           return true;

   454         } else {

   455           return false;

   456         }

   457         event.preventDefault();

   458       });

   459     },

   460     url_exists: function(url) {

   461       var http = new XMLHttpRequest();

   462       http.open('HEAD', url, false);

   463       http.send();

   464       return http.status!=404;

   465     },

   466     scroll_to_top: function() {

   467       setTimeout( function() {

   468         $(this).scrollTop(0);

   469       }, 50 );

   470     }

   471   };

   472   $(document).ready( function() {

   473     OT_UI.init();

   474   });

   475 })(jQuery);