Difference between revisions of "MediaWiki:Common.js"
From Organic Design wiki
m |
(try imagesLoaded lib) |
||
| Line 67: | Line 67: | ||
// Only continue initialising this slider after the first image has loaded so we can get the dimensions | // Only continue initialising this slider after the first image has loaded so we can get the dimensions | ||
| − | div. | + | div.imagesLoaded(function() { |
// Store the image dimentions in our slider div element's data | // Store the image dimentions in our slider div element's data | ||
| Line 157: | Line 157: | ||
}; | }; | ||
}); | }); | ||
| + | |||
| + | |||
| + | /*! | ||
| + | * imagesLoaded PACKAGED v4.1.0 | ||
| + | * JavaScript is all like "You images are done yet or what?" | ||
| + | * MIT License | ||
| + | */ | ||
| + | |||
| + | !function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}(this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||[];return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var r=this._onceEvents&&this._onceEvents[t];o;){var s=r&&r[o];s&&(this.off(t,o),delete r[o]),o.apply(this,e),n+=s?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}(window,function(t,e){function i(t,e){for(var i in e)t[i]=e[i];return t}function n(t){var e=[];if(Array.isArray(t))e=t;else if("number"==typeof t.length)for(var i=0;i<t.length;i++)e.push(t[i]);else e.push(t);return e}function o(t,e,r){return this instanceof o?("string"==typeof t&&(t=document.querySelectorAll(t)),this.elements=n(t),this.options=i({},this.options),"function"==typeof e?r=e:i(this.options,e),r&&this.on("always",r),this.getImages(),h&&(this.jqDeferred=new h.Deferred),void setTimeout(function(){this.check()}.bind(this))):new o(t,e,r)}function r(t){this.img=t}function s(t,e){this.url=t,this.element=e,this.img=new Image}var h=t.jQuery,a=t.console;o.prototype=Object.create(e.prototype),o.prototype.options={},o.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},o.prototype.addElementImages=function(t){"IMG"==t.nodeName&&this.addImage(t),this.options.background===!0&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&d[e]){for(var i=t.querySelectorAll("img"),n=0;n<i.length;n++){var o=i[n];this.addImage(o)}if("string"==typeof this.options.background){var r=t.querySelectorAll(this.options.background);for(n=0;n<r.length;n++){var s=r[n];this.addElementBackgroundImages(s)}}}};var d={1:!0,9:!0,11:!0};return o.prototype.addElementBackgroundImages=function(t){var e=getComputedStyle(t);if(e)for(var i=/url\((['"])?(.*?)\1\)/gi,n=i.exec(e.backgroundImage);null!==n;){var o=n&&n[2];o&&this.addBackground(o,t),n=i.exec(e.backgroundImage)}},o.prototype.addImage=function(t){var e=new r(t);this.images.push(e)},o.prototype.addBackground=function(t,e){var i=new s(t,e);this.images.push(i)},o.prototype.check=function(){function t(t,i,n){setTimeout(function(){e.progress(t,i,n)})}var e=this;return this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?void this.images.forEach(function(e){e.once("progress",t),e.check()}):void this.complete()},o.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&a&&a.log("progress: "+i,t,e)},o.prototype.complete=function(){var t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){var e=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[e](this)}},r.prototype=Object.create(e.prototype),r.prototype.check=function(){var t=this.getIsImageComplete();return t?void this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),void(this.proxyImage.src=this.img.src))},r.prototype.getIsImageComplete=function(){return this.img.complete&&void 0!==this.img.naturalWidth},r.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.img,e])},r.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},r.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},r.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},r.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype=Object.create(r.prototype),s.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url;var t=this.getIsImageComplete();t&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},s.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},o.makeJQueryPlugin=function(e){e=e||t.jQuery,e&&(h=e,h.fn.imagesLoaded=function(t,e){var i=new o(this,t,e);return i.jqDeferred.promise(h(this))})},o.makeJQueryPlugin(),o}); | ||
Revision as of 16:15, 23 February 2016
$('#sidebartree').bind('fancytreeinit', function(event, data) {
window.foo = data.tree;
console.log(data.tree);
});
// Initialises stripes on all zebra tables after page load
$(document).ready( function() {
$('table.zebra tbody tr:nth-child(even)').addClass('even').removeClass('odd');
$('table.zebra tbody tr:nth-child(odd)').addClass('odd').removeClass('even');
});
// Re do stripes after sort finishes
$(document).on( 'sortEnd.tablesorter', function(event) {
var table = $(event.target);
if(table.hasClass('zebra')) {
$('tbody tr:nth-child(even)',table).addClass('even').removeClass('odd');
$('tbody tr:nth-child(odd)',table).addClass('odd').removeClass('even');
}
});
/**
* ImageSlider.js
*
* Converts div elements containing sequences of images into a sliding image display
* - requires jQuery
*
* Copyright (c) 2012-2015, Aran Dunkley (http://www.organicdesign.co.nz/aran)
*
* Released under the GNU General Public Licence 2.0 or later
*
*/
$(document).ready(function() {
"use strict";
/**
* Initialise all image-slider elements in the page and start them sliding
*/
$('div.image-slider').each(function() {
var div = $(this), i, j, w, h, img, thumb, prev, next;
// Initialise data structure in this slider element
div.data({
images: [], // array of all the images in this slider (preloaded)
image: 1, // the currently displaying image in this slider
last: 0, // the previous image transitioning out
dir: 0, // the direction of the current transition (-1 or +1)
width: 0, // width of this sliders images
height: 0, // height of this sliders images
});
// Set config defaults if not supplied in html data
if(!div.data('delay')) div.data('delay', 5);
if(!div.data('direction')) div.data('direction', 1);
if(!div.data('duration')) div.data('duration', 1000);
if(!div.data('thumbs')) div.data('thumbs', 0);
// Store the images in the slider element's data
j = $('img', div).get();
for( i = 0; i < j.length; i++ ) {
img = $(j[i]);
img.css('display','none');
div.data('images').push(img);
}
// Only continue initialising this slider after the first image has loaded so we can get the dimensions
div.imagesLoaded(function() {
// Store the image dimentions in our slider div element's data
div.data('width', w = $(this).width());
div.data('height', h = $(this).height());
// If the slider has thumbs set then create another div with clickable thumbs in it (using the original images for the thumbs)
if(div.data('thumbs') > 0) {
thumb = $('<div class="thumbs" />');
for( i = 0; i < div.data('images').length; i++ ) {
img = div.data('images')[i];
img.width(div.data('thumbs'));
img.height(h*div.data('thumbs')/w);
img.css({float: 'left', cursor: 'pointer', display: ''});
img.data('index', i);
img.click(function() {
slide($('div.image-slider').has(this), 1, $(this).data('index'));
});
thumb.append(img);
}
}
// Restructure the content of this sliders div into layered divs with prev/next buttons and thumbs below
prev = '<a class="is-prev" href="javascript:">< prev</a>';
next = '<a class="is-next" href="javascript:">next ></a>';
div.html( '<div class="is-img1"><div class="is-img2">' + prev + next + '</div></div>' );
if(thumb) div.append(thumb);
$('.is-prev', div).click(function() { slide($('div.image-slider').has(this), -1); });
$('.is-next', div).click(function() { slide($('div.image-slider').has(this), 1); });
// Set the container size to the image size and other css styles
$('.is-img1,.is-img2',div).css({ padding: 0, width: w, height: h });
$('.is-prev',div).css({ float: 'left', 'margin-top': h / 2 });
$('.is-next',div).css({ float: 'right', 'margin-top': h / 2 });
// Start the sliding process
slide(div, div.data('direction'));
});
});
/**
* Start animating the passed div
* - dir is -1 or +1 for the direction to animate (left or right)
* - n allows the new image to be specified rather than just next/prev (it will scroll upward)
*/
function slide(div, dir, n) {
var nx = n === undefined,
l = div.data('images').length,
w = div.data('width'),
h = div.data('height'),
url1, url2;
// Bail if already animating, else set animation to start
if(div.data('dir')) return; else div.data('dir', dir);
// Set the new image either to the next according to the passed direction, or to n if passed
div.data('last', div.data('image'));
div.data('image', nx ? (div.data('image') + dir + l) % l : n);
url1 = div.data('images')[div.data('image')].attr('src');
url2 = div.data('images')[div.data('last')].attr('src');
// Show next image on regular interval
if(div.data('timer')) clearTimeout(div.data('timer'));
div.data('timer', setTimeout(function() { slide(div, div.data('direction')); }, div.data('delay') * 1000));
// Animation the last image out and the new current image in
div.animate({ t: 1 }, {
duration: div.data('duration'),
step: function(now, fx) {
var div = $(fx.elem), offset, x1, y1, x2, y2;
// Set an offset in pixels for the transition between the current and last image
offset = -div.data('dir') * fx.pos * (nx ? w : h);
// Calculate the positions of the current and last image (images specified with n scroll upward)
x1 = nx ? offset + w * dir : 0;
x2 = nx ? offset : 0;
y1 = nx ? 0 : offset + h * dir;
y2 = nx ? 0 : offset;
// Set the positions of the images with CSS
$('.is-img1', div).css( 'background', 'url("' + url1 + '") no-repeat ' + x1 + 'px ' + y1 + 'px' );
$('.is-img2', div).css( 'background', 'url("' + url2 + '") no-repeat ' + x2 + 'px ' + y2 + 'px' );
},
complete: function(now, fx) {
$(this).data('dir', 0); // mark current slider as no longer animating
}
});
};
});
/*!
* imagesLoaded PACKAGED v4.1.0
* JavaScript is all like "You images are done yet or what?"
* MIT License
*/
!function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}(this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||[];return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var r=this._onceEvents&&this._onceEvents[t];o;){var s=r&&r[o];s&&(this.off(t,o),delete r[o]),o.apply(this,e),n+=s?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}(window,function(t,e){function i(t,e){for(var i in e)t[i]=e[i];return t}function n(t){var e=[];if(Array.isArray(t))e=t;else if("number"==typeof t.length)for(var i=0;i<t.length;i++)e.push(t[i]);else e.push(t);return e}function o(t,e,r){return this instanceof o?("string"==typeof t&&(t=document.querySelectorAll(t)),this.elements=n(t),this.options=i({},this.options),"function"==typeof e?r=e:i(this.options,e),r&&this.on("always",r),this.getImages(),h&&(this.jqDeferred=new h.Deferred),void setTimeout(function(){this.check()}.bind(this))):new o(t,e,r)}function r(t){this.img=t}function s(t,e){this.url=t,this.element=e,this.img=new Image}var h=t.jQuery,a=t.console;o.prototype=Object.create(e.prototype),o.prototype.options={},o.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},o.prototype.addElementImages=function(t){"IMG"==t.nodeName&&this.addImage(t),this.options.background===!0&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&d[e]){for(var i=t.querySelectorAll("img"),n=0;n<i.length;n++){var o=i[n];this.addImage(o)}if("string"==typeof this.options.background){var r=t.querySelectorAll(this.options.background);for(n=0;n<r.length;n++){var s=r[n];this.addElementBackgroundImages(s)}}}};var d={1:!0,9:!0,11:!0};return o.prototype.addElementBackgroundImages=function(t){var e=getComputedStyle(t);if(e)for(var i=/url\((['"])?(.*?)\1\)/gi,n=i.exec(e.backgroundImage);null!==n;){var o=n&&n[2];o&&this.addBackground(o,t),n=i.exec(e.backgroundImage)}},o.prototype.addImage=function(t){var e=new r(t);this.images.push(e)},o.prototype.addBackground=function(t,e){var i=new s(t,e);this.images.push(i)},o.prototype.check=function(){function t(t,i,n){setTimeout(function(){e.progress(t,i,n)})}var e=this;return this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?void this.images.forEach(function(e){e.once("progress",t),e.check()}):void this.complete()},o.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&a&&a.log("progress: "+i,t,e)},o.prototype.complete=function(){var t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){var e=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[e](this)}},r.prototype=Object.create(e.prototype),r.prototype.check=function(){var t=this.getIsImageComplete();return t?void this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),void(this.proxyImage.src=this.img.src))},r.prototype.getIsImageComplete=function(){return this.img.complete&&void 0!==this.img.naturalWidth},r.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.img,e])},r.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},r.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},r.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},r.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype=Object.create(r.prototype),s.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url;var t=this.getIsImageComplete();t&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},s.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},o.makeJQueryPlugin=function(e){e=e||t.jQuery,e&&(h=e,h.fn.imagesLoaded=function(t,e){var i=new o(this,t,e);return i.jqDeferred.promise(h(this))})},o.makeJQueryPlugin(),o});
