Cool_Tools/vichan
1
0
Fork 0
mirror of https://github.com/vichan-devel/vichan.git synced 2024-12-01 02:27:24 +01:00
Code Releases Wiki Activity

Updating expand-video.js

Browse Source
This commit is contained in:
anonish 2015-02-08 21:36:33 -06:00
parent e115bff930
commit 78cc03c204
2 changed files with 145 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
inc/template.php
View File

@ -22,7 +22,8 @@ function load_twig() {
$loader = new Twig_Loader_Filesystem($config['dir']['template']); $loader = new Twig_Loader_Filesystem($config['dir']['template']);
$loader->setPaths($config['dir']['template']); $loader->setPaths($config['dir']['template']);
$twig = new Twig_Environment($loader, array( $twig = new Twig_Environment($loader, array(
'autoescape' => false, 'autoescape' => false,
'auto_reload' => true,
'cache' => is_writable('templates') || (is_dir('templates/cache') && is_writable('templates/cache')) ? 'cache' => is_writable('templates') || (is_dir('templates/cache') && is_writable('templates/cache')) ?
"{$config['dir']['template']}/cache" : false, "{$config['dir']['template']}/cache" : false,
'debug' => $config['debug'] 'debug' => $config['debug']

171
js/expand-video.js
View File

@ -21,6 +21,7 @@ function setupVideo(thumb, url) {
function unexpand() { function unexpand() {
if (expanded) { if (expanded) {
expanded = false; expanded = false;
hovering = false;
if (video.pause) video.pause(); if (video.pause) video.pause();
videoContainer.style.display = "none"; videoContainer.style.display = "none";
thumb.style.display = "inline"; thumb.style.display = "inline";
@ -34,8 +35,7 @@ function setupVideo(thumb, url) {
hovering = false; hovering = false;
if (video.pause) video.pause(); if (video.pause) video.pause();
videoContainer.style.display = "none"; videoContainer.style.display = "none";
video.style.maxWidth = "inherit"; video.style.display = "none";
video.style.maxHeight = "inherit";
} }
} }
@ -56,6 +56,7 @@ function setupVideo(thumb, url) {
videoHide.addEventListener("click", unexpand, false); videoHide.addEventListener("click", unexpand, false);
videoContainer = document.createElement("div"); videoContainer = document.createElement("div");
videoContainer.id = "#expandedVideo";
videoContainer.style.paddingLeft = "15px"; videoContainer.style.paddingLeft = "15px";
videoContainer.style.display = "none"; videoContainer.style.display = "none";
videoContainer.appendChild(videoHide); videoContainer.appendChild(videoHide);
@ -113,6 +114,7 @@ function setupVideo(thumb, url) {
function expand2() { function expand2() {
video.style.maxWidth = "100%"; video.style.maxWidth = "100%";
video.style.maxHeight = window.innerHeight + "px"; video.style.maxHeight = window.innerHeight + "px";
var bottom = video.getBoundingClientRect().bottom; var bottom = video.getBoundingClientRect().bottom;
if (bottom > window.innerHeight) { if (bottom > window.innerHeight) {
window.scrollBy(0, bottom - window.innerHeight); window.scrollBy(0, bottom - window.innerHeight);
@ -124,34 +126,148 @@ function setupVideo(thumb, url) {
// Hovering over thumbnail displays video // Hovering over thumbnail displays video
thumb.addEventListener("mouseover", function(e) { thumb.addEventListener("mouseover", function(e) {
if (setting("videohover")) { if (setting("videohover")) {
getVideo(); getVideo();
expanded = false; expanded = false;
hovering = true; hovering = true;
var vidName = video.src.split('/').pop().split(".").shift();
var isMod = (window.location.pathname.split("/")[1]=="mod.php");
var thisBoard = isMod?window.location.href.split("/")[4]:window.location.pathname.split("/")[1];
var pageType = window.active_page;
var pageURL = isMod?window.location.href:window.location.pathname;
var jsonURL;
var thisThread;
var thisPost;
if (pageType==="thread") {
jsonURL = pageURL.replace(/\.html$/, ".json");
} else
if (pageType==="index"){
var thisPage = isMod?window.location.href.split("/")[5].split(".")[0]:window.location.pathname.split("/")[2].split(".")[0];
if (thisPage=="index") { thisPage="0"; } else { thisPage-=1;}
jsonURL = pageURL.replace(/[a-z0-9]+.html$/, thisPage+".json");
}
var docRight = document.documentElement.getBoundingClientRect().right; $.getJSON(jsonURL, function (thread) {
var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right; $this = thread;
var maxWidth = docRight - thumbRight - 20; if(typeof thread.threads != "undefined" && thread.threads != null && thread.threads.length > 0){
if (maxWidth < 250) maxWidth = 250;
video.style.position = "fixed"; var vidX = e.clientX;
video.style.right = "0px"; var vidY = e.clientY;
video.style.top = "0px"; var windowWidth = $(window).width();
var docRight = document.documentElement.getBoundingClientRect().right; var windowHeight = $(window).height();
var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right; var vidWidth = windowWidth - vidX;
video.style.maxWidth = maxWidth + "px"; var vidHeight = windowHeight - vidY;
video.style.maxHeight = "100%"; var vidAspect = vidHeight / vidWidth;
video.style.pointerEvents = "none";
video.style.display = "inline"; var totalWidth = windowWidth - vidX;
videoHide.style.display = "none"; var totalHeight = totalWidth*vidAspect;
videoContainer.style.display = "inline"; var maxWidth = totalWidth - 20;
videoContainer.style.position = "fixed"; if (maxWidth < 250) { maxWidth = 250; }
var maxHeight = maxWidth * vidAspect;
var vidTop = vidY;
var vidBottom;
var vidRight;
video.muted = (setting("videovolume") == 0); if (vidWidth > windowWidth) {
video.volume = setting("videovolume"); video.style.maxWidth = maxWidth+"px";
video.controls = false; video.style.maxHeight = maxHeight+"px";
video.play(); vidBottom = vidTop + maxHeight;
vidRight = vidX+maxWidth - 20;
} else {
video.style.maxWidth = vidWidth+"px";
video.style.maxHeight = vidHeight+"px";
vidBottom = vidTop + vidHeight;
vidRight = vidX+vidWidth - 20;
}
if (vidBottom > windowHeight) { vidTop -= vidBottom-windowHeight; }
videoContainer.style.position = "fixed";
videoContainer.style.display = "block";
videoHide.style.display = "none";
if (vidRight > windowWidth) {
video.style.left = vidX-(vidRight-windowWidth)+"px";
}
else {
video.style.left = vidX+"px";
}
video.style.top = vidTop+"px";
video.style.pointerEvents = "none";
video.style.display = "block";
video.style.position = "fixed";
video.muted = (setting("videovolume") == 0);
video.volume = setting("videovolume");
video.controls = false;
video.play();
}
else {
$.each($this.posts, function(){
var tim = this.tim;
var fileNum = vidName.split('-').pop();
if(typeof this.extra_files != "undefined" && this.extra_files != null && this.extra_files.length > 0){
$.each(this.extra_files, function() {
if (vidName==this.tim){
tim = this.tim;
}
});
}
if (vidName==tim) {
var vidX = e.clientX;
var vidY = e.clientY;
var vidWidth = this.w;
var vidHeight = this.h;
var vidAspect = vidHeight / vidWidth;
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var totalWidth = windowWidth - vidX;
var totalHeight = totalWidth*vidAspect;
var maxWidth = totalWidth - 20;
if (maxWidth < 250) { maxWidth = 250; }
var maxHeight = maxWidth * vidAspect;
var vidTop = vidY;
var vidBottom;
var vidRight;
if (vidWidth > windowWidth) {
video.style.maxWidth = maxWidth+"px";
video.style.maxHeight = maxHeight+"px";
vidBottom = vidTop + maxHeight;
vidRight = maxWidth+vidX;
} else {
video.style.maxWidth = vidWidth+"px";
video.style.maxHeight = vidHeight+"px";
vidBottom = vidTop + vidHeight;
vidRight = vidWidth+vidX;
}
if (vidBottom > windowHeight) {
vidTop -= vidBottom-windowHeight;
}
videoContainer.style.position = "fixed";
videoContainer.style.display = "block";
videoHide.style.display = "none";
if (vidRight > windowWidth) {
video.style.left = vidX-(vidRight-windowWidth)+"px";
}
else {
video.style.left = vidX+"px";
}
video.style.top = vidTop+"px";
video.style.pointerEvents = "none";
video.style.display = "block";
video.style.position = "fixed";
video.muted = (setting("videovolume") == 0);
video.volume = setting("videovolume");
video.controls = false;
video.play();
}
});
} //else*/
});
} }
}, false); }, false);
@ -240,5 +356,4 @@ onready(function(){
}); });
observer.observe(document.body, {childList: true, subtree: true}); observer.observe(document.body, {childList: true, subtree: true});
} }
}); });