Skip to content

Commit

Permalink
split events into before/after and add duringInitialization parameter…
Browse files Browse the repository at this point in the history 
… to tag added events
  • Loading branch information
@aehlke
aehlke committed Nov 23, 2012
1 parent 6999353 commit 28e6161
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 45 deletions.
46 changes: 34 additions & 12 deletions README.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,36 +157,58 @@ Defaults to *null*

## Events

### onTagAdded (function, Callback)
### beforeTagAdded (function, Callback)

Can be used to add custom behaviour before the Tag is added to the DOM.
The function receives an empty event, and the tag as parameters.
Can be used to add custom behaviour before the tag is added to the DOM.

The function receives an empty event, and an object containing the properties `tag` and `duringInitialization`.

`duringInitialization` is a boolean indicating whether the tag was added during the initial construction of this widget,
e.g. when initializing tag-it on an input with preloaded data. You can use this to tell whether the event was initiated by
the user or by the widget's initialization.

To cancel a tag from being added, simply return `false` in your event callback to bail out from adding the tag and stop propagation of the event.

$("#mytags").tagit({
onTagAdded: function(event, tag) {
beforeTagAdded: function(event, ui) {
// do something special
console.log(ui.tag);
}
});

### onTagRemoved (function, Callback)
### afterTagAdded (function, Callback)

Behaves the same as **beforeTagAdded** except that it fires after the tag has been added to the DOM.
It too receives the `duringInitialization` parameter — see **beforeTagAdded** for details.

### beforeTagRemoved (function, Callback)

Can be used to add custom behaviour before the Tag is removed from the DOM.
The function receives an empty event, and the tag as parameters.
Can be used to add custom behaviour before the tag is removed from the DOM.

To cancel a tag from being removed, simply return `false` in your event callback to bail out from removing the tag and stop propagation of the event.

The function receives an empty event, and an object with a `tag` property.

$("#mytags").tagit({
onTagRemoved: function(event, tag) {
beforeTagRemoved: function(event, ui) {
// do something special
console.log(ui.tag);
}
});

### afterTagRemoved (function, Callback)

Behaves the same as **beforeTagRemoved** except that it fires after the tag has been removed from the DOM.

### onTagClicked (function, Callback)

Can be used to add custom behaviour when the Tag is clicked from the DOM.
The function receives the click event and the tag as parameters.
Can be used to add custom behaviour when the tag is clicked.
The function receives the click event and an objecting containing a `tag` field.

$("#mytags").tagit({
onTagClicked: function(event, tag) {
onTagClicked: function(event, ui) {
// do something special
console.log(ui.tag);
}
});

Expand All @@ -209,7 +231,7 @@ Finds the tag with the value `tagName` and removes it. If no such tag is found,
$("#mytags").tagit("removeTagByName", "my-tag");

### removeAll()
Clears the widget of all tags -- removes each tag it contains, so the onTagRemoved event callback (if set in the options) will be called for each.
Clears the widget of all tags — removes each tag it contains, so the **beforeTagRemoved** / **afterTagRemoved** event callbacks (if set) will be called for each.

$("#mytags").tagit("removeAll");

Expand Down
26 changes: 17 additions & 9 deletions examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,17 +74,25 @@
};
eventTags.tagit({
availableTags: sampleTags,
onTagRemoved: function(evt, tag) {
addEvent('This tag is being removed: ' + eventTags.tagit('tagLabel', tag));
beforeTagAdded: function(evt, ui) {
if (!ui.duringInitialization) {
addEvent('beforeTagAdded: ' + eventTags.tagit('tagLabel', ui.tag));
}
},
onTagClicked: function(evt, tag) {
addEvent('This tag was clicked: ' + eventTags.tagit('tagLabel', tag));
afterTagAdded: function(evt, ui) {
if (!ui.duringInitialization) {
addEvent('afterTagAdded: ' + eventTags.tagit('tagLabel', ui.tag));
}
},
singleField:true
}).tagit('option', 'onTagAdded', function(evt, tag) {
// Add this callbackafter we initialize the widget,
// so that onTagAdded doesn't get called on page load.
addEvent('This tag is being added: ' + eventTags.tagit('tagLabel', tag));
beforeTagRemoved: function(evt, ui) {
addEvent('beforeTagRemoved: ' + eventTags.tagit('tagLabel', ui.tag));
},
afterTagRemoved: function(evt, ui) {
addEvent('afterTagRemoved: ' + eventTags.tagit('tagLabel', ui.tag));
},
onTagClicked: function(evt, ui) {
addEvent('onTagClicked: ' + eventTags.tagit('tagLabel', ui.tag));
}
});

//-------------------------------
Expand Down
55 changes: 43 additions & 12 deletions js/tag-it.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,23 @@
tabIndex: null,

// Event callbacks.
beforeTagAdded : null,
afterTagAdded : null,

beforeTagRemoved : null,
afterTagRemoved : null,

onTagClicked : null,


// DEPRECATED:
//
// /!\ These event callbacks are deprecated and WILL BE REMOVED at some
// point in the future. They're here for backwards-compatibility.
// Use the above before/after event callbacks instead.
onTagAdded : null,
onTagRemoved: null,
onTagClicked: null
onTagRemoved: null
// Do not use the above deprecated callbacks.
},

_create: function() {
Expand Down Expand Up @@ -125,7 +139,10 @@
.click(function(e) {
var target = $(e.target);
if (target.hasClass('tagit-label')) {
that._trigger('onTagClicked', e, target.closest('.tagit-choice'));
var tag = target.closest('.tagit-choice');
if (!tag.hasClass('removed')) {
that._trigger('onTagClicked', e, tag);
}
} else {
// Sets the focus() to the input field, if the user
// clicks anywhere inside the UL. This is needed
Expand All @@ -143,7 +160,7 @@
var tags = node.val().split(this.options.singleFieldDelimiter);
node.val('');
$.each(tags, function(index, tag) {
that.createTag(tag);
that.createTag(tag, null, true);
addedExistingFromSingleFieldNode = true;
});
} else {
Expand All @@ -157,7 +174,7 @@
if (!addedExistingFromSingleFieldNode) {
this.tagList.children('li').each(function() {
if (!$(this).hasClass('tagit-new')) {
that.createTag($(this).text(), $(this).attr('class'));
that.createTag($(this).text(), $(this).attr('class'), true);
$(this).remove();
}
});
Expand Down Expand Up @@ -245,11 +262,11 @@
},

_lastTag: function() {
return this.tagList.children('.tagit-choice:last');
return this.tagList.children('.tagit-choice:last:not(.removed)');
},

_tags: function() {
return this.tagList.children('.tagit-choice');
return this.tagList.children('.tagit-choice:not(.removed)');
},

assignedTags: function() {
Expand Down Expand Up @@ -312,7 +329,7 @@
return $.trim(str.toLowerCase());
},

createTag: function(value, additionalClass) {
createTag: function(value, additionalClass, duringInitialization) {
var that = this;

value = $.trim(value);
Expand Down Expand Up @@ -351,22 +368,33 @@
tag.append('<input type="hidden" style="display:none;" value="' + escapedValue + '" name="' + this.options.itemName + '[' + this.options.fieldName + '][]" />');
}

// DEPRECATED.
this._trigger('onTagAdded', null, tag);

// Cleaning the input.
if (this._trigger('beforeTagAdded', null, {tag: tag, duringInitialization: duringInitialization}) === false) {
return;
}

this.tagInput.val('');

// insert tag
// Insert tag.
this.tagInput.parent().before(tag);

this._trigger('afterTagAdded', null, {tag: tag, duringInitialization: duringInitialization});
},

removeTag: function(tag, animate) {
animate = typeof animate === "undefined" ? this.options.animate : animate;
animate = typeof animate === 'undefined' ? this.options.animate : animate;

tag = $(tag);

// DEPRECATED.
this._trigger('onTagRemoved', null, tag);

if (this._trigger('beforeTagRemoved', null, {tag: tag}) === false) {
return;
}

if (this.options.singleField) {
var tags = this.assignedTags();
var removedTagLabel = this.tagLabel(tag);
Expand All @@ -375,8 +403,9 @@
});
this._updateSingleTagsField(tags);
}
// Animate the removal.

if (animate) {
tag.addClass('removed'); // Excludes this tag from _tags.
var hide_args = ($.effects && $.effects.blind) ? ['blind', {direction: 'horizontal'}, 'fast'] : ['fast'];

hide_args.push(function() {
Expand All @@ -387,6 +416,8 @@
} else {
tag.remove();
}

this._trigger('afterTagRemoved', null, {tag: tag});
},

removeTagByName: function(tagName, animate) {
Expand Down
Loading

0 comments on commit 28e6161

Please sign in to comment.