root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / okeanos-ember / components.js @ cc5d0e0e
History | View | Annotate | Download (5.1 kB)
1 |
/* Components */
|
---|---|
2 |
|
3 |
Synnefo.Btn1Component = Ember.Component.extend({ |
4 |
tagName: 'a', |
5 |
click: function() { |
6 |
this.sendAction("action", this.get('param')); |
7 |
}, |
8 |
content: undefined // will be set if we want to print a message inside the span |
9 |
}); |
10 |
|
11 |
Synnefo.BtnsSpanComponent = Ember.Component.extend({ |
12 |
tagName: 'a', |
13 |
templateName: 'components/btns-span', |
14 |
click: function() { |
15 |
this.sendAction("action"); |
16 |
} |
17 |
}); |
18 |
|
19 |
|
20 |
|
21 |
/* Add New Item */
|
22 |
|
23 |
Synnefo.AddNewComponent = Ember.Component.extend({ |
24 |
templateName: 'snfElem', |
25 |
addNewBtn: true, |
26 |
selectable: false, |
27 |
icon: function() { |
28 |
baseIcon = Synnefo.conf.sectors.findBy('destination', this.get('type')).icon; |
29 |
return baseIcon.replace('outline', 'create-full'); |
30 |
}.property(), |
31 |
tagName: 'li', |
32 |
status: 'add-new', |
33 |
classNameBindings: ['status'], |
34 |
attributeBindings: ['data-status, data-reveal-id'], |
35 |
'data-reveal-id': function(){ |
36 |
if(addNewBtn)
|
37 |
return /*this.get('type').substring(0, type.length - 1)+*/'-wizard'; |
38 |
else
|
39 |
return undefined; |
40 |
}.property(), |
41 |
'data-status': function() { |
42 |
return this.status; |
43 |
}.property(), |
44 |
name: function() { |
45 |
var msg = 'Create New '; |
46 |
var btnType = this.get('type') |
47 |
switch(btnType){
|
48 |
case 'vms': |
49 |
return msg + 'Machine'; |
50 |
case 'networks': |
51 |
return msg + 'Network'; |
52 |
case 'volumes': |
53 |
return msg + 'Volume'; |
54 |
case 'snapshots': |
55 |
return msg + 'Snapshot'; |
56 |
case 'images': |
57 |
return '+ Upload New Image'; |
58 |
} |
59 |
}.property(), |
60 |
click: function () { |
61 |
this.sendAction('action'); |
62 |
} |
63 |
}); |
64 |
|
65 |
|
66 |
/* Login Menu */
|
67 |
|
68 |
Synnefo.LoginMenuComponent = Ember.Component.extend({ |
69 |
classNames: ['login'], |
70 |
didInsertElement: function() { |
71 |
var self = this.$(); |
72 |
self.mouseenter(function(e){
|
73 |
self.find('ul').stop(true, true).slideDown(200); |
74 |
}); |
75 |
self.mouseleave(function(e){
|
76 |
self.find('ul').stop(true, true).slideUp(200); |
77 |
}); |
78 |
|
79 |
} |
80 |
}); |
81 |
|
82 |
|
83 |
/* Checkboxes and Radiobuttons */
|
84 |
|
85 |
Synnefo.SnfCheckboxComponent = Ember.Component.extend({ |
86 |
tagName: 'a', |
87 |
classNames: ['check'], |
88 |
templateName: 'components/select-btn', |
89 |
initState: function() { |
90 |
return this.get('initState'); |
91 |
}.property(), |
92 |
didInsertElement: function() { |
93 |
var el = this.$(); |
94 |
var self =this; |
95 |
this.setInitClasses();
|
96 |
el.click(function(e) {
|
97 |
e.preventDefault(); |
98 |
e.stopPropagation(); |
99 |
self.changeState(el); |
100 |
// ui.entitiesActionsEnabled();
|
101 |
}); |
102 |
}, |
103 |
setInitClasses: function() { |
104 |
var self =this.$(); |
105 |
switch(this.initState){ |
106 |
case 'unchecked': { |
107 |
this.uncheck(self);
|
108 |
break;
|
109 |
} |
110 |
case 'prechecked': { |
111 |
self.find('span').addClass('prechecked') |
112 |
this.check(self);
|
113 |
break;
|
114 |
} |
115 |
} |
116 |
}, |
117 |
// used to be in ui.checkbox
|
118 |
changeState : function(checkbox_link) { |
119 |
$(checkbox_link).find('.snf-checkbox-unchecked, .snf-checkbox-checked').toggleClass('snf-checkbox-unchecked snf-checkbox-checked'); |
120 |
$(checkbox_link).closest('li').toggleClass('selected'); |
121 |
}, |
122 |
check : function(checkbox_link) { |
123 |
$(checkbox_link).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked'); |
124 |
$(checkbox_link).closest('li').addClass('selected'); |
125 |
}, |
126 |
uncheck : function(checkbox_link) { |
127 |
$(checkbox_link).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked'); |
128 |
$(checkbox_link).closest('li').removeClass('selected'); |
129 |
}, |
130 |
|
131 |
reset: function(area) { |
132 |
$(area).find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
133 |
$(area).find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
134 |
}, |
135 |
}); |
136 |
|
137 |
|
138 |
/* Wizard Buttons */
|
139 |
|
140 |
Synnefo.Close1Component = Synnefo.BtnsSpanComponent.extend({ |
141 |
classNames: ['close'], |
142 |
spanClass: 'snf-close' // has to be modified to array of strings |
143 |
}); |
144 |
|
145 |
// there's another close icon to confirm/info modals
|
146 |
|
147 |
|
148 |
/*
|
149 |
|
150 |
Back and Next buttons are constructed as views and not as components
|
151 |
|
152 |
{{cancel-1 action="moveBack" step=currentStep minStep=1}}
|
153 |
{{next-1 action="moveNext" step=currentStep maxStep=totalStep}}
|
154 |
|
155 |
Synnefo.Cancel1Component = Synnefo.BtnsSpanComponent.extend({
|
156 |
// classNameBindings: ['el3'], the element that should be focused when the user goes to the next step
|
157 |
content: 'CANCEL',
|
158 |
click: function(){
|
159 |
var currentStep =this.get('step');
|
160 |
var minStep =this.get('minStep');
|
161 |
console.log('minStep ', minStep);
|
162 |
this.sendAction();
|
163 |
if(currentStep === minStep)
|
164 |
this.set('content', 'CANCEL');
|
165 |
else
|
166 |
this.set('content', 'PREVIOUS');
|
167 |
|
168 |
}
|
169 |
|
170 |
// there's another close to modals
|
171 |
|
172 |
Synnefo.Cancel1Component = Synnefo.BtnsSpanComponent.extend({
|
173 |
classNames: ['nav', 'prev'],
|
174 |
// classNameBindings: ['el3'], the element that should be focused when the user goes to the next step
|
175 |
content: 'CANCEL'
|
176 |
});
|
177 |
|
178 |
Synnefo.Next1Component = Synnefo.BtnsSpanComponent.extend({
|
179 |
classNames: ['nav', 'next'],
|
180 |
// classNameBindings: ['el3'], the element that should be focused when the user goes to the next step
|
181 |
content: 'NEXT',
|
182 |
click: function() {
|
183 |
var currentStep =this.get('step');
|
184 |
var maxStep =this.get('maxStep');
|
185 |
this.sendAction('action');
|
186 |
if(currentStep === maxStep)
|
187 |
this.set('content', 'CREATE');
|
188 |
else
|
189 |
this.set('content', 'NEXT');
|
190 |
}
|
191 |
}); */
|