Michael Walker
9 years ago
41 changed files with 2204 additions and 609 deletions
@ -0,0 +1,182 @@ |
|||||
|
/* 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", |
||||
|
"<fieldset><legend>Image hover</legend>" |
||||
|
+ ("<label class='image-hover' id='imageHover'><input type='checkbox' /> "+_('Image hover')+"</label>") |
||||
|
+ ("<label class='image-hover' id='catalogImageHover'><input type='checkbox' /> "+_('Image hover on catalog')+"</label>") |
||||
|
+ ("<label class='image-hover' id='imageHoverFollowCursor'><input type='checkbox' /> "+_('Image hover should follow cursor')+"</label>") |
||||
|
+ "</fieldset>"); |
||||
|
} |
||||
|
|
||||
|
$('.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 = $('<img id="chx_hoverImage" src="'+fullUrl+'" />'); |
||||
|
|
||||
|
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(); |
||||
|
}); |
||||
|
} |
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 248 KiB After Width: | Height: | Size: 348 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,34 @@ |
|||||
|
// Animated Icons |
||||
|
// -------------------------- |
||||
|
|
||||
|
.@{fa-css-prefix}-spin { |
||||
|
-webkit-animation: fa-spin 2s infinite linear; |
||||
|
animation: fa-spin 2s infinite linear; |
||||
|
} |
||||
|
|
||||
|
.@{fa-css-prefix}-pulse { |
||||
|
-webkit-animation: fa-spin 1s infinite steps(8); |
||||
|
animation: fa-spin 1s infinite steps(8); |
||||
|
} |
||||
|
|
||||
|
@-webkit-keyframes fa-spin { |
||||
|
0% { |
||||
|
-webkit-transform: rotate(0deg); |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: rotate(359deg); |
||||
|
transform: rotate(359deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes fa-spin { |
||||
|
0% { |
||||
|
-webkit-transform: rotate(0deg); |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: rotate(359deg); |
||||
|
transform: rotate(359deg); |
||||
|
} |
||||
|
} |
@ -1,20 +1,26 @@ |
|||||
// Mixins |
// Mixins |
||||
// -------------------------- |
// -------------------------- |
||||
|
|
||||
|
.fa-icon() { |
||||
|
display: inline-block; |
||||
|
font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration |
||||
|
font-size: inherit; // can't have font-size inherit on line above, so need to override |
||||
|
text-rendering: auto; // optimizelegibility throws things off #1094 |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
|
||||
|
} |
||||
|
|
||||
.fa-icon-rotate(@degrees, @rotation) { |
.fa-icon-rotate(@degrees, @rotation) { |
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation); |
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation); |
||||
-webkit-transform: rotate(@degrees); |
-webkit-transform: rotate(@degrees); |
||||
-moz-transform: rotate(@degrees); |
|
||||
-ms-transform: rotate(@degrees); |
-ms-transform: rotate(@degrees); |
||||
-o-transform: rotate(@degrees); |
|
||||
transform: rotate(@degrees); |
transform: rotate(@degrees); |
||||
} |
} |
||||
|
|
||||
.fa-icon-flip(@horiz, @vert, @rotation) { |
.fa-icon-flip(@horiz, @vert, @rotation) { |
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation, mirror=1); |
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation, mirror=1); |
||||
-webkit-transform: scale(@horiz, @vert); |
-webkit-transform: scale(@horiz, @vert); |
||||
-moz-transform: scale(@horiz, @vert); |
|
||||
-ms-transform: scale(@horiz, @vert); |
-ms-transform: scale(@horiz, @vert); |
||||
-o-transform: scale(@horiz, @vert); |
|
||||
transform: scale(@horiz, @vert); |
transform: scale(@horiz, @vert); |
||||
} |
} |
||||
|
@ -0,0 +1,34 @@ |
|||||
|
// Spinning Icons |
||||
|
// -------------------------- |
||||
|
|
||||
|
.#{$fa-css-prefix}-spin { |
||||
|
-webkit-animation: fa-spin 2s infinite linear; |
||||
|
animation: fa-spin 2s infinite linear; |
||||
|
} |
||||
|
|
||||
|
.#{$fa-css-prefix}-pulse { |
||||
|
-webkit-animation: fa-spin 1s infinite steps(8); |
||||
|
animation: fa-spin 1s infinite steps(8); |
||||
|
} |
||||
|
|
||||
|
@-webkit-keyframes fa-spin { |
||||
|
0% { |
||||
|
-webkit-transform: rotate(0deg); |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: rotate(359deg); |
||||
|
transform: rotate(359deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes fa-spin { |
||||
|
0% { |
||||
|
-webkit-transform: rotate(0deg); |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
100% { |
||||
|
-webkit-transform: rotate(359deg); |
||||
|
transform: rotate(359deg); |
||||
|
} |
||||
|
} |
@ -1,20 +1,26 @@ |
|||||
// Mixins |
// Mixins |
||||
// -------------------------- |
// -------------------------- |
||||
|
|
||||
|
@mixin fa-icon() { |
||||
|
display: inline-block; |
||||
|
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration |
||||
|
font-size: inherit; // can't have font-size inherit on line above, so need to override |
||||
|
text-rendering: auto; // optimizelegibility throws things off #1094 |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
|
||||
|
} |
||||
|
|
||||
@mixin fa-icon-rotate($degrees, $rotation) { |
@mixin fa-icon-rotate($degrees, $rotation) { |
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); |
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); |
||||
-webkit-transform: rotate($degrees); |
-webkit-transform: rotate($degrees); |
||||
-moz-transform: rotate($degrees); |
|
||||
-ms-transform: rotate($degrees); |
-ms-transform: rotate($degrees); |
||||
-o-transform: rotate($degrees); |
|
||||
transform: rotate($degrees); |
transform: rotate($degrees); |
||||
} |
} |
||||
|
|
||||
@mixin fa-icon-flip($horiz, $vert, $rotation) { |
@mixin fa-icon-flip($horiz, $vert, $rotation) { |
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); |
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); |
||||
-webkit-transform: scale($horiz, $vert); |
-webkit-transform: scale($horiz, $vert); |
||||
-moz-transform: scale($horiz, $vert); |
|
||||
-ms-transform: scale($horiz, $vert); |
-ms-transform: scale($horiz, $vert); |
||||
-o-transform: scale($horiz, $vert); |
|
||||
transform: scale($horiz, $vert); |
transform: scale($horiz, $vert); |
||||
} |
} |
||||
|
Loading…
Reference in new issue