From c40e1e901f0d51e48be4dffafad9c3b1039a9fd2 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 11 Jun 2014 00:24:33 -0400 Subject: wire up layout index modals --- .../assets/javascripts/rectangles/engine/map/ui.js | 4 +- public/assets/javascripts/ui/SiteRouter.js | 15 +++- public/assets/javascripts/ui/lib/FormView.js | 100 +++++++++++++++++++++ public/assets/javascripts/ui/lib/ModalFormView.js | 96 -------------------- public/assets/javascripts/ui/site/LayoutsModal.js | 67 ++++++++++++++ .../assets/javascripts/ui/site/NewProjectModal.js | 17 ---- public/assets/javascripts/ui/z_misc.js | 13 +-- public/assets/stylesheets/app.css | 4 +- server/index.js | 17 ++-- views/controls/builder/settings.ejs | 2 +- views/modal.ejs | 3 +- views/partials/header.ejs | 6 +- views/partials/scripts.ejs | 4 +- views/profile.ejs | 2 +- views/projects/layouts-modal.ejs | 26 ++++++ views/projects/new-project.ejs | 18 ---- 16 files changed, 226 insertions(+), 168 deletions(-) create mode 100644 public/assets/javascripts/ui/lib/FormView.js delete mode 100644 public/assets/javascripts/ui/lib/ModalFormView.js create mode 100644 public/assets/javascripts/ui/site/LayoutsModal.js delete mode 100644 public/assets/javascripts/ui/site/NewProjectModal.js create mode 100644 views/projects/layouts-modal.ejs delete mode 100644 views/projects/new-project.ejs diff --git a/public/assets/javascripts/rectangles/engine/map/ui.js b/public/assets/javascripts/rectangles/engine/map/ui.js index 63e8e18..97baf88 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui.js +++ b/public/assets/javascripts/rectangles/engine/map/ui.js @@ -26,7 +26,7 @@ var MapUI = function(map){ cursor.y.div(h).sub(0.5).mul(map.bounds.b / map.zoom).sub(map.center.b) if (e.ctrlKey || e.which === 3) { - cursor.quantize(1) + cursor.quantize(1/map.zoom) map.center.a = cursor.x.a map.center.b = -cursor.y.a console.log(map.center+"") @@ -52,7 +52,7 @@ var MapUI = function(map){ } if (e.shiftKey && base.dragging) { - base.dragging.rect.quantize(10) + base.dragging.rect.quantize(10/map.zoom) } } diff --git a/public/assets/javascripts/ui/SiteRouter.js b/public/assets/javascripts/ui/SiteRouter.js index c02b19c..92816be 100644 --- a/public/assets/javascripts/ui/SiteRouter.js +++ b/public/assets/javascripts/ui/SiteRouter.js @@ -11,6 +11,7 @@ var SiteRouter = Router.extend({ "click [data-role='new-document-modal']": 'newDocument', "click [data-role='edit-document-modal']": 'editDocument', "click [data-role='delete-document-modal']": 'destroyDocument', + "click [data-role='show-layouts-modal']": 'showLayoutsModal', }, routes: { @@ -22,13 +23,15 @@ var SiteRouter = Router.extend({ "/about/:name/edit": 'editDocument', "/about/new": 'newDocument', "/editor": 'launchEditor', - "/builder": 'launchBuilder', + "/builder": 'showLayoutsModal', + "/builder/new": 'launchBuilder', + "/builder/:name": 'launchBuilder', }, initialize: function(){ this.signUpModal = new SignUpModal() this.signInModal = new SignInModal() - this.newProjectModal = new NewProjectModal() + this.layoutsModal = new LayoutsModal() this.editProjectModal = new EditProjectModal() this.editProfileModal = new EditProfileModal() this.documentModal = new DocumentModal() @@ -47,6 +50,12 @@ var SiteRouter = Router.extend({ this.builderView = new BuilderView() this.builderView.load() }, + + showLayoutsModal: function(e){ + e && e.preventDefault() + window.history.pushState(null, document.title, "/builder") + this.layoutsModal.load("builder") + }, launchEditor: function(){ app.mode.editor = true @@ -72,7 +81,7 @@ var SiteRouter = Router.extend({ e && e.preventDefault() window.history.pushState(null, document.title, "/project/new") - this.newProjectModal.load() + this.layoutsModal.load() }, editProject: function(e){ diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js new file mode 100644 index 0000000..2de4554 --- /dev/null +++ b/public/assets/javascripts/ui/lib/FormView.js @@ -0,0 +1,100 @@ +var FormView = View.extend({ + + method: "post", + + events: { + "submit form": "submit" + }, + + initialize: function(){ + this.$form = this.$("form") + this.$errors = this.$(".errors") + this.$errorList = this.$(".errorList") + }, + + reset: function(){ + this.$("input,textarea").not("[type='submit']").not("[type='hidden']").val("") + }, + + showErrors: function(errors){ + if (errors && errors.length) { + this.$errorList.empty(); + for (var i in errors) { + this.$errorList.append('
' + errors[i] + '
'); + } + this.$errors.css("opacity", 1.0); + setTimeout($.proxy(function(){ + this.$errors.show().css("opacity", 1.0); + }, this), 200) + } + }, + + serialize: function(){ + var fd = new FormData() + + this.$("input[name], select[name], textarea[name]").each( function(){ + if (this.type == "file") { + if (this.files.length > 0) { + fd.append(this.name, this.files[0]); + } + } + else if (this.type == "password") { + if (this.value.length > 0) { + fd.append(this.name, SHA1.hex('lol$' + this.value + '$vvalls')) + } + } + else { + fd.append(this.name, this.value); + } + }); + + return fd + }, + + submit: function(e){ + e.preventDefault() + + this.$errors.hide().css("opacity", 0.0); + + if (this.validate) { + var errors = this.validate() + if (errors && errors.length) { + this.showErrors(errors) + return + } + } + + var request = $.ajax({ + url: this.action, + type: this.method, + data: this.serialize(), + dataType: "json", + processData: false, + contentType: false, + }); + request.done($.proxy(function (response) { + if (response.error) { + var errors = [] + for (var key in response.error.errors) { + errors.push(response.error.errors[key].message); + } + this.showErrors(errors) + return + } + else { + this.success && this.success(response) + } + }, this)); + } + +}) + + +var ModalFormView = ModalView.extend(FormView.prototype).extend({ + + load: function(){ + this.reset() + this.show() + } + +}) diff --git a/public/assets/javascripts/ui/lib/ModalFormView.js b/public/assets/javascripts/ui/lib/ModalFormView.js deleted file mode 100644 index d084031..0000000 --- a/public/assets/javascripts/ui/lib/ModalFormView.js +++ /dev/null @@ -1,96 +0,0 @@ - -var ModalFormView = ModalView.extend({ - - method: "post", - - events: { - "submit form": "submit" - }, - - initialize: function(){ - this.$form = this.$("form") - this.$errors = this.$(".errors") - this.$errorList = this.$(".errorList") - }, - - reset: function(){ - this.$("input,textarea").not("[type='submit']").not("[type='hidden']").val("") - }, - - load: function(){ - this.reset() - this.show() - }, - - showErrors: function(errors){ - if (errors && errors.length) { - this.$errorList.empty(); - for (var i in errors) { - this.$errorList.append('
' + errors[i] + '
'); - } - this.$errors.css("opacity", 1.0); - setTimeout($.proxy(function(){ - this.$errors.show().css("opacity", 1.0); - }, this), 200) - } - }, - - serialize: function(){ - var fd = new FormData() - - this.$("input[name], select[name], textarea[name]").each( function(){ - if (this.type == "file") { - if (this.files.length > 0) { - fd.append(this.name, this.files[0]); - } - } - else if (this.type == "password") { - if (this.value.length > 0) { - fd.append(this.name, SHA1.hex('lol$' + this.value + '$vvalls')) - } - } - else { - fd.append(this.name, this.value); - } - }); - - return fd - }, - - submit: function(e){ - e.preventDefault() - - this.$errors.hide().css("opacity", 0.0); - - if (this.validate) { - var errors = this.validate() - if (errors && errors.length) { - this.showErrors(errors) - return - } - } - - var request = $.ajax({ - url: this.action, - type: this.method, - data: this.serialize(), - dataType: "json", - processData: false, - contentType: false, - }); - request.done($.proxy(function (response) { - if (response.error) { - var errors = [] - for (var key in response.error.errors) { - errors.push(response.error.errors[key].message); - } - this.showErrors(errors) - return - } - else { - this.success && this.success(response) - } - }, this)); - } - -}) diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js new file mode 100644 index 0000000..f80a6cc --- /dev/null +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -0,0 +1,67 @@ + +var LayoutsIndex = View.extend({ + + load: function(type){ + this.show() + + $.get("/api/layouts", $.proxy(function(data){ + console.log(data) + data.forEach($.proxy(function(room){ + var $span = $("") + $span.html(JSON.stringify(room)) + this.$(".templates").append($span) + }, this)) + this.show() + }, this)) + + } + +}) + + +var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({ + el: ".mediaDrawer.layouts", + + events: { + "click .templates span": 'toggleActive', + "submit form": 'newBuilder', + }, + + toggleActive: function(e){ + e.preventDefault() + this.$(".templates .active").removeClass("active") + $(e.currentTarget).addClass("active") + + // actually do + // window.location.pathname = "/builder/" + $(this).data("name") + }, + + newBuilder: function(e){ + e && e.preventDefault() + window.location.pathname = "/builder/new" + } + +}) + + + + +var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({ + el: ".mediaDrawer.newProject", + + events: { + "click .templates span": 'toggleActive', + "submit form": 'choose', + }, + + toggleActive: function(e){ + e.preventDefault() + this.$(".templates .active").removeClass("active") + $(e.currentTarget).addClass("active") + }, + + choose: function(e){ + e && e.preventDefault() + } + +}) diff --git a/public/assets/javascripts/ui/site/NewProjectModal.js b/public/assets/javascripts/ui/site/NewProjectModal.js deleted file mode 100644 index cf2044f..0000000 --- a/public/assets/javascripts/ui/site/NewProjectModal.js +++ /dev/null @@ -1,17 +0,0 @@ - - -var NewProjectModal = ModalFormView.extend({ - el: ".mediaDrawer.newProject", - action: "/project/new", - - load: function(){ - this.reset() - this.show() - }, - - success: function(){ - // - } - -}) - diff --git a/public/assets/javascripts/ui/z_misc.js b/public/assets/javascripts/ui/z_misc.js index 612057e..37e41c6 100644 --- a/public/assets/javascripts/ui/z_misc.js +++ b/public/assets/javascripts/ui/z_misc.js @@ -120,18 +120,7 @@ function bind () { $(".deleteArmed .mediaContainer").click(function(){ $(this).addClass("deleted"); }); - - - $("#createProject").click(function(){ - $(".mediaDrawer.newProject").toggleClass("active"); - $("body").addClass("noOverflow") - }); - - $(".templates span").click(function(){ - $(".templates span").removeClass("active"); - $(this).toggleClass("active"); - }); - + $(document).on("click", ".icon-close", disable_mode) function disable_mode(){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 55e8d37..b20c669 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -581,7 +581,7 @@ h5{ .logo { float:left; padding:10px; - z-index:3; + z-index:4; position:relative; } .logo:hover { @@ -686,7 +686,7 @@ h5{ left:0; width:100%; height:100%; - z-index:2; + z-index:3; overflow-y:scroll; } diff --git a/server/index.js b/server/index.js index 9fe8edf..65234d4 100644 --- a/server/index.js +++ b/server/index.js @@ -108,15 +108,14 @@ site.route = function () { app.post('/api/docs/edit', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.update) app.delete('/api/docs/destroy', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.destroy) - app.use('/builder', middleware.ensureAuthenticated) - app.get('/builder', views.builder) - app.get('/builder/:name', views.builder) - - app.get('/api/layout', middleware.ensureAuthenticated, api.layout.index) - app.get('/api/layout/show', middleware.ensureAuthenticated, api.layout.show) - app.post('/api/layout/new', middleware.ensureAuthenticated, api.layout.create) - app.post('/api/layout/edit', middleware.ensureAuthenticated, api.layout.update) - app.delete('/api/layout/destroy', middleware.ensureAuthenticated, api.layout.destroy) + app.get('/builder', middleware.ensureAuthenticated, views.modal) + app.get('/builder/:name', middleware.ensureAuthenticated, views.builder) + + app.get('/api/layouts', middleware.ensureAuthenticated, api.layout.index) + app.get('/api/layouts/show', middleware.ensureAuthenticated, api.layout.show) + app.post('/api/layouts/new', middleware.ensureAuthenticated, api.layout.create) + app.post('/api/layouts/edit', middleware.ensureAuthenticated, api.layout.update) + app.delete('/api/layouts/destroy', middleware.ensureAuthenticated, api.layout.destroy) } diff --git a/views/controls/builder/settings.ejs b/views/controls/builder/settings.ejs index c91f7b5..52cb586 100644 --- a/views/controls/builder/settings.ejs +++ b/views/controls/builder/settings.ejs @@ -8,7 +8,7 @@
- +
diff --git a/views/modal.ejs b/views/modal.ejs index a2ea680..4550aff 100644 --- a/views/modal.ejs +++ b/views/modal.ejs @@ -10,10 +10,9 @@
- [[ include partials/alert-modal ]] [[ include partials/confirm-modal ]] [[ include partials/sign-in ]] - [[ include projects/new-project ]] + [[ include projects/layouts-modal ]] [[ include projects/edit-project ]] [[ include partials/footer ]] diff --git a/views/partials/header.ejs b/views/partials/header.ejs index c73cc47..55c8545 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -2,7 +2,7 @@ [[ if (logged_in) { ]] - Layouts + Layouts Projects [[ if (profile && String(user._id) == String(profile._id)) { ]] Edit Profile @@ -10,7 +10,7 @@ Profile [[ } ]] [[ } else { ]] - - + + [[ } ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index e9ec5a5..ced15c1 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -45,13 +45,13 @@ - + - + diff --git a/views/profile.ejs b/views/profile.ejs index f3309dd..5ca62dc 100644 --- a/views/profile.ejs +++ b/views/profile.ejs @@ -41,7 +41,7 @@ [[ include projects/list-projects ]] - create project + create project [[ include partials/edit-profile ]] [[ include projects/new-project ]] diff --git a/views/projects/layouts-modal.ejs b/views/projects/layouts-modal.ejs new file mode 100644 index 0000000..90585c3 --- /dev/null +++ b/views/projects/layouts-modal.ejs @@ -0,0 +1,26 @@ +
+ X +
+ +
+

Edit Room Layouts

+
+
+ +
+
+
+ + +
+ X +
+ +
+

Choose Room Template

+
+
+ +
+
+
diff --git a/views/projects/new-project.ejs b/views/projects/new-project.ejs deleted file mode 100644 index e151f3a..0000000 --- a/views/projects/new-project.ejs +++ /dev/null @@ -1,18 +0,0 @@ -
- X -
- -
-

Choose Room Template

- - - - - - -
-
- -
-
-
-- cgit v1.2.3-70-g09d2