summaryrefslogtreecommitdiff
path: root/public/assets/javascripts/ui/site/LayoutsModal.js
blob: d474aa7a506b2f2868b1a0585a50305af915768d (plain)
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
var LayoutsIndex = View.extend({

	initialize: function(){
		this.$templates = this.$(".templates")
	},

	load: function(type){
		this.$templates.children("span").remove()
		
		$.get(this.action, $.proxy(this.populate, this))
	},

	populate: function(data){
		data.forEach($.proxy(function(room){
			var $span = $("<span>")
			// $span.html(JSON.stringify(room))
			$span.data("slug", room.slug)
			$span.css("background-image", "url(" + room.photo + ")")
			
			this.$templates.append($span)
		}, this))
		this.show()
	}

})

var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({
	el: ".mediaDrawer.projects",

	action: "/api/project",

	events: {
		"click .templates span": 'toggleActive',
		"submit form": 'newProject',
	},
	
	populate: function(data){
		if (! data.length) {
			app.router.newProject()
		}
		else {
			this.__super__.populate.call(this, data)
		}
	},
	
	toggleActive: function(e){
		e.preventDefault()
		this.$(".templates .active").removeClass("active")
		var $layout = $(e.currentTarget)
		$layout.addClass("active")
		
		// actually do
		window.location.pathname = "/project/" + $layout.data("slug")
	},
	
	newProject: function(e){
		e && e.preventDefault()
		window.location.pathname = "/project/new"
	}

})


var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
	el: ".mediaDrawer.layouts",

	action: "/api/layout",

	events: {
		"click .templates span": 'toggleActive',
		"submit form": 'newLayout',
	},
	
	toggleActive: function(e){
		e.preventDefault()
		this.$(".templates .active").removeClass("active")
		var $layout = $(e.currentTarget)
		$layout.addClass("active")
		
		// actually do
		window.location.pathname = "/layout/" + $layout.data("slug")
	},
	
	newLayout: function(e){
		e && e.preventDefault()
		window.location.pathname = "/layout/new"
	}

})


var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
	el: ".mediaDrawer.newProject",

	action: "/api/layout",

	events: {
		"click .templates span": 'toggleActive',
		"submit form": 'choose',
	},
	
	toggleActive: function(e){
		e.preventDefault()
		this.$(".templates .active").removeClass("active")
		$(e.currentTarget).addClass("active")
	},
	
	choose: function(e){
		e && e.preventDefault()
		var layout = this.$(".templates .active").data("slug")
		if (! layout || ! layout.length) return
		window.location.pathname = "/project/new/" + layout
	}
	
})