\r\n \r\n \r\n \r\n \r\n \r\n\r\n')}]);
--------------------------------------------------------------------------------
/jsTag/source/javascripts/app.js:
--------------------------------------------------------------------------------
1 | var jsTag = angular.module('jsTag', []);
2 |
3 | // Defaults for jsTag (can be overriden as shown in example)
4 | jsTag.constant('jsTagDefaults', {
5 | 'edit': true,
6 | 'defaultTags': [],
7 | 'breakCodes': [
8 | 13, // Return
9 | 44 // Comma
10 | ],
11 | 'splitter': ',',
12 | 'texts': {
13 | 'inputPlaceHolder': "Input text",
14 | 'removeSymbol': String.fromCharCode(215)
15 | }
16 | });
--------------------------------------------------------------------------------
/jsTag/source/javascripts/controllers.js:
--------------------------------------------------------------------------------
1 | var jsTag = angular.module('jsTag');
2 |
3 | jsTag.controller('JSTagMainCtrl', ['$attrs', '$scope', 'InputService', 'TagsInputService', 'jsTagDefaults', function($attrs, $scope, InputService, TagsInputService, jsTagDefaults) {
4 | // Parse user options and merge with defaults
5 | var userOptions = {};
6 | try {
7 | userOptions = $scope.$eval($attrs.jsTagOptions);
8 | } catch(e) {
9 | console.log("jsTag Error: Invalid user options, using defaults only");
10 | }
11 |
12 | // Copy so we don't override original values
13 | var options = angular.copy(jsTagDefaults);
14 |
15 | // Use user defined options
16 | if (userOptions !== undefined) {
17 | userOptions.texts = angular.extend(options.texts, userOptions.texts || {});
18 | angular.extend(options, userOptions);
19 | }
20 |
21 | $scope.options = options;
22 |
23 | // Export handlers to view
24 | $scope.tagsInputService = new TagsInputService($scope.options);
25 | $scope.inputService = new InputService($scope.options);
26 |
27 | // Export tagsCollection separately since it's used alot
28 | var tagsCollection = $scope.tagsInputService.tagsCollection;
29 | $scope.tagsCollection = tagsCollection;
30 |
31 | // TODO: Should be inside inside tagsCollection.js
32 | // On every change to editedTags keep isThereAnEditedTag posted
33 | $scope.$watch('tagsCollection._editedTag', function(newValue, oldValue) {
34 | $scope.isThereAnEditedTag = newValue !== null;
35 | });
36 |
37 | // TODO: Should be inside inside tagsCollection.js
38 | // On every change to activeTags keep isThereAnActiveTag posted
39 | $scope.$watchCollection('tagsCollection._activeTags', function(newValue, oldValue) {
40 | $scope.isThereAnActiveTag = newValue.length > 0;
41 | });
42 | }]);
--------------------------------------------------------------------------------
/jsTag/source/javascripts/directives.js:
--------------------------------------------------------------------------------
1 | var jsTag = angular.module('jsTag');
2 |
3 | // TODO: Maybe add A to 'restrict: E' for support in IE 8?
4 | jsTag.directive('jsTag', ['$templateCache', function($templateCache) {
5 | return {
6 | restrict: 'E',
7 | scope: true,
8 | controller: 'JSTagMainCtrl',
9 | templateUrl: function($element, $attrs) {
10 | var mode = $attrs.jsTagMode || "default";
11 | return 'jsTag/source/templates/' + mode + '/js-tag.html';
12 | }
13 | };
14 | }]);
15 |
16 | // TODO: Replace this custom directive by a supported angular-js directive for blur
17 | jsTag.directive('ngBlur', ['$parse', function($parse) {
18 | return {
19 | restrict: 'A',
20 | link: function(scope, elem, attrs) {
21 | // this next line will convert the string
22 | // function name into an actual function
23 | var functionToCall = $parse(attrs.ngBlur);
24 | elem.bind('blur', function(event) {
25 |
26 | // on the blur event, call my function
27 | scope.$apply(function() {
28 | functionToCall(scope, {$event:event});
29 | });
30 | });
31 | }
32 | };
33 | }]);
34 |
35 |
36 | // Notice that focus me also sets the value to false when blur is called
37 | // TODO: Replace this custom directive by a supported angular-js directive for focus
38 | // http://stackoverflow.com/questions/14833326/how-to-set-focus-in-angularjs
39 | jsTag.directive('focusMe', ['$parse', '$timeout', function($parse, $timeout) {
40 | return {
41 | restrict: 'A',
42 | link: function(scope, element, attrs) {
43 | var model = $parse(attrs.focusMe);
44 | scope.$watch(model, function(value) {
45 | if (value === true) {
46 | $timeout(function() {
47 | element[0].focus();
48 | });
49 | }
50 | });
51 |
52 | // to address @blesh's comment, set attribute value to 'false'
53 | // on blur event:
54 | element.bind('blur', function() {
55 | scope.$apply(model.assign(scope, false));
56 | });
57 | }
58 | };
59 | }]);
60 |
61 | // focusOnce is used to focus an element once when first appearing
62 | // Not like focusMe that binds to an input boolean and keeps focusing by it
63 | jsTag.directive('focusOnce', ['$timeout', function($timeout) {
64 | return {
65 | restrict: 'A',
66 | link: function(scope, element, attrs) {
67 | $timeout(function() {
68 | element[0].select();
69 | });
70 | }
71 | };
72 | }]);
73 |
74 | // auto-grow directive by the "shadow" tag concept
75 | jsTag.directive('autoGrow', ['$timeout', function($timeout) {
76 | return {
77 | link: function(scope, element, attr){
78 | var paddingLeft = element.css('paddingLeft'),
79 | paddingRight = element.css('paddingRight');
80 |
81 | var minWidth = 60;
82 |
83 | var $shadow = angular.element('').css({
84 | 'position': 'absolute',
85 | 'top': '-10000px',
86 | 'left': '-10000px',
87 | 'fontSize': element.css('fontSize'),
88 | 'fontFamily': element.css('fontFamily'),
89 | 'white-space': 'pre'
90 | });
91 | element.after($shadow);
92 |
93 | var update = function() {
94 | var val = element.val()
95 | .replace(//g, '>')
97 | .replace(/&/g, '&')
98 | ;
99 |
100 | // If empty calculate by placeholder
101 | if (val !== "") {
102 | $shadow.html(val);
103 | } else {
104 | $shadow.html(element[0].placeholder);
105 | }
106 |
107 | var newWidth = ($shadow[0].offsetWidth + 10) + "px";
108 | element.css('width', newWidth);
109 | };
110 |
111 | var ngModel = element.attr('ng-model');
112 | if (ngModel) {
113 | scope.$watch(ngModel, update);
114 | } else {
115 | element.bind('keyup keydown', update);
116 | }
117 |
118 | // Update on the first link
119 | // $timeout is needed because the value of element is updated only after the $digest cycle
120 | // TODO: Maybe on compile time if we call update we won't need $timeout
121 | $timeout(update);
122 | }
123 | };
124 | }]);
125 |
126 | // Small directive for twitter's typeahead
127 | jsTag.directive('jsTagTypeahead', function () {
128 | return {
129 | restrict: 'A', // Only apply on an attribute or class
130 | require: '?ngModel', // The two-way data bound value that is returned by the directive
131 | link: function (scope, element, attrs, ngModel) {
132 |
133 | element.bind('jsTag:breakcodeHit', function(event) {
134 |
135 | /* Do not clear typeahead input if typeahead option 'editable' is set to false
136 | * so custom tags are not allowed and breakcode hit shouldn't trigger any change. */
137 | if (scope.$eval(attrs.options).editable === false) {
138 | return;
139 | }
140 |
141 | // Tell typeahead to remove the value (after it was also removed in input)
142 | $(event.currentTarget).typeahead('val', '');
143 | });
144 |
145 | }
146 | };
147 | });
148 |
--------------------------------------------------------------------------------
/jsTag/source/javascripts/filters.js:
--------------------------------------------------------------------------------
1 | var jsTag = angular.module('jsTag');
2 |
3 | // Checks if item (needle) exists in array (haystack)
4 | jsTag.filter('inArray', function() {
5 | return function(needle, haystack) {
6 | for(var key in haystack)
7 | {
8 | if (needle === haystack[key])
9 | {
10 | return true;
11 | }
12 | }
13 |
14 | return false;
15 | };
16 | });
17 |
18 | // TODO: Currently the tags in JSTagsCollection is an object with indexes,
19 | // and this filter turns it into an array so we can sort them in ng-repeat.
20 | // An array should be used from the beginning.
21 | jsTag.filter('toArray', function() {
22 | return function(input) {
23 | var objectsAsArray = [];
24 | for (var key in input) {
25 | var value = input[key];
26 | objectsAsArray.push(value);
27 | }
28 |
29 | return objectsAsArray;
30 | };
31 | });
--------------------------------------------------------------------------------
/jsTag/source/javascripts/models/default/jsTag.js:
--------------------------------------------------------------------------------
1 | var jsTag = angular.module('jsTag');
2 |
3 | // Tag Model
4 | jsTag.factory('JSTag', function() {
5 | function JSTag(value, id) {
6 | this.value = value;
7 | this.id = id;
8 | }
9 |
10 | return JSTag;
11 | });
--------------------------------------------------------------------------------
/jsTag/source/javascripts/models/default/jsTagsCollection.js:
--------------------------------------------------------------------------------
1 | var jsTag = angular.module('jsTag');
2 |
3 | // TagsCollection Model
4 | jsTag.factory('JSTagsCollection', ['JSTag', '$filter', function(JSTag, $filter) {
5 |
6 | // Constructor
7 | function JSTagsCollection(defaultTags) {
8 | this.tags = {};
9 | this.tagsCounter = 0;
10 | for (var defaultTagKey in defaultTags) {
11 | var defaultTagValue = defaultTags[defaultTagKey];
12 | this.addTag(defaultTagValue);
13 | }
14 |
15 | this._onAddListenerList = [];
16 | this._onRemoveListenerList = [];
17 |
18 | this.unsetActiveTags();
19 | this.unsetEditedTag();
20 |
21 | this._valueFormatter = null;
22 | this._valueValidator = null;
23 | }
24 |
25 | // *** Methods *** //
26 |
27 | // *** Object manipulation methods *** //
28 | JSTagsCollection.prototype.setValueValidator = function(validator) {
29 | this._valueValidator = validator;
30 | };
31 | JSTagsCollection.prototype.setValueFormatter = function(formatter) {
32 | this._valueFormatter = formatter;
33 | };
34 |
35 | // Adds a tag with received value
36 | JSTagsCollection.prototype.addTag = function(value) {
37 | var tagIndex = this.tagsCounter;
38 | this.tagsCounter++;
39 |
40 | var newTag = new JSTag(value, tagIndex);
41 | this.tags[tagIndex] = newTag;
42 | angular.forEach(this._onAddListenerList, function (callback) {
43 | callback(newTag);
44 | });
45 | };
46 |
47 | // Removes the received tag
48 | JSTagsCollection.prototype.removeTag = function(tagIndex) {
49 | var tag = this.tags[tagIndex];
50 | delete this.tags[tagIndex];
51 | angular.forEach(this._onRemoveListenerList, function (callback) {
52 | callback(tag);
53 | });
54 | };
55 |
56 | JSTagsCollection.prototype.onAdd = function onAdd(callback) {
57 | this._onAddListenerList.push(callback);
58 | };
59 |
60 | JSTagsCollection.prototype.onRemove = function onRemove(callback) {
61 | this._onRemoveListenerList.push(callback);
62 | };
63 |
64 | // Returns the number of tags in collection
65 | JSTagsCollection.prototype.getNumberOfTags = function() {
66 | return getNumberOfProperties(this.tags);
67 | };
68 |
69 | // Returns an array with all values of the tags
70 | JSTagsCollection.prototype.getTagValues = function() {
71 | var tagValues = [];
72 | for (var tag in this.tags) {
73 | tagValues.push(this.tags[tag].value);
74 | }
75 | return tagValues;
76 | };
77 |
78 | // Returns the previous tag before the tag received as input
79 | // Returns same tag if it's the first
80 | JSTagsCollection.prototype.getPreviousTag = function(tag) {
81 | var firstTag = getFirstProperty(this.tags);
82 | if (firstTag.id === tag.id) {
83 | // Return same tag if we reached the beginning
84 | return tag;
85 | } else {
86 | return getPreviousProperty(this.tags, tag.id);
87 | }
88 | };
89 |
90 | // Returns the next tag after the tag received as input
91 | // Returns same tag if it's the last
92 | JSTagsCollection.prototype.getNextTag = function(tag) {
93 | var lastTag = getLastProperty(this.tags);
94 | if (tag.id === lastTag.id) {
95 | // Return same tag if we reached the end
96 | return tag;
97 | } else {
98 | return getNextProperty(this.tags, tag.id);
99 | }
100 | };
101 |
102 | // *** Active methods *** //
103 |
104 | // Checks if a specific tag is active
105 | JSTagsCollection.prototype.isTagActive = function(tag) {
106 | return $filter("inArray")(tag, this._activeTags);
107 | };
108 |
109 | // Sets tag to active
110 | JSTagsCollection.prototype.setActiveTag = function(tag) {
111 | if (!this.isTagActive(tag)) {
112 | this._activeTags.push(tag);
113 | }
114 | };
115 |
116 | // Sets the last tag to be active
117 | JSTagsCollection.prototype.setLastTagActive = function() {
118 | if (getNumberOfProperties(this.tags) > 0) {
119 | var lastTag = getLastProperty(this.tags);
120 | this.setActiveTag(lastTag);
121 | }
122 | };
123 |
124 | // Unsets an active tag
125 | JSTagsCollection.prototype.unsetActiveTag = function(tag) {
126 | var removedTag = this._activeTags.splice(this._activeTags.indexOf(tag), 1);
127 | };
128 |
129 | // Unsets all active tag
130 | JSTagsCollection.prototype.unsetActiveTags = function() {
131 | this._activeTags = [];
132 | };
133 |
134 | // Returns a JSTag only if there is 1 exactly active tags, otherwise null
135 | JSTagsCollection.prototype.getActiveTag = function() {
136 | var activeTag = null;
137 | if (this._activeTags.length === 1) {
138 | activeTag = this._activeTags[0];
139 | }
140 |
141 | return activeTag;
142 | };
143 |
144 | // Returns number of active tags
145 | JSTagsCollection.prototype.getNumOfActiveTags = function() {
146 | return this._activeTags.length;
147 | };
148 |
149 | // *** Edit methods *** //
150 |
151 | // Gets the edited tag
152 | JSTagsCollection.prototype.getEditedTag = function() {
153 | return this._editedTag;
154 | };
155 |
156 | // Checks if a tag is edited
157 | JSTagsCollection.prototype.isTagEdited = function(tag) {
158 | return tag === this._editedTag;
159 | };
160 |
161 | // Sets the tag in the _editedTag member
162 | JSTagsCollection.prototype.setEditedTag = function(tag) {
163 | this._editedTag = tag;
164 | };
165 |
166 | // Unsets the 'edit' flag on a tag by it's given index
167 | JSTagsCollection.prototype.unsetEditedTag = function() {
168 | // Kill empty tags!
169 | if (this._editedTag !== undefined &&
170 | this._editedTag !== null &&
171 | this._editedTag.value === "") {
172 | this.removeTag(this._editedTag.id);
173 | }
174 |
175 | this._editedTag = null;
176 | };
177 |
178 | return JSTagsCollection;
179 | }]);
180 |
181 | // *** Extension methods used to iterate object like a dictionary. Used for the tags. *** //
182 | // TODO: Find another place for these extension methods. Maybe filter.js
183 | // TODO: Maybe use a regular array instead and delete them all :)
184 |
185 | // Gets the number of properties, including inherited
186 | function getNumberOfProperties(obj) {
187 | return Object.keys(obj).length;
188 | }
189 |
190 | // Get the first property of an object, including inherited properties
191 | function getFirstProperty(obj) {
192 | var keys = Object.keys(obj);
193 | return obj[keys[0]];
194 | }
195 |
196 | // Get the last property of an object, including inherited properties
197 | function getLastProperty(obj) {
198 | var keys = Object.keys(obj);
199 | return obj[keys[keys.length - 1]];
200 | }
201 |
202 | // Get the next property of an object whos' properties keys are numbers, including inherited properties
203 | function getNextProperty(obj, propertyId) {
204 | var keys = Object.keys(obj);
205 | var indexOfProperty = keys.indexOf(propertyId.toString());
206 | var keyOfNextProperty = keys[indexOfProperty + 1];
207 | return obj[keyOfNextProperty];
208 | }
209 |
210 | // Get the previous property of an object whos' properties keys are numbers, including inherited properties
211 | function getPreviousProperty(obj, propertyId) {
212 | var keys = Object.keys(obj);
213 | var indexOfProperty = keys.indexOf(propertyId.toString());
214 | var keyOfPreviousProperty = keys[indexOfProperty - 1];
215 | return obj[keyOfPreviousProperty];
216 | }
217 |
--------------------------------------------------------------------------------
/jsTag/source/javascripts/services.js:
--------------------------------------------------------------------------------
1 | var jsTag = angular.module('jsTag');
--------------------------------------------------------------------------------
/jsTag/source/javascripts/services/inputService.js:
--------------------------------------------------------------------------------
1 | var jsTag = angular.module('jsTag');
2 |
3 | // This service handles everything related to input (when to focus input, key pressing, breakcodeHit).
4 | jsTag.factory('InputService', ['$filter', function($filter) {
5 |
6 | // Constructor
7 | function InputService(options) {
8 | this.input = "";
9 | this.isWaitingForInput = options.autoFocus || false;
10 | this.options = options;
11 | }
12 |
13 | // *** Events *** //
14 |
15 | // Handles an input of a new tag keydown
16 | InputService.prototype.onKeydown = function(inputService, tagsCollection, options) {
17 | var e = options.$event;
18 | var $element = angular.element(e.currentTarget);
19 | var keycode = e.which;
20 | // In order to know how to handle a breakCode or a backspace, we must know if the typeahead
21 | // input value is empty or not. e.g. if user hits backspace and typeahead input is not empty
22 | // then we have nothing to do as user si not trying to remove a tag but simply tries to
23 | // delete some character in typeahead's input.
24 | // To know the value in the typeahead input, we can't use `this.input` because when
25 | // typeahead is in uneditable mode, the model (i.e. `this.input`) is not updated and is set
26 | // to undefined. So we have to fetch the value directly from the typeahead input element.
27 | //
28 | // We have to test this.input first, because $element.typeahead is a function and can be set
29 | // even if we are not in the typeahead mode.
30 | // So in this case, the value is always null and the preventDefault is never fired
31 | // This cause the form to always submit after hitting the Enter key.
32 | //var value = ($element.typeahead !== undefined) ? $element.typeahead('val') : this.input;
33 | var value = this.input || (($element.typeahead !== undefined) ? $element.typeahead('val') : undefined) ;
34 | var valueIsEmpty = (value === null || value === undefined || value === "");
35 |
36 | // Check if should break by breakcodes
37 | if ($filter("inArray")(keycode, this.options.breakCodes) !== false) {
38 |
39 | inputService.breakCodeHit(tagsCollection, this.options);
40 |
41 | // Trigger breakcodeHit event allowing extensions (used in twitter's typeahead directive)
42 | $element.triggerHandler('jsTag:breakcodeHit');
43 |
44 | // Do not trigger form submit if value is not empty.
45 | if (!valueIsEmpty) {
46 | e.preventDefault();
47 | }
48 |
49 | } else {
50 | switch (keycode) {
51 | case 9: // Tab
52 |
53 | break;
54 | case 37: // Left arrow
55 | case 8: // Backspace
56 | if (valueIsEmpty) {
57 | // TODO: Call removing tag event instead of calling a method, easier to customize
58 | tagsCollection.setLastTagActive();
59 | }
60 |
61 | break;
62 | }
63 | }
64 | };
65 |
66 | // Handles an input of an edited tag keydown
67 | InputService.prototype.tagInputKeydown = function(tagsCollection, options) {
68 | var e = options.$event;
69 | var keycode = e.which;
70 |
71 | // Check if should break by breakcodes
72 | if ($filter("inArray")(keycode, this.options.breakCodes) !== false) {
73 | this.breakCodeHitOnEdit(tagsCollection, options);
74 | }
75 | };
76 |
77 |
78 | InputService.prototype.onBlur = function(tagsCollection) {
79 | this.breakCodeHit(tagsCollection, this.options);
80 | };
81 |
82 | // *** Methods *** //
83 |
84 | InputService.prototype.resetInput = function() {
85 | var value = this.input;
86 | this.input = "";
87 | return value;
88 | };
89 |
90 | // Sets focus on input
91 | InputService.prototype.focusInput = function() {
92 | this.isWaitingForInput = true;
93 | };
94 |
95 | // breakCodeHit is called when finished creating tag
96 | InputService.prototype.breakCodeHit = function(tagsCollection, options) {
97 | if (this.input !== "") {
98 | if(tagsCollection._valueFormatter) {
99 | this.input = tagsCollection._valueFormatter(this.input);
100 | }
101 | if(tagsCollection._valueValidator) {
102 | if(!tagsCollection._valueValidator(this.input)) {
103 | return;
104 | };
105 | }
106 |
107 | var originalValue = this.resetInput();
108 |
109 | // Input is an object when using typeahead (the key is chosen by the user)
110 | if (originalValue instanceof Object)
111 | {
112 | originalValue = originalValue[options.tagDisplayKey || Object.keys(originalValue)[0]];
113 | }
114 |
115 | // Split value by spliter (usually ,)
116 | var values = originalValue.split(options.splitter);
117 | // Remove empty string objects from the values
118 | for (var i = 0; i < values.length; i++) {
119 | if (!values[i]) {
120 | values.splice(i, 1);
121 | i--;
122 | }
123 | }
124 |
125 | // Add tags to collection
126 | for (var key in values) {
127 | if ( ! values.hasOwnProperty(key)) continue; // for IE 8
128 | var value = values[key];
129 | tagsCollection.addTag(value);
130 | }
131 | }
132 | };
133 |
134 | // breakCodeHit is called when finished editing tag
135 | InputService.prototype.breakCodeHitOnEdit = function(tagsCollection, options) {
136 | // Input is an object when using typeahead (the key is chosen by the user)
137 | var editedTag = tagsCollection.getEditedTag();
138 | if (editedTag.value instanceof Object) {
139 | editedTag.value = editedTag.value[options.tagDisplayKey || Object.keys(editedTag.value)[0]];
140 | }
141 |
142 | tagsCollection.unsetEditedTag();
143 | this.isWaitingForInput = true;
144 | };
145 |
146 | return InputService;
147 | }]);
148 |
--------------------------------------------------------------------------------
/jsTag/source/javascripts/services/tagsInputService.js:
--------------------------------------------------------------------------------
1 | var jsTag = angular.module('jsTag');
2 |
3 | // TagsCollection Model
4 | jsTag.factory('TagsInputService', ['JSTag', 'JSTagsCollection', function(JSTag, JSTagsCollection) {
5 | // Constructor
6 | function TagsHandler(options) {
7 | this.options = options;
8 | var tags = options.tags;
9 |
10 | // Received ready JSTagsCollection
11 | if (tags && Object.getPrototypeOf(tags) === JSTagsCollection.prototype) {
12 | this.tagsCollection = tags;
13 | }
14 | // Received array with default tags or did not receive tags
15 | else {
16 | var defaultTags = options.defaultTags;
17 | this.tagsCollection = new JSTagsCollection(defaultTags);
18 | }
19 | this.shouldBlurActiveTag = true;
20 | }
21 |
22 | // *** Methods *** //
23 |
24 | TagsHandler.prototype.tagClicked = function(tag) {
25 | this.tagsCollection.setActiveTag(tag);
26 | };
27 |
28 | TagsHandler.prototype.tagDblClicked = function(tag) {
29 | var editAllowed = this.options.edit;
30 | if (editAllowed) {
31 | // Set tag as edit
32 | this.tagsCollection.setEditedTag(tag);
33 | }
34 | };
35 |
36 | // Keydown was pressed while a tag was active.
37 | // Important Note: The target of the event is actually a fake input used to capture the keydown.
38 | TagsHandler.prototype.onActiveTagKeydown = function(inputService, options) {
39 | var activeTag = this.tagsCollection.getActiveTag();
40 |
41 | // Do nothing in unexpected situations
42 | if (activeTag !== null) {
43 | var e = options.$event;
44 |
45 | // Mimics blur of the active tag though the focus is on the input.
46 | // This will cause expected features like unseting active tag
47 | var blurActiveTag = function() {
48 | // Expose the option not to blur the active tag
49 | if (this.shouldBlurActiveTag) {
50 | this.onActiveTagBlur(options);
51 | }
52 | };
53 |
54 | switch (e.which) {
55 | case 13: // Return
56 | var editAllowed = this.options.edit;
57 | if (editAllowed) {
58 | blurActiveTag.apply(this);
59 | this.tagsCollection.setEditedTag(activeTag);
60 | }
61 |
62 | break;
63 | case 8: // Backspace
64 | this.tagsCollection.removeTag(activeTag.id);
65 | inputService.isWaitingForInput = true;
66 |
67 | break;
68 | case 37: // Left arrow
69 | blurActiveTag.apply(this);
70 | var previousTag = this.tagsCollection.getPreviousTag(activeTag);
71 | this.tagsCollection.setActiveTag(previousTag);
72 |
73 | break;
74 | case 39: // Right arrow
75 | blurActiveTag.apply(this);
76 |
77 | var nextTag = this.tagsCollection.getNextTag(activeTag);
78 | if (nextTag !== activeTag) {
79 | this.tagsCollection.setActiveTag(nextTag);
80 | } else {
81 | inputService.isWaitingForInput = true;
82 | }
83 |
84 | break;
85 | }
86 | }
87 | };
88 |
89 | // Jumps when active tag calls blur event.
90 | // Because the focus is not on the tag's div itself but a fake input,
91 | // this is called also when clicking the active tag.
92 | // (Which is good because we want the tag to be unactive, then it will be reactivated on the click event)
93 | // It is also called when entering edit mode (ex. when pressing enter while active, it will call blur)
94 | TagsHandler.prototype.onActiveTagBlur = function(options) {
95 | var activeTag = this.tagsCollection.getActiveTag();
96 |
97 | // Do nothing in unexpected situations
98 | if (activeTag !== null) {
99 | this.tagsCollection.unsetActiveTag(activeTag);
100 | }
101 | };
102 |
103 | // Jumps when an edited tag calls blur event
104 | TagsHandler.prototype.onEditTagBlur = function(tagsCollection, inputService) {
105 | tagsCollection.unsetEditedTag();
106 | this.isWaitingForInput = true;
107 | };
108 |
109 | return TagsHandler;
110 | }]);
111 |
--------------------------------------------------------------------------------
/jsTag/source/stylesheets/js-tag.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Container *
3 | Explaining some of the CSS:
4 | # background-color: #FFFFFF; | To simulate an input box - in case background of the whole page is different
5 | */
6 | .jt-editor {
7 | padding: 6px 12px 5px 12px;
8 | display: block;
9 | height: auto;
10 |
11 | vertical-align: middle;
12 | font-size: 14px;
13 | line-height: 1.428571429;
14 | color: #555;
15 | border: 1px solid #BFBFBF;
16 | border-radius: 2px;
17 | cursor: text;
18 | background-color: #FFFFFF;
19 | }
20 |
21 | .jt-editor.focused-true {
22 | border-color: #66AFE9;
23 | outline: 0;
24 | }
25 |
26 | /* Tag */
27 | .jt-tag {
28 | background: #DEE7F8;
29 | border: 1px solid #949494;
30 | padding: 0px 0px 20px 2px;
31 | cursor: default;
32 |
33 | display: inline-block;
34 | -webkit-border-radius: 2px 3px 3px 2px;
35 | -moz-border-radius: 2px 3px 3px 2px;
36 | border-radius: 2px 3px 3px 2px;
37 | height: 22px;
38 | }
39 |
40 | /* Because bootstrap uses it and we don't want that if bootstrap is not included to look different */
41 | .jt-tag {
42 | box-sizing: border-box;
43 | }
44 |
45 | .jt-tag:hover {
46 | border-color: #BCBCBC;
47 | }
48 |
49 | /* Value inside jt-tag */
50 | .jt-tag .value {
51 | padding-left: 4px;
52 | }
53 |
54 | /* Tag when active */
55 | .jt-tag.active-true {
56 | border-color: rgba(82, 168, 236, 0.8);
57 | }
58 |
59 | /* Tag remove button ('x') */
60 | .jt-tag .remove-button {
61 | cursor: pointer;
62 | padding-right: 4px;
63 | }
64 | .jt-tag .remove-button:hover {
65 | font-weight: bold;
66 | }
67 |
68 | /* New tag input & Edit tag input */
69 | .jt-tag-new, .jt-tag-edit {
70 | border: none;
71 | outline: 0px;
72 | min-width: 50px; /* Will keep autogrow from lowering width more than 60 */
73 | }
74 |
75 | /* New tag input & Edit tag input & Tag */
76 | .jt-tag-new, .jt-tag-edit, .jt-tag {
77 | margin: 1px 4px 1px 1px;
78 | }
79 |
80 | /* Should not be displayed, only used to capture keydown */
81 | .jt-fake-input {
82 | float: left;
83 | position: absolute;
84 | left: -10000px;
85 | width: 1px;
86 | border: 0px;
87 | }
--------------------------------------------------------------------------------
/jsTag/source/templates/default/js-tag.html:
--------------------------------------------------------------------------------
1 |
4 |
7 |
10 |
14 |
15 | {{tag.value}}
16 |
17 | {{options.texts.removeSymbol}}
18 |
19 |
21 |
31 |
32 |
33 |
44 |
49 |
50 |
--------------------------------------------------------------------------------
/jsTag/source/templates/typeahead/js-tag.html:
--------------------------------------------------------------------------------
1 |
4 |
7 |
10 |
14 |
15 | {{tag.value}}
16 |
17 | {{options.texts.removeSymbol}}
18 |
19 |
21 |
33 |
34 |
35 |
49 |
54 |
55 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jsTag",
3 | "version": "0.3.7",
4 | "repository": {
5 | "type": "git",
6 | "url": "https://github.com/eranhirs/jsTag.git"
7 | },
8 | "keywords": [
9 | "jstag",
10 | "js-tag",
11 | "tags",
12 | "angular",
13 | "angularjs"
14 | ],
15 | "author": "eranhirs",
16 | "license": "MIT",
17 | "devDependencies": {
18 | "grunt": "~0.4.2",
19 | "grunt-contrib-jshint": "~0.6.5",
20 | "grunt-contrib-nodeunit": "~0.2.2",
21 | "grunt-contrib-concat": "~0.1.3",
22 | "grunt-contrib-uglify": "~0.2.7",
23 | "grunt-angular-templates": "~0.3.12",
24 | "grunt-contrib-clean": "~0.4.1"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------