mirror of
https://github.com/manilarome/the-glorious-startpage.git
synced 2024-12-13 09:40:43 +01:00
126 lines
3.2 KiB
JavaScript
126 lines
3.2 KiB
JavaScript
class DockButtons {
|
|
|
|
constructor() {
|
|
this._dock = document.querySelector('#dock');
|
|
|
|
// Retrieve dockSites object from Config instance
|
|
this.dockSites = config.getDockSites();
|
|
|
|
// Populate dock
|
|
this._populateDock();
|
|
}
|
|
|
|
_buildDockButton = (id, className, callback = null) => {
|
|
|
|
const dockButton = document.createElement('div');
|
|
dockButton.id = `button${id}`;
|
|
dockButton.className = 'dockButton';
|
|
dockButton.onmouseup = callback;
|
|
|
|
return dockButton;
|
|
}
|
|
|
|
_buildDockButtonImage = (id, className, background) => {
|
|
|
|
const buttonImage = document.createElement('div');
|
|
buttonImage.id = id;
|
|
buttonImage.className = className;
|
|
buttonImage.style.background = background;
|
|
buttonImage.style.backgroundSize = 'cover';
|
|
|
|
return buttonImage;
|
|
}
|
|
|
|
_generateFromManual = (id, icon, callback) => {
|
|
|
|
const dockButton = this._buildDockButton(
|
|
`button${id}`,
|
|
'dockButton',
|
|
callback
|
|
);
|
|
|
|
const buttonImage = this._buildDockButtonImage(
|
|
`buttonImage${id}`,
|
|
'dockButtonImage',
|
|
`url('assets/buttons/${icon}.svg')`
|
|
);
|
|
|
|
dockButton.appendChild(buttonImage);
|
|
|
|
this._dock.appendChild(dockButton);
|
|
}
|
|
|
|
_generateFromList = () => {
|
|
|
|
for (let i = 0; i < (this.dockSites.length); i++) {
|
|
|
|
const site = this.dockSites[i].site;
|
|
const icon = this.dockSites[i].icon;
|
|
const url = this.dockSites[i].url;
|
|
|
|
// Create a href
|
|
const aDock = document.createElement('a');
|
|
aDock.className = 'dockLink';
|
|
aDock.href = url;
|
|
aDock.tabIndex = '-1';
|
|
|
|
// Create div container
|
|
const dockButton = this._buildDockButton(
|
|
site,
|
|
'dockButton'
|
|
);
|
|
|
|
// Create div container for button icon
|
|
const buttonImage = this._buildDockButtonImage(
|
|
`buttonImage${i}`,
|
|
'dockButtonImage',
|
|
`url('assets/webcons/${icon}.svg')`
|
|
);
|
|
|
|
// Append divs
|
|
dockButton.appendChild(buttonImage);
|
|
aDock.appendChild(dockButton);
|
|
|
|
this._dock.appendChild(aDock);
|
|
};
|
|
}
|
|
|
|
_populateDock = () => {
|
|
|
|
// Create launcher button
|
|
this._generateFromManual(
|
|
'Launch',
|
|
'launch',
|
|
() => {
|
|
// Toggle web menu
|
|
webMenu.toggleWebMenu();
|
|
}
|
|
);
|
|
|
|
// Create dock buttons fetched from sites-list.js
|
|
this._generateFromList();
|
|
|
|
// Create weather button
|
|
this._generateFromManual(
|
|
'Weather',
|
|
'weather',
|
|
() => {
|
|
// Toggle weather screen
|
|
weatherScreen.toggleWeatherScreen();
|
|
}
|
|
);
|
|
|
|
// Create menu button
|
|
this._generateFromManual(
|
|
'Dashboard',
|
|
'dashboard',
|
|
() => {
|
|
// Toggle dashboard
|
|
dashboard.toggleDashboard();
|
|
}
|
|
);
|
|
|
|
}
|
|
}
|
|
|