'+ 169 | '{{suggestion}} ' + 170 | '
' + 171 | '' + 174 | 'Show all for "{{prefix}}" »
' 175 | }; 176 | }]); 177 | 178 | app.directive("focusMe", function() { 179 | return { 180 | restrict: "A", 181 | link: function(scope, element, attrs) { 182 | attrs.$observe("focusWhen", function() { 183 | if (attrs.focusWhen == "true") { 184 | element[0].focus(); 185 | } 186 | }); 187 | } 188 | }; 189 | }); 190 | 191 | app.directive("smartySuggestionsBox", function() { 192 | // Removes the need for duplicating the scode that makes the suggestions list. 193 | return { 194 | restrict: "A", 195 | template: '' 200 | }; 201 | }); 202 | })(); 203 | -------------------------------------------------------------------------------- /src/smarty-config.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | "use strict"; 3 | 4 | var app = angular.module("angular-smarty-config", []); 5 | 6 | app.service("smartyConfig", ["$http", "$filter", function($http, $filter) { 7 | /* The default getSmartySuggestions function makes a request to requestUrl with the given 8 | * requestParams and expects an array of JSON objects in return, e.g. [{Name: suggestion1}, 9 | * {Name: suggestion2}] 10 | */ 11 | var requestUrl = "", 12 | requestParams = {}; 13 | 14 | /* getSmartySuggestions should return a promise. See the demo for an example of how to 15 | * construct an Angular promise. 16 | */ 17 | function getSmartySuggestions(prefix) { 18 | requestParams["query"] = escape(prefix.toLowerCase()); 19 | var promise = $http.get(requestUrl(), 20 | { 21 | params: requestParams, 22 | cache: true 23 | } 24 | ) 25 | .then(function(response) { 26 | /* response.data is an the array of JSON objects where Name is the key used to identify 27 | * a suggestion 28 | */ 29 | return $filter("limitTo")(response.data, 5).map(function(item) { 30 | return item.Name; 31 | }); 32 | }); 33 | return promise; 34 | } 35 | 36 | return { 37 | getSmartySuggestions: getSmartySuggestions 38 | } 39 | }]); 40 | 41 | app.service("smartySuggestor", ["smartyConfig", function(smartyConfig) { 42 | var getSmartySuggestions = smartyConfig.getSmartySuggestions; 43 | 44 | return { 45 | getSmartySuggestions: getSmartySuggestions 46 | }; 47 | }]); 48 | 49 | })(); 50 | -------------------------------------------------------------------------------- /src/smarty.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | "use strict"; 3 | 4 | var app = angular.module("angular-smarty", ["angular-smarty-config"]); 5 | 6 | app.controller("SmartyController", [ 7 | "$scope", "$document", "smartySuggestor", "$window", "$timeout", 8 | function($scope, $document, smartySuggestor, $window, $timeout) { 9 | /** Once the user has typed something in the input, smarty should 10 | * handle the following situations accordingly: 11 | * - User clicks outside the input or suggestions dropdown: 12 | * - Suggestions dropdown disappears 13 | * - Behaves normally when user clicks back into the input 14 | * - User clicks a suggestion from the dropdown: 15 | * - Suggestions dropdown disappears 16 | * - Input is filled with value of clicked suggestion 17 | * - Focus is on zipcode input 18 | * - User presses up or down arrows, or hovers with mouse 19 | * ($scope.userInteraction = true) 20 | * - The selected suggestion changes accordingly 21 | * - User presses enter or blurs the input 22 | * - If there is a selection made, that selection should fill the input 23 | * - If there is no selection made, whatever the user has currently typed 24 | * should remain in the input 25 | * - Focus is moved to the zipcode input 26 | */ 27 | // $scope.suggestions holds the smart suggestions based on the current prefix. 28 | // If there are suggestions in the array, the suggestions drowdown will show. 29 | // $scope.prefix holds the value of the request input. 30 | // $scope.selected holds the index of $scope.suggestions that is 31 | // currently selected by the user. If $scope.selected is -1, nothing is selected. 32 | $scope.suggestions = []; 33 | $scope.prefix = ""; 34 | $scope.selected = -1; 35 | $scope.selectionMade = false; 36 | $scope.zip = ""; 37 | 38 | $scope.$watch("prefix", function(newValue, oldValue) { 39 | if (newValue != oldValue && $scope.selectionMade == false) { 40 | if ($scope.prefix == "" || angular.isUndefined($scope.prefix)) { 41 | $scope.suggestions = []; 42 | $scope.selected = -1; 43 | } else { 44 | var promise = smartySuggestor.getSmartySuggestions($scope.prefix); 45 | promise.then(function(data) { 46 | $scope.suggestions = data; 47 | }); 48 | } 49 | } 50 | }); 51 | 52 | $scope.clickedSomewhereElse = function() { 53 | $scope.selected = -1; 54 | $scope.suggestions = []; 55 | }; 56 | 57 | $document.bind("click", onDocumentClick); 58 | $scope.$on("$destroy", function() { 59 | $document.unbind("click", onDocumentClick); 60 | }) 61 | function onDocumentClick() { 62 | $scope.$apply($scope.clickedSomewhereElse()); 63 | } 64 | 65 | $scope.suggestionPicked = function() { 66 | if ($scope.selected != -1 && $scope.selected < $scope.suggestions.length) { 67 | $scope.prefix = $scope.suggestions[$scope.selected]; 68 | } 69 | $scope.selectionMade = true; 70 | $scope.suggestions = []; 71 | }; 72 | 73 | $scope.setSelected = function(newValue) { 74 | if (newValue > $scope.suggestions.length) { 75 | $scope.selected = 0; 76 | } else if (newValue < 0) { 77 | $scope.selected = $scope.suggestions.length; 78 | } else { 79 | $scope.selected = newValue; 80 | } 81 | }; 82 | 83 | $scope.submitClicked = function() { 84 | if ($scope.requestFormStart.$valid) { 85 | $window.location = "/request?query=" + $scope.prefix + "&zipCode=" + $scope.zip + 86 | "&origin=homepage"; 87 | } 88 | }; 89 | } 90 | ]); 91 | 92 | app.directive("smartyInput", function() { 93 | function link(scope, element) { 94 | element.bind("keydown", function(event) { 95 | switch(event.which) { 96 | case 40: // down arrow 97 | scope.$apply(function() { 98 | scope.select({"x": parseInt(scope.index) + 1}); 99 | }); 100 | break; 101 | case 38: // up arrow 102 | scope.$apply(function() { 103 | scope.select({"x": parseInt(scope.index) - 1}); 104 | }); 105 | break; 106 | case 13: // enter 107 | event.preventDefault(); 108 | if (scope.selectionMade == false) { 109 | if (scope.index == "-1") { 110 | scope.$apply(function() { 111 | scope.listItems = []; 112 | }); 113 | } 114 | scope.$apply(function() { 115 | scope.close(); 116 | }) 117 | } 118 | break; 119 | default: 120 | scope.$apply(function() { 121 | scope.selectionMade = false; 122 | scope.index = -1; 123 | }); 124 | } 125 | }); 126 | 127 | element.bind("blur", function(event) { 128 | if (scope.listItems.length) { 129 | event.preventDefault(); 130 | scope.$apply(function() { 131 | scope.close(); 132 | }) 133 | } 134 | }); 135 | } 136 | return { 137 | restrict: "A", 138 | link: link, 139 | scope: { 140 | prefix: "=ngModel", 141 | select: "&", 142 | index: "=", 143 | selectionMade: "=", 144 | listItems: "=", 145 | close: "&" 146 | } 147 | }; 148 | }) 149 | 150 | app.directive("smartySuggestions", ["$document", function($document) { 151 | // Watches the scope variable prefix, which is bound to an input field. 152 | // Updates suggestions when there is a change in prefix, but only when 153 | // selectionMade equals false. 154 | function link(scope, element, attrs) { 155 | element.bind("click", function(e) { 156 | e.stopPropagation(); 157 | }); 158 | } 159 | return { 160 | restrict: "A", 161 | link: link, 162 | scope: { 163 | suggestions: "=", 164 | selected: "=", 165 | applyClass: "&", 166 | selectSuggestion: "&", 167 | prefix: "@" 168 | }, 169 | template: ''+ 173 | '[[suggestion]] ' + 174 | '
' + 175 | '' + 178 | 'Show all for "[[prefix]]" »
' 179 | }; 180 | }]); 181 | 182 | app.directive("focusMe", function() { 183 | return { 184 | restrict: "A", 185 | link: function(scope, element, attrs) { 186 | attrs.$observe("focusWhen", function() { 187 | if (attrs.focusWhen == "true") { 188 | element[0].focus(); 189 | } 190 | }); 191 | } 192 | }; 193 | }); 194 | 195 | app.directive("smartySuggestionsBox", function() { 196 | // Removes the need for duplicating the scode that makes the suggestions list. 197 | return { 198 | restrict: "A", 199 | template: '' 204 | }; 205 | }); 206 | })(); 207 | -------------------------------------------------------------------------------- /tests/angular-smarty-tests.js: -------------------------------------------------------------------------------- 1 | describe("smarty", function() { 2 | // To configure angular-smarty-tests.js: 3 | // Variables that need to be edited: 4 | // expectedResults, line 31 5 | // expectedParsedResults, line 70 6 | // requestUrl, line 79 7 | // requestPrefix, line 80 8 | 9 | beforeEach(module("HomepageApp")); 10 | 11 | var scope; 12 | 13 | beforeEach(inject(function($rootScope) { 14 | scope = $rootScope.$new(); 15 | })); 16 | 17 | // --- SMARTY CONTROLLER --- // 18 | describe("smarty controller", function() { 19 | beforeEach(inject(function($rootScope, $controller) { 20 | $controller("SmartyController", { 21 | $scope: scope 22 | }); 23 | })); 24 | 25 | it("should initialize scope correctly", function() { 26 | expect(scope.selected).toEqual(-1); 27 | expect(scope.prefix).toEqual(""); 28 | expect(scope.zip).toEqual(""); 29 | expect(scope.suggestions).toEqual([]); 30 | expect(scope.selectionMade).toBe(false); 31 | }); 32 | }); 33 | 34 | // --- SMARTY SUGGESTOR SERVICE --- // 35 | describe("smarty suggestor", function() { 36 | var $httpBackend; 37 | var expectedResults = [ 38 | { 39 | "ID":2, 40 | "Name":"Handyman", 41 | "Taxonym":"Handyman", 42 | "PluralTaxonym":"Handymen", 43 | "Rank":2.070353290907192 44 | },{ 45 | "ID":835, 46 | "Name":"General Carpentry", 47 | "Taxonym":"Carpenter", 48 | "PluralTaxonym":"Carpenters", 49 | "Rank":1.8778105233780995 50 | },{ 51 | "ID":10, 52 | "Name":"General Contracting", 53 | "Taxonym":"General Contractor", 54 | "PluralTaxonym":"General Contractors", 55 | "Rank":1.7331602733663476 56 | },{ 57 | "ID":35, 58 | "Name":"Interior Design", 59 | "Taxonym":"Interior Designer", 60 | "PluralTaxonym":"Interior Designers", 61 | "Rank":1.7029912403077567 62 | },{ 63 | "ID":317, 64 | "Name":"Metalwork", 65 | "Taxonym":"Metalworker", 66 | "PluralTaxonym":"Metalworkers", 67 | "Rank":1.6196185496387445 68 | } 69 | ]; 70 | var expectedParsedResults = [ 71 | "Handyman", 72 | "General Carpentry", 73 | "General Contracting", 74 | "Interior Design", 75 | "Metalwork" 76 | ]; 77 | 78 | beforeEach(inject(function($injector) { 79 | var requestUrl = ""; 80 | var requestPrefix = ""; 81 | $httpBackend = $injector.get("$httpBackend"); 82 | $httpBackend.when("GET", requestUrl).respond( 83 | expectedResults 84 | ); 85 | })); 86 | 87 | afterEach(function() { 88 | $httpBackend.verifyNoOutstandingExpectation(); 89 | $httpBackend.verifyNoOutstandingRequest(); 90 | }); 91 | 92 | it("returns a promise", inject(function(smartySuggestor) { 93 | $httpBackend.expectGET(requestUrl); 94 | var results; 95 | smartySuggestor.getSmartySuggestions(requestPrefix).then(function(data) { 96 | results = data; 97 | }) 98 | $httpBackend.flush(); 99 | expect(results).toEqual(expectedParsedResults); 100 | })); 101 | }); 102 | 103 | // --- SMARTY FOCUS ME DIRECTIVE --- // 104 | describe("smarty focusMe directive", function() { 105 | var element; 106 | 107 | beforeEach(function() { 108 | var html = ''; 110 | 111 | inject(function($compile, $rootScope) { 112 | scope = $rootScope.$new(); 113 | scope.selectionMade = false; 114 | element = $compile(angular.element(html))(scope); 115 | scope.$digest(); 116 | element.appendTo(document.body); 117 | }); 118 | }); 119 | 120 | afterEach(function() { 121 | element.remove(); 122 | }); 123 | 124 | it("is not in focus before selectionMade is true", function() { 125 | expect(element[0]).not.toEqual(document.activeElement); 126 | }); 127 | 128 | it("is in focus after selectionMade is true", function() { 129 | scope.selectionMade = true; 130 | scope.$digest(); 131 | expect(element[0]).toBe(document.activeElement); 132 | }); 133 | }); 134 | 135 | // --- SMARTY INPUT DIRECTIVE --- // 136 | describe("smarty input directive", function() { 137 | var element; 138 | var e; 139 | 140 | beforeEach(function() { 141 | var html = ''; 144 | 145 | var mockSuggestions = [ 146 | "florist", 147 | "fence builder", 148 | "face painter", 149 | "fence repair", 150 | "flooring" 151 | ]; 152 | 153 | e = $.Event("keydown"); 154 | 155 | inject(function($compile, $rootScope, $controller) { 156 | scope = $rootScope; 157 | $controller("SmartyController", { 158 | $scope: scope 159 | }); 160 | scope.prefix = "f"; 161 | scope.suggestions = mockSuggestions; 162 | element = $compile(angular.element(html))($rootScope); 163 | scope.$digest(); 164 | }); 165 | }); 166 | 167 | it("should adjust index on down arrow presses", function() { 168 | expect(element.isolateScope().index).toEqual(-1); 169 | for (var i = 0; i < 6; i++) { 170 | e.which = 40; 171 | angular.element(element).triggerHandler(e); 172 | expect(element.isolateScope().index).toEqual(i % 6); 173 | }; 174 | }); 175 | 176 | it("should adjust index on up arrow presses", function() { 177 | var expectedIndices = [5, 4, 3, 2, 1, 0]; 178 | expect(element.isolateScope().index).toEqual(-1); 179 | for (var i = 0; i < 6; i++) { 180 | e.which = 38; 181 | angular.element(element).triggerHandler(e); 182 | expect(element.isolateScope().index).toEqual(expectedIndices[i]); 183 | }; 184 | }); 185 | 186 | it("should, on enter, fill with the appropriate value", function() { 187 | e.which = 13; 188 | angular.element(element).triggerHandler(e); 189 | expect(element.isolateScope().prefix).toEqual("f"); 190 | expect(element.isolateScope().selectionMade).toBe(true); 191 | }); 192 | 193 | it("should, on enter, fill with the appropriate value (index != 0)", function() { 194 | e.which = 40; 195 | angular.element(element).triggerHandler(e); 196 | e.which = 13; 197 | angular.element(element).triggerHandler(e); 198 | expect(element.isolateScope().prefix).toEqual(mockSuggestions[0]); 199 | expect(element.isolateScope().selectionMade).toBe(true); 200 | }); 201 | 202 | it("should, on tab, fill with the appropriate value", function() { 203 | e.which = 9; 204 | console.log("before:", element.isolateScope()); 205 | angular.element(element).triggerHandler(e); 206 | console.log("after:", element.isolateScope()); 207 | expect(element.isolateScope().prefix).toEqual("f"); 208 | expect(element.isolateScope().selectionMade).toBe(true); 209 | }); 210 | 211 | it("should, on tab, fill with the appropriate value (index != -1)", function() { 212 | e.which = 40; 213 | angular.element(element).triggerHandler(e); 214 | e.which = 9; 215 | angular.element(element).triggerHandler(e); 216 | expect(element.isolateScope().prefix).toEqual(mockSuggestions[0]); 217 | expect(element.isolateScope().selectionMade).toBe(true); 218 | }); 219 | }); 220 | 221 | // --- SMARTY SUGGESTIONS DIRECTIVE --- // 222 | describe("smarty suggestions directive", function(){ 223 | var element; 224 | 225 | beforeEach(function() { 226 | var html = ''; 229 | var mockSuggestions = [ 230 | "florist", 231 | "fence builder", 232 | "face painter", 233 | "fence repair", 234 | "flooring" 235 | ]; 236 | 237 | inject(function($compile, $rootScope, $controller) { 238 | $controller("SmartyController", { 239 | $scope: scope 240 | }); 241 | element = $compile(angular.element(html))(scope); 242 | element.scope().suggestions = mockSuggestions; 243 | element.scope().$digest(); 244 | scope = $rootScope.$new(); 245 | }); 246 | }); 247 | 248 | it("should load p elements when scope.suggestions.length > 0", function() { 249 | expect(element.html()).toContain('