kashire/lainchan
4
0
Fork 0
Code Issues 18 Pull Requests Releases Wiki Activity

CSS for player.php, make JS more modular

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

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

14
defaults.js Normal file
View File

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

9
expandvideo.js
View File

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

3
player.php
View File

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

6
playersettings.js
View File

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

9
playerstyle.css Normal file
View File

@ -0,0 +1,9 @@
body {
background: black;
color: white;
}
video {
display: block;
margin-left: auto;
margin-right: auto;
}

34
settings.js
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);