Merge pull request #2 from pedm/master

interest tags

app/assets/javascripts/jquery.tagify.js

@@ -0,0 +1,139 @@
+/* Author: Alicia Liu */
+
+(function ($) {
+
+	$.widget("ui.tagify", {
+		options: {
+			delimiters: [13, 188],          // what user can type to complete a tag in char codes: [enter], [comma]
+			outputDelimiter: ',',           // delimiter for tags in original input field
+			cssClass: 'tagify-container',   // CSS class to style the tagify div and tags, see stylesheet
+			addTagPrompt: 'add tags'        // placeholder text
+		},
+
+		_create: function() {
+			var self = this,
+				el = self.element,
+				opts = self.options;
+
+			this.tags = [];
+
+			// hide text field and replace with a div that contains it's own input field for entering tags
+			this.tagInput = $("<input type='text'>")
+				.attr( 'placeholder', opts.addTagPrompt )
+				.keypress( function(e) {
+					var $this = $(this),
+					    pressed = e.which;
+
+					for ( i in opts.delimiters ) {
+
+						if (pressed == opts.delimiters[i]) {
+							self.add( $this.val() );
+							return false;
+						}
+					}
+
+					// if backspace is hit with no input, remove the last tag
+					if (pressed == 8) { // backspace
+						if ( $this.val() == "" ) {
+							self.remove();
+							return false;
+						}
+						return;
+					}
+
+				});
+
+			this.tagDiv = $("<div></div>")
+			    .addClass( opts.cssClass )
+			    .click( function() {
+			        $(this).children('input').focus();
+			    })
+			    .append( this.tagInput )
+				.insertAfter( el.hide() );
+
+			// if the field isn't empty, parse the field for tags, and prepopulate existing tags
+			var initVal = el.val();
+
+			if ( initVal ) {
+				var initTags = initVal.split( opts.outputDelimiter );
+				$.each( initTags, function(i, tag) {
+				    self.add( tag );
+				});
+			}
+		},
+
+		_setOption: function( key, value ) {
+			options.key = value;
+		},
+
+		// add a tag, public function		
+		add: function(text) {
+    		var self = this;
+			text = text || self.tagInput.val();
+			if (text) {
+				var self = this;
+				var tagIndex = self.tags.length;
+
+				var removeButton = $("<a href='#'>x</a>")
+					.click( function() {
+						self.remove( tagIndex );
+						return false;
+					});
+				var newTag = $("<span></span>")
+					.text( text )
+					.append( removeButton );
+
+				self.tagInput.before( newTag );
+				self.tags.push( text );
+				self.tagInput.val('');
+			}
+		},
+
+		// remove a tag by index, public function
+		// if index is blank, remove the last tag
+		remove: function( tagIndex ) {
+			var self = this;
+			if ( tagIndex == null  || tagIndex === (self.tags.length - 1) ) {
+				this.tagDiv.children("span").last().remove();
+				self.tags.pop();
+			}
+			if ( typeof(tagIndex) == 'number' ) {
+				// otherwise just hide this tag, and we don't mess up the index
+				this.tagDiv.children( "span:eq(" + tagIndex + ")" ).hide();
+				 // we rely on the serialize function to remove null values
+				delete( self.tags[tagIndex] );
+			}
+		},
+
+		// serialize the tags with the given delimiter, and write it back into the tagified field
+		serialize: function() {
+			var self = this;
+			var delim = self.options.outputDelimiter;
+			var tagsStr = self.tags.join( delim );
+
+			// our tags might have deleted entries, remove them here
+			var dupes = new RegExp(delim + delim + '+', 'g'); // regex: /,,+/g
+			var ends = new RegExp('^' + delim + '|' + delim + '$', 'g');  // regex: /^,|,$/g
+			var outputStr = tagsStr.replace( dupes, delim ).replace(ends, '');
+
+			self.element.val(outputStr);
+			return outputStr;
+		},
+
+		inputField: function() {
+		    return this.tagInput;
+		},
+
+		containerDiv: function() {
+		    return this.tagDiv;
+		},
+
+		// remove the div, and show original input
+		destroy: function() {
+		    $.Widget.prototype.destroy.apply(this);
+			this.tagDiv.remove();
+			this.element.show();
+		},
+	});
+
+})(jQuery);

app/assets/stylesheets/tagify-style.css

@@ -0,0 +1,36 @@
+/* Tagify styles 
+Author: Alicia Liu
+*/
+
+.tagify-container {
+    width: 300px;
+    height: 100px;
+    border: 1px solid #CCC;
+    background-color: #FFF;
+    border-radius: 2px;
+    font-family: Verdana, sans-serif;
+    font-size: 12px;
+    overflow: auto;
+}
+.tagify-container > span {
+    display: inline-block;
+    padding: 3px 5px;
+    margin: 3px;
+    border-radius: 2px;
+    border: 1px solid #EEE;
+    background-color: #FFEBA1;
+    color: #888;
+}
+.tagify-container > span > a {
+    padding-left: 5px;
+    color: #EB7E14;
+    text-decoration: none;
+    font-weight: bold;
+}
+.tagify-container > input {
+    border: 0 none;
+    width: 100px;
+}
+.tagify-container > input:focus {
+    outline: none;
+}

app/helpers/profiles_helper.rb

@@ -1,2 +1,5 @@
 module ProfilesHelper
+  def link_terms_to_search(term)
+    link_to term, :controller => "home", :action => "search", :utf8 =>  "&x2713;", :query => "#{term.split(" ").map{|x| x.strip}.join("+")}"
+  end
 end

app/views/layouts/application.html.erb

@@ -3,10 +3,15 @@
   <head>
     <title><%= yield(:title) || "RubyPair.com" %></title>
     <%= stylesheet_link_tag :application %>
+	<%= stylesheet_link_tag :"tagify-style" %>
+
     <!--[if IE]>
         <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
     <![endif]-->
+
     <%= javascript_include_tag :application %>
+
+	
     <%= csrf_meta_tag %>
     <%= yield(:head) %>
   </head>
@@ -39,5 +44,6 @@
         <%= yield %>
       </div>
     </div>
+
   </body>
 </html>

app/views/users/edit.html.haml

@@ -7,7 +7,12 @@
     = f.label :remote_local_preference, "Pairing in person, remotely, or both?"
     = f.select :remote_local_preference, User::REMOTE_LOCAL_PREFERENCES
   %p
-    = f.label :interests, "Describe your pairing interests"
+    = f.label :interests, "Describe your pairing interests (click enter after each tag)"
     = f.text_area :interests
   %p
     = f.submit
+:javascript
+  $('#user_interests').tagify({addTagPrompt: 'add tags'});
+  $('form').submit( function() {
+    $('#user_interests').tagify('serialize');
+    });

app/views/users/show.html.haml

@@ -22,4 +22,5 @@
       = @user.remote_local_preference
     %li.interests
       %label Interests
-      = @user.interests
+      - @user.interests.split(",").each do |term|
+        = link_terms_to_search term