Secret.convo (#1059)
* set up for using secret css/js * testing * add stuff * final tweak for secret convos * looks like its all working * realized this change is just good all around * minor touch ups * only us for now * no longer validate presence of xloc/yloc * fix syntax issue
This commit is contained in:
Connor Turland
GitHub
parent
3ae4072b5d
commit
0441850504
23
app/assets/javascripts/application-secret.js
Normal file
23
app/assets/javascripts/application-secret.js
Normal file
|
|
@ -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 */
|
||||
438
app/assets/javascripts/cloudcarousel-secret.js
Normal file
438
app/assets/javascripts/cloudcarousel-secret.js
Normal file
|
|
@ -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);
|
||||
3836
app/assets/javascripts/metamaps.secret.bundle.js
Normal file
3836
app/assets/javascripts/metamaps.secret.bundle.js
Normal file
File diff suppressed because one or more lines are too long
12
app/assets/secret_stylesheets/application-secret.scss.erb
Normal file
12
app/assets/secret_stylesheets/application-secret.scss.erb
Normal file
|
|
@ -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
|
||||
*/
|
||||
109
app/assets/secret_stylesheets/special.scss.erb
Normal file
109
app/assets/secret_stylesheets/special.scss.erb
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -531,10 +531,12 @@ button.button.btn-no:hover {
|
|||
left: -1000px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 340px;
|
||||
margin: -40px 0 0 -35px;
|
||||
z-index: 1;
|
||||
}
|
||||
body:not(.action-conversation) .new_topic {
|
||||
width: 340px;
|
||||
}
|
||||
|
||||
#new_topic .twitter-typeahead {
|
||||
position: absolute !important;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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?
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,18 +51,20 @@
|
|||
<%= render :partial => 'layouts/lowermapelements' %>
|
||||
|
||||
<div id="explore"></div>
|
||||
|
||||
<div id="instructions">
|
||||
<div class="addTopic">
|
||||
Double-click to<br>add a topic
|
||||
|
||||
<% 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>
|
||||
<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' %>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<% @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>
|
||||
|
||||
<%= form.text_field :name, :maxlength => 140, :placeholder => "title..." %>
|
||||
|
||||
|
|
@ -23,12 +23,10 @@
|
|||
|
||||
<script>
|
||||
<% @metacodes.each do |metacode| %>
|
||||
<% if !metacodeset() %>
|
||||
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 %>
|
||||
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 %>
|
||||
|
|
|
|||
36
app/views/maps/_newtopicsecret.html.erb
Normal file
36
app/views/maps/_newtopicsecret.html.erb
Normal file
|
|
@ -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 %>
|
||||
22
app/views/maps/conversation.html.erb
Normal file
22
app/views/maps/conversation.html.erb
Normal file
|
|
@ -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>
|
||||
|
|
@ -93,12 +93,9 @@
|
|||
<div id="metacodeSwitchTabsCustom">
|
||||
<p class="setDesc">Choose Your Metacodes</p>
|
||||
<% @list = '' %>
|
||||
<% metacodesInUse = user_metacodes() %>
|
||||
<% Metacode.order("name").all.each_with_index do |m, index| %>
|
||||
<% if selectedSet == "custom" %>
|
||||
<% mClass = metacodes.index(m.id.to_s) == nil ? "toggledOff" : "" %>
|
||||
<% else %>
|
||||
<% mClass = "toggledOff" %>
|
||||
<% end %>
|
||||
<% mClass = metacodesInUse.index(m) == nil ? "toggledOff" : "" %>
|
||||
<% @list += '<li id="' + m.id.to_s + '" data-name="' + m.name + '" class="' + mClass + '"><img src="' + asset_path(m.icon) + '" alt="' + m.name + '" /><p>' + m.name.downcase + '</p><div class="clearfloat"></div></li>' %>
|
||||
<% end %>
|
||||
|
||||
|
|
@ -119,4 +116,4 @@
|
|||
<script>
|
||||
Metamaps.Create.selectedMetacodeSet = "metacodeset-<%= selectedSet %>"
|
||||
Metamaps.Create.selectedMetacodeSetIndex = <%= index %>
|
||||
</script>
|
||||
</script>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue