Permalink
Browse files

hexagon click submits rgbs

  • Loading branch information...
1 parent c91bfc7 commit b25d9df889e35cd3426ba127c7e913ab0cd6e0d2 @juliamae juliamae committed Sep 17, 2009
@@ -1,2 +1,3 @@
-<%= javascript_include_tag :all, :cache => true %>
+<%= javascript_include_tag "jquery", "application", :cache => true %>
<%= yield :javascript %>
+
@@ -1,9 +1,13 @@
<% if logged_in? %>
- <% form_for @user.moods.build do |f| %>
- <p><%= image_submit_tag 'colorwheel.jpg' %></p>
- <% end %>
-
- <% if current_user.subscribes_to?(@user) %>
+ <div id="picker" style="padding: 100px;">
+ <% form_for @user.moods.build do |f| %>
+ <%= f.hidden_field :red %>
+ <%= f.hidden_field :green %>
+ <%= f.hidden_field :blue %>
+ <%= image_submit_tag 'hexagon.jpg', :id => "hexagon" %>
+ <% end %>
+ </div>
+ <% if current_user.subscribes_to?(@user) %>
<% form_for [@user, current_user.subscription_for(@user)] do |f| %>
<p><%= submit_tag 'Unsubscribe' %></p>
<% end %>
Deleted file not rendered
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -1,2 +1,86 @@
-// Place your application-specific JavaScript functions and classes here
-// This file is automatically included by javascript_include_tag :defaults
+$.fn.element_location = function() {
+ var curleft = 0;
+ var curtop = 0;
+ var obj = this;
+
+ do {
+ curleft += obj.attr('offsetLeft');
+ curtop += obj.attr('offsetTop');
+
+ obj = obj.offsetParent();
+ } while ( obj.attr('tagName') != 'BODY' );
+
+ return ( {x:curleft, y:curtop} );
+};
+
+$.fn.offset_within_element = function( event ) {
+ var obj = this;
+ var offset = obj.element_location();
+
+ return ( {
+ x: ( event.pageX - offset.x ),
+ y: ( event.pageY - offset.y ) } );
+};
+
+$.fn.FeelingWheel = function( corner_coordinates, form ) {
+ var obj = this;
+ var RGBs = {
+ purple: { red: 128, green: 0, blue: 128 },
+ red: { red: 255, green: 0, blue: 0 },
+ orange: { red: 255, green: 165, blue: 0 },
+ blue: { red: 0, green: 0, blue: 255 },
+ green: { red: 0, green: 192, blue: 0 },
+ yellow: { red: 255, green: 255, blue: 0 }
+ };
+
+ var in_triangle = function(coords, corners) {
+ var corner_a = corners[0];
+ var corner_b = corners[1];
+ var corner_c = corners[2];
+
+ return (
+ aboveness(coords, corner_a, corner_b) *
+ aboveness(coords, corner_b, corner_c) > 0 &&
+ aboveness(coords, corner_b, corner_c) *
+ aboveness(coords, corner_c, corner_a) > 0
+ )
+ };
+
+ // a & b: endpoints of the line
+ var aboveness = function(coords, a, b) {
+ return (
+ ( coords.y - a[1] ) *
+ ( b[0] - a[0] ) -
+ ( coords.x - a[0] ) *
+ ( b[1] - a[1] )
+ )
+ }
+
+ obj.click(function( event ) {
+ var coords = $(event.target).offset_within_element( event );
+
+ $.each( corner_coordinates,
+ function( color, corners ) {
+ if (in_triangle( coords, corners )){
+ $("#mood_red").val( RGBs[color].red );
+ $("#mood_green").val( RGBs[color].green );
+ $("#mood_blue").val( RGBs[color].blue );
+
+ form.submit();
+ }
+ });
+ });
+};
+
+var triangles = {
+ purple: [ [1, 129], [77, 5], [150, 129] ],
+ red: [ [77, 5], [150, 129], [222, 5] ],
+ orange: [ [150, 129], [222, 5], [297, 129] ],
+ blue: [ [1, 129], [77, 257], [150, 129] ],
+ green: [ [77, 257], [150, 129], [222, 257] ],
+ yellow: [ [150, 129], [222, 257], [297, 129] ]
+};
+
+$(function() {
+ $("#hexagon").FeelingWheel( triangles, $("#picker form") );
+});

0 comments on commit b25d9df

Please sign in to comment.