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 +- 8 files changed, 184 insertions(+), 132 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 (limited to 'public') 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; } -- cgit v1.2.3-70-g09d2