mirror of
https://github.com/manilarome/the-glorious-startpage.git
synced 2024-11-23 08:03:36 +01:00
add dock buttons
This commit is contained in:
Gerome Matilla
parent
12dbdbd79f
commit
66eaafead3
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
54
css/dock-buttons.css
Normal file
54
css/dock-buttons.css
Normal file
@ -0,0 +1,54 @@
|
||||
/*Web buttons*/
|
||||
|
||||
.buttonContainer {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
background: var(--base-container);
|
||||
border-radius: var(--rounded-radius);
|
||||
margin: 2px;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform .2s;
|
||||
}
|
||||
|
||||
.buttonContainer div {
|
||||
background-size: cover;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
|
||||
position:absolute;
|
||||
left:0; right:0;
|
||||
top:0; bottom:0;
|
||||
margin:auto;
|
||||
|
||||
max-width:100%;
|
||||
max-height:100%;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
.buttonContainer:hover {
|
||||
background: var(--base-hover-bg);
|
||||
|
||||
-ms-transform: scale(1.25);
|
||||
-webkit-transform: scale(1.25);
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
.buttonContainer:active {
|
||||
background: var(--base-active-bg);
|
||||
|
||||
-ms-transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
#buttonImage0 {
|
||||
background-image: url("../assets/buttons/launch.svg");
|
||||
}
|
||||
|
||||
#buttonImage9 {
|
||||
background-image: url("../assets/buttons/menu.svg");
|
||||
}
|
||||
@ -4,6 +4,7 @@
|
||||
@import url('top-panel.css');
|
||||
@import url('clock.css');
|
||||
@import url('dock.css');
|
||||
@import url('dock-buttons.css');
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
|
||||
<div class='dockContainer'>
|
||||
<div class='bar' id='dock'>
|
||||
<h4>gag</h4>
|
||||
<!-- Javascript will generate a list here -->
|
||||
</div>
|
||||
</div>
|
||||
@ -50,5 +49,7 @@
|
||||
|
||||
<script src="js/body-background-set.js"></script>
|
||||
<script src="js/clock.js"></script>
|
||||
<script src="js/sites-list.js"></script>
|
||||
<script src="js/dock-buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
91
js/dock-buttons.js
Normal file
91
js/dock-buttons.js
Normal file
@ -0,0 +1,91 @@
|
||||
var dock = document.getElementById('dock');
|
||||
|
||||
// Create mouse event for passed div
|
||||
const addMouseUpEvent = (li, url) => {
|
||||
li.onmouseup = () => {
|
||||
window.location.href = encodeURI(url);
|
||||
}
|
||||
}
|
||||
|
||||
// Generate button from user
|
||||
const generateFromManual = (id, icon, callback) => {
|
||||
|
||||
var customButtonCallback;
|
||||
|
||||
var buttonContainer = document.createElement('div');
|
||||
buttonContainer.id = 'button' + id;
|
||||
buttonContainer.className = 'buttonContainer';
|
||||
|
||||
buttonContainer.onmouseup = callback;
|
||||
|
||||
var buttonImage = document.createElement('div');
|
||||
buttonImage.id = 'buttonImage' + id;
|
||||
buttonImage.className = 'bottomButton';
|
||||
buttonImage.style.background = "url('assets/buttons/" + icon + ".svg')";
|
||||
buttonImage.style.backgroundSize = 'cover';
|
||||
|
||||
buttonContainer.appendChild(buttonImage);
|
||||
dock.appendChild(buttonContainer);
|
||||
}
|
||||
|
||||
// Create callback event for onmouse up
|
||||
const addCallbackEvent = (element, callback) => {
|
||||
element.onmouseup = callback;
|
||||
}
|
||||
|
||||
// Generate buttons from array
|
||||
const generateFromList = () => {
|
||||
|
||||
// Create launcher button
|
||||
generateFromManual(
|
||||
'Launch',
|
||||
'launch',
|
||||
() => {
|
||||
// Toggle site pad
|
||||
}
|
||||
);
|
||||
|
||||
for (i = 0; i < (dockSites.length); i++) {
|
||||
|
||||
var site = dockSites[i].site;
|
||||
var icon = dockSites[i].icon;
|
||||
var url = dockSites[i].url;
|
||||
|
||||
var buttonContainer = document.createElement('div');
|
||||
buttonContainer.id = 'button' + i;
|
||||
buttonContainer.className = 'buttonContainer';
|
||||
addMouseUpEvent(buttonContainer, url);
|
||||
|
||||
var buttonImage = document.createElement('div');
|
||||
buttonImage.id = 'buttonImage' + i;
|
||||
buttonImage.className = 'bottomButton';
|
||||
buttonImage.style.background = "url('assets/webcons/" + icon + ".svg')";
|
||||
buttonImage.style.backgroundSize = 'cover';
|
||||
|
||||
// Append divs
|
||||
buttonContainer.appendChild(buttonImage);
|
||||
dock.appendChild(buttonContainer);
|
||||
};
|
||||
|
||||
// Create weather button
|
||||
generateFromManual(
|
||||
'Weather',
|
||||
'weather',
|
||||
() => {
|
||||
weatherToggle();
|
||||
}
|
||||
);
|
||||
|
||||
// Create menu button
|
||||
generateFromManual(
|
||||
'Dashboard',
|
||||
'dashboard',
|
||||
() => {
|
||||
|
||||
// Toggle dashboard
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
window.onload = generateFromList();
|
||||
|
||||
286
js/sites-list.js
Normal file
286
js/sites-list.js
Normal file
@ -0,0 +1,286 @@
|
||||
// You can easily add data here and it will be auto generated
|
||||
|
||||
// Web menu
|
||||
// A list of websites that will be generated and put on the web menu
|
||||
let webSites = [
|
||||
{
|
||||
site: 'Reddit',
|
||||
icon: 'reddit',
|
||||
url: 'https://reddit.com/',
|
||||
category: 'social'
|
||||
},
|
||||
{
|
||||
site: 'Github',
|
||||
icon: 'github',
|
||||
url: 'https://github.com/',
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
site: 'Facebook',
|
||||
icon: 'facebook',
|
||||
url: 'https://facebook.com/',
|
||||
category: 'social'
|
||||
},
|
||||
{
|
||||
site: 'Gmail',
|
||||
icon: 'gmail',
|
||||
url: 'https://mail.google.com/',
|
||||
category: 'social'
|
||||
},
|
||||
{
|
||||
site: 'Youtube',
|
||||
icon: 'youtube',
|
||||
url: 'https://youtube.com/',
|
||||
category: 'media'
|
||||
},
|
||||
{
|
||||
site: 'GDrive',
|
||||
icon: 'gdrive',
|
||||
url: 'https://drive.google.com/',
|
||||
category: 'storage'
|
||||
},
|
||||
{
|
||||
site: 'Twitter',
|
||||
icon: 'twitter',
|
||||
url: 'https://twitter.com/',
|
||||
category: 'social'
|
||||
},
|
||||
{
|
||||
site: 'Instagram',
|
||||
icon: 'instagram',
|
||||
url: 'https://instagram.com/',
|
||||
category: 'social'
|
||||
},
|
||||
{
|
||||
site: 'Bitbucket',
|
||||
icon: 'bitbucket',
|
||||
url: 'https://bitbucket.org/',
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
site: 'Gitlab',
|
||||
icon: 'gitlab',
|
||||
url: 'https://gitlab.com/',
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
site: 'Deviantart',
|
||||
icon: 'deviantart',
|
||||
url: 'https://deviantart.com/',
|
||||
category: 'design'
|
||||
},
|
||||
{
|
||||
site: 'Duckduckgo',
|
||||
icon: 'duckduckgo',
|
||||
url: 'https://duckduckgo.com/',
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
site: 'Ecosia',
|
||||
icon: 'ecosia',
|
||||
url: 'https://ecosia.org/',
|
||||
category: 'search engine'
|
||||
},
|
||||
{
|
||||
site: 'Google',
|
||||
icon: 'google',
|
||||
url: 'https://google.com/',
|
||||
category: 'search engine'
|
||||
},
|
||||
{
|
||||
site: 'Wikipedia',
|
||||
icon: 'wikipedia',
|
||||
url: 'https://wikipedia.org/',
|
||||
category: 'information'
|
||||
},
|
||||
{
|
||||
site: 'Unsplash',
|
||||
icon: 'unsplash',
|
||||
url: 'https://unsplash.com/',
|
||||
category: 'design'
|
||||
},
|
||||
{
|
||||
site: 'Twitch',
|
||||
icon: 'twitch',
|
||||
url: 'https://twitch.tv/',
|
||||
category: 'media'
|
||||
},
|
||||
{
|
||||
site: 'Yahoo',
|
||||
icon: 'yahoo',
|
||||
url: 'https://mail.yahoo.com/',
|
||||
category: 'social'
|
||||
},
|
||||
{
|
||||
site: 'Pornhub',
|
||||
icon: 'pornhub',
|
||||
url: 'https://pornhub.com/',
|
||||
category: 'media'
|
||||
},
|
||||
{
|
||||
site: 'Material.io',
|
||||
icon: 'materialio',
|
||||
url: 'https://material.io/',
|
||||
category: 'design'
|
||||
},
|
||||
{
|
||||
site: 'Netflix',
|
||||
icon: 'netflix',
|
||||
url: 'https://netflix.com/',
|
||||
category: 'media'
|
||||
},
|
||||
{
|
||||
site: 'Office 365',
|
||||
icon: 'office365',
|
||||
url: 'https://office.com/',
|
||||
category: 'information'
|
||||
},
|
||||
{
|
||||
site: '4chan',
|
||||
icon: '4chan',
|
||||
url: 'https://4chan.org/',
|
||||
category: 'social'
|
||||
},
|
||||
{
|
||||
site: 'Discord',
|
||||
icon: 'discord',
|
||||
url: 'https://discord.com/',
|
||||
category: 'social'
|
||||
},
|
||||
{
|
||||
site: 'Spotify',
|
||||
icon: 'spotify',
|
||||
url: 'https://spotify.com/',
|
||||
category: 'media'
|
||||
},
|
||||
{
|
||||
site: 'Ebay',
|
||||
icon: 'ebay',
|
||||
url: 'https://ebay.com/',
|
||||
category: 'shopping'
|
||||
},
|
||||
{
|
||||
site: 'JSFiddle',
|
||||
icon: 'jsfiddle',
|
||||
url: 'https://jsfiddle.net/',
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
site: 'ArchWiki',
|
||||
icon: 'archwiki',
|
||||
url: 'https://wiki.archlinux.org/',
|
||||
category: 'information'
|
||||
},
|
||||
{
|
||||
site: 'Figma',
|
||||
icon: 'figma',
|
||||
url: 'https://figma.com/',
|
||||
category: 'design'
|
||||
},
|
||||
{
|
||||
site: 'Stackoverflow',
|
||||
icon: 'stackoverflow',
|
||||
url: 'https://stackoverflow.com/',
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
site: 'Stackexchange',
|
||||
icon: 'stackexchange',
|
||||
url: 'https://stackexchange.com/',
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
site: 'Superuser',
|
||||
icon: 'superuser',
|
||||
url: 'https://superuser.com/',
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
site: 'Calendar',
|
||||
icon: 'calendar',
|
||||
url: 'https://calendar.google.com/',
|
||||
category: 'social'
|
||||
},
|
||||
{
|
||||
site: 'Messenger',
|
||||
icon: 'messenger',
|
||||
url: 'https://messenger.com/',
|
||||
category: 'social'
|
||||
},
|
||||
{
|
||||
site: 'Icons8',
|
||||
icon: 'icons8',
|
||||
url: 'https://icons8.com/',
|
||||
category: 'design'
|
||||
},
|
||||
{
|
||||
site: 'Markdown Cheatsheet',
|
||||
icon: 'markdown',
|
||||
url: 'https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet/',
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
site: 'Interneting is Hard',
|
||||
icon: 'interneting-is-hard',
|
||||
url: 'https://internetingishard.com/',
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
site: 'Keycode',
|
||||
icon: 'keycode',
|
||||
url: 'https://keycode.info/',
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
site: 'Soundcloud',
|
||||
icon: 'soundcloud',
|
||||
url: 'https://soundcloud.com/',
|
||||
category: 'media'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// Dock
|
||||
// A list of websites that will be generated and put on the dock
|
||||
let dockSites = [
|
||||
{
|
||||
site: 'Reddit',
|
||||
icon: 'reddit',
|
||||
url: 'https://reddit.com/'
|
||||
},
|
||||
{
|
||||
site: 'Github',
|
||||
icon: 'github',
|
||||
url: 'https://github.com/'
|
||||
},
|
||||
{
|
||||
site: 'Facebook',
|
||||
icon: 'facebook',
|
||||
url: 'https://facebook.com/'
|
||||
},
|
||||
{
|
||||
site: 'Gmail',
|
||||
icon: 'gmail',
|
||||
url: 'https://mail.google.com/'
|
||||
},
|
||||
{
|
||||
site: 'Youtube',
|
||||
icon: 'youtube',
|
||||
url: 'https://youtube.com/'
|
||||
},
|
||||
{
|
||||
site: 'GDrive',
|
||||
icon: 'gdrive',
|
||||
url: 'https://drive.google.com/'
|
||||
},
|
||||
{
|
||||
site: 'Twitter',
|
||||
icon: 'twitter',
|
||||
url: 'https://twitter.com/'
|
||||
},
|
||||
{
|
||||
site: 'Material.io',
|
||||
icon: 'materialio',
|
||||
url: 'https://material.io/'
|
||||
}
|
||||
];
|
||||
Loading…
Reference in New Issue
Block a user