From 47f14c0d3cdf1055bf834fafed328381d43d9baf Mon Sep 17 00:00:00 2001 From: Anthony Talarico Date: Fri, 8 Feb 2019 19:37:23 -0500 Subject: [PATCH] shortcode now generates a string, need a way to remove none liste attributes like view and blankstart --- css/admin.css | 7 +++ js/shortcodeBuilder.js | 96 ++++++++++++++++++++------------ views/admin/pages/shortcode.html | 18 +++--- 3 files changed, 77 insertions(+), 44 deletions(-) diff --git a/css/admin.css b/css/admin.css index 57464fd8..f8ce1955 100755 --- 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 97f0dfbc..ecc76e23 100644 --- 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 = $("
", { + text: '[glm-members-list', + }); + var shortcode_end = $("
", { + 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 = $("
", { + 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( $("").html(" ")); + $("#"+state.type+"-string").html(attribute); + } function createShortcodeTile(state, elHook){ var tile = $("
", { 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 ){ + $("
", { + 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 10b223a0..e28d4822 100644 --- a/views/admin/pages/shortcode.html +++ b/views/admin/pages/shortcode.html @@ -5,29 +5,29 @@ --> - {foreach $categories as $key => $value} {/foreach} - - - + + - - - + + - {foreach $amenGroups as $group} {/foreach} - {foreach $regions as $region} -- 2.17.1