adding shortcode builder functionality
authorAnthony Talarico <talarico@gaslightmedia.com>
Thu, 28 Apr 2016 20:59:35 +0000 (16:59 -0400)
committerAnthony Talarico <talarico@gaslightmedia.com>
Thu, 28 Apr 2016 20:59:35 +0000 (16:59 -0400)
controllers/admin.php
css/admin.css
js/admin.js

index 84eb98b..7d8f4a5 100644 (file)
@@ -167,6 +167,12 @@ class glmMembersAdmin extends GlmPluginSupport
 
             )
         );
+        
+        // add shortcode metabox
+        add_action('add_meta_boxes', array(
+            $this,
+            'glmMembersShortcode'
+        ) );  
 
         // Add AJAX image upload action
         add_action( 'wp_ajax_glm_members_admin_ajax',
@@ -589,6 +595,128 @@ class glmMembersAdmin extends GlmPluginSupport
 
         }
     }
+    public function glmMembersShortcode(){
+        
+        add_meta_box("shortcode_builder", 
+                "Shortcode Builder", 
+                array($this,'shortcode_builder_markup'), 
+                "page", 'normal', 'high'
+                );
+        
+    }
+    function prettyPrint($array){
+        echo '<pre>', print_r($array), '</pre>';
+    }
+            
+    // metabox content
+        function shortcode_builder_markup(){
+            
+            require_once(GLM_MEMBERS_PLUGIN_CLASS_PATH.'/data/dataCategories.php');     
+            
+            $listAttr = $this->config['addOns']['glm-member-db']['shortcodes']['glm-members-list']['attributes'];
+            $detailAttr = $this->config['addOns']['glm-member-db']['shortcodes']['glm-member-detail']['attributes'];
+            $packageListAttr = $this->config['addOns']['glm-member-db-packaging']['shortcodes']['glm-members-packaging-list']['attributes'];
+  
+            foreach($packageListAttr as $key=>$value){
+                $packageListAttr[] = $key;
+            }
+                   
+            $glmcat = new GlmDataCategories($this->wpdb, $this->wpconfig);
+            $list = $glmcat->getList();
+      
+            // get the each addOn slugs to pass to the config array later
+            $addOns = $this->config['addOns'];
+            foreach($addOns as $addOn){
+                if(!is_array($addOn['slug'])){
+                    $addOnSlugs[] = $addOn['slug'];
+                }
+            }
+
+            // use the addOn slugs to access each of the shortcodes
+            foreach($addOnSlugs as $addOn){
+                $shortCodeList[] = $this->config['addOns'][$addOn]['shortcodes'];
+            }
+            // loop through the shortcodes to pull out the shortcode names
+            foreach($shortCodeList as $addonInfo) {
+                foreach($addonInfo as $shortCode=>$value){
+                    if(!is_array($shortCode)){
+                        $shortCodes[] = $shortCode;
+                    }
+                }
+            }
+            
+            /*
+             * HTML Markup for the shortodes
+             */
+//            if(file_exists(GLM_MEMBERS_EVENTS_PLUGIN_PATH . "/setup/shortcodeBuilder.php")){
+//                include GLM_MEMBERS_EVENTS_PLUGIN_PATH . "/setup/shortcodeBuilder.php";
+//            }
+            
+            
+            //dropdown for shortcode names
+            echo '<div id="shortcodeBuilder">';
+            echo '<select id="shortcodeDropdown">
+            <option disabled="disabled"> Select Shortcode </option>';
+            foreach($shortCodes as $code){
+                echo '<option value = "' . $code . '">' . $code . '</option>';
+            }
+            echo '</select>';
+            
+            
+            /*
+             * Member DB Shortcode Attributes
+             */
+            
+            //dropdown for categories
+            echo '<select id="category-scDropdown">';
+            echo '<option disabled="disabled"> Select Category </option>';
+            foreach($list as $key=>$value){
+                echo '<option value='. $key . '>' . $value['name']  . '</option>';
+            }
+            echo '</select>';
+
+            // dropdown for blank start
+            echo '<select id="blank-start-scDropdown">';
+            echo  '<option disabled="disabled"> Blank Start </option>
+            <option selected="selected" value="False"> False </option>
+            <option value = "True"> True </option>';
+            echo '</select>';
+            
+            // show list options 'scb' = shortcode builder acronym 
+            echo '<div id="showList" title="List Options">';
+            echo '<label><input class="listBox" type="checkbox" name="list-scb" value="all">All</label>';
+            echo '<label><input class="listBox" type="checkbox" name="list-scb" value="none">None</label>';
+            foreach($listAttr as $key=>$value){
+                if($value != ''){
+                    echo '<label><input class="showLists" type="checkbox" name="listBox" value='. $key . '>' . $key .'</label>';
+                }
+            }           
+            echo '</div>';
+
+            // show detail options
+            echo '<div id="showDetail" title="Detail Options">';
+            echo '<label><input class="detailBox" type="checkbox" name="detailBox" value="all">All</label>';
+            echo '<label><input class="detailBox" type="checkbox" name="detailBox" value="none">None</label>';
+            foreach($detailAttr as $key=>$value){
+                if($value != ''){
+                    echo '<label><input class="showDetails" type="checkbox" name="detailBox" value='. $key . '>' . $key .'</label>';
+                }
+            }           
+            echo '</div>';
+            
+            // packaging addOn mark up
+            if(file_exists(GLM_MEMBERS_PACKAGING_PLUGIN_PATH . "/setup/shortcodeBuilder.php")){
+                include GLM_MEMBERS_PACKAGING_PLUGIN_PATH . "/setup/shortcodeBuilder.php";
+            }
+            
+
+            // list and detail buttons to open dialog for member db 'show' attr options
+            echo '<button id="listBtn" class="glm-button" type="button"> Show List Options </button>';
+            echo '<button id="detailBtn" class="glm-button" type="button"> Show Detail Options </button>';
+
+            echo '<button id="generate" class="glm-button" type="button"> Insert Shortcode </button>';
+                
+        }
 
     /**
      * Admin controller
index 5583758..ceafac6 100644 (file)
@@ -331,4 +331,19 @@ td.glm-nowrap {
 }
 input[type=submit], input[type=file] {
     cursor: pointer;
-}
\ No newline at end of file
+}
+#showDetail label, #showList label{
+    display: block;
+    padding-left: 15px;
+    text-indent: -15px;
+}
+.listBox, .detailBox {
+    width: 13px;
+    height: 13px;
+    padding: 0;
+    margin:0;
+    vertical-align: bottom;
+    position: relative;
+    top: -1px;
+    *overflow: hidden;
+}
index cf96727..4fffc4e 100644 (file)
@@ -3,3 +3,183 @@
  *  Other needed Admin JS code
  * 
  */
+jQuery(document).ready(function ($) {
+    
+    var shortcodeDropdown, shortcodeCategory, blankStart, listBox, detailBox, target, shortcodeString;
+    var shortcodeValues = {};
+    $("#showDetail").hide();
+    $("#showList").hide();
+    $("#listBtn").hide();
+    $("#detailBtn").hide();
+//    $("#category-scDropdown").hide();
+//    $("#blank-start-scDropdown").hide();
+//    $("#id-scDropdown").hide();
+    $("[id$=-scDropdown]").hide();
+   
+   // fire core events when switching between shortcodes
+    $("#shortcodeDropdown").on("change", function () {
+        // reset the dropdowns and checkbox if when switching shortcodes
+        document.getElementById('category-scDropdown').options[0].selected = 'selected';
+        document.getElementById('blank-start-scDropdown').options[0].selected = 'selected';
+        document.getElementById('id-scDropdown').options[0].selected = 'selected';
+        UncheckAll();
+        
+        // delete the object properties to reset the object
+        shortcodeString = "";
+        for (var prop in shortcodeValues){
+            delete shortcodeValues[prop];
+        }
+        
+        // get the shortcode option name and hide / show necessary elements
+        shortcodeDropdown = $("#shortcodeDropdown option:selected").text();
+        
+        if(shortcodeDropdown === "glm-members-list"){
+            $("#listBtn").show();
+            $("#detailBtn").hide();
+            $("#category-scDropdown").show();
+            $("#blank-start-scDropdown").show();
+            $("#id-scDropdown").hide();
+        }
+        
+        if(shortcodeDropdown === "glm-member-detail") {
+            $("#detailBtn").show();
+            $("#listBtn").hide();
+            $("#blank-start-scDropdown").show();
+            $("#category-scDropdown").hide();  
+            $("#id-scDropdown").hide();
+        } 
+        
+        if(shortcodeDropdown === "glm-members-packaging-list"){
+            $("#blank-start-scDropdown").hide();
+            $("#listBtn").hide();
+            $("#category-scDropdown").hide();
+            $("#detailBtn").hide();
+            $("#id-scDropdown").hide();
+        } 
+        
+        if (shortcodeDropdown === "glm-members-packaging-detail"){
+            $("#blank-start-scDropdown").hide();
+            $("#listBtn").hide();
+            $("#category-scDropdown").hide();
+            $("#detailBtn").hide()
+            $("#id-scDropdown").show();
+        }
+    });
+     
+     // shortcode attribute name from from dropdowns containing '-scDropdown' in their ID
+     // Then append the values to the shortcode object
+     $("[id$=-scDropdown]").on("change", function () {
+         target = $(this).attr("id").slice(0, -11);
+         var targetVal = $("#" + target + "-scDropdown option:selected").val();
+         shortcodeValues[target] = targetVal;
+    });
+
+    // use jquery dialog to separate the checkbox lists
+    $("#listBtn").on("click", function () {
+        $("#showList").dialog();
+    });
+    $("#detailBtn").on("click", function () {
+        $("#showDetail").dialog();
+    });
+
+    // generate the shortcode into a string and insert into the content upon clicking
+    $("#generate").on("click", function () {
+        // enforce the selection of a shortcode
+        if(shortcodeDropdown){
+            // set up properties for shortcode lists
+            if(shortcodeDropdown === "glm-members-list"){
+            var listValues = $('input[name="listBox"]:checkbox:checked').map(function() {
+                target = $(this).attr("class").slice(0, -5);
+                return this.value;
+            }).get();
+            
+            var listString = "";
+                listValues.forEach(function(value){
+                    listString += value + ",";
+                });
+                if(listValues != ""){
+                    listString = listString.replace(/,\s*$/, "");
+                    shortcodeValues[target] = listString;
+                }
+                // set up properties for detail shortcode
+            } else if( shortcodeDropdown === "glm-member-detail"){
+                var detailValues = $('input[name="detailBox"]:checkbox:checked').map(function() {
+                target = $(this).attr("class").slice(0, -7);
+                return this.value;
+            }).get();
+            
+                var detailString = '';
+                detailValues.forEach(function(value){
+                    detailString += value + ",";
+                });
+                if(detailValues != ""){
+                    detailString = detailString.replace(/,\s*$/, "");
+                    shortcodeValues[target] = detailString;
+                }
+            }
+
+            // start the shortcode string that will be added to the tinymce editor
+            shortcodeString = "[" + shortcodeDropdown;
+            
+            // populate the shortcode object
+            for (var key in shortcodeValues) {
+                if (shortcodeValues.hasOwnProperty(key)) {
+                    shortcodeString += " " + key + '="' + shortcodeValues[key] +'"';
+                }
+            }
+            shortcodeString += ']';
+
+            // insert shortcode at current cursor position
+//             if($("#content").css("display") !== "none"){
+//                var cursorPos = $('#content').prop('selectionStart');
+//                var v = $('#content').val();
+//                var textBefore = v.substring(0,  cursorPos );
+//                var textAfter  = v.substring( cursorPos, v.length );
+//                $('#content').val( textBefore + shortcodeString + textAfter );
+//                 
+//             } else {
+                function insert_tag(text){
+                if(tinyMCE && tinyMCE.activeEditor)
+                {
+                   tinyMCE.activeEditor.selection.setContent(text);
+                }
+                    return false;
+                }
+                insert_tag(shortcodeString);
+//            }
+
+        } else {
+            alert("Please Select a Shortcode");
+        }
+    });
+
+    // reset dropdowns and checkboxes to default values on page reload
+    var scd = document.getElementById('shortcodeDropdown');
+    var catscd = document.getElementById('category-scDropdown');
+    var blank = document.getElementById('blank-start-scDropdown');
+    var list = document.getElementById('type-scList');
+    
+    if(scd){
+        window.onload = document.getElementById('shortcodeDropdown').options[0].selected = 'selected';
+    }
+    if(catscd){
+        window.onload = document.getElementById('category-scDropdown').options[0].selected = 'selected';
+    }
+    if(blank){
+        window.onload = document.getElementById('blank-start-scDropdown').options[0].selected = 'selected';
+    }
+    if(list){
+        window.onload = document.getElementById('type-scList').options[0].selected = 'selected';
+    }
+   window.onload = UncheckAll();
+     
+    function UncheckAll(){ 
+      var w = document.getElementsByTagName('input'); 
+      for(var i = 0; i < w.length; i++){ 
+        if(w[i].type=='checkbox'){ 
+          w[i].checked = false; 
+        }
+      }
+    }
+}); 
\ No newline at end of file