merge

1 files changed, 79 insertions, 0 deletions

diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js
new file mode 100644
index 0000000..4c8ff0c
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/HelpCursor.js
@@ -0,0 +1,79 @@
+
+var HelpCursor = View.extend({
+	el: "#helpCursor",
+	
+	active: false,
+	
+	messages: {
+	  start: "Welcome to VValls!  Click one of the tools at right to learn about it.",
+	  media: "This is where you pick media to go on the walls.  You can upload media and paste links.",
+	  addmedia: "Great, now click a wall to place this image.",
+	  resize: "Drag the image to position it, or use the dots to resize.",
+	  presets: "These are some basic presets to get you started. Click em! :-)",
+	  wallpaper: "Click the wallpaper you want then apply it to the walls. Feel free to upload your own too!",
+	  colors: "Use these colors to change the color of the walls, floor, and ceiling.",
+	  settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.",
+	  builder: "This is a map of your rooms.  Draw new boxes, or move and resize the ones that are there.  Hit ESCAPE to toggle the map.",
+	},
+
+  initialize: function(){
+		this.helpButton = $('#help-button')
+		
+		this.helpButton.click(this.toggle.bind(this))
+    this.$el.html(this.messages['start'])
+  },
+  
+  toggle: function(){
+    this.active ? this.stop() : this.start()
+  },
+  
+  start: function(){
+    if (this.active) return
+    this.active = true
+    this.helpButton.addClass('active')
+    this.$el.show()
+    this.move({ pageX: -1000, pageY: -10000 })
+    this.moveFn = this.move.bind(this)
+    document.addEventListener("mousemove", this.moveFn)
+  },
+  
+  stop: function(){
+    this.active = false
+    this.$el.hide()
+    this.helpButton.removeClass('active')
+    document.removeEventListener("mousemove", this.moveFn)
+  },
+  
+  offset: 100,
+  lastPosition: { pageX: 0, pageY: 0 },
+  move: function(e){
+    this.el.style.right = clamp(window.innerWidth - e.pageX, this.offset, window.innerWidth) + "px"
+    this.el.style.top = e.pageY + "px"
+    this.lastPosition = e
+  },
+
+  show: function(name){
+    if (this.active) {
+      this.$el.show()
+    }
+  },
+  hide: function(){
+    this.$el.hide()
+  },
+
+  message: function(name){
+    if (! this.active) return
+    if (name == "start" || name == "media" || name == "settings") {
+      this.offset = 100
+    }
+    else if (name == "colors") {
+      this.offset = 270
+    }
+    else {
+      this.offset = 290
+    }
+    this.move(this.lastPosition)
+    this.$el.html(this.messages[name])
+  },
+
+})