From 5c9dded90a4ad6b68ee003568a08de58cc1e3a68 Mon Sep 17 00:00:00 2001 From: Anthony Talarico Date: Wed, 6 Feb 2019 13:32:45 -0500 Subject: [PATCH] adding better styles to the shortcode builder, category string functions now, working on regions and groups --- css/admin.css | 33 +++++++++- js/shortcodeBuilder.js | 110 +++++++++++++++++++++---------- views/admin/pages/shortcode.html | 23 +++++-- 3 files changed, 125 insertions(+), 41 deletions(-) diff --git a/css/admin.css b/css/admin.css index 920afcf4..57464fd8 100755 --- a/css/admin.css +++ b/css/admin.css @@ -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 { diff --git a/js/shortcodeBuilder.js b/js/shortcodeBuilder.js index fc55e90c..97f0dfbc 100644 --- a/js/shortcodeBuilder.js +++ b/js/shortcodeBuilder.js @@ -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 = $("
", { + 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( $("
", { + 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 diff --git a/views/admin/pages/shortcode.html b/views/admin/pages/shortcode.html index cd14151a..10b223a0 100644 --- a/views/admin/pages/shortcode.html +++ b/views/admin/pages/shortcode.html @@ -8,7 +8,7 @@ {foreach $amenGroups as $group} - + {/foreach} - +
-
Categories
-
Amenity Groups
-
Regions
+
+
Categories
+
+
+
+
Amenity Groups
+
+
+
+
Regions
+
+
-- 2.17.1