leftypol
/
leftypol
4
5
Fork 2
Code Issues 58 Pull Requests 1 Projects Releases Wiki Activity
Browse Source

CSS for player.php, make JS more modular

pull/40/head
ccd0 11 years ago
parent
81dbba64e2
commit
2a770f27d1
7 changed files with 47 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      README.md
  2. 14
      defaults.js
  3. 9
      expandvideo.js
  4. 3
      player.php
  5. 6
      playersettings.js
  6. 9
      playerstyle.css
  7. 34
      settings.js

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: Add these lines to inc/instance-config.php:
$config['allowed_ext_files'][] = 'webm'; $config['allowed_ext_files'][] = 'webm';
$config['additional_javascript'][] = 'cc/defaults.js';
$config['additional_javascript'][] = 'cc/settings.js'; $config['additional_javascript'][] = 'cc/settings.js';
$config['additional_javascript'][] = 'cc/expandvideo.js'; $config['additional_javascript'][] = 'cc/expandvideo.js';
require_once 'cc/posthandler.php'; require_once 'cc/posthandler.php';

14
defaults.js
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; thumb.onmouseout = unhover;
} }
window.onload = function() { if (window.addEventListener) window.addEventListener("load", function(e) {
settingsPanel.style.position = "absolute";
settingsPanel.style.top = "1em";
settingsPanel.style.right = "1em";
document.body.insertBefore(settingsPanel, document.body.firstChild);
var thumbs = document.querySelectorAll("a.file"); var thumbs = document.querySelectorAll("a.file");
for (var i = 0; i < thumbs.length; i++) { for (var i = 0; i < thumbs.length; i++) {
if (/\.webm$/.test(thumbs[i].pathname)) { if (/\.webm$/.test(thumbs[i].pathname)) {
@ -124,4 +119,4 @@ window.onload = function() {
} }
} }
} }
}; }, false);

3
player.php
View File

@ -3,7 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title><?php echo htmlspecialchars($_GET["t"]) ?></title> <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> <script src="playersettings.js"></script>
</head> </head>
<body> <body>

6
playersettings.js
View File

@ -1,7 +1,5 @@
window.onload = function() { if (window.addEventListener) window.addEventListener("load", function(e) {
settingsPanel.style.cssFloat = "right";
document.body.insertBefore(settingsPanel, document.body.firstChild);
var video = document.getElementsByTagName("video")[0]; var video = document.getElementsByTagName("video")[0];
video.muted = setting("videomuted"); video.muted = setting("videomuted");
video.play(); video.play();
}; }, false);

9
playerstyle.css
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"); // Create settings menu
settingsPanel.innerHTML = '<div style="text-align: right;">Settings</div><div style="display: none;">' var settingsMenu = document.createElement("div");
+ '<label><input type="checkbox" name="videoexpand" checked>Expand videos inline</label><br>' 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="videohover">Play videos on hover</label><br>'
+ '<label><input type="checkbox" name="videomuted">Start videos muted</label><br>' + '<label><input type="checkbox" name="videomuted">Start videos muted</label><br>'
+ '</div>'; + '</div>';
function refreshSettings() { function refreshSettings() {
var settingsItems = settingsPanel.getElementsByTagName("input"); var settingsItems = settingsMenu.getElementsByTagName("input");
for (var i = 0; i < settingsItems.length; i++) { for (var i = 0; i < settingsItems.length; i++) {
var box = settingsItems[i]; var box = settingsItems[i];
if (box.name in localStorage) { box.checked = setting(box.name);
box.checked = JSON.parse(localStorage[box.name]);
} else {
localStorage[box.name] = JSON.stringify(box.checked);
}
} }
} }
@ -24,23 +24,23 @@ function setupCheckbox(box) {
} }
refreshSettings(); refreshSettings();
var settingsItems = settingsPanel.getElementsByTagName("input"); var settingsItems = settingsMenu.getElementsByTagName("input");
for (var i = 0; i < settingsItems.length; i++) { for (var i = 0; i < settingsItems.length; i++) {
setupCheckbox(settingsItems[i]); setupCheckbox(settingsItems[i]);
} }
settingsPanel.onmouseover = function(e) { settingsMenu.onmouseover = function(e) {
refreshSettings(); refreshSettings();
var settingsSections = settingsPanel.getElementsByTagName("div"); var settingsSections = settingsMenu.getElementsByTagName("div");
settingsSections[0].style.fontWeight = "bold"; settingsSections[0].style.fontWeight = "bold";
settingsSections[1].style.display = "block"; settingsSections[1].style.display = "block";
}; };
settingsPanel.onmouseout = function(e) { settingsMenu.onmouseout = function(e) {
var settingsSections = settingsPanel.getElementsByTagName("div"); var settingsSections = settingsMenu.getElementsByTagName("div");
settingsSections[0].style.fontWeight = "normal"; settingsSections[0].style.fontWeight = "normal";
settingsSections[1].style.display = "none"; settingsSections[1].style.display = "none";
}; };
function setting(name) { if (window.addEventListener) window.addEventListener("load", function(e) {
return JSON.parse(localStorage[name]); document.body.insertBefore(settingsMenu, document.body.firstChild);
} }, false);

Write Preview
Loading…
Cancel
Save