confirm modal, alert modal

16 files changed, 230 insertions, 63 deletions

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 @@
 </head>
 <body class="editing loading">
 
-<div id="scene"></div>
+	<div id="scene"></div>
 
-<div class="rapper">
-	[[ include partials/header ]]
-	[[ include controls/builder/toolbar ]]
+	<div class="rapper">
+		[[ include partials/header ]]
+		[[ include controls/builder/toolbar ]]
 
-<!--
-	<div id="minimap" class="vvbox">
-		<span class="el"></span>
-	</div>
--->
-
-	<div id="hud">
-		<div id="map" style="display: block">
+	<!--
+		<div id="minimap" class="vvbox">
+			<span class="el"></span>
 		</div>
+	-->
 
-		<div id="info">
-			<select id="palette">
-				<option>colors</option>
-				<option>redblue</option>
-				<option>gray</option>
-				<option selected>bone</option>
-				<option>alpha</option>
-				<option>white</option>
-				<option>black</option>
-			</select>
-			<div id="intersects"></div>
+		<div id="hud">
+			<div id="map" style="display: block">
+			</div>
+
+			<div id="info">
+				<select id="palette">
+					<option>colors</option>
+					<option>redblue</option>
+					<option>gray</option>
+					<option selected>bone</option>
+					<option>alpha</option>
+					<option>white</option>
+					<option>black</option>
+				</select>
+				<div id="intersects"></div>
+			</div>
 		</div>
+
 	</div>
 
-</div>
+	[[ include partials/alert-modal ]]	
+	[[ include partials/confirm-modal ]]	
+	[[ include partials/sign-in ]]	
 
 </body>
 [[ 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) { ]]
 		<h1>[[- doc.displayName ]]</h1>
-		
-		[[ if (user.isStaff) { ]]
-			<a href="#" data-role="edit-document-modal" data-name="[[- doc.name ]]">Edit this document</a>
-			[[ include partials/edit-documentation ]]
-		[[ } ]]
 
 		<div class="content">
 		[[- content ]]
 		</div>
+		
+		[[ if (user.isStaff) { ]]
+		<div class="options">
+			<a href="#" data-role="new-document-modal">New Document</a> |
+			<a href="#" data-role="edit-document-modal" data-name="[[- doc.name ]]">Edit</a> |
+			<a href="#" data-role="delete-document-modal" data-name="[[- doc.name ]]">Delete</a>
+			[[ include partials/edit-documentation ]]
+		</div>
+		[[ } ]]
 	
 	[[ } 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 @@
 </head>
 <body class="editing loading">
 
-<div id="scene"></div>
+	<div id="scene"></div>
 
-<div class="rapper">
-	[[ include partials/header ]]
+	<div class="rapper">
+		[[ 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 ]]
 
-<!-- 
-	<div id="minimap" class="vvbox">
-		<span class="el"></span>
-	</div>
- -->
-
-	<div id="hud">
-		<div id="map" style="display: block">
+	<!-- 
+		<div id="minimap" class="vvbox">
+			<span class="el"></span>
 		</div>
+	 -->
 
-		<div id="info">
-			<select id="palette">
-				<option>colors</option>
-				<option>redblue</option>
-				<option>gray</option>
-				<option selected>bone</option>
-				<option>alpha</option>
-				<option>white</option>
-				<option>black</option>
-			</select>
-			<div id="intersects"></div>
+		<div id="hud">
+			<div id="map" style="display: block">
+			</div>
+
+			<div id="info">
+				<select id="palette">
+					<option>colors</option>
+					<option>redblue</option>
+					<option>gray</option>
+					<option selected>bone</option>
+					<option>alpha</option>
+					<option>white</option>
+					<option>black</option>
+				</select>
+				<div id="intersects"></div>
+			</div>
 		</div>
+
 	</div>
 
-</div>
+	[[ include partials/alert-modal ]]	
+	[[ include partials/confirm-modal ]]	
+	[[ include partials/sign-in ]]	
 
 </body>
 [[ 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 @@
 	
 	<a href="#loadmore" class="viewMore">View More</a>
 
+	[[ 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 @@
 
 	<div style="height: 70%; clear: both;"></div>
 
+	[[ 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 @@
+<div class="mediaDrawer fixed animate alert">
+	<span class="close">X</span>
+	<div class="box">
+		<form>
+			<span class="message"></span>
+			<br>
+			<button class="ok">OK</button>
+		</form>
+	</div>
+</div>
+
+<div class="mediaDrawer fixed animate confirm">
+	<span class="close">X</span>
+	<div class="box">
+		<form>
+			<span class="question"></span>
+			<br>
+			<button class="yes">OK</button>
+			<button class="no">Cancel</button>
+		</form>
+	</div>
+</div>
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 @@
 <script type="text/javascript" src="/assets/javascripts/ui/EditProjectModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/EditProfileModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/DocumentModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/AlertModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/ConfirmModal.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/app.js"></script>
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 ]]
 
 </div>