From d48c568a35cfac10aa3847beae2c474ff5724a52 Mon Sep 17 00:00:00 2001 From: Fredrick Brennan Date: Wed, 11 Mar 2015 09:56:40 +0800 Subject: [PATCH] Revert "Update to expand-video.js (video hover changes) and fix for portrait mode laptop" --- inc/template.php | 2 +- js/expand-video.js | 169 ++++++++------------------------------------- js/quick-reply.js | 8 +-- 3 files changed, 32 insertions(+), 147 deletions(-) diff --git a/inc/template.php b/inc/template.php index 416b6ecf..b0d7bfb2 100644 --- a/inc/template.php +++ b/inc/template.php @@ -22,7 +22,7 @@ function load_twig() { $loader = new Twig_Loader_Filesystem($config['dir']['template']); $loader->setPaths($config['dir']['template']); $twig = new Twig_Environment($loader, array( - 'autoescape' => false, + 'autoescape' => false, 'cache' => is_writable('templates') || (is_dir('templates/cache') && is_writable('templates/cache')) ? "{$config['dir']['template']}/cache" : false, 'debug' => $config['debug'] diff --git a/js/expand-video.js b/js/expand-video.js index 7cbe073a..6412bc3e 100644 --- a/js/expand-video.js +++ b/js/expand-video.js @@ -21,7 +21,6 @@ function setupVideo(thumb, url) { function unexpand() { if (expanded) { expanded = false; - hovering = false; if (video.pause) video.pause(); videoContainer.style.display = "none"; thumb.style.display = "inline"; @@ -35,7 +34,8 @@ function setupVideo(thumb, url) { hovering = false; if (video.pause) video.pause(); videoContainer.style.display = "none"; - video.style.display = "none"; + video.style.maxWidth = "inherit"; + video.style.maxHeight = "inherit"; } } @@ -56,7 +56,6 @@ function setupVideo(thumb, url) { videoHide.addEventListener("click", unexpand, false); videoContainer = document.createElement("div"); - videoContainer.id = "#expandedVideo"; videoContainer.style.paddingLeft = "15px"; videoContainer.style.display = "none"; videoContainer.appendChild(videoHide); @@ -114,7 +113,6 @@ function setupVideo(thumb, url) { function expand2() { video.style.maxWidth = "100%"; video.style.maxHeight = window.innerHeight + "px"; - var bottom = video.getBoundingClientRect().bottom; if (bottom > window.innerHeight) { window.scrollBy(0, bottom - window.innerHeight); @@ -126,148 +124,34 @@ function setupVideo(thumb, url) { // Hovering over thumbnail displays video thumb.addEventListener("mouseover", function(e) { - if (setting("videohover")) { - getVideo(); - expanded = false; - 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; - console.log("vidName = "+vidName); - - 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"); - } + if (setting("videohover")) { + getVideo(); + expanded = false; + hovering = true; - $.getJSON(jsonURL, function (thread) { - $this = thread; - if(typeof thread.threads != "undefined" && thread.threads != null && thread.threads.length > 0){ + var docRight = document.documentElement.getBoundingClientRect().right; + var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right; + var maxWidth = docRight - thumbRight - 20; + if (maxWidth < 250) maxWidth = 250; - var vidX = e.clientX; - var vidY = e.clientY; - var windowWidth = $(window).width(); - var windowHeight = $(window).height(); - var vidWidth = windowWidth - vidX; - var vidHeight = windowHeight - vidY; - var vidAspect = vidHeight / vidWidth; + video.style.position = "fixed"; + video.style.right = "0px"; + video.style.top = "0px"; + var docRight = document.documentElement.getBoundingClientRect().right; + var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right; + video.style.maxWidth = maxWidth + "px"; + video.style.maxHeight = "100%"; + video.style.pointerEvents = "none"; - 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; + video.style.display = "inline"; + videoHide.style.display = "none"; + videoContainer.style.display = "inline"; + videoContainer.style.position = "fixed"; - if (vidWidth > windowWidth) { - video.style.maxWidth = maxWidth+"px"; - video.style.maxHeight = maxHeight+"px"; - 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*/ - }); + video.muted = (setting("videovolume") == 0); + video.volume = setting("videovolume"); + video.controls = false; + video.play(); } }, false); @@ -357,3 +241,4 @@ onready(function(){ observer.observe(document.body, {childList: true, subtree: true}); } }); + diff --git a/js/quick-reply.js b/js/quick-reply.js index 399e759b..70eba7c0 100644 --- a/js/quick-reply.js +++ b/js/quick-reply.js @@ -112,7 +112,7 @@ #quick-reply td.recaptcha-response {\ padding: 0 0 1px 0;\ }\ - @media screen and (max-width: 400px) {\ + @media screen and (max-width: 600px) {\ #quick-reply {\ display: none !important;\ }\ @@ -366,7 +366,7 @@ $(window).ready(function() { if (settings.get('hide_at_top', true)) { $(window).scroll(function() { - if ($(this).width() <= 400) + if ($(this).width() <= 600) return; if ($(this).scrollTop() < $origPostForm.offset().top + $origPostForm.height() - 100) $postForm.fadeOut(100); @@ -388,7 +388,7 @@ }; $(window).on('cite', function(e, id, with_link) { - if ($(this).width() <= 400) + if ($(this).width() <= 600) return; show_quick_reply(); if (with_link) { @@ -443,7 +443,7 @@ $('.quick-reply-btn').hide(); $(window).scroll(function() { - if ($(this).width() <= 400) + if ($(this).width() <= 600) return; if ($(this).scrollTop() < $('form[name="post"]:first').offset().top + $('form[name="post"]:first').height() - 100) $('.quick-reply-btn').fadeOut(100);