Skip to content

Commit 4f381aa

Browse files
samuil4samuil4
committed
Merge pull request CodiCamp#2 from An2kataluna/master
15.11.2015
2 parents d276f56 + 36a96d3 commit 4f381aa

File tree

4 files changed

+76
-51
lines changed

4 files changed

+76
-51
lines changed

‎EXERCISE/Exercise 4/app/controllers/controller.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ var app = app || {};
5959
notify: function (eventName,params) {
6060

6161
Events.publish(elements.el, eventName,params);
62+
},
63+
64+
remove: function (eventName, handler) {
65+
66+
Events.unsubscribe(elements.el, eventName, handler);
6267
}
6368
};
6469

‎EXERCISE/Exercise 4/app/views/footer-view.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@ var app = app || {};
2323

2424
this.iconList = this.el.firstChild;
2525

26-
// this.iconToHighlight = this.iconList.querySelector(this.selectors.windowIcon);
27-
this.elements.iconToHighlight =this.selectors.windowIcon;
2826

2927
this.events.on.call(this);
3028

@@ -37,7 +35,6 @@ var app = app || {};
3735
on: function () {
3836

3937
Events.subscribe(this.elements.createNewWindow, 'click', this.createNewWindow.bind(this));
40-
// Events.subscribe(this.elements.iconToHighlight, 'click', this.iconHighlight.bind(this));
4138
app.events.listen('app:window:destroy', this.destroyWindow.bind(this));
4239
app.events.listen('app:window:created', this.createNewIcon.bind(this));
4340

@@ -54,6 +51,7 @@ var app = app || {};
5451
*/
5552
app.FooterView.createNewWindow = function () {
5653
// app.FooterView.el.firstChild.innerHTML += app.templates.footerTemplate;
54+
5755
app.events.notify('app:window:create');
5856

5957
};
@@ -80,6 +78,9 @@ var app = app || {};
8078
// wrapper.firstChild.style.color = GetRandomColor();
8179
wrapper.firstChild.style.color = iconcolor;
8280
this.iconList.appendChild(wrapper);
81+
82+
83+
Events.subscribe(wrapper, 'click', this.iconHighlight);
8384
};
8485

8586
app.FooterView.destroyWindow = function (evnt) {
@@ -88,15 +89,17 @@ var app = app || {};
8889
* Need to add code to remove icon
8990
*/
9091
var iconToRemove = this.iconList.querySelector('#'+evnt.detail.id);
91-
92+
Events.unsubscribe(iconToRemove,'click',this.iconHighlight);
9293
iconToRemove.parentNode.removeChild(iconToRemove);
9394

95+
96+
9497
};
9598

9699
app.FooterView.iconHighlight = function () {
97-
this.iconToHighlight.classList.add('iconhighlight');
100+
this.classList.add('iconhighlight');
98101

99-
app.events.notify('app:footericon:highlighted',{ id: this.iconList.id });
102+
app.events.notify('app:footericon:highlighted:' + this.id);
100103
};
101104

102105

‎EXERCISE/Exercise 4/app/views/window-view.js

Lines changed: 61 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,102 +11,119 @@ var app = app || {};
1111

1212
global.WindowView = {
1313

14+
internelMethods: ['destroy', 'minimize', 'maximize', 'highlight'],
15+
1416
/***
1517
* Generic initialization method
1618
*/
1719
init: function (options) {
18-
this.template = options.template || app.templates.windowTemplate;
19-
this.id = options.id;
20-
this.type = options.type || 'normalized'; //minimized or maximized
20+
this.template = options.template || app.templates.windowTemplate;
21+
this.id = options.id;
22+
this.type = options.type || 'normalized'; //minimized or maximized
23+
24+
this.bindInternalMethods();
2125

2226
this.render();
2327

2428
app.events.notify('app:window:created',{id: this.id});
25-
2629
// app.events.listen('window:' + this.id + ':render', this.render.bind(this));
2730
},
2831

32+
bindInternalMethods: function () {
33+
var view = this;
34+
35+
this.internelMethods.forEach(function(methodName){
36+
view[methodName] = view[methodName].bind(view);
37+
});
38+
},
39+
2940
/***
3041
* Window render
3142
*/
3243
render: function () {
33-
this.wrapper=document.createElement('section');
34-
this.wrapper.className='window';
35-
this.wrapper.innerHTML=this.template.join('');
36-
app.ContentView.el.appendChild(this.wrapper);
44+
this.wrapper=document.createElement('section');
45+
this.wrapper.className='window';
46+
this.wrapper.innerHTML=this.template.join('');
47+
app.ContentView.el.appendChild(this.wrapper);
3748

38-
this.closeIcon = this.wrapper.querySelector(this.selectors.closeIcon);
39-
this.minimizeIcon = this.wrapper.querySelector(this.selectors.minimizeIcon);
40-
this.maximizeIcon = this.wrapper.querySelector(this.selectors.maximizeIcon);
49+
this.closeIcon = this.wrapper.querySelector(this.selectors.closeIcon);
50+
this.minimizeIcon = this.wrapper.querySelector(this.selectors.minimizeIcon);
51+
this.maximizeIcon = this.wrapper.querySelector(this.selectors.maximizeIcon);
4152

4253

43-
this.events.on.call(this);
54+
this.events.on.call(this);
4455
},
4556

4657
/***
4758
* Window destroy
4859
*/
4960
destroy: function () {
61+
this.events.off.call(this);
5062
this.wrapper.parentNode.removeChild(this.wrapper);
5163
console.log('destroy', this.template);
5264

5365
app.events.notify('app:window:destroy',{id: this.id});
5466
},
5567

5668
minimize: function(){
57-
// this.wrapper.remove('fadeInUp');
58-
// this.wrapper.remove('animated');
69+
this.resetView();
5970

60-
this.wrapper.classList.add('fadeOutDown');
61-
this.wrapper.classList.add('animated');
71+
this.wrapper.classList.add('fadeOutDown');
72+
this.wrapper.classList.add('animated');
6273

63-
app.events.notify('app:window:minimized');
74+
app.events.notify('app:window:minimized');
75+
},
76+
77+
resetView: function () {
78+
var view = this;
79+
this.wrapper.classList.forEach(function(className){
80+
if(className !== 'window') {
81+
view.wrapper.classList.remove(className);
82+
}
83+
});
6484
},
6585

6686
popup: function(){
67-
// this.wrapper.remove('fadeOutDown');
68-
// this.wrapper.remove('animated');
87+
this.resetView();
6988

70-
this.wrapper.classList.add('fadeInUp');
71-
this.wrapper.classList.add('animated');
89+
this.wrapper.classList.add('fadeInUp');
90+
this.wrapper.classList.add('animated');
7291

73-
app.events.notify('app:window:popup');
92+
// app.events.notify('app:window:popup');
7493
},
7594

7695
maximize: function(){
77-
if(this.type === "maximized"){
78-
this.wrapper.removeAttribute("style");
79-
this.type="normalized";
80-
app.events.notify('app:window:normalized');
81-
}
82-
else{
83-
this.wrapper.style.maxWidth = "100%";
84-
this.wrapper.style.height = global.innerHeight-70+"px";
85-
this.type="maximized";
86-
app.events.notify('app:window:maximized');
87-
}
96+
if(this.type === "maximized"){
97+
this.wrapper.removeAttribute("style");
98+
this.type="normalized";
99+
app.events.notify('app:window:normalized');
100+
}
101+
else{
102+
this.wrapper.style.maxWidth = "100%";
103+
this.wrapper.style.height = global.innerHeight-70+"px";
104+
this.type="maximized";
105+
app.events.notify('app:window:maximized');
106+
}
88107
},
89108

90109
highlight: function(evnt){
91-
for (var i = app.windowInstances.length - 1; i >= 0; i--) {
92-
if(app.windowInstances[i].id === evnt.detail.id){
93-
app.windowInstances[i].wrapper.classList.add('windowhighlight');
94-
this.popup();
95-
}
96-
}
110+
this.wrapper.classList.add('windowhighlight');
97111
},
98112

99113
events: {
100114

101115
on: function () {
102-
Events.subscribe(this.closeIcon, 'click', this.destroy.bind(this));
103-
Events.subscribe(this.minimizeIcon, 'click', this.minimize.bind(this));
104-
Events.subscribe(this.maximizeIcon, 'click', this.maximize.bind(this));
105-
app.events.listen('app:footericon:highlighted', this.highlight.bind(this));
116+
Events.subscribe(this.closeIcon, 'click', this.destroy);
117+
Events.subscribe(this.minimizeIcon, 'click', this.minimize);
118+
Events.subscribe(this.maximizeIcon, 'click', this.maximize);
119+
app.events.listen('app:footericon:highlighted:' + this.id, this.highlight);
106120
},
107121

108122
off: function () {
109-
123+
Events.unsubscribe(this.closeIcon, 'click', this.destroy);
124+
Events.unsubscribe(this.minimizeIcon, 'click', this.minimize);
125+
Events.unsubscribe(this.maximizeIcon, 'click', this.maximize);
126+
app.events.remove('app:footericon:highlighted:' + this.id, this.highlight);
110127
}
111128
},
112129

‎EXERCISE/Exercise 4/styles/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,6 @@ body {
222222
transition: all .2s ease-in-out;
223223
transform: scale(1.1);
224224
}
225-
.iconhighlight{
225+
.wrapper .menu li.iconhighlight{
226226
background-color: rgba(5,180,186,0.2);
227227
}

0 commit comments

Comments
 (0)