select2 for dynamic dropdown

aurovrata · Jun 18, 2017 · 0af95a0 · 0af95a0
1 parent c760a44
commit 0af95a0
Show file tree

Hide file tree

Showing 10 changed files with 411 additions and 45 deletions.
diff --git a/admin/css/cf7sg-dynamic-tag.css b/admin/css/cf7sg-dynamic-tag.css
@@ -96,3 +96,7 @@
 #dynamic-dropdown-sources article h4 {
     margin: 0 0 2px 0;
 }
+input#select2-tags:disabled + label a {
+    color: #b7b7b7;
+    text-decoration: none;
+}
diff --git a/admin/js/cf7sg-dynamic-tag.js b/admin/js/cf7sg-dynamic-tag.js
@@ -1,28 +1,35 @@
 
 (function( $ ) {
   'use strict';
-  var $tag = $('input.tag' , $('#dynamic-select-tag-generator').closest('.control-box').siblings('.insert-box'));
+  var $form = $('#dynamic-select-tag-generator');
+  var $tag = $('input.tag' , $form.closest('.control-box').siblings('.insert-box'));
   var $button = $tag.siblings('.submitbox').find('input.insert-tag');
-  var $select = $('#dynamic-select-tag-generator select.taxonomy-list');
-  var $plural = $('#dynamic-select-tag-generator input[name="plural_name"]');
-  var $single = $('#dynamic-select-tag-generator input[name="singular_name"]');
-  var $taxonomy = $('#dynamic-select-tag-generator input[name="taxonomy_slug"]');
-  var $is_cat = $('#dynamic-select-tag-generator input[name="is_hierarchical"]');
-  var $req = $('#dynamic-select-tag-generator input[name="required"]');
-  var $name = $('#dynamic-select-tag-generator input[name="name"]');
-  var $id = $('#dynamic-select-tag-generator input[name="id"]');
-  var $cl = $('#dynamic-select-tag-generator input[name="class"]');
-  var $post = $('#dynamic-select-tag-generator  select.post-list');
+  var $select = $('select.taxonomy-list', $form);
+  var $plural = $('input[name="plural_name"]', $form);
+  var $single = $('input[name="singular_name"]', $form);
+  var $taxonomy = $('input[name="taxonomy_slug"]', $form);
+  var $is_cat = $('input[name="is_hierarchical"]', $form);
+  var $req = $('input[name="required"]', $form);
+  var $name = $('input[name="name"]', $form);
+  var $id = $('input[name="id"]', $form);
+  var $cl = $('input[name="class"]', $form);
+  var $post = $(' select.post-list', $form);
+  var selectType = 'select';
+  // var version6 = false;
+  // var vernums = $.fn.jquery.split('.');
+  // if (parseInt(vernums[0]) > 0 && parseInt(vernums[1]) >= 6 && parseInt(vernums[2]) >= 0 ) {
+  //   version6 = false;
+  // }
 
   $('select.post-list').on('change', function(){
     $('div.post-taxonomies').hide();
     //$('div.post-taxonomies').off('change');
     var type = $(this).val();
     $('div#'+type).show();
     $('select.select2', $('div#'+type)).not('.select2-hidden-accessible').select2();
-
   });
-  $('#dynamic-select-tag-generator').on('change',':input', function(event){
+
+  $form.on('change',':input', function(event){
     var $target = $(event.target);
     var $tab = $('input[name="sections"]:checked');
     var source = 'taxonomy';
@@ -45,6 +52,14 @@
         $plural.prop('disabled',false);
         $single.prop('disabled',false);
       }
+    }else if($target.is('input.select-type')){ //---------select-type
+      selectType = $('input.select-type:checked').val();
+      if('select2' == selectType){
+        $('input#select2-tags', $form).prop('disabled', false);
+      }else{
+        $('input#select2-tags', $form).prop('checked', false);
+        $('input#select2-tags', $form).prop('disabled', true);
+      }
     }
     /* which source ? */
     if($tab.is('#taxonomy-tab')){
@@ -120,7 +135,6 @@
             var term='';
             for(term of $tax.val()){
               values += ' "'+term+'"';
-
             }
           }
         }
@@ -129,6 +143,21 @@
         values = ' source:filter';
         break;
     }
+    //select type
+    switch(selectType){
+      case 'nice':
+        classes+= ' class:nice-select';
+        break;
+      case 'select2':
+        classes += ' class:select2';
+        if($('input#select2-tags').is(':checked')){
+          classes += ' class:tags';
+        }
+        break;
+      case 'standard':
+      default:
+        break;
+    }
     /*
     if($select.find('option:selected').is('.cf7sg-new-taxonomy')){
       values += ' "hierarchical:'+ $is_cat.is(':checked')+'"';
@@ -140,4 +169,4 @@
     if($req.is(':checked')) type = 'dynamic_select* ';
     $tag.val('[' + type + $name.val() + id + classes + values +']');
   }
-  })( jQuery );
+})( jQuery );
diff --git a/admin/partials/cf7-dynamic-tag-display.php b/admin/partials/cf7-dynamic-tag-display.php
@@ -30,21 +30,36 @@
         	<td><input name="required" type="checkbox"> Required field<br /></td>
       	</tr>
         <tr>
-          <th>
-            <label for="tag-generator-panel-number-id">Id attribute</label>
-          </th>
+          <th scope="row">Id attribute</th>
           <td>
             <input name="id" class="idvalue oneline option" id="tag-generator-panel-dynamic-select-id" type="text">
           </td>
         </tr>
         <tr>
-          <th>
-            <label for="tag-generator-panel-number-class">Class attribute</label>
-          </th>
+          <th scope="row">Class attribute</th>
           <td>
             <input name="class" class="classvalue oneline option" id="tag-generator-panel-dynamic-select-class" type="text">
           </td>
         </tr>
+        <tr>
+          <th scope="row">Dropdown style</th>
+          <td>
+            <div>
+              <input name="select-style[]" class=" select-type "  type="radio" value="select" checked="checked"/>
+              <label>HTML Select field</label>
+            </div>
+            <div>
+              <input name="select-style[]" class=" select-type "  type="radio" value="nice" />
+              <label><a target="_blank" href="http://hernansartorio.com/jquery-nice-select/">jQuery Nice Select</a></label>
+            </div>
+            <div>
+              <input name="select-style[]" class=" select-type "  type="radio" value="select2" />
+              <label><a target="_blank" href="https://select2.github.io/">jQuery Select2</a></label>
+              <input name="select2-tags" id="select2-tags" type="checkbox" disabled value="select2tags"/>
+              <label for="select2-tags"><a target="_blank" href="https://select2.github.io/examples.html#tags">Enable user options</a></label>
+            </div>
+          </td>
+        </tr>
       </tbody>
     </table>
     <div id="dynamic-dropdown-sources" class="tabordion">

diff --git a/includes/class-cf7-grid-layout.php b/includes/class-cf7-grid-layout.php
@@ -229,6 +229,7 @@ private function define_public_hooks() {
     $this->loader->add_filter( 'wpcf7_form_hidden_fields', $plugin_public, 'set_hidden_key' );
     //Post My CF7 Form hooks
     $this->loader->add_filter('cf7_2_post_echo_field_mapping_script', $plugin_public, 'load_tabs_table_field', 10, 6 );
+    $this->loader->add_action('cf7_2_post_form_posted', $plugin_public, 'save_select2_custom_options', 10, 5 );
 	}
 
 	/**