From 859bb0badc648c92205a7e5220e92b05fe98633d Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Wed, 8 Apr 2015 14:58:33 -0300
Subject: [PATCH] Option to display group of questions into menu

---
 lib/pairwise_plugin/questions_group_list_block.rb                        | 23 +++++++++++++----------
 public/style.css                                                         | 44 ++++++++++++++++++++++++++++++++++++++++++--
 views/blocks/questions_group_menu.html.erb                               | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 views/box_organizer/pairwise_plugin/_questions_group_list_block.html.erb |  6 +++++-
 4 files changed, 133 insertions(+), 13 deletions(-)
 create mode 100644 views/blocks/questions_group_menu.html.erb

diff --git a/lib/pairwise_plugin/questions_group_list_block.rb b/lib/pairwise_plugin/questions_group_list_block.rb
index 258d1ab..a97f2f4 100644
--- a/lib/pairwise_plugin/questions_group_list_block.rb
+++ b/lib/pairwise_plugin/questions_group_list_block.rb
@@ -9,8 +9,11 @@ class PairwisePlugin::QuestionsGroupListBlock < Block
   end
 
   settings_items :group_description, :type => String
+  settings_items :view_type, :type => String, :default => 'menu'
 
-  attr_accessible :group_description, :questions_ids, :random_sort
+  attr_accessible :group_description, :questions_ids, :random_sort, :view_type
+
+  AVAILABLE_VIEW_TYPES = [[_('Menu'), 'menu'], [_('List'), 'list']]
 
   def content(args={})
     block = self
@@ -20,7 +23,7 @@ class PairwisePlugin::QuestionsGroupListBlock < Block
     #  content += ( question ? article_to_html(question,:gallery_view => false, :format => 'full').html_safe : _('No Question selected yet.') )
     #end
     proc do
-      render :file => 'blocks/questions_group_list', :locals => {:block => block}
+      render :file => "blocks/questions_group_#{block.view_type}", :locals => {:block => block}
     end
   end
 
@@ -38,8 +41,8 @@ class PairwisePlugin::QuestionsGroupListBlock < Block
 
   def contains_question?(id)
     if self.settings[:questions_ids]
-      self.settings[:questions_ids].include?(id.to_s) 
-    else 
+      self.settings[:questions_ids].include?(id.to_s)
+    else
       return false
     end
   end
@@ -94,19 +97,19 @@ class PairwisePlugin::QuestionsGroupListBlock < Block
     conditions = {}
     if questions_ids && !questions_ids.empty?
       questions_ids.each do |id|
-        if self.owner.kind_of?(Environment) 
-          question = self.owner.portal_community.questions.find(id) 
+        if self.owner.kind_of?(Environment)
+          question = self.owner.portal_community.questions.find(id)
         else
           question = self.owner.questions.find(id)
-        end          
+        end
         result << question
-      end     
+      end
       conditions = { :conditions => ['id not in (?)', questions_ids] }
     end
 
-    if self.owner.kind_of?(Environment) 
+    if self.owner.kind_of?(Environment)
       result += self.owner.portal_community.questions.find(:all, conditions)
-    else 
+    else
       result += self.owner.questions.find(:all, conditions)
     end
     result
diff --git a/public/style.css b/public/style.css
index 6afa17e..41b102f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -421,8 +421,8 @@ div.pairwise_group_list_container {
 }
 
 div.pairwise_group_list_container .row {
-    font-size: 14px;
-    height: 40px;
+  font-size: 14px;
+  height: 40px;
 	width:100%;
 	background-color: #F8C300;
   vertical-align: middle;
@@ -432,6 +432,46 @@ div.pairwise_group_list_container .row {
   cursor: auto;
 }
 
+div.pairwise_group_menu_container .row {
+  cursor: auto;
+  font-weight: bold;
+}
+div.pairwise_group_menu_container .row.secondary {
+  font-weight: normal;
+}
+div.pairwise_group_menu_container .questions-menu .menu-icon {
+  float: right;
+  font-size: 16px;
+}
+div.pairwise_group_menu_container .questions-menu .icon-label {
+  float: right;
+}
+div.pairwise_group_menu_container .questions-menu .icon-bar {
+  background-color: rgb(100, 100, 100);
+  display: block;
+  width: 1.125em;
+  height: 0.125em;
+  border-radius: 1px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+  margin: 3px;
+}
+div.pairwise_group_menu_container .questions-menu .menu {
+  position: absolute;
+  background-color: rgb(247, 247, 247);
+  width: 96%;
+  z-index: 999;
+  padding: 10px;
+  top: 45px;
+  box-shadow: -5px 7px 10px #888888;
+}
+div.pairwise_group_menu_container .questions-menu .menu .item a {
+  text-decoration: none;
+}
+div.pairwise_group_menu_container .questions-menu .menu .label {
+  color: rgb(175, 175, 175);
+  margin-bottom: 10px;
+}
+
 div.pairwise_group_list_container .row p {
 	line-height: 30px;
     margin: auto;
diff --git a/views/blocks/questions_group_menu.html.erb b/views/blocks/questions_group_menu.html.erb
new file mode 100644
index 0000000..c2d0ed9
--- /dev/null
+++ b/views/blocks/questions_group_menu.html.erb
@@ -0,0 +1,73 @@
+<% extend PairwisePlugin::Helpers::ViewerHelper %>
+<% questions = block.questions_for_view || [] %>
+
+<%= block_title(block.title) %>
+
+<div id='pairwise_group_list_block_<%= block.id %>' class="pairwise_group_menu_container" data-open-prompt="0">
+  <div class="description">
+    <%= block.group_description %>
+  </div>
+
+
+  <div class="questions-menu clearfix">
+    <span class="menu-icon">
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </span>
+    <span class="icon-label"><%= _('Select theme') %></span>
+    <div class="menu" style="display: none">
+      <div class="label">
+        <%= _('Select a theme:') %>
+      </div>
+      <div class="items">
+        <% questions.each_with_index do |pairwise_content, index| %>
+          <div class="item <%= pairwise_group_row_classes(index) %>">
+            <a href="#"><%= pairwise_content.name %></a>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+	<div class="question container">
+    <% if block.questions.nil?  || block.questions.empty? %>
+      <span><%= _("Empty") %></span>
+    <% else %>
+      <% questions.each_with_index do |pairwise_content, index| %>
+        <%= pairwise_group_content_body(index, pairwise_content) %>
+      <% end %>
+    <% end %>
+	</div>
+</div>
+
+<script type="text/javascript">
+  jQuery(document).ready(function($){
+    $('.pairwise_group_menu_container .questions-menu .menu-icon').click(function() {
+      $(this).siblings('.menu').toggle('fast');
+    });
+    $('.pairwise_group_menu_container .questions-menu .items .row').click(function() {
+      $('.pairwise_group_menu_container .questions-menu .menu').hide('fast');
+    });
+  });
+
+// FIXME move to js file
+jQuery(document).ready(function($){
+	var block_id = '#pairwise_group_list_block_<%= block.id %>';
+	var block_element = $(block_id);
+	var questions_arrows = $(block_id + ' .arrow');
+	var questions_rows = $(block_id + ' .row');
+	var questions_bodies = $(block_id + ' .pairwise_inner_body');
+	questions_rows.click(function(){
+		var current_open =  parseInt(block_element.attr('data-open-prompt'));
+		var index_clicked = questions_rows.index(this);
+		if(index_clicked != current_open){
+			block_element.attr('data-open-prompt', index_clicked);
+			$(questions_bodies[current_open]).slideToggle();
+			$(questions_rows[current_open]).toggleClass("secondary");
+
+			$(questions_bodies[index_clicked]).slideToggle();
+			$(questions_rows[index_clicked]).toggleClass("secondary");
+		}
+	});
+});
+</script>
diff --git a/views/box_organizer/pairwise_plugin/_questions_group_list_block.html.erb b/views/box_organizer/pairwise_plugin/_questions_group_list_block.html.erb
index b5e8975..963f676 100644
--- a/views/box_organizer/pairwise_plugin/_questions_group_list_block.html.erb
+++ b/views/box_organizer/pairwise_plugin/_questions_group_list_block.html.erb
@@ -11,12 +11,16 @@
     <h3> <%= _('Description:') %> </h3>
     <%= text_area(:block, :group_description, :rows => 6, :cols => 50) %>
   </div>
+  <div class="view-type">
+    <h3> <%= _('Choose a view type:') %> </h3>
+    <%= select_tag "block[view_type]", options_for_select(PairwisePlugin::QuestionsGroupListBlock::AVAILABLE_VIEW_TYPES, @block.view_type) %>
+  </div>
   <div id="questions_content" %>
     <h3> <%= _('Choose which attributes should be displayed and drag to reorder them:') %> </h3>
     <ul id="pairwise_questions_list">
       <% questions.each do |question| %>
         <li>
-          <%=  
+          <%=
             check_box_tag( "block[questions_ids][]", question.id, @block.settings[:questions_ids] && @block.settings[:questions_ids].include?(question.id.to_s), :id => "pairwise_question_#{question.id}" ) +
             content_tag( 'label', question.name, :for => "pairwise_question_#{question.id}" )
           %>
--
libgit2 0.21.2