From 2a770f27d1a35e8dc7914f9d230e541a93f38d9b Mon Sep 17 00:00:00 2001 From: ccd0 Date: Sun, 10 Nov 2013 01:56:45 -0800 Subject: [PATCH] CSS for player.php, make JS more modular --- README.md | 1 + defaults.js | 14 ++++++++++++++ expandvideo.js | 9 ++------- player.php | 3 ++- playersettings.js | 6 ++---- playerstyle.css | 9 +++++++++ settings.js | 34 +++++++++++++++++----------------- 7 files changed, 47 insertions(+), 29 deletions(-) create mode 100644 defaults.js create mode 100644 playerstyle.css diff --git a/README.md b/README.md index 53cba460..2039b318 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ Replace the files templates/post_thread.html and templates/post_reply.html with Add these lines to inc/instance-config.php: $config['allowed_ext_files'][] = 'webm'; + $config['additional_javascript'][] = 'cc/defaults.js'; $config['additional_javascript'][] = 'cc/settings.js'; $config['additional_javascript'][] = 'cc/expandvideo.js'; require_once 'cc/posthandler.php'; diff --git a/defaults.js b/defaults.js new file mode 100644 index 00000000..71dade12 --- /dev/null +++ b/defaults.js @@ -0,0 +1,14 @@ +// Scripts obtain settings by calling this function +function setting(name) { + return JSON.parse(localStorage[name]); +} + +// Default settings +function setDefault(name, value) { + if (!(name in localStorage)) { + localStorage[name] = JSON.stringify(value); + } +} +setDefault("videoexpand", true); +setDefault("videohover", false); +setDefault("videomuted", false); diff --git a/expandvideo.js b/expandvideo.js index 8d6124b3..26979bea 100644 --- a/expandvideo.js +++ b/expandvideo.js @@ -106,12 +106,7 @@ function setupVideo(thumb, url) { thumb.onmouseout = unhover; } -window.onload = function() { - settingsPanel.style.position = "absolute"; - settingsPanel.style.top = "1em"; - settingsPanel.style.right = "1em"; - document.body.insertBefore(settingsPanel, document.body.firstChild); - +if (window.addEventListener) window.addEventListener("load", function(e) { var thumbs = document.querySelectorAll("a.file"); for (var i = 0; i < thumbs.length; i++) { if (/\.webm$/.test(thumbs[i].pathname)) { @@ -124,4 +119,4 @@ window.onload = function() { } } } -}; +}, false); diff --git a/player.php b/player.php index ecfaf953..150a1087 100644 --- a/player.php +++ b/player.php @@ -3,7 +3,8 @@ <?php echo htmlspecialchars($_GET["t"]) ?> - + + diff --git a/playersettings.js b/playersettings.js index 6e503070..e6099ff4 100644 --- a/playersettings.js +++ b/playersettings.js @@ -1,7 +1,5 @@ -window.onload = function() { - settingsPanel.style.cssFloat = "right"; - document.body.insertBefore(settingsPanel, document.body.firstChild); +if (window.addEventListener) window.addEventListener("load", function(e) { var video = document.getElementsByTagName("video")[0]; video.muted = setting("videomuted"); video.play(); -}; +}, false); diff --git a/playerstyle.css b/playerstyle.css new file mode 100644 index 00000000..d2bba832 --- /dev/null +++ b/playerstyle.css @@ -0,0 +1,9 @@ +body { + background: black; + color: white; +} +video { + display: block; + margin-left: auto; + margin-right: auto; +} 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 = '
Settings
' - + '
' +// Create settings menu +var settingsMenu = document.createElement("div"); +settingsMenu.style.position = "absolute"; +settingsMenu.style.top = "1em"; +settingsMenu.style.right = "1em"; +settingsMenu.innerHTML = '
Settings
' + + '
' + '
' + '
' + '
'; 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);