Moved to new tag lib.
This commit is contained in:
Martin Edenhofer
parent
8db7b51c32
commit
591fab6d79
7 changed files with 1242 additions and 411 deletions
|
|
@ -389,35 +389,9 @@ class App.ControllerForm extends App.Controller
|
||||||
else if attribute.tag is 'tag'
|
else if attribute.tag is 'tag'
|
||||||
item = $( App.view('generic/input')( attribute: attribute ) )
|
item = $( App.view('generic/input')( attribute: attribute ) )
|
||||||
a = =>
|
a = =>
|
||||||
siteUpdate = (reorder) =>
|
$('#' + attribute.id ).tokenfield()
|
||||||
container = document.getElementById( attribute.id + "_tagsinput" )
|
$('#' + attribute.id ).parent().css('height', 'auto')
|
||||||
if reorder
|
App.Delay.set( a, 120, undefined, 'tags' )
|
||||||
$('#' + attribute.id + "_tagsinput" ).height( 20 )
|
|
||||||
height = container.scrollHeight || 45
|
|
||||||
console.log('siteUpdate', height)
|
|
||||||
$('#' + attribute.id + "_tagsinput" ).height( height - 16 )
|
|
||||||
|
|
||||||
onAddTag = =>
|
|
||||||
siteUpdate()
|
|
||||||
|
|
||||||
onRemoveTag = =>
|
|
||||||
siteUpdate(true)
|
|
||||||
|
|
||||||
$('#' + attribute.id + '_tagsinput').remove()
|
|
||||||
h = $('#' + attribute.id).height()
|
|
||||||
$('#' + attribute.id).tagsInput(
|
|
||||||
width: '100%'
|
|
||||||
# height: (h + 30 )+ 'px'
|
|
||||||
onAddTag: onAddTag
|
|
||||||
onRemoveTag: onRemoveTag
|
|
||||||
)
|
|
||||||
siteUpdate(true)
|
|
||||||
|
|
||||||
# update box size
|
|
||||||
App.Event.bind 'ui:rerender:content', =>
|
|
||||||
siteUpdate(true)
|
|
||||||
|
|
||||||
App.Delay.set( a, 80, undefined, 'form_tags' )
|
|
||||||
|
|
||||||
# autocompletion
|
# autocompletion
|
||||||
else if attribute.tag is 'autocompletion'
|
else if attribute.tag is 'autocompletion'
|
||||||
|
|
|
||||||
|
|
@ -30,16 +30,16 @@ class App.WidgetTag extends App.Controller
|
||||||
tags: tags || [],
|
tags: tags || [],
|
||||||
tag_id: @attribute_id
|
tag_id: @attribute_id
|
||||||
)
|
)
|
||||||
@el.find('#' + @attribute_id ).tagsInput(
|
@el.find('#' + @attribute_id ).tokenfield().on(
|
||||||
width: '100%'
|
'tokenfield:createtoken'
|
||||||
defaultText: App.i18n.translateContent('add a Tag')
|
(e) =>
|
||||||
onAddTag: @onAddTag
|
@onAddTag( e.token.value )
|
||||||
onRemoveTag: @onRemoveTag
|
).on(
|
||||||
height: '45px'
|
'tokenfield:removetoken'
|
||||||
|
(e) =>
|
||||||
|
@onRemoveTag( e.token.value )
|
||||||
)
|
)
|
||||||
@delay @siteUpdate, 250
|
@el.find('#' + @attribute_id ).parent().css('height', 'auto')
|
||||||
|
|
||||||
# @el.find('#tags').elastic()
|
|
||||||
|
|
||||||
onAddTag: (item) =>
|
onAddTag: (item) =>
|
||||||
@ajax(
|
@ajax(
|
||||||
|
|
@ -50,8 +50,6 @@ class App.WidgetTag extends App.Controller
|
||||||
o_id: @object.id,
|
o_id: @object.id,
|
||||||
item: item
|
item: item
|
||||||
processData: true,
|
processData: true,
|
||||||
success: (data, status, xhr) =>
|
|
||||||
@siteUpdate()
|
|
||||||
)
|
)
|
||||||
|
|
||||||
onRemoveTag: (item) =>
|
onRemoveTag: (item) =>
|
||||||
|
|
@ -63,14 +61,4 @@ class App.WidgetTag extends App.Controller
|
||||||
o_id: @object.id
|
o_id: @object.id
|
||||||
item: item
|
item: item
|
||||||
processData: true
|
processData: true
|
||||||
success: (data, status, xhr) =>
|
|
||||||
@siteUpdate(true)
|
|
||||||
)
|
)
|
||||||
|
|
||||||
siteUpdate: (reorder) =>
|
|
||||||
container = document.getElementById( @attribute_id + '_tagsinput' )
|
|
||||||
if reorder
|
|
||||||
$('#' + @attribute_id + '_tagsinput').height( 20 )
|
|
||||||
return if !container
|
|
||||||
height = container.scrollHeight
|
|
||||||
$('#' + @attribute_id + '_tagsinput').height( height - 10 )
|
|
||||||
|
|
|
||||||
1020
app/assets/javascripts/app/lib/base/bootstrap-tokenfield.js
vendored
Executable file
1020
app/assets/javascripts/app/lib/base/bootstrap-tokenfield.js
vendored
Executable file
File diff suppressed because it is too large
Load diff
|
|
@ -1,353 +0,0 @@
|
||||||
/*
|
|
||||||
|
|
||||||
jQuery Tags Input Plugin 1.3.3
|
|
||||||
|
|
||||||
Copyright (c) 2011 XOXCO, Inc
|
|
||||||
|
|
||||||
Documentation for this plugin lives here:
|
|
||||||
http://xoxco.com/clickable/jquery-tags-input
|
|
||||||
|
|
||||||
Licensed under the MIT license:
|
|
||||||
http://www.opensource.org/licenses/mit-license.php
|
|
||||||
|
|
||||||
ben@xoxco.com
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function($) {
|
|
||||||
|
|
||||||
var delimiter = new Array();
|
|
||||||
var tags_callbacks = new Array();
|
|
||||||
$.fn.doAutosize = function(o){
|
|
||||||
var minWidth = $(this).data('minwidth'),
|
|
||||||
maxWidth = $(this).data('maxwidth'),
|
|
||||||
val = '',
|
|
||||||
input = $(this),
|
|
||||||
testSubject = $('#'+$(this).data('tester_id'));
|
|
||||||
|
|
||||||
if (val === (val = input.val())) {return;}
|
|
||||||
|
|
||||||
// Enter new content into testSubject
|
|
||||||
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
|
|
||||||
testSubject.html(escaped);
|
|
||||||
// Calculate new width + whether to change
|
|
||||||
var testerWidth = testSubject.width(),
|
|
||||||
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
|
|
||||||
currentWidth = input.width(),
|
|
||||||
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|
|
||||||
|| (newWidth > minWidth && newWidth < maxWidth);
|
|
||||||
|
|
||||||
// Animate width
|
|
||||||
if (isValidWidthChange) {
|
|
||||||
input.width(newWidth);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
};
|
|
||||||
$.fn.resetAutosize = function(options){
|
|
||||||
// alert(JSON.stringify(options));
|
|
||||||
var minWidth = $(this).data('minwidth') || options.minInputWidth || $(this).width(),
|
|
||||||
maxWidth = $(this).data('maxwidth') || options.maxInputWidth || ($(this).closest('.tagsinput').width() - options.inputPadding),
|
|
||||||
val = '',
|
|
||||||
input = $(this),
|
|
||||||
testSubject = $('<tester/>').css({
|
|
||||||
position: 'absolute',
|
|
||||||
top: -9999,
|
|
||||||
left: -9999,
|
|
||||||
width: 'auto',
|
|
||||||
fontSize: input.css('fontSize'),
|
|
||||||
fontFamily: input.css('fontFamily'),
|
|
||||||
fontWeight: input.css('fontWeight'),
|
|
||||||
letterSpacing: input.css('letterSpacing'),
|
|
||||||
whiteSpace: 'nowrap'
|
|
||||||
}),
|
|
||||||
testerId = $(this).attr('id')+'_autosize_tester';
|
|
||||||
if(! $('#'+testerId).length > 0){
|
|
||||||
testSubject.attr('id', testerId);
|
|
||||||
testSubject.appendTo('body');
|
|
||||||
}
|
|
||||||
|
|
||||||
input.data('minwidth', minWidth);
|
|
||||||
input.data('maxwidth', maxWidth);
|
|
||||||
input.data('tester_id', testerId);
|
|
||||||
input.css('width', minWidth);
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.addTag = function(value,options) {
|
|
||||||
options = jQuery.extend({focus:false,callback:true},options);
|
|
||||||
this.each(function() {
|
|
||||||
var id = $(this).attr('id');
|
|
||||||
|
|
||||||
var tagslist = $(this).val().split(delimiter[id]);
|
|
||||||
if (tagslist[0] == '') {
|
|
||||||
tagslist = new Array();
|
|
||||||
}
|
|
||||||
|
|
||||||
value = jQuery.trim(value);
|
|
||||||
|
|
||||||
if (options.unique) {
|
|
||||||
var skipTag = $(tagslist).tagExist(value);
|
|
||||||
if(skipTag == true) {
|
|
||||||
//Marks fake input as not_valid to let styling it
|
|
||||||
$('#'+id+'_tag').addClass('not_valid');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
var skipTag = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (value !='' && skipTag != true) {
|
|
||||||
$('<span>').addClass('tag').append(
|
|
||||||
$('<span>').text(value).append(' '),
|
|
||||||
$('<a>', {
|
|
||||||
href : '#',
|
|
||||||
title : 'Removing tag',
|
|
||||||
text : 'x'
|
|
||||||
}).click(function () {
|
|
||||||
return $('#' + id).removeTag(escape(value));
|
|
||||||
})
|
|
||||||
).insertBefore('#' + id + '_addTag');
|
|
||||||
|
|
||||||
tagslist.push(value);
|
|
||||||
|
|
||||||
$('#'+id+'_tag').val('');
|
|
||||||
if (options.focus) {
|
|
||||||
$('#'+id+'_tag').focus();
|
|
||||||
} else {
|
|
||||||
$('#'+id+'_tag').blur();
|
|
||||||
}
|
|
||||||
|
|
||||||
$.fn.tagsInput.updateTagsField(this,tagslist);
|
|
||||||
|
|
||||||
if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) {
|
|
||||||
var f = tags_callbacks[id]['onAddTag'];
|
|
||||||
f.call(this, value);
|
|
||||||
}
|
|
||||||
if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
|
|
||||||
{
|
|
||||||
var i = tagslist.length;
|
|
||||||
var f = tags_callbacks[id]['onChange'];
|
|
||||||
f.call(this, $(this), tagslist[i-1]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.removeTag = function(value) {
|
|
||||||
value = unescape(value);
|
|
||||||
this.each(function() {
|
|
||||||
var id = $(this).attr('id');
|
|
||||||
|
|
||||||
var old = $(this).val().split(delimiter[id]);
|
|
||||||
|
|
||||||
$('#'+id+'_tagsinput .tag').remove();
|
|
||||||
str = '';
|
|
||||||
for (i=0; i< old.length; i++) {
|
|
||||||
if (old[i]!=value) {
|
|
||||||
str = str + delimiter[id] +old[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$.fn.tagsInput.importTags(this,str);
|
|
||||||
|
|
||||||
if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) {
|
|
||||||
var f = tags_callbacks[id]['onRemoveTag'];
|
|
||||||
f.call(this, value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.tagExist = function(val) {
|
|
||||||
return (jQuery.inArray(val, $(this)) >= 0); //true when tag exists, false when not
|
|
||||||
};
|
|
||||||
|
|
||||||
// clear all existing tags and import new ones from a string
|
|
||||||
$.fn.importTags = function(str) {
|
|
||||||
id = $(this).attr('id');
|
|
||||||
$('#'+id+'_tagsinput .tag').remove();
|
|
||||||
$.fn.tagsInput.importTags(this,str);
|
|
||||||
}
|
|
||||||
|
|
||||||
$.fn.tagsInput = function(options) {
|
|
||||||
var settings = jQuery.extend({
|
|
||||||
interactive:true,
|
|
||||||
defaultText:'add a tag',
|
|
||||||
minChars:0,
|
|
||||||
width:'300px',
|
|
||||||
height:'100px',
|
|
||||||
autocomplete: {selectFirst: false },
|
|
||||||
'hide':true,
|
|
||||||
'delimiter':',',
|
|
||||||
'unique':true,
|
|
||||||
removeWithBackspace:true,
|
|
||||||
placeholderColor:'#666666',
|
|
||||||
autosize: true,
|
|
||||||
comfortZone: 20,
|
|
||||||
inputPadding: 6*2
|
|
||||||
},options);
|
|
||||||
|
|
||||||
this.each(function() {
|
|
||||||
if (settings.hide) {
|
|
||||||
$(this).hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
var id = $(this).attr('id')
|
|
||||||
|
|
||||||
var data = jQuery.extend({
|
|
||||||
pid:id,
|
|
||||||
real_input: '#'+id,
|
|
||||||
holder: '#'+id+'_tagsinput',
|
|
||||||
input_wrapper: '#'+id+'_addTag',
|
|
||||||
fake_input: '#'+id+'_tag'
|
|
||||||
},settings);
|
|
||||||
|
|
||||||
delimiter[id] = data.delimiter;
|
|
||||||
|
|
||||||
if (settings.onAddTag || settings.onRemoveTag || settings.onChange) {
|
|
||||||
tags_callbacks[id] = new Array();
|
|
||||||
tags_callbacks[id]['onAddTag'] = settings.onAddTag;
|
|
||||||
tags_callbacks[id]['onRemoveTag'] = settings.onRemoveTag;
|
|
||||||
tags_callbacks[id]['onChange'] = settings.onChange;
|
|
||||||
}
|
|
||||||
|
|
||||||
var markup = '<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag">';
|
|
||||||
|
|
||||||
if (settings.interactive) {
|
|
||||||
markup = markup + '<input id="'+id+'_tag" value="" data-default="'+settings.defaultText+'" />';
|
|
||||||
}
|
|
||||||
|
|
||||||
markup = markup + '</div><div class="tags_clear"></div></div>';
|
|
||||||
|
|
||||||
$(markup).insertAfter(this);
|
|
||||||
|
|
||||||
$(data.holder).css('width',settings.width);
|
|
||||||
$(data.holder).css('height',settings.height);
|
|
||||||
|
|
||||||
if ($(data.real_input).val()!='') {
|
|
||||||
$.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
|
|
||||||
}
|
|
||||||
if (settings.interactive) {
|
|
||||||
$(data.fake_input).val($(data.fake_input).attr('data-default'));
|
|
||||||
$(data.fake_input).css('color',settings.placeholderColor);
|
|
||||||
$(data.fake_input).resetAutosize(settings);
|
|
||||||
|
|
||||||
$(data.holder).bind('click',data,function(event) {
|
|
||||||
$(event.data.fake_input).focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
$(data.fake_input).bind('focus',data,function(event) {
|
|
||||||
if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('data-default')) {
|
|
||||||
$(event.data.fake_input).val('');
|
|
||||||
}
|
|
||||||
$(event.data.fake_input).css('color','#000000');
|
|
||||||
});
|
|
||||||
|
|
||||||
if (settings.autocomplete_url != undefined) {
|
|
||||||
// 2012-02-23 me
|
|
||||||
// autocomplete_options = {source: settings.autocomplete_url};
|
|
||||||
autocomplete_options = settings.auto;
|
|
||||||
// 2012-02-23 me
|
|
||||||
for (attrname in settings.autocomplete) {
|
|
||||||
autocomplete_options[attrname] = settings.autocomplete[attrname];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (jQuery.Autocompleter !== undefined) {
|
|
||||||
$(data.fake_input).autocomplete(settings.autocomplete_url, settings.autocomplete);
|
|
||||||
$(data.fake_input).bind('result',data,function(event,data,formatted) {
|
|
||||||
if (data) {
|
|
||||||
$('#'+id).addTag(data[0] + "",{focus:true,unique:(settings.unique)});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else if (jQuery.ui.autocomplete !== undefined) {
|
|
||||||
$(data.fake_input).autocomplete(autocomplete_options);
|
|
||||||
$(data.fake_input).bind('autocompleteselect',data,function(event,ui) {
|
|
||||||
$(event.data.real_input).addTag(ui.item.value,{focus:true,unique:(settings.unique)});
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
} else {
|
|
||||||
// if a user tabs out of the field, create a new tag
|
|
||||||
// this is only available if autocomplete is not used.
|
|
||||||
$(data.fake_input).bind('blur',data,function(event) {
|
|
||||||
var d = $(this).attr('data-default');
|
|
||||||
if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) {
|
|
||||||
if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
|
|
||||||
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
|
|
||||||
} else {
|
|
||||||
$(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
|
|
||||||
$(event.data.fake_input).css('color',settings.placeholderColor);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
// if user types a comma, create a new tag
|
|
||||||
$(data.fake_input).bind('keypress',data,function(event) {
|
|
||||||
if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13 ) {
|
|
||||||
event.preventDefault();
|
|
||||||
if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
|
|
||||||
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
|
|
||||||
$(event.data.fake_input).resetAutosize(settings);
|
|
||||||
return false;
|
|
||||||
} else if (event.data.autosize) {
|
|
||||||
$(event.data.fake_input).doAutosize(settings);
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//Delete last tag on backspace
|
|
||||||
data.removeWithBackspace && $(data.fake_input).bind('keydown', function(event)
|
|
||||||
{
|
|
||||||
if(event.keyCode == 8 && $(this).val() == '')
|
|
||||||
{
|
|
||||||
event.preventDefault();
|
|
||||||
var last_tag = $(this).closest('.tagsinput').find('.tag:last').text();
|
|
||||||
var id = $(this).attr('id').replace(/_tag$/, '');
|
|
||||||
last_tag = last_tag.replace(/[\s]+x$/, '');
|
|
||||||
$('#' + id).removeTag(escape(last_tag));
|
|
||||||
$(this).trigger('focus');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$(data.fake_input).blur();
|
|
||||||
|
|
||||||
//Removes the not_valid class when user changes the value of the fake input
|
|
||||||
if(data.unique) {
|
|
||||||
$(data.fake_input).keydown(function(event){
|
|
||||||
if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)) {
|
|
||||||
$(this).removeClass('not_valid');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} // if settings.interactive
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return this;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.tagsInput.updateTagsField = function(obj,tagslist) {
|
|
||||||
var id = $(obj).attr('id');
|
|
||||||
$(obj).val(tagslist.join(delimiter[id]));
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.tagsInput.importTags = function(obj,val) {
|
|
||||||
$(obj).val('');
|
|
||||||
var id = $(obj).attr('id');
|
|
||||||
var tags = val.split(delimiter[id]);
|
|
||||||
for (i=0; i<tags.length; i++) {
|
|
||||||
$(obj).addTag(tags[i],{focus:false,callback:false});
|
|
||||||
}
|
|
||||||
if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
|
|
||||||
{
|
|
||||||
var f = tags_callbacks[id]['onChange'];
|
|
||||||
f.call(obj, obj, tags[i]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
})(jQuery);
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
*= require ./fineuploader.css
|
*= require ./fineuploader.css
|
||||||
*= require ./ui-lightness/jquery-ui-1.8.23.custom.css
|
*= require ./ui-lightness/jquery-ui-1.8.23.custom.css
|
||||||
*= require ./jquery.noty.css
|
*= require ./jquery.noty.css
|
||||||
*= require ./jquery.tagsinput.css
|
*= require ./bootstrap-tokenfield.css
|
||||||
*= require ./noty_theme_twitter.css
|
*= require ./noty_theme_twitter.css
|
||||||
*= require ./sew.css
|
*= require ./sew.css
|
||||||
*= require ./zzz.css
|
*= require ./zzz.css
|
||||||
|
|
|
||||||
209
app/assets/stylesheets/bootstrap-tokenfield.css
vendored
Executable file
209
app/assets/stylesheets/bootstrap-tokenfield.css
vendored
Executable file
|
|
@ -0,0 +1,209 @@
|
||||||
|
/*!
|
||||||
|
* bootstrap-tokenfield
|
||||||
|
* https://github.com/sliptree/bootstrap-tokenfield
|
||||||
|
* Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
|
||||||
|
*/
|
||||||
|
@-webkit-keyframes 'blink' {
|
||||||
|
0% {
|
||||||
|
border-color: #ededed;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
border-color: #b94a48;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-moz-keyframes 'blink' {
|
||||||
|
0% {
|
||||||
|
border-color: #ededed;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
border-color: #b94a48;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes 'blink' {
|
||||||
|
0% {
|
||||||
|
border-color: #ededed;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
border-color: #b94a48;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tokenfield {
|
||||||
|
height: auto;
|
||||||
|
min-height: 34px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
}
|
||||||
|
.tokenfield.focus {
|
||||||
|
border-color: #66afe9;
|
||||||
|
outline: 0;
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||||
|
}
|
||||||
|
.tokenfield .token {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
background-color: #ededed;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin: -1px 5px 5px 0;
|
||||||
|
height: 22px;
|
||||||
|
vertical-align: top;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.tokenfield .token:hover {
|
||||||
|
border-color: #b9b9b9;
|
||||||
|
}
|
||||||
|
.tokenfield .token.active {
|
||||||
|
border-color: #52a8ec;
|
||||||
|
border-color: rgba(82, 168, 236, 0.8);
|
||||||
|
}
|
||||||
|
.tokenfield .token.duplicate {
|
||||||
|
border-color: #ebccd1;
|
||||||
|
-webkit-animation-name: blink;
|
||||||
|
animation-name: blink;
|
||||||
|
-webkit-animation-duration: 0.1s;
|
||||||
|
animation-duration: 0.1s;
|
||||||
|
-webkit-animation-direction: normal;
|
||||||
|
animation-direction: normal;
|
||||||
|
-webkit-animation-timing-function: ease;
|
||||||
|
animation-timing-function: ease;
|
||||||
|
-webkit-animation-iteration-count: infinite;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
.tokenfield .token.invalid {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
-webkit-border-radius: 0;
|
||||||
|
-moz-border-radius: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
border-bottom: 1px dotted #d9534f;
|
||||||
|
}
|
||||||
|
.tokenfield .token.invalid.active {
|
||||||
|
background: #ededed;
|
||||||
|
border: 1px solid #ededed;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.tokenfield .token .token-label {
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
padding-left: 4px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.tokenfield .token .close {
|
||||||
|
font-family: Arial;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 100%;
|
||||||
|
font-size: 1.1em;
|
||||||
|
line-height: 1.49em;
|
||||||
|
margin-left: 5px;
|
||||||
|
float: none;
|
||||||
|
height: 100%;
|
||||||
|
vertical-align: top;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
.tokenfield .token-input {
|
||||||
|
background: none;
|
||||||
|
width: 60px;
|
||||||
|
min-width: 60px;
|
||||||
|
border: 0;
|
||||||
|
height: 20px;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.tokenfield .token-input:focus {
|
||||||
|
border-color: transparent;
|
||||||
|
outline: 0;
|
||||||
|
/* IE6-9 */
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.tokenfield.disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
.tokenfield.disabled .token-input {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.tokenfield.disabled .token:hover {
|
||||||
|
cursor: not-allowed;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
}
|
||||||
|
.tokenfield.disabled .token:hover .close {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.2;
|
||||||
|
filter: alpha(opacity=20);
|
||||||
|
}
|
||||||
|
.has-warning .tokenfield.focus {
|
||||||
|
border-color: #66512c;
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
||||||
|
}
|
||||||
|
.has-error .tokenfield.focus {
|
||||||
|
border-color: #843534;
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||||
|
}
|
||||||
|
.has-success .tokenfield.focus {
|
||||||
|
border-color: #2b542c;
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
||||||
|
}
|
||||||
|
.tokenfield.input-sm,
|
||||||
|
.input-group-sm .tokenfield {
|
||||||
|
min-height: 30px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
}
|
||||||
|
.input-group-sm .token,
|
||||||
|
.tokenfield.input-sm .token {
|
||||||
|
height: 20px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.input-group-sm .token-input,
|
||||||
|
.tokenfield.input-sm .token-input {
|
||||||
|
height: 18px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.tokenfield.input-lg,
|
||||||
|
.input-group-lg .tokenfield {
|
||||||
|
min-height: 45px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
.input-group-lg .token,
|
||||||
|
.tokenfield.input-lg .token {
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
.input-group-lg .token-label,
|
||||||
|
.tokenfield.input-lg .token-label {
|
||||||
|
line-height: 23px;
|
||||||
|
}
|
||||||
|
.input-group-lg .token .close,
|
||||||
|
.tokenfield.input-lg .token .close {
|
||||||
|
line-height: 1.3em;
|
||||||
|
}
|
||||||
|
.input-group-lg .token-input,
|
||||||
|
.tokenfield.input-lg .token-input {
|
||||||
|
height: 23px;
|
||||||
|
line-height: 23px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.tokenfield.rtl {
|
||||||
|
direction: rtl;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.tokenfield.rtl .token {
|
||||||
|
margin: -1px 0 5px 5px;
|
||||||
|
}
|
||||||
|
.tokenfield.rtl .token .token-label {
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto;}
|
|
||||||
div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 3px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica; font-size:13px;}
|
|
||||||
div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px; }
|
|
||||||
div.tagsinput input { width:380px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:3px; background: transparent; color: #000; outline:0px; margin-right:5px; margin-bottom:5px; }
|
|
||||||
div.tagsinput div { display:block; float: left; }
|
|
||||||
.tags_clear { clear: both; width: 100%; height: 0px; }
|
|
||||||
.not_valid {background: #FBD8DB !important; color: #90111A !important;}
|
|
||||||
Loading…
Reference in a new issue