From ecef65df5a11d533c49ca45ee76c9db60c31ceb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20=C3=81lvarez=20Medina?= Date: Thu, 27 Jan 2011 18:07:00 +0100 Subject: [PATCH] tag status done --- config/asset_packages.yml | 1 + public/javascripts/admin/table_elements.js | 56 +++++++++++ public/javascripts/plugins/tag-it.js | 110 +++++++++++++++++++++ public/stylesheets/admin/table.css | 18 ++++ 4 files changed, 185 insertions(+) create mode 100755 public/javascripts/plugins/tag-it.js diff --git a/config/asset_packages.yml b/config/asset_packages.yml index 6588f85bda..cfff709dc6 100644 --- a/config/asset_packages.yml +++ b/config/asset_packages.yml @@ -8,6 +8,7 @@ javascripts: - admin/public_tables.js - table: - plugins/jquery.livequery.min.js + - plugins/tag-it.js - plugins/cDBtable.js - admin/table_elements.js - admin/table.js diff --git a/public/javascripts/admin/table_elements.js b/public/javascripts/admin/table_elements.js index 4b55231f1b..6f2fa4d41b 100644 --- a/public/javascripts/admin/table_elements.js +++ b/public/javascripts/admin/table_elements.js @@ -100,7 +100,48 @@ // End table status binding + + + //Change tags + $('div.inner_subheader div.left').append( + ''+ + ''+ + 'Save'+ + ''); + + $('span.tags a.add').click(function(){ + var values = []; + $('span.tags p').each(function(index,element){ + values.push($(element).text()); + }); + $("#tags_list").tagit( + //{availableTags: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]} + {values: values} + ); + $('span.tags_window').show(); + }); + + $('span.tags_window a').click(function(){ + var old_values = []; + $("span.tags p").each(function(index,element){ + old_values.push($(element).text()); + }); + var new_values = ''; + $("span.tags p").remove(); + $("li.tagit-choice").each(function(index,element){ + var value = (($.trim($(element).text())).slice(0, -2)); + $('

'+value+'

').insertBefore('a.add'); + new_values+=value+','; + }); + + $('span.tags_window').hide(); + changesRequest('/update','tags',new_values,old_values); + }); + + + + //Advanced options $('div.inner_subheader div.right').append( ''+ 'advanced'+ @@ -128,6 +169,7 @@ $('body').unbind('click'); } }); + //End advanced options }); @@ -167,6 +209,11 @@ $('div.performing_op').css('margin-left','-'+(width_text/2)+'px'); break; //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + case 'tags': $('div.performing_op p').removeClass('loading').addClass('success').text('Tags changed'); + var width_text = $('div.performing_op p').width(); + $('div.performing_op').css('margin-left','-'+(width_text/2)+'px'); + break; + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// default: } $('div.performing_op').delay(2000).fadeOut(function(){resetLoader()}); @@ -192,6 +239,15 @@ $('section.subheader h2 a').text(old_value); break; //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + case 'tags': $('div.performing_op p').removeClass('loading').addClass('error').text('Impossible to change the tags. Try again later.'); + var width_text = $('div.performing_op p').width(); + $('div.performing_op').css('margin-left','-'+(width_text/2)+'px'); + $("span.tags p").remove(); + $.each(old_value,function(index,element){ + $('

'+element+'

').insertBefore('a.add'); + }); + break; + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// default: } $('div.performing_op').delay(2000).fadeOut(function(){resetLoader()}); diff --git a/public/javascripts/plugins/tag-it.js b/public/javascripts/plugins/tag-it.js new file mode 100755 index 0000000000..bf17879f39 --- /dev/null +++ b/public/javascripts/plugins/tag-it.js @@ -0,0 +1,110 @@ +(function($) { + + $.fn.tagit = function(options) { + + var defaults = { + availableTags: [], + values: [], + getValues: [] + } + + var el = this; + + const BACKSPACE = 8; + const ENTER = 13; + const SPACE = 32; + const COMMA = 44; + + // add the tagit CSS class. + el.addClass("tagit"); + + // create the input field. + var html_input_field = "
    • \n"; + el.html (html_input_field); + + tag_input = el.children(".tagit-new").children(".tagit-input"); + + for (var i = 0; i < options.values.length; i++) { + create_choice(jQuery.trim(options.values[i])); + } + + $(this).click(function(e){ + if (e.target.tagName == 'A') { + // 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. + $(e.target).parent().remove(); + } + 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. + tag_input.focus(); + } + }); + + tag_input.keypress(function(event){ + if (event.which == BACKSPACE) { + if (tag_input.val() == "") { + // When backspace is pressed, the last tag is deleted. + $(el).children(".tagit-choice:last").remove(); + } + } + // Comma/Space/Enter are all valid delimiters for new tags. + else if (event.which == COMMA || event.which == SPACE || event.which == ENTER) { + event.preventDefault(); + + var typed = tag_input.val(); + typed = typed.replace(/,+$/,""); + typed = typed.trim(); + + if (typed != "") { + if (is_new (typed)) { + create_choice (typed); + } + // Cleaning the input. + tag_input.val(""); + } + } + }); + + // tag_input.autocomplete({ + // source: options.availableTags, + // select: function(event,ui){ + // if (is_new (ui.item.value)) { + // create_choice (ui.item.value); + // } + // // Cleaning the input. + // tag_input.val(""); + // + // // Preventing the tag input to be update with the chosen value. + // return false; + // } + // }); + + function is_new (value){ + var is_new = true; + this.tag_input.parents("ul").children(".tagit-choice").each(function(i){ + n = $(this).children("input").val(); + if (value == n) { + is_new = false; + } + }) + return is_new; + } + function create_choice (value){ + var el = ""; + el = "
  • \n"; + el += value + "\n"; + el += "x\n"; + el += "\n"; + el += "
    • \n"; + var li_search_tags = this.tag_input.parent(); + $(el).insertBefore (li_search_tags); + this.tag_input.val(""); + } + }; + + String.prototype.trim = function() { + return this.replace(/^\s+|\s+$/g,""); + }; + +})(jQuery); diff --git a/public/stylesheets/admin/table.css b/public/stylesheets/admin/table.css index bbe7519ee3..07c24a63d3 100644 --- a/public/stylesheets/admin/table.css +++ b/public/stylesheets/admin/table.css @@ -90,6 +90,24 @@ section.subheader span.title_window input[type="submit"] {float:right; width:50p section.subheader span.title_window input[type="submit"]:hover {background-image:-moz-linear-gradient(100% 100% 90deg, #CACBCE, #FFFFFF); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CACBCE), to(#FFFFFF)); cursor:pointer;} +/*Tags list*/ +section.subheader span.tags_window {position:absolute; display:none; left:0; top:35px; min-width:327px; max-width:600px; min-height:28px; padding:0; border:1px solid #000000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background:#131723; -moz-box-shadow: 0 0 50px 1px #222222; +-webkit-box-shadow: 0 0 50px 1px #222222; box-shadow: 0 0 50px 1px #222222;} +section.subheader span.tags_window ul {float:left; min-width:262px; min-height:25px; margin:6px 5px 0 5px; padding:1px 0 0 3px; background:white; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} +section.subheader span.tags_window ul#tags_list li {display: block; float:left; margin:2px 5px 2px 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} +section.subheader span.tags_window ul#tags_list li.tagit-choice {padding:2px 4px 2px; font:normal 12px Arial; background-color:#DEE7F8; border:1px solid #CAD8F3; } +section.subheader span.tags_window ul#tags_list li.tagit-choice:hover {background-color:#bbcef1; border-color:#6d95e0;} +section.subheader span.tags_window ul#tags_list li.tagit-new {padding:0px 4px 1px 0;} +section.subheader span.tags_window ul#tags_list li.tagit-choice input { display:block; float:left; margin:2px 5px 2px 0;} +section.subheader span.tags_window ul#tags_list li.tagit-choice a.close {float:none; width:auto; padding:2px 0 2px 3px!important; font:bold 12px Arial; color:#777777; cursor:pointer; text-decoration:none; text-shadow:none; border:none; background:none;} +section.subheader span.tags_window ul#tags_list li.tagit-choice a.close:hover {color:#333333;} +section.subheader span.tags_window ul#tags_list input[type="text"] {width:120px; margin:0; padding:0; background-color:#FFFFFF; color:#333333; border:none; font:normal 12px Arial;} +section.subheader span.tags_window ul#tags_list input[type="text"]:focus {outline:none;} +section.subheader span.tags_window a {float:right; width:46px; height:14px; margin:5px 5px 5px 0; padding:6px 0; font:bold 12px Arial; color:#333333; text-align:center; border:1px solid #000000; text-decoration:none; text-shadow:0 1px white; + -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-image:-moz-linear-gradient(100% 100% 90deg, #FFFFFF, #CACBCE); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#CACBCE));} +section.subheader span.tags_window a:hover {background-image:-moz-linear-gradient(100% 100% 90deg, #CACBCE, #FFFFFF); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CACBCE), to(#FFFFFF)); cursor:pointer;} + + /*MAP*/ div#map {position:absolute; display:none; top:161px; left:0; right:0; bottom:0; background:white;} \ No newline at end of file