resize/scale wallpaper

5 files changed, 76 insertions, 2 deletions

diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index f95d909..f60b149 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -54,6 +54,7 @@ var EditorView = View.extend({
 	
 	pickWall: function(wall, pos){
 		this.hideExtras()
+		this.wallpaperPicker.pickWall(wall)
 	},
 	
 	hideExtras: function(){
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 7f9b8f7..3694095 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -6,8 +6,11 @@ var WallpaperPicker = UploadView.extend({
 	uploadAction: "/api/media/upload",
 
 	events: {
+		"mousedown": 'stopPropagation',
 		"click .swatch": 'pick',
 		"click .wallpaperRemove": 'remove',
+    "input [data-role='wallpaper-scale']": 'updateScale',
+
   },
 	
 	initialize: function(){
@@ -15,6 +18,11 @@ var WallpaperPicker = UploadView.extend({
 	  this.$swatches = this.$(".swatches")
 	  this.$remove = this.$(".wallpaperRemove")
 	  this.$remove.hide()
+
+	  this.$position = this.$("[data-role='wallpaper-position']")
+	  this.$scale = this.$("[data-role='wallpaper-scale']")
+	  
+	  this.initializePositionCursor()
 	},
 	
   loaded: false,
@@ -122,5 +130,52 @@ var WallpaperPicker = UploadView.extend({
 			_followCursor(e);
 		})
 	},
-
+	
+	wall: null,
+	pickWall: function(wall){
+    if (wall.background.src == "none") {
+      return;
+    }
+    console.log(wall)
+    this.wall = wall
+  },
+  
+  updateScale: function(){
+    if (! this.wall) return;
+    s = parseFloat(this.$scale.val())
+    this.wall.wallpaperPosition({ scale: s })
+  },
+	
+	initializePositionCursor: function(){
+	  var base = this
+	  var dx = 0, dy = 0, dragging = false
+	  var x = 0, y = 0, s = 1
+    var mymouse = new mouse({
+      el: this.$position[0],
+      down: function(e, cursor){
+        if (! base.wall) return
+        s = parseFloat( base.$scale.val() )
+        x = base.wall.background.x
+        y = base.wall.background.y
+        dragging = true
+      },
+      drag: function(e, cursor){
+        if (! dragging) return
+        delta = cursor.delta()
+        delta.a = - delta.a
+        dx = delta.a*s
+        dy = delta.b*s
+        base.wall.wallpaperPosition({
+          scale: s,
+          x: x+dx,
+          y: y+dy,
+        })
+      },
+      up: function(e, cursor, new_cursor){
+        delta.zero()
+        dragging = false
+      },
+    })
+	},
+	
 })
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index f770637..6e23962 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1487,6 +1487,18 @@ input[type="range"]::-webkit-slider-thumb {
 	border:3px solid #000;
 }
 
+.wallpaperResizeControls input[type=range] {
+  width: 130px;
+  position: relative;
+  top: -10px;
+}
+.wallpaperResizeControls {
+  font-size: 30px;
+}
+.wallpaperResizeControls span {
+  cursor: pointer;
+}
+
 #color-picker {
   position: relative;
 }
diff --git a/public/assets/test/bg.html b/public/assets/test/bg.html
index cd7eaa8..fecf811 100644
--- a/public/assets/test/bg.html
+++ b/public/assets/test/bg.html
@@ -88,7 +88,7 @@ var x0 = 0, y0 = 0
 var mymouse = new mouse({
   el: cursor,
   down: function(e, cursor){
-  console.log(cursor.x.a, cursor.y.a)
+    console.log(cursor.x.a, cursor.y.a)
 		dragging = true
   },
   drag: function(e, cursor){
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index 97a9232..719c8ff 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -25,6 +25,12 @@
     <span class="ion-arrow-resize"></span>
     <label>Resize Wallpaper</label>
   </div>
+
+  <div class="wallpaperResizeControls">
+    <span data-role="wallpaper-position" class="ion-arrow-expand"></span>
+    <input data-role="wallpaper-scale" type="range" min="0.01" max="8.0" step="0.1" value="1.0">
+  </div>
+
 </div>
 
 <div class="floatingSwatch"></div>