code separation, updater, simple docs
This commit is contained in:
синечка ♡
parent
33778e3234
commit
831cbcfa5d
10 changed files with 147 additions and 91 deletions
|
|
@ -1,9 +1,4 @@
|
||||||
 <br>
|
 <br>
|
||||||
|
|
||||||
# How to install
|
# Install
|
||||||
1. Install [`this`](https://fonts.google.com/share?selection.family=Fira+Code:wght@300..700|Nunito:ital,wght@0,200..1000;1,200..1000|Playfair+Display:ital,wght@0,400..900;1,400..900) fonts
|
[`Chrome-based browser`](./docs/INSTALL_CHROME.md) [`Firefox-based browser`](./docs/INSTALL_FIREFOX.md)
|
||||||
2. Clone repository
|
|
||||||
3. Go to `chrome://extensions`
|
|
||||||
4. Enable `Developer mode`
|
|
||||||
5. Click `Load unpacked` > select repo's folder
|
|
||||||
6. Enjoy your new tab/home page
|
|
||||||
|
|
|
||||||
10
docs/INSTALL_CHROME.md
Normal file
10
docs/INSTALL_CHROME.md
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
[← Back](../)
|
||||||
|
|
||||||
|
# Install to Chrome-based browser
|
||||||
|
1. Install [`this`](https://fonts.google.com/share?selection.family=Fira+Code:wght@300..700|Nunito:ital,wght@0,200..1000;1,200..1000|Playfair+Display:ital,wght@0,400..900;1,400..900) fonts
|
||||||
|
2. Download [`this`](https://github.com/ktnk-dev/LittleHome/archive/refs/heads/main.zip) archive
|
||||||
|
3. Extract it somewhere
|
||||||
|
4. Go to `chrome://extensions`
|
||||||
|
5. Enable `Developer mode`
|
||||||
|
6. Click `Load unpacked` > select your exctracted folder (should me `LittleHome-main`)
|
||||||
|
7. Enjoy your new tab/home page
|
||||||
9
docs/INSTALL_FIREFOX.md
Normal file
9
docs/INSTALL_FIREFOX.md
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
[← Back](../)
|
||||||
|
|
||||||
|
# Install to Firefox-based browser
|
||||||
|
1. Install [`this`](https://fonts.google.com/share?selection.family=Fira+Code:wght@300..700|Nunito:ital,wght@0,200..1000;1,200..1000|Playfair+Display:ital,wght@0,400..900;1,400..900) fonts
|
||||||
|
2. Download [`this`](https://github.com/ktnk-dev/LittleHome/archive/refs/heads/main.zip) archive
|
||||||
|
3. Go to `about:debugging`
|
||||||
|
4. Select `This Firefox`
|
||||||
|
5. Click `Load Temporary Add-on...` > select downloaded ZIP archive (should me `LittleHome-main.zip`)
|
||||||
|
6. Enjoy your new tab/home page
|
||||||
|
|
@ -22,10 +22,6 @@
|
||||||
"<all_urls>"
|
"<all_urls>"
|
||||||
],
|
],
|
||||||
"js": [
|
"js": [
|
||||||
"src/js/abstract.js",
|
|
||||||
"src/js/storage.js",
|
|
||||||
"src/js/bang.js",
|
|
||||||
"src/js/main.js"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
24
src/css/update.css
Normal file
24
src/css/update.css
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
#update {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: 'Nunito';
|
||||||
|
background: rgba(255,255,255,.1);
|
||||||
|
border-radius: 100px;
|
||||||
|
margin: 10px;
|
||||||
|
display: flex;
|
||||||
|
z-index: 20;
|
||||||
|
transition: transform .5s;
|
||||||
|
} #update > * {
|
||||||
|
padding: 5px 10px;
|
||||||
|
} #update > a {
|
||||||
|
text-decoration: none;
|
||||||
|
background: rgba(255,255,255,.1);
|
||||||
|
border-radius: 100px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#update.hidden {
|
||||||
|
transform: translateY(40px);
|
||||||
|
}
|
||||||
|
|
@ -5,10 +5,10 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Home</title>
|
<title>Home</title>
|
||||||
<link rel="shortcut icon" href="icon.svg" type="image/x-icon">
|
<link rel="shortcut icon" href="icon.svg" type="image/x-icon">
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/global.css">
|
<link rel="stylesheet" href="css/global.css">
|
||||||
<link rel="stylesheet" href="css/clock.css">
|
<link rel="stylesheet" href="css/clock.css">
|
||||||
<link rel="stylesheet" href="css/search.css">
|
<link rel="stylesheet" href="css/search.css">
|
||||||
|
<link rel="stylesheet" href="css/update.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="background"></div>
|
<div id="background"></div>
|
||||||
|
|
@ -17,10 +17,12 @@
|
||||||
<p>Search via Google</p>
|
<p>Search via Google</p>
|
||||||
</div>
|
</div>
|
||||||
<input type="text" id="search_ddd" autocorrect="off" autocomplete="off" autofocus>
|
<input type="text" id="search_ddd" autocorrect="off" autocomplete="off" autofocus>
|
||||||
|
<div id="update" class="hidden"><span>update available</span> <a href="https://github.com/ktnk-dev/LittleHome">download</a></div>
|
||||||
<script src="js/abstract.js"></script>
|
<script src="js/abstract.js"></script>
|
||||||
<script src="js/storage.js"></script>
|
<script src="js/storage.js"></script>
|
||||||
<script src="js/bang.js"></script>
|
<script src="js/bang.js"></script>
|
||||||
|
<script src="js/builtin.js"></script>
|
||||||
|
<script src="js/update.js"></script>
|
||||||
<script src="js/main.js"></script>
|
<script src="js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
75
src/js/builtin.js
Normal file
75
src/js/builtin.js
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
const clock = async () => {
|
||||||
|
const render = async () => {
|
||||||
|
const baseOffset = 109.12
|
||||||
|
const tsp = number => (number < 10 ? `0${number}` : `${number}`).split('').map(e => parseInt(e)*baseOffset)
|
||||||
|
const time = new Date()
|
||||||
|
var ft = [tsp(time.getHours()), tsp(time.getMinutes()), tsp(time.getSeconds())].flat()
|
||||||
|
var fe = [
|
||||||
|
document.querySelectorAll('.digit.h')[0],
|
||||||
|
document.querySelectorAll('.digit.h')[1],
|
||||||
|
document.querySelectorAll('.digit.m')[0],
|
||||||
|
document.querySelectorAll('.digit.m')[1],
|
||||||
|
document.querySelectorAll('.digit.s')[0],
|
||||||
|
document.querySelectorAll('.digit.s')[1]
|
||||||
|
]
|
||||||
|
var _ = [...Array(6).keys()].map(i => {
|
||||||
|
const value = ft[i]
|
||||||
|
const element = fe[i]
|
||||||
|
element.style = `transform: translateY(-${value}px)`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector('body').appendChild(
|
||||||
|
$.div(
|
||||||
|
{id: 'clock'},
|
||||||
|
$.div({class: 'digit h'}, [...Array(3).keys()].map(_ => $.span(_.toString()))),
|
||||||
|
$.div({class: 'digit h'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))),
|
||||||
|
$.div({class: 'digit l'}, $.span(':')),
|
||||||
|
$.div({class: 'digit m'}, [...Array(7).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))),
|
||||||
|
$.div({class: 'digit m'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))),
|
||||||
|
$.div({class: 'digit l'}, $.span(':')),
|
||||||
|
$.div({class: 'digit s'}, [...Array(7).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))),
|
||||||
|
$.div({class: 'digit s'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))),
|
||||||
|
)
|
||||||
|
)
|
||||||
|
render()
|
||||||
|
setInterval(() => render(), 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
searcher = () => {
|
||||||
|
const findbang = query => {
|
||||||
|
if (query.indexOf('!') == -1) return {found: false, valid: false}
|
||||||
|
const inputed = query.split('!')[1]
|
||||||
|
for (const bang of bangs) {
|
||||||
|
if (bang.t == inputed) return {found: true, valid: true, inputed: inputed, data: bang}
|
||||||
|
}
|
||||||
|
return {found: true, valid: false, inputed: inputed}
|
||||||
|
|
||||||
|
}
|
||||||
|
var lastquery = ''
|
||||||
|
const proceed = query => {
|
||||||
|
if (query == lastquery) return
|
||||||
|
lastquery = query
|
||||||
|
document.querySelector('#clock').style.opacity = query == '' ? 1 : 0
|
||||||
|
document.querySelector('#searcher').style.opacity = query == '' ? 0 : 1
|
||||||
|
const fb = findbang(query)
|
||||||
|
if (fb.found) query = query.replace('!'+fb.inputed, `<span class="${fb.valid? '' : 'error'}">!${fb.inputed}</span>`)
|
||||||
|
console.log(query)
|
||||||
|
document.querySelector('#searcher > h1').innerHTML = query
|
||||||
|
document.querySelector('#searcher > p').innerHTML = `Search via ${fb.valid? fb.data.s : 'Google'}`
|
||||||
|
|
||||||
|
}
|
||||||
|
const find = element => {
|
||||||
|
const query = element.target.value.trim()
|
||||||
|
const fb = findbang(query)
|
||||||
|
const url = fb.valid ? fb.data.u : 'https://www.google.com/search?q={{{s}}}'
|
||||||
|
window.location.href = url.replace('{{{s}}}', encodeURI(fb.found ? query.replace('!'+fb.inputed, '').trim() : query.trim()))
|
||||||
|
}
|
||||||
|
document.querySelector('#search_ddd').addEventListener('change', find)
|
||||||
|
document.querySelector('#search_ddd').addEventListener('input', (e) => {proceed(e.target.value.trim())})
|
||||||
|
setInterval(() => {
|
||||||
|
document.querySelector('#search_ddd').focus()
|
||||||
|
proceed(document.querySelector('#search_ddd').value.trim())
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
@ -1,79 +1,3 @@
|
||||||
const clock = async () => {
|
|
||||||
const render = async () => {
|
|
||||||
const baseOffset = 109.12
|
|
||||||
const tsp = number => (number < 10 ? `0${number}` : `${number}`).split('').map(e => parseInt(e)*baseOffset)
|
|
||||||
const time = new Date()
|
|
||||||
var ft = [tsp(time.getHours()), tsp(time.getMinutes()), tsp(time.getSeconds())].flat()
|
|
||||||
var fe = [
|
|
||||||
document.querySelectorAll('.digit.h')[0],
|
|
||||||
document.querySelectorAll('.digit.h')[1],
|
|
||||||
document.querySelectorAll('.digit.m')[0],
|
|
||||||
document.querySelectorAll('.digit.m')[1],
|
|
||||||
document.querySelectorAll('.digit.s')[0],
|
|
||||||
document.querySelectorAll('.digit.s')[1]
|
|
||||||
]
|
|
||||||
var _ = [...Array(6).keys()].map(i => {
|
|
||||||
const value = ft[i]
|
|
||||||
const element = fe[i]
|
|
||||||
element.style = `transform: translateY(-${value}px)`
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
document.querySelector('body').appendChild(
|
|
||||||
$.div(
|
|
||||||
{id: 'clock'},
|
|
||||||
$.div({class: 'digit h'}, [...Array(3).keys()].map(_ => $.span(_.toString()))),
|
|
||||||
$.div({class: 'digit h'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))),
|
|
||||||
$.div({class: 'digit l'}, $.span(':')),
|
|
||||||
$.div({class: 'digit m'}, [...Array(7).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))),
|
|
||||||
$.div({class: 'digit m'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))),
|
|
||||||
$.div({class: 'digit l'}, $.span(':')),
|
|
||||||
$.div({class: 'digit s'}, [...Array(7).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))),
|
|
||||||
$.div({class: 'digit s'}, [...Array(11).keys()].map(_ => $.span(_ < 10 ? _.toString() : '0'))),
|
|
||||||
)
|
|
||||||
)
|
|
||||||
render()
|
|
||||||
setInterval(() => render(), 500);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
searcher = () => {
|
|
||||||
const findbang = query => {
|
|
||||||
if (query.indexOf('!') == -1) return {found: false, valid: false}
|
|
||||||
const inputed = query.split('!')[1]
|
|
||||||
for (const bang of bangs) {
|
|
||||||
if (bang.t == inputed) return {found: true, valid: true, inputed: inputed, data: bang}
|
|
||||||
}
|
|
||||||
return {found: true, valid: false, inputed: inputed}
|
|
||||||
|
|
||||||
}
|
|
||||||
var lastquery = ''
|
|
||||||
const proceed = query => {
|
|
||||||
if (query == lastquery) return
|
|
||||||
lastquery = query
|
|
||||||
document.querySelector('#clock').style.opacity = query == '' ? 1 : 0
|
|
||||||
document.querySelector('#searcher').style.opacity = query == '' ? 0 : 1
|
|
||||||
const fb = findbang(query)
|
|
||||||
if (fb.found) query = query.replace('!'+fb.inputed, `<span class="${fb.valid? '' : 'error'}">!${fb.inputed}</span>`)
|
|
||||||
console.log(query)
|
|
||||||
document.querySelector('#searcher > h1').innerHTML = query
|
|
||||||
document.querySelector('#searcher > p').innerHTML = `Search via ${fb.valid? fb.data.s : 'Google'}`
|
|
||||||
|
|
||||||
}
|
|
||||||
const find = element => {
|
|
||||||
const query = element.target.value.trim()
|
|
||||||
const fb = findbang(query)
|
|
||||||
const url = fb.valid ? fb.data.u : 'https://www.google.com/search?q={{{s}}}'
|
|
||||||
window.location.href = url.replace('{{{s}}}', encodeURI(fb.found ? query.replace('!'+fb.inputed, '').trim() : query.trim()))
|
|
||||||
}
|
|
||||||
document.querySelector('#search_ddd').addEventListener('change', find)
|
|
||||||
document.querySelector('#search_ddd').addEventListener('input', (e) => {proceed(e.target.value.trim())})
|
|
||||||
setInterval(() => {
|
|
||||||
document.querySelector('#search_ddd').focus()
|
|
||||||
proceed(document.querySelector('#search_ddd').value.trim())
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', async () => {
|
window.addEventListener('DOMContentLoaded', async () => {
|
||||||
clock()
|
clock()
|
||||||
searcher()
|
searcher()
|
||||||
|
|
|
||||||
|
|
@ -25,9 +25,9 @@ const CookieManager = {
|
||||||
|
|
||||||
function getFromStorage(variable_name) {
|
function getFromStorage(variable_name) {
|
||||||
const c = CookieManager.get(variable_name)
|
const c = CookieManager.get(variable_name)
|
||||||
return c === '' ? null : c
|
return c === '' ? null : JSON.parse(c).data
|
||||||
}
|
}
|
||||||
|
|
||||||
function setToStorage(variable_name, value) {
|
function setToStorage(variable_name, value) {
|
||||||
CookieManager.set(variable_name, value)
|
CookieManager.set(variable_name, JSON.stringify({data: value}))
|
||||||
}
|
}
|
||||||
21
src/js/update.js
Normal file
21
src/js/update.js
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
check_update = async () => {
|
||||||
|
if (!getFromStorage('update')) setToStorage('update', {
|
||||||
|
required_update: false,
|
||||||
|
installed: '-1',
|
||||||
|
remote: '-1',
|
||||||
|
last: 0
|
||||||
|
})
|
||||||
|
const stored = getFromStorage('update')
|
||||||
|
const installed = await fetch('/.git/ORIG_HEAD').then(e => e.text())
|
||||||
|
if (installed != stored.installed) {
|
||||||
|
stored.installed = installed
|
||||||
|
stored.required_update = false
|
||||||
|
}
|
||||||
|
if (((new Date() - stored.last) > 1000*60 *60 *5) && (stored.remote == stored.installed || stored.remote == '-1') ) {
|
||||||
|
const remote = (await fetch('https://api.github.com/repos/ktnk-dev/LittleHome/commits').then(e => e.json()))[0].sha + '\n'
|
||||||
|
stored.remote = remote
|
||||||
|
stored.last = (new Date() - 0)
|
||||||
|
}
|
||||||
|
setToStorage('update', stored)
|
||||||
|
if (stored.remote != stored.installed) document.querySelector('#update').classList = ''
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue