From 130b32d08be1b3cf9f1f8ad2228451a845da03be Mon Sep 17 00:00:00 2001 From: czaks Date: Thu, 5 May 2016 13:42:38 +0200 Subject: remove image hover, so we can import the whole 8chan history of that file --- js/image-hover.js | 182 ------------------------------------------------------ 1 file changed, 182 deletions(-) delete mode 100644 js/image-hover.js (limited to 'js/image-hover.js') diff --git a/js/image-hover.js b/js/image-hover.js deleted file mode 100644 index 93d61702..00000000 --- a/js/image-hover.js +++ /dev/null @@ -1,182 +0,0 @@ -/* image-hover.js - * This script is copied almost verbatim from https://github.com/Pashe/8chanX/blob/2-0/8chan-x.user.js - * All I did was remove the sprintf dependency and integrate it into 8chan's Options as opposed to Pashe's. - * I also changed initHover() to also bind on new_post. - * Thanks Pashe for using WTFPL. - */ - -if (active_page === "catalog" || active_page === "thread" || active_page === "index") { -$(document).on('ready', function(){ - -if (window.Options && Options.get_tab('general')) { - Options.extend_tab("general", - "
Image hover" - + ("") - + ("") - + ("") - + "
"); -} - -$('.image-hover').on('change', function(){ - var setting = $(this).attr('id'); - - localStorage[setting] = $(this).children('input').is(':checked'); -}); - -if (!localStorage.imageHover || !localStorage.catalogImageHover || !localStorage.imageHoverFollowCursor) { - localStorage.imageHover = 'false'; - localStorage.catalogImageHover = 'false'; - localStorage.imageHoverFollowCursor = 'false'; -} - -if (getSetting('imageHover')) $('#imageHover>input').prop('checked', 'checked'); -if (getSetting('catalogImageHover')) $('#catalogImageHover>input').prop('checked', 'checked'); -if (getSetting('imageHoverFollowCursor')) $('#imageHoverFollowCursor>input').prop('checked', 'checked'); - -function getFileExtension(filename) { //Pashe, WTFPL - if (filename.match(/\.([a-z0-9]+)(&loop.*)?$/i) !== null) { - return filename.match(/\.([a-z0-9]+)(&loop.*)?$/i)[1]; - } else if (filename.match(/https?:\/\/(www\.)?youtube.com/)) { - return 'Youtube'; - } else { - return "unknown: " + filename; - } -} - -function isImage(fileExtension) { //Pashe, WTFPL - return ($.inArray(fileExtension, ["jpg", "jpeg", "gif", "png"]) !== -1); -} - -function isVideo(fileExtension) { //Pashe, WTFPL - return ($.inArray(fileExtension, ["webm", "mp4"]) !== -1); -} - -function isOnCatalog() { - return window.active_page === "catalog"; -} - -function isOnThread() { - return window.active_page === "thread"; -} - -function getSetting(key) { - return (localStorage[key] == 'true'); -} - -function initImageHover() { //Pashe, influenced by tux, et al, WTFPL - if (!getSetting("imageHover") && !getSetting("catalogImageHover")) {return;} - - var selectors = []; - - if (getSetting("imageHover")) {selectors.push("img.post-image", "canvas.post-image");} - if (getSetting("catalogImageHover") && isOnCatalog()) { - selectors.push(".thread-image"); - $(".theme-catalog div.thread").css("position", "inherit"); - } - - function bindEvents(el) { - $(el).find(selectors.join(", ")).each(function () { - if ($(this).parent().data("expanded")) {return;} - - var $this = $(this); - - $this.on("mousemove", imageHoverStart); - $this.on("mouseout", imageHoverEnd); - $this.on("click", imageHoverEnd); - }); - } - - bindEvents(document.body); - $(document).on('new_post', function(e, post) { - bindEvents(post); - }); -} - -function imageHoverStart(e) { //Pashe, anonish, WTFPL - var hoverImage = $("#chx_hoverImage"); - - if (hoverImage.length) { - if (getSetting("imageHoverFollowCursor")) { - var scrollTop = $(window).scrollTop(); - var imgY = e.pageY; - var imgTop = imgY; - var windowWidth = $(window).width(); - var imgWidth = hoverImage.width() + e.pageX; - - if (imgY < scrollTop + 15) { - imgTop = scrollTop; - } else if (imgY > scrollTop + $(window).height() - hoverImage.height() - 15) { - imgTop = scrollTop + $(window).height() - hoverImage.height() - 15; - } - - if (imgWidth > windowWidth) { - hoverImage.css({ - 'left': (e.pageX + (windowWidth - imgWidth)), - 'top' : imgTop, - }); - } else { - hoverImage.css({ - 'left': e.pageX, - 'top' : imgTop, - }); - } - - hoverImage.appendTo($("body")); - } - - return; - } - - var $this = $(this); - - var fullUrl; - if ($this.parent().attr("href").match("src")) { - fullUrl = $this.parent().attr("href"); - } else if (isOnCatalog()) { - fullUrl = $this.attr("data-fullimage"); - if (!isImage(getFileExtension(fullUrl))) {fullUrl = $this.attr("src");} - } - - if (isVideo(getFileExtension(fullUrl))) {return;} - - hoverImage = $(''); - - if (getSetting("imageHoverFollowCursor")) { - var size = $this.parents('.file').find('.unimportant').text().match(/\b(\d+)x(\d+)\b/), - maxWidth = $(window).width(), - maxHeight = $(window).height(); - - var scale = Math.min(1, maxWidth / size[1], maxHeight / size[2]); - hoverImage.css({ - "position" : "absolute", - "z-index" : 101, - "pointer-events": "none", - "width" : size[1] + "px", - "height" : size[2] + "px", - "max-width" : (size[1] * scale) + "px", - "max-height" : (size[2] * scale) + "px", - 'left' : e.pageX, - 'top' : imgTop, - }); - } else { - hoverImage.css({ - "position" : "fixed", - "top" : 0, - "right" : 0, - "z-index" : 101, - "pointer-events": "none", - "max-width" : "100%", - "max-height" : "100%", - }); - } - hoverImage.appendTo($("body")); - if (isOnThread()) {$this.css("cursor", "none");} -} - -function imageHoverEnd() { //Pashe, WTFPL - $("#chx_hoverImage").remove(); -} - -initImageHover(); -}); -} -- cgit v1.3 From 913420e040e9dbfdbd8302ca40093036ca39a14c Mon Sep 17 00:00:00 2001 From: 8chan Date: Fri, 20 Feb 2015 12:10:04 +0000 Subject: Image hover backported from 8chan X --- js/image-hover.js | 186 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 js/image-hover.js (limited to 'js/image-hover.js') diff --git a/js/image-hover.js b/js/image-hover.js new file mode 100644 index 00000000..801b8dff --- /dev/null +++ b/js/image-hover.js @@ -0,0 +1,186 @@ +/* image-hover.js + * This script is copied almost verbatim from https://github.com/Pashe/8chanX/blob/2-0/8chan-x.user.js + * All I did was remove the sprintf dependency and integrate it into 8chan's Options as opposed to Pashe's. + * I also changed initHover() to also bind on new_post. + * Thanks Pashe for using WTFPL. + */ + +if (active_page === "catalog" || active_page === "thread" || active_page === "index") { +$(document).on('ready', function(){ + +if (window.Options && Options.get_tab('general')) { + Options.extend_tab("general", + "
Image hover" + + ("") + + ("") + + ("") + + "
"); +} + +$('.image-hover').on('change', function(){ + var setting = $(this).attr('id'); + + localStorage[setting] = $(this).children('input').is(':checked'); +}); + +if (!localStorage.imageHover || !localStorage.catalogImageHover || !localStorage.imageHoverFollowCursor) { + localStorage.imageHover = 'false'; + localStorage.catalogImageHover = 'false'; + localStorage.imageHoverFollowCursor = 'false'; +} + +if (getSetting('imageHover')) $('#imageHover>input').prop('checked', 'checked'); +if (getSetting('catalogImageHover')) $('#catalogImageHover>input').prop('checked', 'checked'); +if (getSetting('imageHoverFollowCursor')) $('#imageHoverFollowCursor>input').prop('checked', 'checked'); + +function getFileExtension(filename) { //Pashe, WTFPL + if (filename.match(/\.([a-z0-9]+)(&loop.*)?$/i) !== null) { + return filename.match(/\.([a-z0-9]+)(&loop.*)?$/i)[1]; + } else if (filename.match(/https?:\/\/(www\.)?youtube.com/)) { + return 'Youtube'; + } else { + return "unknown: " + filename; + } +} + +function isImage(fileExtension) { //Pashe, WTFPL + return ($.inArray(fileExtension, ["jpg", "jpeg", "gif", "png"]) !== -1); +} + +function isVideo(fileExtension) { //Pashe, WTFPL + return ($.inArray(fileExtension, ["webm", "mp4"]) !== -1); +} + +function isOnCatalog() { + return window.active_page === "catalog"; +} + +function isOnThread() { + return window.active_page === "thread"; +} + +function getSetting(key) { + return (localStorage[key] == 'true'); +} + +function initImageHover() { //Pashe, influenced by tux, et al, WTFPL + if (!getSetting("imageHover") && !getSetting("catalogImageHover")) {return;} + + var selectors = []; + + if (getSetting("imageHover")) {selectors.push("img.post-image", "canvas.post-image");} + if (getSetting("catalogImageHover") && isOnCatalog()) { + selectors.push(".thread-image"); + $(".theme-catalog div.thread").css("position", "inherit"); + } + + function bindEvents(el) { + $(el).find(selectors.join(", ")).each(function () { + if ($(this).parent().data("expanded")) {return;} + + var $this = $(this); + + $this.on("mousemove", imageHoverStart); + $this.on("mouseout", imageHoverEnd); + $this.on("click", imageHoverEnd); + }); + } + + bindEvents(document.body); + $(document).on('new_post', function(e, post) { + bindEvents(post); + }); +} + +function imageHoverStart(e) { //Pashe, anonish, WTFPL + var hoverImage = $("#chx_hoverImage"); + + if (hoverImage.length) { + if (getSetting("imageHoverFollowCursor")) { + var scrollTop = $(window).scrollTop(); + var imgY = e.pageY; + var imgTop = imgY; + var windowWidth = $(window).width(); + var imgWidth = hoverImage.width() + e.pageX; + + if (imgY < scrollTop + 15) { + imgTop = scrollTop; + } else if (imgY > scrollTop + $(window).height() - hoverImage.height() - 15) { + imgTop = scrollTop + $(window).height() - hoverImage.height() - 15; + } + + if (imgWidth > windowWidth) { + hoverImage.css({ + 'left': (e.pageX + (windowWidth - imgWidth)), + 'top' : imgTop, + }); + } else { + hoverImage.css({ + 'left': e.pageX, + 'top' : imgTop, + }); + } + + hoverImage.appendTo($("body")); + } + + return; + } + + var $this = $(this); + + var fullUrl; + if ($this.parent().attr("href").match("src")) { + fullUrl = $this.parent().attr("href"); + } else if (isOnCatalog()) { + $this.css("cursor", "progress"); + fullUrl = $this.attr("src"); + $.ajax(($this.parent().attr("href").replace(/\.html$/, ".json")), { + success: function (result) { + $this.css("cursor", "unset"); + fullUrl = result.posts[0].tim + result.posts[0].ext; + if (!isImage(getFileExtension(fullUrl))) {return;} + $("#chx_hoverImage").attr("src", "/" + thisBoard + "/" + fullUrl); + $("#chx_hoverImage").on("load", function() {$this.css("cursor", "none")}); + }, + async: true, + cache: true + }); + } + + if (isVideo(getFileExtension(fullUrl))) {return;} + + hoverImage = $(''); + if (getSetting("imageHoverFollowCursor")) { + hoverImage.css({ + "position" : "absolute", + "z-index" : 101, + "pointer-events": "none", + "max-width" : $(window).width(), + "max-height" : $(window).height(), + 'left' : e.pageX, + 'top' : imgTop, + }); + } else { + hoverImage.css({ + "position" : "fixed", + "top" : 0, + "right" : 0, + "z-index" : 101, + "pointer-events": "none", + "max-width" : "100%", + "max-height" : "100%", + }); + } + hoverImage.appendTo($("body")); + if (isOnThread()) {$this.css("cursor", "none");} +} + +function imageHoverEnd() { //Pashe, WTFPL + $("#chx_hoverImage").remove(); +} + +initImageHover(); +}); +} + -- cgit v1.3 From 5f043d0a29efd6b14d3b453955af15df8630d88b Mon Sep 17 00:00:00 2001 From: Pashe Date: Tue, 24 Feb 2015 03:17:35 -0600 Subject: Have image-hover.js use data-fullimage instead of the API --- js/image-hover.js | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) (limited to 'js/image-hover.js') diff --git a/js/image-hover.js b/js/image-hover.js index 801b8dff..ac175ff4 100644 --- a/js/image-hover.js +++ b/js/image-hover.js @@ -133,19 +133,8 @@ function imageHoverStart(e) { //Pashe, anonish, WTFPL if ($this.parent().attr("href").match("src")) { fullUrl = $this.parent().attr("href"); } else if (isOnCatalog()) { - $this.css("cursor", "progress"); - fullUrl = $this.attr("src"); - $.ajax(($this.parent().attr("href").replace(/\.html$/, ".json")), { - success: function (result) { - $this.css("cursor", "unset"); - fullUrl = result.posts[0].tim + result.posts[0].ext; - if (!isImage(getFileExtension(fullUrl))) {return;} - $("#chx_hoverImage").attr("src", "/" + thisBoard + "/" + fullUrl); - $("#chx_hoverImage").on("load", function() {$this.css("cursor", "none")}); - }, - async: true, - cache: true - }); + fullUrl = $this.attr("data-fullimage"); + if (!isImage(getFileExtension(fullUrl))) {fullUrl = $this.attr("src");} } if (isVideo(getFileExtension(fullUrl))) {return;} -- cgit v1.3 From cad8019068cf94a1e28e8ebfcc50af56914703b8 Mon Sep 17 00:00:00 2001 From: Zixaphir Date: Wed, 18 Mar 2015 20:48:02 -0700 Subject: Prevent images from hovering off-page This entirely affects the "imageHoverFollowCursor" option. --- js/image-hover.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'js/image-hover.js') diff --git a/js/image-hover.js b/js/image-hover.js index ac175ff4..3e4ec0c4 100644 --- a/js/image-hover.js +++ b/js/image-hover.js @@ -140,13 +140,21 @@ function imageHoverStart(e) { //Pashe, anonish, WTFPL if (isVideo(getFileExtension(fullUrl))) {return;} hoverImage = $(''); + if (getSetting("imageHoverFollowCursor")) { + var size = $this.parents('.file').find('.unimportant').text().match(/\b(\d+)x(\d+)\b/), + maxWidth = $(window).width(), + maxHeight = $(window).height(), + + var scale = Math.min(1, maxWidth / size[1], maxHeight / size[2]); hoverImage.css({ "position" : "absolute", "z-index" : 101, "pointer-events": "none", - "max-width" : $(window).width(), - "max-height" : $(window).height(), + "width" : size[1] + "px", + "height" : size[2] + "px", + "max-width" : (size[1] * scale) + "px", + "max-height" : (size[2] * scale) + "px", 'left' : e.pageX, 'top' : imgTop, }); -- cgit v1.3 From 633c223282c568f187158c942de5817f49282c50 Mon Sep 17 00:00:00 2001 From: Zixaphir Date: Wed, 18 Mar 2015 20:50:41 -0700 Subject: Fix trailing comma --- js/image-hover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/image-hover.js') diff --git a/js/image-hover.js b/js/image-hover.js index 3e4ec0c4..66e908d7 100644 --- a/js/image-hover.js +++ b/js/image-hover.js @@ -144,7 +144,7 @@ function imageHoverStart(e) { //Pashe, anonish, WTFPL if (getSetting("imageHoverFollowCursor")) { var size = $this.parents('.file').find('.unimportant').text().match(/\b(\d+)x(\d+)\b/), maxWidth = $(window).width(), - maxHeight = $(window).height(), + maxHeight = $(window).height(); var scale = Math.min(1, maxWidth / size[1], maxHeight / size[2]); hoverImage.css({ -- cgit v1.3