Add search functionality in choose Module select (#750)

* Add Search functionality in choose functionalityoption * Adds grunt build changes * Adds node module for selectize and changed path
publiclab · Mar 18, 2019 · 5e33c69 · 5e33c69
1 parent bd68245
commit 5e33c69
Show file tree

Hide file tree

Showing 9 changed files with 686 additions and 160 deletions.
diff --git a/dist/image-sequencer-ui.js b/dist/image-sequencer-ui.js
@@ -25,6 +25,9 @@ window.onload = function() {
     }
     // Null option
     addStepSelect.append('<option value="none" disabled selected>More modules...</option>');
+    addStepSelect.selectize({
+      sortField: 'text'
+  });
   }
   refreshOptions();
 
@@ -270,8 +273,8 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
 
   function onLoad() {
     importStepsFromUrlHash();
-    if (!$('#selectStep').val())
-      $(addStepSel + " #add-step-btn").prop("disabled", true);
+    if ($('#selectStep').val()==='none')
+        $(addStepSel + " #add-step-btn").prop("disabled", true);
       handleSaveSequence();
   }
 
@@ -839,7 +842,9 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
           '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
         );
     }
-
+    $('#insertStep #add-step-btn').selectize({
+      sortField: 'text'
+    });
     $('#insertStep #add-step-btn').prop('disabled', true);
 
     insertStepSelect.append('<option value="none" disabled selected>More modules...</option>');

diff --git a/dist/image-sequencer-ui.min.js b/dist/image-sequencer-ui.min.js
diff --git a/examples/demo.js b/examples/demo.js
@@ -24,6 +24,9 @@ window.onload = function() {
     }
     // Null option
     addStepSelect.append('<option value="none" disabled selected>More modules...</option>');
+    addStepSelect.selectize({
+      sortField: 'text'
+  });
   }
   refreshOptions();
 

diff --git a/examples/index.html b/examples/index.html
@@ -26,17 +26,18 @@
   <script src="../node_modules/downloadjs/download.min.js" type="text/javascript"/>
 
   <script src="lib/scrollToTop.js"></script>
-
+  <script src="../node_modules/selectize/dist/js/standalone/selectize.min.js"></script>
 </head>
 
 
 <body>
 
   <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="demo.css">
   <link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
-
+  <link href="../node_modules/selectize/dist/css/selectize.default.css" rel="stylesheet">
   <!-- for crop module: -->
-  <link href="../node_modules/imgareaselect/distfiles/css/imgareaselect-default.css" rel="stylesheet">
+  <link href="./selectize.default.css" rel="stylesheet">
   <link rel="stylesheet" href="demo.css">
 
   <div class="container-fluid">
@@ -124,7 +125,7 @@ <h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
             </div>
           </div>
           <div class="center-align">
-            <select class="form-control input-lg" id="selectStep">
+            <select  id="selectStep" >
               <!-- The default null selection has been appended manually in demo.js
               This is because the options in select are overritten when options are appended.-->
             </select>

diff --git a/examples/lib/defaultHtmlSequencerUi.js b/examples/lib/defaultHtmlSequencerUi.js
@@ -8,8 +8,8 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
 
   function onLoad() {
     importStepsFromUrlHash();
-    if (!$('#selectStep').val())
-      $(addStepSel + " #add-step-btn").prop("disabled", true);
+    if ($('#selectStep').val()==='none')
+        $(addStepSel + " #add-step-btn").prop("disabled", true);
       handleSaveSequence();
   }
 

diff --git a/examples/lib/intermediateHtmlStepUi.js b/examples/lib/intermediateHtmlStepUi.js
@@ -86,7 +86,9 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
           '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
         );
     }
-
+    $('#insertStep #add-step-btn').selectize({
+      sortField: 'text'
+    });
     $('#insertStep #add-step-btn').prop('disabled', true);
 
     insertStepSelect.append('<option value="none" disabled selected>More modules...</option>');