github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-23 01:12:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add component for auto-completing inputs.

Browse source
This commit is contained in:
Paulo Reis 2018-06-15 11:27:24 +01:00
parent 55112dc7dc
commit 1df8c044ee
2 changed files with 70 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
services/web/public/coffee/components/inputSuggestions.coffee Normal file
View file

@ -0,0 +1,49 @@
define [
"base"
], (App) ->
inputSuggestionsController = ($scope, $element, $attrs) ->
ctrl = @
ctrl.showHint = false
ctrl.hasFocus = false
ctrl.handleFocus = () ->
ctrl.hasFocus = true
ctrl.suggestion = null
ctrl.handleBlur = () ->
ctrl.showHint = false
ctrl.hasFocus = false
ctrl.suggestion = null
ctrl.handleKeyDown = ($event) ->
if ($event.which == 9 or $event.which == 13) and ctrl.suggestion? and ctrl.suggestion != ""
$event.preventDefault()
ctrl.localNgModel += ctrl.suggestion
ctrl.suggestion = null
ctrl.showHint = false
$scope.$watch "$ctrl.localNgModel", (newVal, oldVal) ->
if ctrl.hasFocus and newVal != oldVal
ctrl.suggestion = null
ctrl.showHint = false
ctrl.getSuggestion({ userInput: newVal })
.then (suggestion) ->
if suggestion? and newVal == ctrl.localNgModel
ctrl.showHint = true
ctrl.suggestion = suggestion.replace newVal, ""
.catch () -> ctrl.suggestion = null
return
App.component "inputSuggestions", {
bindings:
localNgModel: "=ngModel"
getSuggestion: "&"
inputId: "@"
inputPlaceholder: "@"
controller: inputSuggestionsController
template: """
<div class="input-suggestions">
<div type="text" + $ctrl.suggestion" class="form-control input-suggestions-shadow" ng-show="$ctrl.showHint">
<span ng-bind="$ctrl.localNgModel" class="input-suggestions-shadow-existing"></span><span ng-bind="$ctrl.suggestion" class="input-suggestions-shadow-suggested"></span>
</div>
<input type="text" ng-focus="$ctrl.handleFocus()" ng-keyDown="$ctrl.handleKeyDown($event)" ng-blur="$ctrl.handleBlur()" ng-model="$ctrl.localNgModel" ng-model-options="{ debounce: 50 }" class="form-control input-suggestions-main" ng-attr-id="{{ ::$ctrl.inputId }}" ng-attr-placeholder="{{ ::$ctrl.inputPlaceholder }}">
</div>
"""
}

21
services/web/public/stylesheets/components/input-suggestions.less Normal file
View file

@ -0,0 +1,21 @@
.input-suggestions {
position: relative;
height: @input-height-base;
}
.input-suggestions-main {
position: absolute;
top: 0;
background-color: transparent;
}
.input-suggestions-shadow {
background-color: @input-bg;
padding-top: 4px;
}
.input-suggestions-shadow-existing {
color: transparent;
}
.input-suggestions-shadow-suggested {
color: lighten(@input-color, 25%);
}