From 9fb0fe9b7ef614d2248b00ea2b964205f3453f41 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 10 Jun 2014 12:00:24 -0400 Subject: split up builder functionality --- public/assets/javascripts/app.js | 2 +- public/assets/javascripts/rectangles/util/sort.js | 2 +- public/assets/javascripts/ui/AlertModal.js | 25 ---- public/assets/javascripts/ui/BuilderView.js | 23 ---- public/assets/javascripts/ui/ConfirmModal.js | 25 ---- public/assets/javascripts/ui/DocumentModal.js | 49 ------- public/assets/javascripts/ui/EditProfileModal.js | 56 -------- public/assets/javascripts/ui/EditProjectModal.js | 49 ------- public/assets/javascripts/ui/EditorView.js | 13 -- public/assets/javascripts/ui/NewProjectModal.js | 17 --- public/assets/javascripts/ui/Router.js | 151 --------------------- public/assets/javascripts/ui/SignInModal.js | 12 -- public/assets/javascripts/ui/SignUpModal.js | 37 ----- public/assets/javascripts/ui/SiteRouter.js | 133 ++++++++++++++++++ .../javascripts/ui/builder/BuilderSettings.js | 18 +++ .../javascripts/ui/builder/BuilderToolbar.js | 42 ++++++ .../assets/javascripts/ui/builder/BuilderView.js | 17 +++ public/assets/javascripts/ui/editor/EditorView.js | 13 ++ public/assets/javascripts/ui/lib/AlertModal.js | 25 ++++ public/assets/javascripts/ui/lib/ConfirmModal.js | 25 ++++ public/assets/javascripts/ui/lib/ModalFormView.js | 96 +++++++++++++ public/assets/javascripts/ui/lib/ModalView.js | 28 ++++ public/assets/javascripts/ui/lib/Router.js | 28 ++++ public/assets/javascripts/ui/lib/view.js | 130 ++++++++++++++++++ public/assets/javascripts/ui/site/DocumentModal.js | 49 +++++++ .../assets/javascripts/ui/site/EditProfileModal.js | 56 ++++++++ .../assets/javascripts/ui/site/EditProjectModal.js | 49 +++++++ .../assets/javascripts/ui/site/NewProjectModal.js | 17 +++ public/assets/javascripts/ui/site/SignInModal.js | 12 ++ public/assets/javascripts/ui/site/SignUpModal.js | 37 +++++ public/assets/javascripts/vendor/ModalFormView.js | 96 ------------- public/assets/javascripts/vendor/ModalView.js | 28 ---- public/assets/javascripts/vendor/view.js | 130 ------------------ public/assets/stylesheets/app.css | 6 +- views/controls/builder/settings.ejs | 8 +- views/controls/builder/toolbar.ejs | 2 +- views/partials/scripts.ejs | 36 +++-- 37 files changed, 807 insertions(+), 735 deletions(-) delete mode 100644 public/assets/javascripts/ui/AlertModal.js delete mode 100644 public/assets/javascripts/ui/BuilderView.js delete mode 100644 public/assets/javascripts/ui/ConfirmModal.js delete mode 100644 public/assets/javascripts/ui/DocumentModal.js delete mode 100644 public/assets/javascripts/ui/EditProfileModal.js delete mode 100644 public/assets/javascripts/ui/EditProjectModal.js delete mode 100644 public/assets/javascripts/ui/EditorView.js delete mode 100644 public/assets/javascripts/ui/NewProjectModal.js delete mode 100644 public/assets/javascripts/ui/Router.js delete mode 100644 public/assets/javascripts/ui/SignInModal.js delete mode 100644 public/assets/javascripts/ui/SignUpModal.js create mode 100644 public/assets/javascripts/ui/SiteRouter.js create mode 100644 public/assets/javascripts/ui/builder/BuilderSettings.js create mode 100644 public/assets/javascripts/ui/builder/BuilderToolbar.js create mode 100644 public/assets/javascripts/ui/builder/BuilderView.js create mode 100644 public/assets/javascripts/ui/editor/EditorView.js create mode 100644 public/assets/javascripts/ui/lib/AlertModal.js create mode 100644 public/assets/javascripts/ui/lib/ConfirmModal.js create mode 100644 public/assets/javascripts/ui/lib/ModalFormView.js create mode 100644 public/assets/javascripts/ui/lib/ModalView.js create mode 100644 public/assets/javascripts/ui/lib/Router.js create mode 100644 public/assets/javascripts/ui/lib/view.js create mode 100644 public/assets/javascripts/ui/site/DocumentModal.js create mode 100644 public/assets/javascripts/ui/site/EditProfileModal.js create mode 100644 public/assets/javascripts/ui/site/EditProjectModal.js create mode 100644 public/assets/javascripts/ui/site/NewProjectModal.js create mode 100644 public/assets/javascripts/ui/site/SignInModal.js create mode 100644 public/assets/javascripts/ui/site/SignUpModal.js delete mode 100644 public/assets/javascripts/vendor/ModalFormView.js delete mode 100644 public/assets/javascripts/vendor/ModalView.js delete mode 100644 public/assets/javascripts/vendor/view.js diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 3c0fbe5..d986b7a 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -21,7 +21,7 @@ app.mode = { editor: false, builder: false } app.init = function () { app.tube = new Tube () - app.router = new Router () + app.router = new SiteRouter () } app.launch = function () { diff --git a/public/assets/javascripts/rectangles/util/sort.js b/public/assets/javascripts/rectangles/util/sort.js index 0985b75..a0665ae 100644 --- a/public/assets/javascripts/rectangles/util/sort.js +++ b/public/assets/javascripts/rectangles/util/sort.js @@ -64,7 +64,7 @@ function sort_rooms_by_position(list){ function sort_rooms_by_area(list){ return list.map(room_area_tuple) .sort(compare_car) - .map(cdr) + .map(cdr) } function sort_rects_by_position(list){ diff --git a/public/assets/javascripts/ui/AlertModal.js b/public/assets/javascripts/ui/AlertModal.js deleted file mode 100644 index c5693ad..0000000 --- a/public/assets/javascripts/ui/AlertModal.js +++ /dev/null @@ -1,25 +0,0 @@ - - -var AlertModal = ModalFormView.extend({ - el: ".mediaDrawer.alert", - - events: { - "click .ok": "advance", - "click .close": "advance", - }, - - alert: function(message, callback){ - this.$(".message").html(message) - this.callback = callback - this.show() - }, - - advance: function(e){ - e && e.preventDefault() - this.hide() - this.callback && this.callback() - this.callback = null - } - -}) - diff --git a/public/assets/javascripts/ui/BuilderView.js b/public/assets/javascripts/ui/BuilderView.js deleted file mode 100644 index c91d9ee..0000000 --- a/public/assets/javascripts/ui/BuilderView.js +++ /dev/null @@ -1,23 +0,0 @@ - -var BuilderView = View.extend({ - el: "#builderView", - - events: { - "click [data-role='toggle-map-view']": 'toggleMap', - "click [data-role='toggle-layout-settings']": 'toggleSettings', - }, - - load: function(){ - $("#map").show() - }, - - toggleMap: function(){ - map.toggle() - }, - - toggleSettings: function(){ - this.$(".settings").toggleClass("active") - }, - -}) - diff --git a/public/assets/javascripts/ui/ConfirmModal.js b/public/assets/javascripts/ui/ConfirmModal.js deleted file mode 100644 index 868ce8e..0000000 --- a/public/assets/javascripts/ui/ConfirmModal.js +++ /dev/null @@ -1,25 +0,0 @@ - - -var ConfirmModal = ModalFormView.extend({ - el: ".mediaDrawer.confirm", - - events: { - "click .yes": "advance", - "click .no": "hide", - }, - - confirm: function(question, callback){ - this.$(".question").html(question) - this.callback = callback - this.show() - }, - - advance: function(e){ - e && e.preventDefault() - this.hide() - this.callback && this.callback() - this.callback = null - } - -}) - diff --git a/public/assets/javascripts/ui/DocumentModal.js b/public/assets/javascripts/ui/DocumentModal.js deleted file mode 100644 index 6f16169..0000000 --- a/public/assets/javascripts/ui/DocumentModal.js +++ /dev/null @@ -1,49 +0,0 @@ - -var DocumentModal = ModalFormView.extend({ - el: ".mediaDrawer.editDocument", - createAction: "/api/docs/new", - updateAction: "/api/docs/edit", - destroyAction: "/api/docs/destroy", - - load: function(name, isNew){ - this.reset() - - if (isNew || name === "new") { - name = sanitize(name) - if (name !== "new") { - this.$("[name='new_name']").val( name.replace(/\s+/g,"-") ) - this.$("[name='displayName']").val( capitalize(name.replace(/-/g," ")) ) - } - this.action = this.createAction - return this.show() - } - - this.action = this.updateAction - - $.get("/api/docs", { name: name }, $.proxy(function(data){ - if (data.isNew) { - this.action = this.createAction - } - - for (var i in data) { - this.$("[name='" + i + "']").val(data[i]) - } - this.$("[name='new_name']").val(name) - - this.show() - }, this)) - }, - - success: function(res){ - window.location.pathname = "/about/" + res.name - }, - - destroy: function(name, cb){ - $.ajax({ - type: "delete", - url: this.destroyAction, - data: { name: name, _csrf: $("[name=_csrf]").val() } - }).complete(cb || function(){}) - }, - -}) diff --git a/public/assets/javascripts/ui/EditProfileModal.js b/public/assets/javascripts/ui/EditProfileModal.js deleted file mode 100644 index 6b89ad8..0000000 --- a/public/assets/javascripts/ui/EditProfileModal.js +++ /dev/null @@ -1,56 +0,0 @@ - -var EditProfileModal = ModalFormView.extend({ - el: ".mediaDrawer.editProfile", - action: "/api/profile", - method: "put", - - load: function(){ - this.reset() - $.get("/api/profile", $.proxy(function(data){ - console.log(data) - - for (var i in data) { - this.$("[name='" + i + "']").val(data[i]) - } - - this.$("#profile_username").html(data.username) - - if (data.photo && data.photo.length) { - this.$("#load_avatar").attr("src", data.photo) - } - else { - this.$("#load_avatar").hide() - } - - this.show() - }, this)) - }, - - validate: function(){ - var errors = [] - - var email = this.$("#profile_email").val() - var pw0 = this.$("#profile_old_password").val() - var pw1 = this.$("#profile_new_password").val() - var pw2 = this.$("#profile_new_password2").val() - - if (pw1.length) { - if (! pw0.length) { - errors.push("Please enter your old password.") - } - if (pw1 !== pw2) { - errors.push("New passwords don't match"); - } - } - if (email.length && email.indexOf("@") === -1) { - errors.push("Please enter a valid email address"); - } - - return errors - }, - - success: function(){ - window.location.href = "/profile" - } - -}) diff --git a/public/assets/javascripts/ui/EditProjectModal.js b/public/assets/javascripts/ui/EditProjectModal.js deleted file mode 100644 index 356d8b7..0000000 --- a/public/assets/javascripts/ui/EditProjectModal.js +++ /dev/null @@ -1,49 +0,0 @@ - -var EditProjectModal = ModalView.extend({ - el: ".mediaDrawer.editProject", - action: "/project/edit", - - events: { - "submit form": "submit" - }, - - initialize: function(){ - this.$form = this.$("form") - this.$errors = this.$(".errors") - this.$errorList = this.$(".errorList") - }, - - reset: function(){ - this.$("input").not("[type='submit']").not("[type='hidden']").val("") - }, - - load: function(){ - this.reset() - this.show() - }, - - submit: function(e){ - e.preventDefault() - - this.$errors.hide(); - this.$errorList.empty() - - var fields = this.$form.serializeArray() - - var request = $.post(this.action, $.param(fields)); - request.done($.proxy(function (response) { - if (response.error) { - this.$errors.show(); - for (var key in response.error.errors) { - this.$errorList.append('
' + response.error.errors[key].message + '
'); - } - return - } - else { - window.location.href = "/profile" - } - }, this)); - } - -}) - diff --git a/public/assets/javascripts/ui/EditorView.js b/public/assets/javascripts/ui/EditorView.js deleted file mode 100644 index 91329de..0000000 --- a/public/assets/javascripts/ui/EditorView.js +++ /dev/null @@ -1,13 +0,0 @@ - -var EditorView = View.extend({ -// el: "#editorControls", - - events: { - }, - - load: function(){ - $("#map").hide() - } - -}) - diff --git a/public/assets/javascripts/ui/NewProjectModal.js b/public/assets/javascripts/ui/NewProjectModal.js deleted file mode 100644 index cf2044f..0000000 --- a/public/assets/javascripts/ui/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/Router.js b/public/assets/javascripts/ui/Router.js deleted file mode 100644 index 5b75162..0000000 --- a/public/assets/javascripts/ui/Router.js +++ /dev/null @@ -1,151 +0,0 @@ - -var Router = View.extend({ - el: "body", - - events: { - "click [data-role='show-signup-modal']": 'signup', - "click [data-role='show-signin-modal']": 'signin', - "click [data-role='new-project-modal']": 'newProject', - "click [data-role='edit-project-modal']": 'editProject', - "click [data-role='edit-profile-modal']": 'editProfile', - "click [data-role='new-document-modal']": 'newDocument', - "click [data-role='edit-document-modal']": 'editDocument', - "click [data-role='delete-document-modal']": 'destroyDocument', - }, - - routes: { - "/login": 'signin', - "/signup": 'signup', - "/project/new": 'newProject', - "/profile": 'profile', - "/profile/edit": 'editProfile', - "/about/:name/edit": 'editDocument', - "/about/new": 'newDocument', - "/editor": 'launchEditor', - "/builder": 'launchBuilder', - }, - - initialize: function(){ - this.builderView = new BuilderView() - this.editorView = new EditorView() - this.signUpModal = new SignUpModal() - this.signInModal = new SignInModal() - this.newProjectModal = new NewProjectModal() - this.editProjectModal = new EditProjectModal() - this.editProfileModal = new EditProfileModal() - this.documentModal = new DocumentModal() - this.confirmModal = new ConfirmModal() - this.alertModal = new AlertModal() - - this.originalPath = window.location.pathname - - var path = window.location.pathname.split("/") - // console.log(path) - for (var route in this.routes) { - var routePath = route.split("/") - if (routePath[1] == path[1]) { - if (routePath[2] && routePath[2].indexOf(":") !== -1 && path[2] && (path[3] === routePath[3]) ) { - this[this.routes[route]](null, path[2]) - break; - } - else if (routePath[2] == path[2]) { - this[this.routes[route]](null) - break; - } - else if (! routePath[2] && (! path[2].length || ! path[2])) { - this[this.routes[route]](null) - break; - } - } - } - - $("body").removeClass("loading") - }, - - launchBuilder: function(){ - app.mode.builder = true - app.launch() - this.builderView.load() - }, - - launchEditor: function(){ - app.mode.editor = true - app.launch() - this.editorView.load() - }, - - signup: function(e){ - e && e.preventDefault() - window.history.pushState(null, document.title, "/signup") - this.signUpModal.load() - }, - - signin: function(e){ - e && e.preventDefault() - window.history.pushState(null, document.title, "/login") - this.signInModal.load() - }, - - newProject: function(e){ - e && e.preventDefault() - window.history.pushState(null, document.title, "/project/new") - - this.newProjectModal.load() - }, - - editProject: function(e){ - e && e.preventDefault() - window.history.pushState(null, document.title, "/project/edit") - this.editProjectModal.load() - }, - - profile: function(e){ - var classes = ['one', 'two', 'three', 'four', - 'five', 'six', 'seven', 'eight', - 'nine', 'ten', 'eleven', 'twelve', - 'thirteen']; - $(".bio").addClass(choice(classes)); - }, - - editProfile: function(e){ - e && e.preventDefault() - window.history.pushState(null, document.title, "/profile/edit") - - this.editProfileModal.load() - }, - - newDocument: function(e){ - e && e.preventDefault() - - var name = e ? $(e.currentTarget).data("name") : "new" - - window.history.pushState(null, document.title, "/about/new") - this.documentModal.load(name, true) - }, - - editDocument: function(e, name){ - e && e.preventDefault() - - var name = e ? $(e.currentTarget).data("name") : name - window.history.pushState(null, document.title, "/about/" + name + "/edit") - this.documentModal.load(name, false) - }, - - destroyDocument: function(e, name){ - e && e.preventDefault() - - var name = e ? $(e.currentTarget).data("name") : name - - this.confirmModal.confirm("Are you sure you want to delete " + name + "?", $.proxy(function(){ - this.documentModal.destroy(name, $.proxy(function(){ - this.alertModal.alert("Document deleted!", $.proxy(function(){ - window.location.href = "/about" - }, this)) - }, this)) - }, this)) - - // this.documentModal.destroy(name) - }, - -}) - diff --git a/public/assets/javascripts/ui/SignInModal.js b/public/assets/javascripts/ui/SignInModal.js deleted file mode 100644 index 4c91b54..0000000 --- a/public/assets/javascripts/ui/SignInModal.js +++ /dev/null @@ -1,12 +0,0 @@ - - -var SignInModal = ModalFormView.extend({ - el: ".mediaDrawer.signin", - action: "/auth/signin", - - success: function(res){ - window.location.href = "/profile" - } - -}) - diff --git a/public/assets/javascripts/ui/SignUpModal.js b/public/assets/javascripts/ui/SignUpModal.js deleted file mode 100644 index 5c651ee..0000000 --- a/public/assets/javascripts/ui/SignUpModal.js +++ /dev/null @@ -1,37 +0,0 @@ -var SignUpModal = ModalFormView.extend({ - el: ".mediaDrawer.signup", - action: "/auth/signup", - - validate: function(){ - var errors = [] - - var username = this.$("#usernameInput").val() - var email = this.$("#emailInput").val() - var pw1 = this.$("#passwordInput1").val() - var pw2 = this.$("#passwordInput2").val() - - if (! username.length) { - errors.push("Please enter a username"); - } - if (! pw1.length) { - errors.push("Please enter a password"); - } - if (! email.length) { - errors.push("Please enter an email address"); - } - else if (email.indexOf("@") === -1) { - errors.push("Please enter a valid email address"); - } - if (pw1 !== pw2) { - errors.push("Passwords don't match"); - } - - return errors - }, - - success: function(res){ - window.location.href = "/profile" - } - -}) - diff --git a/public/assets/javascripts/ui/SiteRouter.js b/public/assets/javascripts/ui/SiteRouter.js new file mode 100644 index 0000000..c02b19c --- /dev/null +++ b/public/assets/javascripts/ui/SiteRouter.js @@ -0,0 +1,133 @@ + +var SiteRouter = Router.extend({ + el: "body", + + events: { + "click [data-role='show-signup-modal']": 'signup', + "click [data-role='show-signin-modal']": 'signin', + "click [data-role='new-project-modal']": 'newProject', + "click [data-role='edit-project-modal']": 'editProject', + "click [data-role='edit-profile-modal']": 'editProfile', + "click [data-role='new-document-modal']": 'newDocument', + "click [data-role='edit-document-modal']": 'editDocument', + "click [data-role='delete-document-modal']": 'destroyDocument', + }, + + routes: { + "/login": 'signin', + "/signup": 'signup', + "/project/new": 'newProject', + "/profile": 'profile', + "/profile/edit": 'editProfile', + "/about/:name/edit": 'editDocument', + "/about/new": 'newDocument', + "/editor": 'launchEditor', + "/builder": 'launchBuilder', + }, + + initialize: function(){ + this.signUpModal = new SignUpModal() + this.signInModal = new SignInModal() + this.newProjectModal = new NewProjectModal() + this.editProjectModal = new EditProjectModal() + this.editProfileModal = new EditProfileModal() + this.documentModal = new DocumentModal() + this.confirmModal = new ConfirmModal() + this.alertModal = new AlertModal() + + this.route() + + $("body").removeClass("loading") + }, + + launchBuilder: function(){ + app.mode.builder = true + app.launch() + + this.builderView = new BuilderView() + this.builderView.load() + }, + + launchEditor: function(){ + app.mode.editor = true + app.launch() + + this.editorView = new EditorView() + this.editorView.load() + }, + + signup: function(e){ + e && e.preventDefault() + window.history.pushState(null, document.title, "/signup") + this.signUpModal.load() + }, + + signin: function(e){ + e && e.preventDefault() + window.history.pushState(null, document.title, "/login") + this.signInModal.load() + }, + + newProject: function(e){ + e && e.preventDefault() + window.history.pushState(null, document.title, "/project/new") + + this.newProjectModal.load() + }, + + editProject: function(e){ + e && e.preventDefault() + window.history.pushState(null, document.title, "/project/edit") + this.editProjectModal.load() + }, + + profile: function(e){ + var classes = ['one', 'two', 'three', 'four', + 'five', 'six', 'seven', 'eight', + 'nine', 'ten', 'eleven', 'twelve', + 'thirteen']; + $(".bio").addClass(choice(classes)); + }, + + editProfile: function(e){ + e && e.preventDefault() + window.history.pushState(null, document.title, "/profile/edit") + + this.editProfileModal.load() + }, + + newDocument: function(e){ + e && e.preventDefault() + + var name = e ? $(e.currentTarget).data("name") : "new" + + window.history.pushState(null, document.title, "/about/new") + this.documentModal.load(name, true) + }, + + editDocument: function(e, name){ + e && e.preventDefault() + + var name = e ? $(e.currentTarget).data("name") : name + window.history.pushState(null, document.title, "/about/" + name + "/edit") + this.documentModal.load(name, false) + }, + + destroyDocument: function(e, name){ + e && e.preventDefault() + + var name = e ? $(e.currentTarget).data("name") : name + + this.confirmModal.confirm("Are you sure you want to delete " + name + "?", $.proxy(function(){ + this.documentModal.destroy(name, $.proxy(function(){ + this.alertModal.alert("Document deleted!", $.proxy(function(){ + window.location.href = "/about" + }, this)) + }, this)) + }, this)) + + // this.documentModal.destroy(name) + }, + +}) + diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js new file mode 100644 index 0000000..b598a18 --- /dev/null +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -0,0 +1,18 @@ + + + + +var BuilderSettings = View.extend({ + el: "#builderSettings", + + events: { + }, + + initialize: function(){ + }, + + toggle: function(){ + this.$el.toggleClass("active") + } + +}) diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js new file mode 100644 index 0000000..42d4306 --- /dev/null +++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js @@ -0,0 +1,42 @@ + +var BuilderToolbar = View.extend({ + el: "#builderToolbar", + + events: { + "click [data-role='toggle-map-view']": 'toggleMap', + "click [data-role='toggle-layout-settings']": 'toggleSettings', + "click [data-role='undo']": 'undo', + "click [data-role='draw']": 'draw', + "click [data-role='resize']": 'resize', + "click [data-role='move']": 'move', + "click [data-role='delete']": 'delete', + }, + + initialize: function(opt){ + this.parent = opt.parent + }, + + toggleMap: function(){ + map.toggle() + }, + + toggleSettings: function(){ + this.parent.settings.toggle() + }, + + undo: function(){ + }, + + draw: function(){ + }, + + resize: function(){ + }, + + move: function(){ + }, + + delete: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js new file mode 100644 index 0000000..d0659bb --- /dev/null +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -0,0 +1,17 @@ + +var BuilderView = View.extend({ + el: "#builderView", + + events: { + }, + + initialize: function(){ + this.toolbar = new BuilderToolbar ({ parent: this }) + this.settings = new BuilderSettings ({ parent: this }) + }, + + load: function(){ + $("#map").show() + }, + +}) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js new file mode 100644 index 0000000..91329de --- /dev/null +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -0,0 +1,13 @@ + +var EditorView = View.extend({ +// el: "#editorControls", + + events: { + }, + + load: function(){ + $("#map").hide() + } + +}) + diff --git a/public/assets/javascripts/ui/lib/AlertModal.js b/public/assets/javascripts/ui/lib/AlertModal.js new file mode 100644 index 0000000..c5693ad --- /dev/null +++ b/public/assets/javascripts/ui/lib/AlertModal.js @@ -0,0 +1,25 @@ + + +var AlertModal = ModalFormView.extend({ + el: ".mediaDrawer.alert", + + events: { + "click .ok": "advance", + "click .close": "advance", + }, + + alert: function(message, callback){ + this.$(".message").html(message) + this.callback = callback + this.show() + }, + + advance: function(e){ + e && e.preventDefault() + this.hide() + this.callback && this.callback() + this.callback = null + } + +}) + diff --git a/public/assets/javascripts/ui/lib/ConfirmModal.js b/public/assets/javascripts/ui/lib/ConfirmModal.js new file mode 100644 index 0000000..868ce8e --- /dev/null +++ b/public/assets/javascripts/ui/lib/ConfirmModal.js @@ -0,0 +1,25 @@ + + +var ConfirmModal = ModalFormView.extend({ + el: ".mediaDrawer.confirm", + + events: { + "click .yes": "advance", + "click .no": "hide", + }, + + confirm: function(question, callback){ + this.$(".question").html(question) + this.callback = callback + this.show() + }, + + advance: function(e){ + e && e.preventDefault() + this.hide() + this.callback && this.callback() + this.callback = null + } + +}) + diff --git a/public/assets/javascripts/ui/lib/ModalFormView.js b/public/assets/javascripts/ui/lib/ModalFormView.js new file mode 100644 index 0000000..d084031 --- /dev/null +++ b/public/assets/javascripts/ui/lib/ModalFormView.js @@ -0,0 +1,96 @@ + +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/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js new file mode 100644 index 0000000..b90b3c4 --- /dev/null +++ b/public/assets/javascripts/ui/lib/ModalView.js @@ -0,0 +1,28 @@ + +var ModalView = View.extend({ + events: { + "click .close": 'close', + }, + + show: function(){ + $(".mediaDrawer").removeClass("active"); + this.$el.addClass("active"); + $("body").addClass("noOverflow"); + }, + + hide: function(){ + // $(".mediaDrawer, .room1").removeClass("active editing"); + this.$el.removeClass("active"); + $("body").removeClass("noOverflow"); + }, + + close: function(){ + if (window.isModalView) { + window.location.pathname = "/" + } + else { + history.pushState(null, document.title, app.router.originalPath) + this.hide() + } + } +}) diff --git a/public/assets/javascripts/ui/lib/Router.js b/public/assets/javascripts/ui/lib/Router.js new file mode 100644 index 0000000..d06c07a --- /dev/null +++ b/public/assets/javascripts/ui/lib/Router.js @@ -0,0 +1,28 @@ +var Router = View.extend({ + + route: function(){ + + this.originalPath = window.location.pathname + + var path = window.location.pathname.split("/") + // console.log(path) + for (var route in this.routes) { + var routePath = route.split("/") + if (routePath[1] == path[1]) { + if (routePath[2] && routePath[2].indexOf(":") !== -1 && path[2] && (path[3] === routePath[3]) ) { + this[this.routes[route]](null, path[2]) + break; + } + else if (routePath[2] == path[2]) { + this[this.routes[route]](null) + break; + } + else if (! routePath[2] && (! path[2].length || ! path[2])) { + this[this.routes[route]](null) + break; + } + } + } + } + +}) diff --git a/public/assets/javascripts/ui/lib/view.js b/public/assets/javascripts/ui/lib/view.js new file mode 100644 index 0000000..823a75b --- /dev/null +++ b/public/assets/javascripts/ui/lib/view.js @@ -0,0 +1,130 @@ +var View = (function($, _){ + + var View = function(options) { + this.cid = _.uniqueId('view'); + options || (options = {}); + _.extend(this, _.pick(options, viewOptions)); + this._ensureElement(); + this.initialize.apply(this, arguments); + this.delegateEvents(); + }; + + var delegateEventSplitter = /^(\S+)\s*(.*)$/; + + var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events']; + + _.extend(View.prototype, { + + // The default `tagName` of a View's element is `"div"`. + tagName: 'div', + + $: function(selector) { + return this.$el.find(selector); + }, + + initialize: function(){}, + + setElement: function(element, delegate) { + if (this.$el) this.undelegateEvents(); + this.$el = element instanceof $ ? element : $(element); + this.el = this.$el[0]; + if (delegate !== false) this.delegateEvents(); + return this; + }, + + // Set callbacks, where `this.events` is a hash of + // + // *{"event selector": "callback"}* + // + // { + // 'mousedown .title': 'edit', + // 'click .button': 'save', + // 'click .open': function(e) { ... } + // } + // + // pairs. Callbacks will be bound to the view, with `this` set properly. + // Uses event delegation for efficiency. + // Omitting the selector binds the event to `this.el`. + // This only works for delegate-able events: not `focus`, `blur`, and + // not `change`, `submit`, and `reset` in Internet Explorer. + delegateEvents: function(events) { + if (!(events || (events = _.result(this, 'events')))) return this; + this.undelegateEvents(); + for (var key in events) { + var method = events[key]; + if (!_.isFunction(method)) method = this[events[key]]; + if (!method) continue; + + var match = key.match(delegateEventSplitter); + var eventName = match[1], selector = match[2]; + method = _.bind(method, this); + eventName += '.delegateEvents' + this.cid; + if (selector === '') { + this.$el.on(eventName, method); + } else { + this.$el.on(eventName, selector, method); + } + } + return this; + }, + + // Clears all callbacks previously bound to the view with `delegateEvents`. + undelegateEvents: function() { + this.$el.off('.delegateEvents' + this.cid); + return this; + }, + + // Ensure that the View has a DOM element to render into. + // If `this.el` is a string, pass it through `$()`, take the first + // matching element, and re-assign it to `el`. Otherwise, create + // an element from the `id`, `className` and `tagName` properties. + _ensureElement: function() { + this.setElement(_.result(this, 'el'), false); + } + + }); + + + var extend = function(protoProps, staticProps) { + var staticProps = staticProps || {} + var parent = this; + var child; + var childEvents = {}; + + // The constructor function for the new subclass is either defined by you + // (the "constructor" property in your `extend` definition), or defaulted + // by us to simply call the parent's constructor. + if (protoProps && _.has(protoProps, 'constructor')) { + child = protoProps.constructor; + } else { + child = function(){ return parent.apply(this, arguments); }; + } + + // Extend events so we can subclass views + _.extend(childEvents, parent.prototype.events, protoProps.events) + + // Add static properties to the constructor function, if supplied. + _.extend(child, parent, staticProps); + + // Set the prototype chain to inherit from `parent`, without calling + // `parent`'s constructor function. + var Surrogate = function(){ this.constructor = child; }; + Surrogate.prototype = parent.prototype; + child.prototype = new Surrogate; + + // Add prototype properties (instance properties) to the subclass, + // if supplied. + if (protoProps) _.extend(child.prototype, protoProps); + + // Set a convenience property in case the parent's prototype is needed + // later. + child.prototype.__super__ = parent.prototype; + child.prototype.events = childEvents + + return child; + }; + + View.extend = extend; + + return View; +})(jQuery, _) diff --git a/public/assets/javascripts/ui/site/DocumentModal.js b/public/assets/javascripts/ui/site/DocumentModal.js new file mode 100644 index 0000000..6f16169 --- /dev/null +++ b/public/assets/javascripts/ui/site/DocumentModal.js @@ -0,0 +1,49 @@ + +var DocumentModal = ModalFormView.extend({ + el: ".mediaDrawer.editDocument", + createAction: "/api/docs/new", + updateAction: "/api/docs/edit", + destroyAction: "/api/docs/destroy", + + load: function(name, isNew){ + this.reset() + + if (isNew || name === "new") { + name = sanitize(name) + if (name !== "new") { + this.$("[name='new_name']").val( name.replace(/\s+/g,"-") ) + this.$("[name='displayName']").val( capitalize(name.replace(/-/g," ")) ) + } + this.action = this.createAction + return this.show() + } + + this.action = this.updateAction + + $.get("/api/docs", { name: name }, $.proxy(function(data){ + if (data.isNew) { + this.action = this.createAction + } + + for (var i in data) { + this.$("[name='" + i + "']").val(data[i]) + } + this.$("[name='new_name']").val(name) + + this.show() + }, this)) + }, + + success: function(res){ + window.location.pathname = "/about/" + res.name + }, + + destroy: function(name, cb){ + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { name: name, _csrf: $("[name=_csrf]").val() } + }).complete(cb || function(){}) + }, + +}) diff --git a/public/assets/javascripts/ui/site/EditProfileModal.js b/public/assets/javascripts/ui/site/EditProfileModal.js new file mode 100644 index 0000000..6b89ad8 --- /dev/null +++ b/public/assets/javascripts/ui/site/EditProfileModal.js @@ -0,0 +1,56 @@ + +var EditProfileModal = ModalFormView.extend({ + el: ".mediaDrawer.editProfile", + action: "/api/profile", + method: "put", + + load: function(){ + this.reset() + $.get("/api/profile", $.proxy(function(data){ + console.log(data) + + for (var i in data) { + this.$("[name='" + i + "']").val(data[i]) + } + + this.$("#profile_username").html(data.username) + + if (data.photo && data.photo.length) { + this.$("#load_avatar").attr("src", data.photo) + } + else { + this.$("#load_avatar").hide() + } + + this.show() + }, this)) + }, + + validate: function(){ + var errors = [] + + var email = this.$("#profile_email").val() + var pw0 = this.$("#profile_old_password").val() + var pw1 = this.$("#profile_new_password").val() + var pw2 = this.$("#profile_new_password2").val() + + if (pw1.length) { + if (! pw0.length) { + errors.push("Please enter your old password.") + } + if (pw1 !== pw2) { + errors.push("New passwords don't match"); + } + } + if (email.length && email.indexOf("@") === -1) { + errors.push("Please enter a valid email address"); + } + + return errors + }, + + success: function(){ + window.location.href = "/profile" + } + +}) diff --git a/public/assets/javascripts/ui/site/EditProjectModal.js b/public/assets/javascripts/ui/site/EditProjectModal.js new file mode 100644 index 0000000..356d8b7 --- /dev/null +++ b/public/assets/javascripts/ui/site/EditProjectModal.js @@ -0,0 +1,49 @@ + +var EditProjectModal = ModalView.extend({ + el: ".mediaDrawer.editProject", + action: "/project/edit", + + events: { + "submit form": "submit" + }, + + initialize: function(){ + this.$form = this.$("form") + this.$errors = this.$(".errors") + this.$errorList = this.$(".errorList") + }, + + reset: function(){ + this.$("input").not("[type='submit']").not("[type='hidden']").val("") + }, + + load: function(){ + this.reset() + this.show() + }, + + submit: function(e){ + e.preventDefault() + + this.$errors.hide(); + this.$errorList.empty() + + var fields = this.$form.serializeArray() + + var request = $.post(this.action, $.param(fields)); + request.done($.proxy(function (response) { + if (response.error) { + this.$errors.show(); + for (var key in response.error.errors) { + this.$errorList.append('
' + response.error.errors[key].message + '
'); + } + return + } + else { + window.location.href = "/profile" + } + }, this)); + } + +}) + diff --git a/public/assets/javascripts/ui/site/NewProjectModal.js b/public/assets/javascripts/ui/site/NewProjectModal.js new file mode 100644 index 0000000..cf2044f --- /dev/null +++ b/public/assets/javascripts/ui/site/NewProjectModal.js @@ -0,0 +1,17 @@ + + +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/site/SignInModal.js b/public/assets/javascripts/ui/site/SignInModal.js new file mode 100644 index 0000000..4c91b54 --- /dev/null +++ b/public/assets/javascripts/ui/site/SignInModal.js @@ -0,0 +1,12 @@ + + +var SignInModal = ModalFormView.extend({ + el: ".mediaDrawer.signin", + action: "/auth/signin", + + success: function(res){ + window.location.href = "/profile" + } + +}) + diff --git a/public/assets/javascripts/ui/site/SignUpModal.js b/public/assets/javascripts/ui/site/SignUpModal.js new file mode 100644 index 0000000..5c651ee --- /dev/null +++ b/public/assets/javascripts/ui/site/SignUpModal.js @@ -0,0 +1,37 @@ +var SignUpModal = ModalFormView.extend({ + el: ".mediaDrawer.signup", + action: "/auth/signup", + + validate: function(){ + var errors = [] + + var username = this.$("#usernameInput").val() + var email = this.$("#emailInput").val() + var pw1 = this.$("#passwordInput1").val() + var pw2 = this.$("#passwordInput2").val() + + if (! username.length) { + errors.push("Please enter a username"); + } + if (! pw1.length) { + errors.push("Please enter a password"); + } + if (! email.length) { + errors.push("Please enter an email address"); + } + else if (email.indexOf("@") === -1) { + errors.push("Please enter a valid email address"); + } + if (pw1 !== pw2) { + errors.push("Passwords don't match"); + } + + return errors + }, + + success: function(res){ + window.location.href = "/profile" + } + +}) + diff --git a/public/assets/javascripts/vendor/ModalFormView.js b/public/assets/javascripts/vendor/ModalFormView.js deleted file mode 100644 index d084031..0000000 --- a/public/assets/javascripts/vendor/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/vendor/ModalView.js b/public/assets/javascripts/vendor/ModalView.js deleted file mode 100644 index b90b3c4..0000000 --- a/public/assets/javascripts/vendor/ModalView.js +++ /dev/null @@ -1,28 +0,0 @@ - -var ModalView = View.extend({ - events: { - "click .close": 'close', - }, - - show: function(){ - $(".mediaDrawer").removeClass("active"); - this.$el.addClass("active"); - $("body").addClass("noOverflow"); - }, - - hide: function(){ - // $(".mediaDrawer, .room1").removeClass("active editing"); - this.$el.removeClass("active"); - $("body").removeClass("noOverflow"); - }, - - close: function(){ - if (window.isModalView) { - window.location.pathname = "/" - } - else { - history.pushState(null, document.title, app.router.originalPath) - this.hide() - } - } -}) diff --git a/public/assets/javascripts/vendor/view.js b/public/assets/javascripts/vendor/view.js deleted file mode 100644 index 823a75b..0000000 --- a/public/assets/javascripts/vendor/view.js +++ /dev/null @@ -1,130 +0,0 @@ -var View = (function($, _){ - - var View = function(options) { - this.cid = _.uniqueId('view'); - options || (options = {}); - _.extend(this, _.pick(options, viewOptions)); - this._ensureElement(); - this.initialize.apply(this, arguments); - this.delegateEvents(); - }; - - var delegateEventSplitter = /^(\S+)\s*(.*)$/; - - var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events']; - - _.extend(View.prototype, { - - // The default `tagName` of a View's element is `"div"`. - tagName: 'div', - - $: function(selector) { - return this.$el.find(selector); - }, - - initialize: function(){}, - - setElement: function(element, delegate) { - if (this.$el) this.undelegateEvents(); - this.$el = element instanceof $ ? element : $(element); - this.el = this.$el[0]; - if (delegate !== false) this.delegateEvents(); - return this; - }, - - // Set callbacks, where `this.events` is a hash of - // - // *{"event selector": "callback"}* - // - // { - // 'mousedown .title': 'edit', - // 'click .button': 'save', - // 'click .open': function(e) { ... } - // } - // - // pairs. Callbacks will be bound to the view, with `this` set properly. - // Uses event delegation for efficiency. - // Omitting the selector binds the event to `this.el`. - // This only works for delegate-able events: not `focus`, `blur`, and - // not `change`, `submit`, and `reset` in Internet Explorer. - delegateEvents: function(events) { - if (!(events || (events = _.result(this, 'events')))) return this; - this.undelegateEvents(); - for (var key in events) { - var method = events[key]; - if (!_.isFunction(method)) method = this[events[key]]; - if (!method) continue; - - var match = key.match(delegateEventSplitter); - var eventName = match[1], selector = match[2]; - method = _.bind(method, this); - eventName += '.delegateEvents' + this.cid; - if (selector === '') { - this.$el.on(eventName, method); - } else { - this.$el.on(eventName, selector, method); - } - } - return this; - }, - - // Clears all callbacks previously bound to the view with `delegateEvents`. - undelegateEvents: function() { - this.$el.off('.delegateEvents' + this.cid); - return this; - }, - - // Ensure that the View has a DOM element to render into. - // If `this.el` is a string, pass it through `$()`, take the first - // matching element, and re-assign it to `el`. Otherwise, create - // an element from the `id`, `className` and `tagName` properties. - _ensureElement: function() { - this.setElement(_.result(this, 'el'), false); - } - - }); - - - var extend = function(protoProps, staticProps) { - var staticProps = staticProps || {} - var parent = this; - var child; - var childEvents = {}; - - // The constructor function for the new subclass is either defined by you - // (the "constructor" property in your `extend` definition), or defaulted - // by us to simply call the parent's constructor. - if (protoProps && _.has(protoProps, 'constructor')) { - child = protoProps.constructor; - } else { - child = function(){ return parent.apply(this, arguments); }; - } - - // Extend events so we can subclass views - _.extend(childEvents, parent.prototype.events, protoProps.events) - - // Add static properties to the constructor function, if supplied. - _.extend(child, parent, staticProps); - - // Set the prototype chain to inherit from `parent`, without calling - // `parent`'s constructor function. - var Surrogate = function(){ this.constructor = child; }; - Surrogate.prototype = parent.prototype; - child.prototype = new Surrogate; - - // Add prototype properties (instance properties) to the subclass, - // if supplied. - if (protoProps) _.extend(child.prototype, protoProps); - - // Set a convenience property in case the parent's prototype is needed - // later. - child.prototype.__super__ = parent.prototype; - child.prototype.events = childEvents - - return child; - }; - - View.extend = extend; - - return View; -})(jQuery, _) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e5666ca..1ad2409 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -372,6 +372,8 @@ h5{ } .topLinks { float: right; + z-index: 3; + position: relative; font-size: 18px; padding: 8px; margin: 14px; @@ -384,7 +386,7 @@ h5{ color: black; font-weight: 300; text-decoration: none; - border-bottom:1px solid white; + border-bottom:1px solid transparent; } .topLinks a:hover { border-bottom:1px solid lightgreen; @@ -533,7 +535,7 @@ h5{ backface-visibility: visible; } #hud { - position: absolute; + position: fixed; top:0;left:0; z-index: 2; } diff --git a/views/controls/builder/settings.ejs b/views/controls/builder/settings.ejs index f92d1c7..c91f7b5 100644 --- a/views/controls/builder/settings.ejs +++ b/views/controls/builder/settings.ejs @@ -1,4 +1,4 @@ -
+ diff --git a/views/controls/builder/toolbar.ejs b/views/controls/builder/toolbar.ejs index 1d57322..400a008 100644 --- a/views/controls/builder/toolbar.ejs +++ b/views/controls/builder/toolbar.ejs @@ -1,4 +1,4 @@ -
+