Add view for new rate and JS behaviour for mouse related things

Signed-off-by: Fabio Teixeira <fabio1079@gmail.com> Signed-off-by: Gabriela Navarro <navarro1703@gmail.com>

Add view for new rate and JS behaviour for mouse related things
Signed-off-by: Fabio Teixeira <fabio1079@gmail.com> Signed-off-by: Gabriela Navarro <navarro1703@gmail.com>
Gabriela Navarro
1 parent 2f7c368f
Showing 9 changed files with 133 additions and 1 deletions Show diff stats
plugins/communities_ratings/controllers/communities_ratings_plugin_profile_controller.rb
plugins/communities_ratings/lib/communities_ratings_plugin.rb
plugins/communities_ratings/lib/ext/comments.rb
plugins/communities_ratings/lib/ext/community.rb
plugins/communities_ratings/public/images/star-negative.png
plugins/communities_ratings/public/images/star-positive.png
plugins/communities_ratings/public/rate.js
plugins/communities_ratings/style.css
plugins/communities_ratings/views/communities_ratings_plugin_profile/new_rating.html.erb
@@ -27,6 +27,9 @@ class CommunitiesRatingsPluginProfileController &lt; ProfileController
     end
   end
  
+  def new_rating
+  end
+
   private
  
   # If there is already a rate by the current logged user to this community
@@ -9,4 +9,12 @@ class CommunitiesRatingsPlugin &lt; Noosfero::Plugin
     # FIXME
     _("A plugin that does this and that.")
   end
+
+  def stylesheet?
+    true
+  end
+
+  def js_files
+    'public/rate.js'
+  end
 end
@@ -0,0 +1,6 @@
+require_dependency "comment"
+
+class Comment
+  alias :community :source
+  alias :community= :source=
+end
@@ -2,4 +2,6 @@ require_dependency &#39;community&#39;
  
 Community.class_eval do
   has_many :community_ratings
-end
 \ No newline at end of file
+
+  has_many :comments, :class_name => 'Comment', :foreign_key => 'source_id', :dependent => :destroy, :order => 'created_at asc'
+end
@@ -0,0 +1,66 @@
+(function($, undefined) {
+  "use strict";
+
+  function star_filter(start, end, elements) {
+    var test_regex = undefined;
+
+    if (end >= start) {
+      test_regex = new RegExp("["+(start)+"-"+(end)+"]");
+    } else {
+      test_regex = new RegExp("[]");
+    }
+
+    var result = elements.filter(function(i, element) {
+      var index = parseInt(element.getAttribute("data-star-index"));
+
+      return test_regex.test(index);
+    });
+
+    return result;
+  }
+
+  
+  function set_star_hover_actions() {
+    var star_selected = undefined;
+    
+    $(".star-negative")
+      .on("mouseover", function() {
+        var index = parseInt(this.getAttribute("data-star-index"));
+        var previous_stars = undefined;
+
+        if (star_selected !== undefined) {
+          previous_stars = star_filter(star_selected+1, index, $(".star-negative"));
+        } else {
+          previous_stars = star_filter(0, index, $(".star-negative"));
+        }
+
+        previous_stars.switchClass("star-negative", "star-positive");
+      })
+
+      .on("mouseout", function() {
+        var index = parseInt(this.getAttribute("data-star-index"));
+
+        var previous_stars = undefined;
+
+        if (star_selected !== undefined) {
+          previous_stars = star_filter(star_selected+1, 4, $(".star-positive"));
+        } else { 
+          previous_stars = star_filter(0, index, $(".star-positive"));
+        }
+
+        previous_stars.switchClass("star-positive", "star-negative");
+      })
+
+      .on("click", function() { 
+        var index = parseInt(this.getAttribute("data-star-index"));
+        star_selected = index;
+      });
+
+
+  }
+  
+
+  $(document).ready(function() {
+   set_star_hover_actions();
+  }); 
+}) (jQuery);
@@ -0,0 +1,22 @@
+.star-container {
+  width: 100%;
+  height: 20px;
+}
+
+.star-negative, .star-positive {
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  position: relative;
+  float: left;
+  cursor: pointer;
+}
+
+.star-negative {;
+  background-image: url('public/images/star-negative.png');
+}
+
+.star-positive {;
+  background-image: url('public/images/star-positive.png');
+}
+
@@ -0,0 +1,25 @@
+<div>
+  <div></div>
+
+  <div>
+    <div data-rate-url=<%= url_for controller: "communities_ratings_plugin_profile", :action => "rate" %>>
+      <div class="star-container">
+        <div class="star-negative" data-star-index="0"></div>
+        <div class="star-negative" data-star-index="1"></div>
+        <div class="star-negative" data-star-index="2"></div>
+        <div class="star-negative" data-star-index="3"></div>
+        <div class="star-negative" data-star-index="4"></div>
+      </div>
+
+      <div class="star-action">
+        <button><%= _("Rate") %></button>
+      </div>
+    </div>
+
+    <div>
+      <%= form_for :comments do |c| %>
+
+      <% end %>
+    </div>
+  </div>
+</div>
...	...	@@ -27,6 +27,9 @@ class CommunitiesRatingsPluginProfileController < ProfileController
27	27	end
28	28	end
29	29
	30	+ def new_rating
	31	+ end
	32	+
30	33	private
31	34
32	35	# If there is already a rate by the current logged user to this community
...	...
...	...	@@ -9,4 +9,12 @@ class CommunitiesRatingsPlugin < Noosfero::Plugin
9	9	# FIXME
10	10	_("A plugin that does this and that.")
11	11	end
	12	+
	13	+ def stylesheet?
	14	+ true
	15	+ end
	16	+
	17	+ def js_files
	18	+ 'public/rate.js'
	19	+ end
12	20	end
...	...
...	...	@@ -0,0 +1,6 @@
	1	+require_dependency "comment"
	2	+
	3	+class Comment
	4	+ alias :community :source
	5	+ alias :community= :source=
	6	+end
...	...
...	...	@@ -2,4 +2,6 @@ require_dependency 'community'
2	2
3	3	Community.class_eval do
4	4	has_many :community_ratings
5		-end
6	5	\ No newline at end of file
	6	+
	7	+ has_many :comments, :class_name => 'Comment', :foreign_key => 'source_id', :dependent => :destroy, :order => 'created_at asc'
	8	+end
...	...
...	...	@@ -0,0 +1,66 @@
	1	+(function($, undefined) {
	2	+ "use strict";
	3	+
	4	+ function star_filter(start, end, elements) {
	5	+ var test_regex = undefined;
	6	+
	7	+ if (end >= start) {
	8	+ test_regex = new RegExp("["+(start)+"-"+(end)+"]");
	9	+ } else {
	10	+ test_regex = new RegExp("[]");
	11	+ }
	12	+
	13	+ var result = elements.filter(function(i, element) {
	14	+ var index = parseInt(element.getAttribute("data-star-index"));
	15	+
	16	+ return test_regex.test(index);
	17	+ });
	18	+
	19	+ return result;
	20	+ }
	21	+
	22	+
	23	+ function set_star_hover_actions() {
	24	+ var star_selected = undefined;
	25	+
	26	+ $(".star-negative")
	27	+ .on("mouseover", function() {
	28	+ var index = parseInt(this.getAttribute("data-star-index"));
	29	+ var previous_stars = undefined;
	30	+
	31	+ if (star_selected !== undefined) {
	32	+ previous_stars = star_filter(star_selected+1, index, $(".star-negative"));
	33	+ } else {
	34	+ previous_stars = star_filter(0, index, $(".star-negative"));
	35	+ }
	36	+
	37	+ previous_stars.switchClass("star-negative", "star-positive");
	38	+ })
	39	+
	40	+ .on("mouseout", function() {
	41	+ var index = parseInt(this.getAttribute("data-star-index"));
	42	+
	43	+ var previous_stars = undefined;
	44	+
	45	+ if (star_selected !== undefined) {
	46	+ previous_stars = star_filter(star_selected+1, 4, $(".star-positive"));
	47	+ } else {
	48	+ previous_stars = star_filter(0, index, $(".star-positive"));
	49	+ }
	50	+
	51	+ previous_stars.switchClass("star-positive", "star-negative");
	52	+ })
	53	+
	54	+ .on("click", function() {
	55	+ var index = parseInt(this.getAttribute("data-star-index"));
	56	+ star_selected = index;
	57	+ });
	58	+
	59	+
	60	+ }
	61	+
	62	+
	63	+ $(document).ready(function() {
	64	+ set_star_hover_actions();
	65	+ });
	66	+}) (jQuery);
...	...
...	...	@@ -0,0 +1,22 @@
	1	+.star-container {
	2	+ width: 100%;
	3	+ height: 20px;
	4	+}
	5	+
	6	+.star-negative, .star-positive {
	7	+ width: 20px;
	8	+ height: 20px;
	9	+ background-repeat: no-repeat;
	10	+ position: relative;
	11	+ float: left;
	12	+ cursor: pointer;
	13	+}
	14	+
	15	+.star-negative {;
	16	+ background-image: url('public/images/star-negative.png');
	17	+}
	18	+
	19	+.star-positive {;
	20	+ background-image: url('public/images/star-positive.png');
	21	+}
	22	+
...	...
...	...	@@ -0,0 +1,25 @@
	1	+<div>
	2	+ <div></div>
	3	+
	4	+ <div>
	5	+ <div data-rate-url=<%= url_for controller: "communities_ratings_plugin_profile", :action => "rate" %>>
	6	+ <div class="star-container">
	7	+ <div class="star-negative" data-star-index="0"></div>
	8	+ <div class="star-negative" data-star-index="1"></div>
	9	+ <div class="star-negative" data-star-index="2"></div>
	10	+ <div class="star-negative" data-star-index="3"></div>
	11	+ <div class="star-negative" data-star-index="4"></div>
	12	+ </div>
	13	+
	14	+ <div class="star-action">
	15	+ <button><%= _("Rate") %></button>
	16	+ </div>
	17	+ </div>
	18	+
	19	+ <div>
	20	+ <%= form_for :comments do \|c\| %>
	21	+
	22	+ <% end %>
	23	+ </div>
	24	+ </div>
	25	+</div>
...	...