CSS for player.php, make JS more modular

1 files changed, 17 insertions, 17 deletions

diff --git a/settings.js b/settings.js
index 9456247a..1a718da9 100644
--- a/settings.js
+++ b/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);