Merge branch 'develop' into feature/convo.algo

.github/ISSUE_TEMPLATE.md

@@ -1,12 +1,3 @@
-please link to related trello cards, if they exist, from the following two boards respectively
-
-https://trello.com/b/8HlCikOX/metamaps-design
-
-https://trello.com/b/uFOA6a2x/metamaps-feedback-feature-ideas-requests
-
-[the issue as framed for design]()
-
-[the issue as framed from the users perspective]()
 
 
 ============

app/assets/javascripts/application-secret.js

@@ -0,0 +1,23 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+/* eslint-disable spaced-comment */
+//= require jquery
+//= require jquery-ui
+//= require jquery_ujs
+//= require action_cable
+//= require_directory ./lib
+//= require ./cloudcarousel-secret
+//= require ./metamaps.secret.bundle
+//= require ./Metamaps.ServerData
+//= require homepageVimeoFallback
+/* eslint-enable spaced-comment */

app/assets/javascripts/cloudcarousel-secret.js

@@ -0,0 +1,438 @@
+//////////////////////////////////////////////////////////////////////////////////
+// CloudCarousel V1.0.5
+// (c) 2011 by R Cecco. <http://www.professorcloud.com>
+// MIT License
+//
+// Reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>
+//
+// Please retain this copyright header in all versions of the software
+//////////////////////////////////////////////////////////////////////////////////
+var matched, browser;
+
+jQuery.uaMatch = function( ua ) {
+    ua = ua.toLowerCase();
+
+    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
+        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
+        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
+        /(msie) ([\w.]+)/.exec( ua ) ||
+        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
+        [];
+
+    return {
+        browser: match[ 1 ] || "",
+        version: match[ 2 ] || "0"
+    };
+};
+
+matched = jQuery.uaMatch( navigator.userAgent );
+browser = {};
+
+if ( matched.browser ) {
+    browser[ matched.browser ] = true;
+    browser.version = matched.version;
+}
+
+// Chrome is Webkit, but Webkit is also Safari.
+if ( browser.chrome ) {
+    browser.webkit = true;
+} else if ( browser.webkit ) {
+    browser.safari = true;
+}
+
+jQuery.browser = browser;
+
+(function($) {
+
+	// START Reflection object.
+	// Creates a reflection for underneath an image.
+	// IE uses an image with IE specific filter properties, other browsers use the Canvas tag.	
+	// The position and size of the reflection gets updated by updateAll() in Controller.
+	function Reflection(img, reflHeight, opacity) {				
+		
+		var	reflection, cntx, imageWidth = img.width, imageHeight = img.width, gradient, parent;
+	
+		parent = $(img.parentNode);
+		this.element = reflection = parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[0];
+        if ( !reflection.getContext &&  $.browser.msie) {
+			this.element = reflection = parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[0];					
+			reflection.src = img.src;			
+			reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflHeight / imageHeight * 100) + ")";	
+			
+        } else {							
+			cntx = reflection.getContext("2d");
+			try {
+				
+				
+				$(reflection).attr({width: imageWidth, height: reflHeight});
+				cntx.save();
+				cntx.translate(0, imageHeight-1);
+				cntx.scale(1, -1);				
+				cntx.drawImage(img, 0, 0, imageWidth, imageHeight);				
+				cntx.restore();
+				cntx.globalCompositeOperation = "destination-out";
+				gradient = cntx.createLinearGradient(0, 0, 0, reflHeight);
+				gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity) + ")");
+				gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
+				cntx.fillStyle = gradient;
+				cntx.fillRect(0, 0, imageWidth, reflHeight);				
+			} catch(e) {			
+				return;
+			}		
+		}
+		// Store a copy of the alt and title attrs into the reflection
+		$(reflection).attr({ 'alt': $(img).attr('alt'), title: $(img).attr('title')} );	
+				
+	}	//END Reflection object
+
+	// START Item object.
+	// A wrapper object for items within the carousel.
+	var	Item = function(imgIn, options)
+	{								
+		this.orgWidth = imgIn.width;			
+		this.orgHeight = imgIn.height;		
+		this.image = imgIn;
+		this.reflection = null;					
+		this.alt = imgIn.alt;
+		this.title = imgIn.title;
+		this.imageOK = false;		
+		this.options = options;				
+						
+		this.imageOK = true;	
+		
+		if (this.options.reflHeight > 0)
+		{													
+			this.reflection = new Reflection(this.image, this.options.reflHeight, this.options.reflOpacity);					
+		}
+		$(this.image).css('position','absolute');	// Bizarre. This seems to reset image width to 0 on webkit!					
+	};// END Item object
+	
+	
+	// Controller object.
+	// This handles moving all the items, dealing with mouse clicks etc.	
+	var Controller = function(container, images, options)
+	{						
+		var	items = [], funcSin = Math.sin, funcCos = Math.cos, ctx=this;
+		this.controlTimer = 0;
+		this.stopped = false;
+		//this.imagesLoaded = 0;
+		this.container = container;
+		this.xRadius = options.xRadius;
+		this.yRadius = options.yRadius;
+		this.showFrontTextTimer = 0;
+		this.autoRotateTimer = 0;
+		if (options.xRadius === 0)
+		{
+			this.xRadius = ($(container).width()/2.3);
+		}
+		if (options.yRadius === 0)
+		{
+			this.yRadius = ($(container).height()/6);
+		}
+
+		this.xCentre = options.xPos;
+		this.yCentre = options.yPos;
+		this.frontIndex = 0;	// Index of the item at the front
+		
+		// Start with the first item at the front.
+		this.rotation = this.destRotation = Math.PI/2;
+		this.timeDelay = 1000/options.FPS;
+								
+		// Turn on the infoBox
+		if(options.altBox !== null)
+		{
+			$(options.altBox).css('display','block');	
+			$(options.titleBox).css('display','block');	
+		}
+		// Turn on relative position for container to allow absolutely positioned elements
+		// within it to work.
+		$(container).css({ position:'relative', overflow:'hidden'} );
+	
+		$(options.buttonLeft).css('display','inline');
+		$(options.buttonRight).css('display','inline');
+		
+		// Setup the buttons.
+		$(options.buttonLeft).bind('mouseup',this,function(event){
+			event.data.rotate(-1);	
+			return false;
+		});
+		$(options.buttonRight).bind('mouseup',this,function(event){
+			event.data.rotate(1);	
+			return false;
+		});
+		
+		// START METAMAPS CODE
+		// Add code that makes tab and shift+tab scroll through metacodes
+		$('.new_topic').bind('keydown',this,function(event){
+            if (event.keyCode == 9 && event.shiftKey) {
+        $(container).show()
+				event.data.rotate(-1);
+                event.preventDefault();
+                event.stopPropagation();
+			} else if (event.keyCode == 9) {
+				$(container).show()
+				event.data.rotate(1);
+                event.preventDefault();
+                event.stopPropagation();
+            }
+		});
+		// END METAMAPS CODE
+		
+		// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
+		if (options.mouseWheel)
+		{
+			// START METAMAPS CODE
+			/*$('body').bind('mousewheel',this,function(event, delta) {					 
+					 if (Metamaps.Create.newTopic.beingCreated && 
+					     !Metamaps.Create.isSwitchingSet &&
+					     !Metamaps.Create.newTopic.pinned) {
+					 	event.data.rotate(delta);
+					 	return false;
+					 }
+				 });*/
+			// END METAMAPS CODE
+			// ORIGINAL CODE
+			// $(container).bind('mousewheel',this,function(event, delta) {
+			// 	event.data.rotate(delta);
+			// 	return false;
+			// });
+			//
+		}
+		$(container).unbind('mouseover click').bind('mouseover click',this,function(event){
+			
+			clearInterval(event.data.autoRotateTimer);		// Stop auto rotation if mouse over.
+			var	text = $(event.target).attr('alt');		
+			// If we have moved over a carousel item, then show the alt and title text.
+		
+			if ( text !== undefined && text !== null )
+			{
+					
+				clearTimeout(event.data.showFrontTextTimer);			
+				$(options.altBox).html( ($(event.target).attr('alt') ));
+				//$(options.titleBox).html( ($(event.target).attr('title') ));							
+				if ( options.bringToFront && event.type == 'click' )				
+				{
+					$(options.titleBox).html( ($(event.target).attr('title') ));
+					// START METAMAPS CODE
+					Metamaps.Create.newTopic.metacode = $(event.target).attr('data-id');
+					// END METAMAPS CODE
+					var	idx = $(event.target).data('itemIndex');	
+					var	frontIndex = event.data.frontIndex;
+					//var	diff = idx - frontIndex;                    
+					var diff = (idx - frontIndex) % images.length;
+					if (Math.abs(diff) > images.length / 2) {
+						diff += (diff > 0 ? -images.length : images.length);
+					}
+
+					event.data.rotate(-diff);
+				}
+			}
+		});
+		// START METAMAPS CODE - initialize newTopic.metacode
+		var first = $(this.container).find('img').get(0)
+		Metamaps.Create.newTopic.metacode = $(first).data('id')
+		// END METAMAPS CODE
+
+		// If we have moved out of a carousel item (or the container itself),
+		// restore the text of the front item in 1 second.
+		$(container).bind('mouseout',this,function(event){
+				var	context = event.data;				
+				clearTimeout(context.showFrontTextTimer);				
+				context.showFrontTextTimer = setTimeout( function(){context.showFrontText();},1000);
+				context.autoRotate();	// Start auto rotation.
+		});
+
+		// Prevent items from being selected as mouse is moved and clicked in the container.
+		$(container).bind('mousedown',this,function(event){	
+			
+			event.data.container.focus();
+			return false;
+		});
+		container.onselectstart = function () { return false; };		// For IE.
+
+		this.innerWrapper = $(container).wrapInner('<div style="position:absolute;width:100%;height:100%;"/>').children()[0];
+	
+		// Shows the text from the front most item.
+		this.showFrontText = function()
+		{	
+			if ( items[this.frontIndex] === undefined ) { return; }	// Images might not have loaded yet.
+                        // METAMAPS CODE
+			Metamaps.Create.newTopic.setMetacode($(items[this.frontIndex].image).attr('data-id'))
+			// NOT METAMAPS CODE
+			//$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
+			//$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));				
+		};
+						
+		this.go = function()
+		{				
+			if(this.controlTimer !== 0) { return; }
+			var	context = this;
+			this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);					
+		};
+		
+		this.stop = function()
+		{
+			clearTimeout(this.controlTimer);
+			this.controlTimer = 0;
+			// METAMAPS CODE
+			$(container).hide()
+			// END METAMAPS CODE
+		};
+		
+		
+		// Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.
+		this.rotate = function(direction)
+		{	
+			this.frontIndex -= direction;
+			if (this.frontIndex == -1) this.frontIndex = items.length - 1;
+			this.frontIndex %= items.length;					 			
+			this.destRotation += ( Math.PI / items.length ) * ( 2*direction );
+			this.showFrontText();
+			this.go();			
+		};
+		
+		
+		this.autoRotate = function()
+		{			
+			if ( options.autoRotate !== 'no' )
+			{
+				var	dir = (options.autoRotate === 'right')? 1 : -1;
+				this.autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay );
+			}
+		};
+		
+		// This is the main loop function that moves everything.
+		this.updateAll = function()
+		{											
+			var	minScale = options.minScale;	// This is the smallest scale applied to the furthest item.
+			var smallRange = (1-minScale) * 0.5;
+			var	w,h,x,y,scale,item,sinVal;
+			
+			var	change = (this.destRotation - this.rotation);				
+			var	absChange = Math.abs(change);
+	
+			this.rotation += change * options.speed;
+			if ( absChange < 0.001 ) { this.rotation = this.destRotation; }			
+			var	itemsLen = items.length;
+			var	spacing = (Math.PI / itemsLen) * 2; 
+			//var	wrapStyle = null;
+			var	radians = this.rotation;
+			var	isMSIE = $.browser.msie;
+		
+			// Turn off display. This can reduce repaints/reflows when making style and position changes in the loop.
+			// See http://dev.opera.com/articles/view/efficient-javascript/?page=3			
+			this.innerWrapper.style.display = 'none';		
+			
+			var	style;
+			var	px = 'px', reflHeight;	
+			var context = this;
+			for (var i = 0; i<itemsLen ;i++)
+			{
+				item = items[i];
+								
+				sinVal = funcSin(radians);
+				
+				scale = ((sinVal+1) * smallRange) + minScale;
+				
+				x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale);
+				y = this.yCentre + (( (sinVal * this.yRadius)  ) * scale);		
+		
+        if (item.imageOK)
+				{
+					var	img = item.image;
+          
+          img.style.zIndex = "" + (scale * 100)>>0;	// >>0 = Math.foor(). Firefox doesn't like fractional decimals in z-index.
+          w = img.width = item.orgWidth * scale;					
+					h = img.height = item.orgHeight * scale;
+					img.style.left = x + px ;
+					img.style.top = y + px;
+					if (item.reflection !== null)
+					{																										
+						reflHeight = options.reflHeight * scale;						
+						style = item.reflection.element.style;
+						style.left = x + px;
+						style.top = y + h + options.reflGap * scale + px;
+						style.width = w + px;								
+						if (isMSIE)
+						{											
+							style.filter.finishy = (reflHeight / h * 100);				
+						}else
+						{								
+							style.height = reflHeight + px;															
+						}																													
+					}					
+				}
+				radians += spacing;
+			}
+			// Turn display back on.					
+			this.innerWrapper.style.display = 'block';
+
+			// If we have a preceptable change in rotation then loop again next frame.
+			if ( absChange >= 0.001 )
+			{				
+				this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);		
+			}else
+			{
+				// Otherwise just stop completely.				
+				this.stop();
+			}
+		}; // END updateAll		
+		
+		// Create an Item object for each image	
+//		func = function(){return;ctx.updateAll();} ;
+
+		// Check if images have loaded. We need valid widths and heights for the reflections.
+		this.checkImagesLoaded = function()
+		{
+			var	i;
+			for(i=0;i<images.length;i++) {
+				if ( (images[i].width === undefined) || ( (images[i].complete !== undefined) && (!images[i].complete)  ))
+				{
+					return;					
+				}				
+			}
+			for(i=0;i<images.length;i++) {				
+				 items.push( new Item( images[i], options ) );	
+				 $(images[i]).data('itemIndex',i);
+			}
+			// If all images have valid widths and heights, we can stop checking.			
+			clearInterval(this.tt);
+			// METAMAPS COMMENT this.showFrontText();
+			this.autoRotate();	
+			this.updateAll();
+			
+		};
+
+		this.tt = setInterval( function(){ctx.checkImagesLoaded();},50);	
+	}; // END Controller object
+	
+	// The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
+	$.fn.CloudCarousel = function(options) {
+			
+		this.each( function() {			
+			
+			options = $.extend({}, {
+							   reflHeight:0,
+							   reflOpacity:0.5,
+							   reflGap:0,
+							   minScale:0.5,
+							   xPos:0,
+							   yPos:0,
+							   xRadius:0,
+							   yRadius:0,
+							   altBox:null,
+							   titleBox:null,
+							   FPS: 30,
+							   autoRotate: 'no',
+							   autoRotateDelay: 1500,
+							   speed:0.2,
+							   mouseWheel: false,
+								 bringToFront: false
+			},options );									
+			// Create a Controller for each carousel.		
+			$(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) );
+		});				
+		return this;
+	};
+
+})(jQuery);

app/assets/secret_stylesheets/application-secret.scss.erb

@@ -0,0 +1,12 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require ./special
+*/

app/assets/secret_stylesheets/special.scss.erb

@@ -0,0 +1,109 @@
+#metacodeSelector {
+  display: none;
+}
+.metacodeSelect {
+  border-top: 1px solid #DDD;
+  padding: 0;
+  background: #FFF;
+    
+  .metacodeFilterInput {
+    width: 100px;
+    outline: none;
+    border: 0;
+    padding: 8px;
+    font-size: 14px;
+    line-height: 14px;
+    color: #424242;
+    font-family: 'din-medium', helvetica, sans-serif;
+  }
+  
+  .metacodeList {
+    list-style: none;
+    background: #FFF;
+    
+    li {
+      padding: 8px;
+      cursor: pointer;
+      
+      &:hover, &.keySelect {
+        background: #4CAF50;
+      }
+    }
+
+    img {
+      width: 24px;
+      height: 24px;
+      display: inline-block;
+      vertical-align: middle;
+      padding-right: 6px;
+    }
+  }
+}
+.selectedMetacode {
+  float: left;
+  background: #FFF;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+  padding: 5px 10px 5px 6px;
+  vertical-align: top;
+  border-right: 1px solid #DDD;
+  cursor: pointer;
+}
+.selectedMetacode:hover, .selectedMetacode.isBeingSelected {
+  background: #EDEDED;
+}
+.selectedMetacode img {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.selectedMetacode span {
+  vertical-align: middle;
+}
+.selectedMetacode .downArrow {
+  display: inline-block;
+  vertical-align: middle;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 8px 6px 0 6px;
+  border-color: #777 transparent transparent transparent;
+  margin-left: 2px;
+  margin-top: 4px;
+}
+.new_topic {
+    margin: 0;
+    margin-top: -17px;
+    white-space: nowrap;
+}
+#new_topic .twitter-typeahead {
+     position: relative !important;
+     top: 0;
+     left: 0;
+}
+.new_topic #topic_name,
+.new_topic .tt-hint {
+     border-radius: none;
+     border-top-right-radius: 2px;
+     border-bottom-right-radius: 2px;
+}
+.openMetacodeSwitcher {
+    top: -16px;
+    left: -16px;
+}
+#metacodeImg {
+     height: 120px;
+     width: 380px;
+     display: none;
+     position: absolute !important;
+     top: -30px;
+     z-index: -1;
+}
+#metacodeImgTitle {
+     display: none;
+     float: left;
+     width: 120px;
+     text-align: center;
+     margin-left: 110px;
+}

app/assets/stylesheets/application.scss.erb

@@ -526,50 +526,22 @@ button.button.btn-no:hover {
 }
 
 .new_topic {
-    top: -10000px;
-    left: -10000px;
-    margin-top: -17px;
+    /* start it off screen while it initializes the spinner, then it will be hidden with jquery */
+    top: -1000px;
+    left: -1000px;
     display: block;
     position: absolute;
+    margin: -40px 0 0 -35px;
     z-index: 1;
-    white-space: nowrap;
 }
-
-.selectedMetacode {
-  float: left;
-  background: #FFF;
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  padding: 5px 10px 5px 6px;
-  vertical-align: top;
-  border-right: 1px solid #DDD;
-  cursor: pointer;
-}
-.selectedMetacode:hover, .selectedMetacode.isBeingSelected {
-  background: #EDEDED;
-}
-.selectedMetacode img {
-  width: 24px;
-  height: 24px;
-  display: inline-block;
-  vertical-align: middle;
-}
-.selectedMetacode span {
-  vertical-align: middle;
-}
-.selectedMetacode .downArrow {
-  display: inline-block;
-  vertical-align: middle;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 8px 6px 0 6px;
-  border-color: #777 transparent transparent transparent;
-  margin-left: 2px;
-  margin-top: 4px;
+body:not(.action-conversation) .new_topic {
+  width: 340px;
 }
 
 #new_topic .twitter-typeahead {
+    position: absolute !important;
+    top: 45px;
+    left: 41px;
     z-index: 9999;
     width: 256px;
     height: 34px;
@@ -582,8 +554,7 @@ button.button.btn-no:hover {
     margin: 0;
     padding: 10px 6px;
     border: none;
-    border-top-right-radius: 2px;
-    border-bottom-right-radius: 2px;
+    border-radius: 2px;
     outline: none;
     font-size: 14px;
     line-height: 14px;
@@ -600,22 +571,36 @@ button.button.btn-no:hover {
     background-image: url(<%= asset_data_uri('metacodesettings_sprite.png') %>);
     position: absolute;
     z-index: 2;
-    top: -16px;
-    left: -16px;
+    top: 20px;
+    left: 16px;
 }
 .openMetacodeSwitcher:hover {
     background-position: -16px 0;
 }
+.pinCarousel {
+    cursor: pointer;
+    display: block;
+    height: 16px;
+    width: 16px;
+    background-image: url(<%= asset_data_uri('pincarousel_sprite.png') %>);
+    position: absolute;
+    z-index: 2;
+    top: 20px;
+    right: 16px;
+}
+.pinCarousel:hover {
+    background-position: 0 -16px;
+}
+.pinCarousel.isPinned {
+    background-position: -16px 0;
+}
+.pinCarousel.isPinned:hover {
+    background-position: -16px -16px;
+}
 #metacodeImg {
     height: 120px;
-    width: 380px;
-    display: none;
-    position: absolute !important;
-    top: -30px;
-    z-index: -1;
 }
 #metacodeImgTitle {
-    display: none;
     float: left;
     width: 120px;
     text-align: center;

app/controllers/maps_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 class MapsController < ApplicationController
   before_action :require_user, only: [:create, :update, :destroy, :events]
-  before_action :set_map, only: [:show, :update, :destroy, :contains, :events, :export]
+  before_action :set_map, only: [:show, :conversation, :update, :destroy, :contains, :events, :export]
   after_action :verify_authorized
 
   # GET maps/:id
@@ -23,6 +23,23 @@ class MapsController < ApplicationController
       format.ttl { redirect_to action: :export, format: :ttl }
     end
   end
+  
+  # GET maps/:id/conversation
+  def conversation
+    respond_to do |format|
+      format.html do
+        UserMap.where(map: @map, user: current_user).map(&:mark_invite_notifications_as_read)
+        @allmappers = @map.contributors
+        @allcollaborators = @map.editors
+        @alltopics = policy_scope(@map.topics)
+        @allsynapses = policy_scope(@map.synapses)
+        @allmappings = policy_scope(@map.mappings)
+        @allmessages = @map.messages.sort_by(&:created_at)
+        @allstars = @map.stars
+        @allrequests = @map.access_requests
+      end
+    end
+  end
 
   # GET maps/new
   def new

app/policies/map_policy.rb

@@ -20,6 +20,10 @@ class MapPolicy < ApplicationPolicy
       record.collaborators.include?(user) ||
       record.user == user
   end
+  
+  def conversation?
+    show? && %w(connorturland@gmail.com devin@callysto.com chessscholar@gmail.com solaureum@gmail.com ishanshapiro@gmail.com).include?(user.email)
+  end
 
   def create?
     user.present?

app/views/layouts/_head.html.erb

@@ -29,8 +29,14 @@
     <meta name="twitter:url" content="<%= request.original_url %>" />
   <% end %>
 
-  <%= stylesheet_link_tag    "application", :media => "all" %>
-  <%= javascript_include_tag "application" %>
+  <% if controller_name == 'maps' && action_name == "conversation" %>
+    <%= stylesheet_link_tag    "application", :media => "all" %>
+    <%= stylesheet_link_tag    "application-secret", :media => "all" %>
+    <%= javascript_include_tag "application-secret" %>
+  <% else %>
+    <%= stylesheet_link_tag    "application", :media => "all" %>
+    <%= javascript_include_tag "application" %>
+  <% end %>
 
   <!-- typekit for vinyl font -->
   <script type="text/javascript" src="https://use.typekit.net/tki2nyo.js"></script>

app/views/layouts/application.html.erb

@@ -39,7 +39,11 @@
             <div class="showcard mapElement mapElementHidden" id="showcard"></div> <!-- the topic card -->
             <% if authenticated? %>
                 <% # for creating and pulling in topics and synapses %>
-                <%= render :partial => 'maps/newtopic' %>
+                <% if controller_name == 'maps' && action_name == "conversation" %>
+                  <%= render :partial => 'maps/newtopicsecret' %>
+                <% else %>
+                  <%= render :partial => 'maps/newtopic' %>
+                <% end %>
                 <%= render :partial => 'maps/newsynapse' %>
                 <% # for populating the change metacode list on the topic card %>
                 <%= render :partial => 'shared/metacodeoptions' %>
@@ -47,6 +51,21 @@
             <%= render :partial => 'layouts/lowermapelements' %>
 
             <div id="explore"></div>
+
+            <% if !(controller_name == 'maps' && action_name == "conversation") %>
+              <div id="instructions">
+                <div class="addTopic">
+                  Double-click to<br>add a topic
+                </div>
+                <div class="tabKey">
+                  Use Tab & Shift+Tab to select a metacode
+                </div>
+                <div class="enterKey">
+                  Press Enter to add the topic
+                </div>
+              </div>
+            <% end %>
+            
             <div id="infovis"></div>
             <%= render :partial => 'layouts/mobilemenu' %>
             

app/views/maps/_newtopic.html.erb

@@ -1,37 +1,32 @@
+<% @metacodes = user_metacodes() %>
+
 <%= form_for Topic.new, url: topics_url, remote: true do |form| %>
   <div class="openMetacodeSwitcher openLightbox" data-open="switchMetacodes">
     <div class="tooltipsAbove">Switch Metacodes</div>
   </div>
 
+  <div class="pinCarousel">
+    <div class="tooltipsAbove helpPin">Pin Open</div>
+    <div class="tooltipsAbove helpUnpin">Unpin</div>
+  </div>
+
   <div id="metacodeImg">
-    <% @metacodes = user_metacodes()
-       metacode = user_metacode() ? user_metacode() : user_metacodes[0]
-       @metacodes.each do |m| %>
-      <img class="cloudcarousel" width="40" height="40" src="<%= asset_path m.icon %>" alt="<%= m.name %>" title="<%= m.name %>" data-id="<%= m.id %>" />
+    <% @metacodes.each do |metacode| %>
+      <img class="cloudcarousel" width="40" height="40" src="<%= asset_path metacode.icon %>" alt="<%= metacode.name %>" title="<%= metacode.name %>" data-id="<%= metacode.id %>" />
     <% end %>
   </div>
-  <div class="selectedMetacode">
-    <img src="<%= asset_path metacode.icon %>" />
-    <span><%= metacode.name %></span>
-    <div class="downArrow"></div>
-  </div>
-  <%= form.text_field :name, :maxlength => 140, :placeholder => "what are you thinking..." %>
+
+  <%= form.text_field :name, :maxlength => 140, :placeholder => "title..." %>
+
+  <div id="metacodeImgTitle"></div>
   <div class="clearfloat"></div>
-  <div id="metacodeSelector"></div>
-  <div class="clearfloat"></div>
-<script>
-<% @metacodes.each do |m| %>
-  Metamaps.Create.selectedMetacodes.push("<%= m.id %>");
-  Metamaps.Create.newSelectedMetacodes.push("<%= m.id %>");
-  Metamaps.Create.selectedMetacodeNames.push("<%= m.name %>");
-  Metamaps.Create.newSelectedMetacodeNames.push("<%= m.name %>");
-<% end %> 
-Metamaps.Create.newTopic.metacode = <%= metacode.id %>
-<% current_user.recent_metacodes.each do |id| %>
-    Metamaps.Create.recentMetacodes.push(<%= id %>);
-<% end %>
-<% current_user.most_used_metacodes.each do |id| %>
-    Metamaps.Create.mostUsedMetacodes.push(<%= id %>);
-<% end %>
-</script>
+
+  <script>
+    <% @metacodes.each do |metacode| %>
+      Metamaps.Create.selectedMetacodes.push("<%= metacode.id %>");
+      Metamaps.Create.newSelectedMetacodes.push("<%= metacode.id %>");
+      Metamaps.Create.selectedMetacodeNames.push("<%= metacode.name %>");
+      Metamaps.Create.newSelectedMetacodeNames.push("<%= metacode.name %>");
+    <% end %> 
+  </script>
 <% end %>

app/views/maps/_newtopicsecret.html.erb

@@ -0,0 +1,36 @@
+<%= form_for Topic.new, url: topics_url, remote: true do |form| %>
+  <div class="openMetacodeSwitcher openLightbox" data-open="switchMetacodes">
+    <div class="tooltipsAbove">Switch Metacodes</div>
+  </div>
+
+  <div id="metacodeImg">
+    <% @metacodes = user_metacodes()
+       @metacodes.each do |m| %>
+      <img class="cloudcarousel" width="40" height="40" src="<%= asset_path m.icon %>" alt="<%= m.name %>" title="<%= m.name %>" data-id="<%= m.id %>" />
+    <% end %>
+  </div>
+  <div class="selectedMetacode">
+    <img src="<%= asset_path @metacodes[0].icon %>" />
+    <span><%= @metacodes[0].name %></span>
+    <div class="downArrow"></div>
+  </div>
+  <%= form.text_field :name, :maxlength => 140, :placeholder => "what are you thinking..." %>
+  <div class="clearfloat"></div>
+  <div id="metacodeSelector"></div>
+  <div class="clearfloat"></div>
+<script>
+<% @metacodes.each do |m| %>
+  Metamaps.Create.selectedMetacodes.push("<%= m.id %>");
+  Metamaps.Create.newSelectedMetacodes.push("<%= m.id %>");
+  Metamaps.Create.selectedMetacodeNames.push("<%= m.name %>");
+  Metamaps.Create.newSelectedMetacodeNames.push("<%= m.name %>");
+<% end %> 
+Metamaps.Create.newTopic.metacode = <%= @metacodes[0].id %>
+<% current_user.recent_metacodes.each do |id| %>
+    Metamaps.Create.recentMetacodes.push(<%= id %>);
+<% end %>
+<% current_user.most_used_metacodes.each do |id| %>
+    Metamaps.Create.mostUsedMetacodes.push(<%= id %>);
+<% end %>
+</script>
+<% end %>

app/views/maps/conversation.html.erb

@@ -0,0 +1,22 @@
+<%#
+# @file
+# Code to display a map
+# /maps/:id
+#%>
+
+<% content_for :title, @map.name + " | Metamaps" %>
+<% content_for :mobile_title, @map.name %>
+<script>
+	Metamaps.currentSection = "map";
+	Metamaps.currentPage = <%= @map.id.to_s %>;
+  Metamaps.ServerData = Metamaps.ServerData || {}
+  Metamaps.ServerData.ActiveMap = <%= @map.to_json.html_safe %>;
+  Metamaps.ServerData.Mappers = <%= @allmappers.to_json.html_safe %>;
+  Metamaps.ServerData.Collaborators = <%= @allcollaborators.to_json.html_safe %>;
+  Metamaps.ServerData.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
+  Metamaps.ServerData.Synapses = <%= @allsynapses.to_json.html_safe %>;
+  Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>;
+  Metamaps.ServerData.Messages = <%= @allmessages.to_json.html_safe %>;
+  Metamaps.ServerData.Stars = <%= @allstars.to_json.html_safe %>;
+  Metamaps.ServerData.VisualizeType = "ForceDirected";
+</script>

app/views/shared/_switchmetacodes.html.erb

@@ -116,4 +116,4 @@
 <script>
   Metamaps.Create.selectedMetacodeSet = "metacodeset-<%= selectedSet %>"
   Metamaps.Create.selectedMetacodeSetIndex = <%= index %>
-</script>
+</script>

config/initializers/assets.rb

@@ -9,5 +9,5 @@ Rails.application.configure do
 
   # Precompile additional assets.
   # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-  config.assets.precompile += %w(webpacked/metamaps.bundle.js)
+  config.assets.precompile += %w( application-secret.css application-secret.js webpacked/metamaps.bundle.js )
 end

config/routes.rb

@@ -18,6 +18,7 @@ Metamaps::Application.routes.draw do
 
   resources :maps, except: [:index, :edit] do
     member do
+      get :conversation
       get :export
       post 'events/:event', action: :events
       get :contains

spec/models/mapping_spec.rb

@@ -5,8 +5,6 @@ RSpec.describe Mapping, type: :model do
   it { is_expected.to belong_to :user }
   it { is_expected.to belong_to :map }
   it { is_expected.to belong_to :mappable }
-  it { is_expected.to validate_presence_of :xloc }
-  it { is_expected.to validate_presence_of :yloc }
   it { is_expected.to validate_presence_of :map }
   it { is_expected.to validate_presence_of :mappable }
 end