Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

RTL Support #56

Open
wants to merge 2 commits into from

2 participants

@moshest

css update and JS fix

you may edit the css file and add automatic the RTL class to the ul element by jQuery

@moshest moshest referenced this pull request
Closed

RTL languages #53

@aehlke
Owner

I'd like to do something about this but adding a class to specify a text input method seems kind of dirty to me. Anyone think there's a better way to handle this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 29, 2012
  1. @moshest

    RTL language support

    moshest authored
  2. @moshest

    RTL support

    moshest authored
This page is out of date. Refresh to see the latest.
Showing with 50 additions and 29 deletions.
  1. +37 −20 css/jquery.tagit.css
  2. +13 −9 js/tag-it.js
View
57 css/jquery.tagit.css
@@ -1,34 +1,47 @@
ul.tagit {
- padding: 1px 5px;
- overflow: auto;
+padding: 1px 5px;
+overflow: auto;
margin-left: inherit; /* usually we don't want the regular ul margins. */
margin-right: inherit;
}
ul.tagit li {
- display: block;
- float: left;
- margin: 2px 5px 2px 0;
+display: block;
+float: left;
+margin: 2px 5px 2px 0;
+}
+body.rtl ul.tagit li {
+float:right;
}
ul.tagit li.tagit-choice {
- padding: .2em 18px .2em .5em;
+padding: .2em 18px .2em .5em;
position: relative;
line-height: inherit;
}
+body.rtl ul.tagit li.tagit-choice {
+padding: .2em .5em .2em 18px;
+}
ul.tagit li.tagit-new {
- padding: .25em 4px .25em 0;
+padding: .25em 4px .25em 0;
+}
+body.rtl ul.tagit li.tagit-new {
+padding: .25em 0 .25em 4px;
}
ul.tagit li.tagit-choice a.tagit-label {
- cursor: pointer;
- text-decoration: none;
+cursor: pointer;
+text-decoration: none;
}
ul.tagit li.tagit-choice .tagit-close {
- cursor: pointer;
+cursor: pointer;
position: absolute;
right: .1em;
top: 50%;
margin-top: -8px;
}
+body.rtl ul.tagit li.tagit-choice .tagit-close {
+right: auto;
+left: .1em;
+}
/* used for some custom themes that don't need image icons */
ul.tagit li.tagit-choice .tagit-close .text-icon {
@@ -36,19 +49,23 @@ ul.tagit li.tagit-choice .tagit-close .text-icon {
}
ul.tagit li.tagit-choice input {
- display: block;
- float: left;
- margin: 2px 5px 2px 0;
+display: block;
+float: left;
+margin: 2px 5px 2px 0;
+}
+body.rtl ul.tagit li.tagit-choice input {
+float: right;
+margin: 2px 0 2px 5px;
}
ul.tagit input[type="text"] {
- -moz-box-sizing: border-box;
+ -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
- box-sizing: border-box;
+ box-sizing: border-box;
border: none;
- margin: 0;
- padding: 0;
- width: inherit;
- background-color: inherit;
+margin: 0;
+padding: 0;
+width: inherit;
+background-color: inherit;
outline: none;
-}
+}
View
22 js/tag-it.js
@@ -34,7 +34,6 @@
tagSource : null,
removeConfirmation: false,
caseSensitive : true,
- placeholderText : null,
// When enabled, quotes are not neccesary
// for inputting multi-word tags.
@@ -101,9 +100,6 @@
if (this.options.tabIndex) {
this._tagInput.attr('tabindex', this.options.tabIndex);
}
- if (this.options.placeholderText) {
- this._tagInput.attr('placeholder', this.options.placeholderText);
- }
this.options.tagSource = this.options.tagSource || function(search, showChoices) {
var filter = search.term.toLowerCase();
@@ -181,7 +177,6 @@
// except when there is an open quote or if setting allowSpaces = true.
// Tab will also create a tag, unless the tag input is empty, in which case it isn't caught.
if (
- event.which == $.ui.keyCode.COMMA ||
event.which == $.ui.keyCode.ENTER ||
(
event.which == $.ui.keyCode.TAB &&
@@ -207,7 +202,18 @@
// So let's ensure that it closes.
that._tagInput.autocomplete('close');
}
- }).blur(function(e){
+ })
+ .keypress(function(event) {
+ if (event.charCode == 44) {
+ event.preventDefault();
+ that.createTag(that._cleanedInput());
+
+ // The autocomplete doesn't close automatically when TAB is pressed.
+ // So let's ensure that it closes.
+ that._tagInput.autocomplete('close');
+ }
+ })
+ .blur(function(e){
// Create a tag when the element loses focus (unless it's empty).
that.createTag(that._cleanedInput());
});
@@ -387,6 +393,4 @@
});
-})(jQuery);
-
-
+})(jQuery);
Something went wrong with that request. Please try again.