mirror of
https://github.com/teachingtechYT/teachingtechYT.github.io.git
synced 2024-08-30 18:23:26 +00:00
Initial commit
This commit is contained in:
lawgicau
668
js/featherlight.js
Normal file
668
js/featherlight.js
Normal file
@ -0,0 +1,668 @@
|
||||
/**
|
||||
* Featherlight - ultra slim jQuery lightbox
|
||||
* Version 1.7.14-UMD - http://noelboss.github.io/featherlight/
|
||||
*
|
||||
* Copyright 2019, Noël Raoul Bossart (http://www.noelboss.com)
|
||||
* MIT Licensed.
|
||||
**/
|
||||
(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
// Node/CommonJS
|
||||
module.exports = function (root, jQuery) {
|
||||
if (jQuery === undefined) {
|
||||
// require('jQuery') returns a factory that requires window to
|
||||
// build a jQuery instance, we normalize how we use modules
|
||||
// that require this pattern but the window provided is a noop
|
||||
// if it's defined (how jquery works)
|
||||
if (typeof window !== 'undefined') {
|
||||
jQuery = require('jquery');
|
||||
} else {
|
||||
jQuery = require('jquery')(root);
|
||||
}
|
||||
}
|
||||
factory(jQuery);
|
||||
return jQuery;
|
||||
};
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
})(function($) {
|
||||
"use strict";
|
||||
|
||||
if('undefined' === typeof $) {
|
||||
if('console' in window){ window.console.info('Too much lightness, Featherlight needs jQuery.'); }
|
||||
return;
|
||||
}
|
||||
if($.fn.jquery.match(/-ajax/)) {
|
||||
if('console' in window){ window.console.info('Featherlight needs regular jQuery, not the slim version.'); }
|
||||
return;
|
||||
}
|
||||
/* Featherlight is exported as $.featherlight.
|
||||
It is a function used to open a featherlight lightbox.
|
||||
|
||||
[tech]
|
||||
Featherlight uses prototype inheritance.
|
||||
Each opened lightbox will have a corresponding object.
|
||||
That object may have some attributes that override the
|
||||
prototype's.
|
||||
Extensions created with Featherlight.extend will have their
|
||||
own prototype that inherits from Featherlight's prototype,
|
||||
thus attributes can be overriden either at the object level,
|
||||
or at the extension level.
|
||||
To create callbacks that chain themselves instead of overriding,
|
||||
use chainCallbacks.
|
||||
For those familiar with CoffeeScript, this correspond to
|
||||
Featherlight being a class and the Gallery being a class
|
||||
extending Featherlight.
|
||||
The chainCallbacks is used since we don't have access to
|
||||
CoffeeScript's `super`.
|
||||
*/
|
||||
|
||||
function Featherlight($content, config) {
|
||||
if(this instanceof Featherlight) { /* called with new */
|
||||
this.id = Featherlight.id++;
|
||||
this.setup($content, config);
|
||||
this.chainCallbacks(Featherlight._callbackChain);
|
||||
} else {
|
||||
var fl = new Featherlight($content, config);
|
||||
fl.open();
|
||||
return fl;
|
||||
}
|
||||
}
|
||||
|
||||
var opened = [],
|
||||
pruneOpened = function(remove) {
|
||||
opened = $.grep(opened, function(fl) {
|
||||
return fl !== remove && fl.$instance.closest('body').length > 0;
|
||||
} );
|
||||
return opened;
|
||||
};
|
||||
|
||||
// Removes keys of `set` from `obj` and returns the removed key/values.
|
||||
function slice(obj, set) {
|
||||
var r = {};
|
||||
for (var key in obj) {
|
||||
if (key in set) {
|
||||
r[key] = obj[key];
|
||||
delete obj[key];
|
||||
}
|
||||
}
|
||||
return r;
|
||||
}
|
||||
|
||||
// NOTE: List of available [iframe attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
|
||||
var iFrameAttributeSet = {
|
||||
allow: 1, allowfullscreen: 1, frameborder: 1, height: 1, longdesc: 1, marginheight: 1, marginwidth: 1,
|
||||
mozallowfullscreen: 1, name: 1, referrerpolicy: 1, sandbox: 1, scrolling: 1, src: 1, srcdoc: 1, style: 1,
|
||||
webkitallowfullscreen: 1, width: 1
|
||||
};
|
||||
|
||||
// Converts camelCased attributes to dasherized versions for given prefix:
|
||||
// parseAttrs({hello: 1, hellFrozeOver: 2}, 'hell') => {froze-over: 2}
|
||||
function parseAttrs(obj, prefix) {
|
||||
var attrs = {},
|
||||
regex = new RegExp('^' + prefix + '([A-Z])(.*)');
|
||||
for (var key in obj) {
|
||||
var match = key.match(regex);
|
||||
if (match) {
|
||||
var dasherized = (match[1] + match[2].replace(/([A-Z])/g, '-$1')).toLowerCase();
|
||||
attrs[dasherized] = obj[key];
|
||||
}
|
||||
}
|
||||
return attrs;
|
||||
}
|
||||
|
||||
/* document wide key handler */
|
||||
var eventMap = { keyup: 'onKeyUp', resize: 'onResize' };
|
||||
|
||||
var globalEventHandler = function(event) {
|
||||
$.each(Featherlight.opened().reverse(), function() {
|
||||
if (!event.isDefaultPrevented()) {
|
||||
if (false === this[eventMap[event.type]](event)) {
|
||||
event.preventDefault(); event.stopPropagation(); return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var toggleGlobalEvents = function(set) {
|
||||
if(set !== Featherlight._globalHandlerInstalled) {
|
||||
Featherlight._globalHandlerInstalled = set;
|
||||
var events = $.map(eventMap, function(_, name) { return name+'.'+Featherlight.prototype.namespace; } ).join(' ');
|
||||
$(window)[set ? 'on' : 'off'](events, globalEventHandler);
|
||||
}
|
||||
};
|
||||
|
||||
Featherlight.prototype = {
|
||||
constructor: Featherlight,
|
||||
/*** defaults ***/
|
||||
/* extend featherlight with defaults and methods */
|
||||
namespace: 'featherlight', /* Name of the events and css class prefix */
|
||||
targetAttr: 'data-featherlight', /* Attribute of the triggered element that contains the selector to the lightbox content */
|
||||
variant: null, /* Class that will be added to change look of the lightbox */
|
||||
resetCss: false, /* Reset all css */
|
||||
background: null, /* Custom DOM for the background, wrapper and the closebutton */
|
||||
openTrigger: 'click', /* Event that triggers the lightbox */
|
||||
closeTrigger: 'click', /* Event that triggers the closing of the lightbox */
|
||||
filter: null, /* Selector to filter events. Think $(...).on('click', filter, eventHandler) */
|
||||
root: 'body', /* Where to append featherlights */
|
||||
openSpeed: 250, /* Duration of opening animation */
|
||||
closeSpeed: 250, /* Duration of closing animation */
|
||||
closeOnClick: 'background', /* Close lightbox on click ('background', 'anywhere' or false) */
|
||||
closeOnEsc: true, /* Close lightbox when pressing esc */
|
||||
closeIcon: '✕', /* Close icon */
|
||||
loading: '', /* Content to show while initial content is loading */
|
||||
persist: false, /* If set, the content will persist and will be shown again when opened again. 'shared' is a special value when binding multiple elements for them to share the same content */
|
||||
otherClose: null, /* Selector for alternate close buttons (e.g. "a.close") */
|
||||
beforeOpen: $.noop, /* Called before open. can return false to prevent opening of lightbox. Gets event as parameter, this contains all data */
|
||||
beforeContent: $.noop, /* Called when content is loaded. Gets event as parameter, this contains all data */
|
||||
beforeClose: $.noop, /* Called before close. can return false to prevent closing of lightbox. Gets event as parameter, this contains all data */
|
||||
afterOpen: $.noop, /* Called after open. Gets event as parameter, this contains all data */
|
||||
afterContent: $.noop, /* Called after content is ready and has been set. Gets event as parameter, this contains all data */
|
||||
afterClose: $.noop, /* Called after close. Gets event as parameter, this contains all data */
|
||||
onKeyUp: $.noop, /* Called on key up for the frontmost featherlight */
|
||||
onResize: $.noop, /* Called after new content and when a window is resized */
|
||||
type: null, /* Specify type of lightbox. If unset, it will check for the targetAttrs value. */
|
||||
contentFilters: ['jquery', 'image', 'html', 'ajax', 'iframe', 'text'], /* List of content filters to use to determine the content */
|
||||
|
||||
/*** methods ***/
|
||||
/* setup iterates over a single instance of featherlight and prepares the background and binds the events */
|
||||
setup: function(target, config){
|
||||
/* all arguments are optional */
|
||||
if (typeof target === 'object' && target instanceof $ === false && !config) {
|
||||
config = target;
|
||||
target = undefined;
|
||||
}
|
||||
|
||||
var self = $.extend(this, config, {target: target}),
|
||||
css = !self.resetCss ? self.namespace : self.namespace+'-reset', /* by adding -reset to the classname, we reset all the default css */
|
||||
$background = $(self.background || [
|
||||
'<div class="'+css+'-loading '+css+'">',
|
||||
'<div class="'+css+'-content">',
|
||||
'<button class="'+css+'-close-icon '+ self.namespace + '-close" aria-label="Close">',
|
||||
self.closeIcon,
|
||||
'</button>',
|
||||
'<div class="'+self.namespace+'-inner">' + self.loading + '</div>',
|
||||
'</div>',
|
||||
'</div>'].join('')),
|
||||
closeButtonSelector = '.'+self.namespace+'-close' + (self.otherClose ? ',' + self.otherClose : '');
|
||||
|
||||
self.$instance = $background.clone().addClass(self.variant); /* clone DOM for the background, wrapper and the close button */
|
||||
|
||||
/* close when click on background/anywhere/null or closebox */
|
||||
self.$instance.on(self.closeTrigger+'.'+self.namespace, function(event) {
|
||||
if(event.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
var $target = $(event.target);
|
||||
if( ('background' === self.closeOnClick && $target.is('.'+self.namespace))
|
||||
|| 'anywhere' === self.closeOnClick
|
||||
|| $target.closest(closeButtonSelector).length ){
|
||||
self.close(event);
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/* this method prepares the content and converts it into a jQuery object or a promise */
|
||||
getContent: function(){
|
||||
if(this.persist !== false && this.$content) {
|
||||
return this.$content;
|
||||
}
|
||||
var self = this,
|
||||
filters = this.constructor.contentFilters,
|
||||
readTargetAttr = function(name){ return self.$currentTarget && self.$currentTarget.attr(name); },
|
||||
targetValue = readTargetAttr(self.targetAttr),
|
||||
data = self.target || targetValue || '';
|
||||
|
||||
/* Find which filter applies */
|
||||
var filter = filters[self.type]; /* check explicit type like {type: 'image'} */
|
||||
|
||||
/* check explicit type like data-featherlight="image" */
|
||||
if(!filter && data in filters) {
|
||||
filter = filters[data];
|
||||
data = self.target && targetValue;
|
||||
}
|
||||
data = data || readTargetAttr('href') || '';
|
||||
|
||||
/* check explicity type & content like {image: 'photo.jpg'} */
|
||||
if(!filter) {
|
||||
for(var filterName in filters) {
|
||||
if(self[filterName]) {
|
||||
filter = filters[filterName];
|
||||
data = self[filterName];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* otherwise it's implicit, run checks */
|
||||
if(!filter) {
|
||||
var target = data;
|
||||
data = null;
|
||||
$.each(self.contentFilters, function() {
|
||||
filter = filters[this];
|
||||
if(filter.test) {
|
||||
data = filter.test(target);
|
||||
}
|
||||
if(!data && filter.regex && target.match && target.match(filter.regex)) {
|
||||
data = target;
|
||||
}
|
||||
return !data;
|
||||
});
|
||||
if(!data) {
|
||||
if('console' in window){ window.console.error('Featherlight: no content filter found ' + (target ? ' for "' + target + '"' : ' (no target specified)')); }
|
||||
return false;
|
||||
}
|
||||
}
|
||||
/* Process it */
|
||||
return filter.process.call(self, data);
|
||||
},
|
||||
|
||||
/* sets the content of $instance to $content */
|
||||
setContent: function($content){
|
||||
this.$instance.removeClass(this.namespace+'-loading');
|
||||
|
||||
/* we need a special class for the iframe */
|
||||
this.$instance.toggleClass(this.namespace+'-iframe', $content.is('iframe'));
|
||||
|
||||
/* replace content by appending to existing one before it is removed
|
||||
this insures that featherlight-inner remain at the same relative
|
||||
position to any other items added to featherlight-content */
|
||||
this.$instance.find('.'+this.namespace+'-inner')
|
||||
.not($content) /* excluded new content, important if persisted */
|
||||
.slice(1).remove().end() /* In the unexpected event where there are many inner elements, remove all but the first one */
|
||||
.replaceWith($.contains(this.$instance[0], $content[0]) ? '' : $content);
|
||||
|
||||
this.$content = $content.addClass(this.namespace+'-inner');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/* opens the lightbox. "this" contains $instance with the lightbox, and with the config.
|
||||
Returns a promise that is resolved after is successfully opened. */
|
||||
open: function(event){
|
||||
var self = this;
|
||||
self.$instance.hide().appendTo(self.root);
|
||||
if((!event || !event.isDefaultPrevented())
|
||||
&& self.beforeOpen(event) !== false) {
|
||||
|
||||
if(event){
|
||||
event.preventDefault();
|
||||
}
|
||||
var $content = self.getContent();
|
||||
|
||||
if($content) {
|
||||
opened.push(self);
|
||||
|
||||
toggleGlobalEvents(true);
|
||||
|
||||
self.$instance.fadeIn(self.openSpeed);
|
||||
self.beforeContent(event);
|
||||
|
||||
/* Set content and show */
|
||||
return $.when($content)
|
||||
.always(function($openendContent){
|
||||
if($openendContent) {
|
||||
self.setContent($openendContent);
|
||||
self.afterContent(event);
|
||||
}
|
||||
})
|
||||
.then(self.$instance.promise())
|
||||
/* Call afterOpen after fadeIn is done */
|
||||
.done(function(){ self.afterOpen(event); });
|
||||
}
|
||||
}
|
||||
self.$instance.detach();
|
||||
return $.Deferred().reject().promise();
|
||||
},
|
||||
|
||||
/* closes the lightbox. "this" contains $instance with the lightbox, and with the config
|
||||
returns a promise, resolved after the lightbox is successfully closed. */
|
||||
close: function(event){
|
||||
var self = this,
|
||||
deferred = $.Deferred();
|
||||
|
||||
if(self.beforeClose(event) === false) {
|
||||
deferred.reject();
|
||||
} else {
|
||||
|
||||
if (0 === pruneOpened(self).length) {
|
||||
toggleGlobalEvents(false);
|
||||
}
|
||||
|
||||
self.$instance.fadeOut(self.closeSpeed,function(){
|
||||
self.$instance.detach();
|
||||
self.afterClose(event);
|
||||
deferred.resolve();
|
||||
});
|
||||
}
|
||||
return deferred.promise();
|
||||
},
|
||||
|
||||
/* resizes the content so it fits in visible area and keeps the same aspect ratio.
|
||||
Does nothing if either the width or the height is not specified.
|
||||
Called automatically on window resize.
|
||||
Override if you want different behavior. */
|
||||
resize: function(w, h) {
|
||||
if (w && h) {
|
||||
/* Reset apparent image size first so container grows */
|
||||
this.$content.css('width', '').css('height', '');
|
||||
/* Calculate the worst ratio so that dimensions fit */
|
||||
/* Note: -1 to avoid rounding errors */
|
||||
var ratio = Math.max(
|
||||
w / (this.$content.parent().width()-1),
|
||||
h / (this.$content.parent().height()-1));
|
||||
/* Resize content */
|
||||
if (ratio > 1) {
|
||||
ratio = h / Math.floor(h / ratio); /* Round ratio down so height calc works */
|
||||
this.$content.css('width', '' + w / ratio + 'px').css('height', '' + h / ratio + 'px');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* Utility function to chain callbacks
|
||||
[Warning: guru-level]
|
||||
Used be extensions that want to let users specify callbacks but
|
||||
also need themselves to use the callbacks.
|
||||
The argument 'chain' has callback names as keys and function(super, event)
|
||||
as values. That function is meant to call `super` at some point.
|
||||
*/
|
||||
chainCallbacks: function(chain) {
|
||||
for (var name in chain) {
|
||||
this[name] = $.proxy(chain[name], this, $.proxy(this[name], this));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.extend(Featherlight, {
|
||||
id: 0, /* Used to id single featherlight instances */
|
||||
autoBind: '[data-featherlight]', /* Will automatically bind elements matching this selector. Clear or set before onReady */
|
||||
defaults: Featherlight.prototype, /* You can access and override all defaults using $.featherlight.defaults, which is just a synonym for $.featherlight.prototype */
|
||||
/* Contains the logic to determine content */
|
||||
contentFilters: {
|
||||
jquery: {
|
||||
regex: /^[#.]\w/, /* Anything that starts with a class name or identifiers */
|
||||
test: function(elem) { return elem instanceof $ && elem; },
|
||||
process: function(elem) { return this.persist !== false ? $(elem) : $(elem).clone(true); }
|
||||
},
|
||||
image: {
|
||||
regex: /\.(png|jpg|jpeg|gif|tiff?|bmp|svg)(\?\S*)?$/i,
|
||||
process: function(url) {
|
||||
var self = this,
|
||||
deferred = $.Deferred(),
|
||||
img = new Image(),
|
||||
$img = $('<img src="'+url+'" alt="" class="'+self.namespace+'-image" />');
|
||||
img.onload = function() {
|
||||
/* Store naturalWidth & height for IE8 */
|
||||
$img.naturalWidth = img.width; $img.naturalHeight = img.height;
|
||||
deferred.resolve( $img );
|
||||
};
|
||||
img.onerror = function() { deferred.reject($img); };
|
||||
img.src = url;
|
||||
return deferred.promise();
|
||||
}
|
||||
},
|
||||
html: {
|
||||
regex: /^\s*<[\w!][^<]*>/, /* Anything that starts with some kind of valid tag */
|
||||
process: function(html) { return $(html); }
|
||||
},
|
||||
ajax: {
|
||||
regex: /./, /* At this point, any content is assumed to be an URL */
|
||||
process: function(url) {
|
||||
var self = this,
|
||||
deferred = $.Deferred();
|
||||
/* we are using load so one can specify a target with: url.html #targetelement */
|
||||
var $container = $('<div></div>').load(url, function(response, status){
|
||||
if ( status !== "error" ) {
|
||||
deferred.resolve($container.contents());
|
||||
}
|
||||
deferred.reject();
|
||||
});
|
||||
return deferred.promise();
|
||||
}
|
||||
},
|
||||
iframe: {
|
||||
process: function(url) {
|
||||
var deferred = new $.Deferred();
|
||||
var $content = $('<iframe/>');
|
||||
var css = parseAttrs(this, 'iframe');
|
||||
var attrs = slice(css, iFrameAttributeSet);
|
||||
$content.hide()
|
||||
.attr('src', url)
|
||||
.attr(attrs)
|
||||
.css(css)
|
||||
.on('load', function() { deferred.resolve($content.show()); })
|
||||
// We can't move an <iframe> and avoid reloading it,
|
||||
// so let's put it in place ourselves right now:
|
||||
.appendTo(this.$instance.find('.' + this.namespace + '-content'));
|
||||
return deferred.promise();
|
||||
}
|
||||
},
|
||||
text: {
|
||||
process: function(text) { return $('<div>', {text: text}); }
|
||||
}
|
||||
},
|
||||
|
||||
functionAttributes: ['beforeOpen', 'afterOpen', 'beforeContent', 'afterContent', 'beforeClose', 'afterClose'],
|
||||
|
||||
/*** class methods ***/
|
||||
/* read element's attributes starting with data-featherlight- */
|
||||
readElementConfig: function(element, namespace) {
|
||||
var Klass = this,
|
||||
regexp = new RegExp('^data-' + namespace + '-(.*)'),
|
||||
config = {};
|
||||
if (element && element.attributes) {
|
||||
$.each(element.attributes, function(){
|
||||
var match = this.name.match(regexp);
|
||||
if (match) {
|
||||
var val = this.value,
|
||||
name = $.camelCase(match[1]);
|
||||
if ($.inArray(name, Klass.functionAttributes) >= 0) { /* jshint -W054 */
|
||||
val = new Function(val); /* jshint +W054 */
|
||||
} else {
|
||||
try { val = JSON.parse(val); }
|
||||
catch(e) {}
|
||||
}
|
||||
config[name] = val;
|
||||
}
|
||||
});
|
||||
}
|
||||
return config;
|
||||
},
|
||||
|
||||
/* Used to create a Featherlight extension
|
||||
[Warning: guru-level]
|
||||
Creates the extension's prototype that in turn
|
||||
inherits Featherlight's prototype.
|
||||
Could be used to extend an extension too...
|
||||
This is pretty high level wizardy, it comes pretty much straight
|
||||
from CoffeeScript and won't teach you anything about Featherlight
|
||||
as it's not really specific to this library.
|
||||
My suggestion: move along and keep your sanity.
|
||||
*/
|
||||
extend: function(child, defaults) {
|
||||
/* Setup class hierarchy, adapted from CoffeeScript */
|
||||
var Ctor = function(){ this.constructor = child; };
|
||||
Ctor.prototype = this.prototype;
|
||||
child.prototype = new Ctor();
|
||||
child.__super__ = this.prototype;
|
||||
/* Copy class methods & attributes */
|
||||
$.extend(child, this, defaults);
|
||||
child.defaults = child.prototype;
|
||||
return child;
|
||||
},
|
||||
|
||||
attach: function($source, $content, config) {
|
||||
var Klass = this;
|
||||
if (typeof $content === 'object' && $content instanceof $ === false && !config) {
|
||||
config = $content;
|
||||
$content = undefined;
|
||||
}
|
||||
/* make a copy */
|
||||
config = $.extend({}, config);
|
||||
|
||||
/* Only for openTrigger, filter & namespace... */
|
||||
var namespace = config.namespace || Klass.defaults.namespace,
|
||||
tempConfig = $.extend({}, Klass.defaults, Klass.readElementConfig($source[0], namespace), config),
|
||||
sharedPersist;
|
||||
var handler = function(event) {
|
||||
var $target = $(event.currentTarget);
|
||||
/* ... since we might as well compute the config on the actual target */
|
||||
var elemConfig = $.extend(
|
||||
{$source: $source, $currentTarget: $target},
|
||||
Klass.readElementConfig($source[0], tempConfig.namespace),
|
||||
Klass.readElementConfig(event.currentTarget, tempConfig.namespace),
|
||||
config);
|
||||
var fl = sharedPersist || $target.data('featherlight-persisted') || new Klass($content, elemConfig);
|
||||
if(fl.persist === 'shared') {
|
||||
sharedPersist = fl;
|
||||
} else if(fl.persist !== false) {
|
||||
$target.data('featherlight-persisted', fl);
|
||||
}
|
||||
if (elemConfig.$currentTarget.blur) {
|
||||
elemConfig.$currentTarget.blur(); // Otherwise 'enter' key might trigger the dialog again
|
||||
}
|
||||
fl.open(event);
|
||||
};
|
||||
|
||||
$source.on(tempConfig.openTrigger+'.'+tempConfig.namespace, tempConfig.filter, handler);
|
||||
|
||||
return {filter: tempConfig.filter, handler: handler};
|
||||
},
|
||||
|
||||
current: function() {
|
||||
var all = this.opened();
|
||||
return all[all.length - 1] || null;
|
||||
},
|
||||
|
||||
opened: function() {
|
||||
var klass = this;
|
||||
pruneOpened();
|
||||
return $.grep(opened, function(fl) { return fl instanceof klass; } );
|
||||
},
|
||||
|
||||
close: function(event) {
|
||||
var cur = this.current();
|
||||
if(cur) { return cur.close(event); }
|
||||
},
|
||||
|
||||
/* Does the auto binding on startup.
|
||||
Meant only to be used by Featherlight and its extensions
|
||||
*/
|
||||
_onReady: function() {
|
||||
var Klass = this;
|
||||
if(Klass.autoBind){
|
||||
var $autobound = $(Klass.autoBind);
|
||||
/* Bind existing elements */
|
||||
$autobound.each(function(){
|
||||
Klass.attach($(this));
|
||||
});
|
||||
/* If a click propagates to the document level, then we have an item that was added later on */
|
||||
$(document).on('click', Klass.autoBind, function(evt) {
|
||||
if (evt.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
var $cur = $(evt.currentTarget);
|
||||
var len = $autobound.length;
|
||||
$autobound = $autobound.add($cur);
|
||||
if(len === $autobound.length) {
|
||||
return; /* already bound */
|
||||
}
|
||||
/* Bind featherlight */
|
||||
var data = Klass.attach($cur);
|
||||
/* Dispatch event directly */
|
||||
if (!data.filter || $(evt.target).parentsUntil($cur, data.filter).length > 0) {
|
||||
data.handler(evt);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* Featherlight uses the onKeyUp callback to intercept the escape key.
|
||||
Private to Featherlight.
|
||||
*/
|
||||
_callbackChain: {
|
||||
onKeyUp: function(_super, event){
|
||||
if(27 === event.keyCode) {
|
||||
if (this.closeOnEsc) {
|
||||
$.featherlight.close(event);
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
return _super(event);
|
||||
}
|
||||
},
|
||||
|
||||
beforeOpen: function(_super, event) {
|
||||
// Used to disable scrolling
|
||||
$(document.documentElement).addClass('with-featherlight');
|
||||
|
||||
// Remember focus:
|
||||
this._previouslyActive = document.activeElement;
|
||||
|
||||
// Disable tabbing:
|
||||
// See http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus
|
||||
this._$previouslyTabbable = $("a, input, select, textarea, iframe, button, iframe, [contentEditable=true]")
|
||||
.not('[tabindex]')
|
||||
.not(this.$instance.find('button'));
|
||||
|
||||
this._$previouslyWithTabIndex = $('[tabindex]').not('[tabindex="-1"]');
|
||||
this._previousWithTabIndices = this._$previouslyWithTabIndex.map(function(_i, elem) {
|
||||
return $(elem).attr('tabindex');
|
||||
});
|
||||
|
||||
this._$previouslyWithTabIndex.add(this._$previouslyTabbable).attr('tabindex', -1);
|
||||
|
||||
if (document.activeElement.blur) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
return _super(event);
|
||||
},
|
||||
|
||||
afterClose: function(_super, event) {
|
||||
var r = _super(event);
|
||||
// Restore focus
|
||||
var self = this;
|
||||
this._$previouslyTabbable.removeAttr('tabindex');
|
||||
this._$previouslyWithTabIndex.each(function(i, elem) {
|
||||
$(elem).attr('tabindex', self._previousWithTabIndices[i]);
|
||||
});
|
||||
this._previouslyActive.focus();
|
||||
// Restore scroll
|
||||
if(Featherlight.opened().length === 0) {
|
||||
$(document.documentElement).removeClass('with-featherlight');
|
||||
}
|
||||
return r;
|
||||
},
|
||||
|
||||
onResize: function(_super, event){
|
||||
this.resize(this.$content.naturalWidth, this.$content.naturalHeight);
|
||||
return _super(event);
|
||||
},
|
||||
|
||||
afterContent: function(_super, event){
|
||||
var r = _super(event);
|
||||
this.$instance.find('[autofocus]:not([disabled])').focus();
|
||||
this.onResize(event);
|
||||
return r;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$.featherlight = Featherlight;
|
||||
|
||||
/* bind jQuery elements to trigger featherlight */
|
||||
$.fn.featherlight = function($content, config) {
|
||||
Featherlight.attach(this, $content, config);
|
||||
return this;
|
||||
};
|
||||
|
||||
/* bind featherlight on ready if config autoBind is set */
|
||||
$(document).ready(function(){ Featherlight._onReady(); });
|
||||
});
|
||||
Reference in New Issue
Block a user