shortcode now generates a string, need a way to remove none liste attributes like...

diff --git a/css/admin.css b/css/admin.css
index 57464fd..f8ce195 100755 (executable)
--- a/css/admin.css
+++ b/css/admin.css
@@ -417,11 +417,18 @@ td.glm-nowrap {
     color: #000;
     cursor: pointer;
 }
+.shortcode-no-space .shortcode-space{
+    display: none;
+}
 #shortcode-preview{
     border: 1px solid lightgrey;
     padding: 8px;
     font-weight: bold;
     margin-bottom: 15px;
+    display: flex;
+}
+.shortcode-string-container{
+    /* padding-left: 16rem; */
 }
 .shortcode-tile-container{
     display: flex;

diff --git a/js/shortcodeBuilder.js b/js/shortcodeBuilder.js
index 97f0dfb..ecc76e2 100644 (file)
--- a/js/shortcodeBuilder.js
+++ b/js/shortcodeBuilder.js
@@ -5,6 +5,31 @@
  * need to create a function for setting the editor content because it is duplicated a few times
  */
 jQuery(function ($) {
+    var shortcode_string = $("<div >", {
+        text: '[glm-members-list',
+    });
+    var shortcode_end = $("<div />", {
+        class : "shortcode-end",
+        text: ']',
+    });
+    var shortcodeAttributes = {
+        categories  : {list:[], isList: true},
+        regions     : {list:[], isList: true},
+        groups      : {list:[], isList: true},
+        views       : {list:[], isList: false},
+        blankstart  : {list:[], isList: false},
+    }
+    function generateShortCodeAttribute(state){
+        var attribute = $("<div />", {
+            text    : state.attribute,
+            class   : state.type+"-shortcode-string shortcode-string",
+        });
+        attribute.attr("data-"+state.type, state.id);
+        attribute.attr("data-type", state.type);
+        $("#"+state.type+"-string").empty();
+        attribute.prepend( $("<span class='shortcode-space'>").html("&#160;"));
+        $("#"+state.type+"-string").html(attribute);
+    }
     function createShortcodeTile(state, elHook){
         var tile = $("<div />", {
             text    : state.name,
@@ -20,9 +45,15 @@ jQuery(function ($) {
         tile.appendTo(elHook);
     }
 
-    function generateShortcodeString(string){
-        console.log(string)
-        $("#shortcode-preview").text(shortcode_start + string + "]")
+    function setupAttributes(state){
+        shortcode_string.appendTo( $("#shortcode-preview"));
+        shortcode_end.appendTo( $("#shortcode-preview"));
+        for(var attribute in shortcodeAttributes ){
+            $("<div />", {
+                id      : attribute + "-string",
+                class   : "shortcode-string-container"
+            }).insertBefore( $(".shortcode-end"));
+        }
     }
 
     function checkDuplicates(object, list) {
@@ -39,43 +70,34 @@ jQuery(function ($) {
     function updateShortcode(shortcodeData){
         $("#"+shortcodeData.type+"-container").empty();
         var ids = [];
-        var itemString = '';
-        console.log(shortcodeData.list);
+        var item_string = '';
+        
         shortcodeData.list.map( function(item){
             ids.push(item.id);
             createShortcodeTile({id: item.id, name: item.name, type: item.type}, $("#"+item.type + "-container"))
-            itemString = item.type+"="+ids.join();
-            
+            item_string = item.type+'="'+ids.join() + '"';
         });
-        generateShortcodeString(itemString);
+    
+        shortcodeData['attribute'] = item_string;
+        generateShortCodeAttribute(shortcodeData);
     }
+    
+    setupAttributes();
 
-    var shortcode_start     = "[glm-members-list ";
-    var categories_start    = "";
-    var regions_start       = "";
-    var groups_start        = "";
-    var shortcodeAttributes = {
-        categories  : [],
-        regions     : [],
-        groups      : []
-    }
-
-    generateShortcodeString("");
-    // CATEGORIES 
-    $("#shortcode-categories").on("change", function(){
-        var categoryID      = $(this).val();
-        var categoryName    = $(this).find("option:selected").text();
+    $(document).on("change", ".shortcode-selection",function(){
+        var id              = $(this).val();
+        var name            = $(this).find("option:selected").text();
         var type            = $(this).find("option:selected").data("type");            
-        let categoryRecord  = {id: categoryID, name: categoryName, type: type};
-
-        if(shortcodeAttributes.categories.length == 0){
-            shortcodeAttributes.categories.push(categoryRecord);
-        } else if(!checkDuplicates(categoryRecord, shortcodeAttributes.categories)){
-            shortcodeAttributes.categories.push(categoryRecord);
+        let record          = {id: id, name: name, type: type};
+        
+        if(shortcodeAttributes[type].list.length == 0 || !checkDuplicates(record, shortcodeAttributes[type].list) && shortcodeAttributes[type].isList ){
+            shortcodeAttributes[type].list.push(record);
+        }else if(!shortcodeAttributes[type].isList) {
+            shortcodeAttributes[type].list = [];
+            shortcodeAttributes[type].list.push(record);
         }
-
-        // $("#categories-container").empty();
-        updateShortcode({list: shortcodeAttributes.categories, type: type});
+        $("#"+type+"-string").removeClass("shortcode-no-space");
+        updateShortcode({list: shortcodeAttributes[type].list, type: type, isList: shortcodeAttributes[type].isList});
     });
 
     $("#copy-to-clipboard").on("click", function(){
@@ -86,11 +108,15 @@ jQuery(function ($) {
         var tile    = $(this).parent();
         var type    = tile.data("type")
         var id      = tile.data( type );
-        var updated = shortcodeAttributes[type].filter( function(item) {
+        var updated = shortcodeAttributes[type].list.filter( function(item) {
             return item.id != id;
         });
-        shortcodeAttributes[type] = updated;
+        
+        shortcodeAttributes[type].list = updated;
+        if( shortcodeAttributes[type].list.length == 0) {
+            $("#"+type+"-string").addClass("shortcode-no-space");
+        }
         tile.remove();
-        updateShortcode({list: shortcodeAttributes[type], type: type});
+        updateShortcode({list: shortcodeAttributes[type].list, type: type});
     });
 });
\ No newline at end of file

diff --git a/views/admin/pages/shortcode.html b/views/admin/pages/shortcode.html
index 10b223a..e28d482 100644 (file)
--- a/views/admin/pages/shortcode.html
+++ b/views/admin/pages/shortcode.html
@@ -5,29 +5,29 @@
             <option value=""> Select Shortcode </option>
             <option value = "glm-members-list">Display {$terms.term_member_plur_cap} List by Category</option>
         </select> -->
-        <select id="shortcode-categories">
+        <select id="shortcode-categories" class="shortcode-selection" data-type="categories">
             <option disabled selected> Select Category </option>
             {foreach $categories as $key => $value}
                 <option data-type="categories" value="{$key}">{$value.name}</option>
             {/foreach}
         </select>
-        <select id="shortcode-blankstart">
+        <select id="shortcode-blankstart" class="shortcode-selection" data-type="blankstart">
             <option disabled selected> Hide List initially</option>
-            <option value="False"> No </option>
-            <option value="True"> Yes </option>
+            <option data-type="blankstart" value="False"> No </option>
+            <option data-type="blankstart" value="True"> Yes </option>
         </select>
-        <select id="shortcode-views">
+        <select id="shortcode-views" class="shortcode-selection" data-type="views">
             <option disabled selected> View </option>
-            <option selected="selected" value="list"> List View </option>
-            <option value="grid"> Grid View </option>
+            <option  data-type="views" selected="selected" value="list"> List View </option>
+            <option  data-type="views" value="grid"> Grid View </option>
         </select>
-        <select id="shortcode-groups">
+        <select id="shortcode-groups" class="shortcode-selection" data-type="groups">
             <option disabled selected> Select Groups </option>
             {foreach $amenGroups as $group}
                 <option data-type="groups" value="{$group.id}">&nbsp{$group.name}</option>
             {/foreach}
         </select>
-        <select id="shortcode-regions">
+        <select id="shortcode-regions" class="shortcode-selection" data-type="regions">
             <option disabled selected> Select Region </option>
             {foreach $regions as $region}
                 <option data-type="regions" value="{$region.id}">&nbsp{$region.name}</option>