From 96aebe90d5205be5b512c11b64d0e29f6f827392 Mon Sep 17 00:00:00 2001 From: Anthony Talarico Date: Wed, 22 Jun 2016 08:36:34 -0400 Subject: [PATCH] added more comments, there is duplicate code and camelcase variable names I meant to fix --- js/shortcodeBuilder.js | 162 +++++++++++++++-------------------------- 1 file changed, 58 insertions(+), 104 deletions(-) diff --git a/js/shortcodeBuilder.js b/js/shortcodeBuilder.js index 23ce7adf..c37a8dae 100644 --- a/js/shortcodeBuilder.js +++ b/js/shortcodeBuilder.js @@ -1,14 +1,17 @@ /* * * Other needed Admin JS code - * + * Block level comments used temporarily to make finding sections of the code easier + * alot of duplicate code and unecessary variables I need to clean up, need to change case from camel case to snake case + * need to create a function for setting the edtior content because it is duplicated a few times */ + jQuery(document).ready(function ($) { 'use strict'; var shortcodeDropdown, shortcodeCategory, blankStart, listBox, detailBox, target, boxTarget, shortcodeString, - editor_shortcodes, category_id, shortcodeValues = {}; + editor_shortcodes, category_id, shortcodeValues = {}, editor_content; $("#showDetail").hide(); $("#categoryBox").hide(); @@ -17,46 +20,14 @@ jQuery(document).ready(function ($) { $("[id$=-scDropdown]").hide(); $("#packageListAttr").hide(); $(".scCategories").hide(); - -// tinyMCE.init({ -// selector: "#tinymce-textarea", -// setup: function (editor) { -// editor.on('change', function (e) { -// var newVal = tinymce.get('tinymce-textarea').getContent(); -// $('.text-mirror').html(newVal); -// }); -// } -// }); - // reset checkboxes after page load -// function uncheckAll() { -// var w = document.getElementsByTagName('input'); -// for (var i = 0; i < w.length; i++){ -// if(w[i].type === 'checkbox'){ -// w[i].checked = false; -// } -// } -// } - -// var shortcode = $("#shortcode_container").not('.glm-dynSelect-item'), clone, id_count; -// id_count = 0; - -// $("#additionalShortcode").on( "click", function () { -// id_count++; -// clone = shortcode.clone(true); -// clone.find("#shortcodeDropdown").attr("id", "shortcodeDropdown" + "_" + id_count); -// clone.find(".glm-dynSelect-item").remove(); -// clone.find("#generate").attr("id", "generate" + "_" + id_count); -// clone.insertAfter("#shortcode_container:last"); -// -// }); - ///////////////////////////////////////////////////////////////////////////////////////// // CHANGE MAIN SHORTCODE ///////////////////////////////////////////////////////////////////////////////////////// - // fire core events and reset settings when switching between shortcodes + // fire events and reset settings when switching between shortcodes $("[id$=shortcodeDropdown]").on("change", function () { + // reset the dropdowns and checkbox if when switching shortcodes document.getElementById('category-scDropdown').options[0].selected = 'selected'; if($('#blank-start-scDropdown').length) @@ -68,6 +39,7 @@ jQuery(document).ready(function ($) { // delete the object properties to reset the object shortcodeString = ""; + for (var prop in shortcodeValues){ delete shortcodeValues[prop]; } @@ -75,6 +47,7 @@ jQuery(document).ready(function ($) { // get the shortcode option name and hide / show necessary elements shortcodeDropdown = $(".shortcodeDropdown option:selected").val(); + // many of these are not necessary as much of the shortcode has been stripped if(shortcodeDropdown === "glm-members-list"){ $("#showCategory").show(); $("#detailBtn").hide(); @@ -101,13 +74,10 @@ jQuery(document).ready(function ($) { }); - - - - + //////////////////////////////////////////////////////////////////// - // GET ATTRIBUTES + // PAGE LOAD FUNCTIONS ///////////////////////////////////////////////////////////////////// // shortcode attribute name from dropdowns containing '-scDropdown' in their ID // Then append the values to the shortcode object @@ -124,17 +94,18 @@ jQuery(document).ready(function ($) { $("#showDetail").dialog().dialog("option", "width", 422); }); + // get shortcodes between square brackets var regExp = /\[([^)]+)\]/; -// var regExp = /glm_members_list_/g; + // function used to get everything out of the visual and text editors function get_tinymce_content(){ if (jQuery("#wp-content-wrap").hasClass("tmce-active")){ tinyMCE.triggerSave(); if(regExp.exec($('#content').val())){ - editorContent = regExp.exec($('#content').val()); - return editorContent[0]; + editor_content = regExp.exec($('#content').val()); + return editor_content[0]; } else { return; } @@ -143,38 +114,34 @@ jQuery(document).ready(function ($) { // get the shortcode from the editor with [ ] as the delimiters - var editorContent = regExp.exec($("#content").val()); + editor_content = regExp.exec($("#content").val()); // getting an array as the value from the previous reExp, will need to investigate if(regExp.exec($("#content").val())){ - return editorContent[0]; + return editor_content[0]; } } } + // returned shortcode string after the editor content is filtered by the regex editor_shortcodes = get_tinymce_content(); if(editor_shortcodes){ - - var number_of_categories = (editor_shortcodes.match(/category="(.*?)"/g) || []).length; - + // get the number of instances of shortcodes with the category option + var number_of_categories = (editor_shortcodes.match(/glm-members-list category="(.*?)"/g) || []).length; } - console.debug(number_of_categories); - console.debug(editor_shortcodes); if(editor_shortcodes){ - if(editor_shortcodes.match(/category="(.*?)"/) !== null){ - category_id = editor_shortcodes.match(/category="(.*?)"/)[1]; -// console.debug(category_id); -// var cat_id_array = []; -// $.each(category_id, function (key, value) { -// cat_id_array.push(value.match(/"(.*?)"/)[1]); -// }); - + if(editor_shortcodes.match(/glm-members-list category="(.*?)"/) !== null){ + + // return the category option from the shortcode + category_id = editor_shortcodes.match(/glm-members-list category="(.*?)"/)[1]; + + // pull the ID numbers from the returned category string category_id = category_id.split(','); - } else if (editor_shortcodes.match(/category=""/) !== null){ - category_id = editor_shortcodes.match(/category="(.*?)"/)[1]; + } else if (editor_shortcodes.match(/glm-members-list category=""/) !== null){ + category_id = editor_shortcodes.match(/glm-members-list category="(.*?)"/)[1]; } } @@ -193,33 +160,20 @@ jQuery(document).ready(function ($) { + obj[0] + " (ID: " + obj[1] + ')' + 'X' + ''); }); - - if(editor_shortcodes && editor_shortcodes.indexOf('category="') >= 0){ - var index = editor_shortcodes.indexOf('category="'); - } else if ( editor_shortcodes && editor_shortcodes.indexOf("category='") >= 0){ - var index = editor_shortcodes.indexOf("category='"); - } - - - - - - - - + ///////////////////////////////////////////////////////////////////////////////////////////// /* - * Category Selection + * Category Selection these functions fire whenever the 'select category' dropdown is changed */ ////////////////////////////////////////////////////////////////////////////////////////////// - var content = $("#content"), editor_category_index, ids, id_string, new_ids = new Array(), editor_content, empty_space, count; + var content = $("#content"), editor_category_index, ids, id_string, new_ids = new Array(), empty_space, count; $('#category-scDropdown').change( function() { editor_shortcodes = get_tinymce_content(); if(editor_shortcodes){ if(editor_shortcodes.match(/category="(.*?)"/) !== null){ - category_id = editor_shortcodes.match(/category="(.*?)"/)[1]; + category_id = editor_shortcodes.match(/glm-members-list category="(.*?)"/)[1]; if(category_id !== ""){ category_id = category_id.split(','); @@ -229,6 +183,8 @@ jQuery(document).ready(function ($) { } else { ids = 'category=""'; + + // this determines if the category option is blank "" to determine if the jquery replace method works properly empty_space = true; } } @@ -257,6 +213,7 @@ jQuery(document).ready(function ($) { + ''); } + // reset the id string after each set of iterations id_string = ''; $.each($(".glm-dynSelect-item"), function () { @@ -265,13 +222,15 @@ jQuery(document).ready(function ($) { } }); + // if more than one category id in the array, join together with ',' otherwise set the id string to a single value if ( new_ids.length > 1){ id_string = new_ids.join(','); } else if ( new_ids.length === 1) { id_string = new_ids[0]; } - + + // replace the current content in either the visual or text editor and replace it with a filtered version of the categories if($("#content").css("display") !== "none"){ editor_content = content.val(); if(empty_space){ @@ -284,12 +243,9 @@ jQuery(document).ready(function ($) { } else if(tinyMCE.activeEditor !== null){ if(empty_space){ editor_content = tinyMCE.get('content').getContent({format: 'raw'}); - editor_content = editor_content.replace(ids, 'category="' + id_string + '"' ); tinyMCE.activeEditor.setContent(editor_content); } else { - var test = tinyMCE.get('glm-members-list_1').getContent(); - console.debug(test); editor_content = tinyMCE.get('content').getContent({format: 'raw'}); editor_content = editor_content.replace('category="' + ids, 'category="' + id_string); @@ -311,7 +267,7 @@ jQuery(document).ready(function ($) { } ///////////////////////////////////////////////////////////////////////////////////////////////// - // INSERT SHORTCODE FUNCTION + // INSERT SHORTCODE FUNCTION these fire when the 'insert shortcode' button is clicked ///////////////////////////////////////////////////////////////////////////////////////////////// // generate the shortcode into a string and insert into the content upon clicking $("[id$=generate]").on("click", function () { @@ -358,10 +314,11 @@ jQuery(document).ready(function ($) { shortcodeValues[boxTarget] = detailString; } } + // start the shortcode string that will be added to the tinymce editor shortcodeString = '
[' + shortcodeDropdown; - // populate the shortcode object + // populate the shortcode object with all of the shortcode attributes and their values for (var key in shortcodeValues) { if (shortcodeValues.hasOwnProperty(key)) { if(key !== "undefined"){ @@ -370,8 +327,9 @@ jQuery(document).ready(function ($) { } } - if(shortcodeString.match(/category="(.*?)"/) !== null){ - category_id = shortcodeString.match(/category="(.*?)"/)[1]; + // add the list of category ids instead of the single value originally inserted + if(shortcodeString.match(/glm-members-list category="(.*?)"/) !== null){ + category_id = shortcodeString.match(/glm-members-list category="(.*?)"/)[1]; category_id = category_id.split(','); ids = category_id.join(','); shortcodeString = shortcodeString.replace(ids, id_string); @@ -395,28 +353,25 @@ jQuery(document).ready(function ($) { } }); - - - - - - - ///////////////////////////////////////////////////////////////// - // DELETE CATEGORY - ///////////////////////////////////////////////////////////////// + + ////////////////////////////////////////////////////////////////////////////////////// + // DELETE CATEGORY these fire when a category box's X is clicked to delete a category + ///////////////////////////////////////////////////////////////////////////////////// // Action to de-select a category and dynamically adjust the shortcode categories in the editor + $('.catDelete').live('click', function() { editor_shortcodes = get_tinymce_content(); - if(editor_shortcodes && editor_shortcodes.match(/category="(.*?)"/) !== null){ - category_id = editor_shortcodes.match(/category="(.*?)"/)[1]; + if(editor_shortcodes && editor_shortcodes.match(/glm-members-list category="(.*?)"/) !== null){ + category_id = editor_shortcodes.match(/glm-members-list category="(.*?)"/)[1]; category_id = category_id.split(','); ids = category_id.join(','); } $(this).parent().remove(); + // reset the array after each set of iterations new_ids.length = 0; $.each($(".glm-dynSelect-item"), function () { @@ -425,8 +380,10 @@ jQuery(document).ready(function ($) { } }); + // create a string of id's from the array id_string = new_ids.join(','); - + + // get and replace current editor content if($("#content").css("display") !== "none"){ editor_content = content.val(); @@ -443,12 +400,9 @@ jQuery(document).ready(function ($) { }); - - - - - /////////////////////////////////////////////////////////////////////////// - // MAINENANCE + + ///////////////////////////////////////////////////////////////////////////////////////////////// + // MAINENANCE these were necessary to reset the dropdowns but most of them are no longer needed // reset dropdowns and checkboxes to default values on page reload var scd = document.getElementById('shortcodeDropdown'); var catscd = document.getElementById('category-scDropdown'); -- 2.17.1