";
$sFilter = addslashes($oAllowedValues->GetFilter()->ToOQL());
if($this->bSearchMode)
{
@@ -257,6 +257,7 @@ $('#$this->iId').attr('data-validate','dependencies');
EOF
);
}
+ $sHTMLValue .= "
";
$sHTMLValue .= "
iId}\">iId}\">";
return $sHTMLValue;
diff --git a/css/backoffice/components/input/_input-select.scss b/css/backoffice/components/input/_input-select.scss
index e73268884..139fd1bab 100644
--- a/css/backoffice/components/input/_input-select.scss
+++ b/css/backoffice/components/input/_input-select.scss
@@ -13,29 +13,30 @@ $ibo-input-select-wrapper--after--color: $ibo-color-grey-900 !default;
$ibo-input-select--action-button--height: 28px !default;
$ibo-input-select--action-button--width: 23px !default;
$ibo-input-select--action-button--margin-top: 1px !default;
+$ibo-input-select--action-button--margin-right: 20px !default;
$ibo-input-select--action-button--background-color: inherit !default;
$ibo-input-select--action-button--color: $ibo-color-grey-800 !default;
-$ibo-input-select--action-button--padding-x: 4px !default;
-$ibo-input-select--action-button--padding-y: 5px !default;
+$ibo-input-select--action-button--padding-x: 2px !default;
+$ibo-input-select--action-button--padding-y: 6px !default;
-$ibo-input-select--action-button--hierarchy--margin-left: -60px !default;
-$ibo-input-select--action-button--create--margin-left: -38px !default;
-$ibo-input-select--action-button--search--margin-left: -60px !default;
-$ibo-input-select--action-button--clear--margin-left: -72px !default;
-
-$ibo-input-select-autocomplete-action-button--hierarchy--margin-left: -92px !default;
+$ibo-input-select--action-button--padding-left: 5px !default;
.ibo-input-select{
appearance: none;
display: inline-block;
&.ibo-input-selectize{
+ padding-right:0;
+ padding-left:0;
input{
- display: none;
+ border-width: 0px;
+ border-color: white;
+ padding-left:$ibo-input--padding-x;
}
>[data-value]
{
height: $ibo-input-select-selectize--value--height;
line-height: $ibo-input-select-selectize--value--line-height;
+ padding-left:$ibo-input--padding-x;
}
}
}
@@ -63,33 +64,24 @@ $ibo-input-select-autocomplete-action-button--hierarchy--margin-left: -92px !def
color: $ibo-input-select-wrapper--after--color;
pointer-events: none;
}
-.ibo-input-select--action-button{
- position: absolute;
- display: inline-block;
- height: $ibo-input-select--action-button--height;
- width: $ibo-input-select--action-button--width;
- margin-top: $ibo-input-select--action-button--margin-top;
-
- font-size: $ibo-font-size-100;
- background-color: $ibo-input-select--action-button--background-color;
- color: $ibo-input-select--action-button--color;
- padding: $ibo-input-select--action-button--padding-y $ibo-input-select--action-button--padding-x;
-
- &.ibo-input-select--action-button--hierarchy{
- margin-left: $ibo-input-select--action-button--hierarchy--margin-left;
- }
- &.ibo-input-select--action-button--create{
- margin-left: $ibo-input-select--action-button--create--margin-left;
- }
- &.ibo-input-select--action-button--search{
- margin-left: $ibo-input-select--action-button--search--margin-left;
- }
- &.ibo-input-select--action-button--clear{
- margin-left: $ibo-input-select--action-button--clear--margin-left;
- }
+.ibo-input-select--action-buttons{
+ position: absolute;
+ display: initial;
+ height: $ibo-input-select--action-button--height;
+ margin-top: $ibo-input-select--action-button--margin-top;
+ margin-right: $ibo-input-select--action-button--margin-right;
+
+ font-size: $ibo-font-size-100;
+ background-color: $ibo-input-select--action-button--background-color;
+ color: $ibo-input-select--action-button--color;
+ padding: $ibo-input-select--action-button--padding-y $ibo-input-select--action-button--padding-x;
+ text-align: right;
+ right:0;
}
-.ibo-input-select-autocomplete ~ .ibo-input-select--action-button--hierarchy{
- margin-left: $ibo-input-select-autocomplete-action-button--hierarchy--margin-left;
+
+.ibo-input-select--action-button{
+ padding-left: $ibo-input-select--action-button--padding-left;
+ float:right;
}
.selectize-dropdown{
@@ -100,3 +92,14 @@ $ibo-input-select-autocomplete-action-button--hierarchy--margin-left: -92px !def
background-color: #f5fafd;
color: #495c68;
}
+//from jqueryui.css
+.ui-helper-hidden-accessible {
+ // border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
\ No newline at end of file
diff --git a/js/extkeywidget.js b/js/extkeywidget.js
index 9b59f1c4d..42fd4dc92 100644
--- a/js/extkeywidget.js
+++ b/js/extkeywidget.js
@@ -15,6 +15,46 @@
*
* You should have received a copy of the GNU Affero General Public License
*/
+var KEY_BACKSPACE = 8;
+var KEY_RETURN = 13;
+Selectize.define('custom_itop', function(options) {
+ var self = this;
+
+ options.text = options.text || function(option) {
+ return option[this.settings.labelField];
+ };
+
+ this.onKeyDown = (function() {
+ var original = self.onKeyDown;
+ return function(e) {
+ var index, option;
+ switch (e.keyCode) {
+ case KEY_BACKSPACE:
+ if (e.keyCode === KEY_BACKSPACE && this.$control_input.val() === '' && !this.$activeItems.length) {
+ index = this.caretPos-1;
+ if (index >= 0 && index < this.items.length) {
+ this.clear(true);
+ e.preventDefault();
+ return;
+ }
+ }
+ case KEY_RETURN:
+ if (self.isOpen) {
+ //case nothing selected ->delete selection
+ if (!self.$activeOption || self.currentResults.query == "") {
+ self.deleteSelection(e);
+ //if(self.getOption("") != "undefined"){
+ self.setValue("");
+ //}
+ return;
+ }
+ }
+ }
+ return original.apply(this, arguments);
+ };
+ })();
+});
+
function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper, sAttCode, bSearchMode, bDoSearch, sFormAttCode) {
this.id = id;
@@ -40,43 +80,43 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
$('#'+this.id+'_linksToRemove').val('');
}
this.AddSelectize = function (options, initValue) {
- $('#'+me.id).selectize({
+ let $select = $('#'+me.id).selectize({
+ plugins:['custom_itop'],
render: {
item: function (item) {
if (item.obsolescence_flag == 1) {
val = '
'+item.label;
} else {
val = item.label;
- }
- return $("
")
- .append(val);
- },
- option: function(item) {
- if ( item.obsolescence_flag == 1)
- {
- val = '
'+item.label;
- }
- else
- {
- val = item.label;
- }
- if (item.additional_field != undefined )
- {
- val = val+'
'+item.additional_field+'';
- }
- return $("
")
- .append(val);
}
+ return $("
").append(val);
},
- items:[initValue],
- valueField: 'value',
- labelField: 'label',
- searchField: ['value'],
- options:JSON.parse(options),
- maxItems: 1,
- copyClassesToDropdown: false,
- inputClass: 'ibo-input ibo-input-select ibo-input-selectize'
- });
+ option: function(item) {
+ if ( item.obsolescence_flag == 1)
+ {
+ val = '
'+item.label;
+ }
+ else
+ {
+ val = item.label;
+ }
+ if (item.additional_field != undefined )
+ {
+ val = val+'
'+item.additional_field+'';
+ }
+ return $("
").append(val);
+ }
+ },
+ valueField: 'value',
+ labelField: 'label',
+ searchField: 'label',
+ options:JSON.parse(options),
+ maxItems: 1,
+ copyClassesToDropdown: false,
+ inputClass: 'ibo-input ibo-input-select ibo-input-selectize',
+ });
+ let $selectize = $select[0].selectize; // This stores the selectize object to a variable (with name 'selectize')
+ $selectize.setValue(initValue, true);
}
this.AddAutocomplete = function(iMinChars, sWizHelperJSON)
{