From 8f0c222806d7bcac557fc21fbfd479b4be0d1501 Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Tue, 14 Jun 2016 12:01:39 -0400
Subject: [PATCH] adding dynamic categories to shortcode builder

---
 assets/flame.png             | Bin 0 -> 716 bytes
 classes/glmPluginSupport.php |  38 +++---
 css/admin.css                |  22 ++--
 js/shortcodeBuilder.js       | 238 +++++++++++++++++++++++++++++++----
 4 files changed, 247 insertions(+), 51 deletions(-)
 create mode 100755 assets/flame.png

diff --git a/assets/flame.png b/assets/flame.png
new file mode 100755
index 0000000000000000000000000000000000000000..53b4d031ef457f6077ddccb4dd3b6b85edab3af4
GIT binary patch
literal 716
zcmV;-0yF)IP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!~g&e!~vBn4jTXf0%1u+K~y+TZIa7t
zQ$ZBQM~TEVji!l_Y7%kb&V}Mesuh}8jU~~Vmo*567OD7N2yR`7h>LdBjUc!Z1vjPL
zDdHmkK^hgC+{9EHQuW@vtZmZL&ogt!JZukq+?hG&{N|gP%j$0*p*n6x?WO~@Te_+=
zu3obU{h1s>^}4m0Yu1dJu=4IXSUI*6>aYb`Xcx4gF4f0SzHt=m)e=<y4qBtU%rzCV
zpm^E<R=H}|n<G*ejHui@4j$Eq0cZh3E7zt{bT<lvT?B~h0KQP7gz9D3SYHzW&A**?
z>(+DsNh1}`v;hP)WJc-Ae$mXMJa!1$uxZooLIfyw0600^4fVW1wgW4(Q&0z)zN2WO
zO(IlBs?a!n*4F7jh#DFn6A}S()JramBFB$d4qNaeVnc4kg-<@m7JwjGjyYsIu(7%<
z?xjq}`xUVwAKiz{B^R<IZhYPnK;pKSC*l$TG*Ss<2N*I@H?q7r$^otxphSRDnA@W-
z-F)SN7mNK2wGXc)0#IK*LFSxEG%Lb^1gLQbieVcH5eM=?JHFlRNB!p_<~<B)?>4My
zOA-O(M-M{@?bTiU11yXlghEt)uC$+A%svyv9Q37+VQFGq%z6AyOd~yHCI`-TzyT-`
zCqbOZ1n3UlOv-Y4f$1qU)PkG=tGPLPI%DS%ngC7>_tNvYW%=gNUOh#cHfaI&fPIbH
zk)ws&Ww(%W(T4B$J+h@0^;{B)&nVuX*X3g_q)u7Dw3!!}JJE&IKo3$L8+~mwHz9e9
yLAf2k!s9!bkDo;H2&0@;*7P9RN5B318T<thSfB(f{XNP60000<MNUMnLSTZGur(t9

literal 0
HcmV?d00001

diff --git a/classes/glmPluginSupport.php b/classes/glmPluginSupport.php
index 99eee86a..8459a316 100644
--- a/classes/glmPluginSupport.php
+++ b/classes/glmPluginSupport.php
@@ -361,8 +361,8 @@ return; // Off for now ** Need to make this switchable in management
 
         // load shortcodeBuilder.js when the shortcode function has been fired if it hasn't been enqueued yet
         if( ! wp_script_is( 'jquery-ui-dialog', 'enqueued' ) ){
-            wp_enqueue_script('jquery-ui-dialog', false, array('jquery'), false, true);
             wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css');
+            wp_enqueue_script('jquery-ui-dialog', false, array('jquery'), false, true);           
         }
 
         function custom_js_css() {
@@ -387,7 +387,7 @@ return; // Off for now ** Need to make this switchable in management
         }
 
         add_meta_box("shortcode_builder",
-            "Shortcode Builder",
+            "Associate Shortcode Builder",
             array($this,'shortcode_builder_markup'),
             "page", 'normal', 'high'
         );
@@ -426,6 +426,7 @@ return; // Off for now ** Need to make this switchable in management
         }
 
         //dropdown for shortcode names
+        echo '<div id="categoryContainer" style="overflow: auto">';
         echo '<div id="shortcodeBuilder">';
         echo '<select id="shortcodeDropdown">
         <option value=""> Select Shortcode </option>';
@@ -434,20 +435,20 @@ return; // Off for now ** Need to make this switchable in management
                 if ( false !== strpos($code, 'members-list' ) ){
                     echo '<option value = "' . $code . '">' . 'Display Member List by Category' . '</option>';
                 } else if ( false !== strpos($code, 'packaging-list' ) ){
-                    echo '<option value = "' . $code . '">' . 'Packages' . '</option>';
+                    echo '<option value = "' . $code . '">' . 'Display Packages' . '</option>';
                 }
             }
         }
         echo '</select>';
 
-        echo '<button id="listBtn" class="glm-button" type="button"> Select a Category </button>';
+//        echo '<button id="showCategory" class="button" type="button"> Select a Category </button>';
         /*
          * Member DB Shortcode Attributes
          */
 
         //dropdown for categories
-        echo '<select id="category-scDropdown" name="category-scDropdown[]">';
-        echo '<option> Select Category </option>';
+        echo '<select id="category-scDropdown" name="category-scDropdown[]" >';
+        echo '<option disabled> Select Category </option>';
         foreach($list as $key=>$value){
             if( ! empty($value['parent']['name'])){
                 echo '<option value='. $key .'>' . '&nbsp&nbsp&nbsp'.$value['name']  . '</option>';
@@ -457,28 +458,28 @@ return; // Off for now ** Need to make this switchable in management
         }
         echo '</select>';
         
-        echo '<div id="showList" title="Member Categories ">';
+        echo '<div id="categoryBox" title="Member Categories ">';
         foreach($list as $key=>$value){
              if( ! empty($value['parent']['name'])){
-                echo '<label class="checkList"><input class="categoryLists" type="checkbox" name="listBox" value='. $key . '>' . '&nbsp&nbsp&nbsp'. $value['name'] .'</label>';
+                echo '<label class="checkList" for="'.$value['name'].'"><input class="categoryLists" type="checkbox" name="listBox" value='. $key . '>' . '&nbsp&nbsp&nbsp'. $value['name'] .'</label>';
             } else {
-                echo '<label class="checkList"><input class="categoryLists" type="checkbox" name="listBox" value='. $key . '>' . '&nbsp'. $value['name'] .'</label>';
+                echo '<label class="checkList" for="'.$value['name'].'"><input class="categoryLists" type="checkbox" name="listBox" value='. $key . '>' . '&nbsp'. $value['name'] .'</label>';
             }
         }
         echo '</div>';
 
         // dropdown for blank start
         echo '<select id="blank-start-scDropdown">';
-        echo  '<option> Hide List Until Searched</option>
+        echo  '<option disabled> Hide List Until Searched</option>
         <option value="False"> False </option>
         <option value="True"> True </option>';
         echo '</select>';
 
         // dropdown for views
         echo '<select id="view-scDropdown">';
-        echo  '<option> View </option>';
-        echo '<option selected="selected" value="bars"> Bars </option>';
-        echo '<option value="grid"> Grid </option>';
+        echo '<option disabled> View </option>';
+        echo '<option selected="selected" value="bars"> List View </option>';
+        echo '<option value="grid"> Grid View </option>';
         echo '</select>';
 
         // show list options 'scb' = shortcode builder acronym
@@ -501,7 +502,6 @@ return; // Off for now ** Need to make this switchable in management
 //                echo '<label class="checkDetails"><input class="showDetails" type="checkbox" name="detailBox" value='. $key . '>' . $key .'</label>';
 //            }
 //        }
-//        echo '</div>';
 
        // packaging addOn mark up
         if(file_exists(GLM_MEMBERS_PACKAGING_PLUGIN_PATH . "/setup/shortcodeBuilder.php")){
@@ -510,9 +510,15 @@ return; // Off for now ** Need to make this switchable in management
 
         // list and detail buttons to open dialog for member db 'show' attr options
         
-//        echo '<button id="detailBtn" class="glm-button" type="button"> Show Detail Options </button>';
+//      echo '<button id="detailBtn" class="glm-button" type="button"> Show Detail Options </button>';
 
-        echo '<button id="generate" class="glm-button" type="button"> Insert Shortcode </button>';
+        echo '<button id="generate" class="button" type="button"> Insert Shortcode </button>';
+        echo '</div>';
+        
+        echo '<div id="activeCategories" class="glm-dynSelect-box scCategories" style="height: auto; overflow: auto;"></div>';
+
+//      echo '<div id="shortcode_preview_box" style="overflow: auto; clear: both;"></div>';
+        echo '</div>';
 
     }
 
diff --git a/css/admin.css b/css/admin.css
index c821ff6e..dbab7484 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -194,7 +194,7 @@ td.glm-nowrap {
 }
 
 /* Dynamic Select Active Values Box */
-.glm-dynSelect-box {
+.glm-dynSelect-box, #shortcode_preview_box {
     border: 2px #ddd solid;
     min-height: 2.5em;
     min-width: 100px;
@@ -339,22 +339,28 @@ input[type=submit], input[type=file] {
     cursor: pointer;
 }
 .showLists, .showDetails{
-
 /*    margin:0;
     float:left;
     width:50%; */
-
 }
-#showDetail > label, #showList > label{  
-
-
+#showDetail > label, #categoryBox > label{  
 /*    margin:0;
     float:left;
     width:50%;*/
     display: block;
-
 }
-
+#shortcode_builder > h2::before{
+    position: relative;
+    top: 2px;
+    content: url(../assets/flame.png);
+}
+#shortcode_builder > h2 > span{
+    padding-left: 10px;
+}
+#preview_pane{
+    padding: 10px;
+    font-weight: bold;
+}
 
 /* Placeholder fixes for certain browsers */
 ::-webkit-input-placeholder { /* Chrome, Safari, Opera */
diff --git a/js/shortcodeBuilder.js b/js/shortcodeBuilder.js
index f8a3d702..b2ac987b 100644
--- a/js/shortcodeBuilder.js
+++ b/js/shortcodeBuilder.js
@@ -4,17 +4,31 @@
  * 
  */
 jQuery(document).ready(function ($) {
-//
-    var shortcodeDropdown, shortcodeCategory, blankStart, listBox, detailBox, target, boxTarget, shortcodeString;
+    
+    'use strict';
+
+    var shortcodeDropdown, shortcodeCategory, blankStart, listBox, detailBox, target, boxTarget, shortcodeString,
+    editor_shortcodes, category_id;
     var shortcodeValues = {};
     $("#showDetail").hide();
-    $("#showList").hide();
-    $("#listBtn").hide();
+    $("#categoryBox").hide();
+    $("#showCategory").hide();
     $("#detailBtn").hide();
     $("[id$=-scDropdown]").hide();
     $("#packageListAttr").hide();
+    $(".scCategories").hide();
+    
+    // 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; 
+        }
+      }
+    }
     
-   // fire core events when switching between shortcodes
+   // fire core events and reset settings when switching between shortcodes
     $("#shortcodeDropdown").on("change", function () {
         // reset the dropdowns and checkbox if when switching shortcodes
         document.getElementById('category-scDropdown').options[0].selected = 'selected';
@@ -22,7 +36,8 @@ jQuery(document).ready(function ($) {
             document.getElementById('blank-start-scDropdown').options[0].selected = 'selected';
         if($('#id-scDropdown').length)
             document.getElementById('id-scDropdown').options[0].selected = 'selected';
-        UncheckAll();
+        
+        uncheckAll();
         
         // delete the object properties to reset the object
         shortcodeString = "";
@@ -34,18 +49,20 @@ jQuery(document).ready(function ($) {
         shortcodeDropdown = $("#shortcodeDropdown option:selected").val();
         
         if(shortcodeDropdown === "glm-members-list"){
-            $("#listBtn").show();
+            $("#showCategory").show();
             $("#detailBtn").hide();
             $("#blank-start-scDropdown").show();
             $("#id-scDropdown").hide();
             $("#view-scDropdown").show();
             $("#map-opened-scDropdown").show();
             $("[id^='packageList']").hide();
+            $("#category-scDropdown").show();  
+            $(".scCategories").show();
         }
         
         if(shortcodeDropdown === "glm-member-detail") {
             $("#detailBtn").show();
-            $("#listBtn").hide();
+            $("#showCategory").hide();
             $("#blank-start-scDropdown").show();
             $("#category-scDropdown").hide();  
             $("#id-scDropdown").hide();
@@ -55,18 +72,19 @@ jQuery(document).ready(function ($) {
         
         if(shortcodeDropdown === "glm-members-packaging-list"){
             $("#blank-start-scDropdown").hide();
-            $("#listBtn").hide();
+            $("#showCategory").hide();
             $("#category-scDropdown").hide();
             $("#detailBtn").hide();
             $("#id-scDropdown").hide();
             $("#packageListAttr").children().show();
             $("[id^='packageList']").show();
             $("#view-scDropdown").hide();
+             $(".scCategories").hide();
         } 
         
         if (shortcodeDropdown === "glm-members-packaging-detail"){
             $("#blank-start-scDropdown").hide();
-            $("#listBtn").hide();
+            $("#showCategory").hide();
             $("#category-scDropdown").hide();
             $("#detailBtn").hide();
             $("#id-scDropdown").show();
@@ -75,7 +93,7 @@ jQuery(document).ready(function ($) {
         }
         if (shortcodeDropdown === "glm-members-event-list"){
             $("#blank-start-scDropdown").hide();
-            $("#listBtn").hide();
+            $("#showCategory").hide();
             $("#category-scDropdown").hide();
             $("#detailBtn").hide();
             $("[id^='packageList']").hide();
@@ -84,7 +102,7 @@ jQuery(document).ready(function ($) {
         }
         if (shortcodeDropdown === "glm-members-event-detail"){
             $("#blank-start-scDropdown").hide();
-            $("#listBtn").hide();
+            $("#showCategory").hide();
             $("#category-scDropdown").hide();
             $("#detailBtn").hide();
             $("[id^='packageList']").hide();
@@ -94,7 +112,7 @@ jQuery(document).ready(function ($) {
         }
         if (shortcodeDropdown === "glm-members-event-front-add"){
             $("#blank-start-scDropdown").hide();
-            $("#listBtn").hide();
+            $("#showCategory").hide();
             $("#category-scDropdown").hide();
             $("#detailBtn").hide();
             $("[id^='packageList']").hide();
@@ -102,8 +120,7 @@ jQuery(document).ready(function ($) {
             $("#view-scDropdown").hide();
         }
     });
- 
-     
+
      // shortcode attribute name from dropdowns containing '-scDropdown' in their ID
      // Then append the values to the shortcode object
      $("[id$=-scDropdown]").on("change", function () {
@@ -112,13 +129,141 @@ jQuery(document).ready(function ($) {
          shortcodeValues[target] = targetVal;
     });
     // use jquery dialog to separate the checkbox lists
-    $("#listBtn").on("click", function () {
-        $("#showList").dialog().dialog("option", "width", 422 );
+    $("#showCategory").on("click", function () {
+        $("#categoryBox").dialog().dialog("option", "width", 450 );
     });
     $("#detailBtn").on("click", function () {
         $("#showDetail").dialog().dialog("option", "width", 422);
     });
-  
+    
+    function get_tinymce_content(){
+        if (jQuery("#wp-content-wrap").hasClass("tmce-active")){
+            
+            var regExp = /\[([^)]+)\]/;
+            
+            tinyMCE.triggerSave();
+            
+            if(regExp.exec($('#content').val())){
+                editorContent = regExp.exec($('#content').val());
+                return editorContent[0];
+            } else {
+                return;
+            }
+
+        } else {
+            
+            // get the shortcode from the editor with [ ] as the delimiters
+            var regExp = /\[([^)]+)\]/;
+            var editorContent = 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];
+            }
+        }
+    }      
+
+    editor_shortcodes = get_tinymce_content();
+    console.debug(editor_shortcodes);
+    
+    if(editor_shortcodes){
+        if(editor_shortcodes.match(/category="(.*?)"/) !== null){
+            category_id = editor_shortcodes.match(/category="(.*?)"/)[1];
+            category_id = category_id.split(',');
+        }
+    }
+
+    var category_names_ids = new Array();
+    var categoryNames = $("#category-scDropdown>option").map(function() { 
+        var index = $.inArray($(this).val(), category_id);
+        if(index !== -1 && index !== ""){
+            category_names_ids.push([$(this).text(), $(this).val()]);
+            return $(this).text(); 
+        }
+    }).get();
+
+    $.each( category_names_ids, function (index, obj) {
+        $('#activeCategories').append('<div data-id="' + obj[1]
+           + '" class="glm-dynSelect-item glm-members-catgegory">' 
+           + obj[0] + " (ID: " + obj[1] + ')' + '<span class="glm-dynSelect-delete catDelete">X</span>'
+           + '<input type="hidden" name="category[' + obj[0] + ']" value="' + obj[0] + '"></div>');
+    });
+    
+    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
+    */
+     var content = $("#content"), editor_category_index, ids, id_string, new_ids = new Array(), editor_content;
+
+    $('#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 = category_id.split(',');
+                ids = category_id.join(',');
+                editor_category_index = editor_shortcodes.indexOf('category=');
+            }
+        }
+ 
+       // Get the ID, name, and parent of the category
+       var catValue = $('#category-scDropdown').val();       
+       var catName = $('#category-scDropdown').find(':selected').text();
+       var catParent = $('#category-scDropdown').find(':selected').attr('data-parent');
+
+       // Check if the category has already been added
+       var found = false;              
+       $(".glm-members-catgegory").each( function() {
+           var id = $(this).attr('data-id');
+           if (id === catValue) {
+               found = true;
+           }
+       });
+
+       // Check if there's a parent
+//       parentName = '';
+//       if (catParent !== '') {
+//           parentName = catParent + ': ';
+//       }
+
+       // If not found, Add the category
+       if (!found) {
+           $('#activeCategories').append('<div data-id="' + catValue 
+                   + '" class="glm-dynSelect-item glm-members-catgegory">' 
+                   + catName.trim() + ' (ID: ' + catValue + ')' + '<span class="glm-dynSelect-delete catDelete">X</span>'
+                   + '<input type="hidden" name="category[' + catValue + ']" value="' + catValue + '"></div>');
+       }
+       
+       id_string = '';
+       $.each($(".glm-dynSelect-item"), function () {
+           if($.inArray($(this).data("id"), new_ids) === -1){
+               new_ids.push($(this).data("id"));
+           }
+       });
+       
+       id_string = new_ids.join(',');
+       
+       if($("#content").css("display") !== "none"){
+           editor_content = content.val();
+           editor_content = editor_content.replace(ids, id_string);
+           content.val(editor_content);
+       } else if(tinyMCE.activeEditor !== null){
+           editor_content = tinyMCE.get('content').getContent({format: 'raw'});
+           editor_content = editor_content.replace(ids, id_string);
+           tinyMCE.activeEditor.setContent(editor_content);
+       }
+
+       // Reset picklist
+       $('#category-scDropdown').val('Select Category');
+    });
+    
     // generate the shortcode into a string and insert into the content upon clicking
     $("#generate").on("click", function () {
         // enforce the selection of a shortcode
@@ -167,6 +312,13 @@ jQuery(document).ready(function ($) {
                     }
                 }
             }
+            
+            if(shortcodeString.match(/category="(.*?)"/) !== null){
+                category_id = shortcodeString.match(/category="(.*?)"/)[1];
+                category_id = category_id.split(',');
+                ids = category_id.join(',');
+                shortcodeString = shortcodeString.replace(ids, id_string);
+            }
             shortcodeString += ']';
 
             // insert shortcode at current cursor position
@@ -181,6 +333,7 @@ jQuery(document).ready(function ($) {
                 function insert_tag(text){
                     if(tinyMCE && tinyMCE.activeEditor)
                     {
+                        console.log(tinyMCE.activeEditor.id);
                         tinyMCE.activeEditor.selection.setContent(text);
                     }
                         return false;
@@ -192,12 +345,47 @@ jQuery(document).ready(function ($) {
         }
     });
 
+    // 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.match(/category="(.*?)"/) !== null){
+            category_id = editor_shortcodes.match(/category="(.*?)"/)[1];
+            category_id = category_id.split(',');
+            ids = category_id.join(',');
+       }   
+
+       $(this).parent().remove();
+       
+       new_ids.length = 0;
+            
+       $.each($(".glm-dynSelect-item"), function () {
+           if($.inArray($(this).data("id"), new_ids) === -1){
+               new_ids.push($(this).data("id"));
+           }
+       });
+       
+       id_string = new_ids.join(',');
+        
+       if($("#content").css("display") !== "none"){
+           editor_content = content.val();
+           editor_content = editor_content.replace(ids, id_string);
+           content.val(editor_content);
+       } else if(tinyMCE.activeEditor !== null){
+           editor_content = tinyMCE.get('content').getContent({format: 'raw'});
+           editor_content = editor_content.replace(ids, id_string);
+           tinyMCE.activeEditor.setContent(editor_content);
+       }
+    });
+    
     // reset dropdowns and checkboxes to default values on page reload
     var scd = document.getElementById('shortcodeDropdown');
     var catscd = document.getElementById('category-scDropdown');
     var blank = document.getElementById('blank-start-scDropdown');
     var list = document.getElementById('type-scList');
     var members = document.getElementById('member-scDropdown');
+    var view = document.getElementById('view-scDropdown');
     
     if(scd){
         window.onload = document.getElementById('shortcodeDropdown').options[0].selected = 'selected';
@@ -214,14 +402,10 @@ jQuery(document).ready(function ($) {
     if(members){
         window.onload = document.getElementById('member-scDropdown').options[0].selected = 'selected';
     }
-   window.onload = UncheckAll();
-     
-    function UncheckAll(){ 
-      var w = document.getElementsByTagName('input'); 
-      for(var i = 0; i < w.length; i++){ 
-        if(w[i].type === 'checkbox'){ 
-          w[i].checked = false; 
-        }
-      }
+    if(view){
+        window.onload = document.getElementById('view-scDropdown').options[0].selected = 'selected';
     }
+   window.onload = uncheckAll();
+     
+    
 }); 
\ No newline at end of file
-- 
2.17.1