glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

made the header more generic to serve other functions

Browse source
This commit is contained in:
Connor Turland 2016-08-01 15:33:41 -04:00
parent 30e9a27663
commit ede1dfb91c
12 changed files with 99 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/application.js
View file

@ -42,7 +42,5 @@
//= require ./src/Metamaps.Mapper
//= require ./src/Metamaps.Admin
//= require ./src/Metamaps.Import
//= require ./src/Metamaps.Header
//= require ./src/Metamaps.JIT
//= require_directory ./shims
// require_directory ./require
// require_directory ./famous

17
app/assets/javascripts/src/Metamaps.GlobalUI.js
View file

@ -61,22 +61,21 @@ $(document).ready(function () {
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
if (Metamaps.currentPage === "mapper") {
Metamaps.Views.exploreMaps.fetchUserThenRender();
Metamaps.Header.fetchUserThenChangeSection(!!Metamaps.Active.Mapper, Metamaps.Maps.Mapper.mapperId)
}
else {
Metamaps.Views.exploreMaps.render();
Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, Metamaps.currentPage)
}
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.currentSection === "" && Metamaps.Active.Mapper) {
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
Metamaps.Views.exploreMaps.render();
Metamaps.GlobalUI.showDiv('#exploreMaps')
Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'active')
Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
}
else if (Metamaps.Active.Map || Metamaps.Active.Topic) {
Metamaps.Loading.show()

22
app/assets/javascripts/src/Metamaps.Header.js Normal file
View file

@ -0,0 +1,22 @@
var Metamaps = Metamaps || {}
Metamaps.Header = {
init: function () {
},
fetchUserThenChangeSection: function (signedIn, mapperId) {
$.ajax({
url: '/users/' + mapperId + '.json',
success: function (response) {
Metamaps.Header.changeSection(signedIn, 'mapper', response.image, response.name)
},
error: function () {}
});
},
changeSection: function (signedIn, section, userAvatar, userName) {
ReactDOM.render(
React.createElement(Metamaps.ReactComponents.Header, { signedIn: signedIn, section: section, userAvatar: userAvatar, userName: userName }),
document.getElementById('exploreMapsHeader')
);
}
}

3
app/assets/stylesheets/clean.css.erb
View file

@ -25,7 +25,8 @@
}
#yield {
position: absolute;
width: 100%;
}
#toast {

4
app/views/doorkeeper/applications/_script.html.erb
View file

@ -1,8 +1,8 @@
<script type="text/javascript">
Metamaps.Apps = {
init: function () {
Metamaps.Famous.explore.setApps('registered');
Metamaps.Famous.explore.show();
Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'registered');
Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
Metamaps.GlobalUI.Search.open();
Metamaps.GlobalUI.Search.lock();
}

4
app/views/doorkeeper/authorized_applications/_script.html.erb
View file

@ -1,8 +1,8 @@
<script type="text/javascript">
Metamaps.Apps = {
init: function () {
Metamaps.Famous.explore.setApps('authorized');
Metamaps.Famous.explore.show();
Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'authorized');
Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
Metamaps.GlobalUI.Search.open();
Metamaps.GlobalUI.Search.lock();
}

2
app/views/layouts/doorkeeper.html.erb
View file

@ -33,7 +33,7 @@
<% end %>
<%= render :partial => 'layouts/lowermapelements' %>
<div id="famousOverlay"></div>
<div id="exploreMapsHeader"></div>
<div id="loading"></div>
</div>

33
frontend/src/components/ExploreHeader.js
View file

@ -1,33 +0,0 @@
import React, { Component, PropTypes } from 'react'
class ExploreHeader extends Component {
render = () => {
const signedIn = this.props.signedIn
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>
)
}
}
export default ExploreHeader

59
frontend/src/components/Header.js Normal file
View file

@ -0,0 +1,59 @@
import React, { Component, PropTypes } from 'react'
class Header extends Component {
render = () => {
const signedIn = this.props.signedIn
const section = this.props.section
var activeClass = (title) => {
var forClass = "exploreMapsButton"
forClass += " " + title + "Maps"
if (title == "my" && section == "mine" ||
title == section) forClass += " active"
return forClass
}
const explore = section == "mine" || section == "active" || section == "shared" || section == "featured"
const mapper = section == "mapper"
const apps = section == "registered" || section == "authorized"
return (
<div className="exploreMapsBar exploreElement">
<div className="exploreMapsMenu">
<div className="exploreMapsCenter">
{signedIn && explore ? <a href="/explore/mine" className={activeClass("my")}>
<div className="exploreMapsIcon"></div>
My Maps
</a> : null }
{signedIn && explore ? <a href="/explore/shared" className={activeClass("shared")}>
<div className="exploreMapsIcon"></div>
Shared With Me
</a> : null }
{explore ? <a href={signedIn ? "/" : "/explore/active"} className={activeClass("active")}>
<div className="exploreMapsIcon"></div>
Recently Active
</a> : null }
{!signedIn && explore ? <a href="/explore/featured" className={activeClass("featured")}>
<div className="exploreMapsIcon"></div>
Featured Maps
</a> : null }
{mapper ? <div className='exploreMapsButton active mapperButton'>
<img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
<div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
<div className='clearfloat'></div>
</div> : null }
{apps ? <a href="/oauth/applications" className={"activeMaps exploreMapsButton" + (section == "registered" ? " active" : "")} data-bypass="true">
<div className="exploreMapsIcon"></div>
Registered Apps
</a> : null }
{apps ? <a href="/oauth/authorized_applications" className={"featuredMaps exploreMapsButton" + (section == "authorized" ? " active" : "")} data-bypass="true">
<div className="exploreMapsIcon"></div>
Authorized Apps
</a> : null }
</div>
</div>
</div>
)
}
}
export default Header

8
frontend/src/index.js
View file

@ -2,7 +2,7 @@ import React from 'react'
import ReactDOM from 'react-dom'
import Backbone from 'backbone'
import _ from 'underscore'
import ExploreHeader from './components/ExploreHeader'
import Header from './components/Header.js'
// this is optional really, if we import components directly React will be
// in the bundle, so we won't need a global reference
@ -14,9 +14,5 @@ window._ = _
window.Metamaps = window.Metamaps || {}
window.Metamaps.ReactComponents = {
ExploreHeader
Header
}
ReactDOM.render(
<ExploreHeader signedIn={true} active="featured" />, document.getElementById('exploreMapsHeader')
);

36
public/famous/main.js
View file

@ -1,36 +0,0 @@
define(function(require, exports, module) {
Metamaps.Famous = {};
Metamaps.Famous.build = function () {
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var Surface = require('famous/core/Surface');
var Timer = require('famous/utilities/Timer');
var Scrollview = require('famous/views/Scrollview');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var RenderNode = require('famous/core/RenderNode');
var templates = require('templates');
// create the main context
var famous = document.getElementById('famousOverlay');
var f = Metamaps.Famous;
f.mainContext = Engine.createContext(famous);
f.Surface = Surface;
f.Modifier = Modifier;
f.Transform = Transform;
// INFOVIS
//Metamaps.Views.exploreMaps.collection.getMaps();
f.loadMaps = function () {
};
}// build
});

36
public/famous/templates.js
View file

@ -1,36 +0,0 @@
define(function(require, exports, module) {
var t = {};
t.logoContent = '<div class="logo">M</div>';
/* logged out explore maps bars */
t.activeContent = '<a href="/explore/active" class="active activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active Maps</a>';
t.activeContent += '<a href="/explore/featured" class="featuredMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Featured Maps</a>';
t.featuredContent = '<a href="/explore/active" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active Maps</a>';
t.featuredContent += '<a href="/explore/featured" class="active featuredMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Featured Maps</a>';
/* logged in explore maps bars */
t.mineAuthContent = '<a href="/explore/mine" class="active myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
t.mineAuthContent += '<a href="/explore/shared" class="sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
t.mineAuthContent += '<a href="/" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
t.sharedAuthContent = '<a href="/explore/mine" class="myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
t.sharedAuthContent += '<a href="/explore/shared" class="active sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
t.sharedAuthContent += '<a href="/" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
t.activeAuthContent = '<a href="/explore/mine" class="myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
t.activeAuthContent += '<a href="/explore/shared" class="sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
t.activeAuthContent += '<a href="/" class="active activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
/* apps bars */
t.registeredAppsContent = '<a href="/oauth/applications" class="active activeMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Registered Apps</a>';
t.registeredAppsContent += '<a href="/oauth/authorized_applications" class="featuredMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Authorized Apps</a>';
t.authorizedAppsContent = '<a href="/oauth/applications" class="activeMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Registered Apps</a>';
t.authorizedAppsContent += '<a href="/oauth/authorized_applications" class="active featuredMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Authorized Apps</a>';
module.exports = t;
});