nextcloud-toolkit
Version:
Nextcloud UI components
1,440 lines (1,268 loc) • 900 kB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(3);
/***/ }),
/* 1 */
/***/ (function(module, exports) {
/**
* Helper function for iterating over a collection
*
* @param collection
* @param fn
*/
function each(collection, fn) {
var i = 0,
length = collection.length,
cont;
for(i; i < length; i++) {
cont = fn(collection[i], i);
if(cont === false) {
break; //allow early exit
}
}
}
/**
* Helper function for determining whether target object is an array
*
* @param target the object under test
* @return {Boolean} true if array, false otherwise
*/
function isArray(target) {
return Object.prototype.toString.apply(target) === '[object Array]';
}
/**
* Helper function for determining whether target object is a function
*
* @param target the object under test
* @return {Boolean} true if function, false otherwise
*/
function isFunction(target) {
return typeof target === 'function';
}
module.exports = {
isFunction : isFunction,
isArray : isArray,
each : each
};
/***/ }),
/* 2 */,
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var $ = __webpack_require__(11);
var _ = __webpack_require__(12);
var enquire = __webpack_require__(8);
var bodymovin = __webpack_require__(4);
var Headroom = __webpack_require__(9);
var headroomJquery = __webpack_require__(10);
var HeaderApp = {
init: function init() {
this.didScroll = false;
this.menuOpened = false;
this.enquireInitializedMobile = false;
this.animatedLogoSprite();
enquire.register('screen and (max-width: 992px)', {
match: _.bind(this.mobileEvent, this)
});
enquire.register('screen and (max-height: 700px)', {
match: _.bind(this.showAndHideHeader, this)
});
enquire.register('screen and (min-width: 993px)', {
match: _.bind(this.desktopDropdownEvent, this)
});
},
variables: {
toggleSelector: '#toggle',
navigationId: '#nav',
navigationSelector: '.nav',
subMenuSelector: '#menuAnchor',
sectionsSelector: '.nav__sections',
sectionsContainerSelector: '.nav__sections-wrapper',
sectionSelector: '.nav__section',
navBackgroundSelector: '.nav__bg',
navBackgroundWrapper: '.nav__bg-wrapper',
rightNavigationSelector: '.right-buttons',
linksSelector: '.nav__links',
logoSelector: '.logo',
mobileClass: 'mobile',
activeClass: 'active',
scrolledClass: 'scrolled',
backgroundAnimationClass: 'is-animatable',
linksVisibleClass: 'is-visible',
mobileBackgroundSelector: '.mobile-bg',
mobileMenuClass: 'menu-open',
showNavigationClass: 'nav-down',
hideNavigationClass: 'nav-up',
playOnHoverClass: 'hoverPlay',
stopAnimationClass: 'stopedAnimation',
mobileBackgroundContainerSelector: '.mobile-bg-container'
},
toggleMobileMenu: function toggleMobileMenu(event) {
$(this.variables.linksSelector).hide().removeClass(this.variables.activeClass); // hide all submenus without animation
$(event.currentTarget).toggleClass(this.variables.activeClass);
$(this.variables.mobileBackgroundSelector).toggleClass(this.variables.activeClass);
$(this.variables.sectionsSelector).toggleClass(this.variables.activeClass);
$(this.variables.rightNavigationSelector).toggleClass(this.variables.activeClass);
$(this.variables.logoSelector).toggleClass(this.variables.mobileMenuClass);
$(this.variables.mobileBackgroundContainerSelector).toggleClass(this.variables.backgroundAnimationClass);
},
resetMobile: function resetMobile() {
$(this.variables.navigationId).removeClass(this.variables.mobileClass);
$(this.variables.toggleSelector).off('click');
$(this.variables.sectionSelector).off('click');
$(this.variables.linksSelector).css('display', 'inherit').removeClass(this.variables.activeClass);
},
resetDesktop: function resetDesktop() {
$(this.variables.sectionSelector).off('mouseover');
$(this.variables.sectionSelector).off('mouseleave');
$(this.variables.linksSelector).hide();
},
showSubMenu: function showSubMenu(event) {
if ($(event.currentTarget).find(this.variables.linksSelector).hasClass(this.variables.activeClass)) {
$(this.variables.linksSelector).slideUp().removeClass(this.variables.activeClass);
return;
}
$(this.variables.linksSelector).slideUp().removeClass(this.variables.activeClass);
$(event.currentTarget).find(this.variables.linksSelector).slideToggle().addClass(this.variables.activeClass);
},
mobileBgAnimation: function mobileBgAnimation() {
var windowDiameter = $(window).width() * 2 * $(window).height() * 2,
returnBiggest = Math.sqrt(windowDiameter) * 1.5;
$(this.variables.mobileBackgroundSelector).css({
'top': -returnBiggest / 2 + 'px',
'right': -returnBiggest / 2 + 'px',
'width': returnBiggest + 'px',
'height': returnBiggest + 'px'
});
},
showAndHideHeader: function showAndHideHeader(variables) {
var myElement = document.querySelector('.nav');
// I should pass the variable object inside the headroom
this.headroom = new Headroom(myElement, {
offset: 510,
tolerance: {
up: 20,
down: 20
},
onTop: function onTop(variables) {
$('#nav').removeClass('scrolled');
$('.logo').removeClass('scrolled');
$('.mobile-bg-container').addClass('visible');
},
onPin: function onPin() {
$('.menu').removeClass('hidedPrincipalNavigation');
$('#nav').addClass('scrolled');
$('.logo').addClass('scrolled');
},
onNotTop: function onNotTop() {
$('.mobile-bg-container').addClass('visible');
},
onUnpin: function onUnpin() {
$('.menu').addClass('hidedPrincipalNavigation');
$('.mobile-bg-container').addClass('visible');
}
});
this.headroom.init();
},
mobileEvent: function mobileEvent() {
this.resetDesktop();
if (!this.enquireInitializedMobile) {
this.enquireInitializedMobile = true;
this.createMenuButton();
}
$(window).on('resize', _.bind(this.mobileBgAnimation, this));
this.mobileBgAnimation();
$(this.variables.navigationId).addClass(this.variables.mobileClass);
$(this.variables.toggleSelector).click(_.bind(this.toggleMobileMenu, this));
$(this.variables.sectionSelector).click(_.bind(this.showSubMenu, this));
},
setBackgroundDropdown: function setBackgroundDropdown(bg) {
bg.addClass(this.variables.backgroundAnimationClass);
},
backgroundDropdown: function backgroundDropdown(event) {
var cssPadding = 30,
bg = $(this.variables.navBackgroundSelector),
bgWrapper = $(this.variables.navBackgroundWrapper),
selectedDropdown = $(event.currentTarget).find(this.variables.linksSelector),
height = selectedDropdown.innerHeight(),
width = selectedDropdown.innerWidth(),
windowWidth = $(this.variables.navigationSelector).outerWidth(),
navigationWidth = $('.nav .container').outerWidth(),
marginNavigation = (windowWidth - navigationWidth) / 2,
backgroundDropdownPosition = $(event.currentTarget).offset().left + cssPadding + ($(event.currentTarget).innerWidth() - cssPadding) / 2 - width / 2 - marginNavigation;
setTimeout(_.bind(this.setBackgroundDropdown, this, bg));
bgWrapper.addClass(this.variables.linksVisibleClass);
bg.css({
'-moz-transform': 'translateX(' + backgroundDropdownPosition + 'px)',
'-webkit-transform': 'translateX(' + backgroundDropdownPosition + 'px)',
'-ms-transform': 'translateX(' + backgroundDropdownPosition + 'px)',
'-o-transform': 'translateX(' + backgroundDropdownPosition + 'px)',
'transform': 'translateX(' + backgroundDropdownPosition + 'px)',
'width': width + 'px',
'height': height + 'px'
});
},
desktopDropdownEvent: function desktopDropdownEvent() {
this.resetMobile();
$(this.variables.sectionSelector).on('mouseover', _.bind(this.backgroundDropdown, this));
$(this.variables.sectionSelector).on('mouseleave', _.bind(this.destroyDropdown, this));
this.showAndHideHeader();
},
// Clear dropdowns in mouse leave
destroyDropdown: function destroyDropdown(event) {
var bg = $(this.variables.navBackgroundSelector),
bgWrapper = $(this.variables.navBackgroundWrapper);
setTimeout(_.bind(function () {
bg.removeClass(this.variables.backgroundAnimationClass);
}, this));
var bgWrapper = $(this.variables.navBackgroundWrapper);
bgWrapper.removeClass(this.variables.linksVisibleClass);
},
// Bodymovin menu Animation
createMenuButton: function createMenuButton() {
var menuAnimation,
animContainer = document.querySelectorAll('.container button')[0],
params = {
container: animContainer,
renderer: 'svg',
loop: false,
autoplay: false,
autoloadSegments: true,
path: templateUrl + '/assets/img/menu/data.json'
};
menuAnimation = bodymovin.loadAnimation(params);
menuAnimation.stop();
$('.container button').click(function () {
if (this.menuOpened) {
menuAnimation.setDirection(-1);
} else {
menuAnimation.setDirection(0);
}
menuAnimation.play();
this.menuOpened = !this.menuOpened;
});
},
// Listen to scroll to change header opacity class
toggleScrolledClass: function toggleScrolledClass() {
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (bodyScrollTop !== 0) {
$(this.variables.navigationId).addClass(this.variables.scrolledClass);
$(this.variables.logoSelector).addClass(this.variables.scrolledClass);
} else {
$(this.variables.navigationId).removeClass(this.variables.scrolledClass);
$(this.variables.logoSelector).removeClass(this.variables.scrolledClass);
}
},
checkScroll: function checkScroll() {
if ($(this.variables.navigationId).length > 0) {
$(window).on('scroll load resize', _.bind(this.toggleScrolledClass, this));
}
},
animatedLogoSprite: function animatedLogoSprite() {
this.hoverLogo();
$(this.variables.logoSelector).on('mouseover', _.bind(this.hoverLogo, this));
},
hoverLogo: function hoverLogo() {
$(this.variables.logoSelector).removeClass(this.variables.stopAnimationClass);
$(this.variables.logoSelector).addClass(this.variables.playOnHoverClass);
setTimeout(_.bind(this.stopLogoAnimation, this), 2000);
},
stopLogoAnimation: function stopLogoAnimation() {
$(this.variables.logoSelector).removeClass(this.variables.playOnHoverClass);
$(this.variables.logoSelector).addClass(this.variables.stopAnimationClass);
}
};
HeaderApp.init();
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;(function (root, factory) { if(true) { !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); } else if(typeof module === "object" && module.exports) { module.exports = factory(); } else { root.bodymovin = factory(); } }(window, function() {var svgNS = "http://www.w3.org/2000/svg";
var subframeEnabled = true;
var expressionsPlugin;
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
var cachedColors = {};
var bm_rounder = Math.round;
var bm_rnd;
var bm_pow = Math.pow;
var bm_sqrt = Math.sqrt;
var bm_abs = Math.abs;
var bm_floor = Math.floor;
var bm_max = Math.max;
var bm_min = Math.min;
var blitter = 10;
var BMMath = {};
(function(){
var propertyNames = Object.getOwnPropertyNames(Math);
var i, len = propertyNames.length;
for(i=0;i<len;i+=1){
BMMath[propertyNames[i]] = Math[propertyNames[i]];
}
}());
function ProjectInterface(){return {}};
BMMath.random = Math.random;
BMMath.abs = function(val){
var tOfVal = typeof val;
if(tOfVal === 'object' && val.length){
var absArr = Array.apply(null,{length:val.length});
var i, len = val.length;
for(i=0;i<len;i+=1){
absArr[i] = Math.abs(val[i]);
}
return absArr;
}
return Math.abs(val);
}
var defaultCurveSegments = 150;
var degToRads = Math.PI/180;
var roundCorner = 0.5519;
function roundValues(flag){
if(flag){
bm_rnd = Math.round;
}else{
bm_rnd = function(val){
return val;
};
}
}
roundValues(false);
function roundTo2Decimals(val){
return Math.round(val*10000)/10000;
}
function roundTo3Decimals(val){
return Math.round(val*100)/100;
}
function styleDiv(element){
element.style.position = 'absolute';
element.style.top = 0;
element.style.left = 0;
element.style.display = 'block';
element.style.transformOrigin = element.style.webkitTransformOrigin = '0 0';
element.style.backfaceVisibility = element.style.webkitBackfaceVisibility = 'visible';
element.style.transformStyle = element.style.webkitTransformStyle = element.style.mozTransformStyle = "preserve-3d";
}
function styleUnselectableDiv(element){
element.style.userSelect = 'none';
element.style.MozUserSelect = 'none';
element.style.webkitUserSelect = 'none';
element.style.oUserSelect = 'none';
}
function BMEnterFrameEvent(n,c,t,d){
this.type = n;
this.currentTime = c;
this.totalTime = t;
this.direction = d < 0 ? -1:1;
}
function BMCompleteEvent(n,d){
this.type = n;
this.direction = d < 0 ? -1:1;
}
function BMCompleteLoopEvent(n,c,t,d){
this.type = n;
this.currentLoop = c;
this.totalLoops = t;
this.direction = d < 0 ? -1:1;
}
function BMSegmentStartEvent(n,f,t){
this.type = n;
this.firstFrame = f;
this.totalFrames = t;
}
function BMDestroyEvent(n,t){
this.type = n;
this.target = t;
}
function _addEventListener(eventName, callback){
if (!this._cbs[eventName]){
this._cbs[eventName] = [];
}
this._cbs[eventName].push(callback);
}
function _removeEventListener(eventName,callback){
if (!callback){
this._cbs[eventName] = null;
}else if(this._cbs[eventName]){
var i = 0, len = this._cbs[eventName].length;
while(i<len){
if(this._cbs[eventName][i] === callback){
this._cbs[eventName].splice(i,1);
i -=1;
len -= 1;
}
i += 1;
}
if(!this._cbs[eventName].length){
this._cbs[eventName] = null;
}
}
}
function _triggerEvent(eventName, args){
if (this._cbs[eventName]) {
var len = this._cbs[eventName].length;
for (var i = 0; i < len; i++){
this._cbs[eventName][i](args);
}
}
}
function randomString(length, chars){
if(chars === undefined){
chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
}
var i;
var result = '';
for (i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
return result;
}
function HSVtoRGB(h, s, v) {
var r, g, b, i, f, p, q, t;
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return [ r,
g,
b ];
}
function RGBtoHSV(r, g, b) {
if (arguments.length === 1) {
g = r.g, b = r.b, r = r.r;
}
var max = Math.max(r, g, b), min = Math.min(r, g, b),
d = max - min,
h,
s = (max === 0 ? 0 : d / max),
v = max / 255;
switch (max) {
case min: h = 0; break;
case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;
case g: h = (b - r) + d * 2; h /= 6 * d; break;
case b: h = (r - g) + d * 4; h /= 6 * d; break;
}
return [
h,
s,
v
];
}
function addSaturationToRGB(color,offset){
var hsv = RGBtoHSV(color[0]*255,color[1]*255,color[2]*255);
hsv[1] += offset;
if (hsv[1] > 1) {
hsv[1] = 1;
}
else if (hsv[1] <= 0) {
hsv[1] = 0;
}
return HSVtoRGB(hsv[0],hsv[1],hsv[2]);
}
function addBrightnessToRGB(color,offset){
var hsv = RGBtoHSV(color[0]*255,color[1]*255,color[2]*255);
hsv[2] += offset;
if (hsv[2] > 1) {
hsv[2] = 1;
}
else if (hsv[2] < 0) {
hsv[2] = 0;
}
return HSVtoRGB(hsv[0],hsv[1],hsv[2]);
}
function addHueToRGB(color,offset) {
var hsv = RGBtoHSV(color[0]*255,color[1]*255,color[2]*255);
hsv[0] += offset/360;
if (hsv[0] > 1) {
hsv[0] -= 1;
}
else if (hsv[0] < 0) {
hsv[0] += 1;
}
return HSVtoRGB(hsv[0],hsv[1],hsv[2]);
}
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? '0' + hex : hex;
}
var rgbToHex = (function(){
var colorMap = [];
var i;
var hex;
for(i=0;i<256;i+=1){
hex = i.toString(16);
colorMap[i] = hex.length == 1 ? '0' + hex : hex;
}
return function(r, g, b) {
if(r<0){
r = 0;
}
if(g<0){
g = 0;
}
if(b<0){
b = 0;
}
return '#' + colorMap[r] + colorMap[g] + colorMap[b];
};
}());
function fillToRgba(hex,alpha){
if(!cachedColors[hex]){
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
cachedColors[hex] = parseInt(result[1], 16)+','+parseInt(result[2], 16)+','+parseInt(result[3], 16);
}
return 'rgba('+cachedColors[hex]+','+alpha+')';
}
var fillColorToString = (function(){
var colorMap = [];
return function(colorArr,alpha){
if(alpha !== undefined){
colorArr[3] = alpha;
}
if(!colorMap[colorArr[0]]){
colorMap[colorArr[0]] = {};
}
if(!colorMap[colorArr[0]][colorArr[1]]){
colorMap[colorArr[0]][colorArr[1]] = {};
}
if(!colorMap[colorArr[0]][colorArr[1]][colorArr[2]]){
colorMap[colorArr[0]][colorArr[1]][colorArr[2]] = {};
}
if(!colorMap[colorArr[0]][colorArr[1]][colorArr[2]][colorArr[3]]){
colorMap[colorArr[0]][colorArr[1]][colorArr[2]][colorArr[3]] = 'rgba(' + colorArr.join(',')+')';
}
return colorMap[colorArr[0]][colorArr[1]][colorArr[2]][colorArr[3]];
};
}());
function RenderedFrame(tr,o) {
this.tr = tr;
this.o = o;
}
function LetterProps(o,sw,sc,fc,m,p){
this.o = o;
this.sw = sw;
this.sc = sc;
this.fc = fc;
this.m = m;
this.props = p;
}
function iterateDynamicProperties(num){
var i, len = this.dynamicProperties;
for(i=0;i<len;i+=1){
this.dynamicProperties[i].getValue(num);
}
}
function reversePath(paths){
var newI = [], newO = [], newV = [];
var i, len, newPaths = {};
var init = 0;
if (paths.c) {
newI[0] = paths.o[0];
newO[0] = paths.i[0];
newV[0] = paths.v[0];
init = 1;
}
len = paths.i.length;
var cnt = len - 1;
for (i = init; i < len; i += 1) {
newI.push(paths.o[cnt]);
newO.push(paths.i[cnt]);
newV.push(paths.v[cnt]);
cnt -= 1;
}
newPaths.i = newI;
newPaths.o = newO;
newPaths.v = newV;
return newPaths;
}
/*!
Transformation Matrix v2.0
(c) Epistemex 2014-2015
www.epistemex.com
By Ken Fyrstenberg
Contributions by leeoniya.
License: MIT, header required.
*/
/**
* 2D transformation matrix object initialized with identity matrix.
*
* The matrix can synchronize a canvas context by supplying the context
* as an argument, or later apply current absolute transform to an
* existing context.
*
* All values are handled as floating point values.
*
* @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix
* @prop {number} a - scale x
* @prop {number} b - shear y
* @prop {number} c - shear x
* @prop {number} d - scale y
* @prop {number} e - translate x
* @prop {number} f - translate y
* @prop {CanvasRenderingContext2D|null} [context=null] - set or get current canvas context
* @constructor
*/
var Matrix = (function(){
function reset(){
this.props[0] = 1;
this.props[1] = 0;
this.props[2] = 0;
this.props[3] = 0;
this.props[4] = 0;
this.props[5] = 1;
this.props[6] = 0;
this.props[7] = 0;
this.props[8] = 0;
this.props[9] = 0;
this.props[10] = 1;
this.props[11] = 0;
this.props[12] = 0;
this.props[13] = 0;
this.props[14] = 0;
this.props[15] = 1;
return this;
}
function rotate(angle) {
if(angle === 0){
return this;
}
var mCos = Math.cos(angle);
var mSin = Math.sin(angle);
return this._t(mCos, -mSin, 0, 0
, mSin, mCos, 0, 0
, 0, 0, 1, 0
, 0, 0, 0, 1);
}
function rotateX(angle){
if(angle === 0){
return this;
}
var mCos = Math.cos(angle);
var mSin = Math.sin(angle);
return this._t(1, 0, 0, 0
, 0, mCos, -mSin, 0
, 0, mSin, mCos, 0
, 0, 0, 0, 1);
}
function rotateY(angle){
if(angle === 0){
return this;
}
var mCos = Math.cos(angle);
var mSin = Math.sin(angle);
return this._t(mCos, 0, mSin, 0
, 0, 1, 0, 0
, -mSin, 0, mCos, 0
, 0, 0, 0, 1);
}
function rotateZ(angle){
if(angle === 0){
return this;
}
var mCos = Math.cos(angle);
var mSin = Math.sin(angle);
return this._t(mCos, -mSin, 0, 0
, mSin, mCos, 0, 0
, 0, 0, 1, 0
, 0, 0, 0, 1);
}
function shear(sx,sy){
return this._t(1, sy, sx, 1, 0, 0);
}
function skew(ax, ay){
return this.shear(Math.tan(ax), Math.tan(ay));
}
function skewFromAxis(ax, angle){
var mCos = Math.cos(angle);
var mSin = Math.sin(angle);
return this._t(mCos, mSin, 0, 0
, -mSin, mCos, 0, 0
, 0, 0, 1, 0
, 0, 0, 0, 1)
._t(1, 0, 0, 0
, Math.tan(ax), 1, 0, 0
, 0, 0, 1, 0
, 0, 0, 0, 1)
._t(mCos, -mSin, 0, 0
, mSin, mCos, 0, 0
, 0, 0, 1, 0
, 0, 0, 0, 1);
//return this._t(mCos, mSin, -mSin, mCos, 0, 0)._t(1, 0, Math.tan(ax), 1, 0, 0)._t(mCos, -mSin, mSin, mCos, 0, 0);
}
function scale(sx, sy, sz) {
sz = isNaN(sz) ? 1 : sz;
if(sx == 1 && sy == 1 && sz == 1){
return this;
}
return this._t(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
}
function setTransform(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) {
this.props[0] = a;
this.props[1] = b;
this.props[2] = c;
this.props[3] = d;
this.props[4] = e;
this.props[5] = f;
this.props[6] = g;
this.props[7] = h;
this.props[8] = i;
this.props[9] = j;
this.props[10] = k;
this.props[11] = l;
this.props[12] = m;
this.props[13] = n;
this.props[14] = o;
this.props[15] = p;
return this;
}
function translate(tx, ty, tz) {
tz = tz || 0;
if(tx !== 0 || ty !== 0 || tz !== 0){
return this._t(1,0,0,0,0,1,0,0,0,0,1,0,tx,ty,tz,1);
}
return this;
}
function transform(a2, b2, c2, d2, e2, f2, g2, h2, i2, j2, k2, l2, m2, n2, o2, p2) {
if(a2 === 1 && b2 === 0 && c2 === 0 && d2 === 0 && e2 === 0 && f2 === 1 && g2 === 0 && h2 === 0 && i2 === 0 && j2 === 0 && k2 === 1 && l2 === 0){
if(m2 !== 0 || n2 !== 0 || o2 !== 0){
this.props[12] = this.props[12] * a2 + this.props[13] * e2 + this.props[14] * i2 + this.props[15] * m2 ;
this.props[13] = this.props[12] * b2 + this.props[13] * f2 + this.props[14] * j2 + this.props[15] * n2 ;
this.props[14] = this.props[12] * c2 + this.props[13] * g2 + this.props[14] * k2 + this.props[15] * o2 ;
this.props[15] = this.props[12] * d2 + this.props[13] * h2 + this.props[14] * l2 + this.props[15] * p2 ;
}
return this;
}
var a1 = this.props[0];
var b1 = this.props[1];
var c1 = this.props[2];
var d1 = this.props[3];
var e1 = this.props[4];
var f1 = this.props[5];
var g1 = this.props[6];
var h1 = this.props[7];
var i1 = this.props[8];
var j1 = this.props[9];
var k1 = this.props[10];
var l1 = this.props[11];
var m1 = this.props[12];
var n1 = this.props[13];
var o1 = this.props[14];
var p1 = this.props[15];
/* matrix order (canvas compatible):
* ace
* bdf
* 001
*/
this.props[0] = a1 * a2 + b1 * e2 + c1 * i2 + d1 * m2;
this.props[1] = a1 * b2 + b1 * f2 + c1 * j2 + d1 * n2 ;
this.props[2] = a1 * c2 + b1 * g2 + c1 * k2 + d1 * o2 ;
this.props[3] = a1 * d2 + b1 * h2 + c1 * l2 + d1 * p2 ;
this.props[4] = e1 * a2 + f1 * e2 + g1 * i2 + h1 * m2 ;
this.props[5] = e1 * b2 + f1 * f2 + g1 * j2 + h1 * n2 ;
this.props[6] = e1 * c2 + f1 * g2 + g1 * k2 + h1 * o2 ;
this.props[7] = e1 * d2 + f1 * h2 + g1 * l2 + h1 * p2 ;
this.props[8] = i1 * a2 + j1 * e2 + k1 * i2 + l1 * m2 ;
this.props[9] = i1 * b2 + j1 * f2 + k1 * j2 + l1 * n2 ;
this.props[10] = i1 * c2 + j1 * g2 + k1 * k2 + l1 * o2 ;
this.props[11] = i1 * d2 + j1 * h2 + k1 * l2 + l1 * p2 ;
this.props[12] = m1 * a2 + n1 * e2 + o1 * i2 + p1 * m2 ;
this.props[13] = m1 * b2 + n1 * f2 + o1 * j2 + p1 * n2 ;
this.props[14] = m1 * c2 + n1 * g2 + o1 * k2 + p1 * o2 ;
this.props[15] = m1 * d2 + n1 * h2 + o1 * l2 + p1 * p2 ;
return this;
}
function clone(matr){
var i;
for(i=0;i<16;i+=1){
matr.props[i] = this.props[i];
}
}
function cloneFromProps(props){
var i;
for(i=0;i<16;i+=1){
this.props[i] = props[i];
}
}
function applyToPoint(x, y, z) {
return {
x: x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
y: x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
z: x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]
};
/*return {
x: x * me.a + y * me.c + me.e,
y: x * me.b + y * me.d + me.f
};*/
}
function applyToX(x, y, z) {
return x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12];
}
function applyToY(x, y, z) {
return x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13];
}
function applyToZ(x, y, z) {
return x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14];
}
function inversePoints(pts){
//var determinant = this.a * this.d - this.b * this.c;
var determinant = this.props[0] * this.props[5] - this.props[1] * this.props[4];
var a = this.props[5]/determinant;
var b = - this.props[1]/determinant;
var c = - this.props[4]/determinant;
var d = this.props[0]/determinant;
var e = (this.props[4] * this.props[13] - this.props[5] * this.props[12])/determinant;
var f = - (this.props[0] * this.props[13] - this.props[1] * this.props[12])/determinant;
var i, len = pts.length, retPts = [];
for(i=0;i<len;i+=1){
retPts[i] = [pts[i][0] * a + pts[i][1] * c + e, pts[i][0] * b + pts[i][1] * d + f, 0]
}
return retPts;
}
function applyToPointArray(x,y,z,dimensions){
if(dimensions && dimensions === 2) {
var arr = point_pool.newPoint();
arr[0] = x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12];
arr[1] = x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13];
return arr;
}
return [x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]];
}
function applyToPointStringified(x, y) {
return (bm_rnd(x * this.props[0] + y * this.props[4] + this.props[12]))+','+(bm_rnd(x * this.props[1] + y * this.props[5] + this.props[13]));
}
function toArray() {
return [this.props[0],this.props[1],this.props[2],this.props[3],this.props[4],this.props[5],this.props[6],this.props[7],this.props[8],this.props[9],this.props[10],this.props[11],this.props[12],this.props[13],this.props[14],this.props[15]];
}
function toCSS() {
if(isSafari){
return "matrix3d(" + roundTo2Decimals(this.props[0]) + ',' + roundTo2Decimals(this.props[1]) + ',' + roundTo2Decimals(this.props[2]) + ',' + roundTo2Decimals(this.props[3]) + ',' + roundTo2Decimals(this.props[4]) + ',' + roundTo2Decimals(this.props[5]) + ',' + roundTo2Decimals(this.props[6]) + ',' + roundTo2Decimals(this.props[7]) + ',' + roundTo2Decimals(this.props[8]) + ',' + roundTo2Decimals(this.props[9]) + ',' + roundTo2Decimals(this.props[10]) + ',' + roundTo2Decimals(this.props[11]) + ',' + roundTo2Decimals(this.props[12]) + ',' + roundTo2Decimals(this.props[13]) + ',' + roundTo2Decimals(this.props[14]) + ',' + roundTo2Decimals(this.props[15]) + ')';
} else {
this.cssParts[1] = this.props.join(',');
return this.cssParts.join('');
}
}
function to2dCSS() {
return "matrix(" + this.props[0] + ',' + this.props[1] + ',' + this.props[4] + ',' + this.props[5] + ',' + this.props[12] + ',' + this.props[13] + ")";
}
function toString() {
return "" + this.toArray();
}
return function(){
this.reset = reset;
this.rotate = rotate;
this.rotateX = rotateX;
this.rotateY = rotateY;
this.rotateZ = rotateZ;
this.skew = skew;
this.skewFromAxis = skewFromAxis;
this.shear = shear;
this.scale = scale;
this.setTransform = setTransform;
this.translate = translate;
this.transform = transform;
this.applyToPoint = applyToPoint;
this.applyToX = applyToX;
this.applyToY = applyToY;
this.applyToZ = applyToZ;
this.applyToPointArray = applyToPointArray;
this.applyToPointStringified = applyToPointStringified;
this.toArray = toArray;
this.toCSS = toCSS;
this.to2dCSS = to2dCSS;
this.toString = toString;
this.clone = clone;
this.cloneFromProps = cloneFromProps;
this.inversePoints = inversePoints;
this._t = this.transform;
this.props = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
this.cssParts = ['matrix3d(','',')'];
}
}());
function Matrix() {
}
/*
Copyright 2014 David Bau.
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
(function (pool, math) {
//
// The following constants are related to IEEE 754 limits.
//
var global = this,
width = 256, // each RC4 output is 0 <= x < 256
chunks = 6, // at least six RC4 outputs for each double
digits = 52, // there are 52 significant digits in a double
rngname = 'random', // rngname: name for Math.random and Math.seedrandom
startdenom = math.pow(width, chunks),
significance = math.pow(2, digits),
overflow = significance * 2,
mask = width - 1,
nodecrypto; // node.js crypto module, initialized at the bottom.
//
// seedrandom()
// This is the seedrandom function described above.
//
function seedrandom(seed, options, callback) {
var key = [];
options = (options == true) ? { entropy: true } : (options || {});
// Flatten the seed string or build one from local entropy if needed.
var shortseed = mixkey(flatten(
options.entropy ? [seed, tostring(pool)] :
(seed == null) ? autoseed() : seed, 3), key);
// Use the seed to initialize an ARC4 generator.
var arc4 = new ARC4(key);
// This function returns a random double in [0, 1) that contains
// randomness in every bit of the mantissa of the IEEE 754 value.
var prng = function() {
var n = arc4.g(chunks), // Start with a numerator n < 2 ^ 48
d = startdenom, // and denominator d = 2 ^ 48.
x = 0; // and no 'extra last byte'.
while (n < significance) { // Fill up all significant digits by
n = (n + x) * width; // shifting numerator and
d *= width; // denominator and generating a
x = arc4.g(1); // new least-significant-byte.
}
while (n >= overflow) { // To avoid rounding up, before adding
n /= 2; // last byte, shift everything
d /= 2; // right using integer math until
x >>>= 1; // we have exactly the desired bits.
}
return (n + x) / d; // Form the number within [0, 1).
};
prng.int32 = function() { return arc4.g(4) | 0; }
prng.quick = function() { return arc4.g(4) / 0x100000000; }
prng.double = prng;
// Mix the randomness into accumulated entropy.
mixkey(tostring(arc4.S), pool);
// Calling convention: what to return as a function of prng, seed, is_math.
return (options.pass || callback ||
function(prng, seed, is_math_call, state) {
if (state) {
// Load the arc4 state from the given state if it has an S array.
if (state.S) { copy(state, arc4); }
// Only provide the .state method if requested via options.state.
prng.state = function() { return copy(arc4, {}); }
}
// If called as a method of Math (Math.seedrandom()), mutate
// Math.random because that is how seedrandom.js has worked since v1.0.
if (is_math_call) { math[rngname] = prng; return seed; }
// Otherwise, it is a newer calling convention, so return the
// prng directly.
else return prng;
})(
prng,
shortseed,
'global' in options ? options.global : (this == math),
options.state);
}
math['seed' + rngname] = seedrandom;
//
// ARC4
//
// An ARC4 implementation. The constructor takes a key in the form of
// an array of at most (width) integers that should be 0 <= x < (width).
//
// The g(count) method returns a pseudorandom integer that concatenates
// the next (count) outputs from ARC4. Its return value is a number x
// that is in the range 0 <= x < (width ^ count).
//
function ARC4(key) {
var t, keylen = key.length,
me = this, i = 0, j = me.i = me.j = 0, s = me.S = [];
// The empty key [] is treated as [0].
if (!keylen) { key = [keylen++]; }
// Set up S using the standard key scheduling algorithm.
while (i < width) {
s[i] = i++;
}
for (i = 0; i < width; i++) {
s[i] = s[j = mask & (j + key[i % keylen] + (t = s[i]))];
s[j] = t;
}
// The "g" method returns the next (count) outputs as one number.
(me.g = function(count) {
// Using instance members instead of closure state nearly doubles speed.
var t, r = 0,
i = me.i, j = me.j, s = me.S;
while (count--) {
t = s[i = mask & (i + 1)];
r = r * width + s[mask & ((s[i] = s[j = mask & (j + t)]) + (s[j] = t))];
}
me.i = i; me.j = j;
return r;
// For robust unpredictability, the function call below automatically
// discards an initial batch of values. This is called RC4-drop[256].
// See http://google.com/search?q=rsa+fluhrer+response&btnI
})(width);
}
//
// copy()
// Copies internal state of ARC4 to or from a plain object.
//
function copy(f, t) {
t.i = f.i;
t.j = f.j;
t.S = f.S.slice();
return t;
};
//
// flatten()
// Converts an object tree to nested arrays of strings.
//
function flatten(obj, depth) {
var result = [], typ = (typeof obj), prop;
if (depth && typ == 'object') {
for (prop in obj) {
try { result.push(flatten(obj[prop], depth - 1)); } catch (e) {}
}
}
return (result.length ? result : typ == 'string' ? obj : obj + '\0');
}
//
// mixkey()
// Mixes a string seed into a key that is an array of integers, and
// returns a shortened string seed that is equivalent to the result key.
//
function mixkey(seed, key) {
var stringseed = seed + '', smear, j = 0;
while (j < stringseed.length) {
key[mask & j] =
mask & ((smear ^= key[mask & j] * 19) + stringseed.charCodeAt(j++));
}
return tostring(key);
}
//
// autoseed()
// Returns an object for autoseeding, using window.crypto and Node crypto
// module if available.
//
function autoseed() {
try {
if (nodecrypto) { return tostring(nodecrypto.randomBytes(width)); }
var out = new Uint8Array(width);
(global.crypto || global.msCrypto).getRandomValues(out);
return tostring(out);
} catch (e) {
var browser = global.navigator,
plugins = browser && browser.plugins;
return [+new Date, global, plugins, global.screen, tostring(pool)];
}
}
//
// tostring()
// Converts an array of charcodes to a string
//
function tostring(a) {
return String.fromCharCode.apply(0, a);
}
//
// When seedrandom.js is loaded, we immediately mix a few bits
// from the built-in RNG into the entropy pool. Because we do
// not want to interfere with deterministic PRNG state later,
// seedrandom will not call math.random on its own again after
// initialization.
//
mixkey(math.random(), pool);
//
// Nodejs and AMD support: export the implementation as a module using
// either convention.
//
// End anonymous scope, and pass initial values.
})(
[], // pool: entropy pool starts empty
BMMath // math: package containing random, pow, and seedrandom
);
var BezierFactory = (function(){
/**
* BezierEasing - use bezier curve for transition easing function
* by Gaëtan Renaudeau 2014 - 2015 – MIT License
*
* Credits: is based on Firefox's nsSMILKeySpline.cpp
* Usage:
* var spline = BezierEasing([ 0.25, 0.1, 0.25, 1.0 ])
* spline.get(x) => returns the easing value | x must be in [0, 1] range
*
*/
var ob = {};
ob.getBezierEasing = getBezierEasing;
var beziers = {};
function getBezierEasing(a,b,c,d,nm){
var str = nm || ('bez_' + a+'_'+b+'_'+c+'_'+d).replace(/\./g, 'p');
if(beziers[str]){
return beziers[str];
}
var bezEasing = new BezierEasing([a,b,c,d]);
beziers[str] = bezEasing;
return bezEasing;
}
// These values are established by empiricism with tests (tradeoff: performance VS precision)
var NEWTON_ITERATIONS = 4;
var NEWTON_MIN_SLOPE = 0.001;
var SUBDIVISION_PRECISION = 0.0000001;
var SUBDIVISION_MAX_ITERATIONS = 10;
var kSplineTableSize = 11;
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
var float32ArraySupported = typeof Float32Array === "function";
function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
function C (aA1) { return 3.0 * aA1; }
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
function calcBezier (aT, aA1, aA2) {
return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
}
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
function getSlope (aT, aA1, aA2) {
return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
}
function binarySubdivide (aX, aA, aB, mX1, mX2) {
var currentX, currentT, i = 0;
do {
currentT = aA + (aB - aA) / 2.0;
currentX = calcBezier(currentT, mX1, mX2) - aX;
if (currentX > 0.0) {
aB = currentT;
} else {
aA = currentT;
}
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
return currentT;
}
function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
var currentSlope = getSlope(aGuessT, mX1, mX2);
if (currentSlope === 0.0) return aGuessT;
var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
aGuessT -= currentX / currentSlope;
}
return aGuessT;
}
/**
* points is an array of [ mX1, mY1, mX2, mY2 ]
*/
function BezierEasing (points) {
this._p = points;
this._mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
this._precomputed = false;
this.get = this.get.bind(this);
}
BezierEasing.prototype = {
get: function (x) {
var mX1 = this._p[0],
mY1 = this._p[1],
mX2 = this._p[2],
mY2 = this._p[3];
if (!this._precomputed) this._precompute();
if (mX1 === mY1 && mX2 === mY2) return x; // linear
// Because JavaScript number are imprecise, we should guarantee the extremes are right.
if (x === 0) return 0;
if (x === 1) return 1;
return calcBezier(this._getTForX(x), mY1, mY2);
},
// Private part
_precompute: function () {
var mX1 = this._p[0],
mY1 = this._p[1],
mX2 = this._p[2],
mY2 = this._p[3];
this._precomputed = true;
if (mX1 !== mY1 || mX2 !== mY2)
this._calcSampleValues();
},
_calcSampleValues: function () {
var mX1 = this._p[0],
mX2 = this._p[2];
for (var i = 0; i < kSplineTableSize; ++i) {
this._mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
}
},
/**
* getTForX chose the fastest heuristic to determine the percentage value precisely from a given X projection.
*/
_getTForX: function (aX) {
var mX1 = this._p[0],
mX2 = this._p[2],
mSampleValues = this._mSampleValues;
var intervalStart = 0.0;
var currentSample = 1;
var lastSample = kSplineTableSize - 1;
for (; currentSample !== lastSample && mSampleValues[currentSample] <= aX; ++currentSample) {
intervalStart += kSampleStepSize;
}
--currentSample;
// Interpolate to provide an initial guess for t
var dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample+1] - mSampleValues[currentSample]);
var guessForT = intervalStart + dist * kSampleStepSize;
var initialSlope = getSlope(guessForT, mX1, mX2);
if (initialSlope >= NEWTON_MIN_SLOPE) {
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
} else if (initialSlope === 0.0) {
return guessForT;
} else {
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
}