Lokasi ngalangkungan proxy:   [ UP ]  
[Ngawartoskeun bug]   [Panyetelan cookie]                
Skip to content

Commit b23b7b2

Browse files
zombieFoxzombieFox
authored
[refactor] improve menu render
1 parent cffa73c commit b23b7b2

7 files changed

Lines changed: 314 additions & 283 deletions

File tree

‎src/css/menu.css‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,19 @@
4040
flex-direction: row;
4141
}
4242

43-
.menu-nav-area {
43+
.menu-nav-area-tab {
4444
display: flex;
4545
flex-direction: row;
4646
flex-wrap: wrap;
4747
align-items: flex-start;
48+
flex-grow: 1;
4849
}
4950

50-
.menu-nav-area-grow {
51-
flex-grow: 1;
51+
.menu-nav-area-close {
52+
display: flex;
53+
flex-direction: row;
54+
flex-wrap: wrap;
55+
align-items: flex-start;
5256
}
5357

5458
.menu-nav:not(:last-child) {
@@ -85,39 +89,31 @@
8589
padding: 0 0 2em 2em;
8690
}
8791

88-
.menu-close {
89-
background-color: transparent;
90-
margin: 0;
91-
padding-top: 0.75em;
92-
padding-bottom: 0.75em;
93-
border-radius: 0 var(--theme-radius) 0 0;
94-
}
95-
9692
.menu-nav-button {
9793
background-color: transparent;
98-
margin: 0;
99-
padding: 1em;
10094
border-radius: 0;
95+
margin: 0;
96+
padding-top: 0;
97+
padding-bottom: 0;
98+
height: 3.25em;
99+
line-height: 1;
101100
flex-grow: 1;
102101
}
103102

104-
.menu-nav-button:first-child {
103+
.menu-nav-area-tab .menu-nav-button:first-child {
105104
border-radius: var(--theme-radius) 0 0 0;
106105
}
107106

108-
.menu-nav-button [class^="icon-"],
109-
.menu-nav-button [class*=" icon-"] {
110-
line-height: 1;
111-
padding-top: 1.5em;
112-
padding-bottom: 1.5em;
107+
.menu-nav-area-close .menu-nav-button {
108+
border-radius: 0 var(--theme-radius) 0 0;
113109
}
114110

115111
@media (min-width: 550px) {
116112
.menu {
117113
width: 80vw;
118114
}
119115

120-
.menu-nav-button {
116+
.menu-nav-area-tab .menu-nav-button {
121117
flex-basis: 33.3333333333%;
122118
max-width: 33.3333333333%;
123119
}
@@ -160,7 +156,7 @@
160156
z-index: 3;
161157
}
162158

163-
.menu-nav-button {
159+
.menu-nav-area-tab .menu-nav-button {
164160
flex-basis: 50%;
165161
max-width: 50%;
166162
}
@@ -180,14 +176,14 @@
180176
grid-template-columns: 1fr 2fr;
181177
}
182178

183-
.menu-nav-button {
179+
.menu-nav-area-tab .menu-nav-button {
184180
flex-basis: 33.3333333333%;
185181
max-width: 33.3333333333%;
186182
}
187183
}
188184

189185
@media (min-width: 1100px) {
190-
.menu-nav-button {
186+
.menu-nav-area-tab .menu-nav-button {
191187
flex-basis: 0;
192188
max-width: inherit;
193189
}

‎src/index.html‎

Lines changed: 180 additions & 180 deletions
Large diffs are not rendered by default.

‎src/js/control.js‎

Lines changed: 60 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,64 @@
11
var control = (function() {
22

33
var _allControl = [{
4-
element: helper.e(".control-menu"),
4+
element: helper.e(".control-menu-open"),
55
type: "button",
66
func: function() {
7-
menu.toggle();
7+
menu.mod.open();
8+
menu.render.toggle();
9+
menu.render.tabindex.toggle();
10+
pagelock.render.toggle();
11+
}
12+
}, {
13+
element: helper.e(".control-menu-layout"),
14+
type: "button",
15+
func: function() {
16+
menu.render.tab(this.element, helper.e(".menu-content-area-layout"));
17+
}
18+
}, {
19+
element: helper.e(".control-menu-header"),
20+
type: "button",
21+
func: function() {
22+
menu.render.tab(this.element, helper.e(".menu-content-area-header"));
23+
}
24+
}, {
25+
element: helper.e(".control-menu-bookmarks"),
26+
type: "button",
27+
func: function() {
28+
menu.render.tab(this.element, helper.e(".menu-content-area-bookmarks"));
29+
}
30+
}, {
31+
element: helper.e(".control-menu-theme"),
32+
type: "button",
33+
func: function() {
34+
menu.render.tab(this.element, helper.e(".menu-content-area-theme"));
35+
}
36+
}, {
37+
element: helper.e(".control-menu-background"),
38+
type: "button",
39+
func: function() {
40+
menu.render.tab(this.element, helper.e(".menu-content-area-background"));
41+
}
42+
}, {
43+
element: helper.e(".control-menu-data"),
44+
type: "button",
45+
func: function() {
46+
menu.render.tab(this.element, helper.e(".menu-content-area-data"));
47+
}
48+
}, {
49+
element: helper.e(".control-menu-nightTab"),
50+
type: "button",
51+
func: function() {
52+
menu.render.tab(this.element, helper.e(".menu-content-area-nightTab"));
53+
}
54+
}, {
55+
element: helper.e(".control-menu-close"),
56+
type: "button",
57+
func: function() {
58+
shade.destroy();
59+
menu.mod.close();
60+
menu.render.toggle();
61+
menu.render.tabindex.toggle();
862
pagelock.render.toggle();
963
}
1064
}, {
@@ -1448,14 +1502,14 @@ var control = (function() {
14481502
event: "input",
14491503
func: function() {
14501504
edge.render.box({
1451-
element: helper.e(".control-menu"),
1505+
element: helper.e(".control-menu-open"),
14521506
});
14531507
}
14541508
}, {
14551509
event: "mousedown",
14561510
func: function() {
14571511
edge.render.box({
1458-
element: helper.e(".control-menu"),
1512+
element: helper.e(".control-menu-open"),
14591513
});
14601514
}
14611515
}, {
@@ -1473,7 +1527,7 @@ var control = (function() {
14731527
func: function() {
14741528
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
14751529
edge.render.box({
1476-
element: helper.e(".control-menu"),
1530+
element: helper.e(".control-menu-open"),
14771531
});
14781532
};
14791533
}
@@ -1493,7 +1547,7 @@ var control = (function() {
14931547
event: "click",
14941548
func: function() {
14951549
edge.render.box({
1496-
element: helper.e(".control-menu"),
1550+
element: helper.e(".control-menu-open"),
14971551
delay: 500
14981552
});
14991553
}

‎src/js/header.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,13 +137,13 @@ var header = (function() {
137137
helper.removeClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
138138
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
139139
helper.removeClass(helper.e(".control-link-add"), "button-link");
140-
helper.removeClass(helper.e(".control-menu"), "button-link");
140+
helper.removeClass(helper.e(".control-menu-open"), "button-link");
141141
},
142142
clear: function() {
143143
helper.addClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
144144
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
145145
helper.addClass(helper.e(".control-link-add"), "button-link");
146-
helper.addClass(helper.e(".control-menu"), "button-link");
146+
helper.addClass(helper.e(".control-menu-open"), "button-link");
147147
}
148148
};
149149
action[state.get().header.button.style]();

‎src/js/menu.js‎

Lines changed: 51 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,74 @@
11
var menu = (function() {
22

3-
var _bind = function() {
4-
var allMenuNavButton = helper.eA(".menu-nav-button");
5-
var menuClose = helper.e(".menu-close");
6-
allMenuNavButton.forEach(function(arrayItem, index) {
7-
arrayItem.addEventListener("click", function() {
8-
_tab(this);
9-
}, false);
10-
});
11-
menuClose.addEventListener("click", function() {
12-
close();
13-
shade.destroy();
14-
pagelock.render.toggle();
15-
}, false);
16-
};
17-
18-
var _scrollToTop = function() {
19-
if (window.innerWidth < 550) {
20-
helper.e(".menu-area").scrollTop = 0;
21-
} else {
22-
helper.e(".menu-content").scrollTop = 0;
23-
};
24-
};
25-
26-
var _tab = function(button) {
27-
var allMenuNavButton = helper.eA(".menu-nav-button");
28-
var allMenuContentArea = helper.eA(".menu-content-area");
29-
var target = helper.e(button.dataset.target);
30-
allMenuNavButton.forEach(function(arrayItem, index) {
31-
helper.removeClass(arrayItem, "active");
32-
});
33-
allMenuContentArea.forEach(function(arrayItem, index) {
34-
helper.addClass(arrayItem, "is-hidden");
35-
});
36-
helper.addClass(button, "active");
37-
helper.removeClass(target, "is-hidden");
38-
_scrollToTop();
39-
};
3+
var mod = {};
404

41-
var close = function() {
5+
mod.open = function() {
426
helper.setObject({
437
object: state.get(),
448
path: "menu",
45-
newValue: false
9+
newValue: true
4610
});
47-
render.menu();
48-
render.tabindex();
4911
};
5012

51-
var open = function() {
52-
_scrollToTop();
13+
mod.close = function() {
5314
helper.setObject({
5415
object: state.get(),
5516
path: "menu",
56-
newValue: true
17+
newValue: false
5718
});
58-
render.menu();
59-
render.tabindex();
6019
};
6120

62-
var toggle = function() {
21+
mod.toggle = function() {
6322
if (state.get().menu) {
6423
helper.setObject({
6524
object: state.get(),
6625
path: "menu",
6726
newValue: false
6827
});
6928
} else {
70-
_scrollToTop();
29+
render.scrollToTop();
7130
helper.setObject({
7231
object: state.get(),
7332
path: "menu",
7433
newValue: true
7534
});
7635
};
77-
render.menu();
78-
render.tabindex();
7936
};
8037

8138
var render = {};
8239

83-
render.menu = function() {
40+
render.scrollToTop = function() {
41+
if (window.innerWidth < 550) {
42+
helper.e(".menu-area").scrollTop = 0;
43+
} else {
44+
helper.e(".menu-content").scrollTop = 0;
45+
};
46+
};
47+
48+
render.tab = function(menuNavButton, menuContentArea) {
49+
var allMenuNavButton = helper.eA(".menu-nav-button");
50+
var allMenuContentArea = helper.eA(".menu-content-area");
51+
allMenuNavButton.forEach(function(arrayItem, index) {
52+
helper.removeClass(arrayItem, "active");
53+
});
54+
allMenuContentArea.forEach(function(arrayItem, index) {
55+
helper.addClass(arrayItem, "is-hidden");
56+
});
57+
helper.addClass(menuNavButton, "active");
58+
helper.removeClass(menuContentArea, "is-hidden");
59+
render.scrollToTop();
60+
};
61+
62+
render.toggle = function() {
8463
var html = helper.e("html");
8564
if (state.get().menu) {
8665
helper.addClass(html, "is-menu-open");
8766
helper.e(".menu").focus();
8867
shade.render({
8968
action: function() {
90-
close();
69+
mod.close();
70+
render.toggle();
71+
menu.render.tabindex.toggle();
9172
pagelock.render.toggle();
9273
}
9374
});
@@ -96,31 +77,31 @@ var menu = (function() {
9677
};
9778
};
9879

99-
render.tabindex = function() {
100-
var menu = helper.e(".menu");
101-
if (state.get().menu) {
102-
menu.tabIndex = 1;
103-
menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
104-
arrayItem.tabIndex = 1;
105-
});
106-
} else {
107-
menu.tabIndex = -1;
108-
menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
109-
arrayItem.tabIndex = -1;
110-
});
111-
};
80+
render.tabindex = {
81+
toggle: function() {
82+
var menu = helper.e(".menu");
83+
if (state.get().menu) {
84+
menu.tabIndex = 1;
85+
menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
86+
arrayItem.tabIndex = 1;
87+
});
88+
} else {
89+
menu.tabIndex = -1;
90+
menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
91+
arrayItem.tabIndex = -1;
92+
});
93+
};
94+
}
11295
};
11396

11497
var init = function() {
115-
_bind();
116-
close();
98+
mod.close();
99+
render.toggle();
117100
};
118101

119102
return {
120103
init: init,
121-
close: close,
122-
open: open,
123-
toggle: toggle,
104+
mod: mod,
124105
render: render
125106
};
126107

0 commit comments

Comments
 (0)