Skip to content

Commit

Permalink
add jQuery ThemeRoller support.
Browse files Browse the repository at this point in the history 
add zendesk theme for tag-it widget.
animate tag removal.
  • Loading branch information
@aehlke
aehlke committed May 11, 2011
1 parent fec2a9e commit 9080c1d
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 82 deletions.
94 changes: 40 additions & 54 deletions css/jquery.tagit.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.ui-autocomplete {
/*.ui-autocomplete {
background-color: #eee;
position: absolute;
cursor: default;
Expand All @@ -7,79 +7,65 @@
list-style: none;
}
.ui-autocomplete .ui-menu-item a {
display:block;
padding:4px 6px;
text-decoration:none;
line-height:12px;
display: block;
padding: 4px 6px;
text-decoration: none;
line-height: 12px;
}
.ui-autocomplete .ui-menu-item a.ui-state-hover,
.ui-autocomplete .ui-menu-item a.ui-state-active {
background-color:#78959D;
color:#fff;
margin:0;
background-color: #78959D;
color: #fff;
margin: 0;
}

*/
ul.tagit {
padding:1px 5px;
border-style:solid;
border-width:1px;
border-color:#C6C6C6;
overflow:auto;
padding: 1px 5px;
overflow: auto;
}
ul.tagit li {
-moz-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
display: block;
float: left;
margin:2px 5px 2px 0;
margin: 2px 5px 2px 0;
}
ul.tagit li.tagit-choice {
background-color:#DEE7F8;
border:1px solid #CAD8F3;
padding:2px 4px 3px;
}
ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove {
background-color:#bbcef1;
border-color:#6d95e0;
padding: .2em 18px .2em .5em;
position: relative;
}
ul.tagit li.tagit-new {
padding:2px 4px 3px;
padding:2px 4px 1px;
padding:2px 4px 1px 0;
padding: 2px 4px 1px 0;
}

ul.tagit li.tagit-choice input {
display:block;
float:left;
margin:2px 5px 2px 0;
display: block;
float: left;
margin: 2px 5px 2px 0;
}
ul.tagit li.tagit-choice a.tagLabel {
cursor:pointer;
text-decoration:none;
cursor: pointer;
text-decoration: none;
}
ul.tagit li.tagit-choice a.close {
color:#777777;
cursor:pointer;
font-weight:bold;
outline:medium none;
padding:2px 0 2px 3px;
text-decoration:none;
}
ul.tagit li.tagit-choice a.tagLabel:hover
ul.tagit li.tagit-choice a.close:hover {
color:#222;
cursor: pointer;
}
ul.tagit input[type="text"] {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border:none;
margin:0;
padding:0;
width:inherit;
border-color:#C6C6C6;
background-color:#FFFFFF;
color:#333333;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

border: none;
margin: 0;
padding: 0;
width: inherit;
border-color: #C6C6C6;
background-color: #FFFFFF;
color: #333333;
outline: none;
}
ul.tagit .tagit-choice a.ui-icon {
display: inline-block;
position: absolute;
top: 50%;
margin-top: -8px;
right: .1em;
}

48 changes: 48 additions & 0 deletions css/tagit.ui-zendesk.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@

/* Optional scoped theme for tag-it which mimics the zendesk widget. */


ul.tagit {
border-style: solid;
border-width: 1px;
border-color: #C6C6C6;
}
ul.tagit li.tagit-choice {
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #CAD8F3;

background: none;
background-color: #DEE7F8;

color: #555;
font-weight: normal;
}
ul.tagit .tagit-choice a.ui-icon {
right: .4em;
}
ul.tagit li.tagit-choice a.close {
text-decoration: none;
}
ul.tagit li.tagit-choice a.ui-icon {
background-image: none;
text-indent: inherit;
width: inherit;
height: inherit;
}
ul.tagit li.tagit-choice a.close:before {
content: '×';
font-weight: bold;
color: #777;
}
ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove {
background-color: #bbcef1;
border-color: #6d95e0;
}
ul.tagit li.tagit-choice a.tagLabel:hover,
ul.tagit li.tagit-choice a.close:hover:before {
color: #222;
}


5 changes: 4 additions & 1 deletion example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@
<!--<link href="css/reset.css" rel="stylesheet" type="text/css">-->
<link href="css/master.css" rel="stylesheet" type="text/css">

<link href="css/jquery-ui/jquery.ui.autocomplete.custom.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="css/jquery.tagit.css" rel="stylesheet" type="text/css">
<!--<link href="css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>

Expand Down
62 changes: 35 additions & 27 deletions js/tag-it.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
/*if (options_or_action == 'clear') {
// Resets the widget, removing all tags
return this; // for chainability
} else {*/

(function($) {

Expand Down Expand Up @@ -40,7 +36,7 @@
var self = this;

this.tagList = this.element;
this._tagInput = $('<input class="tagit-input" type="text" ' + (this.options.tabIndex ? 'tabindex="' + this.options.tabIndex + '"' : '') + '>');
this._tagInput = $('<input class="tagit-input" type="text" ' + (this.options.tabIndex ? 'tabindex="' + this.options.tabIndex + '"' : '') + '>');

var BACKSPACE = 8,
ENTER = 13,
Expand All @@ -59,31 +55,32 @@
};

this.tagList
// add the tagit CSS class.
.addClass('tagit')
.addClass('ui-widget ui-widget-content ui-corner-all')
// create the input field.
.append($('<li class="tagit-new"></li>\n').append(this._tagInput))
.click(function(e) {
if (e.target.className == 'close') {
var target = $(e.target);
if (target.hasClass('close')) {
// Removes a tag when the little 'x' is clicked.
// Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
self.removeTag($(e.target).parent());
} else if (e.target.className == 'tagit-label' && self.options.onTagClicked) {
self.options.onTagClicked($(e.target).parent());
self.removeTag(target.parent());
} else if (target.hasClass('tagit-label') && self.options.onTagClicked) {
self.options.onTagClicked(target.parent());
} else {
// Sets the focus() to the input field, if the user clicks anywhere inside the UL.
// This is needed because the input field needs to be of a small size.
self._tagInput.focus();
}
})
// add existing tags
.children('li')
.each(function() {
if (!$(this).hasClass('tagit-new')) {
self.createTag($(this).html(), $(this).attr('class'));
$(this).remove();
}
});
});

// Add existing tags.
this.tagList.children('li').each(function() {
if (!$(this).hasClass('tagit-new')) {
self.createTag($(this).html(), $(this).attr('class'));
$(this).remove();
}
});

if (this.options.singleField) {
if (this.options.singleFieldNode) {
Expand Down Expand Up @@ -134,7 +131,6 @@
)
)
) {

event.preventDefault();
self.createTag(self._cleanedInput());
}
Expand All @@ -158,7 +154,7 @@
// on the selected autocomplete item, a tag is shown with the pre-autocompleted text,
// and is changed to the autocompleted text upon mouseup.
if (self._tagInput.val() === '') {
self.removeTag(self.tagList.children('.tagit-choice:last'));
self.removeTag(self.tagList.children('.tagit-choice:last'), false);
}
self.createTag(ui.item.value);
// Preventing the tag input to be updated with the chosen value.
Expand Down Expand Up @@ -246,12 +242,14 @@

var label = $(this.options.onTagClicked ? '<a class="tagit-label"></a>' : '<span class="tagit-label"></span>').text(value);

// create tag
// Create tag.
var tag = $('<li></li>')
.addClass('tagit-choice')
.addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all')
.addClass(additionalClass)
.append(label)
.append('<a class="close">x</a>');
.append(label);
var removeTag = $('<a></a>')
.addClass('ui-icon ui-icon-close close');
tag.append(removeTag);

if (this.options.singleField) {
var tags = this.assignedTags();
Expand All @@ -270,8 +268,11 @@
this._tagInput.parent().before(tag);
},

removeTag: function(tag) {
removeTag: function(tag, animate) {
if (typeof animate === 'undefined') { animate = true; }

tag = $(tag);

if (this.options.onTagRemoved) {
this.options.onTagRemoved(tag);
}
Expand All @@ -283,7 +284,14 @@
});
this._updateSingleTagsField(tags);
}
tag.remove();
// Animate the removal.
if (animate) {
tag.fadeOut('fast').hide('blind', {direction: 'horizontal'}, 'fast', function(){
tag.remove();
}).dequeue();
} else {
tag.remove();
}
},

removeAll: function() {
Expand Down

0 comments on commit 9080c1d

Please sign in to comment.