Skip to content

Commit e5f868a

Browse files
hartk1213zombieFox
hartk1213
authored and
zombieFox
committed
[feature] adding greeting in header
1 parent c480736 commit e5f868a

File tree

10 files changed

+228
-13
lines changed

10 files changed

+228
-13
lines changed

‎css/date.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
min-height:2.5em;
1010
display: flex;
1111
flex-direction: row;
12-
justify-content:center;
12+
justify-content:flex-start;
1313
flex-wrap: nowrap;
1414
}
1515

@@ -20,7 +20,7 @@
2020
.date-year{
2121
font-size:1.5em;
2222
display: flex;
23-
justify-content:center;
23+
justify-content:flex-start;
2424
align-items: center;
2525
}
2626

‎css/greeting.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.greeting{
2+
margin:0;
3+
padding:0;
4+
border-radius:var(--radius);
5+
font-size:1em;
6+
font-family:var(--font-fjalla);
7+
color:rgb(var(--white));
8+
width:100%;
9+
min-height:2.5em;
10+
display: flex;
11+
flex-direction: row;
12+
justify-content: center;
13+
flex-wrap: nowrap;
14+
}
15+
16+
.greeting-item{
17+
font-size:1.5em;
18+
max-width:100%;
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
}
23+
24+
.greeting-item-text{
25+
white-space: nowrap;
26+
overflow: hidden;
27+
text-overflow: ellipsis;
28+
}

‎css/header.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,10 @@
5151

5252
.header-item{
5353
margin:var(--gutter);
54+
max-width:calc(100%-var(--gutter) *2);
5455
display: flex;
5556
flex-wrap: nowrap;
56-
justify-content:center;
57+
justify-content:flex-start;
5758
align-items: center;
5859
position: relative;
5960
}
@@ -102,6 +103,7 @@
102103
.header-search,
103104
.header-edit-add,
104105
.header-accent,
106+
.header-greeting,
105107
.header-menu{
106108
display: none;
107109
}
@@ -111,6 +113,7 @@
111113
.is-header-clock-show .header-clock,
112114
.is-header-edit-add .header-edit-add,
113115
.is-header-accent .header-accent,
116+
.is-header-greeting .header-greeting,
114117
.is-menu .header-menu{
115118
display: flex;
116119
}

‎index.html‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
<!DOCTYPE html>
23
<htmllang="en">
34

@@ -25,6 +26,7 @@
2526
<linkrel="stylesheet" href="css/header.css">
2627
<linkrel="stylesheet" href="css/date.css">
2728
<linkrel="stylesheet" href="css/clock.css">
29+
<linkrel="stylesheet" href="css/greeting.css">
2830
<linkrel="stylesheet" href="css/search.css">
2931
<linkrel="stylesheet" href="css/background.css">
3032
<linkrel="stylesheet" href="css/link.css">
@@ -42,6 +44,9 @@
4244
<divclass="header-border"></div>
4345
<divclass="container">
4446
<divclass="header-area">
47+
<divclass="header-item header-greeting">
48+
<pclass="greeting"></p>
49+
</div>
4550
<divclass="header-item header-clock">
4651
<pclass="clock"></p>
4752
</div>
@@ -111,6 +116,29 @@
111116
<divclass="menu-content">
112117

113118
<divclass="menu-content-area menu-content-area-header">
119+
<divclass="menu-item">
120+
<h1class="menu-header">Greeting</h1>
121+
<divclass="checkbox-wrap">
122+
<inputid="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="1">
123+
<labelfor="control-header-greeting-show"><spanclass="label-icon"></span>Show</label>
124+
</div>
125+
<divclass="radio-wrap form-indent-1">
126+
<inputid="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="1">
127+
<labelfor="control-header-greeting-type-good"><spanclass="label-icon"></span>"Good morning..."</label>
128+
</div>
129+
<divclass="radio-wrap form-indent-1">
130+
<inputid="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="1">
131+
<labelfor="control-header-greeting-type-hello"><spanclass="label-icon"></span>"Hello..."</label>
132+
</div>
133+
<divclass="radio-wrap form-indent-1">
134+
<inputid="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="1">
135+
<labelfor="control-header-greeting-type-hi"><spanclass="label-icon"></span>"Hi..."</label>
136+
</div>
137+
<divclass="input-wrap form-indent-1">
138+
<labelfor="control-header-greeting-name">Name</label>
139+
<inputid="control-header-greeting-name" class="control-header-greeting-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="1">
140+
</div>
141+
</div>
114142
<divclass="menu-item">
115143
<h1class="menu-header">Clock</h1>
116144
<divclass="checkbox-wrap">
@@ -203,7 +231,7 @@ <h1 class="menu-header">Search</h1>
203231
</div>
204232
<divclass="input-wrap form-indent-2">
205233
<labelfor="control-header-search-engine-custom-url">URL</label>
206-
<inputid="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
234+
<inputid="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
207235
</div>
208236
</div>
209237
<divclass="menu-item">
@@ -282,7 +310,6 @@ <h1 class="menu-header">Background Shade</h1>
282310
</div>
283311
</div>
284312
</div>
285-
286313
<divclass="menu-content-area menu-content-area-bookmarks is-hidden">
287314
<divclass="menu-item">
288315
<h1class="menu-header">Bookmarks</h1>
@@ -447,6 +474,7 @@ <h1 class="menu-header">Image</h1>
447474
<scriptsrc="js/shade.js"></script>
448475
<scriptsrc="js/theme.js"></script>
449476
<scriptsrc="js/date.js"></script>
477+
<scriptsrc="js/greeting.js"></script>
450478
<scriptsrc="js/clock.js"></script>
451479
<scriptsrc="js/search.js"></script>
452480
<scriptsrc="js/link.js"></script>

‎js/control.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,61 @@ var control = (function(){
359359
render();
360360
dependents();
361361
}
362+
},{
363+
element: helper.e(".control-header-greeting-show"),
364+
path: "header.greeting.show",
365+
type: "checkbox",
366+
func: function(){
367+
render();
368+
dependents();
369+
greeting.clear();
370+
greeting.render();
371+
header.render();
372+
}
373+
},{
374+
element: helper.e(".control-header-greeting-type-good"),
375+
path: "header.greeting.type",
376+
type: "radio",
377+
func: function(){
378+
render();
379+
dependents();
380+
greeting.clear();
381+
greeting.render();
382+
header.render();
383+
}
384+
},{
385+
element: helper.e(".control-header-greeting-type-hello"),
386+
path: "header.greeting.type",
387+
type: "radio",
388+
func: function(){
389+
render();
390+
dependents();
391+
greeting.clear();
392+
greeting.render();
393+
header.render();
394+
}
395+
},{
396+
element: helper.e(".control-header-greeting-type-hi"),
397+
path: "header.greeting.type",
398+
type: "radio",
399+
func: function(){
400+
render();
401+
dependents();
402+
greeting.clear();
403+
greeting.render();
404+
header.render();
405+
}
406+
},{
407+
element: helper.e(".control-header-greeting-name"),
408+
path: "header.greeting.name",
409+
type: "text",
410+
func: function(){
411+
render();
412+
dependents();
413+
greeting.clear();
414+
greeting.render();
415+
header.render();
416+
}
362417
},{
363418
element: helper.e(".control-bookmarks-show-url"),
364419
path: "bookmarks.show.url",
@@ -729,6 +784,13 @@ var control = (function(){
729784
helper.removeClass(html,"is-header-accent");
730785
};
731786
};
787+
var_greeting=function(){
788+
if(state.get().header.greeting.show){
789+
helper.addClass(html,"is-header-greeting");
790+
}else{
791+
helper.removeClass(html,"is-header-greeting");
792+
};
793+
};
732794
var_background=function(){
733795
if(state.get().background.image.show){
734796
helper.addClass(html,"is-background-image-show");
@@ -761,6 +823,7 @@ var control = (function(){
761823
_menu();
762824
_alignment();
763825
_edit();
826+
_greeting();
764827
_date();
765828
_clock();
766829
_search();
@@ -802,6 +865,21 @@ var control = (function(){
802865
helper.e(".control-header-date-character-length-long").disabled=true;
803866
};
804867
};
868+
var_greeting=function(){
869+
if(state.get().header.greeting.show){
870+
helper.e("[for=control-header-greeting-name]").removeAttribute("disabled","");
871+
helper.e(".control-header-greeting-name").disabled=false;
872+
helper.e(".control-header-greeting-type-good").disabled=false;
873+
helper.e(".control-header-greeting-type-hello").disabled=false;
874+
helper.e(".control-header-greeting-type-hi").disabled=false;
875+
}else{
876+
helper.e("[for=control-header-greeting-name]").setAttribute("disabled","");
877+
helper.e(".control-header-greeting-name").disabled=true;
878+
helper.e(".control-header-greeting-type-good").disabled=true;
879+
helper.e(".control-header-greeting-type-hello").disabled=true;
880+
helper.e(".control-header-greeting-type-hi").disabled=true;
881+
};
882+
};
805883
var_clock=function(){
806884
varactiveCount=0;
807885
vartoCheck=[state.get().header.clock.show.seconds,state.get().header.clock.show.minutes,state.get().header.clock.show.hours];
@@ -941,6 +1019,7 @@ var control = (function(){
9411019
};
9421020
};
9431021
_edit();
1022+
_greeting();
9441023
_date();
9451024
_clock();
9461025
_search();

‎js/greeting.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
vargreeting=(function(){
2+
3+
varclear=function(){
4+
vargreeting=helper.e(".greeting");
5+
while(greeting.lastChild){
6+
greeting.removeChild(greeting.lastChild);
7+
};
8+
};
9+
10+
varrender=function(){
11+
var_greeting=function(){
12+
vargreeting=helper.e(".greeting");
13+
varmessage={
14+
hi: function(){
15+
return"Hi";
16+
},
17+
hello: function(){
18+
return"Hello";
19+
},
20+
good: function(){
21+
vartime=helper.getDateTime();
22+
varmessage=["Good night","Good morning","Good afternoon","Good evening"];
23+
returnmessage[Math.floor(time.hours/6)];
24+
}
25+
};
26+
vargreetingMessage=message[state.get().header.greeting.type]();
27+
if(state.get().header.greeting.name!=""&&state.get().header.greeting.name!=undefined){
28+
greetingMessage=greetingMessage+", "+state.get().header.greeting.name;
29+
};
30+
vargreetingItem=helper.makeNode({
31+
tag: "span",
32+
attr: [{
33+
key: "class",
34+
value: "greeting-item"
35+
}]
36+
});
37+
vargreetingItemText=helper.makeNode({
38+
tag: "span",
39+
text: greetingMessage,
40+
attr: [{
41+
key: "class",
42+
value: "greeting-item-text"
43+
}]
44+
});
45+
greetingItem.appendChild(greetingItemText);
46+
greeting.appendChild(greetingItem);
47+
};
48+
if(state.get().header.greeting.show){
49+
_greeting();
50+
};
51+
};
52+
53+
varinit=function(){
54+
render();
55+
};
56+
57+
// exposed methods
58+
return{
59+
init: init,
60+
render: render,
61+
clear: clear
62+
};
63+
64+
})();

‎js/init.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ link.init();
2727
// render states
2828
control.init();
2929

30+
// render date
31+
// bind date update
32+
greeting.init();
33+
3034
// render date
3135
// bind date update
3236
date.init();

‎js/state.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@ var state = (function(){
6363
top: false,
6464
bottom: false
6565
}
66+
},
67+
greeting: {
68+
show: false,
69+
type: "good",
70+
name: ""
6671
}
6772
},
6873
bookmarks: {

‎js/update.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -197,13 +197,17 @@ var update = (function(){
197197
console.log("\t -- running update","2.10.0");
198198
data.version="2.10.0";
199199
};
200-
}elseif(typeofdata.version=="string"){
201-
// new updates will go here
202-
// example update compare check
203-
// if (version.compare(data.version, "2.11.0") == -1){
204-
// console.log("\t -- running update", "2.11.0");
205-
// data.version = "2.11.0"
206-
// };
200+
};
201+
if(typeofdata.version=="string"){
202+
if(version.compare(data.version,"2.11.0")==-1){
203+
console.log("\t -- running update","2.11.0");
204+
data.state.header.greeting={
205+
show: false,
206+
type: "good",
207+
name: ""
208+
};
209+
data.version="2.11.0";
210+
};
207211
};
208212
// if no update is needed
209213
// version bump

‎js/version.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
varversion=(function(){
22

33
// version is normally bumped when the state needs changing or any new functionality is added
4-
varcurrent="2.10.0";
4+
varcurrent="2.11.0";
55

66
varcompare=function(a,b){
77
varpa=a.split(".");

0 commit comments

Comments
(0)