adding better styles to the shortcode builder, category string functions now, working...
authorAnthony Talarico <talarico@gaslightmedia.com>
Wed, 6 Feb 2019 18:32:45 +0000 (13:32 -0500)
committerAnthony Talarico <talarico@gaslightmedia.com>
Wed, 6 Feb 2019 18:32:45 +0000 (13:32 -0500)
css/admin.css
js/shortcodeBuilder.js
views/admin/pages/shortcode.html

index 920afcf..57464fd 100755 (executable)
@@ -419,7 +419,38 @@ td.glm-nowrap {
 }
 #shortcode-preview{
     border: 1px solid lightgrey;
-    height: 30px;
+    padding: 8px;
+    font-weight: bold;
+    margin-bottom: 15px;
+}
+.shortcode-tile-container{
+    display: flex;
+}
+.shortcode-tile{
+    background: #e14d43;
+    color: white;
+    padding: 8px;
+    margin: 3px 5px;
+    display: flex;
+    font-weight: bold;
+    align-items: center;
+}
+.delete-shortcode-tile{
+    margin-left: 10px;
+    background: white;
+    color: #e14d43;
+    padding: 2px 5px;
+    font-weight: bold;
+}
+.delete-shortcode-tile:hover{
+    cursor: pointer;
+}
+.shortcode-tile-title{
+    background: #0568B3;
+    color: white;
+    font-weight: bold;
+    padding: 5px;
+    text-align: center;
 }
 /* Map Edit */
 .glm-map-edit {
index fc55e90..97f0dfb 100644 (file)
@@ -4,49 +4,93 @@
  * a lot of duplicate code and unnecessary variables I need to clean up, need to change case from camel case to snake case
  * need to create a function for setting the editor content because it is duplicated a few times
  */
-
 jQuery(function ($) {
-    
-    Object.compare = function (obj1, obj2) {
-        //Loop through properties in object 1
-        for (var p in obj1) {
-            //Check property exists on both objects
-            if (obj1.hasOwnProperty(p) !== obj2.hasOwnProperty(p)) return false;
-     
-            switch (typeof (obj1[p])) {
-                //Deep compare objects
-                case 'object':
-                    if (!Object.compare(obj1[p], obj2[p])) return false;
-                    break;
-                //Compare function code
-                case 'function':
-                    if (typeof (obj2[p]) == 'undefined' || (p != 'compare' && obj1[p].toString() != obj2[p].toString())) return false;
-                    break;
-                //Compare values
-                default:
-                    if (obj1[p] != obj2[p]) return false;
+    function createShortcodeTile(state, elHook){
+        var tile = $("<div />", {
+            text    : state.name,
+            id      : state.type+"-"+state.id,
+            class   : state.type+"-shortcode-tile shortcode-tile",
+        });
+        tile.attr("data-"+state.type, state.id);
+        tile.attr("data-type", state.type);
+        tile.append( $("<div />", {
+            class   : "delete-shortcode-tile",
+            text    : "X"
+        }));
+        tile.appendTo(elHook);
+    }
+
+    function generateShortcodeString(string){
+        console.log(string)
+        $("#shortcode-preview").text(shortcode_start + string + "]")
+    }
+
+    function checkDuplicates(object, list) {
+        var objString = JSON.stringify(object);
+        for( var i = 0; i < list.length; i++){
+            var listString = JSON.stringify(list[i]);
+            if(objString === listString){
+                return true
             }
         }
-     
-        //Check object 2 for any extra properties
-        for (var p in obj2) {
-            if (typeof (obj1[p]) == 'undefined') return false;
-        }
-        return true;
-    };
+        return false;
+    }
+
+    function updateShortcode(shortcodeData){
+        $("#"+shortcodeData.type+"-container").empty();
+        var ids = [];
+        var itemString = '';
+        console.log(shortcodeData.list);
+        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();
+            
+        });
+        generateShortcodeString(itemString);
+    }
 
     var shortcode_start     = "[glm-members-list ";
+    var categories_start    = "";
+    var regions_start       = "";
+    var groups_start        = "";
     var shortcodeAttributes = {
         categories  : [],
         regions     : [],
         groups      : []
     }
 
-    // build substrings that will be constructed with the main shortcode text
+    generateShortcodeString("");
+    // CATEGORIES 
     $("#shortcode-categories").on("change", function(){
-        var categoryID              = $(this).val();
-        var categoryName            = $(this).find("option:selected").text();
-        let categoryRecord          = {};
-        categoryRecord[categoryID]  = categoryName;
+        var categoryID      = $(this).val();
+        var categoryName    = $(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);
+        }
+
+        // $("#categories-container").empty();
+        updateShortcode({list: shortcodeAttributes.categories, type: type});
+    });
+
+    $("#copy-to-clipboard").on("click", function(){
+        console.log("copy")
+    });
+
+    $(document).on("click",".delete-shortcode-tile", shortcodeAttributes,function(){
+        var tile    = $(this).parent();
+        var type    = tile.data("type")
+        var id      = tile.data( type );
+        var updated = shortcodeAttributes[type].filter( function(item) {
+            return item.id != id;
+        });
+        shortcodeAttributes[type] = updated;
+        tile.remove();
+        updateShortcode({list: shortcodeAttributes[type], type: type});
     });
-});
+});
\ No newline at end of file
index cd14151..10b223a 100644 (file)
@@ -8,7 +8,7 @@
         <select id="shortcode-categories">
             <option disabled selected> Select Category </option>
             {foreach $categories as $key => $value}
-                <option value="{$key}">{$value.name}</option>
+                <option data-type="categories" value="{$key}">{$value.name}</option>
             {/foreach}
         </select>
         <select id="shortcode-blankstart">
         <select id="shortcode-groups">
             <option disabled selected> Select Groups </option>
             {foreach $amenGroups as $group}
-                <option value="{$group.id}">&nbsp{$group.name}</option>
+                <option data-type="groups" value="{$group.id}">&nbsp{$group.name}</option>
             {/foreach}
         </select>
         <select id="shortcode-regions">
             <option disabled selected> Select Region </option>
             {foreach $regions as $region}
-                <option value="{$region.id}">&nbsp{$region.name}</option>
+                <option data-type="regions" value="{$region.id}">&nbsp{$region.name}</option>
             {/foreach}
         </select>
-        <button id="copyToClipboard" class="right button" type="button"> Copy To Clipboard </button>
+        <button id="copy-to-clipboard" class="right button" type="button"> Copy To Clipboard </button>
 
     </div>
-    <div id="activeCategories" class="glm-dynSelect-box scCategories" style="height: auto; overflow: auto;"><div id="categoryTitle">Categories</div></div>
-    <div id="activeGroups" class="glm-group-dynSelect-box scGroups" style="height: auto; overflow: auto;"><div id="groupsTitle">Amenity Groups</div></div>
-    <div id="activeRegions" class="glm-regions-dynSelect-box scRegions" style="height: auto; overflow: auto;"><div id="regionsTitle">Regions</div></div>
+    <div id="activeCategories" class="glm-dynSelect-box scCategories" style="height: auto; overflow: auto;">
+        <div id="categoryTitle" class="shortcode-tile-title">Categories</div>
+        <div id="categories-container" class="shortcode-tile-container"></div>
+    </div>
+    <div id="activeGroups" class="glm-group-dynSelect-box scGroups" style="height: auto; overflow: auto;">
+        <div id="groupsTitle" class="shortcode-tile-title">Amenity Groups</div>
+            <div id="groups-container" class="shortcode-tile-container"></div>
+    </div>
+    <div id="activeRegions" class="glm-regions-dynSelect-box scRegions" style="height: auto; overflow: auto;">
+        <div id="regionsTitle" class="shortcode-tile-title">Regions</div>
+        <div id="regions-container" class="shortcode-tile-container"></div>
+    </div>
 </div>