summaryrefslogtreecommitdiff
path: root/public/assets/javascripts/ui/site/LayoutsModal.js
blob: 0222077f717886679be84177b00687d6b1791084 (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
var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
	el: ".mediaDrawer.layouts",

	action: "/api/layout",

	events: {
		"click [data-role='create-new-layout']": 'createNewLayout',
		"click [data-role='create-new-blueprint']": 'createNewBlueprint',
		"click .templates span": 'pick',
	},
	
	pick: function(e){
		e.preventDefault()
 		var layout = $(e.currentTarget).data("slug")
 		var isBlueprint = $(e.currentTarget).data("blueprint")

		if (! layout || ! layout.length) return
		
		if (isBlueprint) {
      window.location.pathname = "/blueprint/" + layout
		}
		else {
      window.location.pathname = "/layout/" + layout
		}
  },

	createNewLayout: function(e){
	  e.preventDefault()
	  window.location.pathname = "/layout/new"
	},

	createNewBlueprint: function(e){
	  e.preventDefault()
	  window.location.pathname = "/blueprint/new"
	},

	populate: function(data){
/*
	  if (data.user.plan_level < 1 && data.projectCount == 1) {
	    // show lockout message
	  }
*/
		if (! data.layouts.length) {
			this.$templates.hide()
			this.$form.hide()
			this.$noTemplates.show()
		}
		this.$templatesList.empty()
		data.layouts.forEach(function(room){
			var $span = $("<span>")
			$span.data("slug", room.slug)
			
			var $label = $("<label>")
			$label.html( room.name )
			
			var $image = $("<span>")
			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
			
      $span.append( $image )
      $span.append( $label )
			
			this.$templatesList.append($span)
		}.bind(this))

		data.user_layouts.forEach(function(room){
			var $span = $("<span>")
			$span.data("slug", room.slug)
			
			var $label = $("<label>")
			$label.html( room.name )
			
			var $image = $("<span>")
			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
			
      $span.append( $image )
      $span.append( $label )
			
			this.$templatesList.append($span)
		}.bind(this))
		
		data.blueprints.forEach(function(blueprint){
			var $span = $("<span>")
			$span.data("slug", blueprint.slug)
			$span.data("blueprint", true)
			
			var $label = $("<label>")
			$label.html( blueprint.name )
			
			var $image = $("<span>")
			$image.addClass("image").css("background-image", "url(" + blueprint.url + ")")
			
      $span.append( $image )
      $span.append( $label )
			
			this.$templatesList.append($span)
		}.bind(this))
		
		this.show()
	},

	newLayout: function(e){
		e && e.preventDefault()
		window.location.pathname = "/layout/new"
	}

})