almost rid of famous completely
This commit is contained in:
Connor Turland
parent
aed423214f
commit
30e9a27663
21 changed files with 181 additions and 21268 deletions
50
app/assets/javascripts/famous/famous.min.js
vendored
50
app/assets/javascripts/famous/famous.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,42 +0,0 @@
|
|||
/**
|
||||
* ReactDOM v15.3.0
|
||||
*
|
||||
* Copyright 2013-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
*/
|
||||
// Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
|
||||
;(function(f) {
|
||||
// CommonJS
|
||||
if (typeof exports === "object" && typeof module !== "undefined") {
|
||||
module.exports = f(require('react'));
|
||||
|
||||
// RequireJS
|
||||
} else if (typeof define === "function" && define.amd) {
|
||||
define(['react'], f);
|
||||
|
||||
// <script>
|
||||
} else {
|
||||
var g;
|
||||
if (typeof window !== "undefined") {
|
||||
g = window;
|
||||
} else if (typeof global !== "undefined") {
|
||||
g = global;
|
||||
} else if (typeof self !== "undefined") {
|
||||
g = self;
|
||||
} else {
|
||||
// works providing we're not in "use strict";
|
||||
// needed for Java 8 Nashorn
|
||||
// see https://github.com/facebook/react/issues/3037
|
||||
g = this;
|
||||
}
|
||||
g.ReactDOM = f(g.React);
|
||||
}
|
||||
|
||||
})(function(React) {
|
||||
return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
||||
});
|
||||
20640
app/assets/javascripts/orderedLibraries/react.js
vendored
20640
app/assets/javascripts/orderedLibraries/react.js
vendored
File diff suppressed because it is too large
Load diff
|
|
@ -2680,10 +2680,7 @@ var Canvas;
|
|||
opt.injectInto:opt.injectInto.id,
|
||||
type = opt.type,
|
||||
idLabel = id + "-label",
|
||||
// ORIGINAL CODE wrapper = $(id),
|
||||
// START METAMAPS CODE
|
||||
//wrapper = Metamaps.Famous.viz.surf,
|
||||
// END METAMAPS CODE
|
||||
wrapper = $(id),
|
||||
width = opt.width, // || wrapper.offsetWidth,
|
||||
height = opt.height; // || wrapper.offsetHeight;
|
||||
this.id = id;
|
||||
|
|
@ -2730,15 +2727,7 @@ var Canvas;
|
|||
}
|
||||
}
|
||||
this.element.appendChild(this.labelContainer);
|
||||
|
||||
// START METAMAPS CODE
|
||||
var m = Metamaps.Famous.viz.surf;
|
||||
m.setContent(this.element);
|
||||
m.deploy(m._currTarget);
|
||||
|
||||
// END METAMAPS CODE
|
||||
// ORIGINAL CODE wrapper.appendChild(this.element);
|
||||
|
||||
wrapper.appendChild(this.element);
|
||||
|
||||
//Update canvas position when the page is scrolled.
|
||||
var timer = null, that = this;
|
||||
|
|
|
|||
|
|
@ -5,23 +5,23 @@
|
|||
*
|
||||
* Dependencies:
|
||||
* - Metamaps.Active
|
||||
* - Metamaps.Collaborators
|
||||
* - Metamaps.Collaborators
|
||||
* - Metamaps.Creators
|
||||
* - Metamaps.Filter
|
||||
* - Metamaps.JIT
|
||||
* - Metamaps.Loading
|
||||
* - Metamaps.Map
|
||||
* - Metamaps.Mapper
|
||||
* - Metamaps.Mappers
|
||||
* - Metamaps.Mappings
|
||||
* - Metamaps.Metacodes
|
||||
* - Metamaps.Mappers
|
||||
* - Metamaps.Mappings
|
||||
* - Metamaps.Metacodes
|
||||
* - Metamaps.Realtime
|
||||
* - Metamaps.Synapse
|
||||
* - Metamaps.SynapseCard
|
||||
* - Metamaps.Synapses
|
||||
* - Metamaps.Topic
|
||||
* - Metamaps.TopicCard
|
||||
* - Metamaps.Topics
|
||||
* - Metamaps.Topics
|
||||
* - Metamaps.Visualize
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -43,20 +43,46 @@ Metamaps.Active = {
|
|||
Metamaps.Maps = {};
|
||||
|
||||
$(document).ready(function () {
|
||||
function init() {
|
||||
for (var prop in Metamaps) {
|
||||
|
||||
// this runs the init function within each sub-object on the Metamaps one
|
||||
if (Metamaps.hasOwnProperty(prop) &&
|
||||
Metamaps[prop] != null &&
|
||||
Metamaps[prop].hasOwnProperty('init') &&
|
||||
typeof (Metamaps[prop].init) == 'function'
|
||||
) {
|
||||
Metamaps[prop].init();
|
||||
}
|
||||
}
|
||||
// initialize all the modules
|
||||
for (var prop in Metamaps) {
|
||||
// this runs the init function within each sub-object on the Metamaps one
|
||||
if (Metamaps.hasOwnProperty(prop) &&
|
||||
Metamaps[prop] != null &&
|
||||
Metamaps[prop].hasOwnProperty('init') &&
|
||||
typeof (Metamaps[prop].init) == 'function'
|
||||
) {
|
||||
Metamaps[prop].init();
|
||||
}
|
||||
}
|
||||
// load whichever page you are on
|
||||
if (Metamaps.currentSection === "explore") {
|
||||
var capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1);
|
||||
|
||||
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
|
||||
if (Metamaps.currentPage === "mapper") {
|
||||
Metamaps.Views.exploreMaps.fetchUserThenRender();
|
||||
}
|
||||
else {
|
||||
Metamaps.Views.exploreMaps.render();
|
||||
}
|
||||
Metamaps.GlobalUI.showDiv('#exploreMaps')
|
||||
//f.explore.set(Metamaps.currentPage, Metamaps.Maps.Mapper.mapperId);
|
||||
Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
|
||||
}
|
||||
else if (Metamaps.currentSection === "") {
|
||||
if (Metamaps.Active.Mapper) {
|
||||
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
|
||||
Metamaps.Views.exploreMaps.render();
|
||||
Metamaps.GlobalUI.showDiv('#exploreMaps')
|
||||
//f.explore.set('active');
|
||||
Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
|
||||
}
|
||||
}
|
||||
else if (Metamaps.Active.Map || Metamaps.Active.Topic) {
|
||||
Metamaps.Loading.show()
|
||||
Metamaps.JIT.prepareVizData()
|
||||
Metamaps.GlobalUI.showDiv('#infovis')
|
||||
}
|
||||
init();
|
||||
});
|
||||
|
||||
Metamaps.GlobalUI = {
|
||||
|
|
@ -98,6 +124,17 @@ Metamaps.GlobalUI = {
|
|||
Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, {id: 'featured', sortBy: 'updated_at' });
|
||||
Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, {id: 'active', sortBy: 'updated_at' });
|
||||
},
|
||||
showDiv: function (selector) {
|
||||
$(selector).show()
|
||||
$(selector).animate({
|
||||
opacity: 1
|
||||
}, 200, 'easeOutCubic')
|
||||
},
|
||||
hideDiv: function (selector) {
|
||||
$(selector).animate({
|
||||
opacity: 0
|
||||
}, 200, 'easeInCubic', function () { $(this).hide() })
|
||||
},
|
||||
openLightbox: function (which) {
|
||||
var self = Metamaps.GlobalUI;
|
||||
|
||||
|
|
@ -153,33 +190,20 @@ Metamaps.GlobalUI = {
|
|||
notifyUser: function (message, leaveOpen) {
|
||||
var self = Metamaps.GlobalUI;
|
||||
|
||||
function famousReady() {
|
||||
Metamaps.Famous.toast.surf.setContent(message);
|
||||
Metamaps.Famous.toast.show();
|
||||
clearTimeout(self.notifyTimeOut);
|
||||
if (!leaveOpen) {
|
||||
self.notifyTimeOut = setTimeout(function () {
|
||||
Metamaps.Famous.toast.hide();
|
||||
}, 8000);
|
||||
}
|
||||
}
|
||||
|
||||
// initialize the famous ui
|
||||
var callFamous = function(){
|
||||
if (Metamaps.Famous && Metamaps.Famous.toast) {
|
||||
famousReady();
|
||||
}
|
||||
else {
|
||||
setTimeout(callFamous, 100);
|
||||
}
|
||||
}
|
||||
callFamous();
|
||||
$('#toast').html(message)
|
||||
self.showDiv('#toast')
|
||||
clearTimeout(self.notifyTimeOut);
|
||||
if (!leaveOpen) {
|
||||
self.notifyTimeOut = setTimeout(function () {
|
||||
self.hideDiv('#toast')
|
||||
}, 8000);
|
||||
}
|
||||
},
|
||||
clearNotify: function() {
|
||||
var self = Metamaps.GlobalUI;
|
||||
|
||||
clearTimeout(self.notifyTimeOut);
|
||||
Metamaps.Famous.toast.hide();
|
||||
self.hideDiv('#toast')
|
||||
},
|
||||
shareInvite: function(inviteLink) {
|
||||
window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
|
||||
|
|
|
|||
|
|
@ -111,10 +111,12 @@ Metamaps.JIT = {
|
|||
})
|
||||
|
||||
if (self.vizData.length == 0) {
|
||||
Metamaps.Famous.viz.showInstructions()
|
||||
$('#instructions div').hide()
|
||||
$('#instructions div.addTopic').show()
|
||||
Metamaps.GlobalUI.showDiv('#instructions')
|
||||
Metamaps.Visualize.loadLater = true
|
||||
}
|
||||
else Metamaps.Famous.viz.hideInstructions()
|
||||
else Metamaps.GlobalUI.hideDiv('#instructions')
|
||||
|
||||
Metamaps.Visualize.render()
|
||||
}, // prepareVizData
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
*
|
||||
* Dependencies:
|
||||
* - Metamaps.Active
|
||||
* - Metamaps.Famous
|
||||
* - Metamaps.GlobalUI
|
||||
* - Metamaps.JIT
|
||||
* - Metamaps.Loading
|
||||
|
|
@ -42,15 +41,15 @@
|
|||
Metamaps.Router.navigate('')
|
||||
}, 300)
|
||||
}
|
||||
|
||||
// all this only for the logged in home page
|
||||
if (Metamaps.Active.Mapper) {
|
||||
Metamaps.Famous.yield.hide()
|
||||
Metamaps.GlobalUI.hideDiv('#yield')
|
||||
|
||||
Metamaps.Famous.explore.set('active')
|
||||
Metamaps.Famous.maps.resetScroll() // sets the scroll back to the top
|
||||
Metamaps.Famous.explore.show()
|
||||
|
||||
Metamaps.Famous.maps.show()
|
||||
//Metamaps.Famous.explore.set('active')
|
||||
//Metamaps.Famous.maps.resetScroll() // sets the scroll back to the top
|
||||
Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
|
||||
Metamaps.GlobalUI.showDiv('#exploreMaps')
|
||||
|
||||
Metamaps.GlobalUI.Search.open()
|
||||
Metamaps.GlobalUI.Search.lock()
|
||||
|
|
@ -63,18 +62,16 @@
|
|||
}
|
||||
} else {
|
||||
// logged out home page
|
||||
Metamaps.Famous.yield.show()
|
||||
|
||||
Metamaps.Famous.explore.hide()
|
||||
|
||||
Metamaps.GlobalUI.hideDiv('#exploreMapsHeader')
|
||||
Metamaps.GlobalUI.hideDiv('#exploreMaps')
|
||||
Metamaps.GlobalUI.showDiv('#yield')
|
||||
Metamaps.GlobalUI.Search.unlock()
|
||||
Metamaps.GlobalUI.Search.close(0, true)
|
||||
|
||||
Metamaps.Famous.maps.hide()
|
||||
Metamaps.Router.timeoutId = setTimeout(navigate, 500)
|
||||
}
|
||||
|
||||
Metamaps.Famous.viz.hide()
|
||||
Metamaps.GlobalUI.hideDiv('#infovis')
|
||||
Metamaps.GlobalUI.hideDiv('#instructions')
|
||||
Metamaps.Map.end()
|
||||
Metamaps.Topic.end()
|
||||
Metamaps.Active.Map = null
|
||||
|
|
@ -148,15 +145,13 @@
|
|||
|
||||
Metamaps.GlobalUI.Search.open()
|
||||
Metamaps.GlobalUI.Search.lock()
|
||||
|
||||
Metamaps.Famous.yield.hide()
|
||||
|
||||
Metamaps.Famous.maps.resetScroll() // sets the scroll back to the top
|
||||
Metamaps.Famous.maps.show()
|
||||
Metamaps.Famous.explore.set(section, id)
|
||||
Metamaps.Famous.explore.show()
|
||||
|
||||
Metamaps.Famous.viz.hide()
|
||||
Metamaps.GlobalUI.showDiv('#exploreMaps')
|
||||
Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
|
||||
// Metamaps.Famous.maps.resetScroll() // sets the scroll back to the top
|
||||
//Metamaps.Famous.explore.set(section, id)
|
||||
Metamaps.GlobalUI.hideDiv('#yield')
|
||||
Metamaps.GlobalUI.hideDiv('#infovis')
|
||||
Metamaps.GlobalUI.hideDiv('#instructions')
|
||||
Metamaps.Map.end()
|
||||
Metamaps.Topic.end()
|
||||
Metamaps.Active.Map = null
|
||||
|
|
@ -175,9 +170,9 @@
|
|||
// another class will be added to wrapper if you
|
||||
// can edit this map '.canEditMap'
|
||||
|
||||
Metamaps.Famous.yield.hide()
|
||||
Metamaps.Famous.maps.hide()
|
||||
Metamaps.Famous.explore.hide()
|
||||
Metamaps.GlobalUI.hideDiv('#yield')
|
||||
Metamaps.GlobalUI.hideDiv('#exploreMaps')
|
||||
Metamaps.GlobalUI.hideDiv('#exploreMapsHeader')
|
||||
|
||||
// clear the visualization, if there was one, before showing its div again
|
||||
if (Metamaps.Visualize.mGraph) {
|
||||
|
|
@ -185,7 +180,7 @@
|
|||
Metamaps.Visualize.mGraph.plot()
|
||||
Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas)
|
||||
}
|
||||
Metamaps.Famous.viz.show()
|
||||
Metamaps.GlobalUI.showDiv('#infovis')
|
||||
Metamaps.Topic.end()
|
||||
Metamaps.Active.Topic = null
|
||||
|
||||
|
|
@ -207,9 +202,9 @@
|
|||
$('.wrapper').removeClass('homePage explorePage mapPage')
|
||||
$('.wrapper').addClass('topicPage')
|
||||
|
||||
Metamaps.Famous.yield.hide()
|
||||
Metamaps.Famous.maps.hide()
|
||||
Metamaps.Famous.explore.hide()
|
||||
Metamaps.GlobalUI.hideDiv('#yield')
|
||||
Metamaps.GlobalUI.hideDiv('#exploreMaps')
|
||||
Metamaps.GlobalUI.hideDiv('#exploreMapsHeader')
|
||||
|
||||
// clear the visualization, if there was one, before showing its div again
|
||||
if (Metamaps.Visualize.mGraph) {
|
||||
|
|
@ -217,7 +212,7 @@
|
|||
Metamaps.Visualize.mGraph.plot()
|
||||
Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas)
|
||||
}
|
||||
Metamaps.Famous.viz.show()
|
||||
Metamaps.GlobalUI.showDiv('#infovis')
|
||||
Metamaps.Map.end()
|
||||
Metamaps.Active.Map = null
|
||||
|
||||
|
|
|
|||
|
|
@ -291,7 +291,7 @@ Metamaps.Topic = {
|
|||
}
|
||||
|
||||
// hide the 'double-click to add a topic' message
|
||||
Metamaps.Famous.viz.hideInstructions()
|
||||
Metamaps.GlobalUI.hideDiv('#instructions')
|
||||
|
||||
$(document).trigger(Metamaps.Map.events.editedByActiveMapper)
|
||||
|
||||
|
|
|
|||
|
|
@ -80,24 +80,8 @@ Metamaps.Views.init = function () {
|
|||
that.el.appendChild(view.render().el)
|
||||
})
|
||||
this.$el.append('<div class="clearfloat"></div>')
|
||||
var m = Metamaps.Famous.maps.surf
|
||||
m.setContent(this.el)
|
||||
|
||||
var updateHeight = function () {
|
||||
var height = $(that.el).height() + 32 + 56
|
||||
m.setSize([undefined, height])
|
||||
Metamaps.Famous.maps.lock = false
|
||||
if (cb) cb()
|
||||
}
|
||||
|
||||
if (!Metamaps.Views.initialized) {
|
||||
m.deploy(m._currTarget)
|
||||
Metamaps.Views.initialized = true
|
||||
setTimeout(updateHeight, 100)
|
||||
} else {
|
||||
setTimeout(updateHeight, 100)
|
||||
}
|
||||
|
||||
$('#exploreMaps').empty().html(this.el)
|
||||
if (cb) cb()
|
||||
Metamaps.Loading.hide()
|
||||
},
|
||||
handleSuccess: function (cb) {
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
var signedIn = true
|
||||
|
||||
var ExploreHeader = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<div className="exploreMapsBar exploreElement">
|
||||
<div className="exploreMapsMenu">
|
||||
<div className="exploreMapsCenter">
|
||||
{signedIn ? <a href="/explore/mine" className="myMaps exploreMapsButton">
|
||||
<div className="exploreMapsIcon"></div>
|
||||
My Maps
|
||||
</a> : null }
|
||||
{signedIn ? <a href="/explore/shared" className="sharedMaps exploreMapsButton">
|
||||
<div className="exploreMapsIcon"></div>
|
||||
Shared With Me
|
||||
</a> : null }
|
||||
<a href={signedIn ? "/" : "/explore/active"} className="activeMaps exploreMapsButton">
|
||||
<div className="exploreMapsIcon"></div>
|
||||
Recently Active
|
||||
</a>
|
||||
{!signedIn ? <a href="/explore/featured" className="featuredMaps exploreMapsButton">
|
||||
<div className="exploreMapsIcon"></div>
|
||||
Featured Maps
|
||||
</a> : null }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<ExploreHeader active="featured" />, document.getElementById('exploreMapsHeader')
|
||||
);
|
||||
|
|
@ -49,6 +49,8 @@
|
|||
#infovis {
|
||||
width:100%;
|
||||
height:100%;
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.showcard .permission {
|
||||
|
|
|
|||
|
|
@ -24,17 +24,8 @@
|
|||
backface-visibility: visible !important;
|
||||
}
|
||||
|
||||
#famousOverlay {
|
||||
position:absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin:0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#yield {
|
||||
display:none;
|
||||
|
||||
}
|
||||
|
||||
#toast {
|
||||
|
|
@ -68,6 +59,7 @@
|
|||
/* loading */
|
||||
|
||||
#loading {
|
||||
display: none;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
position: fixed;
|
||||
|
|
@ -602,11 +594,17 @@
|
|||
|
||||
/* end mapControls */
|
||||
|
||||
|
||||
|
||||
/* explore maps */
|
||||
|
||||
#exploreMaps {
|
||||
display: none;
|
||||
padding: 110px 5% 40px 5%;
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#exploreMapsHeader {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -712,6 +710,25 @@
|
|||
|
||||
/* end explore maps */
|
||||
|
||||
/* instructions */
|
||||
|
||||
#instructions {
|
||||
width: 220px;
|
||||
height: 80px;
|
||||
font-family: 'din-regular', helvetica, sans-serif;
|
||||
font-size: 32px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
z-index: 0;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-top: -40px;
|
||||
margin-left: -110px;
|
||||
}
|
||||
|
||||
/* end instructions */
|
||||
|
||||
/* toast */
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
USERVOICE.load();
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="<%= asset_path 'webpacked/metamaps.bundle.js' %>"></script>
|
||||
<%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,6 @@
|
|||
|
||||
<%= stylesheet_link_tag "application", :media => "all" %>
|
||||
<%= javascript_include_tag "application" %>
|
||||
<script type="text/babel" src="<%= asset_path 'src/react/app.js' %>"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
|
||||
|
||||
<!-- typekit for vinyl font -->
|
||||
<script type="text/javascript" src="https://use.typekit.net/tki2nyo.js"></script>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,7 @@
|
|||
|
||||
<body class="<%= authenticated? ? "authenticated" : "unauthenticated" %>">
|
||||
|
||||
<% if devise_error_messages? %>
|
||||
<p id="toast"><%= devise_error_messages! %></p>
|
||||
<% elsif notice %>
|
||||
<p id="toast"><%= notice %></p>
|
||||
<% end %>
|
||||
|
||||
|
||||
<%= content_tag :div, class: "main" do %>
|
||||
|
||||
|
|
@ -48,7 +44,25 @@
|
|||
<% end %>
|
||||
<%= render :partial => 'layouts/lowermapelements' %>
|
||||
|
||||
<div id="exploreMaps"></div>
|
||||
<div id="exploreMapsHeader"></div>
|
||||
<div id="infovis"></div>
|
||||
<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>
|
||||
<% if devise_error_messages? %>
|
||||
<p id="toast"><%= devise_error_messages! %></p>
|
||||
<% elsif notice %>
|
||||
<p id="toast"><%= notice %></p>
|
||||
<% end %>
|
||||
<div id="loading"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,4 +23,4 @@
|
|||
Metamaps.Topics = <%= @alltopics.to_json.html_safe %>;
|
||||
Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
|
||||
Metamaps.Visualize.type = "RGraph";
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Rails.application.config.assets.precompile += %w( src/react/app.js )
|
||||
Rails.application.config.assets.precompile += %w( webpacked/metamaps.bundle.js )
|
||||
|
|
|
|||
|
|
@ -2,8 +2,30 @@ import React, { Component, PropTypes } from 'react'
|
|||
|
||||
class ExploreHeader extends Component {
|
||||
render = () => {
|
||||
const signedIn = this.props.signedIn
|
||||
return (
|
||||
<p>ExploreHeader component could go here</p>
|
||||
<div className="exploreMapsBar exploreElement">
|
||||
<div className="exploreMapsMenu">
|
||||
<div className="exploreMapsCenter">
|
||||
{signedIn ? <a href="/explore/mine" className="myMaps exploreMapsButton">
|
||||
<div className="exploreMapsIcon"></div>
|
||||
My Maps
|
||||
</a> : null }
|
||||
{signedIn ? <a href="/explore/shared" className="sharedMaps exploreMapsButton">
|
||||
<div className="exploreMapsIcon"></div>
|
||||
Shared With Me
|
||||
</a> : null }
|
||||
<a href={signedIn ? "/" : "/explore/active"} className="activeMaps exploreMapsButton">
|
||||
<div className="exploreMapsIcon"></div>
|
||||
Recently Active
|
||||
</a>
|
||||
{!signedIn ? <a href="/explore/featured" className="featuredMaps exploreMapsButton">
|
||||
<div className="exploreMapsIcon"></div>
|
||||
Featured Maps
|
||||
</a> : null }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Backbone from 'backbone'
|
|||
import _ from 'underscore'
|
||||
import ExploreHeader from './components/ExploreHeader'
|
||||
|
||||
// this is optional really, if we import components directly React will be
|
||||
// this is optional really, if we import components directly React will be
|
||||
// in the bundle, so we won't need a global reference
|
||||
window.React = React
|
||||
window.ReactDOM = ReactDOM
|
||||
|
|
@ -16,3 +16,7 @@ window.Metamaps = window.Metamaps || {}
|
|||
window.Metamaps.ReactComponents = {
|
||||
ExploreHeader
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<ExploreHeader signedIn={true} active="featured" />, document.getElementById('exploreMapsHeader')
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,383 +26,11 @@ Metamaps.Famous.build = function () {
|
|||
|
||||
|
||||
// INFOVIS
|
||||
f.viz = {};
|
||||
|
||||
var instructions = {
|
||||
addTopic: "Double-click to<br>add a topic!",
|
||||
tabKey: "Use Tab & Shift+Tab to select a metacode",
|
||||
enterKey: "Press Enter to add the topic"
|
||||
};
|
||||
|
||||
f.viz.surf = new Surface({
|
||||
size: [undefined, undefined],
|
||||
classes: [],
|
||||
properties: {
|
||||
display: "none",
|
||||
zIndex: "1"
|
||||
}
|
||||
});
|
||||
|
||||
var instrShowing = false;
|
||||
f.viz.instrSurf = new Surface({
|
||||
content: instructions.addTopic,
|
||||
size: [220, 80],
|
||||
classes: ["doubleClickSurf"],
|
||||
properties: {
|
||||
fontFamily: "'din-regular', helvetica, sans-serif",
|
||||
fontSize: "32px",
|
||||
display: "none",
|
||||
textAlign: "center",
|
||||
color: "#999999",
|
||||
zIndex: "0"
|
||||
}
|
||||
});
|
||||
var prepare = function () {
|
||||
f.viz.show();
|
||||
Metamaps.JIT.prepareVizData();
|
||||
f.viz.surf.removeListener('deploy',prepare);
|
||||
};
|
||||
if (Metamaps.currentSection === "map" || Metamaps.currentSection === "topic") {
|
||||
f.viz.surf.on('deploy', prepare);
|
||||
}
|
||||
f.viz.mod = new Modifier({
|
||||
origin: [0.5, 0.5],
|
||||
opacity: 0
|
||||
});
|
||||
f.viz.show = function () {
|
||||
f.viz.surf.setProperties({ "display":"block" });
|
||||
f.viz.mod.setOpacity(
|
||||
1,
|
||||
{ duration: 300 }
|
||||
);
|
||||
};
|
||||
f.viz.hide = function () {
|
||||
f.viz.mod.setOpacity(
|
||||
0,
|
||||
{ duration: 300 },
|
||||
function() {
|
||||
f.viz.surf.setProperties({"display": "none"});
|
||||
}
|
||||
);
|
||||
};
|
||||
f.viz.isInstrShowing = function() {
|
||||
return instrShowing;
|
||||
}
|
||||
f.viz.showInstructions = function() {
|
||||
instrShowing = true;
|
||||
f.viz.instrSurf.setProperties({ "display":"block" });
|
||||
};
|
||||
f.viz.hideInstructions = function() {
|
||||
instrShowing = false;
|
||||
f.viz.instrSurf.setProperties({ "display":"none" });
|
||||
};
|
||||
var vizMod = f.mainContext.add(f.viz.mod);
|
||||
vizMod.add(f.viz.surf);
|
||||
vizMod.add(f.viz.instrSurf);
|
||||
|
||||
// CONTENT / OTHER PAGES
|
||||
f.yield = {};
|
||||
f.yield.surf = new Surface({
|
||||
size: [undefined, undefined],
|
||||
classes: ['famousYield'],
|
||||
properties: {
|
||||
display: 'none'
|
||||
}
|
||||
});
|
||||
var loadYield = function () {
|
||||
f.loadYield();
|
||||
f.yield.surf.removeListener('deploy',loadYield);
|
||||
};
|
||||
if (!(Metamaps.currentSection === "map" ||
|
||||
Metamaps.currentSection === "topic" ||
|
||||
Metamaps.currentSection === "explore" ||
|
||||
(Metamaps.currentSection === "" && Metamaps.Active.Mapper) )) {
|
||||
f.yield.surf.on('deploy', loadYield);
|
||||
}
|
||||
f.yield.mod = new Modifier({
|
||||
origin: [0.5, 0.5],
|
||||
opacity: 0
|
||||
});
|
||||
f.yield.show = function () {
|
||||
f.yield.surf.setProperties({ "display":"block" });
|
||||
f.yield.mod.setOpacity(
|
||||
1,
|
||||
{ duration: 300 }
|
||||
);
|
||||
};
|
||||
f.yield.hide = function () {
|
||||
f.yield.mod.setOpacity(
|
||||
0,
|
||||
{ duration: 300 },
|
||||
function() {
|
||||
f.yield.surf.setProperties({"display": "none"});
|
||||
}
|
||||
);
|
||||
};
|
||||
f.mainContext.add(f.yield.mod).add(f.yield.surf);
|
||||
|
||||
f.loadYield = function () {
|
||||
Metamaps.Loading.hide();
|
||||
|
||||
var y = document.getElementById('yield');
|
||||
var yield = y ? y.innerHTML : false;
|
||||
if (yield) {
|
||||
f.yield.surf.setContent(yield);
|
||||
f.yield.surf.deploy(f.yield.surf._currTarget);
|
||||
f.yield.show();
|
||||
|
||||
y.parentNode.removeChild(y);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// CONTENT / OTHER PAGES
|
||||
f.maps = {};
|
||||
f.maps.surf = new Surface({
|
||||
size: [undefined, true], // this will get set to a specific height later in order to work
|
||||
classes: ['mapsWrapper'],
|
||||
});
|
||||
var mapsContainer = new ContainerSurface({
|
||||
size: [undefined, undefined],
|
||||
properties: {
|
||||
overflow: 'hidden',
|
||||
}
|
||||
});
|
||||
var loadMaps = function () {
|
||||
f.loadMaps();
|
||||
f.maps.surf.removeListener('deploy',loadMaps);
|
||||
};
|
||||
if (Metamaps.currentSection === "explore" ||
|
||||
(Metamaps.currentSection === "" && Metamaps.Active.Mapper)) {
|
||||
f.maps.surf.on('deploy', loadMaps);
|
||||
}
|
||||
f.maps.mod = new Modifier({
|
||||
origin: [0.5, 0],
|
||||
opacity: 0,
|
||||
transform: Transform.translate(window.innerWidth,94,0)
|
||||
});
|
||||
f.maps.mod.sizeFrom(function(){
|
||||
return [window.innerWidth, window.innerHeight - 94];
|
||||
});
|
||||
f.maps.show = function () {
|
||||
// set into the correct position and then fade in
|
||||
f.maps.mod.setTransform(Transform.translate(0, 94, 0));
|
||||
f.maps.mod.setOpacity(
|
||||
1,
|
||||
{ duration: 300 }
|
||||
);
|
||||
};
|
||||
f.maps.hide = function () {
|
||||
// fade out and then position it offscreen
|
||||
f.maps.mod.setOpacity(
|
||||
0,
|
||||
{ duration: 300 },
|
||||
function() {
|
||||
f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0));
|
||||
}
|
||||
);
|
||||
};
|
||||
f.maps.reposition = function () {
|
||||
f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0));
|
||||
};
|
||||
var mapsScroll = new Scrollview();
|
||||
f.maps.lock = false;
|
||||
mapsScroll._eventInput.on('update', _.throttle(function(data) {
|
||||
var bottom = f.maps.surf.getSize()[1], // how far down it goes
|
||||
pos = mapsScroll.getPosition(), // how far down you are
|
||||
containerSize = f.maps.mod.getSize()[1], // height of the viewable area
|
||||
distanceToBottom = bottom - (pos + containerSize),
|
||||
triggerDistance = 700;
|
||||
|
||||
if (!f.maps.lock &&
|
||||
distanceToBottom < triggerDistance &&
|
||||
Metamaps.Views &&
|
||||
Metamaps.Views.exploreMaps &&
|
||||
Metamaps.Views.exploreMaps.collection &&
|
||||
Metamaps.Views.exploreMaps.collection.page != "loadedAll") {
|
||||
f.maps.lock = true;
|
||||
Metamaps.Views.exploreMaps.collection.getMaps();
|
||||
}
|
||||
}, 500));
|
||||
f.maps.resetScroll = function() {
|
||||
// set the scrollView back to the top
|
||||
mapsScroll._physicsEngine.detachAll();
|
||||
mapsScroll.setVelocity(0);
|
||||
mapsScroll.setPosition(0);
|
||||
};
|
||||
mapsScroll.sequenceFrom([f.maps.surf]);
|
||||
f.maps.surf.pipe(mapsScroll);
|
||||
mapsContainer.add(mapsScroll);
|
||||
var mapsNode = new RenderNode(f.maps.mod);
|
||||
mapsNode.add(mapsContainer);
|
||||
f.mainContext.add(mapsNode);
|
||||
|
||||
//Metamaps.Views.exploreMaps.collection.getMaps();
|
||||
f.loadMaps = function () {
|
||||
if (Metamaps.currentSection === "explore") {
|
||||
var capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1);
|
||||
|
||||
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
|
||||
if (Metamaps.currentPage === "mapper") {
|
||||
Metamaps.Views.exploreMaps.fetchUserThenRender();
|
||||
}
|
||||
else {
|
||||
Metamaps.Views.exploreMaps.render();
|
||||
}
|
||||
f.maps.show();
|
||||
f.explore.set(Metamaps.currentPage, Metamaps.Maps.Mapper.mapperId);
|
||||
f.explore.show();
|
||||
}
|
||||
else if (Metamaps.currentSection === "") {
|
||||
Metamaps.Loading.hide();
|
||||
if (Metamaps.Active.Mapper) {
|
||||
|
||||
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
|
||||
Metamaps.Views.exploreMaps.render();
|
||||
f.maps.show();
|
||||
f.explore.set('active');
|
||||
f.explore.show();
|
||||
}
|
||||
else f.explore.set('featured');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// EXPLORE MAPS BAR
|
||||
f.explore = {};
|
||||
f.explore.surf = new Surface({
|
||||
size: [true, 42],
|
||||
content: templates.mineContent,
|
||||
classes: ['exploreMapsCenter']
|
||||
});
|
||||
f.explore.surfBg = new Surface({
|
||||
size: [undefined, 94],
|
||||
content: '<div class="exploreMapsMenu"></div>',
|
||||
classes: ['exploreMapsBar', 'exploreElement']
|
||||
});
|
||||
f.explore.mod = new Modifier({
|
||||
size: [undefined, 94],
|
||||
origin: [0.5, 0],
|
||||
transform: Transform.translate(0, -94, 0)
|
||||
});
|
||||
f.explore.show = function () {
|
||||
f.explore.mod.setTransform(
|
||||
Transform.translate(0, 0, 0),
|
||||
{ duration: 300, curve: 'easeOut' }
|
||||
);
|
||||
};
|
||||
f.explore.hide = function () {
|
||||
f.explore.mod.setTransform(
|
||||
Transform.translate(0, -94, 0),
|
||||
{ duration: 300, curve: 'easeIn' }
|
||||
);
|
||||
};
|
||||
f.explore.setApps = function (section) {
|
||||
f.explore.surf.setContent(templates[section + 'AppsContent']);
|
||||
};
|
||||
f.explore.set = function (section, mapperId) {
|
||||
var loggedIn = Metamaps.Active.Mapper ? 'Auth' : '';
|
||||
|
||||
|
||||
if (section === "mine" || section === "shared" || section === "active" || section === "featured") {
|
||||
f.explore.surf.setContent(templates[section + loggedIn + 'Content']);
|
||||
}
|
||||
else if (section === "mapper") {
|
||||
|
||||
var setMapper = function(mapperObj) {
|
||||
var mapperContent;
|
||||
mapperContent = "<div class='exploreMapsButton active mapperButton'><img class='exploreMapperImage' width='24' height='24' src='" + mapperObj.image + "' />";
|
||||
mapperContent += "<div class='exploreMapperName'>" + mapperObj.name + "'s Maps</div><div class='clearfloat'></div></div>";
|
||||
|
||||
f.explore.surf.setContent(mapperContent);
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: "/users/" + mapperId + ".json",
|
||||
success: function (response) {
|
||||
setMapper(response);
|
||||
},
|
||||
error: function () {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
var exploreMod = f.mainContext.add(f.explore.mod);
|
||||
exploreMod.add(new Modifier({
|
||||
size: [undefined, 42],
|
||||
origin: [0.5, 1]
|
||||
})).add(new Modifier({
|
||||
origin: [0.5, 1]
|
||||
})).add(f.explore.surf);
|
||||
exploreMod.add(f.explore.surfBg);
|
||||
|
||||
|
||||
// LOGO
|
||||
f.logo = {};
|
||||
f.logo.surf = new Surface({
|
||||
size: [30, 30],
|
||||
content: templates.logoContent,
|
||||
classes: ['footer']
|
||||
});
|
||||
|
||||
f.logo.mod = new Modifier({
|
||||
origin: [0, 1],
|
||||
transform: Transform.translate(-40, 40, 0)
|
||||
});
|
||||
f.logo.show = function () {
|
||||
f.logo.mod.setTransform(
|
||||
Transform.translate(20, -20, 0),
|
||||
{ duration: 300, curve: 'easeOut' }
|
||||
);
|
||||
};
|
||||
f.logo.hide = function () {
|
||||
f.logo.mod.setTransform(
|
||||
Transform.translate(-40, 40, 0),
|
||||
{ duration: 300, curve: 'easeIn' }
|
||||
);
|
||||
};
|
||||
f.mainContext.add(f.logo.mod).add(f.logo.surf);
|
||||
|
||||
|
||||
// TOAST
|
||||
f.toast = {};
|
||||
f.toast.surf = new Surface({
|
||||
size: [true, 42],
|
||||
content: '',
|
||||
classes: ['toast']
|
||||
});
|
||||
initialToast = function () {
|
||||
var message = document.getElementById('toast') ? document.getElementById('toast').innerHTML : false;
|
||||
if (message) {
|
||||
Metamaps.GlobalUI.notifyUser(message);
|
||||
f.toast.surf.deploy(f.toast.surf._currTarget);
|
||||
f.toast.surf.removeListener('deploy', initialToast);
|
||||
}
|
||||
};
|
||||
f.toast.surf.on('deploy', initialToast);
|
||||
f.toast.mod = new Modifier({
|
||||
origin: [0, 1],
|
||||
opacity: 0,
|
||||
transform: Transform.translate(24, -24, 0)
|
||||
});
|
||||
f.toast.show = function () {
|
||||
f.toast.mod.setOpacity(
|
||||
1,
|
||||
{ duration: 300 }
|
||||
);
|
||||
};
|
||||
f.toast.hide = function () {
|
||||
f.toast.mod.setOpacity(
|
||||
0,
|
||||
{ duration: 300 }
|
||||
);
|
||||
};
|
||||
f.mainContext.add(f.toast.mod).add(f.toast.surf);
|
||||
|
||||
// an object for the realtime mapper compasses surfaces
|
||||
f.compasses = {};
|
||||
|
||||
f.logo.show();
|
||||
|
||||
}// build
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue