Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
sukhwinder33445 committed May 6, 2022
1 parent a5fc0e2 commit 09b78fb
Showing 3 changed files with 137 additions and 56 deletions.
148 changes: 94 additions & 54 deletions asset/js/widget/BaseInput.js
Original file line number Diff line number Diff line change
@@ -49,18 +49,23 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
$(this.input).on('input', this.onInput, this);
$(this.input).on('keydown', this.onKeyDown, this);
$(this.input).on('keyup', this.onKeyUp, this);
$(this.input).on('blur', this.onInputBlur, this);
$(this.input).on('focusin', this.onTermFocus, this);
$(this.termContainer).on('input', '[data-label]', this.onInput, this);
$(this.termContainer).on('keydown', '[data-label]', this.onKeyDown, this);
$(this.termContainer).on('keyup', '[data-label]', this.onKeyUp, this);
$(this.termContainer).on('focusout', '[data-index]', this.onTermFocusOut, this);
$(this.termContainer).on('focusin', '[data-index]', this.onTermFocus, this);

if (! this.isReadOnlyMode()) {
$(this.termContainer).on('keyup', '[data-label]', this.onKeyUp, this);
$(this.input).on('blur', this.onInputBlur, this);
$(this.termContainer).on('focusout', '[data-index]', this.onTermFocusOut, this);
$(this.termContainer).on('focusin', '[data-index]', this.onTermFocus, this);
}

// Copy/Paste
$(this.input).on('paste', this.onPaste, this);
$(this.input).on('copy', this.onCopyAndCut, this);
$(this.input).on('cut', this.onCopyAndCut, this);
if (! this.isTermDirectionVertical()) {
$(this.input).on('paste', this.onPaste, this);
$(this.input).on('copy', this.onCopyAndCut, this);
$(this.input).on('cut', this.onCopyAndCut, this);
}

// Should terms be completed?
if (this.input.dataset.suggestUrl) {
@@ -291,6 +296,14 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
return this.usedTerms.length > 0;
}

isReadOnlyMode() {
return this.input.dataset.termMode === 'read-only';
}

isTermDirectionVertical() {
return this.input.dataset.termDirection === 'vertical';
}

hasSyntaxError(input) {
if (typeof input === 'undefined') {
input = this.input;
@@ -533,13 +546,19 @@ define(["../notjQuery", "Completer"], function ($, Completer) {

if (from === -1) {
toFocus = inputs.shift();
if (typeof toFocus === 'undefined') {
toFocus = this.input;
}
} else if (from + 1 < inputs.length) {
toFocus = inputs[from + 1];
} else {
toFocus = this.input;
}

toFocus.selectionStart = toFocus.selectionEnd = 0;
if (! this.isReadOnlyMode()) {
toFocus.selectionStart = toFocus.selectionEnd = 0;
}

$(toFocus).focus();

return toFocus;
@@ -562,7 +581,10 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
toFocus = this.input;
}

toFocus.selectionStart = toFocus.selectionEnd = toFocus.value.length;
if (! this.isReadOnlyMode()) {
toFocus.selectionStart = toFocus.selectionEnd = toFocus.value.length;
}

$(toFocus).focus();

return toFocus;
@@ -666,77 +688,95 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
}
break;
case 'Backspace':
removedTerms = this.clearSelectedTerms();

if (termIndex >= 0 && ! input.value) {
let removedTerm = this.removeTerm(input.parentNode);
if (removedTerm !== false) {
input = this.moveFocusBackward(termIndex);
if (event.ctrlKey || event.metaKey) {
this.clearPartialTerm(input);
} else {
this.writePartialTerm(input.value.slice(0, -1), input);
if (! this.isTermDirectionVertical()) {
removedTerms = this.clearSelectedTerms();

if (termIndex >= 0 && ! input.value) {
let removedTerm = this.removeTerm(input.parentNode);
if (removedTerm !== false) {
input = this.moveFocusBackward(termIndex);
if (event.ctrlKey || event.metaKey) {
this.clearPartialTerm(input);
} else {
this.writePartialTerm(input.value.slice(0, -1), input);
}

removedTerms[termIndex] = removedTerm;
event.preventDefault();
}

removedTerms[termIndex] = removedTerm;
event.preventDefault();
}
} else if (isNaN(termIndex)) {
if (! input.value && this.hasTerms()) {
let termData = this.popTerm();
if (! event.ctrlKey && ! event.metaKey) {
// Removing the last char programmatically is not
// necessary since the browser default is not prevented
this.writePartialTerm(termData.label, input);
} else if (isNaN(termIndex)) {
if (! input.value && this.hasTerms()) {
let termData = this.popTerm();
if (! event.ctrlKey && ! event.metaKey) {
// Removing the last char programmatically is not
// necessary since the browser default is not prevented
this.writePartialTerm(termData.label, input);
}

removedTerms[this.usedTerms.length] = termData;
}

removedTerms[this.usedTerms.length] = termData;
}
}

this.togglePlaceholder();
this.autoSubmit(input, 'remove', removedTerms);
this.togglePlaceholder();
this.autoSubmit(input, 'remove', removedTerms);
}
break;
case 'Delete':
removedTerms = this.clearSelectedTerms();

if (termIndex >= 0 && ! input.value) {
let removedTerm = this.removeTerm(input.parentNode);
if (removedTerm !== false) {
input = this.moveFocusForward(termIndex - 1);
if (event.ctrlKey || event.metaKey) {
this.clearPartialTerm(input);
} else {
this.writePartialTerm(input.value.slice(1), input);
removedTerms = this.clearSelectedTerms();

if (termIndex >= 0 && (! input.value || this.isTermDirectionVertical())) {
let removedTerm = this.removeTerm(input.parentNode);
if (removedTerm !== false) {
input = this.moveFocusForward(termIndex - 1);
if (event.ctrlKey || event.metaKey) {
this.clearPartialTerm(input);
} else {
this.writePartialTerm(input.value.slice(1), input);
}

removedTerms[termIndex] = removedTerm;
event.preventDefault();
}

removedTerms[termIndex] = removedTerm;
event.preventDefault();
}
}

this.togglePlaceholder();
this.autoSubmit(input, 'remove', removedTerms);
this.togglePlaceholder();
this.autoSubmit(input, 'remove', removedTerms);
break;
case 'Enter':
if (termIndex >= 0) {
this.saveTerm(input, false);
}
break;
case 'ArrowLeft':
if (input.selectionStart === 0 && this.hasTerms()) {
if (! this.isTermDirectionVertical() && this.hasTerms()
&& (input.selectionStart === 0 || input.selectionStart === null && this.isReadOnlyMode())) {
event.preventDefault();
this.moveFocusBackward();
}
break;
case 'ArrowRight':
if (input.selectionStart === input.value.length && this.hasTerms()) {
if (! this.isTermDirectionVertical() && this.hasTerms()
&& (input.selectionStart === input.value.length || input.selectionStart === null && this.isReadOnlyMode())) {
event.preventDefault();
this.moveFocusForward();
}
break;
case 'ArrowUp':
if (this.isTermDirectionVertical() && this.hasTerms()
&& (input.selectionStart === 0 || input.selectionStart === null && this.isReadOnlyMode())) {
event.preventDefault();
this.moveFocusBackward();
}
break;
case 'ArrowDown':
if (this.isTermDirectionVertical() && this.hasTerms()
&& (input.selectionStart === input.value.length || input.selectionStart === null && this.isReadOnlyMode())) {
event.preventDefault();
this.moveFocusForward();
}
break;
case 'a':
if ((event.ctrlKey || event.metaKey) && ! this.readPartialTerm(input)) {
if (! this.isTermDirectionVertical() && (event.ctrlKey || event.metaKey) && ! this.readPartialTerm(input)) {
this.selectTerms();
}
}
8 changes: 8 additions & 0 deletions asset/js/widget/FilterInput.js
Original file line number Diff line number Diff line change
@@ -1551,6 +1551,14 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
event.preventDefault();
}
}

isReadOnlyMode() {
return false;
}

isTermDirectionVertical() {
return false;
}
}

return FilterInput;
37 changes: 35 additions & 2 deletions asset/js/widget/TermInput.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
define(["BaseInput"], function (BaseInput) {
define(["../notjQuery", "BaseInput"], function ($, BaseInput) {

"use strict";

class TermInput extends BaseInput {
constructor(input) {
super(input);

this.separator = ' ';
this.separator = this.input.dataset.termSeparator ? this.input.dataset.termSeparator : ' ';
this.ignoreSpaceUntil = null;
this.ignoreSpaceSince = null;
}

bind() {
$(this.termContainer).on('click', '[data-index]', this.onTermClick, this);
return super.bind();
}

reset() {
super.reset();

@@ -61,6 +66,26 @@ define(["BaseInput"], function (BaseInput) {
super.complete(input, data);
}

renderTerm(termData, termIndex) {
if (this.isReadOnlyMode()) {
let label = $.render('<label><input type="button"><i class="icon-cancel term-icon"></i></label>');

if (termData.class) {
label.classList.add(termData.class);
}

label.dataset.label = termData.label;
label.dataset.search = termData.search;
label.dataset.index = termIndex;

label.firstChild.value = termData.label;

return label;
} else {
return super.renderTerm(termData, termIndex);
}
}

/**
* Event listeners
*/
@@ -122,6 +147,14 @@ define(["BaseInput"], function (BaseInput) {
}
}
}

onTermClick(event) {
if (this.isReadOnlyMode()) {
let termIndex = event.target.parentNode.dataset.index;
this.removeTerm(event.target.parentNode);
this.moveFocusForward(termIndex - 1);
}
}
}

return TermInput;

0 comments on commit 09b78fb

Please sign in to comment.