Skip to content
This repository

destroy(), maxChars, maxCount, allowNotList #20

Closed
wants to merge 12 commits into from

1 participant

baio
baio
baio commented August 18, 2011
        destroy() - method to destroy widget
        maxChars :  maximum characters in single tag,
        maxCount : maximum tags count,
        allowNotInList : prohibit/allow arbitrary tags, if false then tags are allowed to be selected only from tagSource

Functions :
onMaxChars : null,
onMaxCount : null,
onNotAllowed : null

These functions are invoked if some restriction event occurs.

baio baio closed this August 20, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
93  js/tag-it.js
@@ -72,7 +72,16 @@
72 72
             // Event callbacks.
73 73
             onTagAdded  : null,
74 74
             onTagRemoved: null,
75  
-            onTagClicked: null
  75
+            onTagClicked: null,
  76
+
  77
+            //restrictions
  78
+            maxChars :  0,
  79
+            maxCount : 0,
  80
+            allowNotInList : true,
  81
+
  82
+            onMaxChars : null,
  83
+            onMaxCount : null,
  84
+            onNotAllowed : null
76 85
         },
77 86
 
78 87
 
@@ -88,6 +97,7 @@
88 97
                 this.tagList = $('<ul></ul>').insertAfter(this.element);
89 98
                 this.options.singleField = true;
90 99
                 this.options.singleFieldNode = this.element;
  100
+                this.display_orig = this.element.css('display');
91 101
                 this.element.css('display', 'none');
92 102
             } else {
93 103
                 this.tagList = this.element.find('ul, ol').andSelf().last();
@@ -125,6 +135,17 @@
125 135
                     }
126 136
                 });
127 137
 
  138
+            //Input type default width
  139
+            this._updateInputTagWidth();
  140
+
  141
+            // Position (position, top, left, width)
  142
+            this.tagList.css({
  143
+               position : this.element.css("position"),
  144
+               top : this.element.css("top"),
  145
+               left : this.element.css("left"),
  146
+               width : this.element.css("width")
  147
+            });
  148
+
128 149
             // Add existing tags from the list, if any.
129 150
             this.tagList.children('li').each(function() {
130 151
                 if (!$(this).hasClass('tagit-new')) {
@@ -164,11 +185,10 @@
164 185
                     } else if (that.options.removeConfirmation) {
165 186
                         that._lastTag().removeClass('remove ui-state-highlight');
166 187
                     }
167  
-
168 188
                     // Comma/Space/Enter are all valid delimiters for new tags,
169 189
                     // except when there is an open quote or if setting allowSpaces = true.
170 190
                     // Tab will also create a tag, unless the tag input is empty, in which case it isn't caught.
171  
-                    if (
  191
+                    else if (
172 192
                         event.which == $.ui.keyCode.COMMA ||
173 193
                         event.which == $.ui.keyCode.ENTER ||
174 194
                         (
@@ -189,15 +209,44 @@
189 209
                         )
190 210
                     ) {
191 211
                         event.preventDefault();
192  
-                        that.createTag(that._cleanedInput());
  212
+
  213
+                        if (that.options.allowNotInList !== false)
  214
+                            that.createTag(that._cleanedInput());
  215
+                        else
  216
+                            that._trigger("onNotAllowed", event, that);
193 217
 
194 218
                         // The autocomplete doesn't close automatically when TAB is pressed.
195 219
                         // So let's ensure that it closes.
196  
-                        that._tagInput.autocomplete('close');
  220
+                        //that._tagInput.autocomplete('close');
  221
+                    }
  222
+                    //check restrictions
  223
+                    else{
  224
+                        var func;
  225
+
  226
+                        if (event.which != $.ui.keyCode.BACKSPACE){
  227
+
  228
+                            if(that.options.maxChars && $.trim(that._tagInput.val()).length === that.options.maxChars)
  229
+                                        func = "onMaxChars";
  230
+
  231
+                            if(that.options.maxCount && that.assignedTags().length == that.options.maxCount)
  232
+                                        func = "onMaxCount";
  233
+                        }
  234
+
  235
+                        if (func !== undefined)
  236
+                        {
  237
+                            if (func)
  238
+                                that._trigger(func, null, that);
  239
+
  240
+                            event.preventDefault();
  241
+                        }
  242
+                        else
  243
+                            that._updateInputTagWidth();
197 244
                     }
  245
+
198 246
                 }).blur(function(e){
199 247
                     // Create a tag when the element loses focus (unless it's empty).
200  
-                    that.createTag(that._cleanedInput());
  248
+                    if (that.options.allowNotInList !== false)
  249
+                        that.createTag(that._cleanedInput());
201 250
                 });
202 251
                 
203 252
 
@@ -223,6 +272,38 @@
223 272
             }
224 273
         },
225 274
 
  275
+        destroy : function()
  276
+        {
  277
+
  278
+            if (this.element)
  279
+            {
  280
+                this.element.css('display', this.display_orig);
  281
+            }
  282
+
  283
+            $(this.tagList).remove();
  284
+
  285
+            $.Widget.prototype.destroy.apply(this, arguments);
  286
+        },
  287
+
  288
+        _updateInputTagWidth : function()
  289
+        {
  290
+            //get necessary text width
  291
+            var sensor = $('<span />').css({
  292
+                "font-family" : this._tagInput.css("font-family"),
  293
+                "font-size" : this._tagInput.css("font-size"),
  294
+                "font-style" : this._tagInput.css("font-style"),
  295
+                "font-variant" : this._tagInput.css("font-variant"),
  296
+                "font-spacing" : this._tagInput.css("font-spacing"),
  297
+                margin: this._tagInput.css("margin"),
  298
+                padding: this._tagInput.css("padding")});
  299
+            sensor.text(this._tagInput.val() + "W");
  300
+            $("body").append(sensor);
  301
+            var w  = sensor.width() + 10;
  302
+            sensor.remove();
  303
+
  304
+            this._tagInput.css("width", w);
  305
+        },
  306
+
226 307
         _cleanedInput: function() {
227 308
             // Returns the contents of the tag input, cleaned and ready to be passed to createTag
228 309
             return $.trim(this._tagInput.val().replace(/^"(.*)"$/, '$1'));
68  my_example.html
... ...
@@ -0,0 +1,68 @@
  1
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2
+        "http://www.w3.org/TR/html4/loose.dtd">
  3
+<html>
  4
+<head>
  5
+    <title></title>
  6
+    <!-- These 2 CSS files are required: any 1 jQuery UI theme CSS, plus the Tag-it base CSS. -->
  7
+    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
  8
+    <link rel="stylesheet" type="text/css" href="css/jquery.tagit.css">
  9
+
  10
+    <!-- This is an optional CSS theme that only applies to this widget. Use it in addition to the jQuery UI theme. -->
  11
+    <link href="css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">
  12
+
  13
+    <!-- jQuery and jQuery UI are required dependencies. -->
  14
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript" charset="utf-8"></script>
  15
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
  16
+
  17
+    <!-- The real deal -->
  18
+	<script src="js/tag-it.js" type="text/javascript" charset="utf-8"></script>
  19
+
  20
+    <script>
  21
+
  22
+        function create_it()
  23
+        {
  24
+            var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
  25
+
  26
+            $('#tagField').tagit({
  27
+
  28
+                maxChars : 5,
  29
+                maxCount : 3,
  30
+                allowNotInList: false,
  31
+                availableTags: sampleTags,
  32
+                onMaxChars: function(widget, input)
  33
+                {
  34
+                    console.log("onMaxChars");
  35
+                },
  36
+                onMaxCount: function()
  37
+                {
  38
+                    console.log("onMaxCount");
  39
+                },
  40
+                onNotAllowed: function()
  41
+                {
  42
+                    console.log("onNotAllowed");
  43
+                }
  44
+            });
  45
+        }
  46
+
  47
+        function destroy_it()
  48
+        {
  49
+            $("#tagField").tagit("destroy");
  50
+        }
  51
+        
  52
+        $(document).ready(function(){
  53
+            //create_it();
  54
+        });
  55
+    </script>
  56
+</head>
  57
+<body>
  58
+<form>
  59
+ <p>
  60
+     If you instantiate Tag-it on an INPUT element, it will default to being singleField, with that INPUT element as the singleFieldNode. This is the simplest way to have a gracefully-degrading tag widget.
  61
+ </p>
  62
+    <input name="tags" id="tagField" value="Apple, Orange" style="top: 200px; width: 200px; position: absolute;">
  63
+
  64
+ </form>
  65
+<button onclick='destroy_it();'>destroy it!</button>
  66
+<button onclick='create_it();'>create it!</button>
  67
+</body>
  68
+</html>
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.