From b0a4a27a1fbcd506f3d0be5032c25d36bcaf9bec Mon Sep 17 00:00:00 2001
From: Ad Schellevis <ad@opnsense.org>
Date: Thu, 14 Jun 2018 22:31:16 +0200
Subject: [PATCH] replace tokenize for Tokenize2 in mvc part, only occurrence
 to go in legacy code. for https://github.com/opnsense/core/issues/2227

---
 .../views/layout_partials/form_input_tr.volt  |  5 +-
 .../mvc/app/views/layouts/default.volt        |  7 +-
 src/opnsense/www/js/opnsense_ui.js            | 70 ++++++++++++-------
 3 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt b/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt
index 4a8f5cefc..e8a5d6324 100644
--- a/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt
+++ b/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt
@@ -35,7 +35,6 @@
  # advanced    :   property "is advanced", only display in advanced mode
  # hint        :   input control hint
  # style       :   css class to add
- # maxheight   :   maximum height in rows if applicable
  # width       :   width in pixels if applicable
  # allownew    :   allow new items (for list) if applicable
  # readonly    :   if true, input fields will be readonly
@@ -59,14 +58,12 @@
             <input type="checkbox" id="{{ id }}">
         {% elseif type == "select_multiple" %}
             <select multiple="multiple"
-                    {% if size|default(false) %}size="{{size}}"{% endif %}
+                    {% if size|default(false) %}data-size="{{size}}"{% endif %}
                     id="{{ id }}"
                     class="{{style|default('selectpicker')}}"
                     {% if hint|default(false) %}data-hint="{{hint}}"{% endif %}
-                    {% if maxheight|default(false) %}data-maxheight="{{maxheight}}"{% endif %}
                     data-width="{{width|default("334px")}}"
                     data-allownew="{{allownew|default("false")}}"
-                    data-nbdropdownelements="{{nbDropdownElements|default("10")}}"
                     data-live-search="true"
                     {% if separator|default(false) %}data-separator="{{separator}}"{% endif %}
             ></select>
diff --git a/src/opnsense/mvc/app/views/layouts/default.volt b/src/opnsense/mvc/app/views/layouts/default.volt
index 368bad093..812cf2351 100644
--- a/src/opnsense/mvc/app/views/layouts/default.volt
+++ b/src/opnsense/mvc/app/views/layouts/default.volt
@@ -164,12 +164,7 @@
             });
         </script>
 
-
-        <!-- JQuery Tokenize (http://zellerda.com/projects/tokenize) -->
-        <script src="/ui/js/jquery.tokenize.js"></script>
-        <link rel="stylesheet" type="text/css" href="{{theme_file_or_default('/css/jquery.tokenize.css', theme_name)}}" />
-
-        <!-- JQuery Tokenize2 (https://zellerda.github.io/Tokenize2/) -->
+       <!-- JQuery Tokenize2 (https://zellerda.github.io/Tokenize2/) -->
         <script src="/ui/js/tokenize2.min.js"></script>
         <link rel="stylesheet" type="text/css" href="{{theme_file_or_default('/css/tokenize2.css', theme_name)}}" rel="stylesheet" />
 
diff --git a/src/opnsense/www/js/opnsense_ui.js b/src/opnsense/www/js/opnsense_ui.js
index d12570ba1..251bdabd1 100644
--- a/src/opnsense/www/js/opnsense_ui.js
+++ b/src/opnsense/www/js/opnsense_ui.js
@@ -199,34 +199,56 @@ function updateServiceControlUI(serviceName)
  * reformat all tokenizers on this document
  */
 function formatTokenizersUI() {
-    $('select[class="tokenize"]').each(function () {
-        if ($(this).prop("size")==0) {
-            maxDropdownHeight=String(36*5)+"px"; // default number of items
+    $('select.tokenize').each(function () {
+        var sender = $(this);
+        if (!sender.hasClass('tokenize2_init_done')) {
+            // only init tokenize2 when not bound yet
+            var hint = $(this).data("hint");
+            var width = $(this).data("width");
+            if (sender.data("size") != undefined) {
+                var number_of_items = $(this).data("size");
+            } else {
+                var number_of_items = 10;
+            }
+            var allownew = $(this).data("allownew");
+            sender.tokenize2({
+                'tokensAllowCustom': allownew,
+                'placeholder': hint,
+                'dropdownMaxItems': number_of_items
+            });
+            sender.parent().find('ul.tokens-container').parent().css("width", width);
+
+            // dropdown on focus (previous displayDropdownOnFocus)
+            sender.on('tokenize:select', function(container){
+                $(this).tokenize2().trigger('tokenize:search', [$(this).tokenize2().input.val()]);
+            });
+            // bind add / remove events
+            sender.on('tokenize:tokens:add', function(e, value){
+                sender.trigger("tokenize:tokens:change");
+            });
+            sender.on('tokenize:tokens:remove', function(e, value){
+                sender.trigger("tokenize:tokens:change");
+            });
+
+            sender.addClass('tokenize2_init_done');
         } else {
-            number_of_items = $(this).prop("size");
-            maxDropdownHeight=String(36*number_of_items)+"px";
-        }
-        hint=$(this).data("hint");
-        width=$(this).data("width");
-        allownew=$(this).data("allownew");
-        nbDropdownElements=$(this).data("nbdropdownelements");
-        maxTokenContainerHeight=$(this).data("maxheight");
+            // unbind change event while loading initial content
+            sender.unbind('tokenize:tokens:change');
 
-        $tokenizer = $(this).tokenize({
-            displayDropdownOnFocus: true,
-            newElements: allownew,
-            nbDropdownElements: nbDropdownElements,
-            placeholder:hint
+            // re-init tokenizer items
+            var items = $(this).val();
+            sender.tokenize2().trigger('tokenize:clear');
+            $.each(items, function(key, item){
+                sender.tokenize2().trigger('tokenize:tokens:add', item);
+            });
+            sender.tokenize2().trigger('tokenize:select');
+        }
+
+        // propagate token changes to parent change()
+        sender.on('tokenize:tokens:change', function(e, value){
+            sender.change();
         });
-        $tokenizer.resizeSearchInput();
-        $tokenizer.remap(true);
-        $tokenizer.updatePlaceholder();
 
-        $(this).parent().find('ul[class="TokensContainer"]').parent().css("width",width);
-        $(this).parent().find('ul[class="Dropdown"]').css("max-height", maxDropdownHeight);
-        if ( maxDropdownHeight != undefined ) {
-            $(this).parent().find('ul[class="TokensContainer"]').css("max-height", maxTokenContainerHeight);
-        }
     });
 }