Skip to content

Commit b1f15a0

Browse files
zombieFoxzombieFox
authored
[feature] adding list style
1 parent e144a75 commit b1f15a0

File tree

9 files changed

+135
-45
lines changed

9 files changed

+135
-45
lines changed

‎css/base.css‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,6 @@
2828
--animation-speed-fast:0.1s;
2929
--animation-speed-medium:0.2s;
3030
--animation-speed-slow:0.3s;
31-
--link-height:7em;
32-
--url-height:20%;
33-
--edit-height:30%;
3431
--font-regular:"Open Sans Regular", sans-serif;
3532
--font-bold:"Open Sans Bold", sans-serif;
3633
--font-light:"Open Sans Light", sans-serif;
@@ -43,8 +40,20 @@
4340
--breakpoint-xl:1300px;
4441
}
4542

43+
:root.is-link-block{
44+
--link-height:7em;
45+
--url-height:20%;
46+
--edit-height:30%;
47+
}
48+
49+
:root.is-link-list{
50+
--link-height:4em;
51+
--url-height:30%;
52+
--edit-height:50%;
53+
}
54+
4655
@media (min-width:700px){
47-
:root{
56+
:root.is-link-block{
4857
--link-height:9em;
4958
}
5059
}

‎css/links.css‎

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,24 @@
2525
width:100%;
2626
height:calc(100%-2px);
2727
display: flex;
28-
flex-direction: column;
29-
align-items: center;
30-
justify-content: center;
3128
z-index:3;
3229
position: relative;
3330
user-select: none;
3431
transition: all var(--animation-speed-medium) ease-in-out;
3532
}
3633

34+
.is-link-block .link-panel-front{
35+
flex-direction: column;
36+
align-items: center;
37+
justify-content: center;
38+
}
39+
40+
.is-link-list .link-panel-front{
41+
flex-direction: row;
42+
align-items: center;
43+
justify-content: flex-start;
44+
}
45+
3746
.link-panel-front:focus{
3847
background-color:var(--gray-03);
3948
outline:0;
@@ -121,11 +130,18 @@
121130
height:0;
122131
overflow: hidden;
123132
display: flex;
124-
justify-content: center;
125133
align-items: center;
126134
transition: all var(--animation-speed-medium) ease-in-out;
127135
}
128136

137+
.is-link-block .link-url{
138+
justify-content: center;
139+
}
140+
141+
.is-link-list .link-url{
142+
justify-content: flex-start;
143+
}
144+
129145
.link-item:hover .link-url,
130146
.link-item:focus .link-url{
131147
height:var(--url-height);
@@ -134,7 +150,6 @@
134150
.link-url-text{
135151
margin:0;
136152
font-size:0.7em;
137-
text-align: center;
138153
color:var(--black);
139154
font-family:var(--font-regular);
140155
white-space: nowrap;
@@ -143,16 +158,24 @@
143158
}
144159

145160
.link-letter{
146-
margin:0;
147-
font-size:2em;
148161
text-align: center;
149162
font-family:var(--font-fjalla);
150163
color:rgb(var(--accent));
151164
white-space: nowrap;
165+
}
166+
167+
.is-link-block .link-letter{
168+
margin:0;
169+
font-size:2em;
152170
overflow: hidden;
153171
text-overflow: ellipsis;
154172
}
155173

174+
.is-link-list .link-letter{
175+
margin:00.5em00;
176+
font-size:1.5em;
177+
}
178+
156179
.link-item:hover .link-letter,
157180
.link-item:focus .link-letter{
158181
color:var(--white);
@@ -191,9 +214,18 @@
191214
height:0;
192215
}
193216

194-
height:var(--edit-height);
195-
}
196-
197217
.is-edit .link-control-item{
198218
pointer-events: all;
199219
}
220+
221+
.is-link-block .link-panel-front{
222+
flex-direction: column;
223+
align-items: center;
224+
justify-content: center;
225+
}
226+
227+
.is-link-list .link-panel-front{
228+
flex-direction: row;
229+
align-items: center;
230+
justify-content: flex-start;
231+
}

‎index.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<htmllang="en">
2+
<htmllang="en"class="is-link-block">
33

44
<head>
55
<metacharset="utf-8">
@@ -42,16 +42,22 @@
4242
<spanclass="icon-close"></span>
4343
</button>
4444
</div>
45-
<divclass="head-item mb-3 mb-lg-0">
45+
<divclass="head-item button-group mb-3 mb-lg-0">
4646
<buttonclass="button mb-0 control-add" tabindex="1">
4747
<spanclass="button-text">Add</span>
4848
</button>
49-
</div>
50-
<divclass="head-item mb-3 mb-lg-0">
5149
<buttonclass="button mb-0 control-edit" tabindex="1">
5250
<spanclass="button-text">Edit</span>
5351
</button>
5452
</div>
53+
<divclass="head-item button-group mb-3 mb-lg-0">
54+
<buttonclass="button mb-0 control-link-list" tabindex="1">
55+
<spanclass="button-text">List</span>
56+
</button>
57+
<buttonclass="button mb-0 control-link-blocks active" tabindex="1">
58+
<spanclass="button-text">Block</span>
59+
</button>
60+
</div>
5561
<divclass="head-item mb-3 mb-lg-0">
5662
<formclass="theme">
5763
<labelclass="button mb-0 theme-label" for="accent-picker">

‎js/bookmarks.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,9 @@ var bookmarks = (function(){
123123
};
124124

125125
varrestore=function(array){
126-
all=array;
126+
if(array){
127+
all=array;
128+
};
127129
};
128130

129131
// exposed methods

‎js/control.js‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,33 @@
11
varcontrol=(function(){
22

33
varstate={
4-
edit: false
4+
edit: false,
5+
style: "block"
6+
};
7+
8+
varget=function(){
9+
returnstate;
510
};
611

712
varbind=function(){
813
varcontrolAdd=helper.e(".control-add");
914
varcontrolEdit=helper.e(".control-edit");
15+
varcontrolLinkBlock=helper.e(".control-link-blocks");
16+
varcontrolLinkList=helper.e(".control-link-list");
1017
controlAdd.addEventListener("click",function(){
1118
_add();
1219
},false);
1320
controlEdit.addEventListener("click",function(){
1421
_edit();
1522
},false);
23+
controlLinkBlock.addEventListener("click",function(){
24+
_toggleListStyle("block");
25+
data.save();
26+
},false);
27+
controlLinkList.addEventListener("click",function(){
28+
_toggleListStyle("list");
29+
data.save();
30+
},false);
1631
};
1732

1833
var_add=function(){
@@ -35,14 +50,50 @@ var control = (function(){
3550
};
3651
};
3752

53+
var_toggleListStyle=function(style){
54+
state.style=style;
55+
render();
56+
};
57+
58+
varrender=function(){
59+
varhtml=helper.e("html");
60+
varcontrolLinkBlock=helper.e(".control-link-blocks");
61+
varcontrolLinkList=helper.e(".control-link-list");
62+
varaction={
63+
block: function(){
64+
helper.addClass(html,"is-link-block");
65+
helper.removeClass(html,"is-link-list");
66+
helper.addClass(controlLinkBlock,"active");
67+
helper.removeClass(controlLinkList,"active");
68+
},
69+
list: function(){
70+
helper.removeClass(html,"is-link-block");
71+
helper.addClass(html,"is-link-list");
72+
helper.removeClass(controlLinkBlock,"active");
73+
helper.addClass(controlLinkList,"active");
74+
}
75+
};
76+
action[state.style]();
77+
};
78+
79+
varrestore=function(object){
80+
if(object){
81+
state=object;
82+
render();
83+
};
84+
};
85+
3886
varinit=function(){
3987
bind();
88+
render();
4089
};
4190

4291
// exposed methods
4392
return{
4493
init: init,
45-
state: state
94+
get: get,
95+
restore: restore,
96+
render: render
4697
};
4798

4899
})();

‎js/data.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,12 @@ var data = (function(){
2121

2222
varrestore=function(){
2323
vardata=JSON.parse(get(saveName));
24-
bookmarks.restore(data.bookmarks);
25-
theme.restore(data.accent);
26-
console.log(saveName+" data restored");
24+
if(data){
25+
bookmarks.restore(data.bookmarks);
26+
theme.restore(data.theme);
27+
control.restore(data.control);
28+
console.log(saveName+" data restored");
29+
};
2730
};
2831

2932
varwipe=function(){

‎js/links.js‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -312,14 +312,6 @@ var links = (function(){
312312
value: -1
313313
}]
314314
});
315-
// var linkEditText = _makeElement({
316-
// tag: "span",
317-
// text: "Edit",
318-
// attr: [{
319-
// key: "class",
320-
// value: "button-text"
321-
// }]
322-
// });
323315
varlinkEditIcon=_makeElement({
324316
tag: "span",
325317
attr: [{
@@ -337,14 +329,6 @@ var links = (function(){
337329
value: -1
338330
}]
339331
});
340-
// var linkDeleteText = _makeElement({
341-
// tag: "span",
342-
// text: "Delete",
343-
// attr: [{
344-
// key: "class",
345-
// value: "button-text"
346-
// }]
347-
// });
348332
varlinkDeleteIcon=_makeElement({
349333
tag: "span",
350334
attr: [{
@@ -387,7 +371,7 @@ var links = (function(){
387371

388372
vartabindex=function(){
389373
varallLinkControlItem=helper.eA(".link-control-item");
390-
if(control.state.edit){
374+
if(control.get().edit){
391375
allLinkControlItem.forEach(function(arrayItem,index){
392376
arrayItem.tabIndex=1;
393377
});

‎js/state.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ var state = (function(){
33
varget=function(){
44
varcurrent={
55
bookmarks: bookmarks.get(),
6-
accent: theme.get()
6+
control: control.get(),
7+
theme: theme.get()
78
};
89
returncurrent;
910
};

‎js/theme.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,11 @@ var theme = (function(){
3434
};
3535

3636
varrestore=function(object){
37-
accent=object;
38-
_updateInput();
39-
render();
37+
if(object){
38+
accent=object;
39+
_updateInput();
40+
render();
41+
};
4042
};
4143

4244
varinit=function(){

0 commit comments

Comments
(0)