CSS for player.php, make JS more modular

This commit is contained in:
ccd0 2013-11-10 01:56:45 -08:00
parent 81dbba64e2
commit 2a770f27d1
7 changed files with 47 additions and 29 deletions

View file

@ -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);