From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Wed, 15 May 2019 18:50:43 +0000 (-0400)
Subject: creating a generic multiselect dropdown using select2 that can be used anywhere in... 
X-Git-Tag: v2.12.2^2~1
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=e271aaf7a8269452563211165374442af384764e;p=WP-Plugins%2Fglm-member-db.git

creating a generic multiselect dropdown using select2 that can be used anywhere in the plugin. Trying to use the new enqueue system, not having any luck. Scripts are currently enqueued directly in the list model
---

diff --git a/css/admin.css b/css/admin.css
index 70c2c836..58acea15 100755
--- a/css/admin.css
+++ b/css/admin.css
@@ -804,3 +804,6 @@ td.glm-nowrap {
     cursor: pointer;
 }
 .glm-import-td { padding:15px !important; margin: 0; }
+.select2-container .select2-search--inline{
+    clear: both;
+}
diff --git a/models/admin/members/list.php b/models/admin/members/list.php
index cb5feaed..2a59c824 100755
--- a/models/admin/members/list.php
+++ b/models/admin/members/list.php
@@ -126,6 +126,11 @@ class GlmMembersAdmin_members_list extends GlmDataMembers
         $enable_members     = $this->config['settings']['enable_members'];
         $textSearch         = false;
 
+        wp_enqueue_style('select2',"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" );
+        wp_enqueue_script('select2js', "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js" );
+        // GlmScriptRegistry::selectScript( GlmScriptType::Style, 'Select2CSS' );
+        // GlmScriptRegistry::selectScript( GlmScriptType::Script, 'Select2JS' );
+        
         // Save all query parameters
         if ( isset( $_REQUEST['glm_action'] ) && $_REQUEST['glm_action'] == 'list' ) {
             $_SESSION['member_saved_search'] = $_REQUEST;
diff --git a/setup/registerAdminScriptStyle.php b/setup/registerAdminScriptStyle.php
index cf5243ce..80e6d534 100644
--- a/setup/registerAdminScriptStyle.php
+++ b/setup/registerAdminScriptStyle.php
@@ -73,3 +73,28 @@
  * USING THIS REGISTRY ONLY.
  */
 
+/*
+ * Select2.js
+ */
+// GlmScriptRegistry::addScript(
+//     [
+//         'type' => GlmScriptType::Script,
+//         'handle' => 'Select2JS',
+//         'src' => "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js",
+//         'deps' => array(
+//             'jquery'
+//         ),
+//         'in_footer' => true,
+//         'plugin' => GLM_MEMBERS_PLUGIN_SLUG,
+//         'version' => GLM_MEMBERS_PLUGIN_VERSION
+//     ] 
+// );
+// GlmScriptRegistry::addScript(
+//     [
+//         'type' => GlmScriptType::Style,
+//         'handle' => 'Select2CSS',
+//         'src' => "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css",
+//         'plugin' => GLM_MEMBERS_PLUGIN_SLUG,
+//         'version' => GLM_MEMBERS_PLUGIN_VERSION
+//     ] 
+// );
diff --git a/views/admin/members/list.html b/views/admin/members/list.html
index 414903e8..26125abf 100644
--- a/views/admin/members/list.html
+++ b/views/admin/members/list.html
@@ -13,16 +13,15 @@
             <input type="submit" value="Submit" style="margin-right: 2em;">
         </div>
 <!--                <th>{$terms.term_member_plur_cap} Found:</th><td><span style="margin-right: 2em;">{$memberCount}</span></td> -->
-        <div class="glm-row">
-            <b>Categories: </b>
-            <select id="filterCategories" name="filterCategories[]" multiple="multiple" size="1">
-    {foreach from=$categories item=v}
-                <option value="{$v.id}" data-parent="{$v.parent}"{if $v.selected} selected{/if}>
-                    {if $v.parent_id}&nbsp;&nbsp;&nbsp;&nbsp;{/if}{$v.name}
-                </option>
-    {/foreach}
-            </select>
-        </div>
+
+        <!-- Multiselect Search Module. Set the necessary parameters for the element here -->
+        {assign var="multiSelectFilterID" value="filterCategories"}
+        {assign var="multiSelectFilterName" value="filterCategories[]"}
+        {assign var="multiSelectFilterData" value=$categories}
+        {assign var="multiSelectFilterPlaceholder" value="Filter Categories"}
+        {assign var="multiSelectFilterSearchTerm" value="Categories"}
+        {include file='admin/ui/multiSelectSearch.html'}
+        <!-- End Multiselect Search Module -->
 
         <div class="glm-row">
             <b>{$terms.term_member_cap} Types</b>
@@ -394,7 +393,9 @@
              $('.ui-autocomplete').css('height','200px').css('overflow-y','scroll');
 
              // Expand multi-select on hover
-             $('#filterCategories').multiselect();
+            //  $('#filterCategories').multiselect();
+     
+
              $('#exportFilterCategories').multiselect();
 
 
diff --git a/views/admin/ui/multiSelectSearch.html b/views/admin/ui/multiSelectSearch.html
new file mode 100644
index 00000000..90e9af0e
--- /dev/null
+++ b/views/admin/ui/multiSelectSearch.html
@@ -0,0 +1,18 @@
+
+<div class="glm-row">
+    <b>{$multiSelectFilterSearchTerm}: </b>
+    <select id="{$multiSelectFilterID}" name="{$multiSelectFilterName}" multiple="multiple" size="1">
+{foreach from=$multiSelectFilterData item=v}
+        <option value="{$v.id}" data-parent="{$v.parent}"{if $v.selected} selected{/if}>
+            {if $v.parent_id}&nbsp;&nbsp;&nbsp;&nbsp;{/if}{$v.name}
+        </option>
+{/foreach}
+    </select>
+</div>
+<script>
+    jQuery(function($){
+        $("#{$multiSelectFilterID}").select2({
+            placeholder: "{$multiSelectFilterPlaceholder}"
+        });
+    });
+</script>
\ No newline at end of file