From 160eb7f88036d997d555520df204bf37aeb22f77 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 10 Jun 2014 01:22:43 -0400 Subject: confirm modal, alert modal --- public/assets/javascripts/ui/AlertModal.js | 25 +++++++++ public/assets/javascripts/ui/ConfirmModal.js | 25 +++++++++ public/assets/javascripts/ui/DocumentModal.js | 13 ++++- public/assets/javascripts/ui/Router.js | 19 +++++++ public/assets/javascripts/vendor/ModalFormView.js | 6 ++- public/assets/stylesheets/app.css | 34 +++++++++++- server/index.js | 1 + server/lib/api.js | 11 ++++ views/builder.ejs | 52 +++++++++--------- views/docs.ejs | 15 ++++-- views/editor.ejs | 64 ++++++++++++----------- views/home.ejs | 2 + views/modal.ejs | 2 + views/partials/confirm-modal.ejs | 22 ++++++++ views/partials/scripts.ejs | 2 + views/profile.ejs | 2 + 16 files changed, 231 insertions(+), 64 deletions(-) create mode 100644 public/assets/javascripts/ui/AlertModal.js create mode 100644 public/assets/javascripts/ui/ConfirmModal.js create mode 100644 views/partials/confirm-modal.ejs diff --git a/public/assets/javascripts/ui/AlertModal.js b/public/assets/javascripts/ui/AlertModal.js new file mode 100644 index 0000000..c5693ad --- /dev/null +++ b/public/assets/javascripts/ui/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/ConfirmModal.js b/public/assets/javascripts/ui/ConfirmModal.js new file mode 100644 index 0000000..868ce8e --- /dev/null +++ b/public/assets/javascripts/ui/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/DocumentModal.js b/public/assets/javascripts/ui/DocumentModal.js index d9901bd..6f16169 100644 --- a/public/assets/javascripts/ui/DocumentModal.js +++ b/public/assets/javascripts/ui/DocumentModal.js @@ -3,6 +3,7 @@ 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() @@ -32,9 +33,17 @@ var DocumentModal = ModalFormView.extend({ 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/Router.js b/public/assets/javascripts/ui/Router.js index a7aa566..85ed1aa 100644 --- a/public/assets/javascripts/ui/Router.js +++ b/public/assets/javascripts/ui/Router.js @@ -10,6 +10,7 @@ var Router = View.extend({ "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: { @@ -30,6 +31,8 @@ var Router = View.extend({ 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 @@ -115,5 +118,21 @@ var Router = View.extend({ 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/vendor/ModalFormView.js b/public/assets/javascripts/vendor/ModalFormView.js index f99317b..d084031 100644 --- a/public/assets/javascripts/vendor/ModalFormView.js +++ b/public/assets/javascripts/vendor/ModalFormView.js @@ -50,9 +50,11 @@ var ModalFormView = ModalView.extend({ } } else { - fd.append(this.name, $(this).val()); + fd.append(this.name, this.value); } }); + + return fd }, submit: function(e){ @@ -67,7 +69,7 @@ var ModalFormView = ModalView.extend({ return } } - + var request = $.ajax({ url: this.action, type: this.method, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 7335dc8..53a198a 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -325,6 +325,19 @@ h5{ margin: 0 auto; text-align: left; } +.docs .content img { + max-width: 90%; + margin: 0 auto; + display: block; +} + +.docs .options { + margin: 50px auto 0 auto; + padding: 10px; + border-top: 1px solid #bbb; + font-weight: 300; + width: 400px; +} .docs .content p { margin: 1em 0; @@ -712,9 +725,28 @@ content: "\e736"!important; -moz-transform:translateY(0%); transform:translateY(0%); } -.mediaDrawer.signin, .mediaDrawer.signup{ +.mediaDrawer.signin, .mediaDrawer.signup, +.mediaDrawer.alert, .mediaDrawer.confirm{ display:table; } +.confirm button { + float: auto; + width: 200px; + margin: 10px; +} +.confirm button.yes { + color: red; +} +.confirm button.yes:hover { + animation: flicker 0.1s infinite; + background: white; +} +@keyframes flicker { + 49% { background: white; color: red; } + 50% { background: red; color: white; } +} + + .image.active { background-image:url(https://s3.amazonaws.com/luckyplop/735c46b0268cd511a22c37bc0c11e9f60c4459b2.png)!important; cursor:move; diff --git a/server/index.js b/server/index.js index 6a377c9..84d9818 100644 --- a/server/index.js +++ b/server/index.js @@ -90,6 +90,7 @@ app.get('/staff/bless', middleware.ensureAuthenticated, views.staff.bless); app.get('/api/docs', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.show) app.post('/api/docs/new', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.create) 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) diff --git a/server/lib/api.js b/server/lib/api.js index 958c40d..b89b6ae 100644 --- a/server/lib/api.js +++ b/server/lib/api.js @@ -111,6 +111,17 @@ var api = { }) }) }, + + destroy: function(req, res){ + var name = util.sanitize(req.body.name) + if (! name || ! name.length) { + res.json({ error: 404 }) + return + } + Documentation.remove({ name: name }, function(err){ + res.json({ status: "OK" }) + }) + } } } diff --git a/views/builder.ejs b/views/builder.ejs index 50b2a5b..73cfa8d 100644 --- a/views/builder.ejs +++ b/views/builder.ejs @@ -6,37 +6,41 @@ -
+
-
- [[ include partials/header ]] - [[ include controls/builder/toolbar ]] +
+ [[ include partials/header ]] + [[ include controls/builder/toolbar ]] - - -
-
+ -
- -
+
+
+
+ +
+ +
+
+
-
+ [[ include partials/alert-modal ]] + [[ include partials/confirm-modal ]] + [[ include partials/sign-in ]] [[ include partials/scripts ]] diff --git a/views/docs.ejs b/views/docs.ejs index fee5545..e3f0823 100644 --- a/views/docs.ejs +++ b/views/docs.ejs @@ -12,15 +12,19 @@ [[ if (! isNew) { ]]

[[- doc.displayName ]]

- - [[ if (user.isStaff) { ]] - Edit this document - [[ include partials/edit-documentation ]] - [[ } ]]
[[- content ]]
+ + [[ if (user.isStaff) { ]] +
+ New Document | + Edit | + Delete + [[ include partials/edit-documentation ]] +
+ [[ } ]] [[ } else { ]] [[ if (doc.name !== "new") { ]] @@ -39,6 +43,7 @@ [[ } ]] + [[ include partials/confirm-modal ]] [[ include partials/sign-in ]] [[ include partials/footer ]] diff --git a/views/editor.ejs b/views/editor.ejs index a4887a8..ff27282 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -6,43 +6,47 @@ -
+
-
- [[ include partials/header ]] +
+ [[ include partials/header ]] - [[ include controls/editor/toolbar ]] - [[ include controls/editor/video-toolbar ]] - [[ include controls/editor/media-drawer ]] - [[ include controls/editor/wallpaper ]] - [[ include controls/editor/light-control ]] - [[ include controls/editor/settings ]] + [[ include controls/editor/toolbar ]] + [[ include controls/editor/video-toolbar ]] + [[ include controls/editor/media-drawer ]] + [[ include controls/editor/wallpaper ]] + [[ include controls/editor/light-control ]] + [[ include controls/editor/settings ]] - - -
-
+ + +
+
+
+ +
+ +
+
+
-
+ [[ include partials/alert-modal ]] + [[ include partials/confirm-modal ]] + [[ include partials/sign-in ]] [[ include partials/scripts ]] diff --git a/views/home.ejs b/views/home.ejs index 3ed56ef..899aa66 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -45,6 +45,8 @@ View More + [[ include partials/alert-modal ]] + [[ include partials/confirm-modal ]] [[ include partials/sign-in ]] [[ include partials/footer ]] diff --git a/views/modal.ejs b/views/modal.ejs index aa75f72..a2ea680 100644 --- a/views/modal.ejs +++ b/views/modal.ejs @@ -10,6 +10,8 @@
+ [[ include partials/alert-modal ]] + [[ include partials/confirm-modal ]] [[ include partials/sign-in ]] [[ include projects/new-project ]] [[ include projects/edit-project ]] diff --git a/views/partials/confirm-modal.ejs b/views/partials/confirm-modal.ejs new file mode 100644 index 0000000..845aed2 --- /dev/null +++ b/views/partials/confirm-modal.ejs @@ -0,0 +1,22 @@ +
+ X +
+
+ +
+ +
+
+
+ +
+ X +
+
+ +
+ + +
+
+
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 02b11a7..b31b3f7 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -53,5 +53,7 @@ + + diff --git a/views/profile.ejs b/views/profile.ejs index 8540785..f3309dd 100644 --- a/views/profile.ejs +++ b/views/profile.ejs @@ -46,6 +46,8 @@ [[ include partials/edit-profile ]] [[ include projects/new-project ]] [[ include projects/edit-project ]] + [[ include partials/sign-in ]] + [[ include partials/confirm-modal ]] [[ include partials/footer ]]
-- cgit v1.2.3-70-g09d2