MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
>TheFrz mNo edit summary |
(Item hoverbox) |
||
Line 3: | Line 3: | ||
$(function() { | $(function() { | ||
/* Hover Item Box */ | /* Hover Item Box */ | ||
$(function(){"use strict";$(".itemhover").hover(function(){var e=$(this),t=e.next(".itemboxhover"),n=t.next(".itemboxhovericon"),r=$(window).width(),i=$(window).height(),s=$(window).scrollTop(),o=$(window).scrollLeft(),u=e.offset(),a=e.outerWidth(),f=e.outerHeight(),l=t.outerWidth(),c=t.outerHeight(),h=12,p={},d=n.outerWidth(),v=n.outerHeight(),m={},g;if(u.top-h-c-s>0){g="t";p.top=u.top-c-h;p.left=u.left+a/2-l/2}else if(r+o-u.left-a-h-l-d>0){g="r";p.top=u.top+f/2-c/2;p.left=u.left+a+h}else if(u.left-o-h-l-d>0){g="l";p.top=u.top+f/2-c/2;p.left=u.left-l-h}else{g="b";p.top=u.top+f+h;p.left=u.left+a/2-l/2}if((g==="t"||g==="b")&&p.left<o){p.left=o}else if((g==="t"||g==="b")&&r+o-l<p.left){p.left=r+o-l}else if((g==="r"||g==="l")&&p.top<s){p.top=s}m.top=p.top;m.left=p.left+l;if(g==="l"||r+o-d<m.left){m.left=p.left-d}if(i+s-v<m.top){m.top=i+s-v}t.offset({top:p.top,left:p.left}).removeClass("itemboxhoverhide");n.offset({top:m.top,left:m.left}).removeClass("itemboxhoverhide")},function(){var e=$(this),t=e.next(".itemboxhover"),n=t.next(".itemboxhovericon");t.addClass("itemboxhoverhide");n.addClass("itemboxhoverhide")}).children("a").removeAttr("title").end().nextAll(".itemboxhover, .itemboxhovericon").removeClass("itemboxhovernojs")}); | $(function(){"use strict";$(".itemhover").hover(function(){var e=$(this),t=e.next(".itemboxhover"),n=t.next(".itemboxhovericon"),r=$(window).width(),i=$(window).height(),s=$(window).scrollTop(),o=$(window).scrollLeft(),u=e.offset(),a=e.outerWidth(),f=e.outerHeight(),l=t.outerWidth(),c=t.outerHeight(),h=12,p={},d=n.outerWidth(),v=n.outerHeight(),m={},g;if(u.top-h-c-s>0){g="t";p.top=u.top-c-h;p.left=u.left+a/2-l/2}else if(r+o-u.left-a-h-l-d>0){g="r";p.top=u.top+f/2-c/2;p.left=u.left+a+h}else if(u.left-o-h-l-d>0){g="l";p.top=u.top+f/2-c/2;p.left=u.left-l-h}else{g="b";p.top=u.top+f+h;p.left=u.left+a/2-l/2}if((g==="t"||g==="b")&&p.left<o){p.left=o}else if((g==="t"||g==="b")&&r+o-l<p.left){p.left=r+o-l}else if((g==="r"||g==="l")&&p.top<s){p.top=s}m.top=p.top;m.left=p.left+l;if(g==="l"||r+o-d<m.left){m.left=p.left-d}if(i+s-v<m.top){m.top=i+s-v}t.offset({top:p.top,left:p.left}).removeClass("itemboxhoverhide");n.offset({top:m.top,left:m.left}).removeClass("itemboxhoverhide")},function(){var e=$(this),t=e.next(".itemboxhover"),n=t.next(".itemboxhovericon");t.addClass("itemboxhoverhide");n.addClass("itemboxhoverhide")}).children("a").removeAttr("title").end().nextAll(".itemboxhover, .itemboxhovericon").removeClass("itemboxhovernojs")}); | ||
/* For adding expand/collapse all buttons for mw-collapsible */ | /* For adding expand/collapse all buttons for mw-collapsible */ | ||
Line 18: | Line 16: | ||
}); | }); | ||
}); | |||
/* | |||
* Item hoverbox | |||
*/ | |||
jQuery(document).ready(function($) { | |||
'use strict'; | |||
var $window = $(window), | |||
$hover = $('.c-item-hoverbox'); | |||
$hover.each(function() { | |||
var $this = $(this), | |||
$activator = $this.find('.c-item-hoverbox__activator'), | |||
$display = $this.find('.c-item-hoverbox__display'); | |||
$display.css('display', 'none'); | |||
$activator.hover(function() { | |||
$display.css('display', ''); | |||
var viewport = {}, | |||
activator = {}, | |||
display = {}, | |||
position, // position relative to the activator | |||
location; // location relative to the viewport | |||
viewport.width = $window.width(); | |||
viewport.height = $window.height(); | |||
viewport.top = $window.scrollTop(); | |||
viewport.left = $window.scrollLeft(); | |||
viewport.bottom = viewport.top + viewport.height; | |||
viewport.right = viewport.left + viewport.width; | |||
activator.width = $activator.outerWidth(); | |||
activator.height = $activator.outerHeight(); | |||
activator.top = $activator.offset().top; | |||
activator.left = $activator.offset().left; | |||
activator.bottom = activator.top + activator.height; | |||
activator.right = activator.left + activator.width; | |||
display.width = $display.outerWidth(); | |||
display.height = $display.outerHeight(); | |||
if ( viewport.width < display.width ) { // Don't bother showing the hoverbox at all if the viewport is too small | |||
return false; | |||
} | |||
if ( activator.left > viewport.width - activator.right ) { | |||
location = 'right'; | |||
} else { | |||
location = 'left'; | |||
} | |||
if ( activator.top - display.height > viewport.top ) { | |||
position = 'above'; | |||
display.top = activator.top - display.height; | |||
display.left = activator.left + (activator.width / 2) - (display.width / 2); | |||
} else if ( activator.right + display.width < viewport.right ) { | |||
position = 'right-of'; | |||
display.top = activator.top + (activator.height / 2) - (display.height / 2); | |||
display.left = activator.right; | |||
} else if ( activator.left - display.width > viewport.left ) { | |||
position = 'left-of'; | |||
display.top = activator.top + (activator.height / 2) - (display.height / 2); | |||
display.left = activator.left - display.width; | |||
} else { | |||
position = 'below'; | |||
display.top = activator.bottom; | |||
display.left = activator.left + (activator.width / 2) - (display.width / 2); | |||
} | |||
display.top = Math.max( viewport.top, display.top ); | |||
display.left = Math.max( viewport.left, Math.min(viewport.right - display.width, display.left) ); | |||
$display.addClass('is-visible is-' + position + '-activator is-' + location + '-side-of-viewport').offset(display); | |||
}, function() { | |||
$display.css('display', 'none'); | |||
$display.removeClass('is-visible is-above-activator is-below-activator is-left-of-activator is-right-of-activator is-left-side-of-viewport is-right-side-of-viewport'); | |||
}); | |||
}); | |||
}); | }); | ||
/* DO NOT ADD CODE BELOW THIS LINE */ | /* DO NOT ADD CODE BELOW THIS LINE */ |
Revision as of 04:48, 19 June 2017
/* global mw, $ */
/* jshint strict:false, browser:true */
$(function() {
/* Hover Item Box */
$(function(){"use strict";$(".itemhover").hover(function(){var e=$(this),t=e.next(".itemboxhover"),n=t.next(".itemboxhovericon"),r=$(window).width(),i=$(window).height(),s=$(window).scrollTop(),o=$(window).scrollLeft(),u=e.offset(),a=e.outerWidth(),f=e.outerHeight(),l=t.outerWidth(),c=t.outerHeight(),h=12,p={},d=n.outerWidth(),v=n.outerHeight(),m={},g;if(u.top-h-c-s>0){g="t";p.top=u.top-c-h;p.left=u.left+a/2-l/2}else if(r+o-u.left-a-h-l-d>0){g="r";p.top=u.top+f/2-c/2;p.left=u.left+a+h}else if(u.left-o-h-l-d>0){g="l";p.top=u.top+f/2-c/2;p.left=u.left-l-h}else{g="b";p.top=u.top+f+h;p.left=u.left+a/2-l/2}if((g==="t"||g==="b")&&p.left<o){p.left=o}else if((g==="t"||g==="b")&&r+o-l<p.left){p.left=r+o-l}else if((g==="r"||g==="l")&&p.top<s){p.top=s}m.top=p.top;m.left=p.left+l;if(g==="l"||r+o-d<m.left){m.left=p.left-d}if(i+s-v<m.top){m.top=i+s-v}t.offset({top:p.top,left:p.left}).removeClass("itemboxhoverhide");n.offset({top:m.top,left:m.left}).removeClass("itemboxhoverhide")},function(){var e=$(this),t=e.next(".itemboxhover"),n=t.next(".itemboxhovericon");t.addClass("itemboxhoverhide");n.addClass("itemboxhoverhide")}).children("a").removeAttr("title").end().nextAll(".itemboxhover, .itemboxhovericon").removeClass("itemboxhovernojs")});
/* For adding expand/collapse all buttons for mw-collapsible */
$(".mw-collapsible-collapse-all").on("click", function () {
$('.mw-collapsible-toggle-expanded a').trigger('click')
});
$(".mw-collapsible-expand-all").on("click", function () {
$(".mw-collapsible-toggle-collapsed a").trigger('click')
});
});
/*
* Item hoverbox
*/
jQuery(document).ready(function($) {
'use strict';
var $window = $(window),
$hover = $('.c-item-hoverbox');
$hover.each(function() {
var $this = $(this),
$activator = $this.find('.c-item-hoverbox__activator'),
$display = $this.find('.c-item-hoverbox__display');
$display.css('display', 'none');
$activator.hover(function() {
$display.css('display', '');
var viewport = {},
activator = {},
display = {},
position, // position relative to the activator
location; // location relative to the viewport
viewport.width = $window.width();
viewport.height = $window.height();
viewport.top = $window.scrollTop();
viewport.left = $window.scrollLeft();
viewport.bottom = viewport.top + viewport.height;
viewport.right = viewport.left + viewport.width;
activator.width = $activator.outerWidth();
activator.height = $activator.outerHeight();
activator.top = $activator.offset().top;
activator.left = $activator.offset().left;
activator.bottom = activator.top + activator.height;
activator.right = activator.left + activator.width;
display.width = $display.outerWidth();
display.height = $display.outerHeight();
if ( viewport.width < display.width ) { // Don't bother showing the hoverbox at all if the viewport is too small
return false;
}
if ( activator.left > viewport.width - activator.right ) {
location = 'right';
} else {
location = 'left';
}
if ( activator.top - display.height > viewport.top ) {
position = 'above';
display.top = activator.top - display.height;
display.left = activator.left + (activator.width / 2) - (display.width / 2);
} else if ( activator.right + display.width < viewport.right ) {
position = 'right-of';
display.top = activator.top + (activator.height / 2) - (display.height / 2);
display.left = activator.right;
} else if ( activator.left - display.width > viewport.left ) {
position = 'left-of';
display.top = activator.top + (activator.height / 2) - (display.height / 2);
display.left = activator.left - display.width;
} else {
position = 'below';
display.top = activator.bottom;
display.left = activator.left + (activator.width / 2) - (display.width / 2);
}
display.top = Math.max( viewport.top, display.top );
display.left = Math.max( viewport.left, Math.min(viewport.right - display.width, display.left) );
$display.addClass('is-visible is-' + position + '-activator is-' + location + '-side-of-viewport').offset(display);
}, function() {
$display.css('display', 'none');
$display.removeClass('is-visible is-above-activator is-below-activator is-left-of-activator is-right-of-activator is-left-side-of-viewport is-right-side-of-viewport');
});
});
});
/* DO NOT ADD CODE BELOW THIS LINE */