Skip to content
This repository

Allow for changing an tag when clicking on it #13

Merged
merged 2 commits into from about 2 years ago

2 participants

Sebastiaan Stok Alex Gorbatchev
Sebastiaan Stok

I have add an new tagClick event which allows for changing the value of an tag by clicking on it.

The event will receive the data as Item and must return it as an Item.
Writing an automated test-case was not possible since I don''t have the software for running them.

The usage is actually self explanatory.

// Data is the data as it was added
textarea.bind('tagClick', function (e, Data){
    // Normally you would use something more fancy, like jQuery UI dialog.
    var newLabel = window.prompt('New value', Data);

    if (newLabel)
        Data = newLabel;
});
Sebastiaan Stok Added new event tagClick, for changing the tags current value
The event will receive the data as Item and must return it as an Item.
An actual test-case is currently missing but will be added shortly.

__Apparently I also removed some trailing whitespace.__
8160847
Alex Gorbatchev

Thank you for the patch, I'll check it out shortly!

Sebastiaan Stok

There still some issues, the trigger expects an return. But that is not possible with dialogs that works with callbacks like most of them do.

So there must be a second method that will actually trigger the update.
Now I need to find a way to make a reference to that 'trigger' function possible from inside the callback.
And that where I'm stuck right now... My best shot is registering an internal callback that gets fired from inside the callback of the dialog.

Sebastiaan Stok Changed the 'tagClick' event, the event must now call tagUpdate() exp…
…licitly to perform an update.

This fixes the previous issue of not being able to update the tag when using an dialog that uses callbacks.

Example:
	textarea.bind('tagClick', function(e, data, tag, self) {
		var newLabel = window.prompt('New value', data.name);

		if (newLabel)
		{
			data.name = newLabel;

                        // Perform the update now
			self.tagUpdate(true);
		}
	});
8b3fbcb
Sebastiaan Stok

The issue has been resolved, any change on seeing this getting merged soon?

Alex Gorbatchev alexgorbatchev merged commit 8b3fbcb into from February 19, 2012
Alex Gorbatchev alexgorbatchev closed this February 19, 2012
Alex Gorbatchev

@sstok Thanks for the path and idea. I've reimplemented it slightly to be more consistent with the rest of the code base. Please have a look 22edd91#L2R131

Sebastiaan Stok

Great! Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 2 unique commits by 1 author.

Jan 23, 2012
Sebastiaan Stok Added new event tagClick, for changing the tags current value
The event will receive the data as Item and must return it as an Item.
An actual test-case is currently missing but will be added shortly.

__Apparently I also removed some trailing whitespace.__
8160847
Jan 27, 2012
Sebastiaan Stok Changed the 'tagClick' event, the event must now call tagUpdate() exp…
…licitly to perform an update.

This fixes the previous issue of not being able to update the tag when using an dialog that uses callbacks.

Example:
	textarea.bind('tagClick', function(e, data, tag, self) {
		var newLabel = window.prompt('New value', data.name);

		if (newLabel)
		{
			data.name = newLabel;

                        // Perform the update now
			self.tagUpdate(true);
		}
	});
8b3fbcb
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 84 additions and 17 deletions. Show diff stats Hide diff stats

  1. 101  src/js/textext.plugin.tags.js
101  src/js/textext.plugin.tags.js
@@ -9,9 +9,9 @@
9 9
 (function($)
10 10
 {
11 11
 	/**
12  
-	 * Tags plugin brings in the traditional tag functionality where user can assemble and 
  12
+	 * Tags plugin brings in the traditional tag functionality where user can assemble and
13 13
 	 * edit list of tags. Tags plugin works especially well together with Autocomplete, Filter,
14  
-	 * Suggestions and Ajax plugins to provide full spectrum of features. It can also work on 
  14
+	 * Suggestions and Ajax plugins to provide full spectrum of features. It can also work on
15 15
 	 * its own and just do one thing -- tags.
16 16
 	 *
17 17
 	 * @author agorbatchev
@@ -34,7 +34,7 @@
34 34
 		CSS_DOT_TAGS        = CSS_DOT + CSS_TAGS,
35 35
 
36 36
 		/**
37  
-		 * Tags plugin options are grouped under `tags` when passed to the 
  37
+		 * Tags plugin options are grouped under `tags` when passed to the
38 38
 		 * `$().textext()` function. For example:
39 39
 		 *
40 40
 		 *     $('textarea').textext({
@@ -73,7 +73,7 @@
73 73
 		 * @id TextExtTags.options.tags.items
74 74
 		 */
75 75
 		OPT_ITEMS = 'tags.items',
76  
-		
  76
+
77 77
 		/**
78 78
 		 * HTML source that is used to generate a single tag.
79 79
 		 *
@@ -84,7 +84,7 @@
84 84
 		 * @id TextExtTags.options.html.tag
85 85
 		 */
86 86
 		OPT_HTML_TAG  = 'html.tag',
87  
-		
  87
+
88 88
 		/**
89 89
 		 * HTML source that is used to generate container for the tags.
90 90
 		 *
@@ -169,6 +169,7 @@
169 169
 				backspaceKeyDown : self.onBackspaceKeyDown,
170 170
 				preInvalidate    : self.onPreInvalidate,
171 171
 				postInit         : self.onPostInit,
  172
+				tagClick         : self.onTagClick,
172 173
 				getFormData      : self.onGetFormData
173 174
 			});
174 175
 
@@ -182,7 +183,7 @@
182 183
 			});
183 184
 		}
184 185
 
185  
-		self._originalPadding = { 
  186
+		self._originalPadding = {
186 187
 			left : parseInt(input.css('paddingLeft') || 0),
187 188
 			top  : parseInt(input.css('paddingTop') || 0)
188 189
 		};
@@ -211,7 +212,7 @@
211 212
 
212 213
 	//--------------------------------------------------------------------------------
213 214
 	// Event handlers
214  
-	
  215
+
215 216
 	/**
216 217
 	 * Reacts to the `postInit` event triggered by the core and sets default tags
217 218
 	 * if any were specified.
@@ -232,7 +233,7 @@
232 233
 
233 234
 	/**
234 235
 	 * Reacts to the [`getFormData`][1] event triggered by the core. Returns data with the
235  
-	 * weight of 200 to be *greater than the Autocomplete plugin* data weight. The weights 
  236
+	 * weight of 200 to be *greater than the Autocomplete plugin* data weight. The weights
236 237
 	 * system is covered in greater detail in the [`getFormData`][1] event documentation.
237 238
 	 *
238 239
 	 * [1]: /manual/textext.html#getformdata
@@ -312,7 +313,7 @@
312 313
 	};
313 314
 
314 315
 	/**
315  
-	 * Reacts to the `backspaceKeyDown` event. When backspace key is pressed in an empty text field, 
  316
+	 * Reacts to the `backspaceKeyDown` event. When backspace key is pressed in an empty text field,
316 317
 	 * deletes last tag from the list.
317 318
 	 *
318 319
 	 * @signature TextExtTags.onBackspaceKeyDown(e)
@@ -336,7 +337,7 @@
336 337
 	/**
337 338
 	 * Reacts to the `preInvalidate` event and updates the input box to look like the tags are
338 339
 	 * positioned inside it.
339  
-	 * 
  340
+	 *
340 341
 	 * @signature TextExtTags.onPreInvalidate(e)
341 342
 	 *
342 343
 	 * @param e {Object} jQuery event.
@@ -351,7 +352,7 @@
351 352
 			lastTag = self.tagElements().last(),
352 353
 			pos     = lastTag.position()
353 354
 			;
354  
-		
  355
+
355 356
 		if(lastTag.length > 0)
356 357
 			pos.left += lastTag.innerWidth();
357 358
 		else
@@ -380,8 +381,8 @@
380 381
 	{
381 382
 		var self   = this,
382 383
 			source = $(e.target),
383  
-			focus  = 0
384  
-			;
  384
+			focus  = 0,
  385
+			tag	;
385 386
 
386 387
 		if(source.is(CSS_DOT_TAGS))
387 388
 		{
@@ -392,6 +393,72 @@
392 393
 			self.removeTag(source.parents(CSS_DOT_TAG + ':first'));
393 394
 			focus = 1;
394 395
 		}
  396
+		else if(source.is('.text-label'))
  397
+		{
  398
+			tag = source.parents(CSS_DOT_TAG + ':first');
  399
+
  400
+			// Store an reference so that when calling the tagUpdate(), we know which tag was clicked originally
  401
+			self.currentTag = tag;
  402
+
  403
+			self.trigger('tagClick', tag.data(CSS_TAG), tag, self);
  404
+
  405
+			/*
  406
+			// Get the current date info
  407
+			var Data = tag.data(CSS_TAG);
  408
+
  409
+			// Update the label, normally this would by is done using an callback
  410
+			Data.name = 'testing123';
  411
+
  412
+			// Update label
  413
+			tag.find('.text-label').text(self.itemManager().itemToString(Data));
  414
+			*/
  415
+		}
  416
+
  417
+		if(focus)
  418
+			self.core().focusInput();
  419
+	};
  420
+
  421
+	/**
  422
+	 * Reacts to the `tagClick` event.
  423
+	 *
  424
+	 * @signature TextExtTags.onTagClick(e, data, tag, self)
  425
+	 *
  426
+	 * @param e {Object} jQuery event.
  427
+	 * @param data {Object} object that the current `ItemManager` can understand.
  428
+	 * Default is `String`.
  429
+	 * @param tag {Object} object reference of the tag element
  430
+	 * @param self {Object} object reference of self
  431
+	 *
  432
+	 * @author s.stok
  433
+	 * @date 2011/01/23
  434
+	 * @id TextExtTags.onTagClick
  435
+	 */
  436
+	p.onTagClick = function(e, data, tag, self)
  437
+	{
  438
+	};
  439
+
  440
+	/**
  441
+	 * Update the FormData cache.
  442
+	 * This would normally be called somewhere in the tagClick event.
  443
+	 *
  444
+	 * @signature TextExtTags.triggerUpdate(Tag, focus)
  445
+	 *
  446
+	 * @param focus {Boolean} force focus on the input-field.
  447
+	 * @param currentTag {Object} tag reference (optional)
  448
+	 *
  449
+	 * @author s.stok
  450
+	 * @date 2011/01/5
  451
+	 * @id TextExtTags.triggerUpdate
  452
+	 */
  453
+	p.tagUpdate = function (focus, currentTag)
  454
+	{
  455
+		var self = this;
  456
+
  457
+		currentTag = currentTag || self.currentTag;
  458
+		currentTag.find('.text-label').text(self.itemManager().itemToString(currentTag.data(CSS_TAG)));
  459
+
  460
+		self.core().getFormData();
  461
+		self.core().invalidateBounds();
395 462
 
396 463
 		if(focus)
397 464
 			self.core().focusInput();
@@ -458,7 +525,7 @@
458 525
 	 * any of the tags, the tags container is sent under the text area. If cursor
459 526
 	 * is over any of the tags, the tag container is brought to be over the text
460 527
 	 * area.
461  
-	 * 
  528
+	 *
462 529
 	 * @signature TextExtTags.toggleZIndex(e)
463 530
 	 *
464 531
 	 * @param e {Object} jQuery event.
@@ -559,7 +626,7 @@
559 626
 	 *
560 627
 	 * @signature TextExtTags.getTagElement(tag)
561 628
 	 *
562  
-	 * @param tag {Object} Tag object in the format that current `ItemManager` can understand. 
  629
+	 * @param tag {Object} Tag object in the format that current `ItemManager` can understand.
563 630
 	 * Default is `String`.
564 631
 
565 632
 	 * @author agorbatchev
@@ -583,7 +650,7 @@
583 650
 	 *
584 651
 	 * @signature TextExtTags.removeTag(tag)
585 652
 	 *
586  
-	 * @param tag {Object} Tag object in the format that current `ItemManager` can understand. 
  653
+	 * @param tag {Object} Tag object in the format that current `ItemManager` can understand.
587 654
 	 * Default is `String`.
588 655
 	 *
589 656
 	 * @author agorbatchev
@@ -618,7 +685,7 @@
618 685
 	 *
619 686
 	 * @signature TextExtTags.renderTag(tag)
620 687
 	 *
621  
-	 * @param tag {Object} Tag object in the format that current `ItemManager` can understand. 
  688
+	 * @param tag {Object} Tag object in the format that current `ItemManager` can understand.
622 689
 	 * Default is `String`.
623 690
 	 *
624 691
 	 * @author agorbatchev
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.