extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-27 02:24:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] adding greeting in header

Browse Source
This commit is contained in:
hartk1213 2019-03-25 16:31:51 -07:00 committed by Kombie
parent c480736d23
commit e5f868a84a
10 changed files with 228 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/date.css
View File

@ -9,7 +9,7 @@
min-height: 2.5em; min-height: 2.5em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: flex-start;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@ -20,7 +20,7 @@
.date-year { .date-year {
font-size: 1.5em; font-size: 1.5em;
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
} }

28
css/greeting.css Normal file
View File

@ -0,0 +1,28 @@
.greeting {
margin: 0;
padding: 0;
border-radius: var(--radius);
font-size: 1em;
font-family: var(--font-fjalla);
color: rgb(var(--white));
width: 100%;
min-height: 2.5em;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: nowrap;
}
.greeting-item {
font-size: 1.5em;
max-width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.greeting-item-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

5
css/header.css
View File

@ -51,9 +51,10 @@
.header-item { .header-item {
margin: var(--gutter); margin: var(--gutter);
max-width: calc(100% - var(--gutter) * 2);
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
position: relative; position: relative;
} }
@ -102,6 +103,7 @@
.header-search, .header-search,
.header-edit-add, .header-edit-add,
.header-accent, .header-accent,
.header-greeting,
.header-menu { .header-menu {
display: none; display: none;
} }
@ -111,6 +113,7 @@
.is-header-clock-show .header-clock, .is-header-clock-show .header-clock,
.is-header-edit-add .header-edit-add, .is-header-edit-add .header-edit-add,
.is-header-accent .header-accent, .is-header-accent .header-accent,
.is-header-greeting .header-greeting,
.is-menu .header-menu { .is-menu .header-menu {
display: flex; display: flex;
} }

32
index.html
View File

@ -1,3 +1,4 @@

<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -25,6 +26,7 @@
<link rel="stylesheet" href="css/header.css"> <link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/date.css"> <link rel="stylesheet" href="css/date.css">
<link rel="stylesheet" href="css/clock.css"> <link rel="stylesheet" href="css/clock.css">
<link rel="stylesheet" href="css/greeting.css">
<link rel="stylesheet" href="css/search.css"> <link rel="stylesheet" href="css/search.css">
<link rel="stylesheet" href="css/background.css"> <link rel="stylesheet" href="css/background.css">
<link rel="stylesheet" href="css/link.css"> <link rel="stylesheet" href="css/link.css">
@ -42,6 +44,9 @@
<div class="header-border"></div> <div class="header-border"></div>
<div class="container"> <div class="container">
<div class="header-area"> <div class="header-area">
<div class="header-item header-greeting">
<p class="greeting"></p>
</div>
<div class="header-item header-clock"> <div class="header-item header-clock">
<p class="clock"></p> <p class="clock"></p>
</div> </div>
@ -111,6 +116,29 @@
<div class="menu-content"> <div class="menu-content">
<div class="menu-content-area menu-content-area-header"> <div class="menu-content-area menu-content-area-header">
<div class="menu-item">
<h1 class="menu-header">Greeting</h1>
<div class="checkbox-wrap">
<input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="1">
<label for="control-header-greeting-show"><span class="label-icon"></span>Show</label>
</div>
<div class="radio-wrap form-indent-1">
<input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="1">
<label for="control-header-greeting-type-good"><span class="label-icon"></span>"Good morning..."</label>
</div>
<div class="radio-wrap form-indent-1">
<input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="1">
<label for="control-header-greeting-type-hello"><span class="label-icon"></span>"Hello..."</label>
</div>
<div class="radio-wrap form-indent-1">
<input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="1">
<label for="control-header-greeting-type-hi"><span class="label-icon"></span>"Hi..."</label>
</div>
<div class="input-wrap form-indent-1">
<label for="control-header-greeting-name">Name</label>
<input id="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">
</div>
</div>
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Clock</h1> <h1 class="menu-header">Clock</h1>
<div class="checkbox-wrap"> <div class="checkbox-wrap">
@ -203,7 +231,7 @@
</div> </div>
<div class="input-wrap form-indent-2"> <div class="input-wrap form-indent-2">
<label for="control-header-search-engine-custom-url">URL</label> <label for="control-header-search-engine-custom-url">URL</label>
<input id="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"> <input id="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">
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
@ -282,7 +310,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="menu-content-area menu-content-area-bookmarks is-hidden"> <div class="menu-content-area menu-content-area-bookmarks is-hidden">
<div class="menu-item"> <div class="menu-item">
<h1 class="menu-header">Bookmarks</h1> <h1 class="menu-header">Bookmarks</h1>
@ -447,6 +474,7 @@
<script src="js/shade.js"></script> <script src="js/shade.js"></script>
<script src="js/theme.js"></script> <script src="js/theme.js"></script>
<script src="js/date.js"></script> <script src="js/date.js"></script>
<script src="js/greeting.js"></script>
<script src="js/clock.js"></script> <script src="js/clock.js"></script>
<script src="js/search.js"></script> <script src="js/search.js"></script>
<script src="js/link.js"></script> <script src="js/link.js"></script>

79
js/control.js
View File

@ -359,6 +359,61 @@ var control = (function() {
render(); render();
dependents(); dependents();
} }
}, {
element: helper.e(".control-header-greeting-show"),
path: "header.greeting.show",
type: "checkbox",
func: function() {
render();
dependents();
greeting.clear();
greeting.render();
header.render();
}
}, {
element: helper.e(".control-header-greeting-type-good"),
path: "header.greeting.type",
type: "radio",
func: function() {
render();
dependents();
greeting.clear();
greeting.render();
header.render();
}
}, {
element: helper.e(".control-header-greeting-type-hello"),
path: "header.greeting.type",
type: "radio",
func: function() {
render();
dependents();
greeting.clear();
greeting.render();
header.render();
}
}, {
element: helper.e(".control-header-greeting-type-hi"),
path: "header.greeting.type",
type: "radio",
func: function() {
render();
dependents();
greeting.clear();
greeting.render();
header.render();
}
}, {
element: helper.e(".control-header-greeting-name"),
path: "header.greeting.name",
type: "text",
func: function() {
render();
dependents();
greeting.clear();
greeting.render();
header.render();
}
}, { }, {
element: helper.e(".control-bookmarks-show-url"), element: helper.e(".control-bookmarks-show-url"),
path: "bookmarks.show.url", path: "bookmarks.show.url",
@ -729,6 +784,13 @@ var control = (function() {
helper.removeClass(html, "is-header-accent"); helper.removeClass(html, "is-header-accent");
}; };
}; };
var _greeting = function() {
if (state.get().header.greeting.show) {
helper.addClass(html, "is-header-greeting");
} else {
helper.removeClass(html, "is-header-greeting");
};
};
var _background = function() { var _background = function() {
if (state.get().background.image.show) { if (state.get().background.image.show) {
helper.addClass(html, "is-background-image-show"); helper.addClass(html, "is-background-image-show");
@ -761,6 +823,7 @@ var control = (function() {
_menu(); _menu();
_alignment(); _alignment();
_edit(); _edit();
_greeting();
_date(); _date();
_clock(); _clock();
_search(); _search();
@ -802,6 +865,21 @@ var control = (function() {
helper.e(".control-header-date-character-length-long").disabled = true; helper.e(".control-header-date-character-length-long").disabled = true;
}; };
}; };
var _greeting = function() {
if (state.get().header.greeting.show) {
helper.e("[for=control-header-greeting-name]").removeAttribute("disabled", "");
helper.e(".control-header-greeting-name").disabled = false;
helper.e(".control-header-greeting-type-good").disabled = false;
helper.e(".control-header-greeting-type-hello").disabled = false;
helper.e(".control-header-greeting-type-hi").disabled = false;
} else {
helper.e("[for=control-header-greeting-name]").setAttribute("disabled", "");
helper.e(".control-header-greeting-name").disabled = true;
helper.e(".control-header-greeting-type-good").disabled = true;
helper.e(".control-header-greeting-type-hello").disabled = true;
helper.e(".control-header-greeting-type-hi").disabled = true;
};
};
var _clock = function() { var _clock = function() {
var activeCount = 0; var activeCount = 0;
var toCheck = [state.get().header.clock.show.seconds, state.get().header.clock.show.minutes, state.get().header.clock.show.hours]; var toCheck = [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() {
}; };
}; };
_edit(); _edit();
_greeting();
_date(); _date();
_clock(); _clock();
_search(); _search();

64
js/greeting.js Normal file
View File

@ -0,0 +1,64 @@
var greeting = (function() {
var clear = function() {
var greeting = helper.e(".greeting");
while (greeting.lastChild) {
greeting.removeChild(greeting.lastChild);
};
};
var render = function() {
var _greeting = function() {
var greeting = helper.e(".greeting");
var message = {
hi: function() {
return "Hi";
},
hello: function() {
return "Hello";
},
good: function() {
var time = helper.getDateTime();
var message = ["Good night", "Good morning", "Good afternoon", "Good evening"];
return message[Math.floor(time.hours / 6)];
}
};
var greetingMessage = message[state.get().header.greeting.type]();
if (state.get().header.greeting.name != "" && state.get().header.greeting.name != undefined) {
greetingMessage = greetingMessage + ", " + state.get().header.greeting.name;
};
var greetingItem = helper.makeNode({
tag: "span",
attr: [{
key: "class",
value: "greeting-item"
}]
});
var greetingItemText = helper.makeNode({
tag: "span",
text: greetingMessage,
attr: [{
key: "class",
value: "greeting-item-text"
}]
});
greetingItem.appendChild(greetingItemText);
greeting.appendChild(greetingItem);
};
if (state.get().header.greeting.show) {
_greeting();
};
};
var init = function() {
render();
};
// exposed methods
return {
init: init,
render: render,
clear: clear
};
})();

4
js/init.js
View File

@ -27,6 +27,10 @@ link.init();
// render states // render states
control.init(); control.init();
// render date
// bind date update
greeting.init();
// render date // render date
// bind date update // bind date update
date.init(); date.init();

5
js/state.js
View File

@ -63,6 +63,11 @@ var state = (function() {
top: false, top: false,
bottom: false bottom: false
} }
},
greeting: {
show: false,
type: "good",
name: ""
} }
}, },
bookmarks: { bookmarks: {

18
js/update.js
View File

@ -197,13 +197,17 @@ var update = (function() {
console.log("\t -- running update", "2.10.0"); console.log("\t -- running update", "2.10.0");
data.version = "2.10.0"; data.version = "2.10.0";
}; };
} else if (typeof data.version == "string") { };
// new updates will go here if (typeof data.version == "string") {
// example update compare check if (version.compare(data.version, "2.11.0") == -1) {
// if (version.compare(data.version, "2.11.0") == -1) { console.log("\t -- running update", "2.11.0");
// console.log("\t -- running update", "2.11.0"); data.state.header.greeting = {
// data.version = "2.11.0"; show: false,
// }; type: "good",
name: ""
};
data.version = "2.11.0";
};
}; };
// if no update is needed // if no update is needed
// version bump // version bump

2
js/version.js
View File

@ -1,7 +1,7 @@
var version = (function() { var version = (function() {
// version is normally bumped when the state needs changing or any new functionality is added // version is normally bumped when the state needs changing or any new functionality is added
var current = "2.10.0"; var current = "2.11.0";
var compare = function(a, b) { var compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");