From c51267136caa272d5205e308ff11d335b4f2cce3 Mon Sep 17 00:00:00 2001 From: "Matt@MBP13-PC" Date: Mon, 23 Jul 2012 10:05:29 -0100 Subject: [PATCH] Upgraded tags datatype to use jQuery tags input plugin gor a nicer UI (still works the same under the hood) --- src/Umbraco.Web.UI/Umbraco.Web.UI.csproj | 10 + .../tags/css/jquery.tagsinput.css | 7 + .../tags/js/jquery.tagsinput.js | 354 ++++++++++++++++++ .../tags/js/jquery.tagsinput.min.js | 1 + .../TagsAutoCompleteHandler.ashx.cs | 18 +- src/umbraco.editorControls/tags/DataEditor.cs | 126 ++----- 6 files changed, 414 insertions(+), 102 deletions(-) create mode 100644 src/Umbraco.Web.UI/umbraco_client/tags/css/jquery.tagsinput.css create mode 100644 src/Umbraco.Web.UI/umbraco_client/tags/js/jquery.tagsinput.js create mode 100644 src/Umbraco.Web.UI/umbraco_client/tags/js/jquery.tagsinput.min.js diff --git a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj index 6f4ac938d7..b2989adbc6 100644 --- a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj +++ b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj @@ -40,6 +40,10 @@ v4.0 true + + + + bin\ @@ -345,6 +349,11 @@ + + + + jquery.tagsinput.js + @@ -1789,6 +1798,7 @@ + diff --git a/src/Umbraco.Web.UI/umbraco_client/tags/css/jquery.tagsinput.css b/src/Umbraco.Web.UI/umbraco_client/tags/css/jquery.tagsinput.css new file mode 100644 index 0000000000..c595e249f9 --- /dev/null +++ b/src/Umbraco.Web.UI/umbraco_client/tags/css/jquery.tagsinput.css @@ -0,0 +1,7 @@ +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: 5px; 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:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; 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;} diff --git a/src/Umbraco.Web.UI/umbraco_client/tags/js/jquery.tagsinput.js b/src/Umbraco.Web.UI/umbraco_client/tags/js/jquery.tagsinput.js new file mode 100644 index 0000000000..dd39357e82 --- /dev/null +++ b/src/Umbraco.Web.UI/umbraco_client/tags/js/jquery.tagsinput.js @@ -0,0 +1,354 @@ +/* + + 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, '>'); + 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 = $('').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 = $(this).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) { + $('').addClass('tag').append( + $('').text(value).append('  '), + $('', { + 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) { + var id = $(this).attr('id'); + var tagslist = $(this).val().split(delimiter[id]); + return (jQuery.inArray(val, tagslist) >= 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'); + if (!id || delimiter[$(this).attr('id')]) { + id = $(this).attr('id', 'tags' + new Date().getTime()).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 = '
'; + + if (settings.interactive) { + markup = markup + ''; + } + + markup = markup + '
'; + + $(markup).insertAfter(this); + + $(data.holder).css('width',settings.width); + $(data.holder).css('min-height',settings.height); + $(data.holder).css('height','100%'); + + 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) { + autocomplete_options = {source: settings.autocomplete_url}; + 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 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/g,">");g.html(h);var i=g.width(),j=i+b.comfortZone>=c?i+b.comfortZone:c,k=f.width(),l=j=c||j>c&&j").css({position:"absolute",top:-9999,left:-9999,width:"auto",fontSize:f.css("fontSize"),fontFamily:f.css("fontFamily"),fontWeight:f.css("fontWeight"),letterSpacing:f.css("letterSpacing"),whiteSpace:"nowrap"}),h=a(this).attr("id")+"_autosize_tester";if(!a("#"+h).length>0){g.attr("id",h);g.appendTo("body")}f.data("minwidth",c);f.data("maxwidth",d);f.data("tester_id",h);f.css("width",c)};a.fn.addTag=function(d,e){e=jQuery.extend({focus:false,callback:true},e);this.each(function(){var f=a(this).attr("id");var g=a(this).val().split(b[f]);if(g[0]==""){g=new Array}d=jQuery.trim(d);if(e.unique){var h=a(g).tagExist(d);if(h==true){a("#"+f+"_tag").addClass("not_valid")}}else{var h=false}if(d!=""&&h!=true){a("").addClass("tag").append(a("").text(d).append("  "),a("",{href:"#",title:"Removing tag",text:"x"}).click(function(){return a("#"+f).removeTag(escape(d))})).insertBefore("#"+f+"_addTag");g.push(d);a("#"+f+"_tag").val("");if(e.focus){a("#"+f+"_tag").focus()}else{a("#"+f+"_tag").blur()}a.fn.tagsInput.updateTagsField(this,g);if(e.callback&&c[f]&&c[f]["onAddTag"]){var i=c[f]["onAddTag"];i.call(this,d)}if(c[f]&&c[f]["onChange"]){var j=g.length;var i=c[f]["onChange"];i.call(this,a(this),g[j-1])}}});return false};a.fn.removeTag=function(d){d=unescape(d);this.each(function(){var e=a(this).attr("id");var f=a(this).val().split(b[e]);a("#"+e+"_tagsinput .tag").remove();str="";for(i=0;i=0};a.fn.importTags=function(b){id=a(this).attr("id");a("#"+id+"_tagsinput .tag").remove();a.fn.tagsInput.importTags(this,b)};a.fn.tagsInput=function(d){var e=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},d);this.each(function(){if(e.hide){a(this).hide()}var d=a(this).attr("id");if(!d||b[a(this).attr("id")]){d=a(this).attr("id","tags"+(new Date).getTime()).attr("id")}var f=jQuery.extend({pid:d,real_input:"#"+d,holder:"#"+d+"_tagsinput",input_wrapper:"#"+d+"_addTag",fake_input:"#"+d+"_tag"},e);b[d]=f.delimiter;if(e.onAddTag||e.onRemoveTag||e.onChange){c[d]=new Array;c[d]["onAddTag"]=e.onAddTag;c[d]["onRemoveTag"]=e.onRemoveTag;c[d]["onChange"]=e.onChange}var g='
';if(e.interactive){g=g+''}g=g+'
';a(g).insertAfter(this);a(f.holder).css("width",e.width);a(f.holder).css("height",e.height);if(a(f.real_input).val()!=""){a.fn.tagsInput.importTags(a(f.real_input),a(f.real_input).val())}if(e.interactive){a(f.fake_input).val(a(f.fake_input).attr("data-default"));a(f.fake_input).css("color",e.placeholderColor);a(f.fake_input).resetAutosize(e);a(f.holder).bind("click",f,function(b){a(b.data.fake_input).focus()});a(f.fake_input).bind("focus",f,function(b){if(a(b.data.fake_input).val()==a(b.data.fake_input).attr("data-default")){a(b.data.fake_input).val("")}a(b.data.fake_input).css("color","#000000")});if(e.autocomplete_url!=undefined){autocomplete_options={source:e.autocomplete_url};for(attrname in e.autocomplete){autocomplete_options[attrname]=e.autocomplete[attrname]}if(jQuery.Autocompleter!==undefined){a(f.fake_input).autocomplete(e.autocomplete_url,e.autocomplete);a(f.fake_input).bind("result",f,function(b,c,f){if(c){a("#"+d).addTag(c[0]+"",{focus:true,unique:e.unique})}})}else if(jQuery.ui.autocomplete!==undefined){a(f.fake_input).autocomplete(autocomplete_options);a(f.fake_input).bind("autocompleteselect",f,function(b,c){a(b.data.real_input).addTag(c.item.value,{focus:true,unique:e.unique});return false})}}else{a(f.fake_input).bind("blur",f,function(b){var c=a(this).attr("data-default");if(a(b.data.fake_input).val()!=""&&a(b.data.fake_input).val()!=c){if(b.data.minChars<=a(b.data.fake_input).val().length&&(!b.data.maxChars||b.data.maxChars>=a(b.data.fake_input).val().length))a(b.data.real_input).addTag(a(b.data.fake_input).val(),{focus:true,unique:e.unique})}else{a(b.data.fake_input).val(a(b.data.fake_input).attr("data-default"));a(b.data.fake_input).css("color",e.placeholderColor)}return false})}a(f.fake_input).bind("keypress",f,function(b){if(b.which==b.data.delimiter.charCodeAt(0)||b.which==13){b.preventDefault();if(b.data.minChars<=a(b.data.fake_input).val().length&&(!b.data.maxChars||b.data.maxChars>=a(b.data.fake_input).val().length))a(b.data.real_input).addTag(a(b.data.fake_input).val(),{focus:true,unique:e.unique});a(b.data.fake_input).resetAutosize(e);return false}else if(b.data.autosize){a(b.data.fake_input).doAutosize(e)}});f.removeWithBackspace&&a(f.fake_input).bind("keydown",function(b){if(b.keyCode==8&&a(this).val()==""){b.preventDefault();var c=a(this).closest(".tagsinput").find(".tag:last").text();var d=a(this).attr("id").replace(/_tag$/,"");c=c.replace(/[\s]+x$/,"");a("#"+d).removeTag(escape(c));a(this).trigger("focus")}});a(f.fake_input).blur();if(f.unique){a(f.fake_input).keydown(function(b){if(b.keyCode==8||String.fromCharCode(b.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)){a(this).removeClass("not_valid")}})}}});return this};a.fn.tagsInput.updateTagsField=function(c,d){var e=a(c).attr("id");a(c).val(d.join(b[e]))};a.fn.tagsInput.importTags=function(d,e){a(d).val("");var f=a(d).attr("id");var g=e.split(b[f]);for(i=0;i(); while (rr.Read()) { - context.Response.Write(rr.GetString("tag") + Environment.NewLine); + tagList.Add(rr.GetString("tag")); } - + context.Response.Write(returnJson + ? new JavaScriptSerializer().Serialize(tagList) + : string.Join(Environment.NewLine, tagList)); } catch (Exception ex) { diff --git a/src/umbraco.editorControls/tags/DataEditor.cs b/src/umbraco.editorControls/tags/DataEditor.cs index 93f2415b2c..a6bd91ceaf 100644 --- a/src/umbraco.editorControls/tags/DataEditor.cs +++ b/src/umbraco.editorControls/tags/DataEditor.cs @@ -1,5 +1,6 @@ using System; using System.Collections; +using System.Linq; using System.Web.UI; using System.Web.UI.WebControls; using umbraco.BusinessLogic; @@ -24,7 +25,6 @@ namespace umbraco.editorControls.tags _group = Prevalues["group"].ToString(); } - public CheckBoxList tagCheckList = new CheckBoxList(); public TextBox tagBox = new TextBox(); @@ -32,49 +32,32 @@ namespace umbraco.editorControls.tags public void Save() { - - CheckBoxList items = tagCheckList; int _nodeID; int.TryParse(_data.NodeId.ToString(), out _nodeID); string allTags = ""; - int tagId = 0; - //first clear out all items associated with this ID... umbraco.cms.businesslogic.Tags.Tag.RemoveTagsFromNode(_nodeID, _group); - //and now we add them again... - foreach (ListItem li in items.Items) + var items = tagBox.Text.Trim().Split(','); + foreach (var item in items) { - if (li.Selected) + var tagName = item.Trim(); + if(string.IsNullOrEmpty(tagName)) + continue; + + var tagId = cms.businesslogic.Tags.Tag.GetTagId(tagName, _group); + if(tagId == 0) + tagId = cms.businesslogic.Tags.Tag.AddTag(tagName, _group); + + if (tagId > 0) { - - if (li.Value == "0") - { - // NH 4.7.1 if a tag doesn't have an id associated we'll do a 2nd check in case the XHR request went wrong - // from Codeplex 30151 - tagId = cms.businesslogic.Tags.Tag.GetTagId(li.Text, _group); - if (tagId == 0) - tagId = cms.businesslogic.Tags.Tag.AddTag(li.Text, _group); - li.Value = tagId.ToString(); - } - else - { - int.TryParse(li.Value, out tagId); - } - - if (tagId > 0) - { - - umbraco.cms.businesslogic.Tags.Tag.AssociateTagToNode(_nodeID, tagId); - - tagId = 0; - allTags += "," + li.Text; - } + umbraco.cms.businesslogic.Tags.Tag.AssociateTagToNode(_nodeID, tagId); } } + //and just in case, we'll save the tags as plain text on the node itself... - _data.Value = allTags.Trim().Trim(','); + _data.Value = tagBox.Text; } public bool ShowLabel @@ -87,44 +70,6 @@ namespace umbraco.editorControls.tags get { return false; } } - public void tagBoxTextChange(object sender, EventArgs e) - { - try - { - if (tagBox.Text.Trim().Length > 0) - { - CheckBoxList items = tagCheckList; - - string[] tags = tagBox.Text.Trim().Trim(',').Split(','); - - - for (int i = 0; i < tags.Length; i++) - { - //if not found we'll get zero and handle that onsave instead... - int id = getTagId(tags[i], _group); - - //we don't want 2 of a kind... - if (items.Items.FindByText(tags[i].Trim()) == null) - { - ListItem li = new ListItem(tags[i], id.ToString()); - li.Selected = true; - items.Items.Add(li); - } - } - - //reset the textbox - tagBox.Text = ""; - - ScriptManager.GetCurrent(Page).SetFocus(tagBox); - } - - } - catch (Exception ex) - { - Log.Add(LogTypes.Debug, -1, ex.ToString()); - } - } - [Obsolete("use the umbraco.cms.businesslogic.Tags.Tag class instead")] public int getTagId(string tag, string group) @@ -137,9 +82,14 @@ namespace umbraco.editorControls.tags { base.OnInit(e); - ClientDependencyLoader.Instance.RegisterDependency("Application/JQuery/jquery.autocomplete.js", "UmbracoClient", ClientDependencyType.Javascript); + //ClientDependencyLoader.Instance.RegisterDependency("Application/JQuery/jquery.autocomplete.js", "UmbracoClient", ClientDependencyType.Javascript); + ClientDependencyLoader.Instance.RegisterDependency("ui/ui-lightness/jquery-ui.custom.css", "UmbracoClient", ClientDependencyType.Css); ClientDependencyLoader.Instance.RegisterDependency("css/umbracoGui.css", "UmbracoRoot", ClientDependencyType.Css); + ClientDependencyLoader.Instance.RegisterDependency("tags/css/jquery.tagsinput.css", "UmbracoClient", ClientDependencyType.Css); + ClientDependencyLoader.Instance.RegisterDependency("tags/js/jquery.tagsinput.min.js", "UmbracoClient", ClientDependencyType.Javascript); + + string _alias = ((umbraco.cms.businesslogic.datatype.DefaultData)_data).PropertyId.ToString(); //making sure that we have a ID for context @@ -163,41 +113,23 @@ namespace umbraco.editorControls.tags } } - - tagBox.ID = "tagBox_" + _alias; - tagBox.AutoPostBack = true; - tagBox.AutoCompleteType = AutoCompleteType.Disabled; - tagBox.TextChanged += new System.EventHandler(this.tagBoxTextChange); - tagBox.CssClass = "umbEditorTextField"; - - Button tagButton = new Button(); - tagButton.Click += new System.EventHandler(this.tagBoxTextChange); - tagButton.Text = "tag"; - - - tagCheckList.ID = "tagCheckList_" + _alias; + tagBox.ID = "tagBox2_" + _alias; + tagBox.CssClass = "umbEditorTextField umbTagBox"; if (!String.IsNullOrEmpty(pageId)) { var tags = umbraco.cms.businesslogic.Tags.Tag.GetTags(int.Parse(pageId), _group); - foreach (var t in tags) - { - ListItem li = new ListItem(t.TagCaption, t.Id.ToString()); - li.Selected = true; - tagCheckList.Items.Add(li); - } + tagBox.Text = string.Join(",", tags.Select(x => x.TagCaption)); } this.ContentTemplateContainer.Controls.Add(tagBox); - this.ContentTemplateContainer.Controls.Add(tagButton); - this.ContentTemplateContainer.Controls.Add(tagCheckList); string tagsAutoCompleteScript = - "jQuery(\"#" - + tagBox.ClientID + "\").autocomplete(\"" - + umbraco.IO.IOHelper.ResolveUrl(umbraco.IO.SystemDirectories.Umbraco) - + "/webservices/TagsAutoCompleteHandler.ashx\",{minChars: 2,max: 100, extraParams:{group:\"" + _group + "\",id:\"" + pageId + "\",rnd:\"" + DateTime.Now.Ticks + "\"}}).result(function(e, data){jQuery(\"#" + tagButton.ClientID + "\").trigger('click');});"; + "jQuery('.umbTagBox').tagsInput({ width: '400px', defaultText: 'Add a tag', minChars: 2, autocomplete_url: '" + + umbraco.IO.IOHelper.ResolveUrl(umbraco.IO.SystemDirectories.Umbraco) + + "/webservices/TagsAutoCompleteHandler.ashx?group=" + _group + "&id=" + pageId + "&rnd=" + + DateTime.Now.Ticks + "&format=json' });"; string tagsAutoCompleteInitScript = @@ -210,10 +142,8 @@ namespace umbraco.editorControls.tags if (Page.IsPostBack) { ScriptManager.RegisterClientScriptBlock(this, GetType(), ClientID + "_tags", tagsAutoCompleteScript, true); - } - } #endregion