From ac12c2a9ae57ef59dfe11bac10519d547f8b77c5 Mon Sep 17 00:00:00 2001
From: Connor Turland <connor@madhattertech.ca>
Date: Sun, 9 Feb 2014 18:54:45 -0500
Subject: [PATCH] added ability to change metacode. updated bottom left menu
 with icon, upper right menu with hover states

---
 .../images/MMCCicon_maximize_arrow_black.png  | Bin 0 -> 284 bytes
 .../images/MMCCicon_minimize_arrow_black.png  | Bin 0 -> 264 bytes
 app/assets/images/beta_gen002.png             | Bin 0 -> 3642 bytes
 .../javascripts/Jit/onCreateLabelHandler.js   |  77 +++++++--------
 app/assets/javascripts/application.js         |  31 ++++--
 app/assets/stylesheets/application.css        |  16 ++-
 app/assets/stylesheets/base.css               |  53 +++++++++-
 app/assets/stylesheets/topics.css.scss        |  92 ------------------
 app/controllers/topics_controller.rb          |   6 +-
 app/views/main/_metacodeoptions.html.erb      |  16 +++
 app/views/maps/show.html.erb                  |   1 +
 app/views/topics/show.html.erb                |  14 +--
 12 files changed, 153 insertions(+), 153 deletions(-)
 create mode 100644 app/assets/images/MMCCicon_maximize_arrow_black.png
 create mode 100644 app/assets/images/MMCCicon_minimize_arrow_black.png
 create mode 100644 app/assets/images/beta_gen002.png
 create mode 100644 app/views/main/_metacodeoptions.html.erb

diff --git a/app/assets/images/MMCCicon_maximize_arrow_black.png b/app/assets/images/MMCCicon_maximize_arrow_black.png
new file mode 100644
index 0000000000000000000000000000000000000000..5196c38e88d5fe5a5ddc09bc57aae51e09e6f959
GIT binary patch
literal 284
zcmV+%0ptFOP)<h;3K|Lk000e1NJLTq0018V000>X1^@s6$@ldn0002vNkl<Zc-muN
z7zLwX6pR8o0TCb$rIK0cK+Hvo1}`A~1H|hnu#^*sw*v8BAhse!<9Z<e55>=b*oj1o
zLxA`#k{MHo)hLLh2^seTF&hEB+(0}Ji{8&b%t5RJVuAQQ7DH|Vu>lS}jzIhXi=L-I
z>_cjt2?6l|9HCH-6bc~UHsVmX35fa0O*D)^TmZyBu^4;;h;4xQ92U8cK%7FYtj7Zl
z@_#sd2*aS1eF>_b>R=KO|Hff4D0EtAT>vQo@hc=t|3MQK7rjbARv=ykwY(RIS?FB^
igA$|gXiYQ<$OQmEomXXsPlYuA0000<MNUMnLSTZ@=V;LY

literal 0
HcmV?d00001

diff --git a/app/assets/images/MMCCicon_minimize_arrow_black.png b/app/assets/images/MMCCicon_minimize_arrow_black.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb1a83b78b03d21c851d0616672f605e9e6abf04
GIT binary patch
literal 264
zcmV+j0r&oiP)<h;3K|Lk000e1NJLTq0018V000>X1^@s6$@ldn0002bNkl<Zc-muN
z7zLwX6bwSp3&fv*xPqRR$^h|2ApQ@<e}VWk5OdJl;&LGViexb|{s6=|w6K&Di1$N%
z`5zDd1H_x5>L~_{KpYOl->_J81&HH-_#PIymq6@KiN(A?ya<O6Cj&7TRGk12&%>jR
zn^cS4psq(Z>@g5K;?NV0L(eTBHYe6%Q5?QlPefeu1MyxgdcTtr0y~g2z6at^5<?D@
z>c1eFF`pF8{?L?thJrN111%5!0kIt^8YO`^gG$-76Y7vrFbYP&zyknQ&{uSP$2htG
O0000<MNUMnLSTXkvS|(g

literal 0
HcmV?d00001

diff --git a/app/assets/images/beta_gen002.png b/app/assets/images/beta_gen002.png
new file mode 100644
index 0000000000000000000000000000000000000000..550e9e4b89a35f86b0308df6f17127352f9b622e
GIT binary patch
literal 3642
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
M07*qoM6N<$f;$$|IRF3v

literal 0
HcmV?d00001

diff --git a/app/assets/javascripts/Jit/onCreateLabelHandler.js b/app/assets/javascripts/Jit/onCreateLabelHandler.js
index da7fe18d..05cdff82 100644
--- a/app/assets/javascripts/Jit/onCreateLabelHandler.js
+++ b/app/assets/javascripts/Jit/onCreateLabelHandler.js
@@ -27,11 +27,11 @@ function generateShowcardHTML() {
         </span>                                                               \
         <div class="links">                                                   \
            <div                                                               \
-           class="linkItem icon"                                              \
-           title="click and drag to move card">                               \
+           class="linkItem icon">                                             \
               <div class="metacodeTitle">$_metacode_$</div>                   \
               <div class="metacodeImage"                                      \
-                   style="background-image:url($_imgsrc_$);"></div>           \
+                   style="background-image:url($_imgsrc_$);"                  \
+                   title="click and drag to move card"></div>                 \
            </div>                                                             \
            <div class="linkItem contributor"></div>                           \
            <div class="linkItem mapCount">$_map_count_$</div>                 \
@@ -40,6 +40,7 @@ function generateShowcardHTML() {
            <a href="/topics/$_id_$" class="linkItem topicPopout" title="Open Topic in New Tab" target="_blank"></a>\
            <div class="clearfloat"></div>                                     \
         </div>                                                                \
+      <div class="metacodeSelect">$_metacode_select_$</div>                   \
       <div class="scroll">                                                    \
         <div class="desc">                                                    \
           <span class="best_in_place best_in_place_desc"                      \
@@ -84,28 +85,6 @@ function replaceVariables(html, node) {
     close_a_tag = '';
   }
 
-  //create metacode_choices array from imgArray
-  var metacodes = new Array();
-  for (var key in imgArray) {
-    if (imgArray.hasOwnProperty(key)) {
-      if (key != node.getData("metacode")) {
-        metacodes.push(key);
-      }
-    }
-  }
-
-  //Arrange it how we want it
-  metacodes.sort();
-  metacodes.unshift(node.getData("metacode"));
-
-  var metacode_choices = "'[";
-  for (var i in metacodes) {
-    metacode_choices += '["' + metacodes[i] + '","' + metacodes[i] + '"],';
-  }
-  //remove trailing comma and add ]
-  metacode_choices = metacode_choices.slice(0, -1);
-  metacode_choices += "]'";
-
   var desc_nil = "<span class='gray'>Click to add description...</span>";
   var link_nil = "<span class='gray'>Click to add link...</span>";
   
@@ -152,7 +131,7 @@ function replaceVariables(html, node) {
   html = html.replace(/\$_name_\$/g, node.name);
   html = html.replace(/\$_userid_\$/g, node.getData("userid"));
   html = html.replace(/\$_username_\$/g, node.getData("username"));
-  html = html.replace(/\$_metacode_choices_\$/g, metacode_choices);
+  html = html.replace(/\$_metacode_select_\$/g, $('#metacodeOptions').html());
   html = html.replace(/\$_go_link_\$/g, go_link);
   html = html.replace(/\$_a_tag_\$/g, a_tag);
   html = html.replace(/\$_close_a_tag_\$/g, close_a_tag);
@@ -213,28 +192,42 @@ function populateShowCard(node) {
       showCard.appendChild(perm);
     }
 
-    
+  var selectingMetacode = false;
   // attach the listener that shows the metacode title when you hover over the image
-  $('.showcard .metacodeImage').hover(function(){
+  $('.showcard .metacodeImage').mouseenter(function(){
     $('.showcard .icon').css('z-index','3');
     $('.showcard .metacodeTitle').show();
-  },
-  function() {
-    $('.showcard .metacodeTitle').hide();
-    $('.showcard .icon').css('z-index','1');
+  });
+  $('.showcard .linkItem.icon').mouseleave(function() {
+    if ( !selectingMetacode ) {
+      $('.showcard .metacodeTitle').hide();
+      $('.showcard .icon').css('z-index','1');
+    }
+  });
+  
+  $('.showcard .metacodeTitle').click(function() {
+    if (!selectingMetacode) {  
+      selectingMetacode = true;
+      $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
+      $('.metacodeSelect').show();
+      // add the scroll bar to the list of metacode select options if it isn't already there
+      if ( !$('.metacodeSelect ul').hasClass('mCustomScrollbar') ) {
+        $('.metacodeSelect ul').mCustomScrollbar();
+        
+        $('.metacodeSelect li').click(function() {
+          selectingMetacode = false;
+          var metacodeName = $(this).find('.mSelectName').text();
+          updateMetacode(node, metacodeName);
+        });
+      }
+    } else {
+      selectingMetacode = false;
+      $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+      $('.metacodeSelect').hide();
+    }
   });
   
   //bind best_in_place ajax callbacks
-  $(showCard).find('.best_in_place_metacode').bind("ajax:success", function() {
-    var metacode = $(this).html();
-    //changing img alt, img src for top card (topic view page)
-    //and on-canvas card. Also changing image of node
-    $(showCard).find('img.icon').attr('alt', metacode);
-    $(showCard).find('img.icon').attr('src', imgArray[metacode].src);
-    node.setData("metacode", metacode);
-    Mconsole.plot();
-  });
-
   $(showCard).find('.best_in_place_name').bind("ajax:success", function() {
     var name = $(this).html();
     node.name = name;
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index c54bc662..205a0ac4 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -482,13 +482,6 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
   addHoverForSettings();
   
   //bind best_in_place ajax callbacks
-  $('.best_in_place_metacode').bind("ajax:success", function() {
-    var metacode = $(this).html();
-    //changing img alt, img src for top card (topic view page)
-    //and on-canvas card. Also changing image of node
-    $(this).parents('.CardOnGraph').find('img.icon').attr('alt', metacode);
-    $(this).parents('.CardOnGraph').find('img.icon').attr('src', imgArray[metacode].src);
-  });
   $('.best_in_place_desc').bind("ajax:success", function() {
     $(this).parents('.CardOnGraph').find('.scroll').mCustomScrollbar("update");
   });
@@ -678,6 +671,30 @@ function fetchRelatives(node) {
   });
 }
 
+// @param node = JIT node object
+// @param metacode = STRING like "Idea", "Action", etc.
+function updateMetacode(node, metacode) {
+  var mdata = { "topic": { "metacode": metacode } };
+  $.ajax({
+    type: "PUT",
+    dataType: 'json',
+    url: "/topics/" + node.id,
+    data: mdata,
+    success: function(data) {
+      $('.CardOnGraph').find('.metacodeTitle').text(metacode);
+      $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + imgArray[metacode].src + ')');
+      node.setData("metacode", metacode);
+      Mconsole.plot();
+      $('.metacodeTitle').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+      $('.metacodeSelect').hide();
+      setTimeout(function() { $('.metacodeTitle').hide(); $('.showcard .icon').css('z-index','1'); }, 500);
+    },
+    error: function(){
+      alert('failed to update metacode');
+    }
+  });
+}
+
 function MconsoleReset() {
 	
 	var tX = Mconsole.canvas.translateOffsetX;
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 948a449c..deed0027 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -642,6 +642,9 @@ background: #0F1519 url('MMCCicon_save_new_map.png') no-repeat center center;
 background-size: 28px 28px;
 cursor:pointer;
 }
+.sidebarForkIcon:hover {
+  background-color: black;
+}
 .sidebarForkBox {
   position:absolute;
   display:none;
@@ -677,6 +680,9 @@ background: #0F1519 url('MMCCicon_save_layout.png') no-repeat center center;
 background-size: 22px 22px;
 cursor:pointer;
 }
+.sidebarSaveIcon:hover {
+  background-color: black;
+}
 .sidebarSaveBox {
   position:absolute;
   display:none;
@@ -713,6 +719,9 @@ background: #0F1519 url('MMCCicon_filter2.png') no-repeat center center;
 background-size: 28px 28px;
 cursor:pointer;
 }
+.sidebarFilterIcon:hover {
+  background-color: black;
+}
 
 /* we set a few of these params off screen to begin with, so that when we initialize the scroll bar it works, but then 
    we hide the element and position it correctly */
@@ -803,6 +812,9 @@ background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat 0px 1px;
 background-size: 36px 36px;
 cursor:pointer;
 }
+.sidebarCollaborateIcon:hover, .sidebarCollaborateIcon.blue:hover{
+background-color: black;
+}
 .sidebarCollaborateIcon.blue {
 background: #0F1519 url('MMCCicon_realtime_blue.png') no-repeat center center;
 background-size: 26px 25px;
@@ -1955,7 +1967,7 @@ background-size: 22px 20px;
   border:none;
   bottom:36px;
   left:-1px;
-  height:124px;
+  height:123px;
   z-index:12;
   width:121px;
   color: white;
@@ -1965,7 +1977,7 @@ background-size: 22px 20px;
   overflow: hidden;
   padding: 0 0 0 30px;
   margin: 0;
-  background: #0F1519;/*url('black_bg.png'); */
+  background: #0F1519 url(beta_gen002.png) no-repeat 6px 12px;
   border-left:1px solid #000;
   border-right:1px solid #000;
 }
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 81354c20..ae162d5f 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -203,8 +203,18 @@ padding-left: 24px;
   width: 90%;
   padding-left: 10%;
   padding-top: 4px;
-  background-color: crimson;
+  background-color: #64BC61;
 }
+.permission.canEdit .metacodeTitle {
+  cursor:pointer;
+  background-image: url(MMCCicon_maximize_arrow_black.png);
+  background-repeat:no-repeat;
+  background-position: right center;
+}
+.permission.canEdit .metacodeTitle.minimize {
+  background-image: url(MMCCicon_minimize_arrow_black.png);
+}
+
 .CardOnGraph .metacodeImage {
   cursor:move;
   width:50px;
@@ -217,6 +227,47 @@ padding-left: 24px;
   background-repeat:no-repeat;
 }
 
+#metacodeOptions {
+  display:none;
+}
+.CardOnGraph .metacodeSelect {
+  display:none;
+  width:100%;
+  z-index: 2;
+  position: absolute;
+  background: #EAEAEA;
+  height: 150px;
+}
+.CardOnGraph .metacodeSelect ul {
+font-style: italic;
+font-family: 'vinyl';
+text-transform: uppercase;
+position: absolute;
+line-height: 36px;
+font-size: 20px;
+display:block;
+width: 100%;
+margin:0;
+padding: 0;
+list-style:none;
+height:150px;
+overflow:hidden;
+}
+.CardOnGraph .metacodeSelect ul li {
+background-color: #EAEAEA;
+width:100%;
+border-bottom:1px solid #AAAAAA;
+cursor:pointer;
+}
+.CardOnGraph .metacodeSelect ul li:hover {
+background-color: #F8F8F8;
+}
+.CardOnGraph .metacodeSelect ul li img, .CardOnGraph .metacodeSelect ul li .mSelectName {
+float:left;
+}
+
+
+
 
 .CardOnGraph .link {
   position:absolute;
diff --git a/app/assets/stylesheets/topics.css.scss b/app/assets/stylesheets/topics.css.scss
index c0ae1131..481ce8c2 100644
--- a/app/assets/stylesheets/topics.css.scss
+++ b/app/assets/stylesheets/topics.css.scss
@@ -2,95 +2,3 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-.nodeOptions {
-  display:none;
-  position: absolute;
-  top: -5px;
-  right: -17px;
-}
-
-.onCanvas .removeFromMap {
-  display:none !important;
-}
-
-.unauthenticated .deleteTopic {
-  display:none !important;
-}
-
-.removeFromCanvas {
-  display: block;
-  width: 17px;
-  height: 16px;
-  background: url('removeFromCanvas.png') no-repeat 2px 0;
-}
-
-.removeFromMap {
-  display: block;
-  width: 17px;
-  height: 16px;
-  background: url('removeFromMap.png') no-repeat 2px 0;
-}
-
-.centerOn {
-  display: block;
-  width: 17px;
-  height: 23px;
-  background: url("centerOn.png") no-repeat 2px 3px;
-  margin-top: 4px;
-}
-
-.deleteTopic {
-  display: block;
-  width: 17px;
-  height: 16px;
-  background: url('delete.png') no-repeat 2px 0;
-}
-
-.topic { 
-  float:left; 
-  margin:30px 0 30px 50px;
-}
-
-.topic .delete {
-position: absolute;
-top: -14px;
-left: 0px;
-background: none;
-border: 0;
-color: white;
-border: none;
-font-size: 14px;
-margin: 0;
-padding: 0;
-cursor:pointer;
-}
-
-.topic .scroll { 
-  display:block; 
-}
-
-.topic .type {position: absolute;
-color: white;
-top: -22px;
-right: 0;
-font-weight: bold;
-font-size: 20px;
-line-height: 24px;}
-
-.topic .icon { position:absolute; top:135px; left:-25px; }
-
-.topic .title { font-size:22px; line-height:27px; display:block; border-bottom:2px solid #000; padding-bottom:5px; }
-
-.topic .desc { font-size:15px; font-family:Arial, Helvetica, sans-serif; }
-.topic .desc h3 { font-style:normal; margin-top:5px; }
-
-.topic-go-arrow {
-  width: 25px;
-  height: 25px;
-  padding-bottom: 2px;
-  float: right;
-}
-
-.gray {
-  color: #999999;
-}
diff --git a/app/controllers/topics_controller.rb b/app/controllers/topics_controller.rb
index d9b60180..f74c4290 100644
--- a/app/controllers/topics_controller.rb
+++ b/app/controllers/topics_controller.rb
@@ -142,8 +142,10 @@ class TopicsController < ApplicationController
         @topic.message 'update',@current.id
       end
     end
-
-    respond_with @topic
+    
+    respond_to do |format|
+      format.js { render :json => @topic.self_as_json }
+    end
   end
   
   # GET mappings/:map_id/:topic_id/removefrommap
diff --git a/app/views/main/_metacodeoptions.html.erb b/app/views/main/_metacodeoptions.html.erb
new file mode 100644
index 00000000..7b3556ef
--- /dev/null
+++ b/app/views/main/_metacodeoptions.html.erb
@@ -0,0 +1,16 @@
+<%#
+  # @file
+  # this code generates the list of icons that will drop down in the metacode select list on the topic card
+  #%>
+  
+<div id="metacodeOptions">
+<ul>
+<% Metacode.order("name").all.each do |m| %>
+  <li>
+    <img width="30" height="30" src="/assets/<%= m.icon %>" alt="<%= m.name %>" />
+    <span class="mSelectName"><%= m.name %></span>
+    <div class="clearfloat"></div>
+  </li>
+<% end %>
+</ul>
+</div>
\ No newline at end of file
diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb
index 6563d976..75735ea8 100644
--- a/app/views/maps/show.html.erb
+++ b/app/views/maps/show.html.erb
@@ -53,6 +53,7 @@
 <% if authenticated? %>
   <%= render :partial => 'newtopic' %>
   <%= render :partial => 'newsynapse' %>
+  <%= render :partial => 'main/metacodeoptions' %>
   
   <% # for saving layouts %>
   <% if @map.permission == "commons" || @map.user == user %>
diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb
index 959d815f..0228b00b 100644
--- a/app/views/topics/show.html.erb
+++ b/app/views/topics/show.html.erb
@@ -46,6 +46,12 @@
 </div>
 <div class="clearfloat"></div>
 
+<% if authenticated? %>
+  <%= render :partial => 'topics/new' %>
+  <%= render :partial => 'synapses/new' %>
+  <%= render :partial => 'main/metacodeoptions' %>
+<% end %>
+
 <script>
 	$(document).ready(function() {
     function bindWandHover() {
@@ -172,10 +178,4 @@
 	$(window).load(function() {
 		initialize("centered");
 	});
-</script>
-
-<% if authenticated? %>
-  <%= render :partial => 'topics/new' %>
-  <%= render :partial => 'synapses/new' %>
-<% end %>
-
+</script>
\ No newline at end of file