Skip to content

Commit 7c16b17

Browse files
summerstylesummerstyle
committed
Divide css
1 parent 5a4f0a1 commit 7c16b17

File tree

5 files changed

+531
-143
lines changed

5 files changed

+531
-143
lines changed

‎App.js

+139-69
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,80 @@
1010

1111
'use strict';
1212

13-
/*
14-
TODO
15-
16-
*/
17-
1813
var Interface = (function() {
1914
self = {};
2015

16+
/* Events */
17+
var events = (function() {
18+
var list = {};
19+
20+
return {
21+
fire : function() {
22+
23+
}
24+
};
25+
})();
26+
2127
/* Utilities */
2228
var utils = {
23-
29+
dom : {
30+
css : function(el, prop, value) {
31+
el.style[prop] = value;
32+
},
33+
show : function(el) {
34+
this.css(el, 'display', 'block');
35+
},
36+
hide : function(el) {
37+
this.css(el, 'display', 'none');
38+
},
39+
id : function(id) {
40+
return document.getElementById(id);
41+
},
42+
klass : function(klass) {
43+
return document.getElementsByClassName(klass);
44+
},
45+
stopEvent : function(e) {
46+
e.stopPropagation();
47+
e.preventDefault();
48+
49+
return this;
50+
},
51+
},
52+
extend : function(obj, options) {
53+
var target = {};
54+
55+
for (name in obj) {
56+
if(obj.hasOwnProperty(name)) {
57+
target[name] = options[name] ? options[name] : obj[name];
58+
};
59+
};
60+
61+
return target;
62+
},
63+
mixin : function(target, mixin) {
64+
for (var prop in mixin) {
65+
if (mixin.hasOwnProperty(prop)) {
66+
target[prop] = mixin[prop];
67+
}
68+
}
69+
},
70+
foreach : function(arr, func) {
71+
for(var i = 0, count = arr.length; i < count; i++) {
72+
func(arr[i], i);
73+
};
74+
},
75+
foreachReverse : function(arr, func) {
76+
for(var i = arr.length - 1; i >= 0; i--) {
77+
func(arr[i], i);
78+
};
79+
},
80+
debug : (function() {
81+
var output = document.getElementById('debug');
82+
83+
return function() {
84+
output.innerHTML = [].join.call(arguments, ' ');
85+
};
86+
})(),
2487
};
2588

2689
var Menu = function(items, settings) {
@@ -85,12 +148,11 @@ var Interface = (function() {
85148
current = 0;
86149

87150
return {
88-
push : function(win) {
151+
push : function(layer) {
89152
current++;
90-
arr.push(new Layer(win));
153+
arr.push(layer);
91154
},
92155
pop : function() {
93-
arr[current--].destroy();
94156
arr.pop();
95157
},
96158
clear: function() {
@@ -101,87 +163,95 @@ var Interface = (function() {
101163
};
102164
})();
103165

104-
function Layer(win, with_overlay, z_index) {
105-
var overlay = null,
106-
iwindow = win;
107-
108-
if (!with_overlay) {
109-
overlay = document.createElement('div');
110-
document.documentElement.appendChild(overlay);
111-
overlay.className = 'overlay';
112-
overlay.style.display = 'block';
113-
overlay.style.zIndex = z_index;
114-
}
166+
function create_overlay() {
167+
var overlay = document.createElement('div');
168+
overlay.className = 'overlay';
169+
utils.dom.hide(overlay);
170+
document.body.appendChild(overlay);
115171

116-
iwindow.show();
117-
118-
this.destroy = function() {
119-
iwindow.hide();
120-
};
172+
return overlay;
121173
}
122174

175+
/**
176+
*
177+
*
178+
*
179+
*/
123180
function Window(config) {
124-
var el = document.querySelector('.window'),
125-
close_button = el.querySelector('.window__close-button'),
126-
content_wrapper = el.querySelector('.window__content'),
127-
header = el.querySelector('.window__header'),
128-
content = document.querySelector(config.content);
129-
130-
/*
131-
config = {
181+
var defaults = {
132182
movable: false,
133183
closable: true,
134184
overlay: true,
135-
level
136-
}
137-
*/
185+
layout: 'default',
186+
content_el: null,
187+
js_module: null
188+
};
138189

139-
close_button.addEventListener('click', hide, false);
190+
var params = utils.extend(defaults, config);
191+
console.log(params);
140192

141-
// init
142-
content_wrapper.innerHTML = '';
143-
content_wrapper.appendChild(content);
193+
var el = document.createElement('div'),
194+
close_button = document.createElement('div'),
195+
content_wrapper = document.createElement('div'),
196+
overlay = params.overlay ? create_overlay() : null;
144197

145-
if (config.movable) {
146-
el.classList.add('window_movable');
147-
148-
// move logic
198+
this.el = params.content_el;
199+
200+
if (params.content_el.dataset['header']) {
201+
var header = document.createElement('h5');
202+
header.className = 'window__header';
203+
header.innerHTML = params.content_el.dataset['header'];
204+
el.appendChild(header);
149205
}
150206

151-
if (typeof config.js_module === 'function') {
152-
config.js_module(content);
207+
el.className = 'window';
208+
close_button.className = 'window__close-button';
209+
content_wrapper.className = 'window__content';
210+
211+
if (params.movable) {
212+
el.classList.add('window_movable');
153213
}
154214

155-
function hide() {
156-
el.style.display = 'none';
157-
};
215+
el.appendChild(close_button);
216+
el.appendChild(content_wrapper);
217+
content_wrapper.appendChild(params.content_el);
218+
219+
document.body.appendChild(el);
158220

221+
if (params.closable) {
222+
close_button.addEventListener('click', hide, false);
223+
overlay.addEventListener('click', hide, false);
224+
}
225+
226+
227+
if (typeof params.js_module === 'function') {
228+
var result = params.js_module.call(this, this);
229+
utils.mixin(this, result);
230+
}
231+
159232
function show() {
160-
el.style.display = 'block';
161-
};
233+
utils.dom.show(el);
234+
if (overlay) {
235+
utils.dom.show(overlay);
236+
}
237+
layers.push(this);
238+
}
239+
240+
function hide() {
241+
utils.dom.hide(el);
242+
if (overlay) {
243+
utils.dom.hide(overlay);
244+
}
245+
layers.pop(this);
246+
}
162247

163248
this.show = show;
164249
this.hide = hide;
165250
}
166251

167-
168-
var a = new Window({
169-
content: '#help',
170-
movable: false,
171-
closable: true,
172-
overlay: true,
173-
layout: 'black',
174-
header: 'This is window',
175-
js_module: function(content_el) {
176-
content_el.addEventListener('click', function() {
177-
alert(3949732523);
178-
}, false);
179-
}
180-
});
181-
182-
183252
return {
184-
Menu: Menu,
185-
Window: Window
253+
utils : utils,
254+
Menu : Menu,
255+
Window : Window
186256
};
187257
})();

0 commit comments

Comments
 (0)