overleaf/services/web/frontend/js/components/inputSuggestions.js

98 lines
3 KiB
JavaScript
Raw Normal View History

/* eslint-disable
max-len,
no-return-assign,
*/
// TODO: This file was created by bulk-decaffeinate.
// Fix any style issues and re-enable lint.
/*
* decaffeinate suggestions:
* DS102: Remove unnecessary code created because of implicit returns
* DS207: Consider shorter variations of null checks
* Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
*/
import App from '../base'
const inputSuggestionsController = function($scope, $element, $attrs, Keys) {
const ctrl = this
ctrl.showHint = false
ctrl.hasFocus = false
ctrl.handleFocus = function() {
ctrl.hasFocus = true
return (ctrl.suggestion = null)
}
ctrl.handleBlur = function() {
ctrl.showHint = false
ctrl.hasFocus = false
ctrl.suggestion = null
return ctrl.onBlur()
}
ctrl.handleKeyDown = function($event) {
if (
($event.which === Keys.TAB || $event.which === Keys.ENTER) &&
ctrl.suggestion != null &&
ctrl.suggestion !== ''
) {
$event.preventDefault()
ctrl.localNgModel += ctrl.suggestion
}
ctrl.suggestion = null
return (ctrl.showHint = false)
}
$scope.$watch('$ctrl.localNgModel', function(newVal, oldVal) {
if (ctrl.hasFocus && newVal !== oldVal) {
ctrl.suggestion = null
ctrl.showHint = false
return ctrl
.getSuggestion({ userInput: newVal })
.then(function(suggestion) {
if (suggestion != null && newVal === ctrl.localNgModel) {
ctrl.showHint = true
return (ctrl.suggestion = suggestion.replace(newVal, ''))
}
})
.catch(() => (ctrl.suggestion = null))
}
})
}
export default App.component('inputSuggestions', {
bindings: {
localNgModel: '=ngModel',
localNgModelOptions: '=?ngModelOptions',
getSuggestion: '&',
onBlur: '&?',
inputId: '@?',
inputName: '@?',
inputPlaceholder: '@?',
inputType: '@?',
inputRequired: '=?'
},
controller: inputSuggestionsController,
template: [
'<div class="input-suggestions">',
'<div class="form-control input-suggestions-shadow">',
'<span ng-bind="$ctrl.localNgModel"',
' class="input-suggestions-shadow-existing"',
' ng-show="$ctrl.showHint">',
'</span>',
'<span ng-bind="$ctrl.suggestion"',
' class="input-suggestions-shadow-suggested"',
' ng-show="$ctrl.showHint">',
'</span>',
'</div>',
'<input type="text"',
' class="form-control input-suggestions-main"',
' ng-focus="$ctrl.handleFocus()"',
' ng-keyDown="$ctrl.handleKeyDown($event)"',
' ng-blur="$ctrl.handleBlur()"',
' ng-model="$ctrl.localNgModel"',
' ng-model-options="$ctrl.localNgModelOptions"',
' ng-model-options="{ debounce: 50 }"',
' ng-attr-id="{{ ::$ctrl.inputId }}"',
' ng-attr-placeholder="{{ ::$ctrl.inputPlaceholder }}"',
' ng-attr-type="{{ ::$ctrl.inputType }}"',
' ng-attr-name="{{ ::$ctrl.inputName }}"',
' ng-required="::$ctrl.inputRequired">',
'</div>'
].join('')
})