From 7f5269bb842ca8b49ff64d7f7ed55e3834bda9bc Mon Sep 17 00:00:00 2001
From: Connor Turland <connor@madhattertech.ca>
Date: Sun, 2 Mar 2014 18:53:19 -0800
Subject: [PATCH] added the ability to change the map permission from the map
 info box

---
 app/assets/javascripts/application.js  | 17 +++++++
 app/assets/stylesheets/application.css | 63 +++++++++++++++++++++++---
 app/views/maps/_homemap.html.erb       |  2 +-
 app/views/maps/_mapinfobox.html.erb    |  8 +++-
 app/views/maps/show.html.erb           | 34 ++++++++++++++
 5 files changed, 115 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 4f779239..6241a069 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -736,6 +736,23 @@ function updateSynapsePermission(edge, permission) {
   });
 }
 
+function updateMapPermission(mapid, permission) {
+  var mdata = { "map": { "permission": permission } };
+  $.ajax({
+    type: "PUT",
+    dataType: 'json',
+    url: "/maps/" + mapid,
+    data: mdata,
+    success: function(data) {
+      $('.mapPermission').removeClass('commons public private minimize').addClass( permission );
+      $('.mapPermission .permissionSelect').remove();
+    },
+    error: function(){
+      alert('failed to update permission');
+    }
+  });
+}
+
 function MconsoleReset() {
 	
 	var tX = Mconsole.canvas.translateOffsetX;
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index d86f7da5..172b98e3 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1569,24 +1569,29 @@ background-position: 16px 6px;
 background-size: 27px 27px;
 position:relative;
 }
-.mapContributors .tip {
+.infoStatIcon .tip {
 display: none; 
 position: absolute;
 background: white;
 min-width: 180px;
 max-width:250px;
 text-align:center;
-top: 38px;
-left: 6px;
 color: black;
 border-radius: 4px;
 font-size: 15px !important;
-font-family: 'LatoLight';
+font-family: 'LatoRegular';
 line-height: 17px;
 padding: 3px 5px 2px;
-border: 1px solid black;
 z-index: 100;
 }
+.mapContributors .tip {
+  top: 38px;
+  left: 6px;
+}
+.mapPermission .tip {
+  top: 0;
+  right: 32px;
+}
 .mapInfoBox .hoverForTip:hover .tip {
   display:block;
 }
@@ -1602,8 +1607,13 @@ background-position: 18px 6px;
 background-size: 27px 27px;
 }
 .mapPermission {
-background-position: 10px center;
+background-position: 0 center;
 background-size: 30px 30px;
+width: 30px;
+height: 30px;
+padding: 0;
+margin: 5px 30px 5px 10px;
+position: relative;
 }
 .mapPermission.commons {
   background-image:url(MMCCicon_commons.png);
@@ -1615,6 +1625,47 @@ background-size: 30px 30px;
   background-image:url(MMCCicon_private.png);
 }
 
+.yourMap .mapPermission:hover {
+  background-image: url(/assets/MMCCicon_maximize_arrow.png);
+  cursor:pointer;
+}
+.yourMap .mapPermission.minimize {
+ background-image: url(MMCCicon_minimize_arrow.png) !important;
+ cursor: pointer;
+}
+.mapPermission .permissionSelect {
+  list-style: none;
+  width: 30px;
+  height: 60px;
+  position: relative;
+  top: 30px;
+}
+.mapPermission .permissionSelect li {
+  width: 30px;
+  height: 30px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 30px 30px;
+}
+.mapPermission .permissionSelect .commons {
+  background-image: url(MMCCicon_commons.png);
+}
+.mapPermission .permissionSelect .public {
+  background-image: url(MMCCicon_public.png);
+}
+.mapPermission .permissionSelect .private {
+  background-image: url(MMCCicon_private.png);
+}
+.mapPermission .permissionSelect .commons:hover {
+  background-image: url(MMCCicon_commons_black.png);
+}
+.mapPermission .permissionSelect .public:hover {
+  background-image: url(MMCCicon_public_black.png);
+}
+.mapPermission .permissionSelect .private:hover {
+  background-image: url(MMCCicon_private_black.png);
+}
+
 .mapInfoBox .mapInfoDesc {
   font-style: italic;
   color: #BBB;
diff --git a/app/views/maps/_homemap.html.erb b/app/views/maps/_homemap.html.erb
index 94472968..de583376 100644
--- a/app/views/maps/_homemap.html.erb
+++ b/app/views/maps/_homemap.html.erb
@@ -8,7 +8,7 @@
   <div class="permission <%= map.authorize_to_edit(user) ? "canEdit" : "cannotEdit" %>">  
   
 	  <div class="mapCard"> 
-      <div class="mapPerm <%= map.mk_permission %>"> help build this map </div>    
+      <div class="mapPerm <%= map.mk_permission %>"></div>    
       <span class="title">                                                  
         <%= best_in_place map, :name, :type => :input, :classes => 'best_in_place_name' %>                             
       </span> 
diff --git a/app/views/maps/_mapinfobox.html.erb b/app/views/maps/_mapinfobox.html.erb
index 7ce7455d..d7c17056 100644
--- a/app/views/maps/_mapinfobox.html.erb
+++ b/app/views/maps/_mapinfobox.html.erb
@@ -2,7 +2,7 @@
   # Partial rendering form for a new topic on a map
   # This code is called when viewing a metamap in show.html.erb in the views/maps folder
   #%>
-<div class="mapInfoBox permission <%= @map.user == user ? "canEdit" : "cannotEdit" %>">
+<div class="mapInfoBox permission <%= @map.user == user ? " yourMap" : "" %><%= @map.authorize_to_edit(user) ? " canEdit" : "" %>">
   
   <div class="mapInfoName"><%= best_in_place @map, :name, :type => :input, :classes => 'best_in_place_name' %></div>
   
@@ -25,7 +25,11 @@
     <div class="infoStatIcon mapSynapses">
       <%= @map.synapses.count %>
     </div>
-    <div class="infoStatIcon mapPermission <%= @map.permission %>"></div>
+    <div class="infoStatIcon mapPermission <%= @map.permission %> hoverForTip">
+      <% if @map.user == user %>
+        <div class="tip">As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>
+      <% end %>
+    </div>
     <div class="clearfloat"></div>
   </div>
   
diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb
index 2ef0d431..981cc711 100644
--- a/app/views/maps/show.html.erb
+++ b/app/views/maps/show.html.erb
@@ -175,6 +175,40 @@
    // initialize best_in_place editing
    $('.authenticated div.permission.canEdit .best_in_place').best_in_place();
    
+   <% if @map.user == user %>
+     // ability to change permission
+    var selectingPermission = false;
+     $('.yourMap .mapPermission').click(function() {
+      if (!selectingPermission) {  
+        selectingPermission = true;
+        $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
+        if ( $(this).hasClass('commons') ) {
+          $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
+        } else if ( $(this).hasClass('public') ) {
+          $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
+        } else if ( $(this).hasClass('private') ) {
+          $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
+        }
+        $('.mapPermission .permissionSelect li').click(function(event) {
+          selectingPermission = false;
+          var permission = $(this).attr('class');
+          updateMapPermission(mapid, permission);
+          event.stopPropagation();
+        });
+      } else {
+        selectingPermission = false;
+        $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+        $('.mapPermission .permissionSelect').remove();
+      }
+     });
+    <% end %>
+   
+   //bind best_in_place ajax callbacks
+    $('.mapInfoName .best_in_place_name').bind("ajax:success", function() {
+      var name = $(this).html();
+      $('.mapName').html(name);
+    });
+   
    $('.showcard').draggable({ handle: ".metacodeImage" });
    $('#showcard').resizable({
      maxHeight: 500,