forked from leftypol/leftypol
CSS for player.php, make JS more modular
This commit is contained in:
parent
81dbba64e2
commit
2a770f27d1
7 changed files with 47 additions and 29 deletions
34
settings.js
34
settings.js
|
@ -1,19 +1,19 @@
|
|||
var settingsPanel = document.createElement("div");
|
||||
settingsPanel.innerHTML = '<div style="text-align: right;">Settings</div><div style="display: none;">'
|
||||
+ '<label><input type="checkbox" name="videoexpand" checked>Expand videos inline</label><br>'
|
||||
// Create settings menu
|
||||
var settingsMenu = document.createElement("div");
|
||||
settingsMenu.style.position = "absolute";
|
||||
settingsMenu.style.top = "1em";
|
||||
settingsMenu.style.right = "1em";
|
||||
settingsMenu.innerHTML = '<div style="text-align: right;">Settings</div><div style="display: none;">'
|
||||
+ '<label><input type="checkbox" name="videoexpand">Expand videos inline</label><br>'
|
||||
+ '<label><input type="checkbox" name="videohover">Play videos on hover</label><br>'
|
||||
+ '<label><input type="checkbox" name="videomuted">Start videos muted</label><br>'
|
||||
+ '</div>';
|
||||
|
||||
function refreshSettings() {
|
||||
var settingsItems = settingsPanel.getElementsByTagName("input");
|
||||
var settingsItems = settingsMenu.getElementsByTagName("input");
|
||||
for (var i = 0; i < settingsItems.length; i++) {
|
||||
var box = settingsItems[i];
|
||||
if (box.name in localStorage) {
|
||||
box.checked = JSON.parse(localStorage[box.name]);
|
||||
} else {
|
||||
localStorage[box.name] = JSON.stringify(box.checked);
|
||||
}
|
||||
box.checked = setting(box.name);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -24,23 +24,23 @@ function setupCheckbox(box) {
|
|||
}
|
||||
|
||||
refreshSettings();
|
||||
var settingsItems = settingsPanel.getElementsByTagName("input");
|
||||
var settingsItems = settingsMenu.getElementsByTagName("input");
|
||||
for (var i = 0; i < settingsItems.length; i++) {
|
||||
setupCheckbox(settingsItems[i]);
|
||||
}
|
||||
|
||||
settingsPanel.onmouseover = function(e) {
|
||||
settingsMenu.onmouseover = function(e) {
|
||||
refreshSettings();
|
||||
var settingsSections = settingsPanel.getElementsByTagName("div");
|
||||
var settingsSections = settingsMenu.getElementsByTagName("div");
|
||||
settingsSections[0].style.fontWeight = "bold";
|
||||
settingsSections[1].style.display = "block";
|
||||
};
|
||||
settingsPanel.onmouseout = function(e) {
|
||||
var settingsSections = settingsPanel.getElementsByTagName("div");
|
||||
settingsMenu.onmouseout = function(e) {
|
||||
var settingsSections = settingsMenu.getElementsByTagName("div");
|
||||
settingsSections[0].style.fontWeight = "normal";
|
||||
settingsSections[1].style.display = "none";
|
||||
};
|
||||
|
||||
function setting(name) {
|
||||
return JSON.parse(localStorage[name]);
|
||||
}
|
||||
if (window.addEventListener) window.addEventListener("load", function(e) {
|
||||
document.body.insertBefore(settingsMenu, document.body.firstChild);
|
||||
}, false);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue