replace tokenize for Tokenize2 in mvc part, only occurrence to go in legacy code. for https://github.com/opnsense/core/issues/2227

This commit is contained in:
Ad Schellevis 2018-06-14 22:31:16 +02:00
parent c3dc31a793
commit b0a4a27a1f
3 changed files with 48 additions and 34 deletions

View File

@ -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>

View File

@ -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" />

View File

@ -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);
}
});
}