metamaps--metamaps/app/views/maps/show.html.erb

<%#
  # @file
  # Code to display a map
  # /maps/:id
  #%>
  
<% content_for :title, @map.name + " | Metamaps" %>

<% if authenticated? %>
<div class="sidebarWand">
  <div class="sidebarWandIcon"></div>
  <div class="sidebarWandBox">
    <ul>
      <li class="wandIcon wandSaveLayout">Save Layout</li>
      <li class="wandIcon wandForkMap">Save To New Map</li>
      <li class="wandIcon wandChangeMetacodes">Switch Metacode Set</li>
    </ul>
  </div>
</div>
<div class="sidebarCollaborate">
  <div class="sidebarCollaborateIcon"></div>
  <div class="sidebarCollaborateBox">
    
  </div>
</div>
<% end %>
<div class="sidebarFilter <%= authenticated? ? 'loggedin' : 'loggedout' %>">
  <div class="sidebarFilterIcon"></div>
  <div class="sidebarFilterBox">
    <h3 class="filterByMetacode">Filter By Metacode</h3><span class="showAll">all</span><span class="hideAll">none</span>
    <div class="clearfloat"></div>
    <%= render :partial => 'main/filterbymetacode' %>
  </div>
</div>

<div class="index">
  <div class="openCheatsheet"></div>
  <span><img width="35" height="35" src="/assets/map.png"></span>
  <span class="mapName"><%= @map.name %></span>
  <span class="mapInfo"></span>
  <div class="clearfloat"></div>
  <%= render :partial => 'maps/mapinfobox' %>
</div>

<div class="maps onMap" id="container">
  <div id="center-container">
    <div id="infovis"></div>    
  </div>
  <div class="showcard" id="showcard"></div>
</div>
<div class="clearfloat"></div>

<% if authenticated? %>
  <%= render :partial => 'newtopic' %>
  <%= render :partial => 'newsynapse' %>
  <%= render :partial => 'maps/fork' %>
  
  <% # for saving layouts %>
  <% if @map.permission == "commons" || @map.user == user %>
	  <%= form_for @map, :url => savelayout_path(@map), :html => { :class => "saveMapLayout", :id => "saveMapLayout"}, remote: true do |form| %>
	    <%= form.hidden_field "coordinates", :value => "" %>
	  <% end %>
  <% end %>
<% end %>
  
<script>
  $(document).ready(function() {
    function bindWandHover() {
      
      var wandIsOpen = false
      
      // controls the sliding hover of the bottom left menu
      var sliding1 = false; 
      var lT;
      
      var closeWand = function() {
        lT = setTimeout(function() { 
            if (! sliding1) { 
              sliding1 = true;
              $('.sidebarWandIcon').css('background-color','rgba(0,0,0,0.7)');
              $('.sidebarWandBox').fadeOut(200, function() {
                sliding1 = false;
                wandIsOpen = false; 
              });
            } 
          },300); 
      }
      
      var openWand = function() {
        clearTimeout(lT);
        if (! sliding1) { 
            sliding1 = true;
            
            // hide the other two
            $('.sidebarAccountBox').hide();
            $('.sidebarFilterBox').hide();
            $('.sidebarFilterIcon').css('background-color','rgba(0,0,0,0.7)');
            $('.sidebarAccountIcon').css('background-color','rgba(0,0,0,0.7)');
            
            $('.sidebarWandIcon').css('background-color','rgba(0,0,0,0.9)');
            $('.sidebarWandBox').fadeIn(200, function() {
                 sliding1 = false;
                 wandIsOpen = true;
            });
        }
      }
        // bind the hover events
        $(".sidebarWand").hover(openWand, closeWand);
        
        // attach events for clicking on wand actions
        $('li.wandSaveLayout').click(function() {
          saveLayoutAll();
        });
        $('li.wandForkMap').click(function() {
          saveToMap();
          closeWand();
        });
        $('li.wandFilter').click(function() {
          return;
        });
        
   } // end bindWandHover
   
   function bindFilterHover() {
      
      var filterIsOpen = false
      
      // controls the sliding hover of the bottom left menu
      var sliding1 = false; 
      var lT;
      
      var closeFilter = function() {
        lT = setTimeout(function() { 
            if (! sliding1) { 
              sliding1 = true;
              $('.sidebarFilterIcon').css('background-color','rgba(0,0,0,0.7)');
              $('.sidebarFilterBox').fadeOut(200, function() {
                sliding1 = false;
                filterIsOpen = false; 
              });
            } 
          },300); 
      }
      
      var openFilter = function() {
        clearTimeout(lT);
        if (! sliding1) { 
            sliding1 = true;
            
            // hide the other two
            $('.sidebarAccountBox').hide();
            $('.sidebarWandBox').hide();
            $('.sidebarAccountIcon').css('background-color','rgba(0,0,0,0.7)');
            $('.sidebarWandIcon').css('background-color','rgba(0,0,0,0.7)');
            
            $('.sidebarFilterIcon').css('background-color','rgba(0,0,0,0.9)');
            $('.sidebarFilterBox').fadeIn(200, function() {
                 sliding1 = false;
                 filterIsOpen = true;
            });
        }
      }
        // bind the hover events
        $(".sidebarFilter").hover(openFilter, closeFilter);
        
   } // end bindFilterHover
   
   function bindInfoHover() {
      
      var infoIsOpen = false
      
      // controls the sliding hover of the bottom left menu
      var sliding1 = false; 
      var lT;
      
      var closeInfo = function() {
        lT = setTimeout(function() { 
            if (! sliding1) { 
              sliding1 = true;
              $('.mapInfoBox').fadeOut(200, function() {
                sliding1 = false;
                infoIsOpen = false; 
              });
            } 
          },300); 
      }
      
      var openInfo = function(event) {
        clearTimeout(lT);
        if (! sliding1 && event.srcElement.className != "openCheatsheet") { 
            sliding1 = true;
            
            $('.mapInfoBox').fadeIn(200, function() {
                 sliding1 = false;
                 infoIsOpen = true;
            });
        }
      }
        // bind the hover events
        $("div.index").hover(openInfo, closeInfo);
        
        
   } // end bindWandHover
   bindWandHover();
   bindFilterHover();
   bindInfoHover();
   
   $(".sidebarCollaborateIcon").click(function(event) {
      goRealtime = !goRealtime; 
      $(".sidebarCollaborateIcon").toggleClass("blue");
   });
   
   // initialize best_in_place editing
   $('.authenticated div.permission.canEdit .best_in_place').best_in_place();
   
   $('.showcard').draggable({ handle: ".metacodeImage" });
   $('#showcard').resizable({
     maxHeight: 500,
     maxWidth: 500,
     minHeight: 320,
     minWidth: 226
   }).css({
     display: 'none',
     top: '300px',
     left: '100px'
   });
   
  });
  
  
  var dragged = 0;
  mapid = <%= @map.id %>;
  <% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
    mapperm = true;
  <% end %>
  
  viewMode = "graph";
	json = <%= @mapjson %>;
	if (json.length > 0) {
		$(window).load(function() {
			<% if (@map.arranged) %>
				initialize("arranged");
			<% else %>
				initialize("chaotic");
			<% end %>
		});
	}
  else {
		$(window).load(function() {
				initialize("chaotic", true);
		});
	}
  window.realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com');
  window.realtime.socket.on('connect', function() {
      subscribeToRooms();
      console.log('socket connected');
  });
  function subscribeToRooms() {
    window.realtime.socket.on('maps-' + mapid, function(data) {
      //as long as you weren't the origin of the changes, update your map
      if (data.origin != userid && goRealtime) {
        if (data.resource == 'Topic') {
          topic = $.parseJSON(data.obj);
          
          if (data.action == 'create') {
            window.realtime.addTopicToMap(topic);
          }
          else if (data.action == 'update' && Mconsole.graph.getNode(topic.id) != 'undefined') {
            window.realtime.updateTopicOnMap(topic);
          }
          else if (data.action == 'destroy' && Mconsole.graph.getNode(topic.id) != 'undefined') {
            hideNode(topic.id)
          }
          
          return;
        }
        else if (data.resource == 'Synapse') {
          synapse = $.parseJSON(data.obj);
          
          if (data.action == 'create') {
            window.realtime.addSynapseToMap(synapse);
          }
          else if (data.action == 'update' && 
                   Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') {
            window.realtime.updateSynapseOnMap(synapse);
          }
          else if (data.action == 'destroy' && 
                   Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') {
            var edge = Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']);
            hideEdge(edge);
          }
          
          return;
        }
      }
    });
  }
</script>