CSS for player.php, make JS more modular

10 년 전 · 2a770f27d1
--- 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';
--- a/defaults.js
+++ 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);
--- 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);
--- a/player.php
+++ b/player.php
@@ -3,7 +3,8 @@
 <head>
    <meta charset="utf-8">
    <title><?php echo htmlspecialchars($_GET["t"]) ?></title>
    <script src="settings.js"></script>
    <link rel="stylesheet" href="playerstyle.css">
    <script src="defaults.js"></script>
    <script src="playersettings.js"></script>
 </head>
 <body>
--- 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);
--- a/playerstyle.css
+++ b/playerstyle.css
@@ -0,0 +1,9 @@
 body {
    background: black;
    color: white;
 }
 video {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }
--- 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);