', {
"class": "tour-backdrop " + pos
});
$(step.backdropContainer).append($backdrop);
switch (pos) {
case 'top':
_results.push($backdrop.height(data.offset.top > 0 ? data.offset.top : 0).width(width).offset({
top: 0,
left: 0
}));
break;
case 'bottom':
_results.push($backdrop.offset({
top: data.offset.top + data.height,
left: 0
}).height(height - (data.offset.top + data.height)).width(width));
break;
case 'left':
_results.push($backdrop.offset({
top: data.offset.top,
left: 0
}).height(data.height).width(data.offset.left > 0 ? data.offset.left : 0));
break;
case 'right':
_results.push($backdrop.offset({
top: data.offset.top,
left: data.offset.left + data.width
}).height(data.height).width(width - (data.offset.left + data.width)));
break;
default:
_results.push(void 0);
}
}
return _results;
};
Tour.prototype._showOverlayElement = function (step) {
var $backdropElement, elementData;
$backdropElement = $(step.backdropElement);
if ($backdropElement.length === 0) {
elementData = {
width: 0,
height: 0,
offset: {
top: 0,
left: 0
}
};
} else {
elementData = {
width: $backdropElement.innerWidth(),
height: $backdropElement.innerHeight(),
offset: $backdropElement.offset()
};
$backdropElement.addClass('tour-step-backdrop');
if (step.backdropPadding) {
elementData = this._applyBackdropPadding(step.backdropPadding, elementData);
}
}
return this._showBackground(step, elementData);
};
Tour.prototype._hideOverlayElement = function (step) {
var $backdrop, pos, _ref;
$(step.backdropElement).removeClass('tour-step-backdrop');
_ref = this.backdrops;
for (pos in _ref) {
$backdrop = _ref[pos];
if ($backdrop && $backdrop.remove !== void 0) {
$backdrop.remove();
}
}
return this.backdrops = [];
};
Tour.prototype._applyBackdropPadding = function (padding, data) {
if (typeof padding === 'object') {
if (padding.top == null) {
padding.top = 0;
}
if (padding.right == null) {
padding.right = 0;
}
if (padding.bottom == null) {
padding.bottom = 0;
}
if (padding.left == null) {
padding.left = 0;
}
data.offset.top = data.offset.top - padding.top;
data.offset.left = data.offset.left - padding.left;
data.width = data.width + padding.left + padding.right;
data.height = data.height + padding.top + padding.bottom;
} else {
data.offset.top = data.offset.top - padding;
data.offset.left = data.offset.left - padding;
data.width = data.width + (padding * 2);
data.height = data.height + (padding * 2);
}
return data;
};
Tour.prototype._clearTimer = function () {
window.clearTimeout(this._timer);
this._timer = null;
return this._duration = null;
};
Tour.prototype._getProtocol = function (url) {
url = url.split('://');
if (url.length > 1) {
return url[0];
} else {
return 'http';
}
};
Tour.prototype._getHost = function (url) {
url = url.split('//');
url = url.length > 1 ? url[1] : url[0];
return url.split('/')[0];
};
Tour.prototype._getPath = function (path) {
return path.replace(/\/?$/, '').split('?')[0].split('#')[0];
};
Tour.prototype._getQuery = function (path) {
return this._getParams(path, '?');
};
Tour.prototype._getHash = function (path) {
return this._getParams(path, '#');
};
Tour.prototype._getParams = function (path, start) {
var param, params, paramsObject, _i, _len;
params = path.split(start);
if (params.length === 1) {
return {};
}
params = params[1].split('&');
paramsObject = {};
for (_i = 0, _len = params.length; _i < _len; _i++) {
param = params[_i];
param = param.split('=');
paramsObject[param[0]] = param[1] || '';
}
return paramsObject;
};
Tour.prototype._equal = function (obj1, obj2) {
var k, obj1Keys, obj2Keys, v, _i, _len;
if ({}.toString.call(obj1) === '[object Object]' && {}.toString.call(obj2) === '[object Object]') {
obj1Keys = Object.keys(obj1);
obj2Keys = Object.keys(obj2);
if (obj1Keys.length !== obj2Keys.length) {
return false;
}
for (k in obj1) {
v = obj1[k];
if (!this._equal(obj2[k], v)) {
return false;
}
}
return true;
} else if ({}.toString.call(obj1) === '[object Array]' && {}.toString.call(obj2) === '[object Array]') {
if (obj1.length !== obj2.length) {
return false;
}
for (k = _i = 0, _len = obj1.length; _i < _len; k = ++_i) {
v = obj1[k];
if (!this._equal(v, obj2[k])) {
return false;
}
}
return true;
} else {
return obj1 === obj2;
}
};
return Tour;
})();
return Tour;
});;
; (function (window, document, undefined) {
"use strict";
(function e(t, n, r) { function s(o, u) { if (!n[o]) { if (!t[o]) { var a = typeof require == "function" && require; if (!u && a) return a(o, !0); if (i) return i(o, !0); var f = new Error("Cannot find module '" + o + "'"); throw f.code = "MODULE_NOT_FOUND", f } var l = n[o] = { exports: {} }; t[o][0].call(l.exports, function (e) { var n = t[o][1][e]; return s(n ? n : e) }, l, l.exports, e, t, n, r) } return n[o].exports } var i = typeof require == "function" && require; for (var o = 0; o < r.length; o++) s(r[o]); return s })({
1: [function (require, module, exports) {
// SweetAlert
// 2014-2015 (c) - Tristan Edwards
// github.com/t4t5/sweetalert
/*
* jQuery-like functions for manipulating the DOM
*/
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _modulesHandleDom = require('./modules/handle-dom');
/*
* Handy utilities
*/
var _modulesUtils = require('./modules/utils');
/*
* Handle sweetAlert's DOM elements
*/
var _modulesHandleSwalDom = require('./modules/handle-swal-dom');
// Handle button events and keyboard events
var _modulesHandleClick = require('./modules/handle-click');
var _modulesHandleKey = require('./modules/handle-key');
var _modulesHandleKey2 = _interopRequireDefault(_modulesHandleKey);
// Default values
var _modulesDefaultParams = require('./modules/default-params');
var _modulesDefaultParams2 = _interopRequireDefault(_modulesDefaultParams);
var _modulesSetParams = require('./modules/set-params');
var _modulesSetParams2 = _interopRequireDefault(_modulesSetParams);
/*
* Remember state in cases where opening and handling a modal will fiddle with it.
* (We also use window.previousActiveElement as a global variable)
*/
var previousWindowKeyDown;
var lastFocusedButton;
var previousKeyDownListener;
var isModalOpened = false;
/*
* Global sweetAlert function
* (this is what the user calls)
*/
var sweetAlert, swal;
exports['default'] = sweetAlert = swal = function () {
var customizations = arguments[0];
(0, _modulesHandleDom.addClass)(document.body, 'stop-scrolling');
(0, _modulesHandleSwalDom.resetInput)();
/*
* Use argument if defined or default value from params object otherwise.
* Supports the case where a default value is boolean true and should be
* overridden by a corresponding explicit argument which is boolean false.
*/
function argumentOrDefault(key) {
var args = customizations;
return args[key] === undefined ? _modulesDefaultParams2['default'][key] : args[key];
}
if (customizations === undefined) {
(0, _modulesUtils.logStr)('SweetAlert expects at least 1 attribute!');
return false;
}
var params = (0, _modulesUtils.extend)({}, _modulesDefaultParams2['default']);
switch (typeof customizations) {
// Ex: swal("Hello", "Just testing", "info");
case 'string':
params.title = customizations;
params.text = arguments[1] || '';
params.type = arguments[2] || '';
break;
// Ex: swal({ title:"Hello", text: "Just testing", type: "info" });
case 'object':
if (customizations.title === undefined) {
(0, _modulesUtils.logStr)('Missing "title" argument!');
return false;
}
params.title = customizations.title;
for (var customName in _modulesDefaultParams2['default']) {
params[customName] = argumentOrDefault(customName);
}
// Show "Confirm" instead of "OK" if cancel button is visible
params.confirmButtonText = params.showCancelButton ? 'Confirm' : _modulesDefaultParams2['default'].confirmButtonText;
params.confirmButtonText = argumentOrDefault('confirmButtonText');
// Callback function when clicking on "OK"/"Cancel"
params.doneFunction = arguments[1] || null;
break;
default:
(0, _modulesUtils.logStr)('Unexpected type of argument! Expected "string" or "object", got ' + typeof customizations);
return false;
}
(0, _modulesSetParams2['default'])(params);
(0, _modulesHandleSwalDom.fixVerticalPosition)();
(0, _modulesHandleSwalDom.openModal)(arguments[1]);
// Modal interactions
var modal = (0, _modulesHandleSwalDom.getModal)();
/*
* Make sure all modal buttons respond to all events
*/
var $buttons = modal.querySelectorAll('button');
var buttonEvents = ['onclick', 'onmouseover', 'onmouseout', 'onmousedown', 'onmouseup', 'onfocus'];
var onButtonEvent = function onButtonEvent(e) {
return (0, _modulesHandleClick.handleButton)(e, params, modal);
};
for (var btnIndex = 0; btnIndex < $buttons.length; btnIndex++) {
for (var evtIndex = 0; evtIndex < buttonEvents.length; evtIndex++) {
var btnEvt = buttonEvents[evtIndex];
$buttons[btnIndex][btnEvt] = onButtonEvent;
}
}
// Clicking outside the modal dismisses it (if allowed by user)
(0, _modulesHandleSwalDom.getOverlay)().onclick = onButtonEvent;
// bind keydown only when there's modal opening
if (!isModalOpened) {
isModalOpened = true;
// keep in in memery, recovery it after modal closed
previousWindowKeyDown = window.onkeydown;
// remove listener on window
window.onkeydown = null;
var onKeyEvent = function onKeyEvent(e) {
return (0, _modulesHandleKey2['default'])(e, params, modal);
};
// for remove it when closing
previousKeyDownListener = onKeyEvent;
window.addEventListener('keydown', previousKeyDownListener);
}
window.onfocus = function () {
// When the user has focused away and focused back from the whole window.
setTimeout(function () {
// Put in a timeout to jump out of the event sequence.
// Calling focus() in the event sequence confuses things.
if (lastFocusedButton !== undefined) {
lastFocusedButton.focus();
lastFocusedButton = undefined;
}
}, 0);
};
// Show alert with enabled buttons always
swal.enableButtons();
};
/*
* Set default params for each popup
* @param {Object} userParams
*/
sweetAlert.setDefaults = swal.setDefaults = function (userParams) {
if (!userParams) {
throw new Error('userParams is required');
}
if (typeof userParams !== 'object') {
throw new Error('userParams has to be a object');
}
(0, _modulesUtils.extend)(_modulesDefaultParams2['default'], userParams);
};
/*
* Animation when closing modal
*/
sweetAlert.close = swal.close = function () {
var modal = (0, _modulesHandleSwalDom.getModal)();
(0, _modulesHandleDom.fadeOut)((0, _modulesHandleSwalDom.getOverlay)(), 5);
(0, _modulesHandleDom.fadeOut)(modal, 5);
(0, _modulesHandleDom.removeClass)(modal, 'showSweetAlert');
(0, _modulesHandleDom.addClass)(modal, 'hideSweetAlert');
(0, _modulesHandleDom.removeClass)(modal, 'visible');
/*
* Reset icon animations
*/
var $successIcon = modal.querySelector('.sa-icon.sa-success');
(0, _modulesHandleDom.removeClass)($successIcon, 'animate');
(0, _modulesHandleDom.removeClass)($successIcon.querySelector('.sa-tip'), 'animateSuccessTip');
(0, _modulesHandleDom.removeClass)($successIcon.querySelector('.sa-long'), 'animateSuccessLong');
var $errorIcon = modal.querySelector('.sa-icon.sa-error');
(0, _modulesHandleDom.removeClass)($errorIcon, 'animateErrorIcon');
(0, _modulesHandleDom.removeClass)($errorIcon.querySelector('.sa-x-mark'), 'animateXMark');
var $warningIcon = modal.querySelector('.sa-icon.sa-warning');
(0, _modulesHandleDom.removeClass)($warningIcon, 'pulseWarning');
(0, _modulesHandleDom.removeClass)($warningIcon.querySelector('.sa-body'), 'pulseWarningIns');
(0, _modulesHandleDom.removeClass)($warningIcon.querySelector('.sa-dot'), 'pulseWarningIns');
// Reset custom class (delay so that UI changes aren't visible)
setTimeout(function () {
var customClass = modal.getAttribute('data-custom-class');
(0, _modulesHandleDom.removeClass)(modal, customClass);
}, 300);
// Make page scrollable again
(0, _modulesHandleDom.removeClass)(document.body, 'stop-scrolling');
// Reset the page to its previous state
window.onkeydown = previousWindowKeyDown;
window.removeEventListener('keydown', previousKeyDownListener);
isModalOpened = false;
if (window.previousActiveElement) {
window.previousActiveElement.focus();
}
lastFocusedButton = undefined;
clearTimeout(modal.timeout);
return true;
};
/*
* Validation of the input field is done by user
* If something is wrong => call showInputError with errorMessage
*/
sweetAlert.showInputError = swal.showInputError = function (errorMessage) {
var modal = (0, _modulesHandleSwalDom.getModal)();
var $errorIcon = modal.querySelector('.sa-input-error');
(0, _modulesHandleDom.addClass)($errorIcon, 'show');
var $errorContainer = modal.querySelector('.sa-error-container');
(0, _modulesHandleDom.addClass)($errorContainer, 'show');
$errorContainer.querySelector('p').innerHTML = errorMessage;
setTimeout(function () {
sweetAlert.enableButtons();
}, 1);
modal.querySelector('input').focus();
};
/*
* Reset input error DOM elements
*/
sweetAlert.resetInputError = swal.resetInputError = function (event) {
// If press enter => ignore
if (event && event.keyCode === 13) {
return false;
}
var $modal = (0, _modulesHandleSwalDom.getModal)();
var $errorIcon = $modal.querySelector('.sa-input-error');
(0, _modulesHandleDom.removeClass)($errorIcon, 'show');
var $errorContainer = $modal.querySelector('.sa-error-container');
(0, _modulesHandleDom.removeClass)($errorContainer, 'show');
};
/*
* Disable confirm and cancel buttons
*/
sweetAlert.disableButtons = swal.disableButtons = function (event) {
var modal = (0, _modulesHandleSwalDom.getModal)();
var $confirmButton = modal.querySelector('button.confirm');
var $cancelButton = modal.querySelector('button.cancel');
$confirmButton.disabled = true;
$cancelButton.disabled = true;
};
/*
* Enable confirm and cancel buttons
*/
sweetAlert.enableButtons = swal.enableButtons = function (event) {
var modal = (0, _modulesHandleSwalDom.getModal)();
var $confirmButton = modal.querySelector('button.confirm');
var $cancelButton = modal.querySelector('button.cancel');
$confirmButton.disabled = false;
$cancelButton.disabled = false;
};
if (typeof window !== 'undefined') {
// The 'handle-click' module requires
// that 'sweetAlert' was set as global.
window.sweetAlert = window.swal = sweetAlert;
} else {
(0, _modulesUtils.logStr)('SweetAlert is a frontend module!');
}
module.exports = exports['default'];
}, { "./modules/default-params": 2, "./modules/handle-click": 3, "./modules/handle-dom": 4, "./modules/handle-key": 5, "./modules/handle-swal-dom": 6, "./modules/set-params": 8, "./modules/utils": 9 }], 2: [function (require, module, exports) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var defaultParams = {
title: '',
text: '',
type: null,
allowOutsideClick: false,
showConfirmButton: true,
showCancelButton: false,
closeOnConfirm: true,
closeOnCancel: true,
confirmButtonText: 'OK',
confirmButtonColor: false,
cancelButtonText: 'Cancel',
imageUrl: null,
imageSize: null,
timer: null,
customClass: '',
html: false,
animation: true,
allowEscapeKey: true,
inputType: 'text',
inputPlaceholder: '',
inputValue: '',
showLoaderOnConfirm: false
};
exports['default'] = defaultParams;
module.exports = exports['default'];
}, {}], 3: [function (require, module, exports) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var _utils = require('./utils');
var _handleSwalDom = require('./handle-swal-dom');
var _handleDom = require('./handle-dom');
/*
* User clicked on "Confirm"/"OK" or "Cancel"
*/
var handleButton = function handleButton(event, params, modal) {
var e = event || window.event;
var target = e.target || e.srcElement;
var targetedConfirm = target.className.indexOf('confirm') !== -1;
var targetedOverlay = target.className.indexOf('sweet-overlay') !== -1;
var modalIsVisible = (0, _handleDom.hasClass)(modal, 'visible');
var doneFunctionExists = params.doneFunction && modal.getAttribute('data-has-done-function') === 'true';
// Since the user can change the background-color of the confirm button programmatically,
// we must calculate what the color should be on hover/active
var normalColor, hoverColor, activeColor;
if (targetedConfirm && params.confirmButtonColor) {
normalColor = params.confirmButtonColor;
hoverColor = (0, _utils.colorLuminance)(normalColor, -0.04);
activeColor = (0, _utils.colorLuminance)(normalColor, -0.14);
}
function shouldSetConfirmButtonColor(color) {
if (targetedConfirm && params.confirmButtonColor) {
target.style.backgroundColor = color;
}
}
switch (e.type) {
case 'mouseover':
shouldSetConfirmButtonColor(hoverColor);
break;
case 'mouseout':
shouldSetConfirmButtonColor(normalColor);
break;
case 'mousedown':
shouldSetConfirmButtonColor(activeColor);
break;
case 'mouseup':
shouldSetConfirmButtonColor(hoverColor);
break;
case 'focus':
var $confirmButton = modal.querySelector('button.confirm');
var $cancelButton = modal.querySelector('button.cancel');
if (targetedConfirm) {
$cancelButton.style.boxShadow = 'none';
} else {
$confirmButton.style.boxShadow = 'none';
}
break;
case 'click':
var clickedOnModal = modal === target;
var clickedOnModalChild = (0, _handleDom.isDescendant)(modal, target);
// Ignore click outside if allowOutsideClick is false
if (!clickedOnModal && !clickedOnModalChild && modalIsVisible && !params.allowOutsideClick) {
break;
}
if (targetedConfirm && doneFunctionExists && modalIsVisible) {
handleConfirm(modal, params);
} else if (doneFunctionExists && modalIsVisible || targetedOverlay) {
handleCancel(modal, params);
} else if ((0, _handleDom.isDescendant)(modal, target) && target.tagName === 'BUTTON') {
sweetAlert.close();
}
break;
}
};
/*
* User clicked on "Confirm"/"OK"
*/
var handleConfirm = function handleConfirm(modal, params) {
var callbackValue = true;
if ((0, _handleDom.hasClass)(modal, 'show-input')) {
callbackValue = modal.querySelector('input').value;
if (!callbackValue) {
callbackValue = '';
}
}
params.doneFunction(callbackValue);
if (params.closeOnConfirm) {
sweetAlert.close();
}
// Disable cancel and confirm button if the parameter is true
if (params.showLoaderOnConfirm) {
sweetAlert.disableButtons();
}
};
/*
* User clicked on "Cancel"
*/
var handleCancel = function handleCancel(modal, params) {
// Check if callback function expects a parameter (to track cancel actions)
var functionAsStr = String(params.doneFunction).replace(/\s/g, '');
var functionHandlesCancel = functionAsStr.substring(0, 9) === 'function(' && functionAsStr.substring(9, 10) !== ')';
if (functionHandlesCancel) {
params.doneFunction(false);
}
if (params.closeOnCancel) {
sweetAlert.close();
}
};
exports['default'] = {
handleButton: handleButton,
handleConfirm: handleConfirm,
handleCancel: handleCancel
};
module.exports = exports['default'];
}, { "./handle-dom": 4, "./handle-swal-dom": 6, "./utils": 9 }], 4: [function (require, module, exports) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var hasClass = function hasClass(elem, className) {
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
};
var addClass = function addClass(elem, className) {
if (!hasClass(elem, className)) {
elem.className += ' ' + className;
}
};
var removeClass = function removeClass(elem, className) {
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
if (hasClass(elem, className)) {
while (newClass.indexOf(' ' + className + ' ') >= 0) {
newClass = newClass.replace(' ' + className + ' ', ' ');
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
}
};
var escapeHtml = function escapeHtml(str) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(str));
return div.innerHTML;
};
var _show = function _show(elem) {
elem.style.opacity = '';
elem.style.display = 'block';
};
var show = function show(elems) {
if (elems && !elems.length) {
return _show(elems);
}
for (var i = 0; i < elems.length; ++i) {
_show(elems[i]);
}
};
var _hide = function _hide(elem) {
elem.style.opacity = '';
elem.style.display = 'none';
};
var hide = function hide(elems) {
if (elems && !elems.length) {
return _hide(elems);
}
for (var i = 0; i < elems.length; ++i) {
_hide(elems[i]);
}
};
var isDescendant = function isDescendant(parent, child) {
var node = child.parentNode;
while (node !== null) {
if (node === parent) {
return true;
}
node = node.parentNode;
}
return false;
};
var getTopMargin = function getTopMargin(elem) {
elem.style.left = '-9999px';
elem.style.display = 'block';
var height = elem.clientHeight,
padding;
if (typeof getComputedStyle !== "undefined") {
// IE 8
padding = parseInt(getComputedStyle(elem).getPropertyValue('padding-top'), 10);
} else {
padding = parseInt(elem.currentStyle.padding);
}
elem.style.left = '';
elem.style.display = 'none';
return '-' + parseInt((height + padding) / 2) + 'px';
};
var fadeIn = function fadeIn(elem, interval) {
if (+elem.style.opacity < 1) {
interval = interval || 16;
elem.style.opacity = 0;
elem.style.display = 'block';
var last = +new Date();
var tick = function tick() {
elem.style.opacity = +elem.style.opacity + (new Date() - last) / 100;
last = +new Date();
if (+elem.style.opacity < 1) {
setTimeout(tick, interval);
}
};
tick();
}
elem.style.display = 'block'; //fallback IE8
};
var fadeOut = function fadeOut(elem, interval) {
interval = interval || 16;
elem.style.opacity = 1;
var last = +new Date();
var tick = function tick() {
elem.style.opacity = +elem.style.opacity - (new Date() - last) / 100;
last = +new Date();
if (+elem.style.opacity > 0) {
setTimeout(tick, interval);
} else {
elem.style.display = 'none';
}
};
tick();
};
var fireClick = function fireClick(node) {
// Taken from http://www.nonobtrusive.com/2011/11/29/programatically-fire-crossbrowser-click-event-with-javascript/
// Then fixed for today's Chrome browser.
if (typeof MouseEvent === 'function') {
// Up-to-date approach
var mevt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
node.dispatchEvent(mevt);
} else if (document.createEvent) {
// Fallback
var evt = document.createEvent('MouseEvents');
evt.initEvent('click', false, false);
node.dispatchEvent(evt);
} else if (document.createEventObject) {
node.fireEvent('onclick');
} else if (typeof node.onclick === 'function') {
node.onclick();
}
};
var stopEventPropagation = function stopEventPropagation(e) {
// In particular, make sure the space bar doesn't scroll the main window.
if (typeof e.stopPropagation === 'function') {
e.stopPropagation();
e.preventDefault();
} else if (window.event && window.event.hasOwnProperty('cancelBubble')) {
window.event.cancelBubble = true;
}
};
exports.hasClass = hasClass;
exports.addClass = addClass;
exports.removeClass = removeClass;
exports.escapeHtml = escapeHtml;
exports._show = _show;
exports.show = show;
exports._hide = _hide;
exports.hide = hide;
exports.isDescendant = isDescendant;
exports.getTopMargin = getTopMargin;
exports.fadeIn = fadeIn;
exports.fadeOut = fadeOut;
exports.fireClick = fireClick;
exports.stopEventPropagation = stopEventPropagation;
}, {}], 5: [function (require, module, exports) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var _handleDom = require('./handle-dom');
var _handleSwalDom = require('./handle-swal-dom');
var handleKeyDown = function handleKeyDown(event, params, modal) {
var e = event || window.event;
var keyCode = e.keyCode || e.which;
var $okButton = modal.querySelector('button.confirm');
var $cancelButton = modal.querySelector('button.cancel');
var $modalButtons = modal.querySelectorAll('button[tabindex]');
if ([9, 13, 32, 27].indexOf(keyCode) === -1) {
// Don't do work on keys we don't care about.
return;
}
var $targetElement = e.target || e.srcElement;
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
for (var i = 0; i < $modalButtons.length; i++) {
if ($targetElement === $modalButtons[i]) {
btnIndex = i;
break;
}
}
if (keyCode === 9) {
// TAB
if (btnIndex === -1) {
// No button focused. Jump to the confirm button.
$targetElement = $okButton;
} else {
// Cycle to the next button
if (btnIndex === $modalButtons.length - 1) {
$targetElement = $modalButtons[0];
} else {
$targetElement = $modalButtons[btnIndex + 1];
}
}
(0, _handleDom.stopEventPropagation)(e);
$targetElement.focus();
if (params.confirmButtonColor) {
(0, _handleSwalDom.setFocusStyle)($targetElement, params.confirmButtonColor);
}
} else {
if (keyCode === 13) {
if ($targetElement.tagName === 'INPUT') {
$targetElement = $okButton;
$okButton.focus();
}
if (btnIndex === -1) {
// ENTER/SPACE clicked outside of a button.
$targetElement = $okButton;
} else {
// Do nothing - let the browser handle it.
$targetElement = undefined;
}
} else if (keyCode === 27 && params.allowEscapeKey === true) {
$targetElement = $cancelButton;
(0, _handleDom.fireClick)($targetElement, e);
} else {
// Fallback - let the browser handle it.
$targetElement = undefined;
}
}
};
exports['default'] = handleKeyDown;
module.exports = exports['default'];
}, { "./handle-dom": 4, "./handle-swal-dom": 6 }], 6: [function (require, module, exports) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _utils = require('./utils');
var _handleDom = require('./handle-dom');
var _defaultParams = require('./default-params');
var _defaultParams2 = _interopRequireDefault(_defaultParams);
/*
* Add modal + overlay to DOM
*/
var _injectedHtml = require('./injected-html');
var _injectedHtml2 = _interopRequireDefault(_injectedHtml);
var modalClass = '.sweet-alert';
var overlayClass = '.sweet-overlay';
var sweetAlertInitialize = function sweetAlertInitialize() {
var sweetWrap = document.createElement('div');
sweetWrap.innerHTML = _injectedHtml2['default'];
// Append elements to body
while (sweetWrap.firstChild) {
document.body.appendChild(sweetWrap.firstChild);
}
};
/*
* Get DOM element of modal
*/
var getModal = function getModal() {
var $modal = document.querySelector(modalClass);
if (!$modal) {
sweetAlertInitialize();
$modal = getModal();
}
return $modal;
};
/*
* Get DOM element of input (in modal)
*/
var getInput = function getInput() {
var $modal = getModal();
if ($modal) {
return $modal.querySelector('input');
}
};
/*
* Get DOM element of overlay
*/
var getOverlay = function getOverlay() {
return document.querySelector(overlayClass);
};
/*
* Add box-shadow style to button (depending on its chosen bg-color)
*/
var setFocusStyle = function setFocusStyle($button, bgColor) {
var rgbColor = (0, _utils.hexToRgb)(bgColor);
$button.style.boxShadow = '0 0 2px rgba(' + rgbColor + ', 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)';
};
/*
* Animation when opening modal
*/
var openModal = function openModal(callback) {
var $modal = getModal();
(0, _handleDom.fadeIn)(getOverlay(), 10);
(0, _handleDom.show)($modal);
(0, _handleDom.addClass)($modal, 'showSweetAlert');
(0, _handleDom.removeClass)($modal, 'hideSweetAlert');
window.previousActiveElement = document.activeElement;
var $okButton = $modal.querySelector('button.confirm');
$okButton.focus();
setTimeout(function () {
(0, _handleDom.addClass)($modal, 'visible');
}, 500);
var timer = $modal.getAttribute('data-timer');
if (timer !== 'null' && timer !== '') {
var timerCallback = callback;
$modal.timeout = setTimeout(function () {
var doneFunctionExists = (timerCallback || null) && $modal.getAttribute('data-has-done-function') === 'true';
if (doneFunctionExists) {
timerCallback(null);
} else {
sweetAlert.close();
}
}, timer);
}
};
/*
* Reset the styling of the input
* (for example if errors have been shown)
*/
var resetInput = function resetInput() {
var $modal = getModal();
var $input = getInput();
(0, _handleDom.removeClass)($modal, 'show-input');
$input.value = _defaultParams2['default'].inputValue;
$input.setAttribute('type', _defaultParams2['default'].inputType);
$input.setAttribute('placeholder', _defaultParams2['default'].inputPlaceholder);
resetInputError();
};
var resetInputError = function resetInputError(event) {
// If press enter => ignore
if (event && event.keyCode === 13) {
return false;
}
var $modal = getModal();
var $errorIcon = $modal.querySelector('.sa-input-error');
(0, _handleDom.removeClass)($errorIcon, 'show');
var $errorContainer = $modal.querySelector('.sa-error-container');
(0, _handleDom.removeClass)($errorContainer, 'show');
};
/*
* Set "margin-top"-property on modal based on its computed height
*/
var fixVerticalPosition = function fixVerticalPosition() {
var $modal = getModal();
$modal.style.marginTop = (0, _handleDom.getTopMargin)(getModal());
};
exports.sweetAlertInitialize = sweetAlertInitialize;
exports.getModal = getModal;
exports.getOverlay = getOverlay;
exports.getInput = getInput;
exports.setFocusStyle = setFocusStyle;
exports.openModal = openModal;
exports.resetInput = resetInput;
exports.resetInputError = resetInputError;
exports.fixVerticalPosition = fixVerticalPosition;
}, { "./default-params": 2, "./handle-dom": 4, "./injected-html": 7, "./utils": 9 }], 7: [function (require, module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var injectedHTML =
// Dark overlay
"" +
// Modal
"
" +
// Error icon
"
\n \n \n \n \n
" +
// Warning icon
"
\n \n \n
" +
// Info icon
"" +
// Success icon
"
\n \n \n\n \n \n
" + "" +
// Title, text and input
"
Title
\n
Text
\n " +
// Input errors
"
\n
!
\n
Not valid!
\n
" +
// Cancel and confirm buttons
"
\n \n
\n " +
// Loading animation
"
\n \n \n \n
\n
\n
" +
// End of modal
"
";
exports["default"] = injectedHTML;
module.exports = exports["default"];
}, {}], 8: [function (require, module, exports) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var _utils = require('./utils');
var _handleSwalDom = require('./handle-swal-dom');
var _handleDom = require('./handle-dom');
/*
* Set type, text and actions on modal
*/
var alertTypes = ['error', 'warning', 'info', 'success', 'input', 'prompt'];
var setParameters = function setParameters(params) {
var modal = (0, _handleSwalDom.getModal)();
var $title = modal.querySelector('h2');
var $text = modal.querySelector('p');
var $cancelBtn = modal.querySelector('button.cancel');
var $confirmBtn = modal.querySelector('button.confirm');
/*
* Title
*/
$title.innerHTML = params.html ? params.title : (0, _handleDom.escapeHtml)(params.title).split('\n').join(' ');
/*
* Text
*/
$text.innerHTML = params.html ? params.text : (0, _handleDom.escapeHtml)(params.text || '').split('\n').join(' ');
if (params.text) (0, _handleDom.show)($text);
/*
* Custom class
*/
if (params.customClass) {
(0, _handleDom.addClass)(modal, params.customClass);
modal.setAttribute('data-custom-class', params.customClass);
} else {
// Find previously set classes and remove them
var customClass = modal.getAttribute('data-custom-class');
(0, _handleDom.removeClass)(modal, customClass);
modal.setAttribute('data-custom-class', '');
}
/*
* Icon
*/
(0, _handleDom.hide)(modal.querySelectorAll('.sa-icon'));
if (params.type && !(0, _utils.isIE8)()) {
var _ret = (function () {
var validType = false;
for (var i = 0; i < alertTypes.length; i++) {
if (params.type === alertTypes[i]) {
validType = true;
break;
}
}
if (!validType) {
logStr('Unknown alert type: ' + params.type);
return {
v: false
};
}
var typesWithIcons = ['success', 'error', 'warning', 'info'];
var $icon = undefined;
if (typesWithIcons.indexOf(params.type) !== -1) {
$icon = modal.querySelector('.sa-icon.' + 'sa-' + params.type);
(0, _handleDom.show)($icon);
}
var $input = (0, _handleSwalDom.getInput)();
// Animate icon
switch (params.type) {
case 'success':
(0, _handleDom.addClass)($icon, 'animate');
(0, _handleDom.addClass)($icon.querySelector('.sa-tip'), 'animateSuccessTip');
(0, _handleDom.addClass)($icon.querySelector('.sa-long'), 'animateSuccessLong');
break;
case 'error':
(0, _handleDom.addClass)($icon, 'animateErrorIcon');
(0, _handleDom.addClass)($icon.querySelector('.sa-x-mark'), 'animateXMark');
break;
case 'warning':
(0, _handleDom.addClass)($icon, 'pulseWarning');
(0, _handleDom.addClass)($icon.querySelector('.sa-body'), 'pulseWarningIns');
(0, _handleDom.addClass)($icon.querySelector('.sa-dot'), 'pulseWarningIns');
break;
case 'input':
case 'prompt':
$input.setAttribute('type', params.inputType);
$input.value = params.inputValue;
$input.setAttribute('placeholder', params.inputPlaceholder);
(0, _handleDom.addClass)(modal, 'show-input');
setTimeout(function () {
$input.focus();
$input.addEventListener('keyup', swal.resetInputError);
}, 400);
break;
}
})();
if (typeof _ret === 'object') return _ret.v;
}
/*
* Custom image
*/
if (params.imageUrl) {
var $customIcon = modal.querySelector('.sa-icon.sa-custom');
$customIcon.style.backgroundImage = 'url(' + params.imageUrl + ')';
(0, _handleDom.show)($customIcon);
var _imgWidth = 80;
var _imgHeight = 80;
if (params.imageSize) {
var dimensions = params.imageSize.toString().split('x');
var imgWidth = dimensions[0];
var imgHeight = dimensions[1];
if (!imgWidth || !imgHeight) {
logStr('Parameter imageSize expects value with format WIDTHxHEIGHT, got ' + params.imageSize);
} else {
_imgWidth = imgWidth;
_imgHeight = imgHeight;
}
}
$customIcon.setAttribute('style', $customIcon.getAttribute('style') + 'width:' + _imgWidth + 'px; height:' + _imgHeight + 'px');
}
/*
* Show cancel button?
*/
modal.setAttribute('data-has-cancel-button', params.showCancelButton);
if (params.showCancelButton) {
$cancelBtn.style.display = 'inline-block';
} else {
(0, _handleDom.hide)($cancelBtn);
}
/*
* Show confirm button?
*/
modal.setAttribute('data-has-confirm-button', params.showConfirmButton);
if (params.showConfirmButton) {
$confirmBtn.style.display = 'inline-block';
} else {
(0, _handleDom.hide)($confirmBtn);
}
/*
* Custom text on cancel/confirm buttons
*/
if (params.cancelButtonText) {
$cancelBtn.innerHTML = (0, _handleDom.escapeHtml)(params.cancelButtonText);
}
if (params.confirmButtonText) {
$confirmBtn.innerHTML = (0, _handleDom.escapeHtml)(params.confirmButtonText);
}
/*
* Custom color on confirm button
*/
if (params.confirmButtonColor) {
// Set confirm button to selected background color
$confirmBtn.style.backgroundColor = params.confirmButtonColor;
// Set the confirm button color to the loading ring
$confirmBtn.style.borderLeftColor = params.confirmLoadingButtonColor;
$confirmBtn.style.borderRightColor = params.confirmLoadingButtonColor;
// Set box-shadow to default focused button
(0, _handleSwalDom.setFocusStyle)($confirmBtn, params.confirmButtonColor);
}
/*
* Allow outside click
*/
modal.setAttribute('data-allow-outside-click', params.allowOutsideClick);
/*
* Callback function
*/
var hasDoneFunction = params.doneFunction ? true : false;
modal.setAttribute('data-has-done-function', hasDoneFunction);
/*
* Animation
*/
if (!params.animation) {
modal.setAttribute('data-animation', 'none');
} else if (typeof params.animation === 'string') {
modal.setAttribute('data-animation', params.animation); // Custom animation
} else {
modal.setAttribute('data-animation', 'pop');
}
/*
* Timer
*/
modal.setAttribute('data-timer', params.timer);
};
exports['default'] = setParameters;
module.exports = exports['default'];
}, { "./handle-dom": 4, "./handle-swal-dom": 6, "./utils": 9 }], 9: [function (require, module, exports) {
/*
* Allow user to pass their own params
*/
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var extend = function extend(a, b) {
for (var key in b) {
if (b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
return a;
};
/*
* Convert HEX codes to RGB values (#000000 -> rgb(0,0,0))
*/
var hexToRgb = function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) : null;
};
/*
* Check if the user is using Internet Explorer 8 (for fallbacks)
*/
var isIE8 = function isIE8() {
return window.attachEvent && !window.addEventListener;
};
/*
* IE compatible logging for developers
*/
var logStr = function logStr(string) {
if (window.console) {
// IE...
window.console.log('SweetAlert: ' + string);
}
};
/*
* Set hover, active and focus-states for buttons
* (source: http://www.sitepoint.com/javascript-generate-lighter-darker-color)
*/
var colorLuminance = function colorLuminance(hex, lum) {
// Validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
lum = lum || 0;
// Convert to decimal and change luminosity
var rgb = '#';
var c;
var i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i * 2, 2), 16);
c = Math.round(Math.min(Math.max(0, c + c * lum), 255)).toString(16);
rgb += ('00' + c).substr(c.length);
}
return rgb;
};
exports.extend = extend;
exports.hexToRgb = hexToRgb;
exports.isIE8 = isIE8;
exports.logStr = logStr;
exports.colorLuminance = colorLuminance;
}, {}]
}, {}, [1]);
/*
* Use SweetAlert with RequireJS
*/
if (typeof define === 'function' && define.amd) {
define(function () {
return sweetAlert;
});
} else if (typeof module !== 'undefined' && module.exports) {
module.exports = sweetAlert;
}
})(window, document);;
// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @externs_url https://raw.githubusercontent.com/google/closure-compiler/master/contrib/externs/maps/google_maps_api_v3.js
// ==/ClosureCompiler==
/**
* @name MarkerClusterer for Google Maps v3
* @version version 1.0
* @author Luke Mahe
* @fileoverview
* The library creates and manages per-zoom-level clusters for large amounts of
* markers.
*
* This is a v3 implementation of the
* v2 MarkerClusterer.
*/
/**
* @license
* Copyright 2010 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* A Marker Clusterer that clusters markers.
*
* @param {google.maps.Map} map The Google map to attach to.
* @param {Array.=} opt_markers Optional markers to add to
* the cluster.
* @param {Object=} opt_options support the following options:
* 'gridSize': (number) The grid size of a cluster in pixels.
* 'maxZoom': (number) The maximum zoom level that a marker can be part of a
* cluster.
* 'zoomOnClick': (boolean) Whether the default behaviour of clicking on a
* cluster is to zoom into it.
* 'averageCenter': (boolean) Whether the center of each cluster should be
* the average of all markers in the cluster.
* 'minimumClusterSize': (number) The minimum number of markers to be in a
* cluster before the markers are hidden and a count
* is shown.
* 'styles': (object) An object that has style properties:
* 'url': (string) The image url.
* 'height': (number) The image height.
* 'width': (number) The image width.
* 'anchor': (Array) The anchor position of the label text.
* 'textColor': (string) The text color.
* 'textSize': (number) The text size.
* 'backgroundPosition': (string) The position of the backgound x, y.
* 'iconAnchor': (Array) The anchor position of the icon x, y.
* @constructor
* @extends google.maps.OverlayView
*/
function MarkerClusterer(map, opt_markers, opt_options) {
// MarkerClusterer implements google.maps.OverlayView interface. We use the
// extend function to extend MarkerClusterer with google.maps.OverlayView
// because it might not always be available when the code is defined so we
// look for it at the last possible moment. If it doesn't exist now then
// there is no point going ahead :)
this.extend(MarkerClusterer, google.maps.OverlayView);
this.map_ = map;
/**
* @type {Array.}
* @private
*/
this.markers_ = [];
/**
* @type {Array.}
*/
this.clusters_ = [];
this.sizes = [53, 56, 66, 78, 90];
/**
* @private
*/
this.styles_ = [];
/**
* @type {boolean}
* @private
*/
this.ready_ = false;
var options = opt_options || {};
/**
* @type {number}
* @private
*/
this.gridSize_ = options['gridSize'] || 60;
/**
* @private
*/
this.minClusterSize_ = options['minimumClusterSize'] || 2;
/**
* @type {?number}
* @private
*/
this.maxZoom_ = options['maxZoom'] || null;
this.styles_ = options['styles'] || [];
/**
* @type {string}
* @private
*/
this.imagePath_ = options['imagePath'] ||
this.MARKER_CLUSTER_IMAGE_PATH_;
/**
* @type {string}
* @private
*/
this.imageExtension_ = options['imageExtension'] ||
this.MARKER_CLUSTER_IMAGE_EXTENSION_;
/**
* @type {boolean}
* @private
*/
this.zoomOnClick_ = true;
if (options['zoomOnClick'] != undefined) {
this.zoomOnClick_ = options['zoomOnClick'];
}
/**
* @type {boolean}
* @private
*/
this.averageCenter_ = false;
if (options['averageCenter'] != undefined) {
this.averageCenter_ = options['averageCenter'];
}
this.setupStyles_();
this.setMap(map);
/**
* @type {number}
* @private
*/
this.prevZoom_ = this.map_.getZoom();
// Add the map event listeners
var that = this;
google.maps.event.addListener(this.map_, 'zoom_changed', function () {
var zoom = that.map_.getZoom();
if (that.prevZoom_ != zoom) {
that.prevZoom_ = zoom;
that.resetViewport();
}
});
google.maps.event.addListener(this.map_, 'idle', function () {
that.redraw();
});
// Finally, add the markers
if (opt_markers && opt_markers.length) {
this.addMarkers(opt_markers, false);
}
}
/**
* The marker cluster image path.
*
* @type {string}
* @private
*/
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = '../images/m';
/**
* The marker cluster image path.
*
* @type {string}
* @private
*/
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_EXTENSION_ = 'png';
/**
* Extends a objects prototype by anothers.
*
* @param {Object} obj1 The object to be extended.
* @param {Object} obj2 The object to extend with.
* @return {Object} The new extended object.
* @ignore
*/
MarkerClusterer.prototype.extend = function (obj1, obj2) {
return (function (object) {
for (var property in object.prototype) {
this.prototype[property] = object.prototype[property];
}
return this;
}).apply(obj1, [obj2]);
};
/**
* Implementaion of the interface method.
* @ignore
*/
MarkerClusterer.prototype.onAdd = function () {
this.setReady_(true);
};
/**
* Implementaion of the interface method.
* @ignore
*/
MarkerClusterer.prototype.draw = function () { };
/**
* Sets up the styles object.
*
* @private
*/
MarkerClusterer.prototype.setupStyles_ = function () {
if (this.styles_.length) {
return;
}
for (var i = 0, size; size = this.sizes[i]; i++) {
this.styles_.push({
url: this.imagePath_ + (i + 1) + '.' + this.imageExtension_,
height: size,
width: size
});
}
};
/**
* Fit the map to the bounds of the markers in the clusterer.
*/
MarkerClusterer.prototype.fitMapToMarkers = function () {
var markers = this.getMarkers();
var bounds = new google.maps.LatLngBounds();
for (var i = 0, marker; marker = markers[i]; i++) {
bounds.extend(marker.getPosition());
}
this.map_.fitBounds(bounds);
};
/**
* Sets the styles.
*
* @param {Object} styles The style to set.
*/
MarkerClusterer.prototype.setStyles = function (styles) {
this.styles_ = styles;
};
/**
* Gets the styles.
*
* @return {Object} The styles object.
*/
MarkerClusterer.prototype.getStyles = function () {
return this.styles_;
};
/**
* Whether zoom on click is set.
*
* @return {boolean} True if zoomOnClick_ is set.
*/
MarkerClusterer.prototype.isZoomOnClick = function () {
return this.zoomOnClick_;
};
/**
* Whether average center is set.
*
* @return {boolean} True if averageCenter_ is set.
*/
MarkerClusterer.prototype.isAverageCenter = function () {
return this.averageCenter_;
};
/**
* Returns the array of markers in the clusterer.
*
* @return {Array.} The markers.
*/
MarkerClusterer.prototype.getMarkers = function () {
return this.markers_;
};
/**
* Returns the number of markers in the clusterer
*
* @return {Number} The number of markers.
*/
MarkerClusterer.prototype.getTotalMarkers = function () {
return this.markers_.length;
};
/**
* Sets the max zoom for the clusterer.
*
* @param {number} maxZoom The max zoom level.
*/
MarkerClusterer.prototype.setMaxZoom = function (maxZoom) {
this.maxZoom_ = maxZoom;
};
/**
* Gets the max zoom for the clusterer.
*
* @return {number} The max zoom level.
*/
MarkerClusterer.prototype.getMaxZoom = function () {
return this.maxZoom_;
};
/**
* The function for calculating the cluster icon image.
*
* @param {Array.} markers The markers in the clusterer.
* @param {number} numStyles The number of styles available.
* @return {Object} A object properties: 'text' (string) and 'index' (number).
* @private
*/
MarkerClusterer.prototype.calculator_ = function (markers, numStyles) {
var index = 0;
var count = markers.length;
var dv = count;
while (dv !== 0) {
dv = parseInt(dv / 10, 10);
index++;
}
index = Math.min(index, numStyles);
return {
text: count,
index: index
};
};
/**
* Set the calculator function.
*
* @param {function(Array, number)} calculator The function to set as the
* calculator. The function should return a object properties:
* 'text' (string) and 'index' (number).
*
*/
MarkerClusterer.prototype.setCalculator = function (calculator) {
this.calculator_ = calculator;
};
/**
* Get the calculator function.
*
* @return {function(Array, number)} the calculator function.
*/
MarkerClusterer.prototype.getCalculator = function () {
return this.calculator_;
};
/**
* Add an array of markers to the clusterer.
*
* @param {Array.} markers The markers to add.
* @param {boolean=} opt_nodraw Whether to redraw the clusters.
*/
MarkerClusterer.prototype.addMarkers = function (markers, opt_nodraw) {
for (var i = 0, marker; marker = markers[i]; i++) {
this.pushMarkerTo_(marker);
}
if (!opt_nodraw) {
this.redraw();
}
};
/**
* Pushes a marker to the clusterer.
*
* @param {google.maps.Marker} marker The marker to add.
* @private
*/
MarkerClusterer.prototype.pushMarkerTo_ = function (marker) {
marker.isAdded = false;
if (marker['draggable']) {
// If the marker is draggable add a listener so we update the clusters on
// the drag end.
var that = this;
google.maps.event.addListener(marker, 'dragend', function () {
marker.isAdded = false;
that.repaint();
});
}
this.markers_.push(marker);
};
/**
* Adds a marker to the clusterer and redraws if needed.
*
* @param {google.maps.Marker} marker The marker to add.
* @param {boolean=} opt_nodraw Whether to redraw the clusters.
*/
MarkerClusterer.prototype.addMarker = function (marker, opt_nodraw) {
this.pushMarkerTo_(marker);
if (!opt_nodraw) {
this.redraw();
}
};
/**
* Removes a marker and returns true if removed, false if not
*
* @param {google.maps.Marker} marker The marker to remove
* @return {boolean} Whether the marker was removed or not
* @private
*/
MarkerClusterer.prototype.removeMarker_ = function (marker) {
var index = -1;
if (this.markers_.indexOf) {
index = this.markers_.indexOf(marker);
} else {
for (var i = 0, m; m = this.markers_[i]; i++) {
if (m == marker) {
index = i;
break;
}
}
}
if (index == -1) {
// Marker is not in our list of markers.
return false;
}
marker.setMap(null);
this.markers_.splice(index, 1);
return true;
};
/**
* Remove a marker from the cluster.
*
* @param {google.maps.Marker} marker The marker to remove.
* @param {boolean=} opt_nodraw Optional boolean to force no redraw.
* @return {boolean} True if the marker was removed.
*/
MarkerClusterer.prototype.removeMarker = function (marker, opt_nodraw) {
var removed = this.removeMarker_(marker);
if (!opt_nodraw && removed) {
this.resetViewport();
this.redraw();
return true;
} else {
return false;
}
};
/**
* Removes an array of markers from the cluster.
*
* @param {Array.} markers The markers to remove.
* @param {boolean=} opt_nodraw Optional boolean to force no redraw.
*/
MarkerClusterer.prototype.removeMarkers = function (markers, opt_nodraw) {
var removed = false;
for (var i = 0, marker; marker = markers[i]; i++) {
var r = this.removeMarker_(marker);
removed = removed || r;
}
if (!opt_nodraw && removed) {
this.resetViewport();
this.redraw();
return true;
}
};
/**
* Sets the clusterer's ready state.
*
* @param {boolean} ready The state.
* @private
*/
MarkerClusterer.prototype.setReady_ = function (ready) {
if (!this.ready_) {
this.ready_ = ready;
this.createClusters_();
}
};
/**
* Returns the number of clusters in the clusterer.
*
* @return {number} The number of clusters.
*/
MarkerClusterer.prototype.getTotalClusters = function () {
return this.clusters_.length;
};
/**
* Returns the google map that the clusterer is associated with.
*
* @return {google.maps.Map} The map.
*/
MarkerClusterer.prototype.getMap = function () {
return this.map_;
};
/**
* Sets the google map that the clusterer is associated with.
*
* @param {google.maps.Map} map The map.
*/
MarkerClusterer.prototype.setMap = function (map) {
this.map_ = map;
};
/**
* Returns the size of the grid.
*
* @return {number} The grid size.
*/
MarkerClusterer.prototype.getGridSize = function () {
return this.gridSize_;
};
/**
* Sets the size of the grid.
*
* @param {number} size The grid size.
*/
MarkerClusterer.prototype.setGridSize = function (size) {
this.gridSize_ = size;
};
/**
* Returns the min cluster size.
*
* @return {number} The grid size.
*/
MarkerClusterer.prototype.getMinClusterSize = function () {
return this.minClusterSize_;
};
/**
* Sets the min cluster size.
*
* @param {number} size The grid size.
*/
MarkerClusterer.prototype.setMinClusterSize = function (size) {
this.minClusterSize_ = size;
};
/**
* Extends a bounds object by the grid size.
*
* @param {google.maps.LatLngBounds} bounds The bounds to extend.
* @return {google.maps.LatLngBounds} The extended bounds.
*/
MarkerClusterer.prototype.getExtendedBounds = function (bounds) {
var projection = this.getProjection();
// Turn the bounds into latlng.
var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
bounds.getNorthEast().lng());
var bl = new google.maps.LatLng(bounds.getSouthWest().lat(),
bounds.getSouthWest().lng());
// Convert the points to pixels and the extend out by the grid size.
var trPix = projection.fromLatLngToDivPixel(tr);
trPix.x += this.gridSize_;
trPix.y -= this.gridSize_;
var blPix = projection.fromLatLngToDivPixel(bl);
blPix.x -= this.gridSize_;
blPix.y += this.gridSize_;
// Convert the pixel points back to LatLng
var ne = projection.fromDivPixelToLatLng(trPix);
var sw = projection.fromDivPixelToLatLng(blPix);
// Extend the bounds to contain the new bounds.
bounds.extend(ne);
bounds.extend(sw);
return bounds;
};
/**
* Determins if a marker is contained in a bounds.
*
* @param {google.maps.Marker} marker The marker to check.
* @param {google.maps.LatLngBounds} bounds The bounds to check against.
* @return {boolean} True if the marker is in the bounds.
* @private
*/
MarkerClusterer.prototype.isMarkerInBounds_ = function (marker, bounds) {
return bounds.contains(marker.getPosition());
};
/**
* Clears all clusters and markers from the clusterer.
*/
MarkerClusterer.prototype.clearMarkers = function () {
this.resetViewport(true);
// Set the markers a empty array.
this.markers_ = [];
};
/**
* Clears all existing clusters and recreates them.
* @param {boolean} opt_hide To also hide the marker.
*/
MarkerClusterer.prototype.resetViewport = function (opt_hide) {
// Remove all the clusters
for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
cluster.remove();
}
// Reset the markers to not be added and to be invisible.
for (var i = 0, marker; marker = this.markers_[i]; i++) {
marker.isAdded = false;
if (opt_hide) {
marker.setMap(null);
}
}
this.clusters_ = [];
};
/**
*
*/
MarkerClusterer.prototype.repaint = function () {
var oldClusters = this.clusters_.slice();
this.clusters_.length = 0;
this.resetViewport();
this.redraw();
// Remove the old clusters.
// Do it in a timeout so the other clusters have been drawn first.
window.setTimeout(function () {
for (var i = 0, cluster; cluster = oldClusters[i]; i++) {
cluster.remove();
}
}, 0);
};
/**
* Redraws the clusters.
*/
MarkerClusterer.prototype.redraw = function () {
this.createClusters_();
};
/**
* Calculates the distance between two latlng locations in km.
* @see http://www.movable-type.co.uk/scripts/latlong.html
*
* @param {google.maps.LatLng} p1 The first lat lng point.
* @param {google.maps.LatLng} p2 The second lat lng point.
* @return {number} The distance between the two points in km.
* @private
*/
MarkerClusterer.prototype.distanceBetweenPoints_ = function (p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371; // Radius of the Earth in km
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
};
/**
* Add a marker to a cluster, or creates a new cluster.
*
* @param {google.maps.Marker} marker The marker to add.
* @private
*/
MarkerClusterer.prototype.addToClosestCluster_ = function (marker) {
var distance = 40000; // Some large number
var clusterToAddTo = null;
var pos = marker.getPosition();
for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
var center = cluster.getCenter();
if (center) {
var d = this.distanceBetweenPoints_(center, marker.getPosition());
if (d < distance) {
distance = d;
clusterToAddTo = cluster;
}
}
}
if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {
clusterToAddTo.addMarker(marker);
} else {
var cluster = new Cluster(this);
cluster.addMarker(marker);
this.clusters_.push(cluster);
}
};
/**
* Creates the clusters.
*
* @private
*/
MarkerClusterer.prototype.createClusters_ = function () {
if (!this.ready_) {
return;
}
// Get our current map view bounds.
// Create a new bounds object so we don't affect the map.
var mapBounds = new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),
this.map_.getBounds().getNorthEast());
var bounds = this.getExtendedBounds(mapBounds);
for (var i = 0, marker; marker = this.markers_[i]; i++) {
if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {
this.addToClosestCluster_(marker);
}
}
};
/**
* A cluster that contains markers.
*
* @param {MarkerClusterer} markerClusterer The markerclusterer that this
* cluster is associated with.
* @constructor
* @ignore
*/
function Cluster(markerClusterer) {
this.markerClusterer_ = markerClusterer;
this.map_ = markerClusterer.getMap();
this.gridSize_ = markerClusterer.getGridSize();
this.minClusterSize_ = markerClusterer.getMinClusterSize();
this.averageCenter_ = markerClusterer.isAverageCenter();
this.center_ = null;
this.markers_ = [];
this.bounds_ = null;
this.clusterIcon_ = new ClusterIcon(this, markerClusterer.getStyles(),
markerClusterer.getGridSize());
}
/**
* Determins if a marker is already added to the cluster.
*
* @param {google.maps.Marker} marker The marker to check.
* @return {boolean} True if the marker is already added.
*/
Cluster.prototype.isMarkerAlreadyAdded = function (marker) {
if (this.markers_.indexOf) {
return this.markers_.indexOf(marker) != -1;
} else {
for (var i = 0, m; m = this.markers_[i]; i++) {
if (m == marker) {
return true;
}
}
}
return false;
};
/**
* Add a marker the cluster.
*
* @param {google.maps.Marker} marker The marker to add.
* @return {boolean} True if the marker was added.
*/
Cluster.prototype.addMarker = function (marker) {
if (this.isMarkerAlreadyAdded(marker)) {
return false;
}
if (!this.center_) {
this.center_ = marker.getPosition();
this.calculateBounds_();
} else {
if (this.averageCenter_) {
var l = this.markers_.length + 1;
var lat = (this.center_.lat() * (l - 1) + marker.getPosition().lat()) / l;
var lng = (this.center_.lng() * (l - 1) + marker.getPosition().lng()) / l;
this.center_ = new google.maps.LatLng(lat, lng);
this.calculateBounds_();
}
}
marker.isAdded = true;
this.markers_.push(marker);
var len = this.markers_.length;
if (len < this.minClusterSize_ && marker.getMap() != this.map_) {
// Min cluster size not reached so show the marker.
marker.setMap(this.map_);
}
if (len == this.minClusterSize_) {
// Hide the markers that were showing.
for (var i = 0; i < len; i++) {
this.markers_[i].setMap(null);
}
}
if (len >= this.minClusterSize_) {
marker.setMap(null);
}
this.updateIcon();
return true;
};
/**
* Returns the marker clusterer that the cluster is associated with.
*
* @return {MarkerClusterer} The associated marker clusterer.
*/
Cluster.prototype.getMarkerClusterer = function () {
return this.markerClusterer_;
};
/**
* Returns the bounds of the cluster.
*
* @return {google.maps.LatLngBounds} the cluster bounds.
*/
Cluster.prototype.getBounds = function () {
var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
var markers = this.getMarkers();
for (var i = 0, marker; marker = markers[i]; i++) {
bounds.extend(marker.getPosition());
}
return bounds;
};
/**
* Removes the cluster
*/
Cluster.prototype.remove = function () {
this.clusterIcon_.remove();
this.markers_.length = 0;
delete this.markers_;
};
/**
* Returns the center of the cluster.
*
* @return {number} The cluster center.
*/
Cluster.prototype.getSize = function () {
return this.markers_.length;
};
/**
* Returns the center of the cluster.
*
* @return {Array.} The cluster center.
*/
Cluster.prototype.getMarkers = function () {
return this.markers_;
};
/**
* Returns the center of the cluster.
*
* @return {google.maps.LatLng} The cluster center.
*/
Cluster.prototype.getCenter = function () {
return this.center_;
};
/**
* Calculated the extended bounds of the cluster with the grid.
*
* @private
*/
Cluster.prototype.calculateBounds_ = function () {
var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
this.bounds_ = this.markerClusterer_.getExtendedBounds(bounds);
};
/**
* Determines if a marker lies in the clusters bounds.
*
* @param {google.maps.Marker} marker The marker to check.
* @return {boolean} True if the marker lies in the bounds.
*/
Cluster.prototype.isMarkerInClusterBounds = function (marker) {
return this.bounds_.contains(marker.getPosition());
};
/**
* Returns the map that the cluster is associated with.
*
* @return {google.maps.Map} The map.
*/
Cluster.prototype.getMap = function () {
return this.map_;
};
/**
* Updates the cluster icon
*/
Cluster.prototype.updateIcon = function () {
var zoom = this.map_.getZoom();
var mz = this.markerClusterer_.getMaxZoom();
if (mz && zoom > mz) {
// The zoom is greater than our max zoom so show all the markers in cluster.
for (var i = 0, marker; marker = this.markers_[i]; i++) {
marker.setMap(this.map_);
}
return;
}
if (this.markers_.length < this.minClusterSize_) {
// Min cluster size not yet reached.
this.clusterIcon_.hide();
return;
}
var numStyles = this.markerClusterer_.getStyles().length;
var sums = this.markerClusterer_.getCalculator()(this.markers_, numStyles);
this.clusterIcon_.setCenter(this.center_);
this.clusterIcon_.setSums(sums);
this.clusterIcon_.show();
};
/**
* A cluster icon
*
* @param {Cluster} cluster The cluster to be associated with.
* @param {Object} styles An object that has style properties:
* 'url': (string) The image url.
* 'height': (number) The image height.
* 'width': (number) The image width.
* 'anchor': (Array) The anchor position of the label text.
* 'textColor': (string) The text color.
* 'textSize': (number) The text size.
* 'backgroundPosition: (string) The background postition x, y.
* @param {number=} opt_padding Optional padding to apply to the cluster icon.
* @constructor
* @extends google.maps.OverlayView
* @ignore
*/
function ClusterIcon(cluster, styles, opt_padding) {
cluster.getMarkerClusterer().extend(ClusterIcon, google.maps.OverlayView);
this.styles_ = styles;
this.padding_ = opt_padding || 0;
this.cluster_ = cluster;
this.center_ = null;
this.map_ = cluster.getMap();
this.div_ = null;
this.sums_ = null;
this.visible_ = false;
this.setMap(this.map_);
}
/**
* Triggers the clusterclick event and zoom's if the option is set.
*
* @param {google.maps.MouseEvent} event The event to propagate
*/
ClusterIcon.prototype.triggerClusterClick = function (event) {
var markerClusterer = this.cluster_.getMarkerClusterer();
// Trigger the clusterclick event.
google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_, event);
if (markerClusterer.isZoomOnClick()) {
// Zoom into the cluster.
this.map_.fitBounds(this.cluster_.getBounds());
}
};
/**
* Adding the cluster icon to the dom.
* @ignore
*/
ClusterIcon.prototype.onAdd = function () {
this.div_ = document.createElement('DIV');
if (this.visible_) {
var pos = this.getPosFromLatLng_(this.center_);
this.div_.style.cssText = this.createCss(pos);
this.div_.innerHTML = this.sums_.text;
}
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(this.div_);
var that = this;
var isDragging = false;
google.maps.event.addDomListener(this.div_, 'click', function (event) {
// Only perform click when not preceded by a drag
if (!isDragging) {
that.triggerClusterClick(event);
}
});
google.maps.event.addDomListener(this.div_, 'mousedown', function () {
isDragging = false;
});
google.maps.event.addDomListener(this.div_, 'mousemove', function () {
isDragging = true;
});
};
/**
* Returns the position to place the div dending on the latlng.
*
* @param {google.maps.LatLng} latlng The position in latlng.
* @return {google.maps.Point} The position in pixels.
* @private
*/
ClusterIcon.prototype.getPosFromLatLng_ = function (latlng) {
var pos = this.getProjection().fromLatLngToDivPixel(latlng);
if (typeof this.iconAnchor_ === 'object' && this.iconAnchor_.length === 2) {
pos.x -= this.iconAnchor_[0];
pos.y -= this.iconAnchor_[1];
} else {
pos.x -= parseInt(this.width_ / 2, 10);
pos.y -= parseInt(this.height_ / 2, 10);
}
return pos;
};
/**
* Draw the icon.
* @ignore
*/
ClusterIcon.prototype.draw = function () {
if (this.visible_) {
var pos = this.getPosFromLatLng_(this.center_);
this.div_.style.top = pos.y + 'px';
this.div_.style.left = pos.x + 'px';
}
};
/**
* Hide the icon.
*/
ClusterIcon.prototype.hide = function () {
if (this.div_) {
this.div_.style.display = 'none';
}
this.visible_ = false;
};
/**
* Position and show the icon.
*/
ClusterIcon.prototype.show = function () {
if (this.div_) {
var pos = this.getPosFromLatLng_(this.center_);
this.div_.style.cssText = this.createCss(pos);
this.div_.style.display = '';
}
this.visible_ = true;
};
/**
* Remove the icon from the map
*/
ClusterIcon.prototype.remove = function () {
this.setMap(null);
};
/**
* Implementation of the onRemove interface.
* @ignore
*/
ClusterIcon.prototype.onRemove = function () {
if (this.div_ && this.div_.parentNode) {
this.hide();
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
/**
* Set the sums of the icon.
*
* @param {Object} sums The sums containing:
* 'text': (string) The text to display in the icon.
* 'index': (number) The style index of the icon.
*/
ClusterIcon.prototype.setSums = function (sums) {
this.sums_ = sums;
this.text_ = sums.text;
this.index_ = sums.index;
if (this.div_) {
this.div_.innerHTML = sums.text;
}
this.useStyle();
};
/**
* Sets the icon to the the styles.
*/
ClusterIcon.prototype.useStyle = function () {
var index = Math.max(0, this.sums_.index - 1);
index = Math.min(this.styles_.length - 1, index);
var style = this.styles_[index];
this.url_ = style['url'];
this.height_ = style['height'];
this.width_ = style['width'];
this.textColor_ = style['textColor'];
this.anchor_ = style['anchor'];
this.textSize_ = style['textSize'];
this.backgroundPosition_ = style['backgroundPosition'];
this.backgroundSize_ = style['backgroundSize'];
this.iconAnchor_ = style['iconAnchor'];
};
/**
* Sets the center of the icon.
*
* @param {google.maps.LatLng} center The latlng to set as the center.
*/
ClusterIcon.prototype.setCenter = function (center) {
this.center_ = center;
};
/**
* Create the css text based on the position of the icon.
*
* @param {google.maps.Point} pos The position.
* @return {string} The css style text.
*/
ClusterIcon.prototype.createCss = function (pos) {
var style = [];
style.push('background-image:url(' + this.url_ + ');');
var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0';
style.push('background-position:' + backgroundPosition + ';');
var backgroundSize = this.backgroundSize_ ? this.backgroundSize_ : '100% 100%';
style.push('background-size:' + backgroundSize + ';');
if (typeof this.anchor_ === 'object') {
if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 &&
this.anchor_[0] < this.height_) {
style.push('height:' + (this.height_ - this.anchor_[0]) +
'px; padding-top:' + this.anchor_[0] + 'px;');
} else if (typeof this.anchor_[0] === 'number' && this.anchor_[0] < 0 &&
-this.anchor_[0] < this.height_) {
style.push('height:' + this.height_ + 'px; line-height:' + (this.height_ + this.anchor_[0]) +
'px;');
} else {
style.push('height:' + this.height_ + 'px; line-height:' + this.height_ +
'px;');
}
if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 &&
this.anchor_[1] < this.width_) {
style.push('width:' + (this.width_ - this.anchor_[1]) +
'px; padding-left:' + this.anchor_[1] + 'px;');
} else {
style.push('width:' + this.width_ + 'px; text-align:center;');
}
} else {
style.push('height:' + this.height_ + 'px; line-height:' +
this.height_ + 'px; width:' + this.width_ + 'px; text-align:center;');
}
var txtColor = this.textColor_ ? this.textColor_ : 'black';
var txtSize = this.textSize_ ? this.textSize_ : 11;
style.push('cursor:pointer; top:' + pos.y + 'px; left:' +
pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' +
txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold');
return style.join('');
};
// Export Symbols for Closure
// If you are not going to compile with closure then you can remove the
// code below.
window['MarkerClusterer'] = MarkerClusterer;
MarkerClusterer.prototype['addMarker'] = MarkerClusterer.prototype.addMarker;
MarkerClusterer.prototype['addMarkers'] = MarkerClusterer.prototype.addMarkers;
MarkerClusterer.prototype['clearMarkers'] =
MarkerClusterer.prototype.clearMarkers;
MarkerClusterer.prototype['fitMapToMarkers'] =
MarkerClusterer.prototype.fitMapToMarkers;
MarkerClusterer.prototype['getCalculator'] =
MarkerClusterer.prototype.getCalculator;
MarkerClusterer.prototype['getGridSize'] =
MarkerClusterer.prototype.getGridSize;
MarkerClusterer.prototype['getExtendedBounds'] =
MarkerClusterer.prototype.getExtendedBounds;
MarkerClusterer.prototype['getMap'] = MarkerClusterer.prototype.getMap;
MarkerClusterer.prototype['getMarkers'] = MarkerClusterer.prototype.getMarkers;
MarkerClusterer.prototype['getMaxZoom'] = MarkerClusterer.prototype.getMaxZoom;
MarkerClusterer.prototype['getStyles'] = MarkerClusterer.prototype.getStyles;
MarkerClusterer.prototype['getTotalClusters'] =
MarkerClusterer.prototype.getTotalClusters;
MarkerClusterer.prototype['getTotalMarkers'] =
MarkerClusterer.prototype.getTotalMarkers;
MarkerClusterer.prototype['redraw'] = MarkerClusterer.prototype.redraw;
MarkerClusterer.prototype['removeMarker'] =
MarkerClusterer.prototype.removeMarker;
MarkerClusterer.prototype['removeMarkers'] =
MarkerClusterer.prototype.removeMarkers;
MarkerClusterer.prototype['resetViewport'] =
MarkerClusterer.prototype.resetViewport;
MarkerClusterer.prototype['repaint'] =
MarkerClusterer.prototype.repaint;
MarkerClusterer.prototype['setCalculator'] =
MarkerClusterer.prototype.setCalculator;
MarkerClusterer.prototype['setGridSize'] =
MarkerClusterer.prototype.setGridSize;
MarkerClusterer.prototype['setMaxZoom'] =
MarkerClusterer.prototype.setMaxZoom;
MarkerClusterer.prototype['onAdd'] = MarkerClusterer.prototype.onAdd;
MarkerClusterer.prototype['draw'] = MarkerClusterer.prototype.draw;
Cluster.prototype['getCenter'] = Cluster.prototype.getCenter;
Cluster.prototype['getSize'] = Cluster.prototype.getSize;
Cluster.prototype['getMarkers'] = Cluster.prototype.getMarkers;
ClusterIcon.prototype['onAdd'] = ClusterIcon.prototype.onAdd;
ClusterIcon.prototype['draw'] = ClusterIcon.prototype.draw;
ClusterIcon.prototype['onRemove'] = ClusterIcon.prototype.onRemove;
(function(){/*
OverlappingMarkerSpiderfier
https://github.com/jawj/OverlappingMarkerSpiderfier
Copyright (c) 2011 - 2012 George MacKerron
Released under the MIT licence: http://opensource.org/licenses/mit-license
Note: The Google Maps API v3 must be included *before* this code
*/
var h=!0,u=null,v=!1;
(function(){var A,B={}.hasOwnProperty,C=[].slice;if(((A=this.google)!=u?A.maps:void 0)!=u)this.OverlappingMarkerSpiderfier=function(){function w(b,d){var a,g,f,e,c=this;this.map=b;d==u&&(d={});for(a in d)B.call(d,a)&&(g=d[a],this[a]=g);this.e=new this.constructor.g(this.map);this.n();this.b={};e=["click","zoom_changed","maptypeid_changed"];g=0;for(f=e.length;gd)return this;g=this.j.splice(d,1)[0];f=0;for(e=g.length;fa||this.b[b].splice(a,1);return this};c.clearListeners=function(b){this.b[b]=[];return this};c.trigger=function(){var b,d,a,g,f,e;d=arguments[0];b=2<=arguments.length?C.call(arguments,1):[];d=(a=this.b[d])!=u?a:[];e=[];g=0;for(f=d.length;gb;a=0<=b?++e:--e)a=this.circleStartAngle+a*g,c.push(new s.Point(d.x+f*Math.cos(a),d.y+f*Math.sin(a)));return c};c.v=function(b,d){var a,g,f,e,c;f=this.spiralLengthStart;a=0;c=[];for(g=e=0;0<=b?eb;g=0<=b?++e:--e)a+=this.spiralFootSeparation/f+5E-4*g,g=new s.Point(d.x+f*Math.cos(a),d.y+f*Math.sin(a)),f+=y*this.spiralLengthFactor/a,c.push(g);return c};c.F=function(b,d){var a,g,f,e,c,
m,l,x,n;e=b._omsData!=u;(!e||!this.keepSpiderfied)&&this.unspiderfy();if(e||this.map.getStreetView().getVisible()||"GoogleEarthAPI"===this.map.getMapTypeId())return this.trigger("click",b,d);e=[];c=[];a=this.nearbyDistance;m=a*a;f=this.c(b.position);n=this.a;l=0;for(x=n.length;l=this.circleSpiralSwitchover?this.v(q,a).reverse():this.u(q,a);a=function(){var a,d,k,q=this;k=[];a=0;for(d=e.length;a $().plugin('option', {...})
if (!PluginClass.prototype.option) {
// option setter
PluginClass.prototype.option = function (opts) {
// bail out if not an object
if (!$.isPlainObject(opts)) {
return;
}
this.options = $.extend(true, this.options, opts);
};
}
// make jQuery plugin
$.fn[namespace] = function (arg0 /*, arg1 */) {
if (typeof arg0 == 'string') {
// method call $().plugin( 'methodName', { options } )
// shift arguments by 1
var args = arraySlice.call(arguments, 1);
return methodCall(this, arg0, args);
}
// just $().plugin({ options })
plainCall(this, arg0);
return this;
};
// $().plugin('methodName')
function methodCall($elems, methodName, args) {
var returnValue;
var pluginMethodStr = '$().' + namespace + '("' + methodName + '")';
$elems.each(function (i, elem) {
// get instance
var instance = $.data(elem, namespace);
if (!instance) {
logError(namespace + ' not initialized. Cannot call methods, i.e. ' +
pluginMethodStr);
return;
}
var method = instance[methodName];
if (!method || methodName.charAt(0) == '_') {
logError(pluginMethodStr + ' is not a valid method');
return;
}
// apply method, get return value
var value = method.apply(instance, args);
// set return value if value is returned, use only first value
returnValue = returnValue === undefined ? value : returnValue;
});
return returnValue !== undefined ? returnValue : $elems;
}
function plainCall($elems, options) {
$elems.each(function (i, elem) {
var instance = $.data(elem, namespace);
if (instance) {
// set options & init
instance.option(options);
instance._init();
} else {
// initialize new instance
instance = new PluginClass(elem, options);
$.data(elem, namespace, instance);
}
});
}
updateJQuery($);
}
// ----- updateJQuery ----- //
// set $.bridget for v1 backwards compatibility
function updateJQuery($) {
if (!$ || ($ && $.bridget)) {
return;
}
$.bridget = jQueryBridget;
}
updateJQuery(jQuery || window.jQuery);
// ----- ----- //
return jQueryBridget;
}));
/*!
* getSize v2.0.2
* measure size of elements
* MIT license
*/
/*jshint browser: true, strict: true, undef: true, unused: true */
/*global define: false, module: false, console: false */
(function (window, factory) {
'use strict';
if (typeof define == 'function' && define.amd) {
// AMD
define('get-size/get-size', [], function () {
return factory();
});
} else if (typeof module == 'object' && module.exports) {
// CommonJS
module.exports = factory();
} else {
// browser global
window.getSize = factory();
}
})(window, function factory() {
'use strict';
// -------------------------- helpers -------------------------- //
// get a number from a string, not a percentage
function getStyleSize(value) {
var num = parseFloat(value);
// not a percent like '100%', and a number
var isValid = value.indexOf('%') == -1 && !isNaN(num);
return isValid && num;
}
function noop() { }
var logError = typeof console == 'undefined' ? noop :
function (message) {
console.error(message);
};
// -------------------------- measurements -------------------------- //
var measurements = [
'paddingLeft',
'paddingRight',
'paddingTop',
'paddingBottom',
'marginLeft',
'marginRight',
'marginTop',
'marginBottom',
'borderLeftWidth',
'borderRightWidth',
'borderTopWidth',
'borderBottomWidth'
];
var measurementsLength = measurements.length;
function getZeroSize() {
var size = {
width: 0,
height: 0,
innerWidth: 0,
innerHeight: 0,
outerWidth: 0,
outerHeight: 0
};
for (var i = 0; i < measurementsLength; i++) {
var measurement = measurements[i];
size[measurement] = 0;
}
return size;
}
// -------------------------- getStyle -------------------------- //
/**
* getStyle, get style of element, check for Firefox bug
* https://bugzilla.mozilla.org/show_bug.cgi?id=548397
*/
function getStyle(elem) {
var style = getComputedStyle(elem);
if (!style) {
logError('Style returned ' + style +
'. Are you running this code in a hidden iframe on Firefox? ' +
'See http://bit.ly/getsizebug1');
}
return style;
}
// -------------------------- setup -------------------------- //
var isSetup = false;
var isBoxSizeOuter;
/**
* setup
* check isBoxSizerOuter
* do on first getSize() rather than on page load for Firefox bug
*/
function setup() {
// setup once
if (isSetup) {
return;
}
isSetup = true;
// -------------------------- box sizing -------------------------- //
/**
* WebKit measures the outer-width on style.width on border-box elems
* IE & Firefox<29 measures the inner-width
*/
var div = document.createElement('div');
div.style.width = '200px';
div.style.padding = '1px 2px 3px 4px';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px 2px 3px 4px';
div.style.boxSizing = 'border-box';
var body = document.body || document.documentElement;
body.appendChild(div);
var style = getStyle(div);
getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize(style.width) == 200;
body.removeChild(div);
}
// -------------------------- getSize -------------------------- //
function getSize(elem) {
setup();
// use querySeletor if elem is string
if (typeof elem == 'string') {
elem = document.querySelector(elem);
}
// do not proceed on non-objects
if (!elem || typeof elem != 'object' || !elem.nodeType) {
return;
}
var style = getStyle(elem);
// if hidden, everything is 0
if (style.display == 'none') {
return getZeroSize();
}
var size = {};
size.width = elem.offsetWidth;
size.height = elem.offsetHeight;
var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
// get all measurements
for (var i = 0; i < measurementsLength; i++) {
var measurement = measurements[i];
var value = style[measurement];
var num = parseFloat(value);
// any 'auto', 'medium' value will be 0
size[measurement] = !isNaN(num) ? num : 0;
}
var paddingWidth = size.paddingLeft + size.paddingRight;
var paddingHeight = size.paddingTop + size.paddingBottom;
var marginWidth = size.marginLeft + size.marginRight;
var marginHeight = size.marginTop + size.marginBottom;
var borderWidth = size.borderLeftWidth + size.borderRightWidth;
var borderHeight = size.borderTopWidth + size.borderBottomWidth;
var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
// overwrite width and height if we can get it from style
var styleWidth = getStyleSize(style.width);
if (styleWidth !== false) {
size.width = styleWidth +
// add padding and border unless it's already including it
(isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth);
}
var styleHeight = getStyleSize(style.height);
if (styleHeight !== false) {
size.height = styleHeight +
// add padding and border unless it's already including it
(isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight);
}
size.innerWidth = size.width - (paddingWidth + borderWidth);
size.innerHeight = size.height - (paddingHeight + borderHeight);
size.outerWidth = size.width + marginWidth;
size.outerHeight = size.height + marginHeight;
return size;
}
return getSize;
});
/**
* EvEmitter v1.0.2
* Lil' event emitter
* MIT License
*/
/* jshint unused: true, undef: true, strict: true */
(function (global, factory) {
// universal module definition
/* jshint strict: false */ /* globals define, module */
if (typeof define == 'function' && define.amd) {
// AMD - RequireJS
define('ev-emitter/ev-emitter', factory);
} else if (typeof module == 'object' && module.exports) {
// CommonJS - Browserify, Webpack
module.exports = factory();
} else {
// Browser globals
global.EvEmitter = factory();
}
}(this, function () {
function EvEmitter() { }
var proto = EvEmitter.prototype;
proto.on = function (eventName, listener) {
if (!eventName || !listener) {
return;
}
// set events hash
var events = this._events = this._events || {};
// set listeners array
var listeners = events[eventName] = events[eventName] || [];
// only add once
if (listeners.indexOf(listener) == -1) {
listeners.push(listener);
}
return this;
};
proto.once = function (eventName, listener) {
if (!eventName || !listener) {
return;
}
// add event
this.on(eventName, listener);
// set once flag
// set onceEvents hash
var onceEvents = this._onceEvents = this._onceEvents || {};
// set onceListeners object
var onceListeners = onceEvents[eventName] = onceEvents[eventName] || {};
// set flag
onceListeners[listener] = true;
return this;
};
proto.off = function (eventName, listener) {
var listeners = this._events && this._events[eventName];
if (!listeners || !listeners.length) {
return;
}
var index = listeners.indexOf(listener);
if (index != -1) {
listeners.splice(index, 1);
}
return this;
};
proto.emitEvent = function (eventName, args) {
var listeners = this._events && this._events[eventName];
if (!listeners || !listeners.length) {
return;
}
var i = 0;
var listener = listeners[i];
args = args || [];
// once stuff
var onceListeners = this._onceEvents && this._onceEvents[eventName];
while (listener) {
var isOnce = onceListeners && onceListeners[listener];
if (isOnce) {
// remove listener
// remove before trigger to prevent recursion
this.off(eventName, listener);
// unset once flag
delete onceListeners[listener];
}
// trigger listener
listener.apply(this, args);
// get next listener
i += isOnce ? 0 : 1;
listener = listeners[i];
}
return this;
};
return EvEmitter;
}));
/**
* matchesSelector v2.0.1
* matchesSelector( element, '.selector' )
* MIT license
*/
/*jshint browser: true, strict: true, undef: true, unused: true */
(function (window, factory) {
/*global define: false, module: false */
'use strict';
// universal module definition
if (typeof define == 'function' && define.amd) {
// AMD
define('desandro-matches-selector/matches-selector', factory);
} else if (typeof module == 'object' && module.exports) {
// CommonJS
module.exports = factory();
} else {
// browser global
window.matchesSelector = factory();
}
}(window, function factory() {
'use strict';
var matchesMethod = (function () {
var ElemProto = Element.prototype;
// check for the standard method name first
if (ElemProto.matches) {
return 'matches';
}
// check un-prefixed
if (ElemProto.matchesSelector) {
return 'matchesSelector';
}
// check vendor prefixes
var prefixes = ['webkit', 'moz', 'ms', 'o'];
for (var i = 0; i < prefixes.length; i++) {
var prefix = prefixes[i];
var method = prefix + 'MatchesSelector';
if (ElemProto[method]) {
return method;
}
}
})();
return function matchesSelector(elem, selector) {
return elem[matchesMethod](selector);
};
}));
/**
* Fizzy UI utils v2.0.1
* MIT license
*/
/*jshint browser: true, undef: true, unused: true, strict: true */
(function (window, factory) {
// universal module definition
/*jshint strict: false */ /*globals define, module, require */
if (typeof define == 'function' && define.amd) {
// AMD
define('fizzy-ui-utils/utils', [
'desandro-matches-selector/matches-selector'
], function (matchesSelector) {
return factory(window, matchesSelector);
});
} else if (typeof module == 'object' && module.exports) {
// CommonJS
module.exports = factory(
window,
require('desandro-matches-selector')
);
} else {
// browser global
window.fizzyUIUtils = factory(
window,
window.matchesSelector
);
}
}(window, function factory(window, matchesSelector) {
var utils = {};
// ----- extend ----- //
// extends objects
utils.extend = function (a, b) {
for (var prop in b) {
a[prop] = b[prop];
}
return a;
};
// ----- modulo ----- //
utils.modulo = function (num, div) {
return ((num % div) + div) % div;
};
// ----- makeArray ----- //
// turn element or nodeList into an array
utils.makeArray = function (obj) {
var ary = [];
if (Array.isArray(obj)) {
// use object if already an array
ary = obj;
} else if (obj && typeof obj.length == 'number') {
// convert nodeList to array
for (var i = 0; i < obj.length; i++) {
ary.push(obj[i]);
}
} else {
// array of single index
ary.push(obj);
}
return ary;
};
// ----- removeFrom ----- //
utils.removeFrom = function (ary, obj) {
var index = ary.indexOf(obj);
if (index != -1) {
ary.splice(index, 1);
}
};
// ----- getParent ----- //
utils.getParent = function (elem, selector) {
while (elem != document.body) {
elem = elem.parentNode;
if (matchesSelector(elem, selector)) {
return elem;
}
}
};
// ----- getQueryElement ----- //
// use element as selector string
utils.getQueryElement = function (elem) {
if (typeof elem == 'string') {
return document.querySelector(elem);
}
return elem;
};
// ----- handleEvent ----- //
// enable .ontype to trigger from .addEventListener( elem, 'type' )
utils.handleEvent = function (event) {
var method = 'on' + event.type;
if (this[method]) {
this[method](event);
}
};
// ----- filterFindElements ----- //
utils.filterFindElements = function (elems, selector) {
// make array of elems
elems = utils.makeArray(elems);
var ffElems = [];
elems.forEach(function (elem) {
// check that elem is an actual element
if (!(elem instanceof HTMLElement)) {
return;
}
// add elem if no selector
if (!selector) {
ffElems.push(elem);
return;
}
// filter & find items if we have a selector
// filter
if (matchesSelector(elem, selector)) {
ffElems.push(elem);
}
// find children
var childElems = elem.querySelectorAll(selector);
// concat childElems to filterFound array
for (var i = 0; i < childElems.length; i++) {
ffElems.push(childElems[i]);
}
});
return ffElems;
};
// ----- debounceMethod ----- //
utils.debounceMethod = function (_class, methodName, threshold) {
// original method
var method = _class.prototype[methodName];
var timeoutName = methodName + 'Timeout';
_class.prototype[methodName] = function () {
var timeout = this[timeoutName];
if (timeout) {
clearTimeout(timeout);
}
var args = arguments;
var _this = this;
this[timeoutName] = setTimeout(function () {
method.apply(_this, args);
delete _this[timeoutName];
}, threshold || 100);
};
};
// ----- docReady ----- //
utils.docReady = function (callback) {
if (document.readyState == 'complete') {
callback();
} else {
document.addEventListener('DOMContentLoaded', callback);
}
};
// ----- htmlInit ----- //
// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/
utils.toDashed = function (str) {
return str.replace(/(.)([A-Z])/g, function (match, $1, $2) {
return $1 + '-' + $2;
}).toLowerCase();
};
var console = window.console;
/**
* allow user to initialize classes via [data-namespace] or .js-namespace class
* htmlInit( Widget, 'widgetName' )
* options are parsed from data-namespace-options
*/
utils.htmlInit = function (WidgetClass, namespace) {
utils.docReady(function () {
var dashedNamespace = utils.toDashed(namespace);
var dataAttr = 'data-' + dashedNamespace;
var dataAttrElems = document.querySelectorAll('[' + dataAttr + ']');
var jsDashElems = document.querySelectorAll('.js-' + dashedNamespace);
var elems = utils.makeArray(dataAttrElems)
.concat(utils.makeArray(jsDashElems));
var dataOptionsAttr = dataAttr + '-options';
var jQuery = window.jQuery;
elems.forEach(function (elem) {
var attr = elem.getAttribute(dataAttr) ||
elem.getAttribute(dataOptionsAttr);
var options;
try {
options = attr && JSON.parse(attr);
} catch (error) {
// log error, do not initialize
if (console) {
console.error('Error parsing ' + dataAttr + ' on ' + elem.className +
': ' + error);
}
return;
}
// initialize
var instance = new WidgetClass(elem, options);
// make available via $().data('layoutname')
if (jQuery) {
jQuery.data(elem, namespace, instance);
}
});
});
};
// ----- ----- //
return utils;
}));
/**
* Outlayer Item
*/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /* globals define, module, require */
if (typeof define == 'function' && define.amd) {
// AMD - RequireJS
define('outlayer/item', [
'ev-emitter/ev-emitter',
'get-size/get-size'
],
factory
);
} else if (typeof module == 'object' && module.exports) {
// CommonJS - Browserify, Webpack
module.exports = factory(
require('ev-emitter'),
require('get-size')
);
} else {
// browser global
window.Outlayer = {};
window.Outlayer.Item = factory(
window.EvEmitter,
window.getSize
);
}
}(window, function factory(EvEmitter, getSize) {
'use strict';
// ----- helpers ----- //
function isEmptyObj(obj) {
for (var prop in obj) {
return false;
}
prop = null;
return true;
}
// -------------------------- CSS3 support -------------------------- //
var docElemStyle = document.documentElement.style;
var transitionProperty = typeof docElemStyle.transition == 'string' ?
'transition' : 'WebkitTransition';
var transformProperty = typeof docElemStyle.transform == 'string' ?
'transform' : 'WebkitTransform';
var transitionEndEvent = {
WebkitTransition: 'webkitTransitionEnd',
transition: 'transitionend'
}[transitionProperty];
// cache all vendor properties that could have vendor prefix
var vendorProperties = {
transform: transformProperty,
transition: transitionProperty,
transitionDuration: transitionProperty + 'Duration',
transitionProperty: transitionProperty + 'Property',
transitionDelay: transitionProperty + 'Delay'
};
// -------------------------- Item -------------------------- //
function Item(element, layout) {
if (!element) {
return;
}
this.element = element;
// parent layout class, i.e. Masonry, Isotope, or Packery
this.layout = layout;
this.position = {
x: 0,
y: 0
};
this._create();
}
// inherit EvEmitter
var proto = Item.prototype = Object.create(EvEmitter.prototype);
proto.constructor = Item;
proto._create = function () {
// transition objects
this._transn = {
ingProperties: {},
clean: {},
onEnd: {}
};
this.css({
position: 'absolute'
});
};
// trigger specified handler for event type
proto.handleEvent = function (event) {
var method = 'on' + event.type;
if (this[method]) {
this[method](event);
}
};
proto.getSize = function () {
this.size = getSize(this.element);
};
/**
* apply CSS styles to element
* @param {Object} style
*/
proto.css = function (style) {
var elemStyle = this.element.style;
for (var prop in style) {
// use vendor property if available
var supportedProp = vendorProperties[prop] || prop;
elemStyle[supportedProp] = style[prop];
}
};
// measure position, and sets it
proto.getPosition = function () {
var style = getComputedStyle(this.element);
var isOriginLeft = this.layout._getOption('originLeft');
var isOriginTop = this.layout._getOption('originTop');
var xValue = style[isOriginLeft ? 'left' : 'right'];
var yValue = style[isOriginTop ? 'top' : 'bottom'];
// convert percent to pixels
var layoutSize = this.layout.size;
var x = xValue.indexOf('%') != -1 ?
(parseFloat(xValue) / 100) * layoutSize.width : parseInt(xValue, 10);
var y = yValue.indexOf('%') != -1 ?
(parseFloat(yValue) / 100) * layoutSize.height : parseInt(yValue, 10);
// clean up 'auto' or other non-integer values
x = isNaN(x) ? 0 : x;
y = isNaN(y) ? 0 : y;
// remove padding from measurement
x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight;
y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom;
this.position.x = x;
this.position.y = y;
};
// set settled position, apply padding
proto.layoutPosition = function () {
var layoutSize = this.layout.size;
var style = {};
var isOriginLeft = this.layout._getOption('originLeft');
var isOriginTop = this.layout._getOption('originTop');
// x
var xPadding = isOriginLeft ? 'paddingLeft' : 'paddingRight';
var xProperty = isOriginLeft ? 'left' : 'right';
var xResetProperty = isOriginLeft ? 'right' : 'left';
var x = this.position.x + layoutSize[xPadding];
// set in percentage or pixels
style[xProperty] = this.getXValue(x);
// reset other property
style[xResetProperty] = '';
// y
var yPadding = isOriginTop ? 'paddingTop' : 'paddingBottom';
var yProperty = isOriginTop ? 'top' : 'bottom';
var yResetProperty = isOriginTop ? 'bottom' : 'top';
var y = this.position.y + layoutSize[yPadding];
// set in percentage or pixels
style[yProperty] = this.getYValue(y);
// reset other property
style[yResetProperty] = '';
this.css(style);
this.emitEvent('layout', [this]);
};
proto.getXValue = function (x) {
var isHorizontal = this.layout._getOption('horizontal');
return this.layout.options.percentPosition && !isHorizontal ?
((x / this.layout.size.width) * 100) + '%' : x + 'px';
};
proto.getYValue = function (y) {
var isHorizontal = this.layout._getOption('horizontal');
return this.layout.options.percentPosition && isHorizontal ?
((y / this.layout.size.height) * 100) + '%' : y + 'px';
};
proto._transitionTo = function (x, y) {
this.getPosition();
// get current x & y from top/left
var curX = this.position.x;
var curY = this.position.y;
var compareX = parseInt(x, 10);
var compareY = parseInt(y, 10);
var didNotMove = compareX === this.position.x && compareY === this.position.y;
// save end position
this.setPosition(x, y);
// if did not move and not transitioning, just go to layout
if (didNotMove && !this.isTransitioning) {
this.layoutPosition();
return;
}
var transX = x - curX;
var transY = y - curY;
var transitionStyle = {};
transitionStyle.transform = this.getTranslate(transX, transY);
this.transition({
to: transitionStyle,
onTransitionEnd: {
transform: this.layoutPosition
},
isCleaning: true
});
};
proto.getTranslate = function (x, y) {
// flip cooridinates if origin on right or bottom
var isOriginLeft = this.layout._getOption('originLeft');
var isOriginTop = this.layout._getOption('originTop');
x = isOriginLeft ? x : -x;
y = isOriginTop ? y : -y;
return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
};
// non transition + transform support
proto.goTo = function (x, y) {
this.setPosition(x, y);
this.layoutPosition();
};
proto.moveTo = proto._transitionTo;
proto.setPosition = function (x, y) {
this.position.x = parseInt(x, 10);
this.position.y = parseInt(y, 10);
};
// ----- transition ----- //
/**
* @param {Object} style - CSS
* @param {Function} onTransitionEnd
*/
// non transition, just trigger callback
proto._nonTransition = function (args) {
this.css(args.to);
if (args.isCleaning) {
this._removeStyles(args.to);
}
for (var prop in args.onTransitionEnd) {
args.onTransitionEnd[prop].call(this);
}
};
/**
* proper transition
* @param {Object} args - arguments
* @param {Object} to - style to transition to
* @param {Object} from - style to start transition from
* @param {Boolean} isCleaning - removes transition styles after transition
* @param {Function} onTransitionEnd - callback
*/
proto.transition = function (args) {
// redirect to nonTransition if no transition duration
if (!parseFloat(this.layout.options.transitionDuration)) {
this._nonTransition(args);
return;
}
var _transition = this._transn;
// keep track of onTransitionEnd callback by css property
for (var prop in args.onTransitionEnd) {
_transition.onEnd[prop] = args.onTransitionEnd[prop];
}
// keep track of properties that are transitioning
for (prop in args.to) {
_transition.ingProperties[prop] = true;
// keep track of properties to clean up when transition is done
if (args.isCleaning) {
_transition.clean[prop] = true;
}
}
// set from styles
if (args.from) {
this.css(args.from);
// force redraw. http://blog.alexmaccaw.com/css-transitions
var h = this.element.offsetHeight;
// hack for JSHint to hush about unused var
h = null;
}
// enable transition
this.enableTransition(args.to);
// set styles that are transitioning
this.css(args.to);
this.isTransitioning = true;
};
// dash before all cap letters, including first for
// WebkitTransform => -webkit-transform
function toDashedAll(str) {
return str.replace(/([A-Z])/g, function ($1) {
return '-' + $1.toLowerCase();
});
}
var transitionProps = 'opacity,' + toDashedAll(transformProperty);
proto.enableTransition = function (/* style */) {
// HACK changing transitionProperty during a transition
// will cause transition to jump
if (this.isTransitioning) {
return;
}
// make `transition: foo, bar, baz` from style object
// HACK un-comment this when enableTransition can work
// while a transition is happening
// var transitionValues = [];
// for ( var prop in style ) {
// // dash-ify camelCased properties like WebkitTransition
// prop = vendorProperties[ prop ] || prop;
// transitionValues.push( toDashedAll( prop ) );
// }
// munge number to millisecond, to match stagger
var duration = this.layout.options.transitionDuration;
duration = typeof duration == 'number' ? duration + 'ms' : duration;
// enable transition styles
this.css({
transitionProperty: transitionProps,
transitionDuration: duration,
transitionDelay: this.staggerDelay || 0
});
// listen for transition end event
this.element.addEventListener(transitionEndEvent, this, false);
};
// ----- events ----- //
proto.onwebkitTransitionEnd = function (event) {
this.ontransitionend(event);
};
proto.onotransitionend = function (event) {
this.ontransitionend(event);
};
// properties that I munge to make my life easier
var dashedVendorProperties = {
'-webkit-transform': 'transform'
};
proto.ontransitionend = function (event) {
// disregard bubbled events from children
if (event.target !== this.element) {
return;
}
var _transition = this._transn;
// get property name of transitioned property, convert to prefix-free
var propertyName = dashedVendorProperties[event.propertyName] || event.propertyName;
// remove property that has completed transitioning
delete _transition.ingProperties[propertyName];
// check if any properties are still transitioning
if (isEmptyObj(_transition.ingProperties)) {
// all properties have completed transitioning
this.disableTransition();
}
// clean style
if (propertyName in _transition.clean) {
// clean up style
this.element.style[event.propertyName] = '';
delete _transition.clean[propertyName];
}
// trigger onTransitionEnd callback
if (propertyName in _transition.onEnd) {
var onTransitionEnd = _transition.onEnd[propertyName];
onTransitionEnd.call(this);
delete _transition.onEnd[propertyName];
}
this.emitEvent('transitionEnd', [this]);
};
proto.disableTransition = function () {
this.removeTransitionStyles();
this.element.removeEventListener(transitionEndEvent, this, false);
this.isTransitioning = false;
};
/**
* removes style property from element
* @param {Object} style
**/
proto._removeStyles = function (style) {
// clean up transition styles
var cleanStyle = {};
for (var prop in style) {
cleanStyle[prop] = '';
}
this.css(cleanStyle);
};
var cleanTransitionStyle = {
transitionProperty: '',
transitionDuration: '',
transitionDelay: ''
};
proto.removeTransitionStyles = function () {
// remove transition
this.css(cleanTransitionStyle);
};
// ----- stagger ----- //
proto.stagger = function (delay) {
delay = isNaN(delay) ? 0 : delay;
this.staggerDelay = delay + 'ms';
};
// ----- show/hide/remove ----- //
// remove element from DOM
proto.removeElem = function () {
this.element.parentNode.removeChild(this.element);
// remove display: none
this.css({ display: '' });
this.emitEvent('remove', [this]);
};
proto.remove = function () {
// just remove element if no transition support or no transition
if (!transitionProperty || !parseFloat(this.layout.options.transitionDuration)) {
this.removeElem();
return;
}
// start transition
this.once('transitionEnd', function () {
this.removeElem();
});
this.hide();
};
proto.reveal = function () {
delete this.isHidden;
// remove display: none
this.css({ display: '' });
var options = this.layout.options;
var onTransitionEnd = {};
var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle');
onTransitionEnd[transitionEndProperty] = this.onRevealTransitionEnd;
this.transition({
from: options.hiddenStyle,
to: options.visibleStyle,
isCleaning: true,
onTransitionEnd: onTransitionEnd
});
};
proto.onRevealTransitionEnd = function () {
// check if still visible
// during transition, item may have been hidden
if (!this.isHidden) {
this.emitEvent('reveal');
}
};
/**
* get style property use for hide/reveal transition end
* @param {String} styleProperty - hiddenStyle/visibleStyle
* @returns {String}
*/
proto.getHideRevealTransitionEndProperty = function (styleProperty) {
var optionStyle = this.layout.options[styleProperty];
// use opacity
if (optionStyle.opacity) {
return 'opacity';
}
// get first property
for (var prop in optionStyle) {
return prop;
}
};
proto.hide = function () {
// set flag
this.isHidden = true;
// remove display: none
this.css({ display: '' });
var options = this.layout.options;
var onTransitionEnd = {};
var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle');
onTransitionEnd[transitionEndProperty] = this.onHideTransitionEnd;
this.transition({
from: options.visibleStyle,
to: options.hiddenStyle,
// keep hidden stuff hidden
isCleaning: true,
onTransitionEnd: onTransitionEnd
});
};
proto.onHideTransitionEnd = function () {
// check if still hidden
// during transition, item may have been un-hidden
if (this.isHidden) {
this.css({ display: 'none' });
this.emitEvent('hide');
}
};
proto.destroy = function () {
this.css({
position: '',
left: '',
right: '',
top: '',
bottom: '',
transition: '',
transform: ''
});
};
return Item;
}));
/*!
* Outlayer v2.1.0
* the brains and guts of a layout library
* MIT license
*/
(function (window, factory) {
'use strict';
// universal module definition
/* jshint strict: false */ /* globals define, module, require */
if (typeof define == 'function' && define.amd) {
// AMD - RequireJS
define('outlayer/outlayer', [
'ev-emitter/ev-emitter',
'get-size/get-size',
'fizzy-ui-utils/utils',
'./item'
],
function (EvEmitter, getSize, utils, Item) {
return factory(window, EvEmitter, getSize, utils, Item);
}
);
} else if (typeof module == 'object' && module.exports) {
// CommonJS - Browserify, Webpack
module.exports = factory(
window,
require('ev-emitter'),
require('get-size'),
require('fizzy-ui-utils'),
require('./item')
);
} else {
// browser global
window.Outlayer = factory(
window,
window.EvEmitter,
window.getSize,
window.fizzyUIUtils,
window.Outlayer.Item
);
}
}(window, function factory(window, EvEmitter, getSize, utils, Item) {
'use strict';
// ----- vars ----- //
var console = window.console;
var jQuery = window.jQuery;
var noop = function () { };
// -------------------------- Outlayer -------------------------- //
// globally unique identifiers
var GUID = 0;
// internal store of all Outlayer intances
var instances = {};
/**
* @param {Element, String} element
* @param {Object} options
* @constructor
*/
function Outlayer(element, options) {
var queryElement = utils.getQueryElement(element);
if (!queryElement) {
if (console) {
console.error('Bad element for ' + this.constructor.namespace +
': ' + (queryElement || element));
}
return;
}
this.element = queryElement;
// add jQuery
if (jQuery) {
this.$element = jQuery(this.element);
}
// options
this.options = utils.extend({}, this.constructor.defaults);
this.option(options);
// add id for Outlayer.getFromElement
var id = ++GUID;
this.element.outlayerGUID = id; // expando
instances[id] = this; // associate via id
// kick it off
this._create();
var isInitLayout = this._getOption('initLayout');
if (isInitLayout) {
this.layout();
}
}
// settings are for internal use only
Outlayer.namespace = 'outlayer';
Outlayer.Item = Item;
// default options
Outlayer.defaults = {
containerStyle: {
position: 'relative'
},
initLayout: true,
originLeft: true,
originTop: true,
resize: true,
resizeContainer: true,
// item options
transitionDuration: '0.4s',
hiddenStyle: {
opacity: 0,
transform: 'scale(0.001)'
},
visibleStyle: {
opacity: 1,
transform: 'scale(1)'
}
};
var proto = Outlayer.prototype;
// inherit EvEmitter
utils.extend(proto, EvEmitter.prototype);
/**
* set options
* @param {Object} opts
*/
proto.option = function (opts) {
utils.extend(this.options, opts);
};
/**
* get backwards compatible option value, check old name
*/
proto._getOption = function (option) {
var oldOption = this.constructor.compatOptions[option];
return oldOption && this.options[oldOption] !== undefined ?
this.options[oldOption] : this.options[option];
};
Outlayer.compatOptions = {
// currentName: oldName
initLayout: 'isInitLayout',
horizontal: 'isHorizontal',
layoutInstant: 'isLayoutInstant',
originLeft: 'isOriginLeft',
originTop: 'isOriginTop',
resize: 'isResizeBound',
resizeContainer: 'isResizingContainer'
};
proto._create = function () {
// get items from children
this.reloadItems();
// elements that affect layout, but are not laid out
this.stamps = [];
this.stamp(this.options.stamp);
// set container style
utils.extend(this.element.style, this.options.containerStyle);
// bind resize method
var canBindResize = this._getOption('resize');
if (canBindResize) {
this.bindResize();
}
};
// goes through all children again and gets bricks in proper order
proto.reloadItems = function () {
// collection of item elements
this.items = this._itemize(this.element.children);
};
/**
* turn elements into Outlayer.Items to be used in layout
* @param {Array or NodeList or HTMLElement} elems
* @returns {Array} items - collection of new Outlayer Items
*/
proto._itemize = function (elems) {
var itemElems = this._filterFindItemElements(elems);
var Item = this.constructor.Item;
// create new Outlayer Items for collection
var items = [];
for (var i = 0; i < itemElems.length; i++) {
var elem = itemElems[i];
var item = new Item(elem, this);
items.push(item);
}
return items;
};
/**
* get item elements to be used in layout
* @param {Array or NodeList or HTMLElement} elems
* @returns {Array} items - item elements
*/
proto._filterFindItemElements = function (elems) {
return utils.filterFindElements(elems, this.options.itemSelector);
};
/**
* getter method for getting item elements
* @returns {Array} elems - collection of item elements
*/
proto.getItemElements = function () {
return this.items.map(function (item) {
return item.element;
});
};
// ----- init & layout ----- //
/**
* lays out all items
*/
proto.layout = function () {
this._resetLayout();
this._manageStamps();
// don't animate first layout
var layoutInstant = this._getOption('layoutInstant');
var isInstant = layoutInstant !== undefined ?
layoutInstant : !this._isLayoutInited;
this.layoutItems(this.items, isInstant);
// flag for initalized
this._isLayoutInited = true;
};
// _init is alias for layout
proto._init = proto.layout;
/**
* logic before any new layout
*/
proto._resetLayout = function () {
this.getSize();
};
proto.getSize = function () {
this.size = getSize(this.element);
};
/**
* get measurement from option, for columnWidth, rowHeight, gutter
* if option is String -> get element from selector string, & get size of element
* if option is Element -> get size of element
* else use option as a number
*
* @param {String} measurement
* @param {String} size - width or height
* @private
*/
proto._getMeasurement = function (measurement, size) {
var option = this.options[measurement];
var elem;
if (!option) {
// default to 0
this[measurement] = 0;
} else {
// use option as an element
if (typeof option == 'string') {
elem = this.element.querySelector(option);
} else if (option instanceof HTMLElement) {
elem = option;
}
// use size of element, if element
this[measurement] = elem ? getSize(elem)[size] : option;
}
};
/**
* layout a collection of item elements
* @api public
*/
proto.layoutItems = function (items, isInstant) {
items = this._getItemsForLayout(items);
this._layoutItems(items, isInstant);
this._postLayout();
};
/**
* get the items to be laid out
* you may want to skip over some items
* @param {Array} items
* @returns {Array} items
*/
proto._getItemsForLayout = function (items) {
return items.filter(function (item) {
return !item.isIgnored;
});
};
/**
* layout items
* @param {Array} items
* @param {Boolean} isInstant
*/
proto._layoutItems = function (items, isInstant) {
this._emitCompleteOnItems('layout', items);
if (!items || !items.length) {
// no items, emit event with empty array
return;
}
var queue = [];
items.forEach(function (item) {
// get x/y object from method
var position = this._getItemLayoutPosition(item);
// enqueue
position.item = item;
position.isInstant = isInstant || item.isLayoutInstant;
queue.push(position);
}, this);
this._processLayoutQueue(queue);
};
/**
* get item layout position
* @param {Outlayer.Item} item
* @returns {Object} x and y position
*/
proto._getItemLayoutPosition = function ( /* item */) {
return {
x: 0,
y: 0
};
};
/**
* iterate over array and position each item
* Reason being - separating this logic prevents 'layout invalidation'
* thx @paul_irish
* @param {Array} queue
*/
proto._processLayoutQueue = function (queue) {
this.updateStagger();
queue.forEach(function (obj, i) {
this._positionItem(obj.item, obj.x, obj.y, obj.isInstant, i);
}, this);
};
// set stagger from option in milliseconds number
proto.updateStagger = function () {
var stagger = this.options.stagger;
if (stagger === null || stagger === undefined) {
this.stagger = 0;
return;
}
this.stagger = getMilliseconds(stagger);
return this.stagger;
};
/**
* Sets position of item in DOM
* @param {Outlayer.Item} item
* @param {Number} x - horizontal position
* @param {Number} y - vertical position
* @param {Boolean} isInstant - disables transitions
*/
proto._positionItem = function (item, x, y, isInstant, i) {
if (isInstant) {
// if not transition, just set CSS
item.goTo(x, y);
} else {
item.stagger(i * this.stagger);
item.moveTo(x, y);
}
};
/**
* Any logic you want to do after each layout,
* i.e. size the container
*/
proto._postLayout = function () {
this.resizeContainer();
};
proto.resizeContainer = function () {
var isResizingContainer = this._getOption('resizeContainer');
if (!isResizingContainer) {
return;
}
var size = this._getContainerSize();
if (size) {
this._setContainerMeasure(size.width, true);
this._setContainerMeasure(size.height, false);
}
};
/**
* Sets width or height of container if returned
* @returns {Object} size
* @param {Number} width
* @param {Number} height
*/
proto._getContainerSize = noop;
/**
* @param {Number} measure - size of width or height
* @param {Boolean} isWidth
*/
proto._setContainerMeasure = function (measure, isWidth) {
if (measure === undefined) {
return;
}
var elemSize = this.size;
// add padding and border width if border box
if (elemSize.isBorderBox) {
measure += isWidth ? elemSize.paddingLeft + elemSize.paddingRight +
elemSize.borderLeftWidth + elemSize.borderRightWidth :
elemSize.paddingBottom + elemSize.paddingTop +
elemSize.borderTopWidth + elemSize.borderBottomWidth;
}
measure = Math.max(measure, 0);
this.element.style[isWidth ? 'width' : 'height'] = measure + 'px';
};
/**
* emit eventComplete on a collection of items events
* @param {String} eventName
* @param {Array} items - Outlayer.Items
*/
proto._emitCompleteOnItems = function (eventName, items) {
var _this = this;
function onComplete() {
_this.dispatchEvent(eventName + 'Complete', null, [items]);
}
var count = items.length;
if (!items || !count) {
onComplete();
return;
}
var doneCount = 0;
function tick() {
doneCount++;
if (doneCount == count) {
onComplete();
}
}
// bind callback
items.forEach(function (item) {
item.once(eventName, tick);
});
};
/**
* emits events via EvEmitter and jQuery events
* @param {String} type - name of event
* @param {Event} event - original event
* @param {Array} args - extra arguments
*/
proto.dispatchEvent = function (type, event, args) {
// add original event to arguments
var emitArgs = event ? [event].concat(args) : args;
this.emitEvent(type, emitArgs);
if (jQuery) {
// set this.$element
this.$element = this.$element || jQuery(this.element);
if (event) {
// create jQuery event
var $event = jQuery.Event(event);
$event.type = type;
this.$element.trigger($event, args);
} else {
// just trigger with type if no event available
this.$element.trigger(type, args);
}
}
};
// -------------------------- ignore & stamps -------------------------- //
/**
* keep item in collection, but do not lay it out
* ignored items do not get skipped in layout
* @param {Element} elem
*/
proto.ignore = function (elem) {
var item = this.getItem(elem);
if (item) {
item.isIgnored = true;
}
};
/**
* return item to layout collection
* @param {Element} elem
*/
proto.unignore = function (elem) {
var item = this.getItem(elem);
if (item) {
delete item.isIgnored;
}
};
/**
* adds elements to stamps
* @param {NodeList, Array, Element, or String} elems
*/
proto.stamp = function (elems) {
elems = this._find(elems);
if (!elems) {
return;
}
this.stamps = this.stamps.concat(elems);
// ignore
elems.forEach(this.ignore, this);
};
/**
* removes elements to stamps
* @param {NodeList, Array, or Element} elems
*/
proto.unstamp = function (elems) {
elems = this._find(elems);
if (!elems) {
return;
}
elems.forEach(function (elem) {
// filter out removed stamp elements
utils.removeFrom(this.stamps, elem);
this.unignore(elem);
}, this);
};
/**
* finds child elements
* @param {NodeList, Array, Element, or String} elems
* @returns {Array} elems
*/
proto._find = function (elems) {
if (!elems) {
return;
}
// if string, use argument as selector string
if (typeof elems == 'string') {
elems = this.element.querySelectorAll(elems);
}
elems = utils.makeArray(elems);
return elems;
};
proto._manageStamps = function () {
if (!this.stamps || !this.stamps.length) {
return;
}
this._getBoundingRect();
this.stamps.forEach(this._manageStamp, this);
};
// update boundingLeft / Top
proto._getBoundingRect = function () {
// get bounding rect for container element
var boundingRect = this.element.getBoundingClientRect();
var size = this.size;
this._boundingRect = {
left: boundingRect.left + size.paddingLeft + size.borderLeftWidth,
top: boundingRect.top + size.paddingTop + size.borderTopWidth,
right: boundingRect.right - (size.paddingRight + size.borderRightWidth),
bottom: boundingRect.bottom - (size.paddingBottom + size.borderBottomWidth)
};
};
/**
* @param {Element} stamp
**/
proto._manageStamp = noop;
/**
* get x/y position of element relative to container element
* @param {Element} elem
* @returns {Object} offset - has left, top, right, bottom
*/
proto._getElementOffset = function (elem) {
var boundingRect = elem.getBoundingClientRect();
var thisRect = this._boundingRect;
var size = getSize(elem);
var offset = {
left: boundingRect.left - thisRect.left - size.marginLeft,
top: boundingRect.top - thisRect.top - size.marginTop,
right: thisRect.right - boundingRect.right - size.marginRight,
bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom
};
return offset;
};
// -------------------------- resize -------------------------- //
// enable event handlers for listeners
// i.e. resize -> onresize
proto.handleEvent = utils.handleEvent;
/**
* Bind layout to window resizing
*/
proto.bindResize = function () {
window.addEventListener('resize', this);
this.isResizeBound = true;
};
/**
* Unbind layout to window resizing
*/
proto.unbindResize = function () {
window.removeEventListener('resize', this);
this.isResizeBound = false;
};
proto.onresize = function () {
this.resize();
};
utils.debounceMethod(Outlayer, 'onresize', 100);
proto.resize = function () {
// don't trigger if size did not change
// or if resize was unbound. See #9
if (!this.isResizeBound || !this.needsResizeLayout()) {
return;
}
this.layout();
};
/**
* check if layout is needed post layout
* @returns Boolean
*/
proto.needsResizeLayout = function () {
var size = getSize(this.element);
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var hasSizes = this.size && size;
return hasSizes && size.innerWidth !== this.size.innerWidth;
};
// -------------------------- methods -------------------------- //
/**
* add items to Outlayer instance
* @param {Array or NodeList or Element} elems
* @returns {Array} items - Outlayer.Items
**/
proto.addItems = function (elems) {
var items = this._itemize(elems);
// add items to collection
if (items.length) {
this.items = this.items.concat(items);
}
return items;
};
/**
* Layout newly-appended item elements
* @param {Array or NodeList or Element} elems
*/
proto.appended = function (elems) {
var items = this.addItems(elems);
if (!items.length) {
return;
}
// layout and reveal just the new items
this.layoutItems(items, true);
this.reveal(items);
};
/**
* Layout prepended elements
* @param {Array or NodeList or Element} elems
*/
proto.prepended = function (elems) {
var items = this._itemize(elems);
if (!items.length) {
return;
}
// add items to beginning of collection
var previousItems = this.items.slice(0);
this.items = items.concat(previousItems);
// start new layout
this._resetLayout();
this._manageStamps();
// layout new stuff without transition
this.layoutItems(items, true);
this.reveal(items);
// layout previous items
this.layoutItems(previousItems);
};
/**
* reveal a collection of items
* @param {Array of Outlayer.Items} items
*/
proto.reveal = function (items) {
this._emitCompleteOnItems('reveal', items);
if (!items || !items.length) {
return;
}
var stagger = this.updateStagger();
items.forEach(function (item, i) {
item.stagger(i * stagger);
item.reveal();
});
};
/**
* hide a collection of items
* @param {Array of Outlayer.Items} items
*/
proto.hide = function (items) {
this._emitCompleteOnItems('hide', items);
if (!items || !items.length) {
return;
}
var stagger = this.updateStagger();
items.forEach(function (item, i) {
item.stagger(i * stagger);
item.hide();
});
};
/**
* reveal item elements
* @param {Array}, {Element}, {NodeList} items
*/
proto.revealItemElements = function (elems) {
var items = this.getItems(elems);
this.reveal(items);
};
/**
* hide item elements
* @param {Array}, {Element}, {NodeList} items
*/
proto.hideItemElements = function (elems) {
var items = this.getItems(elems);
this.hide(items);
};
/**
* get Outlayer.Item, given an Element
* @param {Element} elem
* @param {Function} callback
* @returns {Outlayer.Item} item
*/
proto.getItem = function (elem) {
// loop through items to get the one that matches
for (var i = 0; i < this.items.length; i++) {
var item = this.items[i];
if (item.element == elem) {
// return item
return item;
}
}
};
/**
* get collection of Outlayer.Items, given Elements
* @param {Array} elems
* @returns {Array} items - Outlayer.Items
*/
proto.getItems = function (elems) {
elems = utils.makeArray(elems);
var items = [];
elems.forEach(function (elem) {
var item = this.getItem(elem);
if (item) {
items.push(item);
}
}, this);
return items;
};
/**
* remove element(s) from instance and DOM
* @param {Array or NodeList or Element} elems
*/
proto.remove = function (elems) {
var removeItems = this.getItems(elems);
this._emitCompleteOnItems('remove', removeItems);
// bail if no items to remove
if (!removeItems || !removeItems.length) {
return;
}
removeItems.forEach(function (item) {
item.remove();
// remove item from collection
utils.removeFrom(this.items, item);
}, this);
};
// ----- destroy ----- //
// remove and disable Outlayer instance
proto.destroy = function () {
// clean up dynamic styles
var style = this.element.style;
style.height = '';
style.position = '';
style.width = '';
// destroy items
this.items.forEach(function (item) {
item.destroy();
});
this.unbindResize();
var id = this.element.outlayerGUID;
delete instances[id]; // remove reference to instance by id
delete this.element.outlayerGUID;
// remove data for jQuery
if (jQuery) {
jQuery.removeData(this.element, this.constructor.namespace);
}
};
// -------------------------- data -------------------------- //
/**
* get Outlayer instance from element
* @param {Element} elem
* @returns {Outlayer}
*/
Outlayer.data = function (elem) {
elem = utils.getQueryElement(elem);
var id = elem && elem.outlayerGUID;
return id && instances[id];
};
// -------------------------- create Outlayer class -------------------------- //
/**
* create a layout class
* @param {String} namespace
*/
Outlayer.create = function (namespace, options) {
// sub-class Outlayer
var Layout = subclass(Outlayer);
// apply new options and compatOptions
Layout.defaults = utils.extend({}, Outlayer.defaults);
utils.extend(Layout.defaults, options);
Layout.compatOptions = utils.extend({}, Outlayer.compatOptions);
Layout.namespace = namespace;
Layout.data = Outlayer.data;
// sub-class Item
Layout.Item = subclass(Item);
// -------------------------- declarative -------------------------- //
utils.htmlInit(Layout, namespace);
// -------------------------- jQuery bridge -------------------------- //
// make into jQuery plugin
if (jQuery && jQuery.bridget) {
jQuery.bridget(namespace, Layout);
}
return Layout;
};
function subclass(Parent) {
function SubClass() {
Parent.apply(this, arguments);
}
SubClass.prototype = Object.create(Parent.prototype);
SubClass.prototype.constructor = SubClass;
return SubClass;
}
// ----- helpers ----- //
// how many milliseconds are in each unit
var msUnits = {
ms: 1,
s: 1000
};
// munge time-like parameter into millisecond number
// '0.4s' -> 40
function getMilliseconds(time) {
if (typeof time == 'number') {
return time;
}
var matches = time.match(/(^\d*\.?\d*)(\w*)/);
var num = matches && matches[1];
var unit = matches && matches[2];
if (!num.length) {
return 0;
}
num = parseFloat(num);
var mult = msUnits[unit] || 1;
return num * mult;
}
// ----- fin ----- //
// back in global
Outlayer.Item = Item;
return Outlayer;
}));
/**
* Rect
* low-level utility class for basic geometry
*/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /* globals define, module */
if (typeof define == 'function' && define.amd) {
// AMD
define('packery/js/rect', factory);
} else if (typeof module == 'object' && module.exports) {
// CommonJS
module.exports = factory();
} else {
// browser global
window.Packery = window.Packery || {};
window.Packery.Rect = factory();
}
}(window, function factory() {
'use strict';
// -------------------------- Rect -------------------------- //
function Rect(props) {
// extend properties from defaults
for (var prop in Rect.defaults) {
this[prop] = Rect.defaults[prop];
}
for (prop in props) {
this[prop] = props[prop];
}
}
Rect.defaults = {
x: 0,
y: 0,
width: 0,
height: 0
};
var proto = Rect.prototype;
/**
* Determines whether or not this rectangle wholly encloses another rectangle or point.
* @param {Rect} rect
* @returns {Boolean}
**/
proto.contains = function (rect) {
// points don't have width or height
var otherWidth = rect.width || 0;
var otherHeight = rect.height || 0;
return this.x <= rect.x &&
this.y <= rect.y &&
this.x + this.width >= rect.x + otherWidth &&
this.y + this.height >= rect.y + otherHeight;
};
/**
* Determines whether or not the rectangle intersects with another.
* @param {Rect} rect
* @returns {Boolean}
**/
proto.overlaps = function (rect) {
var thisRight = this.x + this.width;
var thisBottom = this.y + this.height;
var rectRight = rect.x + rect.width;
var rectBottom = rect.y + rect.height;
// http://stackoverflow.com/a/306332
return this.x < rectRight &&
thisRight > rect.x &&
this.y < rectBottom &&
thisBottom > rect.y;
};
/**
* @param {Rect} rect - the overlapping rect
* @returns {Array} freeRects - rects representing the area around the rect
**/
proto.getMaximalFreeRects = function (rect) {
// if no intersection, return false
if (!this.overlaps(rect)) {
return false;
}
var freeRects = [];
var freeRect;
var thisRight = this.x + this.width;
var thisBottom = this.y + this.height;
var rectRight = rect.x + rect.width;
var rectBottom = rect.y + rect.height;
// top
if (this.y < rect.y) {
freeRect = new Rect({
x: this.x,
y: this.y,
width: this.width,
height: rect.y - this.y
});
freeRects.push(freeRect);
}
// right
if (thisRight > rectRight) {
freeRect = new Rect({
x: rectRight,
y: this.y,
width: thisRight - rectRight,
height: this.height
});
freeRects.push(freeRect);
}
// bottom
if (thisBottom > rectBottom) {
freeRect = new Rect({
x: this.x,
y: rectBottom,
width: this.width,
height: thisBottom - rectBottom
});
freeRects.push(freeRect);
}
// left
if (this.x < rect.x) {
freeRect = new Rect({
x: this.x,
y: this.y,
width: rect.x - this.x,
height: this.height
});
freeRects.push(freeRect);
}
return freeRects;
};
proto.canFit = function (rect) {
return this.width >= rect.width && this.height >= rect.height;
};
return Rect;
}));
/**
* Packer
* bin-packing algorithm
*/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /* globals define, module, require */
if (typeof define == 'function' && define.amd) {
// AMD
define('packery/js/packer', ['./rect'], factory);
} else if (typeof module == 'object' && module.exports) {
// CommonJS
module.exports = factory(
require('./rect')
);
} else {
// browser global
var Packery = window.Packery = window.Packery || {};
Packery.Packer = factory(Packery.Rect);
}
}(window, function factory(Rect) {
'use strict';
// -------------------------- Packer -------------------------- //
/**
* @param {Number} width
* @param {Number} height
* @param {String} sortDirection
* topLeft for vertical, leftTop for horizontal
*/
function Packer(width, height, sortDirection) {
this.width = width || 0;
this.height = height || 0;
this.sortDirection = sortDirection || 'downwardLeftToRight';
this.reset();
}
var proto = Packer.prototype;
proto.reset = function () {
this.spaces = [];
var initialSpace = new Rect({
x: 0,
y: 0,
width: this.width,
height: this.height
});
this.spaces.push(initialSpace);
// set sorter
this.sorter = sorters[this.sortDirection] || sorters.downwardLeftToRight;
};
// change x and y of rect to fit with in Packer's available spaces
proto.pack = function (rect) {
for (var i = 0; i < this.spaces.length; i++) {
var space = this.spaces[i];
if (space.canFit(rect)) {
this.placeInSpace(rect, space);
break;
}
}
};
proto.columnPack = function (rect) {
for (var i = 0; i < this.spaces.length; i++) {
var space = this.spaces[i];
var canFitInSpaceColumn = space.x <= rect.x &&
space.x + space.width >= rect.x + rect.width &&
space.height >= rect.height - 0.01; // fudge number for rounding error
if (canFitInSpaceColumn) {
rect.y = space.y;
this.placed(rect);
break;
}
}
};
proto.rowPack = function (rect) {
for (var i = 0; i < this.spaces.length; i++) {
var space = this.spaces[i];
var canFitInSpaceRow = space.y <= rect.y &&
space.y + space.height >= rect.y + rect.height &&
space.width >= rect.width - 0.01; // fudge number for rounding error
if (canFitInSpaceRow) {
rect.x = space.x;
this.placed(rect);
break;
}
}
};
proto.placeInSpace = function (rect, space) {
// place rect in space
rect.x = space.x;
rect.y = space.y;
this.placed(rect);
};
// update spaces with placed rect
proto.placed = function (rect) {
// update spaces
var revisedSpaces = [];
for (var i = 0; i < this.spaces.length; i++) {
var space = this.spaces[i];
var newSpaces = space.getMaximalFreeRects(rect);
// add either the original space or the new spaces to the revised spaces
if (newSpaces) {
revisedSpaces.push.apply(revisedSpaces, newSpaces);
} else {
revisedSpaces.push(space);
}
}
this.spaces = revisedSpaces;
this.mergeSortSpaces();
};
proto.mergeSortSpaces = function () {
// remove redundant spaces
Packer.mergeRects(this.spaces);
this.spaces.sort(this.sorter);
};
// add a space back
proto.addSpace = function (rect) {
this.spaces.push(rect);
this.mergeSortSpaces();
};
// -------------------------- utility functions -------------------------- //
/**
* Remove redundant rectangle from array of rectangles
* @param {Array} rects: an array of Rects
* @returns {Array} rects: an array of Rects
**/
Packer.mergeRects = function (rects) {
var i = 0;
var rect = rects[i];
rectLoop:
while (rect) {
var j = 0;
var compareRect = rects[i + j];
while (compareRect) {
if (compareRect == rect) {
j++; // next
} else if (compareRect.contains(rect)) {
// remove rect
rects.splice(i, 1);
rect = rects[i]; // set next rect
continue rectLoop; // bail on compareLoop
} else if (rect.contains(compareRect)) {
// remove compareRect
rects.splice(i + j, 1);
} else {
j++;
}
compareRect = rects[i + j]; // set next compareRect
}
i++;
rect = rects[i];
}
return rects;
};
// -------------------------- sorters -------------------------- //
// functions for sorting rects in order
var sorters = {
// top down, then left to right
downwardLeftToRight: function (a, b) {
return a.y - b.y || a.x - b.x;
},
// left to right, then top down
rightwardTopToBottom: function (a, b) {
return a.x - b.x || a.y - b.y;
}
};
// -------------------------- -------------------------- //
return Packer;
}));
/**
* Packery Item Element
**/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /* globals define, module, require */
if (typeof define == 'function' && define.amd) {
// AMD
define('packery/js/item', [
'outlayer/outlayer',
'./rect'
],
factory);
} else if (typeof module == 'object' && module.exports) {
// CommonJS
module.exports = factory(
require('outlayer'),
require('./rect')
);
} else {
// browser global
window.Packery.Item = factory(
window.Outlayer,
window.Packery.Rect
);
}
}(window, function factory(Outlayer, Rect) {
'use strict';
// -------------------------- Item -------------------------- //
var docElemStyle = document.documentElement.style;
var transformProperty = typeof docElemStyle.transform == 'string' ?
'transform' : 'WebkitTransform';
// sub-class Item
var Item = function PackeryItem() {
Outlayer.Item.apply(this, arguments);
};
var proto = Item.prototype = Object.create(Outlayer.Item.prototype);
var __create = proto._create;
proto._create = function () {
// call default _create logic
__create.call(this);
this.rect = new Rect();
};
var _moveTo = proto.moveTo;
proto.moveTo = function (x, y) {
// don't shift 1px while dragging
var dx = Math.abs(this.position.x - x);
var dy = Math.abs(this.position.y - y);
var canHackGoTo = this.layout.dragItemCount && !this.isPlacing &&
!this.isTransitioning && dx < 1 && dy < 1;
if (canHackGoTo) {
this.goTo(x, y);
return;
}
_moveTo.apply(this, arguments);
};
// -------------------------- placing -------------------------- //
proto.enablePlacing = function () {
this.removeTransitionStyles();
// remove transform property from transition
if (this.isTransitioning && transformProperty) {
this.element.style[transformProperty] = 'none';
}
this.isTransitioning = false;
this.getSize();
this.layout._setRectSize(this.element, this.rect);
this.isPlacing = true;
};
proto.disablePlacing = function () {
this.isPlacing = false;
};
// ----- ----- //
// remove element from DOM
proto.removeElem = function () {
this.element.parentNode.removeChild(this.element);
// add space back to packer
this.layout.packer.addSpace(this.rect);
this.emitEvent('remove', [this]);
};
// ----- dropPlaceholder ----- //
proto.showDropPlaceholder = function () {
var dropPlaceholder = this.dropPlaceholder;
if (!dropPlaceholder) {
// create dropPlaceholder
dropPlaceholder = this.dropPlaceholder = document.createElement('div');
dropPlaceholder.className = 'packery-drop-placeholder';
dropPlaceholder.style.position = 'absolute';
}
dropPlaceholder.style.width = this.size.width + 'px';
dropPlaceholder.style.height = this.size.height + 'px';
this.positionDropPlaceholder();
this.layout.element.appendChild(dropPlaceholder);
};
proto.positionDropPlaceholder = function () {
this.dropPlaceholder.style[transformProperty] = 'translate(' +
this.rect.x + 'px, ' + this.rect.y + 'px)';
};
proto.hideDropPlaceholder = function () {
// only remove once, #333
var parent = this.dropPlaceholder.parentNode;
if (parent) {
parent.removeChild(this.dropPlaceholder);
}
};
// ----- ----- //
return Item;
}));
/*!
* Packery v2.1.1
* Gapless, draggable grid layouts
*
* Licensed GPLv3 for open source use
* or Packery Commercial License for commercial use
*
* http://packery.metafizzy.co
* Copyright 2016 Metafizzy
*/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /* globals define, module, require */
if (typeof define == 'function' && define.amd) {
// AMD
define([
'get-size/get-size',
'outlayer/outlayer',
'packery/js/rect',
'packery/js/packer',
'packery/js/item'
],
factory);
} else if (typeof module == 'object' && module.exports) {
// CommonJS
module.exports = factory(
require('get-size'),
require('outlayer'),
require('./rect'),
require('./packer'),
require('./item')
);
} else {
// browser global
window.Packery = factory(
window.getSize,
window.Outlayer,
window.Packery.Rect,
window.Packery.Packer,
window.Packery.Item
);
}
}(window, function factory(getSize, Outlayer, Rect, Packer, Item) {
'use strict';
// ----- Rect ----- //
// allow for pixel rounding errors IE8-IE11 & Firefox; #227
Rect.prototype.canFit = function (rect) {
return this.width >= rect.width - 1 && this.height >= rect.height - 1;
};
// -------------------------- Packery -------------------------- //
// create an Outlayer layout class
var Packery = Outlayer.create('packery');
Packery.Item = Item;
var proto = Packery.prototype;
proto._create = function () {
// call super
Outlayer.prototype._create.call(this);
// initial properties
this.packer = new Packer();
// packer for drop targets
this.shiftPacker = new Packer();
this.isEnabled = true;
this.dragItemCount = 0;
// create drag handlers
var _this = this;
this.handleDraggabilly = {
dragStart: function () {
_this.itemDragStart(this.element);
},
dragMove: function () {
_this.itemDragMove(this.element, this.position.x, this.position.y);
},
dragEnd: function () {
_this.itemDragEnd(this.element);
}
};
this.handleUIDraggable = {
start: function handleUIDraggableStart(event, ui) {
// HTML5 may trigger dragstart, dismiss HTML5 dragging
if (!ui) {
return;
}
_this.itemDragStart(event.currentTarget);
},
drag: function handleUIDraggableDrag(event, ui) {
if (!ui) {
return;
}
_this.itemDragMove(event.currentTarget, ui.position.left, ui.position.top);
},
stop: function handleUIDraggableStop(event, ui) {
if (!ui) {
return;
}
_this.itemDragEnd(event.currentTarget);
}
};
};
// ----- init & layout ----- //
/**
* logic before any new layout
*/
proto._resetLayout = function () {
this.getSize();
this._getMeasurements();
// reset packer
var width, height, sortDirection;
// packer settings, if horizontal or vertical
if (this._getOption('horizontal')) {
width = Infinity;
height = this.size.innerHeight + this.gutter;
sortDirection = 'rightwardTopToBottom';
} else {
width = this.size.innerWidth + this.gutter;
height = Infinity;
sortDirection = 'downwardLeftToRight';
}
this.packer.width = this.shiftPacker.width = width;
this.packer.height = this.shiftPacker.height = height;
this.packer.sortDirection = this.shiftPacker.sortDirection = sortDirection;
this.packer.reset();
// layout
this.maxY = 0;
this.maxX = 0;
};
/**
* update columnWidth, rowHeight, & gutter
* @private
*/
proto._getMeasurements = function () {
this._getMeasurement('columnWidth', 'width');
this._getMeasurement('rowHeight', 'height');
this._getMeasurement('gutter', 'width');
};
proto._getItemLayoutPosition = function (item) {
this._setRectSize(item.element, item.rect);
if (this.isShifting || this.dragItemCount > 0) {
var packMethod = this._getPackMethod();
this.packer[packMethod](item.rect);
} else {
this.packer.pack(item.rect);
}
this._setMaxXY(item.rect);
return item.rect;
};
proto.shiftLayout = function () {
this.isShifting = true;
this.layout();
delete this.isShifting;
};
proto._getPackMethod = function () {
return this._getOption('horizontal') ? 'rowPack' : 'columnPack';
};
/**
* set max X and Y value, for size of container
* @param {Packery.Rect} rect
* @private
*/
proto._setMaxXY = function (rect) {
this.maxX = Math.max(rect.x + rect.width, this.maxX);
this.maxY = Math.max(rect.y + rect.height, this.maxY);
};
/**
* set the width and height of a rect, applying columnWidth and rowHeight
* @param {Element} elem
* @param {Packery.Rect} rect
*/
proto._setRectSize = function (elem, rect) {
var size = getSize(elem);
var w = size.outerWidth;
var h = size.outerHeight;
// size for columnWidth and rowHeight, if available
// only check if size is non-zero, #177
if (w || h) {
w = this._applyGridGutter(w, this.columnWidth);
h = this._applyGridGutter(h, this.rowHeight);
}
// rect must fit in packer
rect.width = Math.min(w, this.packer.width);
rect.height = Math.min(h, this.packer.height);
};
/**
* fits item to columnWidth/rowHeight and adds gutter
* @param {Number} measurement - item width or height
* @param {Number} gridSize - columnWidth or rowHeight
* @returns measurement
*/
proto._applyGridGutter = function (measurement, gridSize) {
// just add gutter if no gridSize
if (!gridSize) {
return measurement + this.gutter;
}
gridSize += this.gutter;
// fit item to columnWidth/rowHeight
var remainder = measurement % gridSize;
var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
measurement = Math[mathMethod](measurement / gridSize) * gridSize;
return measurement;
};
proto._getContainerSize = function () {
if (this._getOption('horizontal')) {
return {
width: this.maxX - this.gutter
};
} else {
return {
height: this.maxY - this.gutter
};
}
};
// -------------------------- stamp -------------------------- //
/**
* makes space for element
* @param {Element} elem
*/
proto._manageStamp = function (elem) {
var item = this.getItem(elem);
var rect;
if (item && item.isPlacing) {
rect = item.rect;
} else {
var offset = this._getElementOffset(elem);
rect = new Rect({
x: this._getOption('originLeft') ? offset.left : offset.right,
y: this._getOption('originTop') ? offset.top : offset.bottom
});
}
this._setRectSize(elem, rect);
// save its space in the packer
this.packer.placed(rect);
this._setMaxXY(rect);
};
// -------------------------- methods -------------------------- //
function verticalSorter(a, b) {
return a.position.y - b.position.y || a.position.x - b.position.x;
}
function horizontalSorter(a, b) {
return a.position.x - b.position.x || a.position.y - b.position.y;
}
proto.sortItemsByPosition = function () {
var sorter = this._getOption('horizontal') ? horizontalSorter : verticalSorter;
this.items.sort(sorter);
};
/**
* Fit item element in its current position
* Packery will position elements around it
* useful for expanding elements
*
* @param {Element} elem
* @param {Number} x - horizontal destination position, optional
* @param {Number} y - vertical destination position, optional
*/
proto.fit = function (elem, x, y) {
var item = this.getItem(elem);
if (!item) {
return;
}
// stamp item to get it out of layout
this.stamp(item.element);
// set placing flag
item.enablePlacing();
this.updateShiftTargets(item);
// fall back to current position for fitting
x = x === undefined ? item.rect.x : x;
y = y === undefined ? item.rect.y : y;
// position it best at its destination
this.shift(item, x, y);
this._bindFitEvents(item);
item.moveTo(item.rect.x, item.rect.y);
// layout everything else
this.shiftLayout();
// return back to regularly scheduled programming
this.unstamp(item.element);
this.sortItemsByPosition();
item.disablePlacing();
};
/**
* emit event when item is fit and other items are laid out
* @param {Packery.Item} item
* @private
*/
proto._bindFitEvents = function (item) {
var _this = this;
var ticks = 0;
function onLayout() {
ticks++;
if (ticks != 2) {
return;
}
_this.dispatchEvent('fitComplete', null, [item]);
}
// when item is laid out
item.once('layout', onLayout);
// when all items are laid out
this.once('layoutComplete', onLayout);
};
// -------------------------- resize -------------------------- //
// debounced, layout on resize
proto.resize = function () {
// don't trigger if size did not change
// or if resize was unbound. See #285, outlayer#9
if (!this.isResizeBound || !this.needsResizeLayout()) {
return;
}
if (this.options.shiftPercentResize) {
this.resizeShiftPercentLayout();
} else {
this.layout();
}
};
/**
* check if layout is needed post layout
* @returns Boolean
*/
proto.needsResizeLayout = function () {
var size = getSize(this.element);
var innerSize = this._getOption('horizontal') ? 'innerHeight' : 'innerWidth';
return size[innerSize] != this.size[innerSize];
};
proto.resizeShiftPercentLayout = function () {
var items = this._getItemsForLayout(this.items);
var isHorizontal = this._getOption('horizontal');
var coord = isHorizontal ? 'y' : 'x';
var measure = isHorizontal ? 'height' : 'width';
var segmentName = isHorizontal ? 'rowHeight' : 'columnWidth';
var innerSize = isHorizontal ? 'innerHeight' : 'innerWidth';
// proportional re-align items
var previousSegment = this[segmentName];
previousSegment = previousSegment && previousSegment + this.gutter;
if (previousSegment) {
this._getMeasurements();
var currentSegment = this[segmentName] + this.gutter;
items.forEach(function (item) {
var seg = Math.round(item.rect[coord] / previousSegment);
item.rect[coord] = seg * currentSegment;
});
} else {
var currentSize = getSize(this.element)[innerSize] + this.gutter;
var previousSize = this.packer[measure];
items.forEach(function (item) {
item.rect[coord] = (item.rect[coord] / previousSize) * currentSize;
});
}
this.shiftLayout();
};
// -------------------------- drag -------------------------- //
/**
* handle an item drag start event
* @param {Element} elem
*/
proto.itemDragStart = function (elem) {
if (!this.isEnabled) {
return;
}
this.stamp(elem);
// this.ignore( elem );
var item = this.getItem(elem);
if (!item) {
return;
}
item.enablePlacing();
item.showDropPlaceholder();
this.dragItemCount++;
this.updateShiftTargets(item);
};
proto.updateShiftTargets = function (dropItem) {
this.shiftPacker.reset();
// pack stamps
this._getBoundingRect();
var isOriginLeft = this._getOption('originLeft');
var isOriginTop = this._getOption('originTop');
this.stamps.forEach(function (stamp) {
// ignore dragged item
var item = this.getItem(stamp);
if (item && item.isPlacing) {
return;
}
var offset = this._getElementOffset(stamp);
var rect = new Rect({
x: isOriginLeft ? offset.left : offset.right,
y: isOriginTop ? offset.top : offset.bottom
});
this._setRectSize(stamp, rect);
// save its space in the packer
this.shiftPacker.placed(rect);
}, this);
// reset shiftTargets
var isHorizontal = this._getOption('horizontal');
var segmentName = isHorizontal ? 'rowHeight' : 'columnWidth';
var measure = isHorizontal ? 'height' : 'width';
this.shiftTargetKeys = [];
this.shiftTargets = [];
var boundsSize;
var segment = this[segmentName];
segment = segment && segment + this.gutter;
if (segment) {
var segmentSpan = Math.ceil(dropItem.rect[measure] / segment);
var segs = Math.floor((this.shiftPacker[measure] + this.gutter) / segment);
boundsSize = (segs - segmentSpan) * segment;
// add targets on top
for (var i = 0; i < segs; i++) {
var initialX = isHorizontal ? 0 : i * segment;
var initialY = isHorizontal ? i * segment : 0;
this._addShiftTarget(initialX, initialY, boundsSize);
}
} else {
boundsSize = (this.shiftPacker[measure] + this.gutter) - dropItem.rect[measure];
this._addShiftTarget(0, 0, boundsSize);
}
// pack each item to measure where shiftTargets are
var items = this._getItemsForLayout(this.items);
var packMethod = this._getPackMethod();
items.forEach(function (item) {
var rect = item.rect;
this._setRectSize(item.element, rect);
this.shiftPacker[packMethod](rect);
// add top left corner
this._addShiftTarget(rect.x, rect.y, boundsSize);
// add bottom left / top right corner
var cornerX = isHorizontal ? rect.x + rect.width : rect.x;
var cornerY = isHorizontal ? rect.y : rect.y + rect.height;
this._addShiftTarget(cornerX, cornerY, boundsSize);
if (segment) {
// add targets for each column on bottom / row on right
var segSpan = Math.round(rect[measure] / segment);
for (var i = 1; i < segSpan; i++) {
var segX = isHorizontal ? cornerX : rect.x + segment * i;
var segY = isHorizontal ? rect.y + segment * i : cornerY;
this._addShiftTarget(segX, segY, boundsSize);
}
}
}, this);
};
proto._addShiftTarget = function (x, y, boundsSize) {
var checkCoord = this._getOption('horizontal') ? y : x;
if (checkCoord !== 0 && checkCoord > boundsSize) {
return;
}
// create string for a key, easier to keep track of what targets
var key = x + ',' + y;
var hasKey = this.shiftTargetKeys.indexOf(key) != -1;
if (hasKey) {
return;
}
this.shiftTargetKeys.push(key);
this.shiftTargets.push({ x: x, y: y });
};
// -------------------------- drop -------------------------- //
proto.shift = function (item, x, y) {
var shiftPosition;
var minDistance = Infinity;
var position = { x: x, y: y };
this.shiftTargets.forEach(function (target) {
var distance = getDistance(target, position);
if (distance < minDistance) {
shiftPosition = target;
minDistance = distance;
}
});
item.rect.x = shiftPosition.x;
item.rect.y = shiftPosition.y;
};
function getDistance(a, b) {
var dx = b.x - a.x;
var dy = b.y - a.y;
return Math.sqrt(dx * dx + dy * dy);
}
// -------------------------- drag move -------------------------- //
var DRAG_THROTTLE_TIME = 120;
/**
* handle an item drag move event
* @param {Element} elem
* @param {Number} x - horizontal change in position
* @param {Number} y - vertical change in position
*/
proto.itemDragMove = function (elem, x, y) {
var item = this.isEnabled && this.getItem(elem);
if (!item) {
return;
}
x -= this.size.paddingLeft;
y -= this.size.paddingTop;
var _this = this;
function onDrag() {
_this.shift(item, x, y);
item.positionDropPlaceholder();
_this.layout();
}
// throttle
var now = new Date();
if (this._itemDragTime && now - this._itemDragTime < DRAG_THROTTLE_TIME) {
clearTimeout(this.dragTimeout);
this.dragTimeout = setTimeout(onDrag, DRAG_THROTTLE_TIME);
} else {
onDrag();
this._itemDragTime = now;
}
};
// -------------------------- drag end -------------------------- //
/**
* handle an item drag end event
* @param {Element} elem
*/
proto.itemDragEnd = function (elem) {
var item = this.isEnabled && this.getItem(elem);
if (!item) {
return;
}
clearTimeout(this.dragTimeout);
item.element.classList.add('is-positioning-post-drag');
var completeCount = 0;
var _this = this;
function onDragEndLayoutComplete() {
completeCount++;
if (completeCount != 2) {
return;
}
// reset drag item
item.element.classList.remove('is-positioning-post-drag');
item.hideDropPlaceholder();
_this.dispatchEvent('dragItemPositioned', null, [item]);
}
item.once('layout', onDragEndLayoutComplete);
this.once('layoutComplete', onDragEndLayoutComplete);
item.moveTo(item.rect.x, item.rect.y);
this.layout();
this.dragItemCount = Math.max(0, this.dragItemCount - 1);
this.sortItemsByPosition();
item.disablePlacing();
this.unstamp(item.element);
};
/**
* binds Draggabilly events
* @param {Draggabilly} draggie
*/
proto.bindDraggabillyEvents = function (draggie) {
this._bindDraggabillyEvents(draggie, 'on');
};
proto.unbindDraggabillyEvents = function (draggie) {
this._bindDraggabillyEvents(draggie, 'off');
};
proto._bindDraggabillyEvents = function (draggie, method) {
var handlers = this.handleDraggabilly;
draggie[method]('dragStart', handlers.dragStart);
draggie[method]('dragMove', handlers.dragMove);
draggie[method]('dragEnd', handlers.dragEnd);
};
/**
* binds jQuery UI Draggable events
* @param {jQuery} $elems
*/
proto.bindUIDraggableEvents = function ($elems) {
this._bindUIDraggableEvents($elems, 'on');
};
proto.unbindUIDraggableEvents = function ($elems) {
this._bindUIDraggableEvents($elems, 'off');
};
proto._bindUIDraggableEvents = function ($elems, method) {
var handlers = this.handleUIDraggable;
$elems
[method]('dragstart', handlers.start)
[method]('drag', handlers.drag)
[method]('dragstop', handlers.stop);
};
// ----- destroy ----- //
var _destroy = proto.destroy;
proto.destroy = function () {
_destroy.apply(this, arguments);
// disable flag; prevent drag events from triggering. #72
this.isEnabled = false;
};
// ----- ----- //
Packery.Rect = Rect;
Packery.Packer = Packer;
return Packery;
}));
;
jQuery.trumbowyg = {
langs: {
en: {
viewHTML: "View HTML",
formatting: "Formatting",
p: "Paragraph",
blockquote: "Quote",
code: "Code",
header: "Header",
bold: "Bold",
italic: "Italic",
strikethrough: "Stroke",
underline: "Underline",
strong: "Strong",
em: "Emphasis",
del: "Deleted",
unorderedList: "Unordered list",
orderedList: "Ordered list",
insertImage: "Insert Image",
insertVideo: "Insert Video",
link: "Link",
createLink: "Insert link",
unlink: "Remove link",
justifyLeft: "Align Left",
justifyCenter: "Align Center",
justifyRight: "Align Right",
justifyFull: "Align Justify",
horizontalRule: "Insert horizontal rule",
removeformat: "Remove format",
fullscreen: "fullscreen",
close: "Close",
submit: "Confirm",
reset: "Cancel",
required: "Required",
description: "Description",
title: "Title",
text: "Text",
target: "Target"
}
},
// User default options
opts: {},
btnsGrps: {
design: ['bold', 'italic', 'underline', 'strikethrough'],
semantic: ['strong', 'em', 'del'],
justify: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
lists: ['unorderedList', 'orderedList']
}
};
(function (navigator, window, document, $, undefined) {
'use strict';
// @param : o are options
// @param : p are params
$.fn.trumbowyg = function (o, p) {
if (o === Object(o) || !o) {
return this.each(function () {
if (!$(this).data('trumbowyg'))
$(this).data('trumbowyg', new Trumbowyg(this, o));
});
}
if (this.length === 1) {
try {
var t = $(this).data('trumbowyg');
switch (o) {
// Modal box
case 'openModal':
return t.openModal(p.title, p.content);
case 'closeModal':
return t.closeModal();
case 'openModalInsert':
return t.openModalInsert(p.title, p.fields, p.callback);
// Selection
case 'saveSelection':
return t.saveSelection();
case 'getSelection':
return t.selection;
case 'getSelectedText':
return t.getSelectedText();
case 'restoreSelection':
return t.restoreSelection();
// Destroy
case 'destroy':
return t.destroy();
// Empty
case 'empty':
return t.empty();
// Public options
case 'lang':
return t.lang;
// HTML
case 'html':
return t.html(p);
}
} catch (e) { }
}
return false;
};
// @param : editorElem is the DOM element
// @param : o are options
var Trumbowyg = function (editorElem, o) {
var t = this;
// Get the document of the element. It use to makes the plugin
// compatible on iframes.
t.doc = editorElem.ownerDocument || document;
// jQuery object of the editor
t.$ta = $(editorElem); // $ta : Textarea
t.$c = $(editorElem); // $c : creator
// Extend with options
o = $.extend(true, {}, o, $.trumbowyg.opts);
// Localization management
if (typeof o.lang === 'undefined' || typeof $.trumbowyg.langs[o.lang] === 'undefined')
t.lang = $.trumbowyg.langs.en;
else
t.lang = $.extend(true, {}, $.trumbowyg.langs.en, $.trumbowyg.langs[o.lang]);
// Header translation
var h = t.lang.header;
// Defaults Options
t.o = $.extend(true, {}, {
lang: 'en',
dir: 'ltr',
closable: false,
fullscreenable: true,
fixedBtnPane: false,
fixedFullWidth: false,
autogrow: false,
prefix: 'trumbowyg-',
// WYSIWYG only
semantic: true,
resetCss: false,
removeformatPasted: false,
btns: [
'viewHTML',
'|', 'formatting',
'|', 'btnGrp-design',
'|', 'link',
'|', 'insertImage',
'|', 'btnGrp-justify',
'|', 'btnGrp-lists',
'|', 'horizontalRule',
'|', 'removeformat'
],
btnsAdd: [],
/**
* When the button is associated to a empty object
* func and title attributs are defined from the button key value
*
* For example
* foo: {}
* is equivalent to :
* foo: {
* func: 'foo',
* title: this.lang.foo
* }
*/
btnsDef: {
viewHTML: {
func: 'toggle'
},
p: {
func: 'formatBlock'
},
blockquote: {
func: 'formatBlock'
},
h1: {
func: 'formatBlock',
title: h + ' 1'
},
h2: {
func: 'formatBlock',
title: h + ' 2'
},
h3: {
func: 'formatBlock',
title: h + ' 3'
},
h4: {
func: 'formatBlock',
title: h + ' 4'
},
bold: {
key: 'B'
},
italic: {
key: 'I'
},
underline: {},
strikethrough: {},
strong: {
func: 'bold',
key: 'B'
},
em: {
func: 'italic',
key: 'I'
},
del: {
func: 'strikethrough'
},
createLink: {
key: 'K'
},
unlink: {},
insertImage: {},
justifyLeft: {},
justifyCenter: {},
justifyRight: {},
justifyFull: {},
unorderedList: {
func: 'insertUnorderedList'
},
orderedList: {
func: 'insertOrderedList'
},
horizontalRule: {
func: 'insertHorizontalRule'
},
removeformat: {},
// Dropdowns
formatting: {
dropdown: ['p', 'blockquote', 'h1', 'h2', 'h3', 'h4']
},
link: {
dropdown: ['createLink', 'unlink']
}
},
blockLevelElements: ['br', 'p', 'div', 'ul', 'ol', 'table', 'img', 'address', 'article', 'aside', 'audio', 'blockquote', 'canvas', 'dl', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'main', 'nav', 'noscript', 'output', 'pre', 'section', 'tfoot', 'video']
}, o);
if (o.btns)
t.o.btns = o.btns;
else if (t.o.semantic)
t.o.btns[4] = 'btnGrp-semantic';
// Keyboard shortcuts are load in this array
t.keys = [];
t.init();
};
Trumbowyg.prototype = {
init: function () {
var t = this;
t.height = t.$ta.height();
t.buildEditor();
t.buildBtnPane();
t.fixedBtnPaneEvents();
t.buildOverlay();
},
buildEditor: function () {
var t = this,
prefix = t.o.prefix,
html = '';
t.$box = $('', {
'class': prefix + 'box ' + prefix + 'editor-visible ' + prefix + t.o.lang + ' trumbowyg'
});
// $ta = Textarea
// $ed = Editor
t.isTextarea = t.$ta.is('textarea');
if (t.isTextarea) {
html = t.$ta.val();
t.$ed = $('');
t.$box
.insertAfter(t.$ta)
.append(t.$ed, t.$ta);
} else {
t.$ed = t.$ta;
html = t.$ed.html();
t.$ta = $('', {
name: t.$ta.attr('id'),
height: t.height
}).val(html);
t.$box
.insertAfter(t.$ed)
.append(t.$ta, t.$ed);
t.syncCode();
}
t.$ta
.addClass(prefix + 'textarea')
.attr('tabindex', -1)
;
t.$ed
.addClass(prefix + 'editor')
.attr({
'contenteditable': true,
'dir': t.lang._dir || t.o.dir
})
.html(html)
;
if (t.o.tabindex) {
t.$ed.attr('tabindex', t.o.tabindex);
}
if (t.$c.is('[placeholder]')) {
t.$ed.attr('placeholder', t.$c.attr('placeholder'));
}
if (t.o.resetCss) {
t.$ed.addClass(prefix + 'reset-css');
}
if (!t.o.autogrow) {
t.$ta.add(t.$ed).css({
height: t.height,
overflow: 'auto'
});
}
if (t.o.semantic) {
t.semanticCode();
}
t._ctrl = false;
t.$ed
.on('dblclick', 'img', function () {
var $img = $(this);
t.openModalInsert(t.lang.insertImage, {
url: {
label: 'URL',
value: $img.attr('src'),
required: true
},
alt: {
label: t.lang.description,
value: $img.attr('alt')
}
}, function (v) {
return $img.attr({
src: v.url,
alt: v.alt
});
});
return false;
})
.on('keydown', function (e) {
t._composition = (e.which === 229);
if (e.ctrlKey) {
t._ctrl = true;
var k = t.keys[String.fromCharCode(e.which).toUpperCase()];
try {
t.execCmd(k.func, k.param);
return false;
} catch (e) { }
}
})
.on('keyup', function (e) {
if (!t._ctrl && e.which !== 17 && !t._composition) {
t.semanticCode(false, e.which === 13);
t.$c.trigger('tbwchange');
}
setTimeout(function () {
t._ctrl = false;
}, 200);
})
.on('focus blur', function (e) {
t.$c.trigger('tbw' + e.type);
})
.on('paste', function (e) {
if (t.o.removeformatPasted) {
e.preventDefault();
try {
// IE
var text = window.clipboardData.getData("Text");
try {
// <= IE10
t.doc.selection.createRange().pasteHTML(text);
} catch (err) {
// IE 11
t.doc.getSelection().getRangeAt(0).insertNode(document.createTextNode(text));
}
} catch (err) {
// Not IE
t.execCmd('insertText', (e.originalEvent || e).clipboardData.getData('text/plain'));
}
}
setTimeout(function () {
if (t.o.semantic) {
t.semanticCode(false, true);
} else {
t.syncCode();
}
t.$c.trigger('tbwpaste', e);
}, 0);
});
t.$ta.on('keyup paste', function () {
t.$c.trigger('tbwchange');
});
$(t.doc).on('keydown', function (e) {
if (e.which === 27) {
t.closeModal();
return false;
}
});
},
// Build button pane, use o.btns and o.btnsAdd options
buildBtnPane: function () {
var t = this,
prefix = t.o.prefix;
if (t.o.btns === false)
return;
t.$btnPane = $('
', {
'class': prefix + 'button-pane'
});
$.each(t.o.btns.concat(t.o.btnsAdd), function (i, btn) {
// Managment of group of buttons
try {
var b = btn.split('btnGrp-');
if (b[1] !== undefined)
btn = $.trumbowyg.btnsGrps[b[1]];
} catch (e) { }
if (!$.isArray(btn))
btn = [btn];
$.each(btn, function (i, b) {
try { // Prevent buildBtn error
var $li = $('');
if (b === '|') // It's a separator
$li.addClass(prefix + 'separator');
else if (t.isSupportedBtn(b)) // It's a supported button
$li.append(t.buildBtn(b));
t.$btnPane.append($li);
} catch (e) { }
});
});
// Build right li for fullscreen and close buttons
var $liRight = $('', {
'class': prefix + 'not-disable ' + prefix + 'buttons-right'
});
// Add the fullscreen button
if (t.o.fullscreenable)
$liRight.append(
t.buildRightBtn('fullscreen')
.on('click', function () {
var cssClass = prefix + 'fullscreen';
t.$box.toggleClass(cssClass);
if (t.$box.hasClass(cssClass)) {
$('body').addClass(prefix + 'body-fullscreen');
$.each([t.$ta, t.$ed], function () {
$(this).css({
height: 'calc(100% - 35px)',
overflow: 'auto'
});
});
t.$btnPane.css('width', '100%');
} else {
$('body').removeClass(prefix + 'body-fullscreen');
t.$box.removeAttr('style');
if (!t.o.autogrow)
$.each([t.$ta, t.$ed], function () {
$(this).css('height', t.height);
});
}
$(window).trigger('scroll');
})
);
// Build and add close button
if (t.o.closable)
$liRight
.append(
t.buildRightBtn('close')
.on('click', function () {
if (t.$box.hasClass(prefix + 'fullscreen'))
$('body').css('overflow', 'auto');
t.destroy();
t.$c.trigger('tbwclose');
})
);
// Add right li only if isn't empty
if ($liRight.not(':empty'))
t.$btnPane.append($liRight);
t.$box.prepend(t.$btnPane);
},
// Build a button and his action
buildBtn: function (n) { // n is name of the button
var t = this,
prefix = t.o.prefix,
btn = t.o.btnsDef[n],
d = btn.dropdown,
textDef = t.lang[n] || n,
$btn = $('', {
type: 'button',
'class': prefix + n + '-button' + (btn.ico ? ' ' + prefix + btn.ico + '-button' : ''),
text: btn.text || btn.title || textDef,
title: btn.title || btn.text || textDef + ((btn.key) ? ' (Ctrl + ' + btn.key + ')' : ''),
tabindex: -1,
mousedown: function () {
if (!d || $('.' + n + '-' + prefix + 'dropdown', t.$box).is(':hidden'))
$('body', t.doc).trigger('mousedown');
if (t.$btnPane.hasClass(prefix + 'disable') && !$(this).hasClass(prefix + 'active') && !$(this).parent().hasClass(prefix + 'not-disable'))
return false;
t.execCmd((d ? 'dropdown' : false) || btn.func || n,
btn.param || n);
return false;
}
});
if (d) {
$btn.addClass(prefix + 'open-dropdown');
var c = prefix + 'dropdown',
dd = $('', { // the dropdown
'class': n + '-' + c + ' ' + c + ' ' + prefix + 'fixed-top'
});
$.each(d, function (i, def) {
if (t.o.btnsDef[def] && t.isSupportedBtn(def))
dd.append(t.buildSubBtn(def));
});
t.$box.append(dd.hide());
} else if (btn.key) {
t.keys[btn.key] = {
func: btn.func || n,
param: btn.param || n
};
}
return $btn;
},
// Build a button for dropdown menu
// @param n : name of the subbutton
buildSubBtn: function (n) {
var t = this,
b = t.o.btnsDef[n];
if (b.key) {
t.keys[b.key] = {
func: b.func || n,
param: b.param || n
};
}
return $('', {
type: 'button',
'class': t.o.prefix + n + '-dropdown-button' + (b.ico ? ' ' + t.o.prefix + b.ico + '-button' : ''),
text: b.text || b.title || t.lang[n] || n,
title: ((b.key) ? ' (Ctrl + ' + b.key + ')' : null),
style: b.style || null,
mousedown: function () {
$('body', t.doc).trigger('mousedown');
t.execCmd(b.func || n,
b.param || n);
return false;
}
});
},
// Build a button for right li
// @param n : name of the right button
buildRightBtn: function (n) {
var l = this.lang[n];
return $('', {
type: 'button',
'class': this.o.prefix + n + '-button',
title: l,
text: l,
tabindex: -1
});
},
// Check if button is supported
isSupportedBtn: function (b) {
try {
return this.o.btnsDef[b].isSupported();
} catch (e) { }
return true;
},
// Build overlay for modal box
buildOverlay: function () {
var t = this;
t.$overlay = $('', {
'class': t.o.prefix + 'overlay'
}).css({
top: t.$btnPane.outerHeight(),
height: (t.$ed.outerHeight() + 1) + 'px'
}).appendTo(t.$box);
return t.$overlay;
},
showOverlay: function () {
var t = this;
$(window).trigger('scroll');
t.$overlay.fadeIn(200);
t.$box.addClass(t.o.prefix + 'box-blur');
},
hideOverlay: function () {
var t = this;
t.$overlay.fadeOut(50);
t.$box.removeClass(t.o.prefix + 'box-blur');
},
// Management of fixed button pane
fixedBtnPaneEvents: function () {
var t = this,
fixedFullWidth = t.o.fixedFullWidth,
box = t.$box;
if (!t.o.fixedBtnPane)
return;
t.isFixed = false;
$(window)
.on('scroll resize', function () {
if (!box)
return;
t.syncCode();
var scrollTop = $(window).scrollTop(),
offset = box.offset().top + 1,
bp = t.$btnPane,
oh = bp.outerHeight();
if ((scrollTop - offset > 0) && ((scrollTop - offset - t.height) < 0)) {
if (!t.isFixed) {
t.isFixed = true;
bp.css({
position: 'fixed',
top: 0,
left: fixedFullWidth ? '0' : 'auto',
zIndex: 7
});
$([t.$ta, t.$ed]).css({ marginTop: bp.height() });
}
bp.css({
width: fixedFullWidth ? '100%' : ((box.width() - 1) + 'px')
});
$('.' + t.o.prefix + 'fixed-top', box).css({
position: fixedFullWidth ? 'fixed' : 'absolute',
top: fixedFullWidth ? oh : oh + (scrollTop - offset) + 'px',
zIndex: 15
});
} else if (t.isFixed) {
t.isFixed = false;
bp.removeAttr('style');
$([t.$ta, t.$ed]).css({ marginTop: 0 });
$('.' + t.o.prefix + 'fixed-top', box).css({
position: 'absolute',
top: oh
});
}
});
},
// Destroy the editor
destroy: function () {
var t = this,
prefix = t.o.prefix,
height = t.height,
html = t.html();
if (t.isTextarea)
t.$box.after(
t.$ta.css({ height: height })
.val(html)
.removeClass(prefix + 'textarea')
.show()
);
else
t.$box.after(
t.$ed
.css({ height: height })
.removeClass(prefix + 'editor')
.removeAttr('contenteditable')
.html(html)
.show()
);
t.$box.remove();
t.$c.removeData('trumbowyg');
},
// Empty the editor
empty: function () {
this.$ta.val('');
this.syncCode(true);
},
// Function call when click on viewHTML button
toggle: function () {
var t = this,
prefix = t.o.prefix;
t.semanticCode(false, true);
t.$box.toggleClass(prefix + 'editor-hidden ' + prefix + 'editor-visible');
t.$btnPane.toggleClass(prefix + 'disable');
$('.' + prefix + 'viewHTML-button', t.$btnPane).toggleClass(prefix + 'active');
if (t.$box.hasClass(prefix + 'editor-visible'))
t.$ta.attr('tabindex', -1);
else
t.$ta.removeAttr('tabindex');
},
// Open dropdown when click on a button which open that
dropdown: function (name) {
var t = this,
d = t.doc,
prefix = t.o.prefix,
$dd = $('.' + name + '-' + prefix + 'dropdown', t.$box),
$btn = $('.' + prefix + name + '-button', t.$btnPane);
if ($dd.is(':hidden')) {
var o = $btn.offset().left;
$btn.addClass(prefix + 'active');
$dd.css({
position: 'absolute',
top: t.$btnPane.outerHeight(),
left: (t.o.fixedFullWidth && t.isFixed) ? o + 'px' : (o - t.$btnPane.offset().left) + 'px'
}).show();
$(window).trigger('scroll');
$('body', d).on('mousedown', function () {
$('.' + prefix + 'dropdown', d).hide();
$('.' + prefix + 'active', d).removeClass(prefix + 'active');
$('body', d).off('mousedown');
});
} else
$('body', d).trigger('mousedown');
},
// HTML Code management
html: function (html) {
var t = this;
if (html) {
t.$ta.val(html);
t.syncCode(true);
return t;
} else
return t.$ta.val();
},
syncCode: function (force) {
var t = this;
if (!force && t.$ed.is(':visible')) {
t.$ta.val(t.$ed.html());
t.$c.trigger('tbwchange');
} else {
t.$ed.html(t.$ta.val());
}
if (t.o.autogrow) {
t.height = t.$ed.height();
if (t.height != t.$ta.css('height')) {
t.$ta.css({ height: t.height });
t.$c.trigger('tbwresize');
}
}
},
// Analyse and update to semantic code
// @param force : force to sync code from textarea
// @param full : wrap text nodes in
semanticCode: function (force, full) {
var t = this;
t.syncCode(force);
t.saveSelection();
if (t.o.semantic) {
t.semanticTag('b', 'strong');
t.semanticTag('i', 'em');
t.semanticTag('strike', 'del');
if (full) {
var blockElementsSelector = t.o.blockLevelElements.join(', '),
inlineElementsSelector = ':not(' + blockElementsSelector + ')';
// Wrap text nodes in span for easier processing
t.$ed.contents().filter(function () {
return this.nodeType === 3 && $.trim(this.nodeValue).length > 0;
}).wrap('');
// Wrap groups of inline elements in paragraphs (recursive)
var wrapInlinesInParagraphsFrom = function ($from) {
if ($from.length !== 0) {
var $finalParagraph = $from.nextUntil(blockElementsSelector + ', br').andSelf()
.wrapAll('
').parent();
$finalParagraph.next('br').remove();
var $nextElement = $finalParagraph.nextAll(inlineElementsSelector).first();
if ($nextElement.length) {
wrapInlinesInParagraphsFrom($nextElement);
}
}
};
wrapInlinesInParagraphsFrom(t.$ed.children(inlineElementsSelector).first());
t.semanticTag('div', 'p', true);
// Unwrap paragraphs content, containing nothing usefull
t.$ed.find('p').filter(function () {
if (t.selection && this === t.selection.startContainer) {
// Don't remove currently being edited element
return false;
}
return $(this).text().trim().length === 0 && $(this).children().not('br, span').length === 0;
}).contents().unwrap();
// Get rid of temporial span's
$('[data-trumbowyg-textnode]', t.$ed).contents().unwrap();
// Replace empty
with (IE loves adding empty
)
t.$ed.find('p:empty').replaceWith(' ');
}
t.restoreSelection();
t.$ta.val(t.$ed.html());
}
},
semanticTag: function (oldTag, newTag, copyAttributes) {
$(oldTag, this.$ed).each(function () {
var $oldTag = $(this);
$oldTag.wrap('<' + newTag + '/>');
if (copyAttributes) {
$.each($oldTag.prop('attributes'), function () {
$oldTag.parent().attr(this.name, this.value);
});
}
$oldTag.contents().unwrap();
});
},
// Function call when user click on "Insert Link"
createLink: function () {
var t = this;
t.saveSelection();
t.openModalInsert(t.lang.createLink, {
url: {
label: 'URL',
required: true
},
title: {
label: t.lang.title
},
text: {
label: t.lang.text,
value: t.getSelectedText()
},
target: {
label: t.lang.target
}
}, function (v) { // v is value
var link = $(['', v.text, ''].join(''));
if (v.title.length > 0)
link.attr('title', v.title);
if (v.target.length > 0)
link.attr('target', v.target);
t.selection.deleteContents();
t.selection.insertNode(link.get(0));
t.restoreSelection();
return true;
});
},
insertImage: function () {
var t = this;
t.saveSelection();
t.openModalInsert(t.lang.insertImage, {
url: {
label: 'URL',
required: true
},
alt: {
label: t.lang.description,
value: t.getSelectedText()
}
}, function (v) { // v are values
t.execCmd('insertImage', v.url);
$('img[src="' + v.url + '"]:not([alt])', t.$box).attr('alt', v.alt);
return true;
});
},
/*
* Call method of trumbowyg if exist
* else try to call anonymous function
* and finaly native execCommand
*/
execCmd: function (cmd, param) {
var t = this;
if (cmd != 'dropdown')
t.$ed.focus();
try {
t[cmd](param);
} catch (e) {
try {
cmd(param, t);
} catch (e2) {
if (cmd == 'insertHorizontalRule')
param = null;
else if (cmd == 'formatBlock' && (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0))
param = '<' + param + '>';
t.doc.execCommand(cmd, false, param);
}
}
if (cmd != 'dropdown')
t.syncCode();
},
// Open a modal box
openModal: function (title, content) {
var t = this,
prefix = t.o.prefix;
// No open a modal box when exist other modal box
if ($('.' + prefix + 'modal-box', t.$box).length > 0)
return false;
t.saveSelection();
t.showOverlay();
// Disable all btnPane btns
t.$btnPane.addClass(prefix + 'disable');
// Build out of ModalBox, it's the mask for animations
var $modal = $('