bring in lightcontrol & wallpaper picker

11 files changed, 93 insertions, 54 deletions

diff --git a/public/assets/javascripts/ui/SiteRouter.js b/public/assets/javascripts/ui/SiteRouter.js
index 664cbb2..3bd783b 100644
--- a/public/assets/javascripts/ui/SiteRouter.js
+++ b/public/assets/javascripts/ui/SiteRouter.js
@@ -11,7 +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']": 'pickLayout',
+		"click [data-role='show-layouts-modal']": 'layoutPicker',
 	},
 	
 	routes: {
@@ -22,13 +22,13 @@ var SiteRouter = Router.extend({
 		"/about/:name/edit":    'editDocument',
 		"/about/new":           'newDocument',
 
-		"/layout":              'pickLayout',
-		"/layout/:name":        'layouts',
+		"/layout":              'layoutPicker',
+		"/layout/:name":        'layoutEditor',
 
-		"/project":             'pickProject',
+		"/project":             'projectPicker',
 		"/project/new":         'newProject',
-		"/project/new/:layout": 'newProjectWithLayout',
-		"/project/:name":       'editor',
+		"/project/new/:layout": 'projectNewWithLayout',
+		"/project/:name":       'projectEditor',
 	},
 
 	initialize: function(){
@@ -47,7 +47,7 @@ var SiteRouter = Router.extend({
 	},
 
 
-	builder: function(e, name){
+	layoutEditor: function(e, name){
 		app.mode.builder = true
 		app.launch()
 
@@ -55,14 +55,14 @@ var SiteRouter = Router.extend({
 		this.builderView.load(name)
 	},
 	
-	pickLayout: function(e){
+	layoutPicker: function(e){
 		e && e.preventDefault()
 		window.history.pushState(null, document.title, "/layout")
 		this.layoutsModal.load()
 	},
 
 
-	pickProject: function(e){
+	projectPicker: function(e){
 		e && e.preventDefault()
 		window.history.pushState(null, document.title, "/project")
 		this.projectsModal.load()
@@ -74,7 +74,7 @@ var SiteRouter = Router.extend({
 		this.newProjectModal.load()
 	},
 
-	newProjectWithLayout: function(e, layout){
+	projectNewWithLayout: function(e, layout){
 		e && e.preventDefault()
 
 		app.mode.editor = true
@@ -87,7 +87,7 @@ var SiteRouter = Router.extend({
 		this.editorView.loadLayout(layout)
 	},
 
-	editor: function(e, layout){
+	projectEditor: function(e, layout){
 		app.mode.editor = true
 		app.launch()
 
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index df7a974..6be068b 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -37,9 +37,11 @@ var EditorToolbar = View.extend({
 	},
 	
 	toggleWallpaper: function(){
+		this.parent.wallpaperPicker.toggle()
 	},
 	
 	toggleLightControl: function(){
+		this.parent.lightControl.toggle()
 	},
 	
 	editWallText: function(){
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 1093c76..8422619 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -13,6 +13,8 @@ var EditorView = View.extend({
 		this.settings = new EditorSettings ({ parent: this })
 		this.mediaViewer = new MediaViewer ({ parent: this })
 		this.mediaUpload = new MediaUpload ({ parent: this })
+		this.wallpaperPicker = new WallpaperPicker ({ parent: this })
+		this.lightControl = new LightControl ({ parent: this })
 	},
 
 	load: function(name){
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
new file mode 100644
index 0000000..1385820
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -0,0 +1,15 @@
+
+var LightControl = View.extend({
+	el: ".lightcontrol",
+	
+	events: {
+	},
+
+	toggle: function(){
+    this.$el.toggleClass("active");
+
+    // toggle the class that makes the cursor a paintbucket
+    // $("body").removeClass("pastePaper");
+	},
+
+})
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 96d7cf7..3911d3b 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -4,6 +4,25 @@ var MediaViewer = ModalView.extend({
 	createAction: "/api/docs/new",
 	updateAction: "/api/docs/edit",
 	destroyAction: "/api/docs/destroy",
+	
+	events: {
+		'click .foundToggle': "foundToggle",
+		'click .yourMedia': "userToggle",
+	},
+
+	foundToggle: function(){
+    $(".foundMedia").addClass("active");
+    $(".myMedia").addClass("inactive");
+    $('a').removeClass("active");
+    $('.foundToggle').addClass("active");
+	},
+	
+	userToggle: function(){
+    this.$(".foundMedia").removeClass("active");
+    this.$(".myMedia").removeClass("inactive");
+    this.$('a').removeClass("active");
+    this.$('.yourMedia').addClass("active");
+	},
 
 	show: function(){
 		if (! this.loaded) {
@@ -13,14 +32,19 @@ var MediaViewer = ModalView.extend({
 			this.__super__.show.call(this)
 		}
 	},
+	
+	hide: function(){
+		this.__super__.hide.call(this)
+		this.parent.mediaUpload.hide()
+	},
 
 	load: function(){
 		$.get("/api/media/user", $.proxy(this.populate, this))
 	},
 
 	populate: function(data){
+		this.loaded = true
 		data.forEach($.proxy(this.add, this))
-
 		this.__super__.show.call(this)
 	},
 	
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
new file mode 100644
index 0000000..59dc7dd
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -0,0 +1,14 @@
+
+var WallpaperPicker = View.extend({
+	el: ".wallpaper",
+	
+	events: {
+	},
+
+	toggle: function(){
+    this.$el.toggleClass("active");
+    // toggle the class that makes the cursor a paintbucket
+    // $("body").removeClass("pastePaper");
+	},
+
+})
diff --git a/public/assets/javascripts/ui/z_misc.js b/public/assets/javascripts/ui/z_misc.js
index 64b8a5b..f2620b7 100644
--- a/public/assets/javascripts/ui/z_misc.js
+++ b/public/assets/javascripts/ui/z_misc.js
@@ -54,17 +54,11 @@ function bind () {
   	_followCursor(e);
   });
 
-  $(".icon-arrow-resize").clickToToggle(function(isActive){
-    $(".image").toggleClass("active", isActive);
-  });
   $(".icon-map").click(function(){
     $("#minimap").toggleClass("hide");
     $(this).toggleClass('hidden');
   });
-  $(".icon-ios7-keypad-outline").clickToToggle(function(isActive){
-    $(".wallpaper").toggleClass("active", isActive);
-    $("body").removeClass("pastePaper");
-  });
+
   $(".paper1").click(function(){
     $("body").toggleClass("pastePaper");
     $(this).toggleClass("active");
@@ -86,21 +80,6 @@ function bind () {
     $(".image").toggleClass("editText", isActive);
   });
   
-
-  
-  $(".foundToggle").click(function(){
-    $(".foundMedia").addClass("active");
-    $(".myMedia").addClass("inactive");
-    $('a').removeClass("active");
-    $(this).addClass("active");
-  });
-  
-  $(".yourMedia").click(function(){
-    $(".foundMedia").removeClass("active");
-    $(".myMedia").removeClass("inactive");
-    $('a').removeClass("active");
-    $(this).addClass("active");
-  });
   
   $("#deleteMedia").click(function(){
     $("body").toggleClass("deleteArmed");
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs
index 782c400..ddd282b 100644
--- a/views/controls/editor/light-control.ejs
+++ b/views/controls/editor/light-control.ejs
@@ -1,10 +1,10 @@
 <div class="vvbox lightcontrol">
 	<div class="slider">
-		<input type="range" min="0" max="100" value="0" id="shadow-control" />
+		<input type="range" min="0" max="100" value="0" id="outline-hue" />
 		<h4>Outline Hue</h4>
 	</div>
 	<div class="slider">
-		<input type="range" min="0" max="100" value="100" id="brightness-control" />
+		<input type="range" min="0" max="100" value="100" id="wall-hue" />
 		<h4>Wall Hue</h4>
 	</div>
 	<div class="slider">
@@ -15,4 +15,4 @@
 		<input type="range" min="0" max="100" value="0" id="shadow-control" />
 		<h4>Shadow</h4>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index 9667178..c3d7bd4 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -15,6 +15,7 @@
 </div>
 
 <div class="mediaDrawer fixed animate mediaViewer">
+	<span class="close">X</span>
 	<h2><a href="#" class="yourMedia active">Your Media</a> – <a href="#" class="foundToggle">Found Media</a></h2><br>
 	<h3 class="editBtn" id="deleteMedia">delete media</h3>
 	<div class="myMedia">
diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs
index e21672c..27d24fc 100644
--- a/views/controls/editor/settings.ejs
+++ b/views/controls/editor/settings.ejs
@@ -1,4 +1,4 @@
-<div class="vvbox settings">
+<div class="vvbox settings" id="editorSettings">
 	<input type="hidden" name="_csrf" value="[[- token ]]">
 	<input type="hidden" name="_id" value="new">
 
@@ -10,7 +10,7 @@
 	</div>
 
 	<div class="setting">
-		<input type="text" placeholder="room name" />
+		<input type="text" name="name" placeholder="room name" />
 	</div>
 	
 	<div class="setting">
@@ -20,23 +20,23 @@
 		<input type="text" placeholder="http://vvalls.com/t987" />
 	</div>
 	<div class="setting">
-	<div class="radio-group">
-		<input id="opt_1" class="radio-group__option" type="radio" name="opt" checked="checked">
-		<label class="radio-group__label" for="opt_1">
-			Everyone
-		</label>
-		<input id="opt_2" class="radio-group__option" type="radio" name="opt">
-		<label class="radio-group__label" for="opt_2">
-			Just for me
-		</label>
-	</div>
+		<div class="radio-group">
+			<input id="privacy_private" class="radio-group__option" type="radio" name="privacy" value="public" checked>
+			<label class="radio-group__label" for="privacy_private">
+				Everyone
+			</label>
+			<input id="privacy_public" class="radio-group__option" type="radio" name="privacy" value="private">
+			<label class="radio-group__label" for="privacy_public">
+				Just for me
+			</label>
+		</div>
 	</div>
 	<div class="setting">
-		<button>Save</button>
+		<button data-role="save-project">Save</button>
 	</div>
 	<div class="setting subButtons">
-		<a href="#">Clone</a>
-		<a href="#">Clear</a>
-		<a href="#" id="deleteRoom">Delete</a>
+		<a href="#" data-role="clear-project">Clear</a>
+		<a href="#" data-role="clone-project">Clone</a>
+		<a href="#" data-role="destroy-project">Delete</a>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 981acef..5cd158c 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -65,8 +65,10 @@
 
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorToolbar.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/LightControl.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaUpload.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaViewer.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/WallpaperPicker.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/SiteRouter.js"></script>