API tools faq
paste
Advertisement
jegtheme

jmetabox.js

jegtheme
Sep 14th, 2014
267
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 26.01 KB | None | 0 0
raw download clone embed print report
  1. (function (window, $) {
  2.  
  3.     /** fix for jquery clone function **/
  4.     (function (original) {
  5.         jQuery.fn.clone = function () {
  6.             var result = original.apply(this, arguments),
  7.                 my_textareas = this.find('textarea').add(this.filter('textarea')),
  8.                 result_textareas = result.find('textarea').add(result.filter('textarea')),
  9.                 my_selects = this.find('select').add(this.filter('select')),
  10.                 result_selects = result.find('select').add(result.filter('select'));
  11.  
  12.             for (var i = 0, l = my_textareas.length; i < l; ++i) $(result_textareas[i]).val($(my_textareas[i]).val());
  13.             for (var i = 0, l = my_selects.length; i < l; ++i) result_selects[i].selectedIndex = my_selects[i].selectedIndex;
  14.  
  15.             return result;
  16.         };
  17.     })(jQuery.fn.clone);
  18.  
  19.     window.jmetabox = (function () {
  20.         var version = '1.0.0';
  21.         var custom_uploader;
  22.  
  23.         var api = {
  24.  
  25.             init: function (options) {
  26.                 if ($(".jeg-meta-tab").length) {
  27.                     jmetabox.beforeinit();
  28.  
  29.                     jmetabox.setTabs();
  30.                     jmetabox.setSlider();
  31.                     jmetabox.attachUpload();
  32.                     jmetabox.attachGallery();
  33.                     jmetabox.setSwitchtoogle();
  34.                     jmetabox.setAnchor();
  35.                     jmetabox.setColorpicker();
  36.  
  37.                     // portfolio
  38.                     jmetabox.setMediaGallery();
  39.                     jmetabox.afterinit();
  40.                 }
  41.             },
  42.  
  43.             /** scroll to top **/
  44.             scrollto: function (element) {
  45.                 $("html, body").animate({
  46.                     scrollTop: $(element).offset().top - 30
  47.                 });
  48.             },
  49.  
  50.             setMediaGallery: function () {
  51.                 if ($("div[data-type='mediagallery']").length) {
  52.  
  53.                     var get_highest_portfolio_number = function (parent) {
  54.                         var highest = 0;
  55.  
  56.                         if ($(".imageresult-inner > div", parent).length > 0) {
  57.                             $(".imageresult-inner > div", parent).each(function (i) {
  58.                                 var curidx = $(this).data("index");
  59.                                 if (curidx > highest) highest = $(this).data('index');
  60.                             });
  61.                         }
  62.  
  63.                         return ++highest;
  64.                     };
  65.  
  66.                     var set_media_index = function (element, cloned) {
  67.                         var currentindex = get_highest_portfolio_number(element);
  68.                         $(cloned).data('index', currentindex);
  69.  
  70.                         $(".replaceindex", cloned).each(function () {
  71.                             var name = $(this).attr('name').replace('index', currentindex);
  72.                             $(this).attr('name', name);
  73.                         });
  74.                     };
  75.  
  76.                     var attach_accordion = function (element) {
  77.                         $(".accordionheader", element).bind('click', function () {
  78.                             $(element).find('.accordionbody').removeClass('open');
  79.                             $(this).parent('.accordionwrapper').find('.accordionbody').addClass('open');
  80.                         });
  81.                     };
  82.  
  83.                     var attach_image_list_behaviour = function (element) {
  84.  
  85.                         $(element).on('click', '.imggalselect', function (e) {
  86.                             var ele = $(this);
  87.                             var title = $(this).val();
  88.                             var imageresultcontainer = $(element).find('.imageresult-inner');
  89.  
  90.                             custom_uploader = wp.media.frames.file_frame = wp.media({
  91.                                 title: "Select Multiple Image ",
  92.                                 button: {
  93.                                     text: "Select Image"
  94.                                 },
  95.                                 multiple: true,
  96.                                 library: {
  97.                                     type: 'image'
  98.                                 },
  99.                             });
  100.  
  101.                             custom_uploader.on('select', function () {
  102.                                 var selection = custom_uploader.state().get('selection');
  103.                                 selection.map(function (attachment) {
  104.                                     attachment = attachment.toJSON();
  105.  
  106.                                     var cloned = $(element).find('.template-image .imageresult-list').clone();
  107.                                     set_media_index(element, cloned);
  108.  
  109.                                     if ( 'undefined' === typeof attachment.sizes.thumbnail ) {
  110.                                         attachment.sizes.thumbnail = attachment.sizes.full;
  111.                                     }
  112.  
  113.                                     $(".imageresult-header-thumb", cloned).attr('src', attachment.sizes.thumbnail.url);
  114.                                     $(".imageresult-body-thumb", cloned).attr('src', attachment.sizes.thumbnail.url);
  115.                                     $(".imageresult-header-title", cloned).text(attachment.title);
  116.                                     $(".image-index", cloned).val(attachment.id);
  117.                                     $(".image-title", cloned).val(attachment.title);
  118.  
  119.                                     $(imageresultcontainer).append(cloned);
  120.                                 });
  121.  
  122.                                 $("html, body").animate({scrollTop: $(imageresultcontainer).offset().top - $("#wpadminbar").height()}, 200);
  123.                             });
  124.  
  125.                             //Open the uploader dialog
  126.                             custom_uploader.open();
  127.                             return false;
  128.                         });
  129.  
  130.                     };
  131.  
  132.  
  133.                     var attach_result_list_behaviour = function (element) {
  134.                         $(element).on('click', '.imageresult-header-toogle', function (event) {
  135.                             event.preventDefault();
  136.                             var $this = $(this);
  137.                             var $parent = $(this).parents('.imageresult-list');
  138.                             var resvisible = $(".imageresult-body", $parent).is(":visible");
  139.                             var type = $parent.attr('data-result');
  140.  
  141.                             if (resvisible) {
  142.                                 $(".imageresult-body", $parent).hide("fast");
  143.                                 $(this).text('detail');
  144.  
  145.                                 var headertext = $parent.find('.showonlist').val();
  146.                                 $(this).parents('.imageresult-header').find('.imageresult-header-title').text(headertext);
  147.                             } else {
  148.                                 $(".imageresult-body", $parent).show("fast");
  149.                                 $(this).text('less');
  150.                             }
  151.                         });
  152.  
  153.                         $(element).on('click', '.imageresult-header-delete', function (event) {
  154.                             event.preventDefault();
  155.                             $(this).parents('.imageresult-list').fadeOut(function () {
  156.                                 $(this).remove();
  157.                             });
  158.                         });
  159.                     };
  160.  
  161.                     var attach_result_drag_behaviour = function (element) {
  162.                         $(".imageresult-inner", element).sortable({
  163.                             forcePlaceholderSize: true,
  164.                             placeholder: 'imageresult-placeholder',
  165.                             stop: function (event, ui) {
  166.                             }
  167.                         });
  168.                     };
  169.  
  170.                     var attach_youtube_list_behaviour = function (element) {
  171.                         $(".youtubesubmit", element).bind('click', function (event) {
  172.                             event.preventDefault();
  173.                             var parent = $(this).parents(".accordionbody");
  174.                             var imageresultcontainer = $(element).find('.imageresult-inner');
  175.                             var cloned = $(element).find('.template-youtube .imageresult-list').clone();
  176.  
  177.                             set_media_index(element, cloned);
  178.  
  179.                             // url
  180.                             var url = $(parent).find(".youtubeurl").val();
  181.                             $(".youtube-url", cloned).val(url);
  182.                             $(".imageresult-header-title", cloned).text(url);
  183.                             $(parent).find(".youtubeurl").val('');
  184.  
  185.                             // title
  186.                             var title = $(parent).find(".videotitle").val();
  187.                             $(".videotitle", cloned).val(title);
  188.                             $(parent).find(".videotitle").val('');
  189.  
  190.                             // cover id
  191.                             var cover = $(parent).find(".videocover").val();
  192.                             $(".videocover", cloned).val(cover);
  193.                             $(parent).find(".videocover").val('');
  194.  
  195.                             // cover image
  196.                             var coverimage = $(parent).find(".jimg > img").attr('src');
  197.                             $(".jimg > img", cloned).attr('src', coverimage);
  198.                             $(parent).find(".jimg > img").attr('src', '');
  199.  
  200.                             // thumbsize
  201.                             var width = $(parent).find('.width').val();
  202.                             var height = $(parent).find('.height').val();
  203.                             $(".widthsize select", cloned).val(width);
  204.                             $(".heightsize select", cloned).val(height);
  205.  
  206.                             $(imageresultcontainer).append(cloned);
  207.                             $("html, body").animate({scrollTop: $(cloned).offset().top - $("#wpadminbar").height()}, 200);
  208.                             return false;
  209.                         });
  210.                     };
  211.  
  212.                     var attach_vimeo_list_behaviour = function (element) {
  213.                         $(".vimeosubmit", element).bind('click', function (event) {
  214.                             event.preventDefault();
  215.                             var parent = $(this).parents(".accordionbody");
  216.                             var imageresultcontainer = $(element).find('.imageresult-inner');
  217.                             var cloned = $(element).find('.template-vimeo .imageresult-list').clone();
  218.  
  219.                             set_media_index(element, cloned);
  220.  
  221.                             // url
  222.                             var url = $(parent).find(".vimeourl").val();
  223.                             $(".vimeo-url", cloned).val(url);
  224.                             $(".imageresult-header-title", cloned).text(url);
  225.                             $(parent).find(".vimeourl").val('');
  226.  
  227.                             // title
  228.                             var title = $(parent).find(".videotitle").val();
  229.                             $(".videotitle", cloned).val(title);
  230.                             $(parent).find(".videotitle").val('');
  231.  
  232.                             // cover id
  233.                             var cover = $(parent).find(".videocover").val();
  234.                             $(".videocover", cloned).val(cover);
  235.                             $(parent).find(".videocover").val('');
  236.  
  237.                             // cover image
  238.                             var coverimage = $(parent).find(".jimg > img").attr('src');
  239.                             $(".jimg > img", cloned).attr('src', coverimage);
  240.                             $(parent).find(".jimg > img").attr('src', '');
  241.  
  242.                             // thumbsize
  243.                             var width = $(parent).find('.width').val();
  244.                             var height = $(parent).find('.height').val();
  245.                             $(".widthsize select", cloned).val(width);
  246.                             $(".heightsize select", cloned).val(height);
  247.  
  248.                             $(imageresultcontainer).append(cloned);
  249.                             $("html, body").animate({scrollTop: $(cloned).offset().top - $("#wpadminbar").height()}, 200);
  250.                             return false;
  251.                         });
  252.                     };
  253.  
  254.                     var attach_soundcloud_list_behaviour = function (element) {
  255.                         $(".soundcloudsubmit", element).bind('click', function (event) {
  256.                             event.preventDefault();
  257.                             var parent = $(this).parents(".accordionbody");
  258.                             var imageresultcontainer = $(element).find('.imageresult-inner');
  259.                             var cloned = $(element).find('.template-soundcloud .imageresult-list').clone();
  260.  
  261.                             set_media_index(element, cloned);
  262.  
  263.                             // url
  264.                             var url = $(parent).find(".soundcloudurl").val();
  265.                             $(".soundcloud-url", cloned).val(url);
  266.                             $(".imageresult-header-title", cloned).text(url);
  267.                             $(parent).find(".soundcloudurl").val('');
  268.  
  269.                             // title
  270.                             var title = $(parent).find(".videotitle").val();
  271.                             $(".videotitle", cloned).val(title);
  272.                             $(parent).find(".videotitle").val('');
  273.  
  274.                             // cover id
  275.                             var cover = $(parent).find(".videocover").val();
  276.                             $(".videocover", cloned).val(cover);
  277.                             $(parent).find(".videocover").val('');
  278.  
  279.                             // cover image
  280.                             var coverimage = $(parent).find(".jimg > img").attr('src');
  281.                             $(".jimg > img", cloned).attr('src', coverimage);
  282.                             $(parent).find(".jimg > img").attr('src', '');
  283.  
  284.                             // thumbsize
  285.                             var width = $(parent).find('.width').val();
  286.                             var height = $(parent).find('.height').val();
  287.                             $(".widthsize select", cloned).val(width);
  288.                             $(".heightsize select", cloned).val(height);
  289.  
  290.                             $(imageresultcontainer).append(cloned);
  291.                             $("html, body").animate({scrollTop: $(cloned).offset().top - $("#wpadminbar").height()}, 200);
  292.                             return false;
  293.                         });
  294.                     };
  295.  
  296.                     var attach_html5_list_behaviour = function (element) {
  297.                         $(".html5videosubmit", element).bind('click', function (event) {
  298.                             event.preventDefault();
  299.                             var parent = $(this).parents(".accordionbody");
  300.                             var imageresultcontainer = $(element).find('.imageresult-inner');
  301.                             var cloned = $(element).find('.template-html5video .imageresult-list').clone();
  302.  
  303.                             set_media_index(element, cloned);
  304.  
  305.                             // title
  306.                             var title = $(parent).find(".videotitle").val();
  307.                             $(".videotitle", cloned).val(title);
  308.                             $(".imageresult-header-title", cloned).text(title);
  309.                             $(parent).find(".videotitle").val('');
  310.  
  311.                             // mp4
  312.                             var mp4 = $(parent).find(".video-mp4").val();
  313.                             $(".videomp4", cloned).val(mp4);
  314.                             $(parent).find(".video-mp4").val('');
  315.  
  316.                             // webm
  317.                             var webm = $(parent).find(".video-webm").val();
  318.                             $(".videowebm", cloned).val(webm);
  319.                             $(parent).find(".video-webm").val('');
  320.  
  321.                             // ogg
  322.                             var ogg = $(parent).find(".video-ogg").val();
  323.                             $(".videoogg", cloned).val(ogg);
  324.                             $(parent).find(".video-ogg").val('');
  325.  
  326.                             // cover id
  327.                             var cover = $(parent).find(".videocover").val();
  328.                             $(".videocover", cloned).val(cover);
  329.                             $(parent).find(".videocover").val('');
  330.  
  331.                             // cover image
  332.                             var coverimage = $(parent).find(".jimg > img").attr('src');
  333.                             $(".jimg > img", cloned).attr('src', coverimage);
  334.                             $(parent).find(".jimg > img").attr('src', '');
  335.  
  336.                             // thumbsize
  337.                             var width = $(parent).find('.width').val();
  338.                             var height = $(parent).find('.height').val();
  339.                             $(".widthsize select", cloned).val(width);
  340.                             $(".heightsize select", cloned).val(height);
  341.  
  342.                             $(imageresultcontainer).append(cloned);
  343.                             $("html, body").animate({scrollTop: $(cloned).offset().top - $("#wpadminbar").height()}, 200);
  344.                             return false;
  345.                         });
  346.                     };
  347.  
  348.                     $("div[data-type='mediagallery']").each(function () {
  349.                         var parent = $(this);
  350.  
  351.                         // attach behaviour
  352.                         attach_accordion($('.typeaccordion', this));
  353.                         attach_image_list_behaviour(this);
  354.                         attach_result_list_behaviour(this);
  355.                         attach_result_drag_behaviour(this);
  356.                         attach_youtube_list_behaviour(this);
  357.                         attach_vimeo_list_behaviour(this);
  358.                         attach_soundcloud_list_behaviour(this);
  359.                         attach_html5_list_behaviour(this);
  360.                     });
  361.  
  362.                 }
  363.             },
  364.  
  365.             setColorpicker: function () {
  366.                 if ($('.meta-colorpicker').length) {
  367.                     $('.meta-colorpicker').each(function (idx, val) {
  368.                         var $this = $(this).find('.pickcolor');
  369.                         var $text = $(this).find('.pickcolor-text');
  370.                         var $thiscolor = $text.val();
  371.                         $this.ColorPicker({
  372.                             color: '#' + $thiscolor,
  373.                             onShow: function (colpkr) {
  374.                                 $(colpkr).fadeIn(500);
  375.                                 return false;
  376.                             },
  377.                             onHide: function (colpkr) {
  378.                                 $(colpkr).fadeOut(500);
  379.                                 return false;
  380.                             },
  381.                             onChange: function (hsb, hex, rgb) {
  382.                                 $this.find('div').css('backgroundColor', '#' + hex);
  383.                                 $text.val(hex);
  384.                             }
  385.                         });
  386.                     });
  387.                 }
  388.             },
  389.  
  390.             /** set tab **/
  391.             setTabs: function (options) {
  392.                 if ($('.jeg-meta-tab > .jeg-tab').length) {
  393.                     var taboption = {};
  394.                     jmetabox.metatab = $('.jeg-meta-tab > .jeg-tab').tabs(taboption);
  395.                 }
  396.             },
  397.  
  398.             /** slider **/
  399.             setSlider: function () {
  400.                 if ($(".sliderbar").length) {
  401.                     $(".sliderbar").each(function () {
  402.                         var slidebar = $(this);
  403.                         var minval = parseInt(slidebar.attr('min'), 10);
  404.                         var maxval = parseInt(slidebar.attr('max'), 10);
  405.                         var val = parseInt(slidebar.attr('value'), 10);
  406.                         var stepval = parseInt(slidebar.attr('step'), 10);
  407.                         slidebar.slider({
  408.                             range: "min",
  409.                             value: val,
  410.                             min: minval,
  411.                             max: maxval,
  412.                             step: stepval,
  413.                             slide: function (event, ui) {
  414.                                 var slidertext = $(this).parent().find('.slidertext');
  415.                                 $(slidertext).val(ui.value);
  416.                             }
  417.                         });
  418.                     });
  419.                 }
  420.             },
  421.  
  422.             /**
  423.              * jkreativ use here...
  424.              ***/
  425.             attachUpload: function () {
  426.  
  427.                 $(document).on('click', ".uploadfile .removefile", function () {
  428.                     var element = $(this);
  429.                     var parent = $(this).parents('.uploadfile');
  430.                     var preview = $(parent).find('.jimg > img');
  431.                     var input = $(parent).find('.uploadtext');
  432.  
  433.                     $(input).val('');
  434.                     $(preview).attr('src', '');
  435.                 });
  436.  
  437.                 $(document).on('click', ".uploadfile .selectfileimage", function (e) {
  438.                     var element = $(this);
  439.                     var title = $(this).val();
  440.                     var parent = $(this).parents('.uploadfile');
  441.                     var preview = $(parent).find('.jimg > img');
  442.                     var input = $(parent).find('.uploadtext');
  443.  
  444.                     e.preventDefault();
  445.  
  446.                     //Extend the wp.media object
  447.                     custom_uploader = wp.media.frames.file_frame = wp.media({
  448.                         title: title,
  449.                         button: {
  450.                             text: title
  451.                         },
  452.                         multiple: false
  453.                     });
  454.  
  455.                     //When a file is selected, grab the URL and set it as the text field's value
  456.                     custom_uploader.on('select', function () {
  457.                         attachment = custom_uploader.state().get('selection').first().toJSON();
  458.                         $(input).val(attachment.id);
  459.                         $(preview).attr('src', attachment.sizes.thumbnail.url);
  460.                     });
  461.  
  462.                     //Open the uploader dialog
  463.                     custom_uploader.open();
  464.                 });
  465.  
  466.                 $(document).on('click', ".uploadfile .selectfile", function (e) {
  467.  
  468.                     var element = $(this);
  469.                     var title = $(this).val();
  470.                     e.preventDefault();
  471.  
  472.                     //Extend the wp.media object
  473.                     custom_uploader = wp.media.frames.file_frame = wp.media({
  474.                         title: title,
  475.                         button: {
  476.                             text: title
  477.                         },
  478.                         multiple: false
  479.                     });
  480.  
  481.                     //When a file is selected, grab the URL and set it as the text field's value
  482.                     custom_uploader.on('select', function () {
  483.                         attachment = custom_uploader.state().get('selection').first().toJSON();
  484.                         $(element).parent().find('.uploadtext').val(attachment.url);
  485.                     });
  486.  
  487.                     //Open the uploader dialog
  488.                     custom_uploader.open();
  489.                 });
  490.             },
  491.  
  492.             /** attach gallery **/
  493.             attachGallery: function () {
  494.                 if ($(".attachgallery").length) {
  495.                     $(".attachgallery").click(function () {
  496.                         var postid = $("#post_ID").val();
  497.                         tb_show('', 'media-upload.php?post_id=' + postid + '&type=file&TB_iframe=true'); // type= can be image too, browse codex for another option
  498.                         // tinymce.DOM.setStyle( ['TB_overlay','TB_window','TB_load'], 'z-index', '999999' );
  499.                         tinymce.DOM.setStyle(['TB_window'], 'z-index', '999999');
  500.                         return false;
  501.                     });
  502.                 }
  503.             },
  504.  
  505.             /** set switch toogle **/
  506.             setSwitchtoogle: function () {
  507.                 if ($(".switchtoogle").length) {
  508.                     $(".switchtoogle").iButton();
  509.                 }
  510.             },
  511.  
  512.             /** switch tab **/
  513.             switchtab: function (enable, disable) {
  514.                 jmetabox.metatab.tabs("option", "disabled", []);
  515.                 jmetabox.metatab.tabs("option", "active", enable);
  516.                 jmetabox.metatab.tabs("option", "disabled", disable);
  517.             },
  518.  
  519.             /** set metabox anchor if enabled **/
  520.             setAnchor: function () {
  521.                 jmetabox.anchorSwitch();
  522.                 if ($('#janchor').length) {
  523.                     jmetabox.metatab.bind("tabsselect", function (event, ui) {
  524.                         var url = $(ui.tab).attr('href').substring(1);
  525.                         $("#janchor").val(url);
  526.                     });
  527.                 }
  528.             },
  529.  
  530.             anchorSwitch: function () {
  531.                 var portfoliomedia = $("#janchor").val();
  532.                 $(".jeg-meta-tab .ui-state-default a").each(function (index, ele) {
  533.                     if ($(ele).attr('href').substring(1) == $("#janchor").val()) {
  534.                         jmetabox.switchtab(index, []);
  535.                     }
  536.                 });
  537.             },
  538.  
  539.             /** get jadmin version **/
  540.             getversion: function () {
  541.                 return version;
  542.             },
  543.  
  544.             /** convert to slug **/
  545.             convertToSlug: function (Text) {
  546.                 return Text
  547.                     .toLowerCase()
  548.                     .replace(/ /g, '-')
  549.                     .replace(/[^\w-]+/g, '');
  550.             },
  551.  
  552.             /** hook list **/
  553.             beforeinit: function () {
  554.             },
  555.             afterinit: function () {
  556.             }
  557.         };
  558.  
  559.         return api;
  560.     }());
  561.  
  562.     $(document).ready(function () {
  563.         jmetabox.init();
  564.     });
  565. })(window, jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!