Permalink
Browse files

Merge pull request #2 from pedm/master

interest tags
  • Loading branch information...
2 parents ea4a86a + 1ca783b commit aa516e5aeab5c85acc78c04d87a5b4ecc6da107c @elight elight committed Aug 29, 2011
View
412 app/assets/javascripts/jquery-ui.min.js
412 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
139 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);
View
36 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;
+}
View
3 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
View
6 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>
View
7 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');
+ });
View
3 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

0 comments on commit aa516e5

Please sign in to comment.