adding shortcode attribute delete feature on click in the shortcode preview. adding...

diff --git a/css/admin.css b/css/admin.css
index f8ce195..48d9ecb 100755 (executable)
--- a/css/admin.css
+++ b/css/admin.css
@@ -389,7 +389,7 @@ td.glm-nowrap {
     float: left;
 }
 .glm-dynSelect-box, #shortcode_preview_box, .glm-group-dynSelect-box, .glm-regions-dynSelect-box {
-    border: 2px #ddd solid;
+    /* border: 2px #ddd solid; */
     min-height: 2.5em;
     min-width: 100px;
     float: none;
@@ -427,27 +427,101 @@ td.glm-nowrap {
     margin-bottom: 15px;
     display: flex;
 }
+.shortcode-string{
+    cursor: pointer;
+    position: relative;
+}
+.shortcode-string:hover, .edit-attribute{
+    background:#00C773;
+}
+.delete-attribute{
+    position: absolute;
+    top: 10px;
+    transform: translateY(-50%);
+    z-index: 1;
+    box-shadow: 3px 3px 3px 0 rgba(0,0,0, .4);
+    padding: 8px;
+    border-radius: 6px;
+}
 .shortcode-string-container{
     /* padding-left: 16rem; */
 }
+[data-shortcode="delete"]{
+    left: 70px;
+    background: #DE5D60;
+    color: white;
+}
+[data-shortcode="cancel"]{
+    left: -25px;
+    background: #23282d;
+    color: white;
+}
 .shortcode-tile-container{
     display: flex;
 }
 .shortcode-tile{
     background: #e14d43;
     color: white;
-    padding: 8px;
+    padding: 3px 7px;
     margin: 3px 5px;
     display: flex;
     font-weight: bold;
     align-items: center;
+    border-radius: 18px;
+}
+.shortcode-button{
+    color: white;
+    border: none;
+    border-radius: 6px;
+    position: relative;
+    float: right;
+    padding: 10px;
+}
+#copy-to-clipboard{
+    background: #23282d;
+    margin-right: 10px;
+}
+#shortcodeBuilder{
+    margin-bottom: 20px;
+}
+#reset-shortcode{
+    background: #DE5D60;
+    
+}
+.shortcode-button:hover{
+    cursor: pointer;
+}
+.shortcode-confirmation{
+    position: absolute;
+    border: none;
+    top: 0;
+    left: 0;
+    background: #00C773;
+    border-radius: 6px;
+    width: 100%;
+    height: 100%;
+    color: white;
+    z-index: -1;
+    transition: all 300ms ease-in-out;
+    line-height: 2.8;
+    text-align: center;
+}
+.shortcode-confirmation.confirmed{
+    top: -50px;
+    z-index: 1;
+    
 }
 .delete-shortcode-tile{
     margin-left: 10px;
     background: white;
     color: #e14d43;
-    padding: 2px 5px;
+    padding: 0px 5px;
     font-weight: bold;
+    border-radius: 9px;
+}
+#shortcode_builder .ui-sortable-handle{
+    background: #0568B3;
+    color: white !important;
 }
 .delete-shortcode-tile:hover{
     cursor: pointer;
@@ -457,7 +531,6 @@ td.glm-nowrap {
     color: white;
     font-weight: bold;
     padding: 5px;
-    text-align: center;
 }
 /* Map Edit */
 .glm-map-edit {
@@ -742,7 +815,7 @@ td.glm-nowrap {
 #categoryTitle, #shortcodesTitle, #groupsTitle, #regionsTitle {
     font-weight: bold;
     font-size: 16px;
-    border-bottom: 2px #ddd solid;
+    /* border-bottom: 2px #ddd solid; */
 }
 #shortcode_builder > h2::before{
     position: relative;

diff --git a/js/shortcodeBuilder.js b/js/shortcodeBuilder.js
index ecc76e2..e4de8eb 100644 (file)
--- a/js/shortcodeBuilder.js
+++ b/js/shortcodeBuilder.js
@@ -46,6 +46,8 @@ jQuery(function ($) {
     }
 
     function setupAttributes(state){
+        $("#shortcode-preview").empty();
+        $(".shortcode-tile-container").empty();
         shortcode_string.appendTo( $("#shortcode-preview"));
         shortcode_end.appendTo( $("#shortcode-preview"));
         for(var attribute in shortcodeAttributes ){
@@ -100,10 +102,52 @@ jQuery(function ($) {
         updateShortcode({list: shortcodeAttributes[type].list, type: type, isList: shortcodeAttributes[type].isList});
     });
 
-    $("#copy-to-clipboard").on("click", function(){
-        console.log("copy")
+    $(".shortcode-button").on("click", function(){
+        var confirmation = $(this).children('div');
+        if( $(this).attr("id") == "copy-to-clipboard" ){
+            var tempInput = document.createElement("input");
+            tempInput.style = "position: absolute; left: -1000px; top: -1000px";
+            tempInput.value = $("#shortcode-preview").text();
+            document.body.appendChild(tempInput);
+            tempInput.select();
+            document.execCommand("copy");
+            document.body.removeChild(tempInput);
+        }else{
+            setupAttributes();
+        }
+        confirmation.toggleClass("confirmed");
+        setTimeout( function(){
+            confirmation.toggleClass("confirmed");
+        }, 3000);
     });
 
+    $(document).on("click", ".shortcode-string", function(){
+        $(this).addClass("edit-attribute");
+        if($(this).hasClass("edit-attribute")){
+            $("<div />", {
+                class: "delete-attribute",
+                text: "Delete",
+                "data-shortcode": 'delete'
+            }).prependTo( $(this) );
+            $("<div />", {
+                class: "delete-attribute",
+                text: "Cancel",
+                "data-shortcode": 'cancel'
+            }).prependTo( $(this) );
+        }
+        $(this).parent().siblings().children(".shortcode-string").removeClass("edit-attribute");
+    })
+    $(document).on("click", ".delete-attribute", function(e){
+        e.stopPropagation();
+        if( $(this).data("shortcode") == "delete"){
+            var type = $(this).parent().data("type");
+            if( $("#"+type+"-container").length > 0 ){
+                $("#"+type+"-container").empty();
+            }
+            $(this).parent().remove();
+        }
+        $(".delete-attribute").remove();
+    })
     $(document).on("click",".delete-shortcode-tile", shortcodeAttributes,function(){
         var tile    = $(this).parent();
         var type    = tile.data("type")

diff --git a/views/admin/pages/shortcode.html b/views/admin/pages/shortcode.html
index e28d482..2276100 100644 (file)
--- a/views/admin/pages/shortcode.html
+++ b/views/admin/pages/shortcode.html
@@ -1,4 +1,5 @@
 <div id="shortcode_container" class="{$shortcode_count}" style="overflow: auto">
+    <input id="shortcode-copy" type="text" style="display: none;">
     <div id="shortcode-preview"></div>
     <div id="shortcodeBuilder">
         <!-- <select id="shortcodeDropdown" class="shortcodeDropdown">
@@ -33,7 +34,15 @@
                 <option data-type="regions" value="{$region.id}">&nbsp{$region.name}</option>
             {/foreach}
         </select>
-        <button id="copy-to-clipboard" class="right button" type="button"> Copy To Clipboard </button>
+        <div id="reset-shortcode" class="right shortcode-button" type="button"> 
+                Reset Shortcode
+                <div id="shortcode-reset-confirmation" class="shortcode-confirmation">Shortcode Reset</div>
+        </div>
+        <div id="copy-to-clipboard" class="right shortcode-button" type="button"> 
+            Copy To Clipboard 
+            <div id="shortcode-copy-confirmation" class="shortcode-confirmation">Shortcode Copied</div>
+        </div>
+        
 
     </div>
     <div id="activeCategories" class="glm-dynSelect-box scCategories" style="height: auto; overflow: auto;">