diff options
26 files changed, 244 insertions, 71 deletions
diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js index 1e89696..3cfe969 100644 --- a/public/assets/javascripts/rectangles/_env.js +++ b/public/assets/javascripts/rectangles/_env.js @@ -17,9 +17,6 @@ environment.init = function(){ scene.camera.radius = 20 } - map.center.a = 0 - map.center.b = 0 - app.movements.gravity(true) Rooms.init() @@ -35,7 +32,7 @@ environment.init = function(){ el: document.querySelector("#minimap .el"), width: 130, height: 130, - zoom: -4.8 + zoom: -4.8 }) } } diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index d5a8442..99ede82 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -65,13 +65,14 @@ var Map = function(opt){ canvas.width = base.dimensions.a = window.innerWidth canvas.height = base.dimensions.b = window.innerHeight } - - base.update = function(){ - base.draw.animate() - } - + base.toggle = function(){ $(base.el).toggle() } } + +Map.prototype.update = function(){ + this.draw && this.draw.animate() +} + diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 262272b..ea7a356 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -20,6 +20,13 @@ Map.UI.Editor = function(map){ update: mousewheel, }) + base.permissions = new Permissions({ + create: true, + move: true, + resize: true, + destroy: false, + }) + // function down (e, cursor){ @@ -43,12 +50,17 @@ Map.UI.Editor = function(map){ return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) }) - if (intersects.length) { + if (intersects.length && base.permissions.destroy) { + base.mouse.down = false + Rooms.remove(intersects[0]) + return + } + else if (intersects.length && (base.permissions.move || base.permissions.resize)) { base.dragging = intersects[0] - base.resizing = base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) + base.resizing = base.permissions.resize && base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) base.dragging.rect.translation.sides = base.resizing } - else { + else if (base.permissions.create) { base.creating = true } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 0186e9a..48931e9 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -30,6 +30,7 @@ var Rooms = new function(){ base.remove = function(room){ delete base.list[room.id] + Rooms.clipper.update() } base.removeAll = function(){ diff --git a/public/assets/javascripts/rectangles/engine/rooms/clipper.js b/public/assets/javascripts/rectangles/engine/rooms/clipper.js index 0854013..eb467cd 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/clipper.js +++ b/public/assets/javascripts/rectangles/engine/rooms/clipper.js @@ -8,7 +8,7 @@ Rooms.clipper = new function(){ } base.bind = function(){ - map.ui.mouse.tube.on("up", function(){ base.update() }) + map.ui && map.ui.mouse.tube.on("up", function(){ base.update() }) } base.update = function(){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 143a4d9..74801e9 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -12,16 +12,16 @@ var Scenery = new function(){ base.resize.init() } - base.add = function(wall, media){ + base.add = function(wall, media, id){ var scene_media switch (media.type) { case 'image': - scene_media = new Scenery.types.image ({ media: media, wall: wall }) + scene_media = new Scenery.types.image ({ media: media, wall: wall, id: id }) break case 'youtube': case 'vimeo': - scene_media = new Scenery.types.video ({ media: media, wall: wall }) + scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id }) break } @@ -64,7 +64,7 @@ var Scenery = new function(){ base.deserialize = function(scenery_data){ scenery_data.forEach(function(data){ var wall = Rooms.walls[data.wall_id] - var scene_media = base.add(wall, data.media) + var scene_media = base.add(wall, data.media, data.id) scene_media.deserialize(data) }) } diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index f38a740..bad0a55 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -26,6 +26,10 @@ Scenery.move = function(base){ Scenery.remove(base.id) return } + if (! (editor.permissions.move || editor.permissions.resize) ) { + e.clickAccepted = false + return + } dragging = true x = base.mx.x y = base.mx.y diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 4367efc..05c760b 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -5,7 +5,7 @@ Scenery.types.base = Fiber.extend(function(base){ init: function(opt){ _.bindAll(this, 'enter', 'leave') - this.id = Scenery.uid("scenery") + this.id = opt.id || Scenery.uid("scenery") this.move = new Scenery.move (this) this.media = opt.media this.dimensions = new vec2(this.media.width, this.media.height) diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index 2ec35e6..06958af 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -95,8 +95,6 @@ function mouse (opt) { } base.mousedown = function(e){ - e.stopPropagation() - if (opt.use_offset) { offset = this.getBoundingClientRect() } @@ -106,12 +104,18 @@ function mouse (opt) { var x = pos.a, y = pos.b base.cursor = new Rect (x,y, x,y) base.down = true - + e.clickAccepted = true + base.tube("down", e, base.cursor) + + if (e.clickAccepted) { + e.stopPropagation() + } + else { + base.down = false + } } base.mousemove = function(e){ - e.stopPropagation() - if (opt.use_offset && ! offset) return var pos = positionFromMouse(e) @@ -126,10 +130,11 @@ function mouse (opt) { base.cursor.x.b = x base.cursor.y.b = y base.tube("drag", e, base.cursor) + e.stopPropagation() } else { base.cursor.x.a = base.cursor.x.b = x - base.cursor.y.a = base.cursor.y.b = y + base.cursor.y.a = base.cursor.y.b = y base.tube("move", e, base.cursor) } } diff --git a/public/assets/javascripts/rectangles/util/permissions.js b/public/assets/javascripts/rectangles/util/permissions.js index 22a6079..adb2498 100644 --- a/public/assets/javascripts/rectangles/util/permissions.js +++ b/public/assets/javascripts/rectangles/util/permissions.js @@ -15,3 +15,18 @@ Permissions.prototype.toggle = function (key) { }) return state } + +Permissions.prototype.assign = function (key, state) { + var base = this + base.keys.forEach(function(op){ + base[op] = op == key ? state : false + }) + return state +} + +Permissions.prototype.clear = function () { + var base = this + base.keys.forEach(function(op){ + base[op] = false + }) +} diff --git a/public/assets/javascripts/ui/SiteRouter.js b/public/assets/javascripts/ui/_router.js index 3a6b589..6d41d5b 100644 --- a/public/assets/javascripts/ui/SiteRouter.js +++ b/public/assets/javascripts/ui/_router.js @@ -91,8 +91,14 @@ var SiteRouter = Router.extend({ app.mode.editor = true app.launch() - this.editorView = new EditorView() - this.editorView.load(name) + if ($(".aboutRoom").length) { + this.readerView = new ReaderView() + this.readerView.load(name) + } + else { + this.editorView = new EditorView() + this.editorView.load(name) + } }, diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js index 4ca2e6c..df98ab0 100644 --- a/public/assets/javascripts/ui/builder/BuilderToolbar.js +++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js @@ -6,7 +6,7 @@ var BuilderToolbar = View.extend({ "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-layout-settings']": 'toggleSettings', "click [data-role='undo']": 'undo', - "click [data-role='draw-mode']": 'draw', + "click [data-role='create-mode']": 'create', "click [data-role='resize-mode']": 'resize', "click [data-role='move-mode']": 'move', "click [data-role='destroy-mode']": 'destroy', @@ -14,6 +14,7 @@ var BuilderToolbar = View.extend({ initialize: function(opt){ this.parent = opt.parent + map.ui.permissions.toggle() }, toggleMap: function(){ @@ -27,16 +28,28 @@ var BuilderToolbar = View.extend({ undo: function(){ }, - draw: function(){ + create: function(e){ + var state = map.ui.permissions.toggle("create") + $(".inuse").removeClass("inuse") + $(e.currentTarget).toggleClass("inuse", state) }, - resize: function(){ + resize: function(e){ + var state = map.ui.permissions.toggle("resize") + $(".inuse").removeClass("inuse") + $(e.currentTarget).toggleClass("inuse", state) }, - move: function(){ + move: function(e){ + var state = map.ui.permissions.toggle("move") + $(".inuse").removeClass("inuse") + $(e.currentTarget).toggleClass("inuse", state) }, - destroy: function(){ + destroy: function(e){ + var state = map.ui.permissions.toggle("destroy") + $(".inuse").removeClass("inuse") + $(e.currentTarget).toggleClass("inuse", state) }, }) diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 5382187..210ef6c 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -29,10 +29,28 @@ var EditorToolbar = View.extend({ openMediaViewer: function(){ this.parent.mediaViewer.show() this.parent.mediaUpload.show() + this.resetMode() }, - resizeMedia: function(){ - var state = editor.permissions.toggle("resize") + resetMode: function(){ + this.resizeMedia(false) + this.destroyMedia(false) + }, + + resetControls: function(){ + this.parent.wallpaperPicker.hide() + this.parent.lightControl.hide() + }, + + resizeMedia: function(e, state){ + if (! state && typeof e == "boolean") { + state = e + editor.permissions.assign("resize", state) + } + else { + state = editor.permissions.toggle("resize") + } + ! state && editor.permissions.assign("move", true) $(".inuse").removeClass("inuse") $("[data-role='resize-media']").toggleClass("inuse", state) if (state) { @@ -40,11 +58,18 @@ var EditorToolbar = View.extend({ } }, - destroyMedia: function(){ - var state = editor.permissions.toggle("destroy") + destroyMedia: function(e, state){ + if (! state && typeof e == "boolean") { + state = e + editor.permissions.assign("destroy", state) + } + else { + state = editor.permissions.toggle("destroy") + } + ! state && editor.permissions.assign("move", true) $(".inuse").removeClass("inuse") $("[data-role='destroy-media']").toggleClass("inuse", state) - $("body").toggleClass("destroyActive", state) + $("body").toggleClass("destroyActive", state) }, toggleWallpaper: function(){ @@ -62,6 +87,7 @@ var EditorToolbar = View.extend({ var editor = new function(){ this.permissions = new Permissions({ + 'move': true, 'resize': false, 'destroy': false, }) diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js new file mode 100644 index 0000000..001d097 --- /dev/null +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -0,0 +1,28 @@ + +var ReaderView = View.extend({ + el: "#readerView", + + projectAction: "/api/projects/", + + events: { + }, + + initialize: function(){ + }, + + load: function(name){ + name = sanitize(name) + $.get(this.projectAction + name, $.proxy(this.ready, this)) + }, + + ready: function(data){ + $("#map").hide() + + data.rooms && Rooms.deserialize(data.rooms) + data.media && Scenery.deserialize(data.media) + data.startPosition && scene.camera.move(data.startPosition) + + editor.permissions.clear() + } + +}) diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js index ebb1919..b58da1f 100644 --- a/public/assets/javascripts/util.js +++ b/public/assets/javascripts/util.js @@ -1,13 +1,14 @@ if (window.$) { - $.fn.int = function(){ return parseInt($(this).val(),10) } - $.fn.float = function(){ return parseFloat($(this).val()) } - $.fn.string = function(){ return trim($(this).val()) } + $.fn.int = function() { return parseInt($(this).val(),10) } + $.fn.float = function() { return parseFloat($(this).val()) } + $.fn.string = function() { return trim($(this).val()) } $.fn.enable = function() { return $(this).attr("disabled",null) } $.fn.disable = function() { return $(this).attr("disabled","disabled") } + $.fn.htmlSafe = function(s) { return $(this).html(sanitize(s)) } } function trim(s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } -function sanitize (s){ return (s || "").replace(new RegExp("[<>&\"\']", 'g'), "") } +function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") } function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") } function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) } function slugify (s){ return (s || "").toLowerCase().replace(/\s/g,"-").replace(/[^-_a-zA-Z0-9]/g, '-').replace(/-+/g,"-") } diff --git a/server/index.js b/server/index.js index 401adfc..6331ca8 100644 --- a/server/index.js +++ b/server/index.js @@ -111,7 +111,7 @@ site.route = function () { app.get('/project', middleware.ensureAuthenticated, views.modal) app.get('/project/new', middleware.ensureAuthenticated, views.modal) app.get('/project/new/:layout', middleware.ensureAuthenticated, views.editor) - app.get('/project/:name', middleware.ensureAuthenticated, views.editor) + app.get('/project/:slug', middleware.ensureProject, views.editor) app.get('/api/layouts', middleware.ensureAuthenticated, api.layouts.index) app.get('/api/layouts/:slug', middleware.ensureAuthenticated, api.layouts.show) @@ -120,7 +120,7 @@ site.route = function () { app.delete('/api/layouts/destroy', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.destroy) app.get('/api/projects', middleware.ensureAuthenticated, api.projects.index) - app.get('/api/projects/:slug', middleware.ensureAuthenticated, api.projects.show) + app.get('/api/projects/:slug', api.projects.show) app.post('/api/projects/new', middleware.ensureAuthenticated, api.projects.create) app.post('/api/projects/edit', middleware.ensureAuthenticated, api.projects.update) app.delete('/api/projects/destroy', middleware.ensureAuthenticated, api.projects.destroy) diff --git a/server/lib/api/layouts.js b/server/lib/api/layouts.js index 1364426..641e9e2 100644 --- a/server/lib/api/layouts.js +++ b/server/lib/api/layouts.js @@ -93,7 +93,6 @@ var layouts = { destroy: function(req, res){ var _id = req.body._id - console.log(_id) if (! _id || ! _id.length) { res.json({ error: 404 }) return diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js index 32be88c..fc54a5f 100644 --- a/server/lib/api/projects.js +++ b/server/lib/api/projects.js @@ -101,7 +101,7 @@ var projects = { destroy: function(req, res){ var _id = req.body._id - if (! id || ! id.length) { + if (! _id || ! _id.length) { res.json({ error: 404 }) return } diff --git a/server/lib/middleware.js b/server/lib/middleware.js index c74c496..0bc3f7a 100644 --- a/server/lib/middleware.js +++ b/server/lib/middleware.js @@ -4,7 +4,8 @@ var passport = require('passport'), _ = require('lodash'), config = require('../../config.json'), - User = require('./schemas/User'); + User = require('./schemas/User'), + Project = require('./schemas/Project'); var middleware = { @@ -41,6 +42,28 @@ var middleware = { next() }, + ensureProject: function (req, res, next) { + if (req.params.slug) { + Project.findOne({ slug: req.params.slug }, function(err, project){ + if (err) { + console.error(err) + req.project = null + } + else if (! project) { + req.project = null + } + else { + req.project = project + } + next() + }) + } + else { + req.project = null + next() + } + } + } module.exports = middleware diff --git a/server/lib/views.js b/server/lib/views.js index bcb0e90..000ff4d 100644 --- a/server/lib/views.js +++ b/server/lib/views.js @@ -6,7 +6,8 @@ var User = require('./schemas/User'), config = require('../../config'), marked = require('marked'), util = require('./util'), - _ = require('lodash'); + _ = require('lodash'), + moment = require('moment'); marked.setOptions({ renderer: new marked.Renderer(), @@ -19,7 +20,28 @@ marked.setOptions({ var views = {} views.editor = function (req, res) { - res.render('editor') + if (! req.user && ! req.project) { + res.redirect('/') + } + else if (! req.user || (req.project && String(req.user._id) !== String(req.project.user_id))) { + User.findOne({ _id: req.project.user_id }, function(err, user) { + if (err || ! user) { + console.error(err) + res.redirect('/') + return + } + res.render('reader', { + name: util.sanitize(req.project.name), + description: util.sanitize(req.project.description), + date: moment(req.project.updated_at).format("M/DD/YYYY"), + author: user.displayName, + authorlink: "/profile/" + user.username, + }) + }) + } + else { + res.render('editor') + } } views.builder = function (req, res) { diff --git a/views/controls/builder/toolbar.ejs b/views/controls/builder/toolbar.ejs index b55911b..98aee1e 100644 --- a/views/controls/builder/toolbar.ejs +++ b/views/controls/builder/toolbar.ejs @@ -18,7 +18,7 @@ <span data-role='destroy-mode' data-info="delete" - class="icon-close"></span> + class="icon-ios7-trash-outline"></span> <!-- <span data-role='undo' diff --git a/views/controls/reader/about-room.ejs b/views/controls/reader/about-room.ejs new file mode 100644 index 0000000..f990da8 --- /dev/null +++ b/views/controls/reader/about-room.ejs @@ -0,0 +1,14 @@ +<div class="aboutRoom vvbox"> + <h1> + [[- name ]],<br> + <a href="[[- authorlink ]]">[[- author ]]</a> + </h1> + <h2>Last modified [[- date ]]</h2> + <span>[[- description ]]</span> +</div> + +<div class="share"> + <h2>Share this on–</h2> + <a href="#">Facebook</a> + <a href="#">Twitter</a> +</div> diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index fa75efa..39d27e2 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -77,6 +77,8 @@ <script type="text/javascript" src="/assets/javascripts/ui/editor/WallpaperPicker.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script> -<script type="text/javascript" src="/assets/javascripts/ui/SiteRouter.js"></script> +<script type="text/javascript" src="/assets/javascripts/ui/reader/ReaderView.js"></script> + +<script type="text/javascript" src="/assets/javascripts/ui/_router.js"></script> <script type="text/javascript" src="/assets/javascripts/app.js"></script> diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs index 4e5be75..443e26d 100644 --- a/views/projects/list-projects.ejs +++ b/views/projects/list-projects.ejs @@ -9,7 +9,7 @@ [[ if (profile._id == project.user_id) { ]] <div class="editBtn">edit</div> [[ } ]] - <a href="/" class="roomName">[[- project.name ]]</a> + <a href="/project/[[- project.slug ]]" class="roomName">[[- project.name ]]</a> </td> [[ }) ]] diff --git a/views/reader.ejs b/views/reader.ejs new file mode 100644 index 0000000..c389431 --- /dev/null +++ b/views/reader.ejs @@ -0,0 +1,25 @@ +<!doctype html> +<html> +<head> + <title>vvalls</title> + [[ include partials/meta ]] +</head> +<body class="editing loading"> + + <div id="scene"></div> + + <div class="rapper"> + [[ include partials/header ]] + + <div id="editorView"> + [[ include controls/reader/about-room ]] + </div> + </div> + + [[ include partials/confirm-modal ]] + [[ include projects/layouts-modal ]] + [[ include partials/sign-in ]] + +</body> +[[ include partials/scripts ]] +</html> diff --git a/views/signed-out.ejs b/views/signed-out.ejs deleted file mode 100755 index c68d960..0000000 --- a/views/signed-out.ejs +++ /dev/null @@ -1,21 +0,0 @@ -<!doctype html> -<html> -<head> - <title>vvalls</title> - [[ include partials/meta ]] -</head> -<body class="loading"> - - <div id="scene"></div> - - <div class="rapper"> - <a href="/front.html" class="logo"><img src="/assets/img/logo4.svg"></a> - - [[ include controls/signed-out ]] - </div> - - [[ include partials/sign-in ]] - -</body> -[[ include partials/scripts ]] -</html> |