-
Notifications
You must be signed in to change notification settings - Fork 15
/
script.js
93 lines (85 loc) · 3.07 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
if (typeof String.prototype.startsWith != 'function') {
// startWith checks if the string begins with the string passed in
String.prototype.startsWith = function (str){
return this.slice(0, str.length) == str;
};
}
angular.module('SuggestedQuery', [])
.controller('suggestionInputCtrl', ['$scope', function($scope){
var knownQueries = ["Alison Cassidy", "Catherine Sinu", "Sherry Mckenna", "Wil Jones", "Adrian Delamico", "Elizabeth Wu", "David Liam", "James Weston","Sherry, Elizabeth & 5 more", "Mobile Strategy", "Visual Design Language and UX", "Group Thread", "Learn UX Strategies", "Weekly UX Sync", "UX Group Thread", "Visual Design spec", "Visual Icon Design Library","design process","visual language", "Alison's Keynote"];
// unknownQuery set to true during the first loop where no known queries are found, reset when newQuery is older than oldQuery
var unknownQuery = false;
var remainingKnown = function(newQuery){
for(var i = 0, x = knownQueries.length; i < x; i++){
if(knownQueries[i].startsWith(newQuery)){
return knownQueries[i].substring(newQuery.length);
}
}
unknownQuery = true;
return '';
};
$scope.inputQuery = '';
$scope.$watch(function(){
return $scope.inputQuery;
}, function(newQuery, oldQuery){
if(newQuery.length < oldQuery.length){
unknownQuery = false;
}
if(newQuery.length > 0){
if(!unknownQuery){
$scope.suggestedQuery = remainingKnown(newQuery);
console.log($scope.suggestedQuery);
}
} else {
$scope.suggestedQuery = 'Type something here!';
}
}, false);
$scope.editInput = function(){
$scope.$broadcast('editQuery');
};
}])
.directive('contenteditable', function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
var read = function(){
// TODO: reads the element html, then sets the value to inputQuery
scope.inputQuery = element.html();
};
var clearSuggestion = function(){
scope.suggestedQuery = scope.suggestedQuery.substring(1);
// scope.suggestedQuery = '';
};
element.bind('blur keyup change', function(e){
if(e.keyCode == 39){
// if you click the right arrow, fill the rest with the suggested query
scope.inputQuery += scope.suggestedQuery;
element.html(scope.inputQuery);
scope.suggestedQuery = '';
} else {
read();
}
scope.$apply();
});
element.bind('blur', function(){
scope.$apply(function(){
scope.isFocused = false;
});
});
element.bind('keydown', function(e){
if(e.keyCode == 13){
// prevent default enter button
e.preventDefault();
return;
} else if(e.keyCode == 37 || e.keyCode == 39 || e.keyCode == 16 || e.keyCode == 8) {
// 37 is left arrow, 39 right arrow
} else {
scope.$apply(clearSuggestion);
}
});
scope.$on('editQuery', function(){
element[0].focus();
});
}
}
});