1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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])
},
})
|
