textext-rails 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,242 @@
1
+ /**
2
+ * jQuery TextExt Plugin
3
+ * http://alexgorbatchev.com/textext
4
+ *
5
+ * @version 1.2.0
6
+ * @copyright Copyright (C) 2011 Alex Gorbatchev. All rights reserved.
7
+ * @license MIT License
8
+ */
9
+ (function($)
10
+ {
11
+ /**
12
+ * The Filter plugin introduces ability to limit input that the text field
13
+ * will accept. If the Tags plugin is used, Filter plugin will limit which
14
+ * tags it's possible to add.
15
+ *
16
+ * The list of allowed items can be either specified through the
17
+ * options, can come from the Suggestions plugin or be loaded by the Ajax
18
+ * plugin. All these plugins have one thing in common -- they
19
+ * trigger `setSuggestions` event which the Filter plugin is expecting.
20
+ *
21
+ * @author agorbatchev
22
+ * @date 2011/08/18
23
+ * @id TextExtFilter
24
+ */
25
+ function TextExtFilter() {};
26
+
27
+ $.fn.textext.TextExtFilter = TextExtFilter;
28
+ $.fn.textext.addPlugin('filter', TextExtFilter);
29
+
30
+ var p = TextExtFilter.prototype,
31
+
32
+ /**
33
+ * Filter plugin options are grouped under `filter` when passed to the
34
+ * `$().textext()` function. For example:
35
+ *
36
+ * $('textarea').textext({
37
+ * plugins: 'filter',
38
+ * filter: {
39
+ * items: [ "item1", "item2" ]
40
+ * }
41
+ * })
42
+ *
43
+ * @author agorbatchev
44
+ * @date 2011/08/18
45
+ * @id TextExtFilter.options
46
+ */
47
+
48
+ /**
49
+ * This is a toggle switch to enable or disable the Filter plugin. The value is checked
50
+ * each time at the top level which allows you to toggle this setting on the fly.
51
+ *
52
+ * @name filter.enabled
53
+ * @default true
54
+ * @author agorbatchev
55
+ * @date 2011/08/18
56
+ * @id TextExtFilter.options.enabled
57
+ */
58
+ OPT_ENABLED = 'filter.enabled',
59
+
60
+ /**
61
+ * Arra of items that the Filter plugin will allow the Tag plugin to add to the list of
62
+ * its resut tags. Each item by default is expected to be a string which default `ItemManager`
63
+ * can work with. You can change the item type by supplying custom `ItemManager`.
64
+ *
65
+ * @name filter.items
66
+ * @default null
67
+ * @author agorbatchev
68
+ * @date 2011/08/18
69
+ * @id TextExtFilter.options.items
70
+ */
71
+ OPT_ITEMS = 'filter.items',
72
+
73
+ /**
74
+ * Filter plugin dispatches and reacts to the following events.
75
+ *
76
+ * @author agorbatchev
77
+ * @date 2011/08/18
78
+ * @id TextExtFilter.events
79
+ */
80
+
81
+ /**
82
+ * Filter plugin reacts to the `isTagAllowed` event triggered by the Tags plugin before
83
+ * adding a new tag to the list. If the new tag is among the `items` specified in options,
84
+ * then the new tag will be allowed.
85
+ *
86
+ * @name isTagAllowed
87
+ * @author agorbatchev
88
+ * @date 2011/08/18
89
+ * @id TextExtFilter.events.isTagAllowed
90
+ */
91
+
92
+ /**
93
+ * Filter plugin reacts to the `setSuggestions` event triggered by other plugins like
94
+ * Suggestions and Ajax.
95
+ *
96
+ * However, event if this event is handled and items are passed with it and stored, if `items`
97
+ * option was supplied, it will always take precedense.
98
+ *
99
+ * @name setSuggestions
100
+ * @author agorbatchev
101
+ * @date 2011/08/18
102
+ * @id TextExtFilter.events.setSuggestions
103
+ */
104
+
105
+ DEFAULT_OPTS = {
106
+ filter : {
107
+ enabled : true,
108
+ items : null
109
+ }
110
+ }
111
+ ;
112
+
113
+ /**
114
+ * Initialization method called by the core during plugin instantiation.
115
+ *
116
+ * @signature TextExtFilter.init(core)
117
+ *
118
+ * @param core {TextExt} Instance of the TextExt core class.
119
+ *
120
+ * @author agorbatchev
121
+ * @date 2011/08/18
122
+ * @id TextExtFilter.init
123
+ */
124
+ p.init = function(core)
125
+ {
126
+ var self = this;
127
+ self.baseInit(core, DEFAULT_OPTS);
128
+
129
+ self.on({
130
+ getFormData : self.onGetFormData,
131
+ isTagAllowed : self.onIsTagAllowed,
132
+ setSuggestions : self.onSetSuggestions
133
+ });
134
+
135
+ self._suggestions = null;
136
+ };
137
+
138
+ //--------------------------------------------------------------------------------
139
+ // Core functionality
140
+
141
+ /**
142
+ * Reacts to the [`getFormData`][1] event triggered by the core. Returns data with the
143
+ * weight of 200 to be *greater than the Autocomplete plugins* data weights.
144
+ * The weights system is covered in greater detail in the [`getFormData`][1] event
145
+ * documentation.
146
+ *
147
+ * This method does nothing if Tags tag is also present.
148
+ *
149
+ * [1]: /manual/textext.html#getformdata
150
+ *
151
+ * @signature TextExtFilter.onGetFormData(e, data, keyCode)
152
+ *
153
+ * @param e {Object} jQuery event.
154
+ * @param data {Object} Data object to be populated.
155
+ * @param keyCode {Number} Key code that triggered the original update request.
156
+ *
157
+ * @author agorbatchev
158
+ * @date 2011/12/28
159
+ * @id TextExtFilter.onGetFormData
160
+ * @version 1.1
161
+ */
162
+ p.onGetFormData = function(e, data, keyCode)
163
+ {
164
+ var self = this,
165
+ val = self.val(),
166
+ inputValue = val,
167
+ formValue = ''
168
+ ;
169
+
170
+ if(!self.core().hasPlugin('tags'))
171
+ {
172
+ if(self.isValueAllowed(inputValue))
173
+ formValue = val;
174
+
175
+ data[300] = self.formDataObject(inputValue, formValue);
176
+ }
177
+ };
178
+
179
+ /**
180
+ * Checks given value if it's present in `filterItems` or was loaded for the Autocomplete
181
+ * or by the Suggestions plugins. `value` is compared to each item using `ItemManager.compareItems`
182
+ * method which is currently attached to the core. Returns `true` if value is known or
183
+ * Filter plugin is disabled.
184
+ *
185
+ * @signature TextExtFilter.isValueAllowed(value)
186
+ *
187
+ * @param value {Object} Value to check.
188
+ *
189
+ * @author agorbatchev
190
+ * @date 2011/12/28
191
+ * @id TextExtFilter.isValueAllowed
192
+ * @version 1.1
193
+ */
194
+ p.isValueAllowed = function(value)
195
+ {
196
+ var self = this,
197
+ list = self.opts('filterItems') || self._suggestions || [],
198
+ itemManager = self.itemManager(),
199
+ result = !self.opts(OPT_ENABLED), // if disabled, should just return true
200
+ i
201
+ ;
202
+
203
+ for(i = 0; i < list.length && !result; i++)
204
+ if(itemManager.compareItems(value, list[i]))
205
+ result = true;
206
+
207
+ return result;
208
+ };
209
+
210
+ /**
211
+ * Handles `isTagAllowed` event dispatched by the Tags plugin. If supplied tag is not
212
+ * in the `items` list, method sets `result` on the `data` argument to `false`.
213
+ *
214
+ * @signature TextExtFilter.onIsTagAllowed(e, data)
215
+ *
216
+ * @param e {Object} jQuery event.
217
+ * @param data {Object} Payload in the following format : `{ tag : {Object}, result : {Boolean} }`.
218
+ * @author agorbatchev
219
+ * @date 2011/08/04
220
+ * @id TextExtFilter.onIsTagAllowed
221
+ */
222
+ p.onIsTagAllowed = function(e, data)
223
+ {
224
+ data.result = this.isValueAllowed(data.tag);
225
+ };
226
+
227
+ /**
228
+ * Reacts to the `setSuggestions` events and stores supplied suggestions for future use.
229
+ *
230
+ * @signature TextExtFilter.onSetSuggestions(e, data)
231
+ *
232
+ * @param e {Object} jQuery event.
233
+ * @param data {Object} Payload in the following format : `{ result : {Array} } }`.
234
+ * @author agorbatchev
235
+ * @date 2011/08/18
236
+ * @id TextExtFilter.onSetSuggestions
237
+ */
238
+ p.onSetSuggestions = function(e, data)
239
+ {
240
+ this._suggestions = data.result;
241
+ };
242
+ })(jQuery);
@@ -0,0 +1,174 @@
1
+ /**
2
+ * jQuery TextExt Plugin
3
+ * http://alexgorbatchev.com/textext
4
+ *
5
+ * @version 1.2.0
6
+ * @copyright Copyright (C) 2011 Alex Gorbatchev. All rights reserved.
7
+ * @license MIT License
8
+ */
9
+ (function($)
10
+ {
11
+ /**
12
+ * Focus plugin displays a visual effect whenever user sets focus
13
+ * into the text area.
14
+ *
15
+ * @author agorbatchev
16
+ * @date 2011/08/18
17
+ * @id TextExtFocus
18
+ */
19
+ function TextExtFocus() {};
20
+
21
+ $.fn.textext.TextExtFocus = TextExtFocus;
22
+ $.fn.textext.addPlugin('focus', TextExtFocus);
23
+
24
+ var p = TextExtFocus.prototype,
25
+ /**
26
+ * Focus plugin only has one option and that is its HTML template. It could be
27
+ * changed when passed to the `$().textext()` function. For example:
28
+ *
29
+ * $('textarea').textext({
30
+ * plugins: 'focus',
31
+ * html: {
32
+ * focus: "<span/>"
33
+ * }
34
+ * })
35
+ *
36
+ * @author agorbatchev
37
+ * @date 2011/08/18
38
+ * @id TextExtFocus.options
39
+ */
40
+
41
+ /**
42
+ * HTML source that is used to generate markup required for the focus effect.
43
+ *
44
+ * @name html.focus
45
+ * @default '<div class="text-focus"/>'
46
+ * @author agorbatchev
47
+ * @date 2011/08/18
48
+ * @id TextExtFocus.options.html.focus
49
+ */
50
+ OPT_HTML_FOCUS = 'html.focus',
51
+
52
+ /**
53
+ * Focus plugin dispatches or reacts to the following events.
54
+ *
55
+ * @author agorbatchev
56
+ * @date 2011/08/17
57
+ * @id TextExtFocus.events
58
+ */
59
+
60
+ /**
61
+ * Focus plugin reacts to the `focus` event and shows the markup generated from
62
+ * the `html.focus` option.
63
+ *
64
+ * @name focus
65
+ * @author agorbatchev
66
+ * @date 2011/08/18
67
+ * @id TextExtFocus.events.focus
68
+ */
69
+
70
+ /**
71
+ * Focus plugin reacts to the `blur` event and hides the effect.
72
+ *
73
+ * @name blur
74
+ * @author agorbatchev
75
+ * @date 2011/08/18
76
+ * @id TextExtFocus.events.blur
77
+ */
78
+
79
+ DEFAULT_OPTS = {
80
+ html : {
81
+ focus : '<div class="text-focus"/>'
82
+ }
83
+ }
84
+ ;
85
+
86
+ /**
87
+ * Initialization method called by the core during plugin instantiation.
88
+ *
89
+ * @signature TextExtFocus.init(core)
90
+ *
91
+ * @param core {TextExt} Instance of the TextExt core class.
92
+ *
93
+ * @author agorbatchev
94
+ * @date 2011/08/18
95
+ * @id TextExtFocus.init
96
+ */
97
+ p.init = function(core)
98
+ {
99
+ var self = this;
100
+
101
+ self.baseInit(core, DEFAULT_OPTS);
102
+ self.core().wrapElement().append(self.opts(OPT_HTML_FOCUS));
103
+ self.on({
104
+ blur : self.onBlur,
105
+ focus : self.onFocus
106
+ });
107
+
108
+ self._timeoutId = 0;
109
+ };
110
+
111
+ //--------------------------------------------------------------------------------
112
+ // Event handlers
113
+
114
+ /**
115
+ * Reacts to the `blur` event and hides the focus effect with a slight delay which
116
+ * allows quick refocusing without effect blinking in and out.
117
+ *
118
+ * @signature TextExtFocus.onBlur(e)
119
+ *
120
+ * @param e {Object} jQuery event.
121
+ *
122
+ * @author agorbatchev
123
+ * @date 2011/08/08
124
+ * @id TextExtFocus.onBlur
125
+ */
126
+ p.onBlur = function(e)
127
+ {
128
+ var self = this;
129
+
130
+ clearTimeout(self._timeoutId);
131
+
132
+ self._timeoutId = setTimeout(function()
133
+ {
134
+ self.getFocus().hide();
135
+ },
136
+ 100);
137
+ };
138
+
139
+ /**
140
+ * Reacts to the `focus` event and shows the focus effect.
141
+ *
142
+ * @signature TextExtFocus.onFocus
143
+ *
144
+ * @param e {Object} jQuery event.
145
+ * @author agorbatchev
146
+ * @date 2011/08/08
147
+ * @id TextExtFocus.onFocus
148
+ */
149
+ p.onFocus = function(e)
150
+ {
151
+ var self = this;
152
+
153
+ clearTimeout(self._timeoutId);
154
+
155
+ self.getFocus().show();
156
+ };
157
+
158
+ //--------------------------------------------------------------------------------
159
+ // Core functionality
160
+
161
+ /**
162
+ * Returns focus effect HTML element.
163
+ *
164
+ * @signature TextExtFocus.getFocus()
165
+ *
166
+ * @author agorbatchev
167
+ * @date 2011/08/08
168
+ * @id TextExtFocus.getFocus
169
+ */
170
+ p.getFocus = function()
171
+ {
172
+ return this.core().wrapElement().find('.text-focus');
173
+ };
174
+ })(jQuery);
@@ -0,0 +1,292 @@
1
+ /**
2
+ * jQuery TextExt Plugin
3
+ * http://alexgorbatchev.com/textext
4
+ *
5
+ * @version 1.2.0
6
+ * @copyright Copyright (C) 2011 Alex Gorbatchev. All rights reserved.
7
+ * @license MIT License
8
+ */
9
+ (function($)
10
+ {
11
+ /**
12
+ * Prompt plugin displays a visual user propmpt in the text input area. If user focuses
13
+ * on the input, the propt is hidden and only shown again when user focuses on another
14
+ * element and text input doesn't have a value.
15
+ *
16
+ * @author agorbatchev
17
+ * @date 2011/08/18
18
+ * @id TextExtPrompt
19
+ */
20
+ function TextExtPrompt() {};
21
+
22
+ $.fn.textext.TextExtPrompt = TextExtPrompt;
23
+ $.fn.textext.addPlugin('prompt', TextExtPrompt);
24
+
25
+ var p = TextExtPrompt.prototype,
26
+
27
+ CSS_HIDE_PROMPT = 'text-hide-prompt',
28
+
29
+ /**
30
+ * Prompt plugin has options to change the prompt label and its HTML template. The options
31
+ * could be changed when passed to the `$().textext()` function. For example:
32
+ *
33
+ * $('textarea').textext({
34
+ * plugins: 'prompt',
35
+ * prompt: 'Your email address'
36
+ * })
37
+ *
38
+ * @author agorbatchev
39
+ * @date 2011/08/18
40
+ * @id TextExtPrompt.options
41
+ */
42
+
43
+ /**
44
+ * Prompt message that is displayed to the user whenever there's no value in the input.
45
+ *
46
+ * @name prompt
47
+ * @default 'Awaiting input...'
48
+ * @author agorbatchev
49
+ * @date 2011/08/18
50
+ * @id TextExtPrompt.options.prompt
51
+ */
52
+ OPT_PROMPT = 'prompt',
53
+
54
+ /**
55
+ * HTML source that is used to generate markup required for the prompt effect.
56
+ *
57
+ * @name html.prompt
58
+ * @default '<div class="text-prompt"/>'
59
+ * @author agorbatchev
60
+ * @date 2011/08/18
61
+ * @id TextExtPrompt.options.html.prompt
62
+ */
63
+ OPT_HTML_PROMPT = 'html.prompt',
64
+
65
+ /**
66
+ * Prompt plugin dispatches or reacts to the following events.
67
+ * @id TextExtPrompt.events
68
+ */
69
+
70
+ /**
71
+ * Prompt plugin reacts to the `focus` event and hides the markup generated from
72
+ * the `html.prompt` option.
73
+ *
74
+ * @name focus
75
+ * @author agorbatchev
76
+ * @date 2011/08/18
77
+ * @id TextExtPrompt.events.focus
78
+ */
79
+
80
+ /**
81
+ * Prompt plugin reacts to the `blur` event and shows the prompt back if user
82
+ * hasn't entered any value.
83
+ *
84
+ * @name blur
85
+ * @author agorbatchev
86
+ * @date 2011/08/18
87
+ * @id TextExtPrompt.events.blur
88
+ */
89
+
90
+ DEFAULT_OPTS = {
91
+ prompt : 'Awaiting input...',
92
+
93
+ html : {
94
+ prompt : '<div class="text-prompt"/>'
95
+ }
96
+ }
97
+ ;
98
+
99
+ /**
100
+ * Initialization method called by the core during plugin instantiation.
101
+ *
102
+ * @signature TextExtPrompt.init(core)
103
+ *
104
+ * @param core {TextExt} Instance of the TextExt core class.
105
+ *
106
+ * @author agorbatchev
107
+ * @date 2011/08/18
108
+ * @id TextExtPrompt.init
109
+ */
110
+ p.init = function(core)
111
+ {
112
+ var self = this,
113
+ container
114
+ ;
115
+
116
+ self.baseInit(core, DEFAULT_OPTS);
117
+
118
+ container = $(self.opts(OPT_HTML_PROMPT));
119
+ $(self).data('container', container);
120
+
121
+ self.core().wrapElement().append(container);
122
+ self.setPrompt(self.opts(OPT_PROMPT));
123
+
124
+ if(self.val().length > 0)
125
+ self.hidePrompt();
126
+
127
+ self.on({
128
+ blur : self.onBlur,
129
+ focus : self.onFocus,
130
+ postInvalidate : self.onPostInvalidate,
131
+ postInit : self.onPostInit
132
+ });
133
+ };
134
+
135
+ //--------------------------------------------------------------------------------
136
+ // Event handlers
137
+
138
+ /**
139
+ * Reacts to the `postInit` and configures the plugin for initial display.
140
+ *
141
+ * @signature TextExtPrompt.onPostInit(e)
142
+ *
143
+ * @param e {Object} jQuery event.
144
+ *
145
+ * @author agorbatchev
146
+ * @date 2011/08/24
147
+ * @id TextExtPrompt.onPostInit
148
+ */
149
+ p.onPostInit = function(e)
150
+ {
151
+ this.invalidateBounds();
152
+ };
153
+
154
+ /**
155
+ * Reacts to the `postInvalidate` and insures that prompt display remains correct.
156
+ *
157
+ * @signature TextExtPrompt.onPostInvalidate(e)
158
+ *
159
+ * @param e {Object} jQuery event.
160
+ *
161
+ * @author agorbatchev
162
+ * @date 2011/08/24
163
+ * @id TextExtPrompt.onPostInvalidate
164
+ */
165
+ p.onPostInvalidate = function(e)
166
+ {
167
+ this.invalidateBounds();
168
+ };
169
+
170
+ /**
171
+ * Repositions the prompt to make sure it's always at the same place as in the text input carret.
172
+ *
173
+ * @signature TextExtPrompt.invalidateBounds()
174
+ *
175
+ * @author agorbatchev
176
+ * @date 2011/08/24
177
+ * @id TextExtPrompt.invalidateBounds
178
+ */
179
+ p.invalidateBounds = function()
180
+ {
181
+ var self = this,
182
+ input = self.input()
183
+ ;
184
+
185
+ self.containerElement().css({
186
+ paddingLeft : input.css('paddingLeft'),
187
+ paddingTop : input.css('paddingTop')
188
+ });
189
+ };
190
+
191
+ /**
192
+ * Reacts to the `blur` event and shows the prompt effect with a slight delay which
193
+ * allows quick refocusing without effect blinking in and out.
194
+ *
195
+ * The prompt is restored if the text box has no value.
196
+ *
197
+ * @signature TextExtPrompt.onBlur(e)
198
+ *
199
+ * @param e {Object} jQuery event.
200
+ *
201
+ * @author agorbatchev
202
+ * @date 2011/08/08
203
+ * @id TextExtPrompt.onBlur
204
+ */
205
+ p.onBlur = function(e)
206
+ {
207
+ var self = this;
208
+
209
+ self.startTimer('prompt', 0.1, function()
210
+ {
211
+ if(self.val().length === 0)
212
+ self.showPrompt();
213
+ });
214
+ };
215
+
216
+ /**
217
+ * Shows prompt HTML element.
218
+ *
219
+ * @signature TextExtPrompt.showPrompt()
220
+ *
221
+ * @author agorbatchev
222
+ * @date 2011/08/22
223
+ * @id TextExtPrompt.showPrompt
224
+ */
225
+ p.showPrompt = function()
226
+ {
227
+ this.containerElement().removeClass(CSS_HIDE_PROMPT);
228
+ };
229
+
230
+ /**
231
+ * Hides prompt HTML element.
232
+ *
233
+ * @signature TextExtPrompt.hidePrompt()
234
+ *
235
+ * @author agorbatchev
236
+ * @date 2011/08/22
237
+ * @id TextExtPrompt.hidePrompt
238
+ */
239
+ p.hidePrompt = function()
240
+ {
241
+ this.stopTimer('prompt');
242
+ this.containerElement().addClass(CSS_HIDE_PROMPT);
243
+ };
244
+
245
+ /**
246
+ * Reacts to the `focus` event and hides the prompt effect.
247
+ *
248
+ * @signature TextExtPrompt.onFocus
249
+ *
250
+ * @param e {Object} jQuery event.
251
+ * @author agorbatchev
252
+ * @date 2011/08/08
253
+ * @id TextExtPrompt.onFocus
254
+ */
255
+ p.onFocus = function(e)
256
+ {
257
+ this.hidePrompt();
258
+ };
259
+
260
+ //--------------------------------------------------------------------------------
261
+ // Core functionality
262
+
263
+ /**
264
+ * Sets the prompt display to the specified string.
265
+ *
266
+ * @signature TextExtPrompt.setPrompt(str)
267
+ *
268
+ * @oaram str {String} String that will be displayed in the prompt.
269
+ *
270
+ * @author agorbatchev
271
+ * @date 2011/08/18
272
+ * @id TextExtPrompt.setPrompt
273
+ */
274
+ p.setPrompt = function(str)
275
+ {
276
+ this.containerElement().text(str);
277
+ };
278
+
279
+ /**
280
+ * Returns prompt effect HTML element.
281
+ *
282
+ * @signature TextExtPrompt.containerElement()
283
+ *
284
+ * @author agorbatchev
285
+ * @date 2011/08/08
286
+ * @id TextExtPrompt.containerElement
287
+ */
288
+ p.containerElement = function()
289
+ {
290
+ return $(this).data('container');
291
+ };
292
+ })(jQuery);