home

my firefox custom homepage
Log | Files | Refs | README | git clone https://git.ne02ptzero.me/git/home

commit 804d036a778f3eed9eb137303454d1ef6304f622
parent 3dc194b6556d9264f55380314a36529866b8f23e
Author: Ne02ptzero <louis@ne02ptzero.me>
Date:   Wed,  4 Oct 2017 14:04:56 +0200

[CORE] ADD: Now displaying shortcuts in UI

Diffstat:
Mhome.html | 2++
Mmain.css | 40+++++++++++++++++++++++++++++++++++-----
Mmain.js | 41+++++++++++++++++++++++++++++++++--------
3 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/home.html b/home.html @@ -68,4 +68,6 @@ </div> <div id="time"></div> <div class='help'><a href="#" onclick="show_help()">Help</a></div> + <div class='shortcuts'><a href="#" onclick="show_shortcuts()">Shortcuts</a></div> <div id='show_help'></div> + <div id='show_shortcuts'></div> diff --git a/main.css b/main.css @@ -102,7 +102,7 @@ img { margin-right: -5px; } -.help { +.help, .shortcuts { position: absolute; width: 100%; bottom: 10px; @@ -111,13 +111,17 @@ img { color: #B5B2A1; } -.help a { +.help a, .shortcuts a { text-decoration: none; background-color: #B5B2A1; color: #080707; padding: 5px 10px 5px 10px; } +.shortcuts { + right: 70px; +} + #show_help { position: absolute; height: auto; @@ -129,18 +133,18 @@ img { display: none; } -#show_help ul { +#show_help ul, #show_shortcuts ul { list-style: none; margin-left: 0; padding: 0; } -#show_help ul li { +#show_help ul li, #show_shortcuts ul li { margin-bottom: 12px; color: #080707; } -#show_help ul .shortcut { +#show_help ul .shortcut, #show_shortcuts ul .shortcut { background-color: #080707; font-weight: bold; height: 15px; @@ -150,3 +154,29 @@ img { display: inline-block; color: #B5B2A1; } + +#show_shortcuts { + position: absolute; + height: 60%; + top: 20%; + width: 30%; + left: 35%; + background-color: #B5B2A1; + z-index: 999; + padding: 0 20px 0 20px; + overflow-y: scroll; + display: none; +} + +#show_shortcuts ul .shortcut { + min-width: 100px; + padding-bottom: 7px; +} + +#show_shortcuts ul li input { + height: 15px; + border: 0; + width: calc(100% - 130px); + padding: 5px 5px 5px 5px; + padding-top: 7px; +} diff --git a/main.js b/main.js @@ -27,10 +27,10 @@ function startTime() { var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); + h = checkTime(s); m = checkTime(m); s = checkTime(s); - document.getElementById('time').innerHTML = - h + ":" + m + ":" + s; + document.getElementById('time').innerHTML = h + ":" + m + ":" + s; var t = setTimeout(startTime, 500); } @@ -40,22 +40,22 @@ function checkTime(i) { } help_show = 0; -html = ""; +help_html = ""; function show_help() { if (help_show == 0) { - if (html === "") + if (help_html === "") { - html = "<ul>"; + help_html = "<ul>"; for (var key in bangs) { b = bangs[key]; - html += "<li><div class='shortcut'>"+ key + "</div> "+ b["help"] +"</li>"; + help_html += "<li><div class='shortcut'>"+ key + "</div> "+ b["help"] +"</li>"; } - html += "</ul>"; + help_html += "</ul>"; + document.getElementById("show_help").innerHTML = help_html; } - document.getElementById("show_help").innerHTML = html; document.getElementById("show_help").style.display = "block"; } else @@ -64,3 +64,28 @@ function show_help() { } help_show = help_show == 0 ? 1 : 0; } + +shortcuts_show = 0; +shortcuts_html = ""; + +function show_shortcuts() { + if (shortcuts_show == 0) + { + if (shortcuts_html === "") + { + shortcuts_html = "<ul>"; + for (var key in shortcuts) + { + shortcuts_html += "<li><div class='shortcut'>"+ key + "</div> <input type='text' value='"+ shortcuts[key] +"' readonly></li>"; + } + shortcuts_html += "</ul>"; + document.getElementById("show_shortcuts").innerHTML = shortcuts_html; + } + document.getElementById("show_shortcuts").style.display = "block"; + } + else + { + document.getElementById("show_shortcuts").style.display = "none"; + } + shortcuts_show = shortcuts_show == 0 ? 1 : 0; +}