2018-01-28 23:22:43 +11:00
/ * !
2019-06-07 02:11:04 +10:00
* Materialize v1 . 0.0 ( http : //materializecss.com)
2018-01-28 23:22:43 +11:00
* Copyright 2014 - 2017 Materialize
* MIT License ( https : //raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
* /
2019-06-07 02:11:04 +10:00
var _get = function get ( object , property , receiver ) { if ( object === null ) object = Function . prototype ; var desc = Object . getOwnPropertyDescriptor ( object , property ) ; if ( desc === undefined ) { var parent = Object . getPrototypeOf ( object ) ; if ( parent === null ) { return undefined ; } else { return get ( parent , property , receiver ) ; } } else if ( "value" in desc ) { return desc . value ; } else { var getter = desc . get ; if ( getter === undefined ) { return undefined ; } return getter . call ( receiver ) ; } } ;
2018-01-28 23:22:43 +11:00
var _createClass = function ( ) { function defineProperties ( target , props ) { for ( var i = 0 ; i < props . length ; i ++ ) { var descriptor = props [ i ] ; descriptor . enumerable = descriptor . enumerable || false ; descriptor . configurable = true ; if ( "value" in descriptor ) descriptor . writable = true ; Object . defineProperty ( target , descriptor . key , descriptor ) ; } } return function ( Constructor , protoProps , staticProps ) { if ( protoProps ) defineProperties ( Constructor . prototype , protoProps ) ; if ( staticProps ) defineProperties ( Constructor , staticProps ) ; return Constructor ; } ; } ( ) ;
2019-06-07 02:11:04 +10:00
function _possibleConstructorReturn ( self , call ) { if ( ! self ) { throw new ReferenceError ( "this hasn't been initialised - super() hasn't been called" ) ; } return call && ( typeof call === "object" || typeof call === "function" ) ? call : self ; }
function _inherits ( subClass , superClass ) { if ( typeof superClass !== "function" && superClass !== null ) { throw new TypeError ( "Super expression must either be null or a function, not " + typeof superClass ) ; } subClass . prototype = Object . create ( superClass && superClass . prototype , { constructor : { value : subClass , enumerable : false , writable : true , configurable : true } } ) ; if ( superClass ) Object . setPrototypeOf ? Object . setPrototypeOf ( subClass , superClass ) : subClass . _ _proto _ _ = superClass ; }
2018-01-28 23:22:43 +11:00
function _classCallCheck ( instance , Constructor ) { if ( ! ( instance instanceof Constructor ) ) { throw new TypeError ( "Cannot call a class as a function" ) ; } }
2019-06-07 02:11:04 +10:00
/*! cash-dom 1.3.5, https://github.com/kenwheeler/cash @license MIT */
( function ( factory ) {
window . cash = factory ( ) ;
} ) ( function ( ) {
var doc = document ,
win = window ,
ArrayProto = Array . prototype ,
slice = ArrayProto . slice ,
filter = ArrayProto . filter ,
push = ArrayProto . push ;
var noop = function ( ) { } ,
isFunction = function ( item ) {
// @see https://crbug.com/568448
return typeof item === typeof noop && item . call ;
} ,
isString = function ( item ) {
return typeof item === typeof "" ;
} ;
var idMatch = /^#[\w-]*$/ ,
classMatch = /^\.[\w-]*$/ ,
htmlMatch = /<.+>/ ,
singlet = /^\w+$/ ;
function find ( selector , context ) {
context = context || doc ;
var elems = classMatch . test ( selector ) ? context . getElementsByClassName ( selector . slice ( 1 ) ) : singlet . test ( selector ) ? context . getElementsByTagName ( selector ) : context . querySelectorAll ( selector ) ;
return elems ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
var frag ;
function parseHTML ( str ) {
if ( ! frag ) {
frag = doc . implementation . createHTMLDocument ( null ) ;
var base = frag . createElement ( "base" ) ;
base . href = doc . location . href ;
frag . head . appendChild ( base ) ;
}
frag . body . innerHTML = str ;
return frag . body . childNodes ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
function onReady ( fn ) {
if ( doc . readyState !== "loading" ) {
fn ( ) ;
2018-01-28 23:22:43 +11:00
} else {
2019-06-07 02:11:04 +10:00
doc . addEventListener ( "DOMContentLoaded" , fn ) ;
2018-01-28 23:22:43 +11:00
}
}
2019-06-07 02:11:04 +10:00
function Init ( selector , context ) {
if ( ! selector ) {
return this ;
}
// If already a cash collection, don't do any further processing
if ( selector . cash && selector !== win ) {
return selector ;
}
var elems = selector ,
i = 0 ,
length ;
if ( isString ( selector ) ) {
elems = idMatch . test ( selector ) ?
// If an ID use the faster getElementById check
doc . getElementById ( selector . slice ( 1 ) ) : htmlMatch . test ( selector ) ?
// If HTML, parse it into real elements
parseHTML ( selector ) :
// else use `find`
find ( selector , context ) ;
// If function, use as shortcut for DOM ready
} else if ( isFunction ( selector ) ) {
onReady ( selector ) ; return this ;
}
if ( ! elems ) {
return this ;
}
// If a single DOM element is passed in or received via ID, return the single element
if ( elems . nodeType || elems === win ) {
this [ 0 ] = elems ;
this . length = 1 ;
} else {
// Treat like an array and loop through each item.
length = this . length = elems . length ;
for ( ; i < length ; i ++ ) {
this [ i ] = elems [ i ] ;
}
}
return this ;
}
function cash ( selector , context ) {
return new Init ( selector , context ) ;
}
var fn = cash . fn = cash . prototype = Init . prototype = { // jshint ignore:line
cash : true ,
length : 0 ,
push : push ,
splice : ArrayProto . splice ,
map : ArrayProto . map ,
init : Init
} ;
Object . defineProperty ( fn , "constructor" , { value : cash } ) ;
cash . parseHTML = parseHTML ;
cash . noop = noop ;
cash . isFunction = isFunction ;
cash . isString = isString ;
cash . extend = fn . extend = function ( target ) {
target = target || { } ;
var args = slice . call ( arguments ) ,
length = args . length ,
i = 1 ;
if ( args . length === 1 ) {
target = this ;
i = 0 ;
}
for ( ; i < length ; i ++ ) {
if ( ! args [ i ] ) {
continue ;
}
for ( var key in args [ i ] ) {
if ( args [ i ] . hasOwnProperty ( key ) ) {
target [ key ] = args [ i ] [ key ] ;
}
}
}
return target ;
} ;
function each ( collection , callback ) {
var l = collection . length ,
i = 0 ;
for ( ; i < l ; i ++ ) {
if ( callback . call ( collection [ i ] , collection [ i ] , i , collection ) === false ) {
break ;
}
}
}
function matches ( el , selector ) {
var m = el && ( el . matches || el . webkitMatchesSelector || el . mozMatchesSelector || el . msMatchesSelector || el . oMatchesSelector ) ;
return ! ! m && m . call ( el , selector ) ;
}
function getCompareFunction ( selector ) {
return (
/* Use browser's `matches` function if string */
isString ( selector ) ? matches :
/* Match a cash element */
selector . cash ? function ( el ) {
return selector . is ( el ) ;
} :
/* Direct comparison */
function ( el , selector ) {
return el === selector ;
}
) ;
}
function unique ( collection ) {
return cash ( slice . call ( collection ) . filter ( function ( item , index , self ) {
return self . indexOf ( item ) === index ;
} ) ) ;
}
cash . extend ( {
merge : function ( first , second ) {
var len = + second . length ,
i = first . length ,
j = 0 ;
for ( ; j < len ; i ++ , j ++ ) {
first [ i ] = second [ j ] ;
}
first . length = i ;
return first ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
each : each ,
matches : matches ,
unique : unique ,
isArray : Array . isArray ,
isNumeric : function ( n ) {
return ! isNaN ( parseFloat ( n ) ) && isFinite ( n ) ;
}
} ) ;
var uid = cash . uid = "_cash" + Date . now ( ) ;
function getDataCache ( node ) {
return node [ uid ] = node [ uid ] || { } ;
}
function setData ( node , key , value ) {
return getDataCache ( node ) [ key ] = value ;
}
function getData ( node , key ) {
var c = getDataCache ( node ) ;
if ( c [ key ] === undefined ) {
c [ key ] = node . dataset ? node . dataset [ key ] : cash ( node ) . attr ( "data-" + key ) ;
}
return c [ key ] ;
}
function removeData ( node , key ) {
var c = getDataCache ( node ) ;
if ( c ) {
delete c [ key ] ;
} else if ( node . dataset ) {
delete node . dataset [ key ] ;
} else {
cash ( node ) . removeAttr ( "data-" + name ) ;
}
}
fn . extend ( {
data : function ( name , value ) {
if ( isString ( name ) ) {
return value === undefined ? getData ( this [ 0 ] , name ) : this . each ( function ( v ) {
return setData ( v , name , value ) ;
} ) ;
}
for ( var key in name ) {
this . data ( key , name [ key ] ) ;
}
return this ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
removeData : function ( key ) {
return this . each ( function ( v ) {
return removeData ( v , key ) ;
} ) ;
}
} ) ;
var notWhiteMatch = /\S+/g ;
function getClasses ( c ) {
return isString ( c ) && c . match ( notWhiteMatch ) ;
}
function hasClass ( v , c ) {
return v . classList ? v . classList . contains ( c ) : new RegExp ( "(^| )" + c + "( |$)" , "gi" ) . test ( v . className ) ;
}
function addClass ( v , c , spacedName ) {
if ( v . classList ) {
v . classList . add ( c ) ;
} else if ( spacedName . indexOf ( " " + c + " " ) ) {
v . className += " " + c ;
}
}
function removeClass ( v , c ) {
if ( v . classList ) {
v . classList . remove ( c ) ;
} else {
v . className = v . className . replace ( c , "" ) ;
}
}
fn . extend ( {
addClass : function ( c ) {
var classes = getClasses ( c ) ;
return classes ? this . each ( function ( v ) {
var spacedName = " " + v . className + " " ;
each ( classes , function ( c ) {
addClass ( v , c , spacedName ) ;
} ) ;
} ) : this ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
attr : function ( name , value ) {
if ( ! name ) {
return undefined ;
}
if ( isString ( name ) ) {
if ( value === undefined ) {
return this [ 0 ] ? this [ 0 ] . getAttribute ? this [ 0 ] . getAttribute ( name ) : this [ 0 ] [ name ] : undefined ;
}
return this . each ( function ( v ) {
if ( v . setAttribute ) {
v . setAttribute ( name , value ) ;
} else {
v [ name ] = value ;
}
} ) ;
}
for ( var key in name ) {
this . attr ( key , name [ key ] ) ;
}
return this ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
hasClass : function ( c ) {
var check = false ,
classes = getClasses ( c ) ;
if ( classes && classes . length ) {
this . each ( function ( v ) {
check = hasClass ( v , classes [ 0 ] ) ;
return ! check ;
} ) ;
}
return check ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
prop : function ( name , value ) {
if ( isString ( name ) ) {
return value === undefined ? this [ 0 ] [ name ] : this . each ( function ( v ) {
v [ name ] = value ;
} ) ;
}
for ( var key in name ) {
this . prop ( key , name [ key ] ) ;
}
return this ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
removeAttr : function ( name ) {
return this . each ( function ( v ) {
if ( v . removeAttribute ) {
v . removeAttribute ( name ) ;
} else {
delete v [ name ] ;
}
} ) ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
removeClass : function ( c ) {
if ( ! arguments . length ) {
return this . attr ( "class" , "" ) ;
}
var classes = getClasses ( c ) ;
return classes ? this . each ( function ( v ) {
each ( classes , function ( c ) {
removeClass ( v , c ) ;
} ) ;
} ) : this ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
removeProp : function ( name ) {
return this . each ( function ( v ) {
delete v [ name ] ;
} ) ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
toggleClass : function ( c , state ) {
if ( state !== undefined ) {
return this [ state ? "addClass" : "removeClass" ] ( c ) ;
}
var classes = getClasses ( c ) ;
return classes ? this . each ( function ( v ) {
var spacedName = " " + v . className + " " ;
each ( classes , function ( c ) {
if ( hasClass ( v , c ) ) {
removeClass ( v , c ) ;
} else {
addClass ( v , c , spacedName ) ;
}
} ) ;
} ) : this ;
} } ) ;
fn . extend ( {
add : function ( selector , context ) {
return unique ( cash . merge ( this , cash ( selector , context ) ) ) ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
each : function ( callback ) {
each ( this , callback ) ;
return this ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
eq : function ( index ) {
return cash ( this . get ( index ) ) ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
filter : function ( selector ) {
if ( ! selector ) {
return this ;
}
var comparator = isFunction ( selector ) ? selector : getCompareFunction ( selector ) ;
return cash ( filter . call ( this , function ( e ) {
return comparator ( e , selector ) ;
} ) ) ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
first : function ( ) {
return this . eq ( 0 ) ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
get : function ( index ) {
if ( index === undefined ) {
return slice . call ( this ) ;
}
return index < 0 ? this [ index + this . length ] : this [ index ] ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
index : function ( elem ) {
var child = elem ? cash ( elem ) [ 0 ] : this [ 0 ] ,
collection = elem ? this : cash ( child ) . parent ( ) . children ( ) ;
return slice . call ( collection ) . indexOf ( child ) ;
2018-01-28 23:22:43 +11:00
} ,
2019-06-07 02:11:04 +10:00
last : function ( ) {
return this . eq ( - 1 ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
2018-01-28 23:22:43 +11:00
} ) ;
2019-06-07 02:11:04 +10:00
var camelCase = function ( ) {
var camelRegex = /(?:^\w|[A-Z]|\b\w)/g ,
whiteSpace = /[\s-_]+/g ;
return function ( str ) {
return str . replace ( camelRegex , function ( letter , index ) {
return letter [ index === 0 ? "toLowerCase" : "toUpperCase" ] ( ) ;
} ) . replace ( whiteSpace , "" ) ;
2018-01-28 23:22:43 +11:00
} ;
2019-06-07 02:11:04 +10:00
} ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var getPrefixedProp = function ( ) {
var cache = { } ,
doc = document ,
div = doc . createElement ( "div" ) ,
style = div . style ;
return function ( prop ) {
prop = camelCase ( prop ) ;
if ( cache [ prop ] ) {
return cache [ prop ] ;
}
var ucProp = prop . charAt ( 0 ) . toUpperCase ( ) + prop . slice ( 1 ) ,
prefixes = [ "webkit" , "moz" , "ms" , "o" ] ,
props = ( prop + " " + prefixes . join ( ucProp + " " ) + ucProp ) . split ( " " ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
each ( props , function ( p ) {
if ( p in style ) {
cache [ p ] = prop = cache [ prop ] = p ;
return false ;
}
2018-01-28 23:22:43 +11:00
} ) ;
2019-06-07 02:11:04 +10:00
return cache [ prop ] ;
2018-01-28 23:22:43 +11:00
} ;
2019-06-07 02:11:04 +10:00
} ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
cash . prefixedProp = getPrefixedProp ;
cash . camelCase = camelCase ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
fn . extend ( {
css : function ( prop , value ) {
if ( isString ( prop ) ) {
prop = getPrefixedProp ( prop ) ;
return arguments . length > 1 ? this . each ( function ( v ) {
return v . style [ prop ] = value ;
} ) : win . getComputedStyle ( this [ 0 ] ) [ prop ] ;
}
for ( var key in prop ) {
this . css ( key , prop [ key ] ) ;
}
return this ;
}
} ) ;
function compute ( el , prop ) {
return parseInt ( win . getComputedStyle ( el [ 0 ] , null ) [ prop ] , 10 ) || 0 ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
each ( [ "Width" , "Height" ] , function ( v ) {
var lower = v . toLowerCase ( ) ;
fn [ lower ] = function ( ) {
return this [ 0 ] . getBoundingClientRect ( ) [ lower ] ;
} ;
fn [ "inner" + v ] = function ( ) {
return this [ 0 ] [ "client" + v ] ;
2018-01-28 23:22:43 +11:00
} ;
2019-06-07 02:11:04 +10:00
fn [ "outer" + v ] = function ( margins ) {
return this [ 0 ] [ "offset" + v ] + ( margins ? compute ( this , "margin" + ( v === "Width" ? "Left" : "Top" ) ) + compute ( this , "margin" + ( v === "Width" ? "Right" : "Bottom" ) ) : 0 ) ;
} ;
} ) ;
function registerEvent ( node , eventName , callback ) {
var eventCache = getData ( node , "_cashEvents" ) || setData ( node , "_cashEvents" , { } ) ;
eventCache [ eventName ] = eventCache [ eventName ] || [ ] ;
eventCache [ eventName ] . push ( callback ) ;
node . addEventListener ( eventName , callback ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
function removeEvent ( node , eventName , callback ) {
var events = getData ( node , "_cashEvents" ) ,
eventCache = events && events [ eventName ] ,
index ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( ! eventCache ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( callback ) {
node . removeEventListener ( eventName , callback ) ;
index = eventCache . indexOf ( callback ) ;
if ( index >= 0 ) {
eventCache . splice ( index , 1 ) ;
}
} else {
each ( eventCache , function ( event ) {
node . removeEventListener ( eventName , event ) ;
} ) ;
eventCache = [ ] ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
fn . extend ( {
off : function ( eventName , callback ) {
return this . each ( function ( v ) {
return removeEvent ( v , eventName , callback ) ;
} ) ;
} ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
on : function ( eventName , delegate , callback , runOnce ) {
// jshint ignore:line
var originalCallback ;
if ( ! isString ( eventName ) ) {
for ( var key in eventName ) {
this . on ( key , delegate , eventName [ key ] ) ;
}
return this ;
}
if ( isFunction ( delegate ) ) {
callback = delegate ;
delegate = null ;
}
if ( eventName === "ready" ) {
onReady ( callback ) ;
return this ;
}
if ( delegate ) {
originalCallback = callback ;
callback = function ( e ) {
var t = e . target ;
while ( ! matches ( t , delegate ) ) {
if ( t === this || t === null ) {
return t = false ;
}
t = t . parentNode ;
}
if ( t ) {
originalCallback . call ( t , e ) ;
}
} ;
}
return this . each ( function ( v ) {
var finalCallback = callback ;
if ( runOnce ) {
finalCallback = function ( ) {
callback . apply ( this , arguments ) ;
removeEvent ( v , eventName , finalCallback ) ;
} ;
}
registerEvent ( v , eventName , finalCallback ) ;
} ) ;
} ,
one : function ( eventName , delegate , callback ) {
return this . on ( eventName , delegate , callback , true ) ;
} ,
ready : onReady ,
/ * *
* Modified
* Triggers browser event
* @ param String eventName
* @ param Object data - Add properties to event object
* /
trigger : function ( eventName , data ) {
if ( document . createEvent ) {
var evt = document . createEvent ( 'HTMLEvents' ) ;
evt . initEvent ( eventName , true , false ) ;
evt = this . extend ( evt , data ) ;
return this . each ( function ( v ) {
return v . dispatchEvent ( evt ) ;
} ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
2018-01-28 23:22:43 +11:00
} ) ;
2019-06-07 02:11:04 +10:00
function encode ( name , value ) {
return "&" + encodeURIComponent ( name ) + "=" + encodeURIComponent ( value ) . replace ( /%20/g , "+" ) ;
}
function getSelectMultiple _ ( el ) {
var values = [ ] ;
each ( el . options , function ( o ) {
if ( o . selected ) {
values . push ( o . value ) ;
}
} ) ;
return values . length ? values : null ;
}
function getSelectSingle _ ( el ) {
var selectedIndex = el . selectedIndex ;
return selectedIndex >= 0 ? el . options [ selectedIndex ] . value : null ;
}
function getValue ( el ) {
var type = el . type ;
if ( ! type ) {
return null ;
}
switch ( type . toLowerCase ( ) ) {
case "select-one" :
return getSelectSingle _ ( el ) ;
case "select-multiple" :
return getSelectMultiple _ ( el ) ;
case "radio" :
return el . checked ? el . value : null ;
case "checkbox" :
return el . checked ? el . value : null ;
default :
return el . value ? el . value : null ;
}
}
fn . extend ( {
serialize : function ( ) {
var query = "" ;
each ( this [ 0 ] . elements || this , function ( el ) {
if ( el . disabled || el . tagName === "FIELDSET" ) {
return ;
}
var name = el . name ;
switch ( el . type . toLowerCase ( ) ) {
case "file" :
case "reset" :
case "submit" :
case "button" :
break ;
case "select-multiple" :
var values = getValue ( el ) ;
if ( values !== null ) {
each ( values , function ( value ) {
query += encode ( name , value ) ;
} ) ;
}
break ;
default :
var value = getValue ( el ) ;
if ( value !== null ) {
query += encode ( name , value ) ;
}
}
} ) ;
return query . substr ( 1 ) ;
} ,
val : function ( value ) {
if ( value === undefined ) {
return getValue ( this [ 0 ] ) ;
}
return this . each ( function ( v ) {
return v . value = value ;
} ) ;
}
} ) ;
function insertElement ( el , child , prepend ) {
if ( prepend ) {
var first = el . childNodes [ 0 ] ;
el . insertBefore ( child , first ) ;
} else {
el . appendChild ( child ) ;
}
}
function insertContent ( parent , child , prepend ) {
var str = isString ( child ) ;
if ( ! str && child . length ) {
each ( child , function ( v ) {
return insertContent ( parent , v , prepend ) ;
} ) ;
return ;
}
each ( parent , str ? function ( v ) {
return v . insertAdjacentHTML ( prepend ? "afterbegin" : "beforeend" , child ) ;
} : function ( v , i ) {
return insertElement ( v , i === 0 ? child : child . cloneNode ( true ) , prepend ) ;
} ) ;
}
fn . extend ( {
after : function ( selector ) {
cash ( selector ) . insertAfter ( this ) ;
return this ;
} ,
append : function ( content ) {
insertContent ( this , content ) ;
return this ;
} ,
appendTo : function ( parent ) {
insertContent ( cash ( parent ) , this ) ;
return this ;
} ,
before : function ( selector ) {
cash ( selector ) . insertBefore ( this ) ;
return this ;
} ,
clone : function ( ) {
return cash ( this . map ( function ( v ) {
return v . cloneNode ( true ) ;
} ) ) ;
} ,
empty : function ( ) {
this . html ( "" ) ;
return this ;
} ,
html : function ( content ) {
if ( content === undefined ) {
return this [ 0 ] . innerHTML ;
}
var source = content . nodeType ? content [ 0 ] . outerHTML : content ;
return this . each ( function ( v ) {
return v . innerHTML = source ;
} ) ;
} ,
insertAfter : function ( selector ) {
var _this = this ;
cash ( selector ) . each ( function ( el , i ) {
var parent = el . parentNode ,
sibling = el . nextSibling ;
_this . each ( function ( v ) {
parent . insertBefore ( i === 0 ? v : v . cloneNode ( true ) , sibling ) ;
} ) ;
} ) ;
return this ;
} ,
insertBefore : function ( selector ) {
var _this2 = this ;
cash ( selector ) . each ( function ( el , i ) {
var parent = el . parentNode ;
_this2 . each ( function ( v ) {
parent . insertBefore ( i === 0 ? v : v . cloneNode ( true ) , el ) ;
} ) ;
} ) ;
return this ;
} ,
prepend : function ( content ) {
insertContent ( this , content , true ) ;
return this ;
} ,
prependTo : function ( parent ) {
insertContent ( cash ( parent ) , this , true ) ;
return this ;
} ,
remove : function ( ) {
return this . each ( function ( v ) {
if ( ! ! v . parentNode ) {
return v . parentNode . removeChild ( v ) ;
}
} ) ;
} ,
text : function ( content ) {
if ( content === undefined ) {
return this [ 0 ] . textContent ;
}
return this . each ( function ( v ) {
return v . textContent = content ;
} ) ;
}
} ) ;
var docEl = doc . documentElement ;
fn . extend ( {
position : function ( ) {
var el = this [ 0 ] ;
return {
left : el . offsetLeft ,
top : el . offsetTop
} ;
} ,
offset : function ( ) {
var rect = this [ 0 ] . getBoundingClientRect ( ) ;
return {
top : rect . top + win . pageYOffset - docEl . clientTop ,
left : rect . left + win . pageXOffset - docEl . clientLeft
} ;
} ,
offsetParent : function ( ) {
return cash ( this [ 0 ] . offsetParent ) ;
}
} ) ;
fn . extend ( {
children : function ( selector ) {
var elems = [ ] ;
this . each ( function ( el ) {
push . apply ( elems , el . children ) ;
} ) ;
elems = unique ( elems ) ;
return ! selector ? elems : elems . filter ( function ( v ) {
return matches ( v , selector ) ;
} ) ;
} ,
closest : function ( selector ) {
if ( ! selector || this . length < 1 ) {
return cash ( ) ;
}
if ( this . is ( selector ) ) {
return this . filter ( selector ) ;
}
return this . parent ( ) . closest ( selector ) ;
} ,
is : function ( selector ) {
if ( ! selector ) {
return false ;
}
var match = false ,
comparator = getCompareFunction ( selector ) ;
this . each ( function ( el ) {
match = comparator ( el , selector ) ;
return ! match ;
} ) ;
return match ;
} ,
find : function ( selector ) {
if ( ! selector || selector . nodeType ) {
return cash ( selector && this . has ( selector ) . length ? selector : null ) ;
}
var elems = [ ] ;
this . each ( function ( el ) {
push . apply ( elems , find ( selector , el ) ) ;
} ) ;
return unique ( elems ) ;
} ,
has : function ( selector ) {
var comparator = isString ( selector ) ? function ( el ) {
return find ( selector , el ) . length !== 0 ;
} : function ( el ) {
return el . contains ( selector ) ;
} ;
return this . filter ( comparator ) ;
} ,
next : function ( ) {
return cash ( this [ 0 ] . nextElementSibling ) ;
} ,
not : function ( selector ) {
if ( ! selector ) {
return this ;
}
var comparator = getCompareFunction ( selector ) ;
return this . filter ( function ( el ) {
return ! comparator ( el , selector ) ;
} ) ;
} ,
parent : function ( ) {
var result = [ ] ;
this . each ( function ( item ) {
if ( item && item . parentNode ) {
result . push ( item . parentNode ) ;
}
} ) ;
return unique ( result ) ;
} ,
parents : function ( selector ) {
var last ,
result = [ ] ;
this . each ( function ( item ) {
last = item ;
while ( last && last . parentNode && last !== doc . body . parentNode ) {
last = last . parentNode ;
if ( ! selector || selector && matches ( last , selector ) ) {
result . push ( last ) ;
}
}
} ) ;
return unique ( result ) ;
} ,
prev : function ( ) {
return cash ( this [ 0 ] . previousElementSibling ) ;
} ,
siblings : function ( selector ) {
var collection = this . parent ( ) . children ( selector ) ,
el = this [ 0 ] ;
return collection . filter ( function ( i ) {
return i !== el ;
} ) ;
}
} ) ;
return cash ;
} ) ;
;
var Component = function ( ) {
/ * *
* Generic constructor for all components
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Component ( classDef , el , options ) {
_classCallCheck ( this , Component ) ;
// Display error if el is valid HTML Element
if ( ! ( el instanceof Element ) ) {
console . error ( Error ( el + ' is not an HTML Element' ) ) ;
}
// If exists, destroy and reinitialize in child
var ins = classDef . getInstance ( el ) ;
if ( ! ! ins ) {
ins . destroy ( ) ;
}
this . el = el ;
this . $el = cash ( el ) ;
}
/ * *
* Initializes components
* @ param { class } classDef
* @ param { Element | NodeList | jQuery } els
* @ param { Object } options
* /
_createClass ( Component , null , [ {
key : "init" ,
value : function init ( classDef , els , options ) {
var instances = null ;
if ( els instanceof Element ) {
instances = new classDef ( els , options ) ;
} else if ( ! ! els && ( els . jquery || els . cash || els instanceof NodeList ) ) {
var instancesArr = [ ] ;
for ( var i = 0 ; i < els . length ; i ++ ) {
instancesArr . push ( new classDef ( els [ i ] , options ) ) ;
}
instances = instancesArr ;
}
return instances ;
}
} ] ) ;
return Component ;
} ( ) ;
; // Required for Meteor package, the use of window prevents export by Meteor
( function ( window ) {
if ( window . Package ) {
M = { } ;
} else {
window . M = { } ;
}
// Check for jQuery
M . jQueryLoaded = ! ! window . jQuery ;
} ) ( window ) ;
// AMD
if ( typeof define === 'function' && define . amd ) {
define ( 'M' , [ ] , function ( ) {
return M ;
} ) ;
// Common JS
} else if ( typeof exports !== 'undefined' && ! exports . nodeType ) {
if ( typeof module !== 'undefined' && ! module . nodeType && module . exports ) {
exports = module . exports = M ;
}
exports . default = M ;
}
M . version = '1.0.0' ;
M . keys = {
TAB : 9 ,
ENTER : 13 ,
ESC : 27 ,
ARROW _UP : 38 ,
ARROW _DOWN : 40
} ;
/ * *
* TabPress Keydown handler
* /
M . tabPressed = false ;
M . keyDown = false ;
var docHandleKeydown = function ( e ) {
M . keyDown = true ;
if ( e . which === M . keys . TAB || e . which === M . keys . ARROW _DOWN || e . which === M . keys . ARROW _UP ) {
M . tabPressed = true ;
}
} ;
var docHandleKeyup = function ( e ) {
M . keyDown = false ;
if ( e . which === M . keys . TAB || e . which === M . keys . ARROW _DOWN || e . which === M . keys . ARROW _UP ) {
M . tabPressed = false ;
}
} ;
var docHandleFocus = function ( e ) {
if ( M . keyDown ) {
document . body . classList . add ( 'keyboard-focused' ) ;
}
} ;
var docHandleBlur = function ( e ) {
document . body . classList . remove ( 'keyboard-focused' ) ;
} ;
document . addEventListener ( 'keydown' , docHandleKeydown , true ) ;
document . addEventListener ( 'keyup' , docHandleKeyup , true ) ;
document . addEventListener ( 'focus' , docHandleFocus , true ) ;
document . addEventListener ( 'blur' , docHandleBlur , true ) ;
/ * *
* Initialize jQuery wrapper for plugin
* @ param { Class } plugin javascript class
* @ param { string } pluginName jQuery plugin name
* @ param { string } classRef Class reference name
* /
M . initializeJqueryWrapper = function ( plugin , pluginName , classRef ) {
jQuery . fn [ pluginName ] = function ( methodOrOptions ) {
// Call plugin method if valid method name is passed in
if ( plugin . prototype [ methodOrOptions ] ) {
var params = Array . prototype . slice . call ( arguments , 1 ) ;
// Getter methods
if ( methodOrOptions . slice ( 0 , 3 ) === 'get' ) {
var instance = this . first ( ) [ 0 ] [ classRef ] ;
return instance [ methodOrOptions ] . apply ( instance , params ) ;
}
// Void methods
return this . each ( function ( ) {
var instance = this [ classRef ] ;
instance [ methodOrOptions ] . apply ( instance , params ) ;
} ) ;
// Initialize plugin if options or no argument is passed in
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
plugin . init ( this , arguments [ 0 ] ) ;
return this ;
}
// Return error if an unrecognized method name is passed in
jQuery . error ( "Method " + methodOrOptions + " does not exist on jQuery." + pluginName ) ;
} ;
} ;
/ * *
* Automatically initialize components
* @ param { Element } context DOM Element to search within for components
* /
M . AutoInit = function ( context ) {
// Use document.body if no context is given
var root = ! ! context ? context : document . body ;
var registry = {
Autocomplete : root . querySelectorAll ( '.autocomplete:not(.no-autoinit)' ) ,
Carousel : root . querySelectorAll ( '.carousel:not(.no-autoinit)' ) ,
Chips : root . querySelectorAll ( '.chips:not(.no-autoinit)' ) ,
Collapsible : root . querySelectorAll ( '.collapsible:not(.no-autoinit)' ) ,
Datepicker : root . querySelectorAll ( '.datepicker:not(.no-autoinit)' ) ,
Dropdown : root . querySelectorAll ( '.dropdown-trigger:not(.no-autoinit)' ) ,
Materialbox : root . querySelectorAll ( '.materialboxed:not(.no-autoinit)' ) ,
Modal : root . querySelectorAll ( '.modal:not(.no-autoinit)' ) ,
Parallax : root . querySelectorAll ( '.parallax:not(.no-autoinit)' ) ,
Pushpin : root . querySelectorAll ( '.pushpin:not(.no-autoinit)' ) ,
ScrollSpy : root . querySelectorAll ( '.scrollspy:not(.no-autoinit)' ) ,
FormSelect : root . querySelectorAll ( 'select:not(.no-autoinit)' ) ,
Sidenav : root . querySelectorAll ( '.sidenav:not(.no-autoinit)' ) ,
Tabs : root . querySelectorAll ( '.tabs:not(.no-autoinit)' ) ,
TapTarget : root . querySelectorAll ( '.tap-target:not(.no-autoinit)' ) ,
Timepicker : root . querySelectorAll ( '.timepicker:not(.no-autoinit)' ) ,
Tooltip : root . querySelectorAll ( '.tooltipped:not(.no-autoinit)' ) ,
FloatingActionButton : root . querySelectorAll ( '.fixed-action-btn:not(.no-autoinit)' )
} ;
for ( var pluginName in registry ) {
var plugin = M [ pluginName ] ;
plugin . init ( registry [ pluginName ] ) ;
}
} ;
/ * *
* Generate approximated selector string for a jQuery object
* @ param { jQuery } obj jQuery object to be parsed
* @ returns { string }
* /
M . objectSelectorString = function ( obj ) {
var tagStr = obj . prop ( 'tagName' ) || '' ;
var idStr = obj . attr ( 'id' ) || '' ;
var classStr = obj . attr ( 'class' ) || '' ;
return ( tagStr + idStr + classStr ) . replace ( /\s/g , '' ) ;
} ;
// Unique Random ID
M . guid = function ( ) {
function s4 ( ) {
return Math . floor ( ( 1 + Math . random ( ) ) * 0x10000 ) . toString ( 16 ) . substring ( 1 ) ;
}
return function ( ) {
return s4 ( ) + s4 ( ) + '-' + s4 ( ) + '-' + s4 ( ) + '-' + s4 ( ) + '-' + s4 ( ) + s4 ( ) + s4 ( ) ;
} ;
} ( ) ;
/ * *
* Escapes hash from special characters
* @ param { string } hash String returned from this . hash
* @ returns { string }
* /
M . escapeHash = function ( hash ) {
return hash . replace ( /(:|\.|\[|\]|,|=|\/)/g , '\\$1' ) ;
} ;
M . elementOrParentIsFixed = function ( element ) {
var $element = $ ( element ) ;
var $checkElements = $element . add ( $element . parents ( ) ) ;
var isFixed = false ;
$checkElements . each ( function ( ) {
if ( $ ( this ) . css ( 'position' ) === 'fixed' ) {
isFixed = true ;
return false ;
}
} ) ;
return isFixed ;
} ;
/ * *
* @ typedef { Object } Edges
* @ property { Boolean } top If the top edge was exceeded
* @ property { Boolean } right If the right edge was exceeded
* @ property { Boolean } bottom If the bottom edge was exceeded
* @ property { Boolean } left If the left edge was exceeded
* /
/ * *
* @ typedef { Object } Bounding
* @ property { Number } left left offset coordinate
* @ property { Number } top top offset coordinate
* @ property { Number } width
* @ property { Number } height
* /
/ * *
* Escapes hash from special characters
* @ param { Element } container Container element that acts as the boundary
* @ param { Bounding } bounding element bounding that is being checked
* @ param { Number } offset offset from edge that counts as exceeding
* @ returns { Edges }
* /
M . checkWithinContainer = function ( container , bounding , offset ) {
var edges = {
top : false ,
right : false ,
bottom : false ,
left : false
} ;
var containerRect = container . getBoundingClientRect ( ) ;
// If body element is smaller than viewport, use viewport height instead.
var containerBottom = container === document . body ? Math . max ( containerRect . bottom , window . innerHeight ) : containerRect . bottom ;
var scrollLeft = container . scrollLeft ;
var scrollTop = container . scrollTop ;
var scrolledX = bounding . left - scrollLeft ;
var scrolledY = bounding . top - scrollTop ;
// Check for container and viewport for each edge
if ( scrolledX < containerRect . left + offset || scrolledX < offset ) {
edges . left = true ;
}
if ( scrolledX + bounding . width > containerRect . right - offset || scrolledX + bounding . width > window . innerWidth - offset ) {
edges . right = true ;
}
if ( scrolledY < containerRect . top + offset || scrolledY < offset ) {
edges . top = true ;
}
if ( scrolledY + bounding . height > containerBottom - offset || scrolledY + bounding . height > window . innerHeight - offset ) {
edges . bottom = true ;
}
return edges ;
} ;
M . checkPossibleAlignments = function ( el , container , bounding , offset ) {
var canAlign = {
top : true ,
right : true ,
bottom : true ,
left : true ,
spaceOnTop : null ,
spaceOnRight : null ,
spaceOnBottom : null ,
spaceOnLeft : null
} ;
var containerAllowsOverflow = getComputedStyle ( container ) . overflow === 'visible' ;
var containerRect = container . getBoundingClientRect ( ) ;
var containerHeight = Math . min ( containerRect . height , window . innerHeight ) ;
var containerWidth = Math . min ( containerRect . width , window . innerWidth ) ;
var elOffsetRect = el . getBoundingClientRect ( ) ;
var scrollLeft = container . scrollLeft ;
var scrollTop = container . scrollTop ;
var scrolledX = bounding . left - scrollLeft ;
var scrolledYTopEdge = bounding . top - scrollTop ;
var scrolledYBottomEdge = bounding . top + elOffsetRect . height - scrollTop ;
// Check for container and viewport for left
canAlign . spaceOnRight = ! containerAllowsOverflow ? containerWidth - ( scrolledX + bounding . width ) : window . innerWidth - ( elOffsetRect . left + bounding . width ) ;
if ( canAlign . spaceOnRight < 0 ) {
canAlign . left = false ;
}
// Check for container and viewport for Right
canAlign . spaceOnLeft = ! containerAllowsOverflow ? scrolledX - bounding . width + elOffsetRect . width : elOffsetRect . right - bounding . width ;
if ( canAlign . spaceOnLeft < 0 ) {
canAlign . right = false ;
}
// Check for container and viewport for Top
canAlign . spaceOnBottom = ! containerAllowsOverflow ? containerHeight - ( scrolledYTopEdge + bounding . height + offset ) : window . innerHeight - ( elOffsetRect . top + bounding . height + offset ) ;
if ( canAlign . spaceOnBottom < 0 ) {
canAlign . top = false ;
}
// Check for container and viewport for Bottom
canAlign . spaceOnTop = ! containerAllowsOverflow ? scrolledYBottomEdge - ( bounding . height - offset ) : elOffsetRect . bottom - ( bounding . height + offset ) ;
if ( canAlign . spaceOnTop < 0 ) {
canAlign . bottom = false ;
}
return canAlign ;
} ;
M . getOverflowParent = function ( element ) {
if ( element == null ) {
return null ;
}
if ( element === document . body || getComputedStyle ( element ) . overflow !== 'visible' ) {
return element ;
}
return M . getOverflowParent ( element . parentElement ) ;
} ;
/ * *
* Gets id of component from a trigger
* @ param { Element } trigger trigger
* @ returns { string }
* /
M . getIdFromTrigger = function ( trigger ) {
var id = trigger . getAttribute ( 'data-target' ) ;
if ( ! id ) {
id = trigger . getAttribute ( 'href' ) ;
if ( id ) {
id = id . slice ( 1 ) ;
} else {
id = '' ;
}
}
return id ;
} ;
/ * *
* Multi browser support for document scroll top
* @ returns { Number }
* /
M . getDocumentScrollTop = function ( ) {
return window . pageYOffset || document . documentElement . scrollTop || document . body . scrollTop || 0 ;
} ;
/ * *
* Multi browser support for document scroll left
* @ returns { Number }
* /
M . getDocumentScrollLeft = function ( ) {
return window . pageXOffset || document . documentElement . scrollLeft || document . body . scrollLeft || 0 ;
} ;
/ * *
* @ typedef { Object } Edges
* @ property { Boolean } top If the top edge was exceeded
* @ property { Boolean } right If the right edge was exceeded
* @ property { Boolean } bottom If the bottom edge was exceeded
* @ property { Boolean } left If the left edge was exceeded
* /
/ * *
* @ typedef { Object } Bounding
* @ property { Number } left left offset coordinate
* @ property { Number } top top offset coordinate
* @ property { Number } width
* @ property { Number } height
* /
/ * *
* Get time in ms
* @ license https : //raw.github.com/jashkenas/underscore/master/LICENSE
* @ type { function }
* @ return { number }
* /
var getTime = Date . now || function ( ) {
return new Date ( ) . getTime ( ) ;
} ;
/ * *
* Returns a function , that , when invoked , will only be triggered at most once
* during a given window of time . Normally , the throttled function will run
* as much as it can , without ever going more than once per ` wait ` duration ;
* but if you ' d like to disable the execution on the leading edge , pass
* ` {leading: false} ` . To disable execution on the trailing edge , ditto .
* @ license https : //raw.github.com/jashkenas/underscore/master/LICENSE
* @ param { function } func
* @ param { number } wait
* @ param { Object = } options
* @ returns { Function }
* /
M . throttle = function ( func , wait , options ) {
var context = void 0 ,
args = void 0 ,
result = void 0 ;
var timeout = null ;
var previous = 0 ;
options || ( options = { } ) ;
var later = function ( ) {
previous = options . leading === false ? 0 : getTime ( ) ;
timeout = null ;
result = func . apply ( context , args ) ;
context = args = null ;
} ;
return function ( ) {
var now = getTime ( ) ;
if ( ! previous && options . leading === false ) previous = now ;
var remaining = wait - ( now - previous ) ;
context = this ;
args = arguments ;
if ( remaining <= 0 ) {
clearTimeout ( timeout ) ;
timeout = null ;
previous = now ;
result = func . apply ( context , args ) ;
context = args = null ;
} else if ( ! timeout && options . trailing !== false ) {
timeout = setTimeout ( later , remaining ) ;
}
return result ;
} ;
} ;
; / *
v2 . 2.0
2017 Julian Garnier
Released under the MIT license
* /
var $jscomp = { scope : { } } ; $jscomp . defineProperty = "function" == typeof Object . defineProperties ? Object . defineProperty : function ( e , r , p ) {
if ( p . get || p . set ) throw new TypeError ( "ES3 does not support getters and setters." ) ; e != Array . prototype && e != Object . prototype && ( e [ r ] = p . value ) ;
} ; $jscomp . getGlobal = function ( e ) {
return "undefined" != typeof window && window === e ? e : "undefined" != typeof global && null != global ? global : e ;
} ; $jscomp . global = $jscomp . getGlobal ( this ) ; $jscomp . SYMBOL _PREFIX = "jscomp_symbol_" ;
$jscomp . initSymbol = function ( ) {
$jscomp . initSymbol = function ( ) { } ; $jscomp . global . Symbol || ( $jscomp . global . Symbol = $jscomp . Symbol ) ;
} ; $jscomp . symbolCounter _ = 0 ; $jscomp . Symbol = function ( e ) {
return $jscomp . SYMBOL _PREFIX + ( e || "" ) + $jscomp . symbolCounter _ ++ ;
} ;
$jscomp . initSymbolIterator = function ( ) {
$jscomp . initSymbol ( ) ; var e = $jscomp . global . Symbol . iterator ; e || ( e = $jscomp . global . Symbol . iterator = $jscomp . global . Symbol ( "iterator" ) ) ; "function" != typeof Array . prototype [ e ] && $jscomp . defineProperty ( Array . prototype , e , { configurable : ! 0 , writable : ! 0 , value : function ( ) {
return $jscomp . arrayIterator ( this ) ;
} } ) ; $jscomp . initSymbolIterator = function ( ) { } ;
} ; $jscomp . arrayIterator = function ( e ) {
var r = 0 ; return $jscomp . iteratorPrototype ( function ( ) {
return r < e . length ? { done : ! 1 , value : e [ r ++ ] } : { done : ! 0 } ;
} ) ;
} ;
$jscomp . iteratorPrototype = function ( e ) {
$jscomp . initSymbolIterator ( ) ; e = { next : e } ; e [ $jscomp . global . Symbol . iterator ] = function ( ) {
return this ;
} ; return e ;
} ; $jscomp . array = $jscomp . array || { } ; $jscomp . iteratorFromArray = function ( e , r ) {
$jscomp . initSymbolIterator ( ) ; e instanceof String && ( e += "" ) ; var p = 0 ,
m = { next : function ( ) {
if ( p < e . length ) {
var u = p ++ ; return { value : r ( u , e [ u ] ) , done : ! 1 } ;
} m . next = function ( ) {
return { done : ! 0 , value : void 0 } ;
} ; return m . next ( ) ;
} } ; m [ Symbol . iterator ] = function ( ) {
return m ;
} ; return m ;
} ;
$jscomp . polyfill = function ( e , r , p , m ) {
if ( r ) {
p = $jscomp . global ; e = e . split ( "." ) ; for ( m = 0 ; m < e . length - 1 ; m ++ ) {
var u = e [ m ] ; u in p || ( p [ u ] = { } ) ; p = p [ u ] ;
} e = e [ e . length - 1 ] ; m = p [ e ] ; r = r ( m ) ; r != m && null != r && $jscomp . defineProperty ( p , e , { configurable : ! 0 , writable : ! 0 , value : r } ) ;
}
} ; $jscomp . polyfill ( "Array.prototype.keys" , function ( e ) {
return e ? e : function ( ) {
return $jscomp . iteratorFromArray ( this , function ( e ) {
return e ;
} ) ;
} ;
} , "es6-impl" , "es3" ) ; var $jscomp$this = this ;
( function ( r ) {
M . anime = r ( ) ;
} ) ( function ( ) {
function e ( a ) {
if ( ! h . col ( a ) ) try {
return document . querySelectorAll ( a ) ;
} catch ( c ) { }
} function r ( a , c ) {
for ( var d = a . length , b = 2 <= arguments . length ? arguments [ 1 ] : void 0 , f = [ ] , n = 0 ; n < d ; n ++ ) {
if ( n in a ) {
var k = a [ n ] ; c . call ( b , k , n , a ) && f . push ( k ) ;
}
} return f ;
} function p ( a ) {
return a . reduce ( function ( a , d ) {
return a . concat ( h . arr ( d ) ? p ( d ) : d ) ;
} , [ ] ) ;
} function m ( a ) {
if ( h . arr ( a ) ) return a ;
h . str ( a ) && ( a = e ( a ) || a ) ; return a instanceof NodeList || a instanceof HTMLCollection ? [ ] . slice . call ( a ) : [ a ] ;
} function u ( a , c ) {
return a . some ( function ( a ) {
return a === c ;
} ) ;
} function C ( a ) {
var c = { } ,
d ; for ( d in a ) {
c [ d ] = a [ d ] ;
} return c ;
} function D ( a , c ) {
var d = C ( a ) ,
b ; for ( b in a ) {
d [ b ] = c . hasOwnProperty ( b ) ? c [ b ] : a [ b ] ;
} return d ;
} function z ( a , c ) {
var d = C ( a ) ,
b ; for ( b in c ) {
d [ b ] = h . und ( a [ b ] ) ? c [ b ] : a [ b ] ;
} return d ;
} function T ( a ) {
a = a . replace ( /^#?([a-f\d])([a-f\d])([a-f\d])$/i , function ( a , c , d , k ) {
return c + c + d + d + k + k ;
} ) ; var c = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i . exec ( a ) ;
a = parseInt ( c [ 1 ] , 16 ) ; var d = parseInt ( c [ 2 ] , 16 ) ,
c = parseInt ( c [ 3 ] , 16 ) ; return "rgba(" + a + "," + d + "," + c + ",1)" ;
} function U ( a ) {
function c ( a , c , b ) {
0 > b && ( b += 1 ) ; 1 < b && -- b ; return b < 1 / 6 ? a + 6 * ( c - a ) * b : . 5 > b ? c : b < 2 / 3 ? a + ( c - a ) * ( 2 / 3 - b ) * 6 : a ;
} var d = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g . exec ( a ) || /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g . exec ( a ) ; a = parseInt ( d [ 1 ] ) / 360 ; var b = parseInt ( d [ 2 ] ) / 100 ,
f = parseInt ( d [ 3 ] ) / 100 ,
d = d [ 4 ] || 1 ; if ( 0 == b ) f = b = a = f ; else {
var n = . 5 > f ? f * ( 1 + b ) : f + b - f * b ,
k = 2 * f - n ,
f = c ( k , n , a + 1 / 3 ) ,
b = c ( k , n , a ) ; a = c ( k , n , a - 1 / 3 ) ;
} return "rgba(" + 255 * f + "," + 255 * b + "," + 255 * a + "," + d + ")" ;
} function y ( a ) {
if ( a = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/ . exec ( a ) ) return a [ 2 ] ;
} function V ( a ) {
if ( - 1 < a . indexOf ( "translate" ) || "perspective" === a ) return "px" ; if ( - 1 < a . indexOf ( "rotate" ) || - 1 < a . indexOf ( "skew" ) ) return "deg" ;
} function I ( a , c ) {
return h . fnc ( a ) ? a ( c . target , c . id , c . total ) : a ;
} function E ( a , c ) {
if ( c in a . style ) return getComputedStyle ( a ) . getPropertyValue ( c . replace ( /([a-z])([A-Z])/g , "$1-$2" ) . toLowerCase ( ) ) || "0" ;
} function J ( a , c ) {
if ( h . dom ( a ) && u ( W , c ) ) return "transform" ; if ( h . dom ( a ) && ( a . getAttribute ( c ) || h . svg ( a ) && a [ c ] ) ) return "attribute" ; if ( h . dom ( a ) && "transform" !== c && E ( a , c ) ) return "css" ; if ( null != a [ c ] ) return "object" ;
} function X ( a , c ) {
var d = V ( c ) ,
d = - 1 < c . indexOf ( "scale" ) ? 1 : 0 + d ; a = a . style . transform ; if ( ! a ) return d ; for ( var b = [ ] , f = [ ] , n = [ ] , k = /(\w+)\((.+?)\)/g ; b = k . exec ( a ) ; ) {
f . push ( b [ 1 ] ) , n . push ( b [ 2 ] ) ;
} a = r ( n , function ( a , b ) {
return f [ b ] === c ;
} ) ; return a . length ? a [ 0 ] : d ;
} function K ( a , c ) {
switch ( J ( a , c ) ) { case "transform" :
return X ( a , c ) ; case "css" :
return E ( a , c ) ; case "attribute" :
return a . getAttribute ( c ) ; } return a [ c ] || 0 ;
} function L ( a , c ) {
var d = /^(\*=|\+=|-=)/ . exec ( a ) ; if ( ! d ) return a ; var b = y ( a ) || 0 ; c = parseFloat ( c ) ; a = parseFloat ( a . replace ( d [ 0 ] , "" ) ) ; switch ( d [ 0 ] [ 0 ] ) { case "+" :
return c + a + b ; case "-" :
return c - a + b ; case "*" :
return c * a + b ; }
} function F ( a , c ) {
return Math . sqrt ( Math . pow ( c . x - a . x , 2 ) + Math . pow ( c . y - a . y , 2 ) ) ;
} function M ( a ) {
a = a . points ; for ( var c = 0 , d , b = 0 ; b < a . numberOfItems ; b ++ ) {
var f = a . getItem ( b ) ; 0 < b && ( c += F ( d , f ) ) ; d = f ;
} return c ;
} function N ( a ) {
if ( a . getTotalLength ) return a . getTotalLength ( ) ; switch ( a . tagName . toLowerCase ( ) ) { case "circle" :
return 2 * Math . PI * a . getAttribute ( "r" ) ; case "rect" :
return 2 * a . getAttribute ( "width" ) + 2 * a . getAttribute ( "height" ) ; case "line" :
return F ( { x : a . getAttribute ( "x1" ) , y : a . getAttribute ( "y1" ) } , { x : a . getAttribute ( "x2" ) , y : a . getAttribute ( "y2" ) } ) ; case "polyline" :
return M ( a ) ; case "polygon" :
var c = a . points ; return M ( a ) + F ( c . getItem ( c . numberOfItems - 1 ) , c . getItem ( 0 ) ) ; }
} function Y ( a , c ) {
function d ( b ) {
b = void 0 === b ? 0 : b ; return a . el . getPointAtLength ( 1 <= c + b ? c + b : 0 ) ;
} var b = d ( ) ,
f = d ( - 1 ) ,
n = d ( 1 ) ; switch ( a . property ) { case "x" :
return b . x ; case "y" :
return b . y ;
case "angle" :
return 180 * Math . atan2 ( n . y - f . y , n . x - f . x ) / Math . PI ; }
} function O ( a , c ) {
var d = /-?\d*\.?\d+/g ,
b ; b = h . pth ( a ) ? a . totalLength : a ; if ( h . col ( b ) ) {
if ( h . rgb ( b ) ) {
var f = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g . exec ( b ) ; b = f ? "rgba(" + f [ 1 ] + ",1)" : b ;
} else b = h . hex ( b ) ? T ( b ) : h . hsl ( b ) ? U ( b ) : void 0 ;
} else f = ( f = y ( b ) ) ? b . substr ( 0 , b . length - f . length ) : b , b = c && ! /\s/g . test ( b ) ? f + c : f ; b += "" ; return { original : b , numbers : b . match ( d ) ? b . match ( d ) . map ( Number ) : [ 0 ] , strings : h . str ( a ) || c ? b . split ( d ) : [ ] } ;
} function P ( a ) {
a = a ? p ( h . arr ( a ) ? a . map ( m ) : m ( a ) ) : [ ] ; return r ( a , function ( a , d , b ) {
return b . indexOf ( a ) === d ;
} ) ;
} function Z ( a ) {
var c = P ( a ) ; return c . map ( function ( a , b ) {
return { target : a , id : b , total : c . length } ;
} ) ;
} function aa ( a , c ) {
var d = C ( c ) ; if ( h . arr ( a ) ) {
var b = a . length ; 2 !== b || h . obj ( a [ 0 ] ) ? h . fnc ( c . duration ) || ( d . duration = c . duration / b ) : a = { value : a } ;
} return m ( a ) . map ( function ( a , b ) {
b = b ? 0 : c . delay ; a = h . obj ( a ) && ! h . pth ( a ) ? a : { value : a } ; h . und ( a . delay ) && ( a . delay = b ) ; return a ;
} ) . map ( function ( a ) {
return z ( a , d ) ;
} ) ;
} function ba ( a , c ) {
var d = { } ,
b ; for ( b in a ) {
var f = I ( a [ b ] , c ) ; h . arr ( f ) && ( f = f . map ( function ( a ) {
return I ( a , c ) ;
} ) , 1 === f . length && ( f = f [ 0 ] ) ) ; d [ b ] = f ;
} d . duration = parseFloat ( d . duration ) ; d . delay = parseFloat ( d . delay ) ; return d ;
} function ca ( a ) {
return h . arr ( a ) ? A . apply ( this , a ) : Q [ a ] ;
} function da ( a , c ) {
var d ; return a . tweens . map ( function ( b ) {
b = ba ( b , c ) ; var f = b . value ,
e = K ( c . target , a . name ) ,
k = d ? d . to . original : e ,
k = h . arr ( f ) ? f [ 0 ] : k ,
w = L ( h . arr ( f ) ? f [ 1 ] : f , k ) ,
e = y ( w ) || y ( k ) || y ( e ) ; b . from = O ( k , e ) ; b . to = O ( w , e ) ; b . start = d ? d . end : a . offset ; b . end = b . start + b . delay + b . duration ; b . easing = ca ( b . easing ) ; b . elasticity = ( 1E3 - Math . min ( Math . max ( b . elasticity , 1 ) , 999 ) ) / 1E3 ; b . isPath = h . pth ( f ) ; b . isColor = h . col ( b . from . original ) ; b . isColor && ( b . round = 1 ) ; return d = b ;
} ) ;
} function ea ( a , c ) {
return r ( p ( a . map ( function ( a ) {
return c . map ( function ( b ) {
var c = J ( a . target , b . name ) ; if ( c ) {
var d = da ( b , a ) ; b = { type : c , property : b . name , animatable : a , tweens : d , duration : d [ d . length - 1 ] . end , delay : d [ 0 ] . delay } ;
} else b = void 0 ; return b ;
} ) ;
} ) ) , function ( a ) {
return ! h . und ( a ) ;
} ) ;
} function R ( a , c , d , b ) {
var f = "delay" === a ; return c . length ? ( f ? Math . min : Math . max ) . apply ( Math , c . map ( function ( b ) {
return b [ a ] ;
} ) ) : f ? b . delay : d . offset + b . delay + b . duration ;
} function fa ( a ) {
var c = D ( ga , a ) ,
d = D ( S , a ) ,
b = Z ( a . targets ) ,
f = [ ] ,
e = z ( c , d ) ,
k ; for ( k in a ) {
e . hasOwnProperty ( k ) || "targets" === k || f . push ( { name : k , offset : e . offset , tweens : aa ( a [ k ] , d ) } ) ;
} a = ea ( b , f ) ; return z ( c , { children : [ ] , animatables : b , animations : a , duration : R ( "duration" , a , c , d ) , delay : R ( "delay" , a , c , d ) } ) ;
} function q ( a ) {
function c ( ) {
return window . Promise && new Promise ( function ( a ) {
return p = a ;
} ) ;
} function d ( a ) {
return g . reversed ? g . duration - a : a ;
} function b ( a ) {
for ( var b = 0 , c = { } , d = g . animations , f = d . length ; b < f ; ) {
var e = d [ b ] ,
k = e . animatable ,
h = e . tweens ,
n = h . length - 1 ,
l = h [ n ] ; n && ( l = r ( h , function ( b ) {
return a < b . end ;
} ) [ 0 ] || l ) ; for ( var h = Math . min ( Math . max ( a - l . start - l . delay , 0 ) , l . duration ) / l . duration , w = isNaN ( h ) ? 1 : l . easing ( h , l . elasticity ) , h = l . to . strings , p = l . round , n = [ ] , m = void 0 , m = l . to . numbers . length , t = 0 ; t < m ; t ++ ) {
var x = void 0 ,
x = l . to . numbers [ t ] ,
q = l . from . numbers [ t ] ,
x = l . isPath ? Y ( l . value , w * x ) : q + w * ( x - q ) ; p && ( l . isColor && 2 < t || ( x = Math . round ( x * p ) / p ) ) ; n . push ( x ) ;
} if ( l = h . length ) for ( m = h [ 0 ] , w = 0 ; w < l ; w ++ ) {
p = h [ w + 1 ] , t = n [ w ] , isNaN ( t ) || ( m = p ? m + ( t + p ) : m + ( t + " " ) ) ;
} else m = n [ 0 ] ; ha [ e . type ] ( k . target , e . property , m , c , k . id ) ; e . currentValue = m ; b ++ ;
} if ( b = Object . keys ( c ) . length ) for ( d = 0 ; d < b ; d ++ ) {
H || ( H = E ( document . body , "transform" ) ? "transform" : "-webkit-transform" ) , g . animatables [ d ] . target . style [ H ] = c [ d ] . join ( " " ) ;
} g . currentTime = a ; g . progress = a / g . duration * 100 ;
} function f ( a ) {
if ( g [ a ] ) g [ a ] ( g ) ;
} function e ( ) {
g . remaining && ! 0 !== g . remaining && g . remaining -- ;
} function k ( a ) {
var k = g . duration ,
n = g . offset ,
w = n + g . delay ,
r = g . currentTime ,
x = g . reversed ,
q = d ( a ) ; if ( g . children . length ) {
var u = g . children ,
v = u . length ;
if ( q >= g . currentTime ) for ( var G = 0 ; G < v ; G ++ ) {
u [ G ] . seek ( q ) ;
} else for ( ; v -- ; ) {
u [ v ] . seek ( q ) ;
}
} if ( q >= w || ! k ) g . began || ( g . began = ! 0 , f ( "begin" ) ) , f ( "run" ) ; if ( q > n && q < k ) b ( q ) ; else if ( q <= n && 0 !== r && ( b ( 0 ) , x && e ( ) ) , q >= k && r !== k || ! k ) b ( k ) , x || e ( ) ; f ( "update" ) ; a >= k && ( g . remaining ? ( t = h , "alternate" === g . direction && ( g . reversed = ! g . reversed ) ) : ( g . pause ( ) , g . completed || ( g . completed = ! 0 , f ( "complete" ) , "Promise" in window && ( p ( ) , m = c ( ) ) ) ) , l = 0 ) ;
} a = void 0 === a ? { } : a ; var h ,
t ,
l = 0 ,
p = null ,
m = c ( ) ,
g = fa ( a ) ; g . reset = function ( ) {
var a = g . direction ,
c = g . loop ; g . currentTime = 0 ; g . progress = 0 ; g . paused = ! 0 ; g . began = ! 1 ; g . completed = ! 1 ; g . reversed = "reverse" === a ; g . remaining = "alternate" === a && 1 === c ? 2 : c ; b ( 0 ) ; for ( a = g . children . length ; a -- ; ) {
g . children [ a ] . reset ( ) ;
}
} ; g . tick = function ( a ) {
h = a ; t || ( t = h ) ; k ( ( l + h - t ) * q . speed ) ;
} ; g . seek = function ( a ) {
k ( d ( a ) ) ;
} ; g . pause = function ( ) {
var a = v . indexOf ( g ) ; - 1 < a && v . splice ( a , 1 ) ; g . paused = ! 0 ;
} ; g . play = function ( ) {
g . paused && ( g . paused = ! 1 , t = 0 , l = d ( g . currentTime ) , v . push ( g ) , B || ia ( ) ) ;
} ; g . reverse = function ( ) {
g . reversed = ! g . reversed ; t = 0 ; l = d ( g . currentTime ) ;
} ; g . restart = function ( ) {
g . pause ( ) ;
g . reset ( ) ; g . play ( ) ;
} ; g . finished = m ; g . reset ( ) ; g . autoplay && g . play ( ) ; return g ;
} var ga = { update : void 0 , begin : void 0 , run : void 0 , complete : void 0 , loop : 1 , direction : "normal" , autoplay : ! 0 , offset : 0 } ,
S = { duration : 1E3 , delay : 0 , easing : "easeOutElastic" , elasticity : 500 , round : 0 } ,
W = "translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY perspective" . split ( " " ) ,
H ,
h = { arr : function ( a ) {
return Array . isArray ( a ) ;
} , obj : function ( a ) {
return - 1 < Object . prototype . toString . call ( a ) . indexOf ( "Object" ) ;
} ,
pth : function ( a ) {
return h . obj ( a ) && a . hasOwnProperty ( "totalLength" ) ;
} , svg : function ( a ) {
return a instanceof SVGElement ;
} , dom : function ( a ) {
return a . nodeType || h . svg ( a ) ;
} , str : function ( a ) {
return "string" === typeof a ;
} , fnc : function ( a ) {
return "function" === typeof a ;
} , und : function ( a ) {
return "undefined" === typeof a ;
} , hex : function ( a ) {
return ( /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i . test ( a )
) ;
} , rgb : function ( a ) {
return ( /^rgb/ . test ( a )
) ;
} , hsl : function ( a ) {
return ( /^hsl/ . test ( a )
) ;
} , col : function ( a ) {
return h . hex ( a ) || h . rgb ( a ) || h . hsl ( a ) ;
} } ,
A = function ( ) {
function a ( a , d , b ) {
return ( ( ( 1 - 3 * b + 3 * d ) * a + ( 3 * b - 6 * d ) ) * a + 3 * d ) * a ;
} return function ( c , d , b , f ) {
if ( 0 <= c && 1 >= c && 0 <= b && 1 >= b ) {
var e = new Float32Array ( 11 ) ; if ( c !== d || b !== f ) for ( var k = 0 ; 11 > k ; ++ k ) {
e [ k ] = a ( . 1 * k , c , b ) ;
} return function ( k ) {
if ( c === d && b === f ) return k ; if ( 0 === k ) return 0 ; if ( 1 === k ) return 1 ; for ( var h = 0 , l = 1 ; 10 !== l && e [ l ] <= k ; ++ l ) {
h += . 1 ;
} -- l ; var l = h + ( k - e [ l ] ) / ( e [ l + 1 ] - e [ l ] ) * . 1 ,
n = 3 * ( 1 - 3 * b + 3 * c ) * l * l + 2 * ( 3 * b - 6 * c ) * l + 3 * c ; if ( . 001 <= n ) {
for ( h = 0 ; 4 > h ; ++ h ) {
n = 3 * ( 1 - 3 * b + 3 * c ) * l * l + 2 * ( 3 * b - 6 * c ) * l + 3 * c ; if ( 0 === n ) break ; var m = a ( l , c , b ) - k ,
l = l - m / n ;
} k = l ;
} else if ( 0 === n ) k = l ; else {
var l = h ,
h = h + . 1 ,
g = 0 ; do {
m = l + ( h - l ) / 2 , n = a ( m , c , b ) - k , 0 < n ? h = m : l = m ;
} while ( 1e-7 < Math . abs ( n ) && 10 > ++ g ) ; k = m ;
} return a ( k , d , f ) ;
} ;
}
} ;
} ( ) ,
Q = function ( ) {
function a ( a , b ) {
return 0 === a || 1 === a ? a : - Math . pow ( 2 , 10 * ( a - 1 ) ) * Math . sin ( 2 * ( a - 1 - b / ( 2 * Math . PI ) * Math . asin ( 1 ) ) * Math . PI / b ) ;
} var c = "Quad Cubic Quart Quint Sine Expo Circ Back Elastic" . split ( " " ) ,
d = { In : [ [ . 55 , . 085 , . 68 , . 53 ] , [ . 55 , . 055 , . 675 , . 19 ] , [ . 895 , . 03 , . 685 , . 22 ] , [ . 755 , . 05 , . 855 , . 06 ] , [ . 47 , 0 , . 745 , . 715 ] , [ . 95 , . 05 , . 795 , . 035 ] , [ . 6 , . 04 , . 98 , . 335 ] , [ . 6 , - . 28 , . 735 , . 045 ] , a ] , Out : [ [ . 25 , . 46 , . 45 , . 94 ] , [ . 215 , . 61 , . 355 , 1 ] , [ . 165 , . 84 , . 44 , 1 ] , [ . 23 , 1 , . 32 , 1 ] , [ . 39 , . 575 , . 565 , 1 ] , [ . 19 , 1 , . 22 , 1 ] , [ . 075 , . 82 , . 165 , 1 ] , [ . 175 , . 885 , . 32 , 1.275 ] , function ( b , c ) {
return 1 - a ( 1 - b , c ) ;
} ] , InOut : [ [ . 455 , . 03 , . 515 , . 955 ] , [ . 645 , . 045 , . 355 , 1 ] , [ . 77 , 0 , . 175 , 1 ] , [ . 86 , 0 , . 07 , 1 ] , [ . 445 , . 05 , . 55 , . 95 ] , [ 1 , 0 , 0 , 1 ] , [ . 785 , . 135 , . 15 , . 86 ] , [ . 68 , - . 55 , . 265 , 1.55 ] , function ( b , c ) {
return . 5 > b ? a ( 2 * b , c ) / 2 : 1 - a ( - 2 * b + 2 , c ) / 2 ;
} ] } ,
b = { linear : A ( . 25 , . 25 , . 75 , . 75 ) } ,
f = { } ,
e ; for ( e in d ) {
f . type = e , d [ f . type ] . forEach ( function ( a ) {
return function ( d , f ) {
b [ "ease" + a . type + c [ f ] ] = h . fnc ( d ) ? d : A . apply ( $jscomp$this , d ) ;
} ;
} ( f ) ) , f = { type : f . type } ;
} return b ;
} ( ) ,
ha = { css : function ( a , c , d ) {
return a . style [ c ] = d ;
} , attribute : function ( a , c , d ) {
return a . setAttribute ( c , d ) ;
} , object : function ( a , c , d ) {
return a [ c ] = d ;
} , transform : function ( a , c , d , b , f ) {
b [ f ] || ( b [ f ] = [ ] ) ; b [ f ] . push ( c + "(" + d + ")" ) ;
} } ,
v = [ ] ,
B = 0 ,
ia = function ( ) {
function a ( ) {
B = requestAnimationFrame ( c ) ;
} function c ( c ) {
var b = v . length ; if ( b ) {
for ( var d = 0 ; d < b ; ) {
v [ d ] && v [ d ] . tick ( c ) , d ++ ;
} a ( ) ;
} else cancelAnimationFrame ( B ) , B = 0 ;
} return a ;
} ( ) ; q . version = "2.2.0" ; q . speed = 1 ; q . running = v ; q . remove = function ( a ) {
a = P ( a ) ; for ( var c = v . length ; c -- ; ) {
for ( var d = v [ c ] , b = d . animations , f = b . length ; f -- ; ) {
u ( a , b [ f ] . animatable . target ) && ( b . splice ( f , 1 ) , b . length || d . pause ( ) ) ;
}
}
} ; q . getValue = K ; q . path = function ( a , c ) {
var d = h . str ( a ) ? e ( a ) [ 0 ] : a ,
b = c || 100 ; return function ( a ) {
return { el : d , property : a , totalLength : N ( d ) * ( b / 100 ) } ;
} ;
} ; q . setDashoffset = function ( a ) {
var c = N ( a ) ; a . setAttribute ( "stroke-dasharray" , c ) ; return c ;
} ; q . bezier = A ; q . easings = Q ; q . timeline = function ( a ) {
var c = q ( a ) ; c . pause ( ) ; c . duration = 0 ; c . add = function ( d ) {
c . children . forEach ( function ( a ) {
a . began = ! 0 ; a . completed = ! 0 ;
} ) ; m ( d ) . forEach ( function ( b ) {
var d = z ( b , D ( S , a || { } ) ) ; d . targets = d . targets || a . targets ; b = c . duration ; var e = d . offset ; d . autoplay = ! 1 ; d . direction = c . direction ; d . offset = h . und ( e ) ? b : L ( e , b ) ; c . began = ! 0 ; c . completed = ! 0 ; c . seek ( d . offset ) ; d = q ( d ) ; d . began = ! 0 ; d . completed = ! 0 ; d . duration > b && ( c . duration = d . duration ) ; c . children . push ( d ) ;
} ) ; c . seek ( 0 ) ; c . reset ( ) ; c . autoplay && c . restart ( ) ; return c ;
} ; return c ;
} ; q . random = function ( a , c ) {
return Math . floor ( Math . random ( ) * ( c - a + 1 ) ) + a ;
} ; return q ;
} ) ;
; ( function ( $ , anim ) {
'use strict' ;
var _defaults = {
accordion : true ,
onOpenStart : undefined ,
onOpenEnd : undefined ,
onCloseStart : undefined ,
onCloseEnd : undefined ,
inDuration : 300 ,
outDuration : 300
} ;
/ * *
* @ class
*
* /
var Collapsible = function ( _Component ) {
_inherits ( Collapsible , _Component ) ;
/ * *
* Construct Collapsible instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Collapsible ( el , options ) {
_classCallCheck ( this , Collapsible ) ;
var _this3 = _possibleConstructorReturn ( this , ( Collapsible . _ _proto _ _ || Object . getPrototypeOf ( Collapsible ) ) . call ( this , Collapsible , el , options ) ) ;
_this3 . el . M _Collapsible = _this3 ;
/ * *
* Options for the collapsible
* @ member Collapsible # options
* @ prop { Boolean } [ accordion = false ] - Type of the collapsible
* @ prop { Function } onOpenStart - Callback function called before collapsible is opened
* @ prop { Function } onOpenEnd - Callback function called after collapsible is opened
* @ prop { Function } onCloseStart - Callback function called before collapsible is closed
* @ prop { Function } onCloseEnd - Callback function called after collapsible is closed
* @ prop { Number } inDuration - Transition in duration in milliseconds .
* @ prop { Number } outDuration - Transition duration in milliseconds .
* /
_this3 . options = $ . extend ( { } , Collapsible . defaults , options ) ;
// Setup tab indices
_this3 . $headers = _this3 . $el . children ( 'li' ) . children ( '.collapsible-header' ) ;
_this3 . $headers . attr ( 'tabindex' , 0 ) ;
_this3 . _setupEventHandlers ( ) ;
// Open first active
var $activeBodies = _this3 . $el . children ( 'li.active' ) . children ( '.collapsible-body' ) ;
if ( _this3 . options . accordion ) {
// Handle Accordion
$activeBodies . first ( ) . css ( 'display' , 'block' ) ;
} else {
// Handle Expandables
$activeBodies . css ( 'display' , 'block' ) ;
}
return _this3 ;
}
_createClass ( Collapsible , [ {
key : "destroy" ,
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . el . M _Collapsible = undefined ;
}
/ * *
* Setup Event Handlers
* /
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
var _this4 = this ;
this . _handleCollapsibleClickBound = this . _handleCollapsibleClick . bind ( this ) ;
this . _handleCollapsibleKeydownBound = this . _handleCollapsibleKeydown . bind ( this ) ;
this . el . addEventListener ( 'click' , this . _handleCollapsibleClickBound ) ;
this . $headers . each ( function ( header ) {
header . addEventListener ( 'keydown' , _this4 . _handleCollapsibleKeydownBound ) ;
} ) ;
}
/ * *
* Remove Event Handlers
* /
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
var _this5 = this ;
this . el . removeEventListener ( 'click' , this . _handleCollapsibleClickBound ) ;
this . $headers . each ( function ( header ) {
header . removeEventListener ( 'keydown' , _this5 . _handleCollapsibleKeydownBound ) ;
} ) ;
}
/ * *
* Handle Collapsible Click
* @ param { Event } e
* /
} , {
key : "_handleCollapsibleClick" ,
value : function _handleCollapsibleClick ( e ) {
var $header = $ ( e . target ) . closest ( '.collapsible-header' ) ;
if ( e . target && $header . length ) {
var $collapsible = $header . closest ( '.collapsible' ) ;
if ( $collapsible [ 0 ] === this . el ) {
var $collapsibleLi = $header . closest ( 'li' ) ;
var $collapsibleLis = $collapsible . children ( 'li' ) ;
var isActive = $collapsibleLi [ 0 ] . classList . contains ( 'active' ) ;
var index = $collapsibleLis . index ( $collapsibleLi ) ;
if ( isActive ) {
this . close ( index ) ;
} else {
this . open ( index ) ;
}
}
}
}
/ * *
* Handle Collapsible Keydown
* @ param { Event } e
* /
} , {
key : "_handleCollapsibleKeydown" ,
value : function _handleCollapsibleKeydown ( e ) {
if ( e . keyCode === 13 ) {
this . _handleCollapsibleClickBound ( e ) ;
}
}
/ * *
* Animate in collapsible slide
* @ param { Number } index - 0 th index of slide
* /
} , {
key : "_animateIn" ,
value : function _animateIn ( index ) {
var _this6 = this ;
var $collapsibleLi = this . $el . children ( 'li' ) . eq ( index ) ;
if ( $collapsibleLi . length ) {
var $body = $collapsibleLi . children ( '.collapsible-body' ) ;
anim . remove ( $body [ 0 ] ) ;
$body . css ( {
display : 'block' ,
overflow : 'hidden' ,
height : 0 ,
paddingTop : '' ,
paddingBottom : ''
} ) ;
var pTop = $body . css ( 'padding-top' ) ;
var pBottom = $body . css ( 'padding-bottom' ) ;
var finalHeight = $body [ 0 ] . scrollHeight ;
$body . css ( {
paddingTop : 0 ,
paddingBottom : 0
} ) ;
anim ( {
targets : $body [ 0 ] ,
height : finalHeight ,
paddingTop : pTop ,
paddingBottom : pBottom ,
duration : this . options . inDuration ,
easing : 'easeInOutCubic' ,
complete : function ( anim ) {
$body . css ( {
overflow : '' ,
paddingTop : '' ,
paddingBottom : '' ,
height : ''
} ) ;
// onOpenEnd callback
if ( typeof _this6 . options . onOpenEnd === 'function' ) {
_this6 . options . onOpenEnd . call ( _this6 , $collapsibleLi [ 0 ] ) ;
}
}
} ) ;
}
}
/ * *
* Animate out collapsible slide
* @ param { Number } index - 0 th index of slide to open
* /
} , {
key : "_animateOut" ,
value : function _animateOut ( index ) {
var _this7 = this ;
var $collapsibleLi = this . $el . children ( 'li' ) . eq ( index ) ;
if ( $collapsibleLi . length ) {
var $body = $collapsibleLi . children ( '.collapsible-body' ) ;
anim . remove ( $body [ 0 ] ) ;
$body . css ( 'overflow' , 'hidden' ) ;
anim ( {
targets : $body [ 0 ] ,
height : 0 ,
paddingTop : 0 ,
paddingBottom : 0 ,
duration : this . options . outDuration ,
easing : 'easeInOutCubic' ,
complete : function ( ) {
$body . css ( {
height : '' ,
overflow : '' ,
padding : '' ,
display : ''
} ) ;
// onCloseEnd callback
if ( typeof _this7 . options . onCloseEnd === 'function' ) {
_this7 . options . onCloseEnd . call ( _this7 , $collapsibleLi [ 0 ] ) ;
}
}
} ) ;
}
}
/ * *
* Open Collapsible
* @ param { Number } index - 0 th index of slide
* /
} , {
key : "open" ,
value : function open ( index ) {
var _this8 = this ;
var $collapsibleLi = this . $el . children ( 'li' ) . eq ( index ) ;
if ( $collapsibleLi . length && ! $collapsibleLi [ 0 ] . classList . contains ( 'active' ) ) {
// onOpenStart callback
if ( typeof this . options . onOpenStart === 'function' ) {
this . options . onOpenStart . call ( this , $collapsibleLi [ 0 ] ) ;
}
// Handle accordion behavior
if ( this . options . accordion ) {
var $collapsibleLis = this . $el . children ( 'li' ) ;
var $activeLis = this . $el . children ( 'li.active' ) ;
$activeLis . each ( function ( el ) {
var index = $collapsibleLis . index ( $ ( el ) ) ;
_this8 . close ( index ) ;
} ) ;
}
// Animate in
$collapsibleLi [ 0 ] . classList . add ( 'active' ) ;
this . _animateIn ( index ) ;
}
}
/ * *
* Close Collapsible
* @ param { Number } index - 0 th index of slide
* /
} , {
key : "close" ,
value : function close ( index ) {
var $collapsibleLi = this . $el . children ( 'li' ) . eq ( index ) ;
if ( $collapsibleLi . length && $collapsibleLi [ 0 ] . classList . contains ( 'active' ) ) {
// onCloseStart callback
if ( typeof this . options . onCloseStart === 'function' ) {
this . options . onCloseStart . call ( this , $collapsibleLi [ 0 ] ) ;
}
// Animate out
$collapsibleLi [ 0 ] . classList . remove ( 'active' ) ;
this . _animateOut ( index ) ;
}
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Collapsible . _ _proto _ _ || Object . getPrototypeOf ( Collapsible ) , "init" , this ) . call ( this , this , els , options ) ;
}
/ * *
* Get Instance
* /
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Collapsible ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
return Collapsible ;
} ( Component ) ;
M . Collapsible = Collapsible ;
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Collapsible , 'collapsible' , 'M_Collapsible' ) ;
}
} ) ( cash , M . anime ) ;
; ( function ( $ , anim ) {
'use strict' ;
var _defaults = {
alignment : 'left' ,
autoFocus : true ,
constrainWidth : true ,
container : null ,
coverTrigger : true ,
closeOnClick : true ,
hover : false ,
inDuration : 150 ,
outDuration : 250 ,
onOpenStart : null ,
onOpenEnd : null ,
onCloseStart : null ,
onCloseEnd : null ,
onItemClick : null
} ;
/ * *
* @ class
* /
var Dropdown = function ( _Component2 ) {
_inherits ( Dropdown , _Component2 ) ;
function Dropdown ( el , options ) {
_classCallCheck ( this , Dropdown ) ;
var _this9 = _possibleConstructorReturn ( this , ( Dropdown . _ _proto _ _ || Object . getPrototypeOf ( Dropdown ) ) . call ( this , Dropdown , el , options ) ) ;
_this9 . el . M _Dropdown = _this9 ;
Dropdown . _dropdowns . push ( _this9 ) ;
_this9 . id = M . getIdFromTrigger ( el ) ;
_this9 . dropdownEl = document . getElementById ( _this9 . id ) ;
_this9 . $dropdownEl = $ ( _this9 . dropdownEl ) ;
/ * *
* Options for the dropdown
* @ member Dropdown # options
* @ prop { String } [ alignment = 'left' ] - Edge which the dropdown is aligned to
* @ prop { Boolean } [ autoFocus = true ] - Automatically focus dropdown el for keyboard
* @ prop { Boolean } [ constrainWidth = true ] - Constrain width to width of the button
* @ prop { Element } container - Container element to attach dropdown to ( optional )
* @ prop { Boolean } [ coverTrigger = true ] - Place dropdown over trigger
* @ prop { Boolean } [ closeOnClick = true ] - Close on click of dropdown item
* @ prop { Boolean } [ hover = false ] - Open dropdown on hover
* @ prop { Number } [ inDuration = 150 ] - Duration of open animation in ms
* @ prop { Number } [ outDuration = 250 ] - Duration of close animation in ms
* @ prop { Function } onOpenStart - Function called when dropdown starts opening
* @ prop { Function } onOpenEnd - Function called when dropdown finishes opening
* @ prop { Function } onCloseStart - Function called when dropdown starts closing
* @ prop { Function } onCloseEnd - Function called when dropdown finishes closing
* /
_this9 . options = $ . extend ( { } , Dropdown . defaults , options ) ;
/ * *
* Describes open / close state of dropdown
* @ type { Boolean }
* /
_this9 . isOpen = false ;
/ * *
* Describes if dropdown content is scrollable
* @ type { Boolean }
* /
_this9 . isScrollable = false ;
/ * *
* Describes if touch moving on dropdown content
* @ type { Boolean }
* /
_this9 . isTouchMoving = false ;
_this9 . focusedIndex = - 1 ;
_this9 . filterQuery = [ ] ;
// Move dropdown-content after dropdown-trigger
if ( ! ! _this9 . options . container ) {
$ ( _this9 . options . container ) . append ( _this9 . dropdownEl ) ;
} else {
_this9 . $el . after ( _this9 . dropdownEl ) ;
}
_this9 . _makeDropdownFocusable ( ) ;
_this9 . _resetFilterQueryBound = _this9 . _resetFilterQuery . bind ( _this9 ) ;
_this9 . _handleDocumentClickBound = _this9 . _handleDocumentClick . bind ( _this9 ) ;
_this9 . _handleDocumentTouchmoveBound = _this9 . _handleDocumentTouchmove . bind ( _this9 ) ;
_this9 . _handleDropdownClickBound = _this9 . _handleDropdownClick . bind ( _this9 ) ;
_this9 . _handleDropdownKeydownBound = _this9 . _handleDropdownKeydown . bind ( _this9 ) ;
_this9 . _handleTriggerKeydownBound = _this9 . _handleTriggerKeydown . bind ( _this9 ) ;
_this9 . _setupEventHandlers ( ) ;
return _this9 ;
}
_createClass ( Dropdown , [ {
key : "destroy" ,
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _resetDropdownStyles ( ) ;
this . _removeEventHandlers ( ) ;
Dropdown . _dropdowns . splice ( Dropdown . _dropdowns . indexOf ( this ) , 1 ) ;
this . el . M _Dropdown = undefined ;
}
/ * *
* Setup Event Handlers
* /
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
// Trigger keydown handler
this . el . addEventListener ( 'keydown' , this . _handleTriggerKeydownBound ) ;
// Item click handler
this . dropdownEl . addEventListener ( 'click' , this . _handleDropdownClickBound ) ;
// Hover event handlers
if ( this . options . hover ) {
this . _handleMouseEnterBound = this . _handleMouseEnter . bind ( this ) ;
this . el . addEventListener ( 'mouseenter' , this . _handleMouseEnterBound ) ;
this . _handleMouseLeaveBound = this . _handleMouseLeave . bind ( this ) ;
this . el . addEventListener ( 'mouseleave' , this . _handleMouseLeaveBound ) ;
this . dropdownEl . addEventListener ( 'mouseleave' , this . _handleMouseLeaveBound ) ;
// Click event handlers
} else {
this . _handleClickBound = this . _handleClick . bind ( this ) ;
this . el . addEventListener ( 'click' , this . _handleClickBound ) ;
}
}
/ * *
* Remove Event Handlers
* /
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
this . el . removeEventListener ( 'keydown' , this . _handleTriggerKeydownBound ) ;
this . dropdownEl . removeEventListener ( 'click' , this . _handleDropdownClickBound ) ;
if ( this . options . hover ) {
this . el . removeEventListener ( 'mouseenter' , this . _handleMouseEnterBound ) ;
this . el . removeEventListener ( 'mouseleave' , this . _handleMouseLeaveBound ) ;
this . dropdownEl . removeEventListener ( 'mouseleave' , this . _handleMouseLeaveBound ) ;
} else {
this . el . removeEventListener ( 'click' , this . _handleClickBound ) ;
}
}
} , {
key : "_setupTemporaryEventHandlers" ,
value : function _setupTemporaryEventHandlers ( ) {
// Use capture phase event handler to prevent click
document . body . addEventListener ( 'click' , this . _handleDocumentClickBound , true ) ;
document . body . addEventListener ( 'touchend' , this . _handleDocumentClickBound ) ;
document . body . addEventListener ( 'touchmove' , this . _handleDocumentTouchmoveBound ) ;
this . dropdownEl . addEventListener ( 'keydown' , this . _handleDropdownKeydownBound ) ;
}
} , {
key : "_removeTemporaryEventHandlers" ,
value : function _removeTemporaryEventHandlers ( ) {
// Use capture phase event handler to prevent click
document . body . removeEventListener ( 'click' , this . _handleDocumentClickBound , true ) ;
document . body . removeEventListener ( 'touchend' , this . _handleDocumentClickBound ) ;
document . body . removeEventListener ( 'touchmove' , this . _handleDocumentTouchmoveBound ) ;
this . dropdownEl . removeEventListener ( 'keydown' , this . _handleDropdownKeydownBound ) ;
}
} , {
key : "_handleClick" ,
value : function _handleClick ( e ) {
e . preventDefault ( ) ;
this . open ( ) ;
}
} , {
key : "_handleMouseEnter" ,
value : function _handleMouseEnter ( ) {
this . open ( ) ;
}
} , {
key : "_handleMouseLeave" ,
value : function _handleMouseLeave ( e ) {
var toEl = e . toElement || e . relatedTarget ;
var leaveToDropdownContent = ! ! $ ( toEl ) . closest ( '.dropdown-content' ) . length ;
var leaveToActiveDropdownTrigger = false ;
var $closestTrigger = $ ( toEl ) . closest ( '.dropdown-trigger' ) ;
if ( $closestTrigger . length && ! ! $closestTrigger [ 0 ] . M _Dropdown && $closestTrigger [ 0 ] . M _Dropdown . isOpen ) {
leaveToActiveDropdownTrigger = true ;
}
// Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content
if ( ! leaveToActiveDropdownTrigger && ! leaveToDropdownContent ) {
this . close ( ) ;
}
}
} , {
key : "_handleDocumentClick" ,
value : function _handleDocumentClick ( e ) {
var _this10 = this ;
var $target = $ ( e . target ) ;
if ( this . options . closeOnClick && $target . closest ( '.dropdown-content' ) . length && ! this . isTouchMoving ) {
// isTouchMoving to check if scrolling on mobile.
setTimeout ( function ( ) {
_this10 . close ( ) ;
} , 0 ) ;
} else if ( $target . closest ( '.dropdown-trigger' ) . length || ! $target . closest ( '.dropdown-content' ) . length ) {
setTimeout ( function ( ) {
_this10 . close ( ) ;
} , 0 ) ;
}
this . isTouchMoving = false ;
}
} , {
key : "_handleTriggerKeydown" ,
value : function _handleTriggerKeydown ( e ) {
// ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown
if ( ( e . which === M . keys . ARROW _DOWN || e . which === M . keys . ENTER ) && ! this . isOpen ) {
e . preventDefault ( ) ;
this . open ( ) ;
}
}
/ * *
* Handle Document Touchmove
* @ param { Event } e
* /
} , {
key : "_handleDocumentTouchmove" ,
value : function _handleDocumentTouchmove ( e ) {
var $target = $ ( e . target ) ;
if ( $target . closest ( '.dropdown-content' ) . length ) {
this . isTouchMoving = true ;
}
}
/ * *
* Handle Dropdown Click
* @ param { Event } e
* /
} , {
key : "_handleDropdownClick" ,
value : function _handleDropdownClick ( e ) {
// onItemClick callback
if ( typeof this . options . onItemClick === 'function' ) {
var itemEl = $ ( e . target ) . closest ( 'li' ) [ 0 ] ;
this . options . onItemClick . call ( this , itemEl ) ;
}
}
/ * *
* Handle Dropdown Keydown
* @ param { Event } e
* /
} , {
key : "_handleDropdownKeydown" ,
value : function _handleDropdownKeydown ( e ) {
if ( e . which === M . keys . TAB ) {
e . preventDefault ( ) ;
this . close ( ) ;
// Navigate down dropdown list
} else if ( ( e . which === M . keys . ARROW _DOWN || e . which === M . keys . ARROW _UP ) && this . isOpen ) {
e . preventDefault ( ) ;
var direction = e . which === M . keys . ARROW _DOWN ? 1 : - 1 ;
var newFocusedIndex = this . focusedIndex ;
var foundNewIndex = false ;
do {
newFocusedIndex = newFocusedIndex + direction ;
if ( ! ! this . dropdownEl . children [ newFocusedIndex ] && this . dropdownEl . children [ newFocusedIndex ] . tabIndex !== - 1 ) {
foundNewIndex = true ;
break ;
}
} while ( newFocusedIndex < this . dropdownEl . children . length && newFocusedIndex >= 0 ) ;
if ( foundNewIndex ) {
this . focusedIndex = newFocusedIndex ;
this . _focusFocusedItem ( ) ;
}
// ENTER selects choice on focused item
} else if ( e . which === M . keys . ENTER && this . isOpen ) {
// Search for <a> and <button>
var focusedElement = this . dropdownEl . children [ this . focusedIndex ] ;
var $activatableElement = $ ( focusedElement ) . find ( 'a, button' ) . first ( ) ;
// Click a or button tag if exists, otherwise click li tag
if ( ! ! $activatableElement . length ) {
$activatableElement [ 0 ] . click ( ) ;
} else if ( ! ! focusedElement ) {
focusedElement . click ( ) ;
}
// Close dropdown on ESC
} else if ( e . which === M . keys . ESC && this . isOpen ) {
e . preventDefault ( ) ;
this . close ( ) ;
}
// CASE WHEN USER TYPE LETTERS
var letter = String . fromCharCode ( e . which ) . toLowerCase ( ) ,
nonLetters = [ 9 , 13 , 27 , 38 , 40 ] ;
if ( letter && nonLetters . indexOf ( e . which ) === - 1 ) {
this . filterQuery . push ( letter ) ;
var string = this . filterQuery . join ( '' ) ,
newOptionEl = $ ( this . dropdownEl ) . find ( 'li' ) . filter ( function ( el ) {
return $ ( el ) . text ( ) . toLowerCase ( ) . indexOf ( string ) === 0 ;
} ) [ 0 ] ;
if ( newOptionEl ) {
this . focusedIndex = $ ( newOptionEl ) . index ( ) ;
this . _focusFocusedItem ( ) ;
}
}
this . filterTimeout = setTimeout ( this . _resetFilterQueryBound , 1000 ) ;
}
/ * *
* Setup dropdown
* /
} , {
key : "_resetFilterQuery" ,
value : function _resetFilterQuery ( ) {
this . filterQuery = [ ] ;
}
} , {
key : "_resetDropdownStyles" ,
value : function _resetDropdownStyles ( ) {
this . $dropdownEl . css ( {
display : '' ,
width : '' ,
height : '' ,
left : '' ,
top : '' ,
'transform-origin' : '' ,
transform : '' ,
opacity : ''
} ) ;
}
} , {
key : "_makeDropdownFocusable" ,
value : function _makeDropdownFocusable ( ) {
// Needed for arrow key navigation
this . dropdownEl . tabIndex = 0 ;
// Only set tabindex if it hasn't been set by user
$ ( this . dropdownEl ) . children ( ) . each ( function ( el ) {
if ( ! el . getAttribute ( 'tabindex' ) ) {
el . setAttribute ( 'tabindex' , 0 ) ;
}
} ) ;
}
} , {
key : "_focusFocusedItem" ,
value : function _focusFocusedItem ( ) {
if ( this . focusedIndex >= 0 && this . focusedIndex < this . dropdownEl . children . length && this . options . autoFocus ) {
this . dropdownEl . children [ this . focusedIndex ] . focus ( ) ;
}
}
} , {
key : "_getDropdownPosition" ,
value : function _getDropdownPosition ( ) {
var offsetParentBRect = this . el . offsetParent . getBoundingClientRect ( ) ;
var triggerBRect = this . el . getBoundingClientRect ( ) ;
var dropdownBRect = this . dropdownEl . getBoundingClientRect ( ) ;
var idealHeight = dropdownBRect . height ;
var idealWidth = dropdownBRect . width ;
var idealXPos = triggerBRect . left - dropdownBRect . left ;
var idealYPos = triggerBRect . top - dropdownBRect . top ;
var dropdownBounds = {
left : idealXPos ,
top : idealYPos ,
height : idealHeight ,
width : idealWidth
} ;
// Countainer here will be closest ancestor with overflow: hidden
var closestOverflowParent = ! ! this . dropdownEl . offsetParent ? this . dropdownEl . offsetParent : this . dropdownEl . parentNode ;
var alignments = M . checkPossibleAlignments ( this . el , closestOverflowParent , dropdownBounds , this . options . coverTrigger ? 0 : triggerBRect . height ) ;
var verticalAlignment = 'top' ;
var horizontalAlignment = this . options . alignment ;
idealYPos += this . options . coverTrigger ? 0 : triggerBRect . height ;
// Reset isScrollable
this . isScrollable = false ;
if ( ! alignments . top ) {
if ( alignments . bottom ) {
verticalAlignment = 'bottom' ;
} else {
this . isScrollable = true ;
// Determine which side has most space and cutoff at correct height
if ( alignments . spaceOnTop > alignments . spaceOnBottom ) {
verticalAlignment = 'bottom' ;
idealHeight += alignments . spaceOnTop ;
idealYPos -= alignments . spaceOnTop ;
} else {
idealHeight += alignments . spaceOnBottom ;
}
}
}
// If preferred horizontal alignment is possible
if ( ! alignments [ horizontalAlignment ] ) {
var oppositeAlignment = horizontalAlignment === 'left' ? 'right' : 'left' ;
if ( alignments [ oppositeAlignment ] ) {
horizontalAlignment = oppositeAlignment ;
} else {
// Determine which side has most space and cutoff at correct height
if ( alignments . spaceOnLeft > alignments . spaceOnRight ) {
horizontalAlignment = 'right' ;
idealWidth += alignments . spaceOnLeft ;
idealXPos -= alignments . spaceOnLeft ;
} else {
horizontalAlignment = 'left' ;
idealWidth += alignments . spaceOnRight ;
}
}
}
if ( verticalAlignment === 'bottom' ) {
idealYPos = idealYPos - dropdownBRect . height + ( this . options . coverTrigger ? triggerBRect . height : 0 ) ;
}
if ( horizontalAlignment === 'right' ) {
idealXPos = idealXPos - dropdownBRect . width + triggerBRect . width ;
}
return {
x : idealXPos ,
y : idealYPos ,
verticalAlignment : verticalAlignment ,
horizontalAlignment : horizontalAlignment ,
height : idealHeight ,
width : idealWidth
} ;
}
/ * *
* Animate in dropdown
* /
} , {
key : "_animateIn" ,
value : function _animateIn ( ) {
var _this11 = this ;
anim . remove ( this . dropdownEl ) ;
anim ( {
targets : this . dropdownEl ,
opacity : {
value : [ 0 , 1 ] ,
easing : 'easeOutQuad'
} ,
scaleX : [ 0.3 , 1 ] ,
scaleY : [ 0.3 , 1 ] ,
duration : this . options . inDuration ,
easing : 'easeOutQuint' ,
complete : function ( anim ) {
if ( _this11 . options . autoFocus ) {
_this11 . dropdownEl . focus ( ) ;
}
// onOpenEnd callback
if ( typeof _this11 . options . onOpenEnd === 'function' ) {
_this11 . options . onOpenEnd . call ( _this11 , _this11 . el ) ;
}
}
} ) ;
}
/ * *
* Animate out dropdown
* /
} , {
key : "_animateOut" ,
value : function _animateOut ( ) {
var _this12 = this ;
anim . remove ( this . dropdownEl ) ;
anim ( {
targets : this . dropdownEl ,
opacity : {
value : 0 ,
easing : 'easeOutQuint'
} ,
scaleX : 0.3 ,
scaleY : 0.3 ,
duration : this . options . outDuration ,
easing : 'easeOutQuint' ,
complete : function ( anim ) {
_this12 . _resetDropdownStyles ( ) ;
// onCloseEnd callback
if ( typeof _this12 . options . onCloseEnd === 'function' ) {
_this12 . options . onCloseEnd . call ( _this12 , _this12 . el ) ;
}
}
} ) ;
}
/ * *
* Place dropdown
* /
} , {
key : "_placeDropdown" ,
value : function _placeDropdown ( ) {
// Set width before calculating positionInfo
var idealWidth = this . options . constrainWidth ? this . el . getBoundingClientRect ( ) . width : this . dropdownEl . getBoundingClientRect ( ) . width ;
this . dropdownEl . style . width = idealWidth + 'px' ;
var positionInfo = this . _getDropdownPosition ( ) ;
this . dropdownEl . style . left = positionInfo . x + 'px' ;
this . dropdownEl . style . top = positionInfo . y + 'px' ;
this . dropdownEl . style . height = positionInfo . height + 'px' ;
this . dropdownEl . style . width = positionInfo . width + 'px' ;
this . dropdownEl . style . transformOrigin = ( positionInfo . horizontalAlignment === 'left' ? '0' : '100%' ) + " " + ( positionInfo . verticalAlignment === 'top' ? '0' : '100%' ) ;
}
/ * *
* Open Dropdown
* /
} , {
key : "open" ,
value : function open ( ) {
if ( this . isOpen ) {
return ;
}
this . isOpen = true ;
// onOpenStart callback
if ( typeof this . options . onOpenStart === 'function' ) {
this . options . onOpenStart . call ( this , this . el ) ;
}
// Reset styles
this . _resetDropdownStyles ( ) ;
this . dropdownEl . style . display = 'block' ;
this . _placeDropdown ( ) ;
this . _animateIn ( ) ;
this . _setupTemporaryEventHandlers ( ) ;
}
/ * *
* Close Dropdown
* /
} , {
key : "close" ,
value : function close ( ) {
if ( ! this . isOpen ) {
return ;
}
this . isOpen = false ;
this . focusedIndex = - 1 ;
// onCloseStart callback
if ( typeof this . options . onCloseStart === 'function' ) {
this . options . onCloseStart . call ( this , this . el ) ;
}
this . _animateOut ( ) ;
this . _removeTemporaryEventHandlers ( ) ;
if ( this . options . autoFocus ) {
this . el . focus ( ) ;
}
}
/ * *
* Recalculate dimensions
* /
} , {
key : "recalculateDimensions" ,
value : function recalculateDimensions ( ) {
if ( this . isOpen ) {
this . $dropdownEl . css ( {
width : '' ,
height : '' ,
left : '' ,
top : '' ,
'transform-origin' : ''
} ) ;
this . _placeDropdown ( ) ;
}
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Dropdown . _ _proto _ _ || Object . getPrototypeOf ( Dropdown ) , "init" , this ) . call ( this , this , els , options ) ;
}
/ * *
* Get Instance
* /
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Dropdown ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
return Dropdown ;
} ( Component ) ;
/ * *
* @ static
* @ memberof Dropdown
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Dropdown . _dropdowns = [ ] ;
M . Dropdown = Dropdown ;
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Dropdown , 'dropdown' , 'M_Dropdown' ) ;
}
} ) ( cash , M . anime ) ;
; ( function ( $ , anim ) {
'use strict' ;
var _defaults = {
opacity : 0.5 ,
inDuration : 250 ,
outDuration : 250 ,
onOpenStart : null ,
onOpenEnd : null ,
onCloseStart : null ,
onCloseEnd : null ,
preventScrolling : true ,
dismissible : true ,
startingTop : '4%' ,
endingTop : '10%'
2018-01-28 23:22:43 +11:00
} ;
2019-06-07 02:11:04 +10:00
/ * *
* @ class
*
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var Modal = function ( _Component3 ) {
_inherits ( Modal , _Component3 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct Modal instance and set up overlay
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Modal ( el , options ) {
_classCallCheck ( this , Modal ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this13 = _possibleConstructorReturn ( this , ( Modal . _ _proto _ _ || Object . getPrototypeOf ( Modal ) ) . call ( this , Modal , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this13 . el . M _Modal = _this13 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Options for the modal
* @ member Modal # options
* @ prop { Number } [ opacity = 0.5 ] - Opacity of the modal overlay
* @ prop { Number } [ inDuration = 250 ] - Length in ms of enter transition
* @ prop { Number } [ outDuration = 250 ] - Length in ms of exit transition
* @ prop { Function } onOpenStart - Callback function called before modal is opened
* @ prop { Function } onOpenEnd - Callback function called after modal is opened
* @ prop { Function } onCloseStart - Callback function called before modal is closed
* @ prop { Function } onCloseEnd - Callback function called after modal is closed
* @ prop { Boolean } [ dismissible = true ] - Allow modal to be dismissed by keyboard or overlay click
* @ prop { String } [ startingTop = '4%' ] - startingTop
* @ prop { String } [ endingTop = '10%' ] - endingTop
* /
_this13 . options = $ . extend ( { } , Modal . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Describes open / close state of modal
* @ type { Boolean }
* /
_this13 . isOpen = false ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this13 . id = _this13 . $el . attr ( 'id' ) ;
_this13 . _openingTrigger = undefined ;
_this13 . $overlay = $ ( '<div class="modal-overlay"></div>' ) ;
_this13 . el . tabIndex = 0 ;
_this13 . _nthModalOpened = 0 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Modal . _count ++ ;
_this13 . _setupEventHandlers ( ) ;
return _this13 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_createClass ( Modal , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
Modal . _count -- ;
this . _removeEventHandlers ( ) ;
this . el . removeAttribute ( 'style' ) ;
this . $overlay . remove ( ) ;
this . el . M _Modal = undefined ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleOverlayClickBound = this . _handleOverlayClick . bind ( this ) ;
this . _handleModalCloseClickBound = this . _handleModalCloseClick . bind ( this ) ;
if ( Modal . _count === 1 ) {
document . body . addEventListener ( 'click' , this . _handleTriggerClick ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . $overlay [ 0 ] . addEventListener ( 'click' , this . _handleOverlayClickBound ) ;
this . el . addEventListener ( 'click' , this . _handleModalCloseClickBound ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
if ( Modal . _count === 0 ) {
document . body . removeEventListener ( 'click' , this . _handleTriggerClick ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . $overlay [ 0 ] . removeEventListener ( 'click' , this . _handleOverlayClickBound ) ;
this . el . removeEventListener ( 'click' , this . _handleModalCloseClickBound ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Trigger Click
* @ param { Event } e
* /
} , {
key : "_handleTriggerClick" ,
value : function _handleTriggerClick ( e ) {
var $trigger = $ ( e . target ) . closest ( '.modal-trigger' ) ;
if ( $trigger . length ) {
var modalId = M . getIdFromTrigger ( $trigger [ 0 ] ) ;
var modalInstance = document . getElementById ( modalId ) . M _Modal ;
if ( modalInstance ) {
modalInstance . open ( $trigger ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
e . preventDefault ( ) ;
2018-01-28 23:22:43 +11:00
}
}
/ * *
2019-06-07 02:11:04 +10:00
* Handle Overlay Click
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
} , {
key : "_handleOverlayClick" ,
value : function _handleOverlayClick ( ) {
if ( this . options . dismissible ) {
this . close ( ) ;
}
2018-01-28 23:22:43 +11:00
}
/ * *
2019-06-07 02:11:04 +10:00
* Handle Modal Close Click
* @ param { Event } e
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
} , {
key : "_handleModalCloseClick" ,
value : function _handleModalCloseClick ( e ) {
var $closeTrigger = $ ( e . target ) . closest ( '.modal-close' ) ;
if ( $closeTrigger . length ) {
this . close ( ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Keydown
* @ param { Event } e
* /
} , {
key : "_handleKeydown" ,
value : function _handleKeydown ( e ) {
// ESC key
if ( e . keyCode === 27 && this . options . dismissible ) {
this . close ( ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Focus
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleFocus" ,
value : function _handleFocus ( e ) {
// Only trap focus if this modal is the last model opened (prevents loops in nested modals).
if ( ! this . el . contains ( e . target ) && this . _nthModalOpened === Modal . _modalsOpen ) {
this . el . focus ( ) ;
2018-01-28 23:22:43 +11:00
}
}
2019-06-07 02:11:04 +10:00
/ * *
* Animate in modal
* /
} , {
key : "_animateIn" ,
value : function _animateIn ( ) {
var _this14 = this ;
// Set initial styles
$ . extend ( this . el . style , {
display : 'block' ,
opacity : 0
} ) ;
$ . extend ( this . $overlay [ 0 ] . style , {
display : 'block' ,
opacity : 0
} ) ;
// Animate overlay
anim ( {
targets : this . $overlay [ 0 ] ,
opacity : this . options . opacity ,
duration : this . options . inDuration ,
easing : 'easeOutQuad'
} ) ;
// Define modal animation options
var enterAnimOptions = {
targets : this . el ,
duration : this . options . inDuration ,
easing : 'easeOutCubic' ,
// Handle modal onOpenEnd callback
complete : function ( ) {
if ( typeof _this14 . options . onOpenEnd === 'function' ) {
_this14 . options . onOpenEnd . call ( _this14 , _this14 . el , _this14 . _openingTrigger ) ;
}
}
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Bottom sheet animation
if ( this . el . classList . contains ( 'bottom-sheet' ) ) {
$ . extend ( enterAnimOptions , {
bottom : 0 ,
opacity : 1
} ) ;
anim ( enterAnimOptions ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Normal modal animation
} else {
$ . extend ( enterAnimOptions , {
top : [ this . options . startingTop , this . options . endingTop ] ,
opacity : 1 ,
scaleX : [ 0.8 , 1 ] ,
scaleY : [ 0.8 , 1 ]
} ) ;
anim ( enterAnimOptions ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Animate out modal
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_animateOut" ,
value : function _animateOut ( ) {
var _this15 = this ;
// Animate overlay
anim ( {
targets : this . $overlay [ 0 ] ,
opacity : 0 ,
duration : this . options . outDuration ,
easing : 'easeOutQuart'
2018-01-28 23:22:43 +11:00
} ) ;
2019-06-07 02:11:04 +10:00
// Define modal animation options
var exitAnimOptions = {
targets : this . el ,
duration : this . options . outDuration ,
easing : 'easeOutCubic' ,
// Handle modal ready callback
complete : function ( ) {
_this15 . el . style . display = 'none' ;
_this15 . $overlay . remove ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Call onCloseEnd callback
if ( typeof _this15 . options . onCloseEnd === 'function' ) {
_this15 . options . onCloseEnd . call ( _this15 , _this15 . el ) ;
}
}
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Bottom sheet animation
if ( this . el . classList . contains ( 'bottom-sheet' ) ) {
$ . extend ( exitAnimOptions , {
bottom : '-100%' ,
opacity : 0
} ) ;
anim ( exitAnimOptions ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Normal modal animation
} else {
$ . extend ( exitAnimOptions , {
top : [ this . options . endingTop , this . options . startingTop ] ,
opacity : 0 ,
scaleX : 0.8 ,
scaleY : 0.8
} ) ;
anim ( exitAnimOptions ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Open Modal
* @ param { cash } [ $trigger ]
* /
} , {
key : "open" ,
value : function open ( $trigger ) {
if ( this . isOpen ) {
return ;
}
this . isOpen = true ;
Modal . _modalsOpen ++ ;
this . _nthModalOpened = Modal . _modalsOpen ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set Z-Index based on number of currently open modals
this . $overlay [ 0 ] . style . zIndex = 1000 + Modal . _modalsOpen * 2 ;
this . el . style . zIndex = 1000 + Modal . _modalsOpen * 2 + 1 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set opening trigger, undefined indicates modal was opened by javascript
this . _openingTrigger = ! ! $trigger ? $trigger [ 0 ] : undefined ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// onOpenStart callback
if ( typeof this . options . onOpenStart === 'function' ) {
this . options . onOpenStart . call ( this , this . el , this . _openingTrigger ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . options . preventScrolling ) {
document . body . style . overflow = 'hidden' ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . classList . add ( 'open' ) ;
this . el . insertAdjacentElement ( 'afterend' , this . $overlay [ 0 ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . options . dismissible ) {
this . _handleKeydownBound = this . _handleKeydown . bind ( this ) ;
this . _handleFocusBound = this . _handleFocus . bind ( this ) ;
document . addEventListener ( 'keydown' , this . _handleKeydownBound ) ;
document . addEventListener ( 'focus' , this . _handleFocusBound , true ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
anim . remove ( this . el ) ;
anim . remove ( this . $overlay [ 0 ] ) ;
this . _animateIn ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Focus modal
this . el . focus ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return this ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Close Modal
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "close" ,
value : function close ( ) {
if ( ! this . isOpen ) {
return ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . isOpen = false ;
Modal . _modalsOpen -- ;
this . _nthModalOpened = 0 ;
// Call onCloseStart callback
if ( typeof this . options . onCloseStart === 'function' ) {
this . options . onCloseStart . call ( this , this . el ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . el . classList . remove ( 'open' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Enable body scrolling only if there are no more modals open.
if ( Modal . _modalsOpen === 0 ) {
document . body . style . overflow = '' ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
if ( this . options . dismissible ) {
document . removeEventListener ( 'keydown' , this . _handleKeydownBound ) ;
document . removeEventListener ( 'focus' , this . _handleFocusBound , true ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
anim . remove ( this . el ) ;
anim . remove ( this . $overlay [ 0 ] ) ;
this . _animateOut ( ) ;
return this ;
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Modal . _ _proto _ _ || Object . getPrototypeOf ( Modal ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Modal ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Modal ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ static
* @ memberof Modal
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Modal . _modalsOpen = 0 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ static
* @ memberof Modal
* /
Modal . _count = 0 ;
M . Modal = Modal ;
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Modal , 'modal' , 'M_Modal' ) ;
}
} ) ( cash , M . anime ) ;
; ( function ( $ , anim ) {
2018-01-28 23:22:43 +11:00
'use strict' ;
var _defaults = {
2019-06-07 02:11:04 +10:00
inDuration : 275 ,
outDuration : 200 ,
onOpenStart : null ,
onOpenEnd : null ,
onCloseStart : null ,
onCloseEnd : null
2018-01-28 23:22:43 +11:00
} ;
/ * *
* @ class
*
* /
2019-06-07 02:11:04 +10:00
var Materialbox = function ( _Component4 ) {
_inherits ( Materialbox , _Component4 ) ;
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* Construct Materialbox instance
2018-01-28 23:22:43 +11:00
* @ constructor
2019-06-07 02:11:04 +10:00
* @ param { Element } el
2018-01-28 23:22:43 +11:00
* @ param { Object } options
* /
2019-06-07 02:11:04 +10:00
function Materialbox ( el , options ) {
_classCallCheck ( this , Materialbox ) ;
var _this16 = _possibleConstructorReturn ( this , ( Materialbox . _ _proto _ _ || Object . getPrototypeOf ( Materialbox ) ) . call ( this , Materialbox , el , options ) ) ;
_this16 . el . M _Materialbox = _this16 ;
/ * *
* Options for the modal
* @ member Materialbox # options
* @ prop { Number } [ inDuration = 275 ] - Length in ms of enter transition
* @ prop { Number } [ outDuration = 200 ] - Length in ms of exit transition
* @ prop { Function } onOpenStart - Callback function called before materialbox is opened
* @ prop { Function } onOpenEnd - Callback function called after materialbox is opened
* @ prop { Function } onCloseStart - Callback function called before materialbox is closed
* @ prop { Function } onCloseEnd - Callback function called after materialbox is closed
* /
_this16 . options = $ . extend ( { } , Materialbox . defaults , options ) ;
_this16 . overlayActive = false ;
_this16 . doneAnimating = true ;
_this16 . placeholder = $ ( '<div></div>' ) . addClass ( 'material-placeholder' ) ;
_this16 . originalWidth = 0 ;
_this16 . originalHeight = 0 ;
_this16 . originInlineStyles = _this16 . $el . attr ( 'style' ) ;
_this16 . caption = _this16 . el . getAttribute ( 'data-caption' ) || '' ;
// Wrap
_this16 . $el . before ( _this16 . placeholder ) ;
_this16 . placeholder . append ( _this16 . $el ) ;
_this16 . _setupEventHandlers ( ) ;
return _this16 ;
}
_createClass ( Materialbox , [ {
key : "destroy" ,
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . el . M _Materialbox = undefined ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Unwrap image
$ ( this . placeholder ) . after ( this . el ) . remove ( ) ;
this . $el . removeAttr ( 'style' ) ;
2018-01-28 23:22:43 +11:00
}
/ * *
2019-06-07 02:11:04 +10:00
* Setup Event Handlers
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleMaterialboxClickBound = this . _handleMaterialboxClick . bind ( this ) ;
this . el . addEventListener ( 'click' , this . _handleMaterialboxClickBound ) ;
}
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* Remove Event Handlers
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
this . el . removeEventListener ( 'click' , this . _handleMaterialboxClickBound ) ;
}
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* Handle Materialbox Click
* @ param { Event } e
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
} , {
key : "_handleMaterialboxClick" ,
value : function _handleMaterialboxClick ( e ) {
// If already modal, return to original
if ( this . doneAnimating === false || this . overlayActive && this . doneAnimating ) {
this . close ( ) ;
} else {
this . open ( ) ;
}
}
/ * *
* Handle Window Scroll
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleWindowScroll" ,
value : function _handleWindowScroll ( ) {
if ( this . overlayActive ) {
this . close ( ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Window Resize
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleWindowResize" ,
value : function _handleWindowResize ( ) {
if ( this . overlayActive ) {
this . close ( ) ;
}
}
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* Handle Window Resize
* @ param { Event } e
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
} , {
key : "_handleWindowEscape" ,
value : function _handleWindowEscape ( e ) {
// ESC key
if ( e . keyCode === 27 && this . doneAnimating && this . overlayActive ) {
this . close ( ) ;
}
2018-01-28 23:22:43 +11:00
}
/ * *
2019-06-07 02:11:04 +10:00
* Find ancestors with overflow : hidden ; and make visible
2018-01-28 23:22:43 +11:00
* /
} , {
2019-06-07 02:11:04 +10:00
key : "_makeAncestorsOverflowVisible" ,
value : function _makeAncestorsOverflowVisible ( ) {
this . ancestorsChanged = $ ( ) ;
var ancestor = this . placeholder [ 0 ] . parentNode ;
while ( ancestor !== null && ! $ ( ancestor ) . is ( document ) ) {
var curr = $ ( ancestor ) ;
if ( curr . css ( 'overflow' ) !== 'visible' ) {
curr . css ( 'overflow' , 'visible' ) ;
if ( this . ancestorsChanged === undefined ) {
this . ancestorsChanged = curr ;
} else {
this . ancestorsChanged = this . ancestorsChanged . add ( curr ) ;
}
}
ancestor = ancestor . parentNode ;
2018-01-28 23:22:43 +11:00
}
}
/ * *
2019-06-07 02:11:04 +10:00
* Animate image in
2018-01-28 23:22:43 +11:00
* /
} , {
2019-06-07 02:11:04 +10:00
key : "_animateImageIn" ,
value : function _animateImageIn ( ) {
var _this17 = this ;
var animOptions = {
targets : this . el ,
height : [ this . originalHeight , this . newHeight ] ,
width : [ this . originalWidth , this . newWidth ] ,
left : M . getDocumentScrollLeft ( ) + this . windowWidth / 2 - this . placeholder . offset ( ) . left - this . newWidth / 2 ,
top : M . getDocumentScrollTop ( ) + this . windowHeight / 2 - this . placeholder . offset ( ) . top - this . newHeight / 2 ,
duration : this . options . inDuration ,
easing : 'easeOutQuad' ,
complete : function ( ) {
_this17 . doneAnimating = true ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// onOpenEnd callback
if ( typeof _this17 . options . onOpenEnd === 'function' ) {
_this17 . options . onOpenEnd . call ( _this17 , _this17 . el ) ;
}
}
} ;
// Override max-width or max-height if needed
this . maxWidth = this . $el . css ( 'max-width' ) ;
this . maxHeight = this . $el . css ( 'max-height' ) ;
if ( this . maxWidth !== 'none' ) {
animOptions . maxWidth = this . newWidth ;
}
if ( this . maxHeight !== 'none' ) {
animOptions . maxHeight = this . newHeight ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
anim ( animOptions ) ;
2018-01-28 23:22:43 +11:00
}
/ * *
2019-06-07 02:11:04 +10:00
* Animate image out
2018-01-28 23:22:43 +11:00
* /
} , {
2019-06-07 02:11:04 +10:00
key : "_animateImageOut" ,
value : function _animateImageOut ( ) {
var _this18 = this ;
var animOptions = {
targets : this . el ,
width : this . originalWidth ,
height : this . originalHeight ,
left : 0 ,
top : 0 ,
duration : this . options . outDuration ,
easing : 'easeOutQuad' ,
complete : function ( ) {
_this18 . placeholder . css ( {
height : '' ,
width : '' ,
position : '' ,
top : '' ,
left : ''
} ) ;
// Revert to width or height attribute
if ( _this18 . attrWidth ) {
_this18 . $el . attr ( 'width' , _this18 . attrWidth ) ;
}
if ( _this18 . attrHeight ) {
_this18 . $el . attr ( 'height' , _this18 . attrHeight ) ;
}
_this18 . $el . removeAttr ( 'style' ) ;
_this18 . originInlineStyles && _this18 . $el . attr ( 'style' , _this18 . originInlineStyles ) ;
// Remove class
_this18 . $el . removeClass ( 'active' ) ;
_this18 . doneAnimating = true ;
// Remove overflow overrides on ancestors
if ( _this18 . ancestorsChanged . length ) {
_this18 . ancestorsChanged . css ( 'overflow' , '' ) ;
}
// onCloseEnd callback
if ( typeof _this18 . options . onCloseEnd === 'function' ) {
_this18 . options . onCloseEnd . call ( _this18 , _this18 . el ) ;
}
}
} ;
anim ( animOptions ) ;
}
/ * *
* Update open and close vars
* /
} , {
key : "_updateVars" ,
value : function _updateVars ( ) {
this . windowWidth = window . innerWidth ;
this . windowHeight = window . innerHeight ;
this . caption = this . el . getAttribute ( 'data-caption' ) || '' ;
}
/ * *
* Open Materialbox
* /
} , {
key : "open" ,
value : function open ( ) {
var _this19 = this ;
this . _updateVars ( ) ;
this . originalWidth = this . el . getBoundingClientRect ( ) . width ;
this . originalHeight = this . el . getBoundingClientRect ( ) . height ;
// Set states
this . doneAnimating = false ;
this . $el . addClass ( 'active' ) ;
this . overlayActive = true ;
// onOpenStart callback
if ( typeof this . options . onOpenStart === 'function' ) {
this . options . onOpenStart . call ( this , this . el ) ;
}
// Set positioning for placeholder
this . placeholder . css ( {
width : this . placeholder [ 0 ] . getBoundingClientRect ( ) . width + 'px' ,
height : this . placeholder [ 0 ] . getBoundingClientRect ( ) . height + 'px' ,
position : 'relative' ,
top : 0 ,
left : 0
} ) ;
this . _makeAncestorsOverflowVisible ( ) ;
// Set css on origin
this . $el . css ( {
position : 'absolute' ,
'z-index' : 1000 ,
'will-change' : 'left, top, width, height'
} ) ;
// Change from width or height attribute to css
this . attrWidth = this . $el . attr ( 'width' ) ;
this . attrHeight = this . $el . attr ( 'height' ) ;
if ( this . attrWidth ) {
this . $el . css ( 'width' , this . attrWidth + 'px' ) ;
this . $el . removeAttr ( 'width' ) ;
}
if ( this . attrHeight ) {
this . $el . css ( 'width' , this . attrHeight + 'px' ) ;
this . $el . removeAttr ( 'height' ) ;
}
// Add overlay
this . $overlay = $ ( '<div id="materialbox-overlay"></div>' ) . css ( {
opacity : 0
} ) . one ( 'click' , function ( ) {
if ( _this19 . doneAnimating ) {
_this19 . close ( ) ;
}
} ) ;
// Put before in origin image to preserve z-index layering.
this . $el . before ( this . $overlay ) ;
// Set dimensions if needed
var overlayOffset = this . $overlay [ 0 ] . getBoundingClientRect ( ) ;
this . $overlay . css ( {
width : this . windowWidth + 'px' ,
height : this . windowHeight + 'px' ,
left : - 1 * overlayOffset . left + 'px' ,
top : - 1 * overlayOffset . top + 'px'
} ) ;
anim . remove ( this . el ) ;
anim . remove ( this . $overlay [ 0 ] ) ;
// Animate Overlay
anim ( {
targets : this . $overlay [ 0 ] ,
opacity : 1 ,
duration : this . options . inDuration ,
easing : 'easeOutQuad'
} ) ;
// Add and animate caption if it exists
if ( this . caption !== '' ) {
if ( this . $photocaption ) {
anim . remove ( this . $photoCaption [ 0 ] ) ;
}
this . $photoCaption = $ ( '<div class="materialbox-caption"></div>' ) ;
this . $photoCaption . text ( this . caption ) ;
$ ( 'body' ) . append ( this . $photoCaption ) ;
this . $photoCaption . css ( { display : 'inline' } ) ;
anim ( {
targets : this . $photoCaption [ 0 ] ,
opacity : 1 ,
duration : this . options . inDuration ,
easing : 'easeOutQuad'
} ) ;
}
// Resize Image
var ratio = 0 ;
var widthPercent = this . originalWidth / this . windowWidth ;
var heightPercent = this . originalHeight / this . windowHeight ;
this . newWidth = 0 ;
this . newHeight = 0 ;
if ( widthPercent > heightPercent ) {
ratio = this . originalHeight / this . originalWidth ;
this . newWidth = this . windowWidth * 0.9 ;
this . newHeight = this . windowWidth * 0.9 * ratio ;
} else {
ratio = this . originalWidth / this . originalHeight ;
this . newWidth = this . windowHeight * 0.9 * ratio ;
this . newHeight = this . windowHeight * 0.9 ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . _animateImageIn ( ) ;
// Handle Exit triggers
this . _handleWindowScrollBound = this . _handleWindowScroll . bind ( this ) ;
this . _handleWindowResizeBound = this . _handleWindowResize . bind ( this ) ;
this . _handleWindowEscapeBound = this . _handleWindowEscape . bind ( this ) ;
window . addEventListener ( 'scroll' , this . _handleWindowScrollBound ) ;
window . addEventListener ( 'resize' , this . _handleWindowResizeBound ) ;
window . addEventListener ( 'keyup' , this . _handleWindowEscapeBound ) ;
2018-01-28 23:22:43 +11:00
}
/ * *
2019-06-07 02:11:04 +10:00
* Close Materialbox
2018-01-28 23:22:43 +11:00
* /
} , {
2019-06-07 02:11:04 +10:00
key : "close" ,
value : function close ( ) {
var _this20 = this ;
this . _updateVars ( ) ;
this . doneAnimating = false ;
// onCloseStart callback
if ( typeof this . options . onCloseStart === 'function' ) {
this . options . onCloseStart . call ( this , this . el ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
anim . remove ( this . el ) ;
anim . remove ( this . $overlay [ 0 ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . caption !== '' ) {
anim . remove ( this . $photoCaption [ 0 ] ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
// disable exit handlers
window . removeEventListener ( 'scroll' , this . _handleWindowScrollBound ) ;
window . removeEventListener ( 'resize' , this . _handleWindowResizeBound ) ;
window . removeEventListener ( 'keyup' , this . _handleWindowEscapeBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
anim ( {
targets : this . $overlay [ 0 ] ,
opacity : 0 ,
duration : this . options . outDuration ,
easing : 'easeOutQuad' ,
complete : function ( ) {
_this20 . overlayActive = false ;
_this20 . $overlay . remove ( ) ;
}
} ) ;
this . _animateImageOut ( ) ;
// Remove Caption + reset css settings on image
if ( this . caption !== '' ) {
anim ( {
targets : this . $photoCaption [ 0 ] ,
opacity : 0 ,
duration : this . options . outDuration ,
easing : 'easeOutQuad' ,
complete : function ( ) {
_this20 . $photoCaption . remove ( ) ;
}
} ) ;
2018-01-28 23:22:43 +11:00
}
}
2019-06-07 02:11:04 +10:00
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Materialbox . _ _proto _ _ || Object . getPrototypeOf ( Materialbox ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* Get Instance
2018-01-28 23:22:43 +11:00
* /
} , {
2019-06-07 02:11:04 +10:00
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Materialbox ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Materialbox ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . Materialbox = Materialbox ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Materialbox , 'materialbox' , 'M_Materialbox' ) ;
}
} ) ( cash , M . anime ) ;
; ( function ( $ ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
responsiveThreshold : 0 // breakpoint for swipeable
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var Parallax = function ( _Component5 ) {
_inherits ( Parallax , _Component5 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
function Parallax ( el , options ) {
_classCallCheck ( this , Parallax ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this21 = _possibleConstructorReturn ( this , ( Parallax . _ _proto _ _ || Object . getPrototypeOf ( Parallax ) ) . call ( this , Parallax , el , options ) ) ;
_this21 . el . M _Parallax = _this21 ;
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* Options for the Parallax
* @ member Parallax # options
* @ prop { Number } responsiveThreshold
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
_this21 . options = $ . extend ( { } , Parallax . defaults , options ) ;
_this21 . _enabled = window . innerWidth > _this21 . options . responsiveThreshold ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this21 . $img = _this21 . $el . find ( 'img' ) . first ( ) ;
_this21 . $img . each ( function ( ) {
var el = this ;
if ( el . complete ) $ ( el ) . trigger ( 'load' ) ;
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this21 . _updateParallax ( ) ;
_this21 . _setupEventHandlers ( ) ;
_this21 . _setupStyles ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Parallax . _parallaxes . push ( _this21 ) ;
return _this21 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_createClass ( Parallax , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* Teardown component
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
value : function destroy ( ) {
Parallax . _parallaxes . splice ( Parallax . _parallaxes . indexOf ( this ) , 1 ) ;
this . $img [ 0 ] . style . transform = '' ;
this . _removeEventHandlers ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . $el [ 0 ] . M _Parallax = undefined ;
}
2018-01-28 23:22:43 +11:00
} , {
2019-06-07 02:11:04 +10:00
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleImageLoadBound = this . _handleImageLoad . bind ( this ) ;
this . $img [ 0 ] . addEventListener ( 'load' , this . _handleImageLoadBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( Parallax . _parallaxes . length === 0 ) {
Parallax . _handleScrollThrottled = M . throttle ( Parallax . _handleScroll , 5 ) ;
window . addEventListener ( 'scroll' , Parallax . _handleScrollThrottled ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Parallax . _handleWindowResizeThrottled = M . throttle ( Parallax . _handleWindowResize , 5 ) ;
window . addEventListener ( 'resize' , Parallax . _handleWindowResizeThrottled ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
this . $img [ 0 ] . removeEventListener ( 'load' , this . _handleImageLoadBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( Parallax . _parallaxes . length === 0 ) {
window . removeEventListener ( 'scroll' , Parallax . _handleScrollThrottled ) ;
window . removeEventListener ( 'resize' , Parallax . _handleWindowResizeThrottled ) ;
}
}
} , {
key : "_setupStyles" ,
value : function _setupStyles ( ) {
this . $img [ 0 ] . style . opacity = 1 ;
}
} , {
key : "_handleImageLoad" ,
value : function _handleImageLoad ( ) {
this . _updateParallax ( ) ;
}
} , {
key : "_updateParallax" ,
value : function _updateParallax ( ) {
var containerHeight = this . $el . height ( ) > 0 ? this . el . parentNode . offsetHeight : 500 ;
var imgHeight = this . $img [ 0 ] . offsetHeight ;
var parallaxDist = imgHeight - containerHeight ;
var bottom = this . $el . offset ( ) . top + containerHeight ;
var top = this . $el . offset ( ) . top ;
var scrollTop = M . getDocumentScrollTop ( ) ;
var windowHeight = window . innerHeight ;
var windowBottom = scrollTop + windowHeight ;
var percentScrolled = ( windowBottom - top ) / ( containerHeight + windowHeight ) ;
var parallax = parallaxDist * percentScrolled ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( ! this . _enabled ) {
this . $img [ 0 ] . style . transform = '' ;
} else if ( bottom > scrollTop && top < scrollTop + windowHeight ) {
this . $img [ 0 ] . style . transform = "translate3D(-50%, " + parallax + "px, 0)" ;
}
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Parallax . _ _proto _ _ || Object . getPrototypeOf ( Parallax ) , "init" , this ) . call ( this , this , els , options ) ;
2018-01-28 23:22:43 +11:00
}
/ * *
2019-06-07 02:11:04 +10:00
* Get Instance
2018-01-28 23:22:43 +11:00
* /
} , {
2019-06-07 02:11:04 +10:00
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Parallax ;
}
} , {
key : "_handleScroll" ,
value : function _handleScroll ( ) {
for ( var i = 0 ; i < Parallax . _parallaxes . length ; i ++ ) {
var parallaxInstance = Parallax . _parallaxes [ i ] ;
parallaxInstance . _updateParallax . call ( parallaxInstance ) ;
2018-01-28 23:22:43 +11:00
}
}
2019-06-07 02:11:04 +10:00
} , {
key : "_handleWindowResize" ,
value : function _handleWindowResize ( ) {
for ( var i = 0 ; i < Parallax . _parallaxes . length ; i ++ ) {
var parallaxInstance = Parallax . _parallaxes [ i ] ;
parallaxInstance . _enabled = window . innerWidth > parallaxInstance . options . responsiveThreshold ;
}
2018-01-28 23:22:43 +11:00
}
} , {
2019-06-07 02:11:04 +10:00
key : "defaults" ,
2018-01-28 23:22:43 +11:00
get : function ( ) {
return _defaults ;
}
} ] ) ;
2019-06-07 02:11:04 +10:00
return Parallax ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
/ * *
* @ static
2019-06-07 02:11:04 +10:00
* @ memberof Parallax
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
Parallax . _parallaxes = [ ] ;
M . Parallax = Parallax ;
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Parallax , 'parallax' , 'M_Parallax' ) ;
}
} ) ( cash ) ;
; ( function ( $ , anim ) {
'use strict' ;
var _defaults = {
duration : 300 ,
onShow : null ,
swipeable : false ,
responsiveThreshold : Infinity // breakpoint for swipeable
} ;
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* @ class
*
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
var Tabs = function ( _Component6 ) {
_inherits ( Tabs , _Component6 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct Tabs instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Tabs ( el , options ) {
_classCallCheck ( this , Tabs ) ;
var _this22 = _possibleConstructorReturn ( this , ( Tabs . _ _proto _ _ || Object . getPrototypeOf ( Tabs ) ) . call ( this , Tabs , el , options ) ) ;
_this22 . el . M _Tabs = _this22 ;
/ * *
* Options for the Tabs
* @ member Tabs # options
* @ prop { Number } duration
* @ prop { Function } onShow
* @ prop { Boolean } swipeable
* @ prop { Number } responsiveThreshold
* /
_this22 . options = $ . extend ( { } , Tabs . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Setup
_this22 . $tabLinks = _this22 . $el . children ( 'li.tab' ) . children ( 'a' ) ;
_this22 . index = 0 ;
_this22 . _setupActiveTabLink ( ) ;
// Setup tabs content
if ( _this22 . options . swipeable ) {
_this22 . _setupSwipeableTabs ( ) ;
2018-01-28 23:22:43 +11:00
} else {
2019-06-07 02:11:04 +10:00
_this22 . _setupNormalTabs ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
// Setup tabs indicator after content to ensure accurate widths
_this22 . _setTabsAndTabWidth ( ) ;
_this22 . _createIndicator ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this22 . _setupEventHandlers ( ) ;
return _this22 ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
_createClass ( Tabs , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . _indicator . parentNode . removeChild ( this . _indicator ) ;
if ( this . options . swipeable ) {
this . _teardownSwipeableTabs ( ) ;
} else {
this . _teardownNormalTabs ( ) ;
}
this . $el [ 0 ] . M _Tabs = undefined ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleWindowResizeBound = this . _handleWindowResize . bind ( this ) ;
window . addEventListener ( 'resize' , this . _handleWindowResizeBound ) ;
this . _handleTabClickBound = this . _handleTabClick . bind ( this ) ;
this . el . addEventListener ( 'click' , this . _handleTabClickBound ) ;
}
/ * *
* Remove Event Handlers
* /
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
window . removeEventListener ( 'resize' , this . _handleWindowResizeBound ) ;
this . el . removeEventListener ( 'click' , this . _handleTabClickBound ) ;
}
/ * *
* Handle window Resize
* /
} , {
key : "_handleWindowResize" ,
value : function _handleWindowResize ( ) {
this . _setTabsAndTabWidth ( ) ;
if ( this . tabWidth !== 0 && this . tabsWidth !== 0 ) {
this . _indicator . style . left = this . _calcLeftPos ( this . $activeTabLink ) + 'px' ;
this . _indicator . style . right = this . _calcRightPos ( this . $activeTabLink ) + 'px' ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle tab click
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleTabClick" ,
value : function _handleTabClick ( e ) {
var _this23 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var tab = $ ( e . target ) . closest ( 'li.tab' ) ;
var tabLink = $ ( e . target ) . closest ( 'a' ) ;
// Handle click on tab link only
if ( ! tabLink . length || ! tabLink . parent ( ) . hasClass ( 'tab' ) ) {
return ;
}
if ( tab . hasClass ( 'disabled' ) ) {
e . preventDefault ( ) ;
return ;
}
// Act as regular link if target attribute is specified.
if ( ! ! tabLink . attr ( 'target' ) ) {
return ;
}
// Make the old tab inactive.
this . $activeTabLink . removeClass ( 'active' ) ;
var $oldContent = this . $content ;
// Update the variables with the new link and content
this . $activeTabLink = tabLink ;
this . $content = $ ( M . escapeHash ( tabLink [ 0 ] . hash ) ) ;
this . $tabLinks = this . $el . children ( 'li.tab' ) . children ( 'a' ) ;
// Make the tab active.
this . $activeTabLink . addClass ( 'active' ) ;
var prevIndex = this . index ;
this . index = Math . max ( this . $tabLinks . index ( tabLink ) , 0 ) ;
// Swap content
if ( this . options . swipeable ) {
if ( this . _tabsCarousel ) {
this . _tabsCarousel . set ( this . index , function ( ) {
if ( typeof _this23 . options . onShow === 'function' ) {
_this23 . options . onShow . call ( _this23 , _this23 . $content [ 0 ] ) ;
}
} ) ;
}
} else {
if ( this . $content . length ) {
this . $content [ 0 ] . style . display = 'block' ;
this . $content . addClass ( 'active' ) ;
if ( typeof this . options . onShow === 'function' ) {
this . options . onShow . call ( this , this . $content [ 0 ] ) ;
}
if ( $oldContent . length && ! $oldContent . is ( this . $content ) ) {
$oldContent [ 0 ] . style . display = 'none' ;
$oldContent . removeClass ( 'active' ) ;
2018-01-28 23:22:43 +11:00
}
}
}
2019-06-07 02:11:04 +10:00
// Update widths after content is swapped (scrollbar bugfix)
this . _setTabsAndTabWidth ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Update indicator
this . _animateIndicator ( prevIndex ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Prevent the anchor's default click action
e . preventDefault ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Generate elements for tab indicator .
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_createIndicator" ,
value : function _createIndicator ( ) {
var _this24 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var indicator = document . createElement ( 'li' ) ;
indicator . classList . add ( 'indicator' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . appendChild ( indicator ) ;
this . _indicator = indicator ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
setTimeout ( function ( ) {
_this24 . _indicator . style . left = _this24 . _calcLeftPos ( _this24 . $activeTabLink ) + 'px' ;
_this24 . _indicator . style . right = _this24 . _calcRightPos ( _this24 . $activeTabLink ) + 'px' ;
} , 0 ) ;
}
/ * *
* Setup first active tab link .
* /
} , {
key : "_setupActiveTabLink" ,
value : function _setupActiveTabLink ( ) {
// If the location.hash matches one of the links, use that as the active tab.
this . $activeTabLink = $ ( this . $tabLinks . filter ( '[href="' + location . hash + '"]' ) ) ;
// If no match is found, use the first link or any with class 'active' as the initial active tab.
if ( this . $activeTabLink . length === 0 ) {
this . $activeTabLink = this . $el . children ( 'li.tab' ) . children ( 'a.active' ) . first ( ) ;
}
if ( this . $activeTabLink . length === 0 ) {
this . $activeTabLink = this . $el . children ( 'li.tab' ) . children ( 'a' ) . first ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . $tabLinks . removeClass ( 'active' ) ;
this . $activeTabLink [ 0 ] . classList . add ( 'active' ) ;
this . index = Math . max ( this . $tabLinks . index ( this . $activeTabLink ) , 0 ) ;
if ( this . $activeTabLink . length ) {
this . $content = $ ( M . escapeHash ( this . $activeTabLink [ 0 ] . hash ) ) ;
this . $content . addClass ( 'active' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup swipeable tabs
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupSwipeableTabs" ,
value : function _setupSwipeableTabs ( ) {
var _this25 = this ;
// Change swipeable according to responsive threshold
if ( window . innerWidth > this . options . responsiveThreshold ) {
this . options . swipeable = false ;
}
var $tabsContent = $ ( ) ;
this . $tabLinks . each ( function ( link ) {
var $currContent = $ ( M . escapeHash ( link . hash ) ) ;
$currContent . addClass ( 'carousel-item' ) ;
$tabsContent = $tabsContent . add ( $currContent ) ;
2018-01-28 23:22:43 +11:00
} ) ;
2019-06-07 02:11:04 +10:00
var $tabsWrapper = $ ( '<div class="tabs-content carousel carousel-slider"></div>' ) ;
$tabsContent . first ( ) . before ( $tabsWrapper ) ;
$tabsWrapper . append ( $tabsContent ) ;
$tabsContent [ 0 ] . style . display = '' ;
// Keep active tab index to set initial carousel slide
var activeTabIndex = this . $activeTabLink . closest ( '.tab' ) . index ( ) ;
this . _tabsCarousel = M . Carousel . init ( $tabsWrapper [ 0 ] , {
fullWidth : true ,
noWrap : true ,
onCycleTo : function ( item ) {
var prevIndex = _this25 . index ;
_this25 . index = $ ( item ) . index ( ) ;
_this25 . $activeTabLink . removeClass ( 'active' ) ;
_this25 . $activeTabLink = _this25 . $tabLinks . eq ( _this25 . index ) ;
_this25 . $activeTabLink . addClass ( 'active' ) ;
_this25 . _animateIndicator ( prevIndex ) ;
if ( typeof _this25 . options . onShow === 'function' ) {
_this25 . options . onShow . call ( _this25 , _this25 . $content [ 0 ] ) ;
}
2018-01-28 23:22:43 +11:00
}
} ) ;
2019-06-07 02:11:04 +10:00
// Set initial carousel slide to active tab
this . _tabsCarousel . set ( activeTabIndex ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown normal tabs .
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_teardownSwipeableTabs" ,
value : function _teardownSwipeableTabs ( ) {
var $tabsWrapper = this . _tabsCarousel . $el ;
this . _tabsCarousel . destroy ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Unwrap
$tabsWrapper . after ( $tabsWrapper . children ( ) ) ;
$tabsWrapper . remove ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup normal tabs .
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupNormalTabs" ,
value : function _setupNormalTabs ( ) {
// Hide Tabs Content
this . $tabLinks . not ( this . $activeTabLink ) . each ( function ( link ) {
if ( ! ! link . hash ) {
var $currContent = $ ( M . escapeHash ( link . hash ) ) ;
if ( $currContent . length ) {
$currContent [ 0 ] . style . display = 'none' ;
}
2018-01-28 23:22:43 +11:00
}
} ) ;
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown normal tabs .
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_teardownNormalTabs" ,
value : function _teardownNormalTabs ( ) {
// show Tabs Content
this . $tabLinks . each ( function ( link ) {
if ( ! ! link . hash ) {
var $currContent = $ ( M . escapeHash ( link . hash ) ) ;
if ( $currContent . length ) {
$currContent [ 0 ] . style . display = '' ;
2018-01-28 23:22:43 +11:00
}
}
} ) ;
}
2019-06-07 02:11:04 +10:00
/ * *
* set tabs and tab width
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setTabsAndTabWidth" ,
value : function _setTabsAndTabWidth ( ) {
this . tabsWidth = this . $el . width ( ) ;
this . tabWidth = Math . max ( this . tabsWidth , this . el . scrollWidth ) / this . $tabLinks . length ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Finds right attribute for indicator based on active tab .
* @ param { cash } el
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_calcRightPos" ,
value : function _calcRightPos ( el ) {
return Math . ceil ( this . tabsWidth - el . position ( ) . left - el [ 0 ] . getBoundingClientRect ( ) . width ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Finds left attribute for indicator based on active tab .
* @ param { cash } el
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_calcLeftPos" ,
value : function _calcLeftPos ( el ) {
return Math . floor ( el . position ( ) . left ) ;
}
} , {
key : "updateTabIndicator" ,
value : function updateTabIndicator ( ) {
this . _setTabsAndTabWidth ( ) ;
this . _animateIndicator ( this . index ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Animates Indicator to active tab .
* @ param { Number } prevIndex
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_animateIndicator" ,
value : function _animateIndicator ( prevIndex ) {
var leftDelay = 0 ,
rightDelay = 0 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . index - prevIndex >= 0 ) {
leftDelay = 90 ;
} else {
rightDelay = 90 ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
// Animate
var animOptions = {
targets : this . _indicator ,
left : {
value : this . _calcLeftPos ( this . $activeTabLink ) ,
delay : leftDelay
} ,
right : {
value : this . _calcRightPos ( this . $activeTabLink ) ,
delay : rightDelay
} ,
duration : this . options . duration ,
easing : 'easeOutQuad'
} ;
anim . remove ( this . _indicator ) ;
anim ( animOptions ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Select tab .
* @ param { String } tabId
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "select" ,
value : function select ( tabId ) {
var tab = this . $tabLinks . filter ( '[href="#' + tabId + '"]' ) ;
if ( tab . length ) {
tab . trigger ( 'click' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Tabs . _ _proto _ _ || Object . getPrototypeOf ( Tabs ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Tabs ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Tabs ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . Tabs = Tabs ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Tabs , 'tabs' , 'M_Tabs' ) ;
}
} ) ( cash , M . anime ) ;
; ( function ( $ , anim ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
exitDelay : 200 ,
enterDelay : 0 ,
html : null ,
margin : 5 ,
inDuration : 250 ,
outDuration : 200 ,
position : 'bottom' ,
transitionMovement : 10
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ class
*
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var Tooltip = function ( _Component7 ) {
_inherits ( Tooltip , _Component7 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct Tooltip instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Tooltip ( el , options ) {
_classCallCheck ( this , Tooltip ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this26 = _possibleConstructorReturn ( this , ( Tooltip . _ _proto _ _ || Object . getPrototypeOf ( Tooltip ) ) . call ( this , Tooltip , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this26 . el . M _Tooltip = _this26 ;
_this26 . options = $ . extend ( { } , Tooltip . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this26 . isOpen = false ;
_this26 . isHovered = false ;
_this26 . isFocused = false ;
_this26 . _appendTooltipEl ( ) ;
_this26 . _setupEventHandlers ( ) ;
return _this26 ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
_createClass ( Tooltip , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
$ ( this . tooltipEl ) . remove ( ) ;
this . _removeEventHandlers ( ) ;
this . el . M _Tooltip = undefined ;
}
} , {
key : "_appendTooltipEl" ,
value : function _appendTooltipEl ( ) {
var tooltipEl = document . createElement ( 'div' ) ;
tooltipEl . classList . add ( 'material-tooltip' ) ;
this . tooltipEl = tooltipEl ;
var tooltipContentEl = document . createElement ( 'div' ) ;
tooltipContentEl . classList . add ( 'tooltip-content' ) ;
tooltipContentEl . innerHTML = this . options . html ;
tooltipEl . appendChild ( tooltipContentEl ) ;
document . body . appendChild ( tooltipEl ) ;
}
} , {
key : "_updateTooltipContent" ,
value : function _updateTooltipContent ( ) {
this . tooltipEl . querySelector ( '.tooltip-content' ) . innerHTML = this . options . html ;
}
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleMouseEnterBound = this . _handleMouseEnter . bind ( this ) ;
this . _handleMouseLeaveBound = this . _handleMouseLeave . bind ( this ) ;
this . _handleFocusBound = this . _handleFocus . bind ( this ) ;
this . _handleBlurBound = this . _handleBlur . bind ( this ) ;
this . el . addEventListener ( 'mouseenter' , this . _handleMouseEnterBound ) ;
this . el . addEventListener ( 'mouseleave' , this . _handleMouseLeaveBound ) ;
this . el . addEventListener ( 'focus' , this . _handleFocusBound , true ) ;
this . el . addEventListener ( 'blur' , this . _handleBlurBound , true ) ;
}
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
this . el . removeEventListener ( 'mouseenter' , this . _handleMouseEnterBound ) ;
this . el . removeEventListener ( 'mouseleave' , this . _handleMouseLeaveBound ) ;
this . el . removeEventListener ( 'focus' , this . _handleFocusBound , true ) ;
this . el . removeEventListener ( 'blur' , this . _handleBlurBound , true ) ;
}
} , {
key : "open" ,
value : function open ( isManual ) {
if ( this . isOpen ) {
return ;
}
isManual = isManual === undefined ? true : undefined ; // Default value true
this . isOpen = true ;
// Update tooltip content with HTML attribute options
this . options = $ . extend ( { } , this . options , this . _getAttributeOptions ( ) ) ;
this . _updateTooltipContent ( ) ;
this . _setEnterDelayTimeout ( isManual ) ;
}
} , {
key : "close" ,
value : function close ( ) {
if ( ! this . isOpen ) {
return ;
}
this . isHovered = false ;
this . isFocused = false ;
this . isOpen = false ;
this . _setExitDelayTimeout ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Create timeout which delays when the tooltip closes
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setExitDelayTimeout" ,
value : function _setExitDelayTimeout ( ) {
var _this27 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
clearTimeout ( this . _exitDelayTimeout ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . _exitDelayTimeout = setTimeout ( function ( ) {
if ( _this27 . isHovered || _this27 . isFocused ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this27 . _animateOut ( ) ;
} , this . options . exitDelay ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Create timeout which delays when the toast closes
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setEnterDelayTimeout" ,
value : function _setEnterDelayTimeout ( isManual ) {
var _this28 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
clearTimeout ( this . _enterDelayTimeout ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . _enterDelayTimeout = setTimeout ( function ( ) {
if ( ! _this28 . isHovered && ! _this28 . isFocused && ! isManual ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this28 . _animateIn ( ) ;
} , this . options . enterDelay ) ;
}
} , {
key : "_positionTooltip" ,
value : function _positionTooltip ( ) {
var origin = this . el ,
tooltip = this . tooltipEl ,
originHeight = origin . offsetHeight ,
originWidth = origin . offsetWidth ,
tooltipHeight = tooltip . offsetHeight ,
tooltipWidth = tooltip . offsetWidth ,
newCoordinates = void 0 ,
margin = this . options . margin ,
targetTop = void 0 ,
targetLeft = void 0 ;
this . xMovement = 0 , this . yMovement = 0 ;
targetTop = origin . getBoundingClientRect ( ) . top + M . getDocumentScrollTop ( ) ;
targetLeft = origin . getBoundingClientRect ( ) . left + M . getDocumentScrollLeft ( ) ;
if ( this . options . position === 'top' ) {
targetTop += - tooltipHeight - margin ;
targetLeft += originWidth / 2 - tooltipWidth / 2 ;
this . yMovement = - this . options . transitionMovement ;
} else if ( this . options . position === 'right' ) {
targetTop += originHeight / 2 - tooltipHeight / 2 ;
targetLeft += originWidth + margin ;
this . xMovement = this . options . transitionMovement ;
} else if ( this . options . position === 'left' ) {
targetTop += originHeight / 2 - tooltipHeight / 2 ;
targetLeft += - tooltipWidth - margin ;
this . xMovement = - this . options . transitionMovement ;
} else {
targetTop += originHeight + margin ;
targetLeft += originWidth / 2 - tooltipWidth / 2 ;
this . yMovement = this . options . transitionMovement ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
newCoordinates = this . _repositionWithinScreen ( targetLeft , targetTop , tooltipWidth , tooltipHeight ) ;
$ ( tooltip ) . css ( {
top : newCoordinates . y + 'px' ,
left : newCoordinates . x + 'px'
} ) ;
}
} , {
key : "_repositionWithinScreen" ,
value : function _repositionWithinScreen ( x , y , width , height ) {
var scrollLeft = M . getDocumentScrollLeft ( ) ;
var scrollTop = M . getDocumentScrollTop ( ) ;
var newX = x - scrollLeft ;
var newY = y - scrollTop ;
var bounding = {
left : newX ,
top : newY ,
width : width ,
height : height
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var offset = this . options . margin + this . options . transitionMovement ;
var edges = M . checkWithinContainer ( document . body , bounding , offset ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( edges . left ) {
newX = offset ;
} else if ( edges . right ) {
newX -= newX + width - window . innerWidth ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( edges . top ) {
newY = offset ;
} else if ( edges . bottom ) {
newY -= newY + height - window . innerHeight ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return {
x : newX + scrollLeft ,
y : newY + scrollTop
} ;
}
} , {
key : "_animateIn" ,
value : function _animateIn ( ) {
this . _positionTooltip ( ) ;
this . tooltipEl . style . visibility = 'visible' ;
anim . remove ( this . tooltipEl ) ;
anim ( {
targets : this . tooltipEl ,
opacity : 1 ,
translateX : this . xMovement ,
translateY : this . yMovement ,
duration : this . options . inDuration ,
easing : 'easeOutCubic'
} ) ;
}
} , {
key : "_animateOut" ,
value : function _animateOut ( ) {
anim . remove ( this . tooltipEl ) ;
anim ( {
targets : this . tooltipEl ,
opacity : 0 ,
translateX : 0 ,
translateY : 0 ,
duration : this . options . outDuration ,
easing : 'easeOutCubic'
} ) ;
}
} , {
key : "_handleMouseEnter" ,
value : function _handleMouseEnter ( ) {
this . isHovered = true ;
this . isFocused = false ; // Allows close of tooltip when opened by focus.
this . open ( false ) ;
}
} , {
key : "_handleMouseLeave" ,
value : function _handleMouseLeave ( ) {
this . isHovered = false ;
this . isFocused = false ; // Allows close of tooltip when opened by focus.
this . close ( ) ;
}
} , {
key : "_handleFocus" ,
value : function _handleFocus ( ) {
if ( M . tabPressed ) {
this . isFocused = true ;
this . open ( false ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
} , {
key : "_handleBlur" ,
value : function _handleBlur ( ) {
this . isFocused = false ;
this . close ( ) ;
}
} , {
key : "_getAttributeOptions" ,
value : function _getAttributeOptions ( ) {
var attributeOptions = { } ;
var tooltipTextOption = this . el . getAttribute ( 'data-tooltip' ) ;
var positionOption = this . el . getAttribute ( 'data-position' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( tooltipTextOption ) {
attributeOptions . html = tooltipTextOption ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( positionOption ) {
attributeOptions . position = positionOption ;
}
return attributeOptions ;
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Tooltip . _ _proto _ _ || Object . getPrototypeOf ( Tooltip ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Tooltip ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Tooltip ;
} ( Component ) ;
M . Tooltip = Tooltip ;
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Tooltip , 'tooltip' , 'M_Tooltip' ) ;
}
} ) ( cash , M . anime ) ;
2018-01-28 23:22:43 +11:00
; / * !
* Waves v0 . 6.4
* http : //fian.my.id/Waves
*
* Copyright 2014 Alfiana E . Sibuea and other contributors
* Released under the MIT license
* https : //github.com/fians/Waves/blob/master/LICENSE
* /
2019-06-07 02:11:04 +10:00
; ( function ( window ) {
2018-01-28 23:22:43 +11:00
'use strict' ;
var Waves = Waves || { } ;
var $$ = document . querySelectorAll . bind ( document ) ;
// Find exact position of element
function isWindow ( obj ) {
return obj !== null && obj === obj . window ;
}
function getWindow ( elem ) {
return isWindow ( elem ) ? elem : elem . nodeType === 9 && elem . defaultView ;
}
function offset ( elem ) {
var docElem ,
2019-06-07 02:11:04 +10:00
win ,
box = { top : 0 , left : 0 } ,
doc = elem && elem . ownerDocument ;
2018-01-28 23:22:43 +11:00
docElem = doc . documentElement ;
if ( typeof elem . getBoundingClientRect !== typeof undefined ) {
box = elem . getBoundingClientRect ( ) ;
}
win = getWindow ( doc ) ;
return {
top : box . top + win . pageYOffset - docElem . clientTop ,
left : box . left + win . pageXOffset - docElem . clientLeft
} ;
}
function convertStyle ( obj ) {
var style = '' ;
for ( var a in obj ) {
if ( obj . hasOwnProperty ( a ) ) {
style += a + ':' + obj [ a ] + ';' ;
}
}
return style ;
}
var Effect = {
// Effect delay
duration : 750 ,
show : function ( e , element ) {
// Disable right click
if ( e . button === 2 ) {
return false ;
}
var el = element || this ;
// Create ripple
var ripple = document . createElement ( 'div' ) ;
ripple . className = 'waves-ripple' ;
el . appendChild ( ripple ) ;
// Get click coordinate and element witdh
var pos = offset ( el ) ;
var relativeY = e . pageY - pos . top ;
var relativeX = e . pageX - pos . left ;
var scale = 'scale(' + el . clientWidth / 100 * 10 + ')' ;
// Support for touch devices
if ( 'touches' in e ) {
relativeY = e . touches [ 0 ] . pageY - pos . top ;
relativeX = e . touches [ 0 ] . pageX - pos . left ;
}
// Attach data to element
ripple . setAttribute ( 'data-hold' , Date . now ( ) ) ;
ripple . setAttribute ( 'data-scale' , scale ) ;
ripple . setAttribute ( 'data-x' , relativeX ) ;
ripple . setAttribute ( 'data-y' , relativeY ) ;
// Set ripple position
var rippleStyle = {
'top' : relativeY + 'px' ,
'left' : relativeX + 'px'
} ;
ripple . className = ripple . className + ' waves-notransition' ;
ripple . setAttribute ( 'style' , convertStyle ( rippleStyle ) ) ;
ripple . className = ripple . className . replace ( 'waves-notransition' , '' ) ;
// Scale the ripple
rippleStyle [ '-webkit-transform' ] = scale ;
rippleStyle [ '-moz-transform' ] = scale ;
rippleStyle [ '-ms-transform' ] = scale ;
rippleStyle [ '-o-transform' ] = scale ;
rippleStyle . transform = scale ;
rippleStyle . opacity = '1' ;
rippleStyle [ '-webkit-transition-duration' ] = Effect . duration + 'ms' ;
rippleStyle [ '-moz-transition-duration' ] = Effect . duration + 'ms' ;
rippleStyle [ '-o-transition-duration' ] = Effect . duration + 'ms' ;
rippleStyle [ 'transition-duration' ] = Effect . duration + 'ms' ;
rippleStyle [ '-webkit-transition-timing-function' ] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)' ;
rippleStyle [ '-moz-transition-timing-function' ] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)' ;
rippleStyle [ '-o-transition-timing-function' ] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)' ;
rippleStyle [ 'transition-timing-function' ] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)' ;
ripple . setAttribute ( 'style' , convertStyle ( rippleStyle ) ) ;
} ,
hide : function ( e ) {
TouchHandler . touchup ( e ) ;
var el = this ;
var width = el . clientWidth * 1.4 ;
// Get first ripple
var ripple = null ;
var ripples = el . getElementsByClassName ( 'waves-ripple' ) ;
if ( ripples . length > 0 ) {
ripple = ripples [ ripples . length - 1 ] ;
} else {
return false ;
}
var relativeX = ripple . getAttribute ( 'data-x' ) ;
var relativeY = ripple . getAttribute ( 'data-y' ) ;
var scale = ripple . getAttribute ( 'data-scale' ) ;
// Get delay beetween mousedown and mouse leave
var diff = Date . now ( ) - Number ( ripple . getAttribute ( 'data-hold' ) ) ;
var delay = 350 - diff ;
if ( delay < 0 ) {
delay = 0 ;
}
// Fade out ripple after delay
setTimeout ( function ( ) {
var style = {
'top' : relativeY + 'px' ,
'left' : relativeX + 'px' ,
'opacity' : '0' ,
// Duration
'-webkit-transition-duration' : Effect . duration + 'ms' ,
'-moz-transition-duration' : Effect . duration + 'ms' ,
'-o-transition-duration' : Effect . duration + 'ms' ,
'transition-duration' : Effect . duration + 'ms' ,
'-webkit-transform' : scale ,
'-moz-transform' : scale ,
'-ms-transform' : scale ,
'-o-transform' : scale ,
'transform' : scale
} ;
ripple . setAttribute ( 'style' , convertStyle ( style ) ) ;
setTimeout ( function ( ) {
try {
el . removeChild ( ripple ) ;
} catch ( e ) {
return false ;
}
} , Effect . duration ) ;
} , delay ) ;
} ,
// Little hack to make <input> can perform waves effect
wrapInput : function ( elements ) {
for ( var a = 0 ; a < elements . length ; a ++ ) {
var el = elements [ a ] ;
if ( el . tagName . toLowerCase ( ) === 'input' ) {
var parent = el . parentNode ;
// If input already have parent just pass through
if ( parent . tagName . toLowerCase ( ) === 'i' && parent . className . indexOf ( 'waves-effect' ) !== - 1 ) {
continue ;
}
// Put element class and style to the specified parent
var wrapper = document . createElement ( 'i' ) ;
wrapper . className = el . className + ' waves-input-wrapper' ;
var elementStyle = el . getAttribute ( 'style' ) ;
if ( ! elementStyle ) {
elementStyle = '' ;
}
wrapper . setAttribute ( 'style' , elementStyle ) ;
el . className = 'waves-button-input' ;
el . removeAttribute ( 'style' ) ;
// Put element as child
parent . replaceChild ( wrapper , el ) ;
wrapper . appendChild ( el ) ;
}
}
}
} ;
/ * *
* Disable mousedown event for 500 ms during and after touch
* /
var TouchHandler = {
/ * u s e s a n i n t e g e r r a t h e r t h a n b o o l s o t h e r e ' s n o i s s u e s w i t h
* needing to clear timeouts if another touch event occurred
* within the 500 ms . Cannot mouseup between touchstart and
* touchend , nor in the 500 ms after touchend . * /
touches : 0 ,
allowEvent : function ( e ) {
var allow = true ;
if ( e . type === 'touchstart' ) {
TouchHandler . touches += 1 ; //push
} else if ( e . type === 'touchend' || e . type === 'touchcancel' ) {
setTimeout ( function ( ) {
if ( TouchHandler . touches > 0 ) {
TouchHandler . touches -= 1 ; //pop after 500ms
}
} , 500 ) ;
} else if ( e . type === 'mousedown' && TouchHandler . touches > 0 ) {
allow = false ;
}
return allow ;
} ,
touchup : function ( e ) {
TouchHandler . allowEvent ( e ) ;
}
} ;
/ * *
* Delegated click handler for . waves - effect element .
* returns null when . waves - effect element not in "click tree"
* /
function getWavesEffectElement ( e ) {
if ( TouchHandler . allowEvent ( e ) === false ) {
return null ;
}
var element = null ;
var target = e . target || e . srcElement ;
while ( target . parentNode !== null ) {
if ( ! ( target instanceof SVGElement ) && target . className . indexOf ( 'waves-effect' ) !== - 1 ) {
element = target ;
break ;
}
target = target . parentNode ;
}
return element ;
}
/ * *
* Bubble the click and show effect if . waves - effect elem was found
* /
function showEffect ( e ) {
var element = getWavesEffectElement ( e ) ;
if ( element !== null ) {
Effect . show ( e , element ) ;
if ( 'ontouchstart' in window ) {
element . addEventListener ( 'touchend' , Effect . hide , false ) ;
element . addEventListener ( 'touchcancel' , Effect . hide , false ) ;
}
element . addEventListener ( 'mouseup' , Effect . hide , false ) ;
element . addEventListener ( 'mouseleave' , Effect . hide , false ) ;
element . addEventListener ( 'dragend' , Effect . hide , false ) ;
}
}
Waves . displayEffect = function ( options ) {
options = options || { } ;
if ( 'duration' in options ) {
Effect . duration = options . duration ;
}
//Wrap input inside <i> tag
Effect . wrapInput ( $$ ( '.waves-effect' ) ) ;
if ( 'ontouchstart' in window ) {
document . body . addEventListener ( 'touchstart' , showEffect , false ) ;
}
document . body . addEventListener ( 'mousedown' , showEffect , false ) ;
} ;
/ * *
* Attach Waves to an input element ( or any element which doesn ' t
* bubble mouseup / mousedown events ) .
* Intended to be used with dynamically loaded forms / inputs , or
* where the user doesn ' t want a delegated click handler .
* /
Waves . attach = function ( element ) {
//FUTURE: automatically add waves classes and allow users
// to specify them with an options param? Eg. light/classic/button
if ( element . tagName . toLowerCase ( ) === 'input' ) {
Effect . wrapInput ( [ element ] ) ;
element = element . parentNode ;
}
if ( 'ontouchstart' in window ) {
element . addEventListener ( 'touchstart' , showEffect , false ) ;
}
element . addEventListener ( 'mousedown' , showEffect , false ) ;
} ;
window . Waves = Waves ;
document . addEventListener ( 'DOMContentLoaded' , function ( ) {
Waves . displayEffect ( ) ;
} , false ) ;
} ) ( window ) ;
2019-06-07 02:11:04 +10:00
; ( function ( $ , anim ) {
2018-01-28 23:22:43 +11:00
'use strict' ;
var _defaults = {
2019-06-07 02:11:04 +10:00
html : '' ,
displayLength : 4000 ,
2018-01-28 23:22:43 +11:00
inDuration : 300 ,
outDuration : 375 ,
2019-06-07 02:11:04 +10:00
classes : '' ,
completeCallback : null ,
2018-01-28 23:22:43 +11:00
activationPercent : 0.8
} ;
var Toast = function ( ) {
2019-06-07 02:11:04 +10:00
function Toast ( options ) {
2018-01-28 23:22:43 +11:00
_classCallCheck ( this , Toast ) ;
/ * *
* Options for the toast
* @ member Toast # options
* /
2019-06-07 02:11:04 +10:00
this . options = $ . extend ( { } , Toast . defaults , options ) ;
this . message = this . options . html ;
2018-01-28 23:22:43 +11:00
/ * *
* Describes current pan state toast
* @ type { Boolean }
* /
this . panning = false ;
/ * *
* Time remaining until toast is removed
* /
this . timeRemaining = this . options . displayLength ;
if ( Toast . _toasts . length === 0 ) {
Toast . _createContainer ( ) ;
}
// Create new toast
Toast . _toasts . push ( this ) ;
2019-06-07 02:11:04 +10:00
var toastElement = this . _createToast ( ) ;
2018-01-28 23:22:43 +11:00
toastElement . M _Toast = this ;
this . el = toastElement ;
2019-06-07 02:11:04 +10:00
this . $el = $ ( toastElement ) ;
2018-01-28 23:22:43 +11:00
this . _animateIn ( ) ;
2019-06-07 02:11:04 +10:00
this . _setTimer ( ) ;
2018-01-28 23:22:43 +11:00
}
_createClass ( Toast , [ {
2019-06-07 02:11:04 +10:00
key : "_createToast" ,
2018-01-28 23:22:43 +11:00
/ * *
* Create toast and append it to toast container
* /
2019-06-07 02:11:04 +10:00
value : function _createToast ( ) {
2018-01-28 23:22:43 +11:00
var toast = document . createElement ( 'div' ) ;
toast . classList . add ( 'toast' ) ;
// Add custom classes onto toast
2019-06-07 02:11:04 +10:00
if ( ! ! this . options . classes . length ) {
$ ( toast ) . addClass ( this . options . classes ) ;
2018-01-28 23:22:43 +11:00
}
// Set content
if ( typeof HTMLElement === 'object' ? this . message instanceof HTMLElement : this . message && typeof this . message === 'object' && this . message !== null && this . message . nodeType === 1 && typeof this . message . nodeName === 'string' ) {
toast . appendChild ( this . message ) ;
// Check if it is jQuery object
2019-06-07 02:11:04 +10:00
} else if ( ! ! this . message . jquery ) {
$ ( toast ) . append ( this . message [ 0 ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Insert as html;
2018-01-28 23:22:43 +11:00
} else {
toast . innerHTML = this . message ;
}
// Append toasft
Toast . _container . appendChild ( toast ) ;
return toast ;
}
/ * *
* Animate in toast
* /
} , {
2019-06-07 02:11:04 +10:00
key : "_animateIn" ,
2018-01-28 23:22:43 +11:00
value : function _animateIn ( ) {
// Animate toast in
2019-06-07 02:11:04 +10:00
anim ( {
targets : this . el ,
top : 0 ,
opacity : 1 ,
duration : this . options . inDuration ,
easing : 'easeOutCubic'
2018-01-28 23:22:43 +11:00
} ) ;
}
/ * *
* Create setInterval which automatically removes toast when timeRemaining >= 0
* has been reached
* /
} , {
2019-06-07 02:11:04 +10:00
key : "_setTimer" ,
value : function _setTimer ( ) {
var _this29 = this ;
2018-01-28 23:22:43 +11:00
if ( this . timeRemaining !== Infinity ) {
this . counterInterval = setInterval ( function ( ) {
// If toast is not being dragged, decrease its time remaining
2019-06-07 02:11:04 +10:00
if ( ! _this29 . panning ) {
_this29 . timeRemaining -= 20 ;
2018-01-28 23:22:43 +11:00
}
// Animate toast out
2019-06-07 02:11:04 +10:00
if ( _this29 . timeRemaining <= 0 ) {
_this29 . dismiss ( ) ;
2018-01-28 23:22:43 +11:00
}
} , 20 ) ;
}
}
/ * *
* Dismiss toast with animation
* /
} , {
2019-06-07 02:11:04 +10:00
key : "dismiss" ,
value : function dismiss ( ) {
var _this30 = this ;
2018-01-28 23:22:43 +11:00
window . clearInterval ( this . counterInterval ) ;
var activationDistance = this . el . offsetWidth * this . options . activationPercent ;
if ( this . wasSwiped ) {
this . el . style . transition = 'transform .05s, opacity .05s' ;
2019-06-07 02:11:04 +10:00
this . el . style . transform = "translateX(" + activationDistance + "px)" ;
2018-01-28 23:22:43 +11:00
this . el . style . opacity = 0 ;
}
2019-06-07 02:11:04 +10:00
anim ( {
targets : this . el ,
opacity : 0 ,
marginTop : - 40 ,
2018-01-28 23:22:43 +11:00
duration : this . options . outDuration ,
easing : 'easeOutExpo' ,
complete : function ( ) {
// Call the optional callback
2019-06-07 02:11:04 +10:00
if ( typeof _this30 . options . completeCallback === 'function' ) {
_this30 . options . completeCallback ( ) ;
2018-01-28 23:22:43 +11:00
}
// Remove toast from DOM
2019-06-07 02:11:04 +10:00
_this30 . $el . remove ( ) ;
Toast . _toasts . splice ( Toast . _toasts . indexOf ( _this30 ) , 1 ) ;
2018-01-28 23:22:43 +11:00
if ( Toast . _toasts . length === 0 ) {
Toast . _removeContainer ( ) ;
}
}
} ) ;
}
} ] , [ {
2019-06-07 02:11:04 +10:00
key : "getInstance" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Toast ;
}
2018-01-28 23:22:43 +11:00
/ * *
* Append toast container and add event handlers
* /
2019-06-07 02:11:04 +10:00
} , {
key : "_createContainer" ,
2018-01-28 23:22:43 +11:00
value : function _createContainer ( ) {
var container = document . createElement ( 'div' ) ;
container . setAttribute ( 'id' , 'toast-container' ) ;
// Add event handler
container . addEventListener ( 'touchstart' , Toast . _onDragStart ) ;
container . addEventListener ( 'touchmove' , Toast . _onDragMove ) ;
container . addEventListener ( 'touchend' , Toast . _onDragEnd ) ;
container . addEventListener ( 'mousedown' , Toast . _onDragStart ) ;
document . addEventListener ( 'mousemove' , Toast . _onDragMove ) ;
document . addEventListener ( 'mouseup' , Toast . _onDragEnd ) ;
document . body . appendChild ( container ) ;
Toast . _container = container ;
}
/ * *
* Remove toast container and event handlers
* /
} , {
2019-06-07 02:11:04 +10:00
key : "_removeContainer" ,
2018-01-28 23:22:43 +11:00
value : function _removeContainer ( ) {
// Add event handler
document . removeEventListener ( 'mousemove' , Toast . _onDragMove ) ;
document . removeEventListener ( 'mouseup' , Toast . _onDragEnd ) ;
2019-06-07 02:11:04 +10:00
$ ( Toast . _container ) . remove ( ) ;
2018-01-28 23:22:43 +11:00
Toast . _container = null ;
}
/ * *
* Begin drag handler
* @ param { Event } e
* /
} , {
2019-06-07 02:11:04 +10:00
key : "_onDragStart" ,
2018-01-28 23:22:43 +11:00
value : function _onDragStart ( e ) {
if ( e . target && $ ( e . target ) . closest ( '.toast' ) . length ) {
var $toast = $ ( e . target ) . closest ( '.toast' ) ;
var toast = $toast [ 0 ] . M _Toast ;
toast . panning = true ;
Toast . _draggedToast = toast ;
toast . el . classList . add ( 'panning' ) ;
toast . el . style . transition = '' ;
toast . startingXPos = Toast . _xPos ( e ) ;
toast . time = Date . now ( ) ;
toast . xPos = Toast . _xPos ( e ) ;
}
}
/ * *
* Drag move handler
* @ param { Event } e
* /
} , {
2019-06-07 02:11:04 +10:00
key : "_onDragMove" ,
2018-01-28 23:22:43 +11:00
value : function _onDragMove ( e ) {
if ( ! ! Toast . _draggedToast ) {
e . preventDefault ( ) ;
var toast = Toast . _draggedToast ;
toast . deltaX = Math . abs ( toast . xPos - Toast . _xPos ( e ) ) ;
toast . xPos = Toast . _xPos ( e ) ;
toast . velocityX = toast . deltaX / ( Date . now ( ) - toast . time ) ;
toast . time = Date . now ( ) ;
2019-06-07 02:11:04 +10:00
var totalDeltaX = toast . xPos - toast . startingXPos ;
var activationDistance = toast . el . offsetWidth * toast . options . activationPercent ;
toast . el . style . transform = "translateX(" + totalDeltaX + "px)" ;
toast . el . style . opacity = 1 - Math . abs ( totalDeltaX / activationDistance ) ;
}
}
/ * *
* End drag handler
* /
} , {
key : "_onDragEnd" ,
value : function _onDragEnd ( ) {
if ( ! ! Toast . _draggedToast ) {
var toast = Toast . _draggedToast ;
toast . panning = false ;
toast . el . classList . remove ( 'panning' ) ;
var totalDeltaX = toast . xPos - toast . startingXPos ;
var activationDistance = toast . el . offsetWidth * toast . options . activationPercent ;
var shouldBeDismissed = Math . abs ( totalDeltaX ) > activationDistance || toast . velocityX > 1 ;
// Remove toast
if ( shouldBeDismissed ) {
toast . wasSwiped = true ;
toast . dismiss ( ) ;
// Animate toast back to original position
} else {
toast . el . style . transition = 'transform .2s, opacity .2s' ;
toast . el . style . transform = '' ;
toast . el . style . opacity = '' ;
}
Toast . _draggedToast = null ;
}
}
/ * *
* Get x position of mouse or touch event
* @ param { Event } e
* /
} , {
key : "_xPos" ,
value : function _xPos ( e ) {
if ( e . targetTouches && e . targetTouches . length >= 1 ) {
return e . targetTouches [ 0 ] . clientX ;
}
// mouse event
return e . clientX ;
}
/ * *
* Remove all toasts
* /
} , {
key : "dismissAll" ,
value : function dismissAll ( ) {
for ( var toastIndex in Toast . _toasts ) {
Toast . _toasts [ toastIndex ] . dismiss ( ) ;
}
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
return Toast ;
} ( ) ;
/ * *
* @ static
* @ memberof Toast
* @ type { Array . < Toast > }
* /
Toast . _toasts = [ ] ;
/ * *
* @ static
* @ memberof Toast
* /
Toast . _container = null ;
/ * *
* @ static
* @ memberof Toast
* @ type { Toast }
* /
Toast . _draggedToast = null ;
M . Toast = Toast ;
M . toast = function ( options ) {
return new Toast ( options ) ;
} ;
} ) ( cash , M . anime ) ;
; ( function ( $ , anim ) {
'use strict' ;
var _defaults = {
edge : 'left' ,
draggable : true ,
inDuration : 250 ,
outDuration : 200 ,
onOpenStart : null ,
onOpenEnd : null ,
onCloseStart : null ,
onCloseEnd : null ,
preventScrolling : true
} ;
/ * *
* @ class
* /
var Sidenav = function ( _Component8 ) {
_inherits ( Sidenav , _Component8 ) ;
/ * *
* Construct Sidenav instance and set up overlay
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Sidenav ( el , options ) {
_classCallCheck ( this , Sidenav ) ;
var _this31 = _possibleConstructorReturn ( this , ( Sidenav . _ _proto _ _ || Object . getPrototypeOf ( Sidenav ) ) . call ( this , Sidenav , el , options ) ) ;
_this31 . el . M _Sidenav = _this31 ;
_this31 . id = _this31 . $el . attr ( 'id' ) ;
/ * *
* Options for the Sidenav
* @ member Sidenav # options
* @ prop { String } [ edge = 'left' ] - Side of screen on which Sidenav appears
* @ prop { Boolean } [ draggable = true ] - Allow swipe gestures to open / close Sidenav
* @ prop { Number } [ inDuration = 250 ] - Length in ms of enter transition
* @ prop { Number } [ outDuration = 200 ] - Length in ms of exit transition
* @ prop { Function } onOpenStart - Function called when sidenav starts entering
* @ prop { Function } onOpenEnd - Function called when sidenav finishes entering
* @ prop { Function } onCloseStart - Function called when sidenav starts exiting
* @ prop { Function } onCloseEnd - Function called when sidenav finishes exiting
* /
_this31 . options = $ . extend ( { } , Sidenav . defaults , options ) ;
/ * *
* Describes open / close state of Sidenav
* @ type { Boolean }
* /
_this31 . isOpen = false ;
/ * *
* Describes if Sidenav is fixed
* @ type { Boolean }
* /
_this31 . isFixed = _this31 . el . classList . contains ( 'sidenav-fixed' ) ;
/ * *
* Describes if Sidenav is being draggeed
* @ type { Boolean }
* /
_this31 . isDragged = false ;
// Window size variables for window resize checks
_this31 . lastWindowWidth = window . innerWidth ;
_this31 . lastWindowHeight = window . innerHeight ;
_this31 . _createOverlay ( ) ;
_this31 . _createDragTarget ( ) ;
_this31 . _setupEventHandlers ( ) ;
_this31 . _setupClasses ( ) ;
_this31 . _setupFixed ( ) ;
Sidenav . _sidenavs . push ( _this31 ) ;
return _this31 ;
}
_createClass ( Sidenav , [ {
key : "destroy" ,
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . _enableBodyScrolling ( ) ;
this . _overlay . parentNode . removeChild ( this . _overlay ) ;
this . dragTarget . parentNode . removeChild ( this . dragTarget ) ;
this . el . M _Sidenav = undefined ;
this . el . style . transform = '' ;
var index = Sidenav . _sidenavs . indexOf ( this ) ;
if ( index >= 0 ) {
Sidenav . _sidenavs . splice ( index , 1 ) ;
}
}
} , {
key : "_createOverlay" ,
value : function _createOverlay ( ) {
var overlay = document . createElement ( 'div' ) ;
this . _closeBound = this . close . bind ( this ) ;
overlay . classList . add ( 'sidenav-overlay' ) ;
overlay . addEventListener ( 'click' , this . _closeBound ) ;
document . body . appendChild ( overlay ) ;
this . _overlay = overlay ;
}
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
if ( Sidenav . _sidenavs . length === 0 ) {
document . body . addEventListener ( 'click' , this . _handleTriggerClick ) ;
}
this . _handleDragTargetDragBound = this . _handleDragTargetDrag . bind ( this ) ;
this . _handleDragTargetReleaseBound = this . _handleDragTargetRelease . bind ( this ) ;
this . _handleCloseDragBound = this . _handleCloseDrag . bind ( this ) ;
this . _handleCloseReleaseBound = this . _handleCloseRelease . bind ( this ) ;
this . _handleCloseTriggerClickBound = this . _handleCloseTriggerClick . bind ( this ) ;
this . dragTarget . addEventListener ( 'touchmove' , this . _handleDragTargetDragBound ) ;
this . dragTarget . addEventListener ( 'touchend' , this . _handleDragTargetReleaseBound ) ;
this . _overlay . addEventListener ( 'touchmove' , this . _handleCloseDragBound ) ;
this . _overlay . addEventListener ( 'touchend' , this . _handleCloseReleaseBound ) ;
this . el . addEventListener ( 'touchmove' , this . _handleCloseDragBound ) ;
this . el . addEventListener ( 'touchend' , this . _handleCloseReleaseBound ) ;
this . el . addEventListener ( 'click' , this . _handleCloseTriggerClickBound ) ;
// Add resize for side nav fixed
if ( this . isFixed ) {
this . _handleWindowResizeBound = this . _handleWindowResize . bind ( this ) ;
window . addEventListener ( 'resize' , this . _handleWindowResizeBound ) ;
}
}
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
if ( Sidenav . _sidenavs . length === 1 ) {
document . body . removeEventListener ( 'click' , this . _handleTriggerClick ) ;
}
this . dragTarget . removeEventListener ( 'touchmove' , this . _handleDragTargetDragBound ) ;
this . dragTarget . removeEventListener ( 'touchend' , this . _handleDragTargetReleaseBound ) ;
this . _overlay . removeEventListener ( 'touchmove' , this . _handleCloseDragBound ) ;
this . _overlay . removeEventListener ( 'touchend' , this . _handleCloseReleaseBound ) ;
this . el . removeEventListener ( 'touchmove' , this . _handleCloseDragBound ) ;
this . el . removeEventListener ( 'touchend' , this . _handleCloseReleaseBound ) ;
this . el . removeEventListener ( 'click' , this . _handleCloseTriggerClickBound ) ;
// Remove resize for side nav fixed
if ( this . isFixed ) {
window . removeEventListener ( 'resize' , this . _handleWindowResizeBound ) ;
}
}
/ * *
* Handle Trigger Click
* @ param { Event } e
* /
} , {
key : "_handleTriggerClick" ,
value : function _handleTriggerClick ( e ) {
var $trigger = $ ( e . target ) . closest ( '.sidenav-trigger' ) ;
if ( e . target && $trigger . length ) {
var sidenavId = M . getIdFromTrigger ( $trigger [ 0 ] ) ;
var sidenavInstance = document . getElementById ( sidenavId ) . M _Sidenav ;
if ( sidenavInstance ) {
sidenavInstance . open ( $trigger ) ;
}
e . preventDefault ( ) ;
}
}
/ * *
* Set variables needed at the beggining of drag
* and stop any current transition .
* @ param { Event } e
* /
} , {
key : "_startDrag" ,
value : function _startDrag ( e ) {
var clientX = e . targetTouches [ 0 ] . clientX ;
this . isDragged = true ;
this . _startingXpos = clientX ;
this . _xPos = this . _startingXpos ;
this . _time = Date . now ( ) ;
this . _width = this . el . getBoundingClientRect ( ) . width ;
this . _overlay . style . display = 'block' ;
this . _initialScrollTop = this . isOpen ? this . el . scrollTop : M . getDocumentScrollTop ( ) ;
this . _verticallyScrolling = false ;
anim . remove ( this . el ) ;
anim . remove ( this . _overlay ) ;
}
/ * *
* Set variables needed at each drag move update tick
* @ param { Event } e
* /
} , {
key : "_dragMoveUpdate" ,
value : function _dragMoveUpdate ( e ) {
var clientX = e . targetTouches [ 0 ] . clientX ;
var currentScrollTop = this . isOpen ? this . el . scrollTop : M . getDocumentScrollTop ( ) ;
this . deltaX = Math . abs ( this . _xPos - clientX ) ;
this . _xPos = clientX ;
this . velocityX = this . deltaX / ( Date . now ( ) - this . _time ) ;
this . _time = Date . now ( ) ;
if ( this . _initialScrollTop !== currentScrollTop ) {
this . _verticallyScrolling = true ;
2018-01-28 23:22:43 +11:00
}
}
/ * *
2019-06-07 02:11:04 +10:00
* Handles Dragging of Sidenav
2018-01-28 23:22:43 +11:00
* @ param { Event } e
* /
} , {
2019-06-07 02:11:04 +10:00
key : "_handleDragTargetDrag" ,
value : function _handleDragTargetDrag ( e ) {
// Check if draggable
if ( ! this . options . draggable || this . _isCurrentlyFixed ( ) || this . _verticallyScrolling ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// If not being dragged, set initial drag start variables
if ( ! this . isDragged ) {
this . _startDrag ( e ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Run touchmove updates
this . _dragMoveUpdate ( e ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Calculate raw deltaX
var totalDeltaX = this . _xPos - this . _startingXpos ;
// dragDirection is the attempted user drag direction
var dragDirection = totalDeltaX > 0 ? 'right' : 'left' ;
// Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
totalDeltaX = Math . min ( this . _width , Math . abs ( totalDeltaX ) ) ;
if ( this . options . edge === dragDirection ) {
totalDeltaX = 0 ;
}
/ * *
* transformX is the drag displacement
* transformPrefix is the initial transform placement
* Invert values if Sidenav is right edge
* /
var transformX = totalDeltaX ;
var transformPrefix = 'translateX(-100%)' ;
if ( this . options . edge === 'right' ) {
transformPrefix = 'translateX(100%)' ;
transformX = - transformX ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
// Calculate open/close percentage of sidenav, with open = 1 and close = 0
this . percentOpen = Math . min ( 1 , totalDeltaX / this . _width ) ;
// Set transform and opacity styles
this . el . style . transform = transformPrefix + " translateX(" + transformX + "px)" ;
this . _overlay . style . opacity = this . percentOpen ;
2018-01-28 23:22:43 +11:00
}
/ * *
2019-06-07 02:11:04 +10:00
* Handle Drag Target Release
2018-01-28 23:22:43 +11:00
* /
} , {
2019-06-07 02:11:04 +10:00
key : "_handleDragTargetRelease" ,
value : function _handleDragTargetRelease ( ) {
if ( this . isDragged ) {
if ( this . percentOpen > 0.2 ) {
this . open ( ) ;
} else {
this . _animateOut ( ) ;
}
this . isDragged = false ;
this . _verticallyScrolling = false ;
2018-01-28 23:22:43 +11:00
}
}
/ * *
2019-06-07 02:11:04 +10:00
* Handle Close Drag
* @ param { Event } e
2018-01-28 23:22:43 +11:00
* /
} , {
2019-06-07 02:11:04 +10:00
key : "_handleCloseDrag" ,
value : function _handleCloseDrag ( e ) {
if ( this . isOpen ) {
// Check if draggable
if ( ! this . options . draggable || this . _isCurrentlyFixed ( ) || this . _verticallyScrolling ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// If not being dragged, set initial drag start variables
if ( ! this . isDragged ) {
this . _startDrag ( e ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Run touchmove updates
this . _dragMoveUpdate ( e ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Calculate raw deltaX
var totalDeltaX = this . _xPos - this . _startingXpos ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// dragDirection is the attempted user drag direction
var dragDirection = totalDeltaX > 0 ? 'right' : 'left' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
totalDeltaX = Math . min ( this . _width , Math . abs ( totalDeltaX ) ) ;
if ( this . options . edge !== dragDirection ) {
totalDeltaX = 0 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var transformX = - totalDeltaX ;
if ( this . options . edge === 'right' ) {
transformX = - transformX ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Calculate open/close percentage of sidenav, with open = 1 and close = 0
this . percentOpen = Math . min ( 1 , 1 - totalDeltaX / this . _width ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set transform and opacity styles
this . el . style . transform = "translateX(" + transformX + "px)" ;
this . _overlay . style . opacity = this . percentOpen ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Close Release
* /
} , {
key : "_handleCloseRelease" ,
value : function _handleCloseRelease ( ) {
if ( this . isOpen && this . isDragged ) {
if ( this . percentOpen > 0.8 ) {
this . _animateIn ( ) ;
} else {
this . close ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . isDragged = false ;
this . _verticallyScrolling = false ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handles closing of Sidenav when element with class . sidenav - close
* /
} , {
key : "_handleCloseTriggerClick" ,
value : function _handleCloseTriggerClick ( e ) {
var $closeTrigger = $ ( e . target ) . closest ( '.sidenav-close' ) ;
if ( $closeTrigger . length && ! this . _isCurrentlyFixed ( ) ) {
this . close ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
/ * *
* Handle Window Resize
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleWindowResize" ,
value : function _handleWindowResize ( ) {
// Only handle horizontal resizes
if ( this . lastWindowWidth !== window . innerWidth ) {
2018-01-28 23:22:43 +11:00
if ( window . innerWidth > 992 ) {
2019-06-07 02:11:04 +10:00
this . open ( ) ;
} else {
this . close ( ) ;
2018-01-28 23:22:43 +11:00
}
}
2019-06-07 02:11:04 +10:00
this . lastWindowWidth = window . innerWidth ;
this . lastWindowHeight = window . innerHeight ;
}
} , {
key : "_setupClasses" ,
value : function _setupClasses ( ) {
if ( this . options . edge === 'right' ) {
this . el . classList . add ( 'right-aligned' ) ;
this . dragTarget . classList . add ( 'right-aligned' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
} , {
key : "_removeClasses" ,
value : function _removeClasses ( ) {
this . el . classList . remove ( 'right-aligned' ) ;
this . dragTarget . classList . remove ( 'right-aligned' ) ;
}
} , {
key : "_setupFixed" ,
value : function _setupFixed ( ) {
if ( this . _isCurrentlyFixed ( ) ) {
this . open ( ) ;
}
}
} , {
key : "_isCurrentlyFixed" ,
value : function _isCurrentlyFixed ( ) {
return this . isFixed && window . innerWidth > 992 ;
}
} , {
key : "_createDragTarget" ,
value : function _createDragTarget ( ) {
var dragTarget = document . createElement ( 'div' ) ;
dragTarget . classList . add ( 'drag-target' ) ;
document . body . appendChild ( dragTarget ) ;
this . dragTarget = dragTarget ;
}
} , {
key : "_preventBodyScrolling" ,
value : function _preventBodyScrolling ( ) {
var body = document . body ;
body . style . overflow = 'hidden' ;
}
} , {
key : "_enableBodyScrolling" ,
value : function _enableBodyScrolling ( ) {
var body = document . body ;
body . style . overflow = '' ;
}
} , {
key : "open" ,
value : function open ( ) {
if ( this . isOpen === true ) {
return ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . isOpen = true ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Run onOpenStart callback
if ( typeof this . options . onOpenStart === 'function' ) {
this . options . onOpenStart . call ( this , this . el ) ;
}
// Handle fixed Sidenav
if ( this . _isCurrentlyFixed ( ) ) {
anim . remove ( this . el ) ;
anim ( {
targets : this . el ,
translateX : 0 ,
duration : 0 ,
easing : 'easeOutQuad'
2019-05-19 17:39:30 +10:00
} ) ;
2019-06-07 02:11:04 +10:00
this . _enableBodyScrolling ( ) ;
this . _overlay . style . display = 'none' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Handle non-fixed Sidenav
} else {
if ( this . options . preventScrolling ) {
this . _preventBodyScrolling ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
if ( ! this . isDragged || this . percentOpen != 1 ) {
this . _animateIn ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
}
} , {
key : "close" ,
value : function close ( ) {
if ( this . isOpen === false ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . isOpen = false ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Run onCloseStart callback
if ( typeof this . options . onCloseStart === 'function' ) {
this . options . onCloseStart . call ( this , this . el ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Handle fixed Sidenav
if ( this . _isCurrentlyFixed ( ) ) {
var transformX = this . options . edge === 'left' ? '-105%' : '105%' ;
this . el . style . transform = "translateX(" + transformX + ")" ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Handle non-fixed Sidenav
} else {
this . _enableBodyScrolling ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( ! this . isDragged || this . percentOpen != 0 ) {
this . _animateOut ( ) ;
} else {
this . _overlay . style . display = 'none' ;
}
}
}
} , {
key : "_animateIn" ,
value : function _animateIn ( ) {
this . _animateSidenavIn ( ) ;
this . _animateOverlayIn ( ) ;
}
} , {
key : "_animateSidenavIn" ,
value : function _animateSidenavIn ( ) {
var _this32 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var slideOutPercent = this . options . edge === 'left' ? - 1 : 1 ;
if ( this . isDragged ) {
slideOutPercent = this . options . edge === 'left' ? slideOutPercent + this . percentOpen : slideOutPercent - this . percentOpen ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
anim . remove ( this . el ) ;
anim ( {
targets : this . el ,
translateX : [ slideOutPercent * 100 + "%" , 0 ] ,
duration : this . options . inDuration ,
easing : 'easeOutQuad' ,
complete : function ( ) {
// Run onOpenEnd callback
if ( typeof _this32 . options . onOpenEnd === 'function' ) {
_this32 . options . onOpenEnd . call ( _this32 , _this32 . el ) ;
}
}
} ) ;
}
} , {
key : "_animateOverlayIn" ,
value : function _animateOverlayIn ( ) {
var start = 0 ;
if ( this . isDragged ) {
start = this . percentOpen ;
} else {
$ ( this . _overlay ) . css ( {
display : 'block'
} ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
anim . remove ( this . _overlay ) ;
anim ( {
targets : this . _overlay ,
opacity : [ start , 1 ] ,
duration : this . options . inDuration ,
easing : 'easeOutQuad'
} ) ;
}
} , {
key : "_animateOut" ,
value : function _animateOut ( ) {
this . _animateSidenavOut ( ) ;
this . _animateOverlayOut ( ) ;
}
} , {
key : "_animateSidenavOut" ,
value : function _animateSidenavOut ( ) {
var _this33 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var endPercent = this . options . edge === 'left' ? - 1 : 1 ;
var slideOutPercent = 0 ;
if ( this . isDragged ) {
slideOutPercent = this . options . edge === 'left' ? endPercent + this . percentOpen : endPercent - this . percentOpen ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
anim . remove ( this . el ) ;
anim ( {
targets : this . el ,
translateX : [ slideOutPercent * 100 + "%" , endPercent * 105 + "%" ] ,
duration : this . options . outDuration ,
easing : 'easeOutQuad' ,
complete : function ( ) {
// Run onOpenEnd callback
if ( typeof _this33 . options . onCloseEnd === 'function' ) {
_this33 . options . onCloseEnd . call ( _this33 , _this33 . el ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
} ) ;
}
} , {
key : "_animateOverlayOut" ,
value : function _animateOverlayOut ( ) {
var _this34 = this ;
anim . remove ( this . _overlay ) ;
anim ( {
targets : this . _overlay ,
opacity : 0 ,
duration : this . options . outDuration ,
easing : 'easeOutQuad' ,
complete : function ( ) {
$ ( _this34 . _overlay ) . css ( 'display' , 'none' ) ;
}
} ) ;
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Sidenav . _ _proto _ _ || Object . getPrototypeOf ( Sidenav ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Sidenav ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Sidenav ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ static
* @ memberof Sidenav
* @ type { Array . < Sidenav > }
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Sidenav . _sidenavs = [ ] ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . Sidenav = Sidenav ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Sidenav , 'sidenav' , 'M_Sidenav' ) ;
}
} ) ( cash , M . anime ) ;
; ( function ( $ , anim ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
throttle : 100 ,
scrollOffset : 200 , // offset - 200 allows elements near bottom of page to scroll
activeClass : 'active' ,
getActiveElement : function ( id ) {
return 'a[href="#' + id + '"]' ;
2018-01-28 23:22:43 +11:00
}
} ;
2019-06-07 02:11:04 +10:00
/ * *
* @ class
*
* /
var ScrollSpy = function ( _Component9 ) {
_inherits ( ScrollSpy , _Component9 ) ;
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* Construct ScrollSpy instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
function ScrollSpy ( el , options ) {
_classCallCheck ( this , ScrollSpy ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this35 = _possibleConstructorReturn ( this , ( ScrollSpy . _ _proto _ _ || Object . getPrototypeOf ( ScrollSpy ) ) . call ( this , ScrollSpy , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this35 . el . M _ScrollSpy = _this35 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Options for the modal
* @ member Modal # options
* @ prop { Number } [ throttle = 100 ] - Throttle of scroll handler
* @ prop { Number } [ scrollOffset = 200 ] - Offset for centering element when scrolled to
* @ prop { String } [ activeClass = 'active' ] - Class applied to active elements
* @ prop { Function } [ getActiveElement ] - Used to find active element
* /
_this35 . options = $ . extend ( { } , ScrollSpy . defaults , options ) ;
// setup
ScrollSpy . _elements . push ( _this35 ) ;
ScrollSpy . _count ++ ;
ScrollSpy . _increment ++ ;
_this35 . tickId = - 1 ;
_this35 . id = ScrollSpy . _increment ;
_this35 . _setupEventHandlers ( ) ;
_this35 . _handleWindowScroll ( ) ;
return _this35 ;
}
_createClass ( ScrollSpy , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
ScrollSpy . _elements . splice ( ScrollSpy . _elements . indexOf ( this ) , 1 ) ;
ScrollSpy . _elementsInView . splice ( ScrollSpy . _elementsInView . indexOf ( this ) , 1 ) ;
ScrollSpy . _visibleElements . splice ( ScrollSpy . _visibleElements . indexOf ( this . $el ) , 1 ) ;
ScrollSpy . _count -- ;
this . _removeEventHandlers ( ) ;
$ ( this . options . getActiveElement ( this . $el . attr ( 'id' ) ) ) . removeClass ( this . options . activeClass ) ;
this . el . M _ScrollSpy = undefined ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
var throttledResize = M . throttle ( this . _handleWindowScroll , 200 ) ;
this . _handleThrottledResizeBound = throttledResize . bind ( this ) ;
this . _handleWindowScrollBound = this . _handleWindowScroll . bind ( this ) ;
if ( ScrollSpy . _count === 1 ) {
window . addEventListener ( 'scroll' , this . _handleWindowScrollBound ) ;
window . addEventListener ( 'resize' , this . _handleThrottledResizeBound ) ;
document . body . addEventListener ( 'click' , this . _handleTriggerClick ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
if ( ScrollSpy . _count === 0 ) {
window . removeEventListener ( 'scroll' , this . _handleWindowScrollBound ) ;
window . removeEventListener ( 'resize' , this . _handleThrottledResizeBound ) ;
document . body . removeEventListener ( 'click' , this . _handleTriggerClick ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Trigger Click
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleTriggerClick" ,
value : function _handleTriggerClick ( e ) {
var $trigger = $ ( e . target ) ;
for ( var i = ScrollSpy . _elements . length - 1 ; i >= 0 ; i -- ) {
var scrollspy = ScrollSpy . _elements [ i ] ;
if ( $trigger . is ( 'a[href="#' + scrollspy . $el . attr ( 'id' ) + '"]' ) ) {
e . preventDefault ( ) ;
var offset = scrollspy . $el . offset ( ) . top + 1 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
anim ( {
targets : [ document . documentElement , document . body ] ,
scrollTop : offset - scrollspy . options . scrollOffset ,
duration : 400 ,
easing : 'easeOutCubic'
} ) ;
break ;
}
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Window Scroll
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleWindowScroll" ,
value : function _handleWindowScroll ( ) {
// unique tick id
ScrollSpy . _ticks ++ ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// viewport rectangle
var top = M . getDocumentScrollTop ( ) ,
left = M . getDocumentScrollLeft ( ) ,
right = left + window . innerWidth ,
bottom = top + window . innerHeight ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// determine which elements are in view
var intersections = ScrollSpy . _findElements ( top , right , bottom , left ) ;
for ( var i = 0 ; i < intersections . length ; i ++ ) {
var scrollspy = intersections [ i ] ;
var lastTick = scrollspy . tickId ;
if ( lastTick < 0 ) {
// entered into view
scrollspy . _enter ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// update tick id
scrollspy . tickId = ScrollSpy . _ticks ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
for ( var _i = 0 ; _i < ScrollSpy . _elementsInView . length ; _i ++ ) {
var _scrollspy = ScrollSpy . _elementsInView [ _i ] ;
var _lastTick = _scrollspy . tickId ;
if ( _lastTick >= 0 && _lastTick !== ScrollSpy . _ticks ) {
// exited from view
_scrollspy . _exit ( ) ;
_scrollspy . tickId = - 1 ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// remember elements in view for next tick
ScrollSpy . _elementsInView = intersections ;
}
/ * *
* Find elements that are within the boundary
* @ param { number } top
* @ param { number } right
* @ param { number } bottom
* @ param { number } left
* @ return { Array . < ScrollSpy > } A collection of elements
* /
} , {
key : "_enter" ,
value : function _enter ( ) {
ScrollSpy . _visibleElements = ScrollSpy . _visibleElements . filter ( function ( value ) {
return value . height ( ) != 0 ;
} ) ;
if ( ScrollSpy . _visibleElements [ 0 ] ) {
$ ( this . options . getActiveElement ( ScrollSpy . _visibleElements [ 0 ] . attr ( 'id' ) ) ) . removeClass ( this . options . activeClass ) ;
if ( ScrollSpy . _visibleElements [ 0 ] [ 0 ] . M _ScrollSpy && this . id < ScrollSpy . _visibleElements [ 0 ] [ 0 ] . M _ScrollSpy . id ) {
ScrollSpy . _visibleElements . unshift ( this . $el ) ;
} else {
ScrollSpy . _visibleElements . push ( this . $el ) ;
}
2018-01-28 23:22:43 +11:00
} else {
2019-06-07 02:11:04 +10:00
ScrollSpy . _visibleElements . push ( this . $el ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
$ ( this . options . getActiveElement ( ScrollSpy . _visibleElements [ 0 ] . attr ( 'id' ) ) ) . addClass ( this . options . activeClass ) ;
}
} , {
key : "_exit" ,
value : function _exit ( ) {
var _this36 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
ScrollSpy . _visibleElements = ScrollSpy . _visibleElements . filter ( function ( value ) {
return value . height ( ) != 0 ;
2018-01-28 23:22:43 +11:00
} ) ;
2019-06-07 02:11:04 +10:00
if ( ScrollSpy . _visibleElements [ 0 ] ) {
$ ( this . options . getActiveElement ( ScrollSpy . _visibleElements [ 0 ] . attr ( 'id' ) ) ) . removeClass ( this . options . activeClass ) ;
ScrollSpy . _visibleElements = ScrollSpy . _visibleElements . filter ( function ( el ) {
return el . attr ( 'id' ) != _this36 . $el . attr ( 'id' ) ;
} ) ;
if ( ScrollSpy . _visibleElements [ 0 ] ) {
// Check if empty
$ ( this . options . getActiveElement ( ScrollSpy . _visibleElements [ 0 ] . attr ( 'id' ) ) ) . addClass ( this . options . activeClass ) ;
}
2018-01-28 23:22:43 +11:00
}
}
2019-06-07 02:11:04 +10:00
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( ScrollSpy . _ _proto _ _ || Object . getPrototypeOf ( ScrollSpy ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _ScrollSpy ;
}
} , {
key : "_findElements" ,
value : function _findElements ( top , right , bottom , left ) {
var hits = [ ] ;
for ( var i = 0 ; i < ScrollSpy . _elements . length ; i ++ ) {
var scrollspy = ScrollSpy . _elements [ i ] ;
var currTop = top + scrollspy . options . scrollOffset || 200 ;
if ( scrollspy . $el . height ( ) > 0 ) {
var elTop = scrollspy . $el . offset ( ) . top ,
elLeft = scrollspy . $el . offset ( ) . left ,
elRight = elLeft + scrollspy . $el . width ( ) ,
elBottom = elTop + scrollspy . $el . height ( ) ;
var isIntersect = ! ( elLeft > right || elRight < left || elTop > bottom || elBottom < currTop ) ;
if ( isIntersect ) {
hits . push ( scrollspy ) ;
}
}
}
return hits ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
return ScrollSpy ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* @ static
* @ memberof ScrollSpy
* @ type { Array . < ScrollSpy > }
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
ScrollSpy . _elements = [ ] ;
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* @ static
* @ memberof ScrollSpy
* @ type { Array . < ScrollSpy > }
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
ScrollSpy . _elementsInView = [ ] ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ static
* @ memberof ScrollSpy
* @ type { Array . < cash > }
* /
ScrollSpy . _visibleElements = [ ] ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ static
* @ memberof ScrollSpy
* /
ScrollSpy . _count = 0 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ static
* @ memberof ScrollSpy
* /
ScrollSpy . _increment = 0 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ static
* @ memberof ScrollSpy
* /
ScrollSpy . _ticks = 0 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . ScrollSpy = ScrollSpy ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( ScrollSpy , 'scrollSpy' , 'M_ScrollSpy' ) ;
}
} ) ( cash , M . anime ) ;
; ( function ( $ ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
data : { } , // Autocomplete data set
limit : Infinity , // Limit of results the autocomplete shows
onAutocomplete : null , // Callback for when autocompleted
minLength : 1 , // Min characters before autocomplete starts
sortFunction : function ( a , b , inputString ) {
// Sort function for sorting autocomplete results
return a . indexOf ( inputString ) - b . indexOf ( inputString ) ;
}
} ;
/ * *
* @ class
*
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var Autocomplete = function ( _Component10 ) {
_inherits ( Autocomplete , _Component10 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct Autocomplete instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Autocomplete ( el , options ) {
_classCallCheck ( this , Autocomplete ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this37 = _possibleConstructorReturn ( this , ( Autocomplete . _ _proto _ _ || Object . getPrototypeOf ( Autocomplete ) ) . call ( this , Autocomplete , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this37 . el . M _Autocomplete = _this37 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Options for the autocomplete
* @ member Autocomplete # options
* @ prop { Number } duration
* @ prop { Number } dist
* @ prop { number } shift
* @ prop { number } padding
* @ prop { Boolean } fullWidth
* @ prop { Boolean } indicators
* @ prop { Boolean } noWrap
* @ prop { Function } onCycleTo
* /
_this37 . options = $ . extend ( { } , Autocomplete . defaults , options ) ;
// Setup
_this37 . isOpen = false ;
_this37 . count = 0 ;
_this37 . activeIndex = - 1 ;
_this37 . oldVal ;
_this37 . $inputField = _this37 . $el . closest ( '.input-field' ) ;
_this37 . $active = $ ( ) ;
_this37 . _mousedown = false ;
_this37 . _setupDropdown ( ) ;
_this37 . _setupEventHandlers ( ) ;
return _this37 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_createClass ( Autocomplete , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . _removeDropdown ( ) ;
this . el . M _Autocomplete = undefined ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleInputBlurBound = this . _handleInputBlur . bind ( this ) ;
this . _handleInputKeyupAndFocusBound = this . _handleInputKeyupAndFocus . bind ( this ) ;
this . _handleInputKeydownBound = this . _handleInputKeydown . bind ( this ) ;
this . _handleInputClickBound = this . _handleInputClick . bind ( this ) ;
this . _handleContainerMousedownAndTouchstartBound = this . _handleContainerMousedownAndTouchstart . bind ( this ) ;
this . _handleContainerMouseupAndTouchendBound = this . _handleContainerMouseupAndTouchend . bind ( this ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . addEventListener ( 'blur' , this . _handleInputBlurBound ) ;
this . el . addEventListener ( 'keyup' , this . _handleInputKeyupAndFocusBound ) ;
this . el . addEventListener ( 'focus' , this . _handleInputKeyupAndFocusBound ) ;
this . el . addEventListener ( 'keydown' , this . _handleInputKeydownBound ) ;
this . el . addEventListener ( 'click' , this . _handleInputClickBound ) ;
this . container . addEventListener ( 'mousedown' , this . _handleContainerMousedownAndTouchstartBound ) ;
this . container . addEventListener ( 'mouseup' , this . _handleContainerMouseupAndTouchendBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( typeof window . ontouchstart !== 'undefined' ) {
this . container . addEventListener ( 'touchstart' , this . _handleContainerMousedownAndTouchstartBound ) ;
this . container . addEventListener ( 'touchend' , this . _handleContainerMouseupAndTouchendBound ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
this . el . removeEventListener ( 'blur' , this . _handleInputBlurBound ) ;
this . el . removeEventListener ( 'keyup' , this . _handleInputKeyupAndFocusBound ) ;
this . el . removeEventListener ( 'focus' , this . _handleInputKeyupAndFocusBound ) ;
this . el . removeEventListener ( 'keydown' , this . _handleInputKeydownBound ) ;
this . el . removeEventListener ( 'click' , this . _handleInputClickBound ) ;
this . container . removeEventListener ( 'mousedown' , this . _handleContainerMousedownAndTouchstartBound ) ;
this . container . removeEventListener ( 'mouseup' , this . _handleContainerMouseupAndTouchendBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( typeof window . ontouchstart !== 'undefined' ) {
this . container . removeEventListener ( 'touchstart' , this . _handleContainerMousedownAndTouchstartBound ) ;
this . container . removeEventListener ( 'touchend' , this . _handleContainerMouseupAndTouchendBound ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Setup dropdown
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupDropdown" ,
value : function _setupDropdown ( ) {
var _this38 = this ;
this . container = document . createElement ( 'ul' ) ;
this . container . id = "autocomplete-options-" + M . guid ( ) ;
$ ( this . container ) . addClass ( 'autocomplete-content dropdown-content' ) ;
this . $inputField . append ( this . container ) ;
this . el . setAttribute ( 'data-target' , this . container . id ) ;
this . dropdown = M . Dropdown . init ( this . el , {
autoFocus : false ,
closeOnClick : false ,
coverTrigger : false ,
onItemClick : function ( itemEl ) {
_this38 . selectOption ( $ ( itemEl ) ) ;
}
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Sketchy removal of dropdown click handler
this . el . removeEventListener ( 'click' , this . dropdown . _handleClickBound ) ;
2018-01-28 23:22:43 +11:00
}
/ * *
2019-06-07 02:11:04 +10:00
* Remove dropdown
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
} , {
key : "_removeDropdown" ,
value : function _removeDropdown ( ) {
this . container . parentNode . removeChild ( this . container ) ;
2018-01-28 23:22:43 +11:00
}
/ * *
2019-06-07 02:11:04 +10:00
* Handle Input Blur
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
} , {
key : "_handleInputBlur" ,
value : function _handleInputBlur ( ) {
if ( ! this . _mousedown ) {
this . close ( ) ;
this . _resetAutocomplete ( ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Input Keyup and Focus
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleInputKeyupAndFocus" ,
value : function _handleInputKeyupAndFocus ( e ) {
if ( e . type === 'keyup' ) {
Autocomplete . _keydown = false ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . count = 0 ;
var val = this . el . value . toLowerCase ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Don't capture enter or arrow key usage.
if ( e . keyCode === 13 || e . keyCode === 38 || e . keyCode === 40 ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Check if the input isn't empty
// Check if focus triggered by tab
if ( this . oldVal !== val && ( M . tabPressed || e . type !== 'focus' ) ) {
this . open ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Update oldVal
this . oldVal = val ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Input Keydown
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleInputKeydown" ,
value : function _handleInputKeydown ( e ) {
Autocomplete . _keydown = true ;
// Arrow keys and enter key usage
var keyCode = e . keyCode ,
liElement = void 0 ,
numItems = $ ( this . container ) . children ( 'li' ) . length ;
// select element on Enter
if ( keyCode === M . keys . ENTER && this . activeIndex >= 0 ) {
liElement = $ ( this . container ) . children ( 'li' ) . eq ( this . activeIndex ) ;
if ( liElement . length ) {
this . selectOption ( liElement ) ;
e . preventDefault ( ) ;
}
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Capture up and down key
if ( keyCode === M . keys . ARROW _UP || keyCode === M . keys . ARROW _DOWN ) {
e . preventDefault ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( keyCode === M . keys . ARROW _UP && this . activeIndex > 0 ) {
this . activeIndex -- ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( keyCode === M . keys . ARROW _DOWN && this . activeIndex < numItems - 1 ) {
this . activeIndex ++ ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . $active . removeClass ( 'active' ) ;
if ( this . activeIndex >= 0 ) {
this . $active = $ ( this . container ) . children ( 'li' ) . eq ( this . activeIndex ) ;
this . $active . addClass ( 'active' ) ;
}
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Input Click
* @ param { Event } e
* /
} , {
key : "_handleInputClick" ,
value : function _handleInputClick ( e ) {
this . open ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Container Mousedown and Touchstart
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleContainerMousedownAndTouchstart" ,
value : function _handleContainerMousedownAndTouchstart ( e ) {
this . _mousedown = true ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Container Mouseup and Touchend
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleContainerMouseupAndTouchend" ,
value : function _handleContainerMouseupAndTouchend ( e ) {
this . _mousedown = false ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Highlight partial match
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_highlight" ,
value : function _highlight ( string , $el ) {
var img = $el . find ( 'img' ) ;
var matchStart = $el . text ( ) . toLowerCase ( ) . indexOf ( '' + string . toLowerCase ( ) + '' ) ,
matchEnd = matchStart + string . length - 1 ,
beforeMatch = $el . text ( ) . slice ( 0 , matchStart ) ,
matchText = $el . text ( ) . slice ( matchStart , matchEnd + 1 ) ,
afterMatch = $el . text ( ) . slice ( matchEnd + 1 ) ;
$el . html ( "<span>" + beforeMatch + "<span class='highlight'>" + matchText + "</span>" + afterMatch + "</span>" ) ;
if ( img . length ) {
$el . prepend ( img ) ;
2018-01-28 23:22:43 +11:00
}
}
2019-06-07 02:11:04 +10:00
/ * *
* Reset current element position
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_resetCurrentElement" ,
value : function _resetCurrentElement ( ) {
this . activeIndex = - 1 ;
this . $active . removeClass ( 'active' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Reset autocomplete elements
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_resetAutocomplete" ,
value : function _resetAutocomplete ( ) {
$ ( this . container ) . empty ( ) ;
this . _resetCurrentElement ( ) ;
this . oldVal = null ;
this . isOpen = false ;
this . _mousedown = false ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Select autocomplete option
* @ param { Element } el Autocomplete option list item element
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "selectOption" ,
value : function selectOption ( el ) {
var text = el . text ( ) . trim ( ) ;
this . el . value = text ;
this . $el . trigger ( 'change' ) ;
this . _resetAutocomplete ( ) ;
this . close ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Handle onAutocomplete callback.
if ( typeof this . options . onAutocomplete === 'function' ) {
this . options . onAutocomplete . call ( this , text ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Render dropdown content
* @ param { Object } data data set
* @ param { String } val current input value
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_renderDropdown" ,
value : function _renderDropdown ( data , val ) {
var _this39 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . _resetAutocomplete ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var matchingData = [ ] ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Gather all matching data
for ( var key in data ) {
if ( data . hasOwnProperty ( key ) && key . toLowerCase ( ) . indexOf ( val ) !== - 1 ) {
// Break if past limit
if ( this . count >= this . options . limit ) {
break ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
var entry = {
data : data [ key ] ,
key : key
} ;
matchingData . push ( entry ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . count ++ ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Sort
if ( this . options . sortFunction ) {
var sortFunctionBound = function ( a , b ) {
return _this39 . options . sortFunction ( a . key . toLowerCase ( ) , b . key . toLowerCase ( ) , val . toLowerCase ( ) ) ;
} ;
matchingData . sort ( sortFunctionBound ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
// Render
for ( var i = 0 ; i < matchingData . length ; i ++ ) {
var _entry = matchingData [ i ] ;
var $autocompleteOption = $ ( '<li></li>' ) ;
if ( ! ! _entry . data ) {
$autocompleteOption . append ( "<img src=\"" + _entry . data + "\" class=\"right circle\"><span>" + _entry . key + "</span>" ) ;
} else {
$autocompleteOption . append ( '<span>' + _entry . key + '</span>' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
$ ( this . container ) . append ( $autocompleteOption ) ;
this . _highlight ( val , $autocompleteOption ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Open Autocomplete Dropdown
* /
} , {
key : "open" ,
value : function open ( ) {
var val = this . el . value . toLowerCase ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . _resetAutocomplete ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( val . length >= this . options . minLength ) {
this . isOpen = true ;
this . _renderDropdown ( this . options . data , val ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Open dropdown
if ( ! this . dropdown . isOpen ) {
this . dropdown . open ( ) ;
} else {
// Recalculate dropdown when its already open
this . dropdown . recalculateDimensions ( ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Close Autocomplete Dropdown
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "close" ,
value : function close ( ) {
this . dropdown . close ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Update Data
* @ param { Object } data
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "updateData" ,
value : function updateData ( data ) {
var val = this . el . value . toLowerCase ( ) ;
this . options . data = data ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . isOpen ) {
this . _renderDropdown ( data , val ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Autocomplete . _ _proto _ _ || Object . getPrototypeOf ( Autocomplete ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Autocomplete ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Autocomplete ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ static
* @ memberof Autocomplete
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Autocomplete . _keydown = false ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . Autocomplete = Autocomplete ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Autocomplete , 'autocomplete' , 'M_Autocomplete' ) ;
}
} ) ( cash ) ;
; ( function ( $ ) {
// Function to update labels of text fields
M . updateTextFields = function ( ) {
var input _selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], textarea' ;
$ ( input _selector ) . each ( function ( element , index ) {
var $this = $ ( this ) ;
if ( element . value . length > 0 || $ ( element ) . is ( ':focus' ) || element . autofocus || $this . attr ( 'placeholder' ) !== null ) {
$this . siblings ( 'label' ) . addClass ( 'active' ) ;
} else if ( element . validity ) {
$this . siblings ( 'label' ) . toggleClass ( 'active' , element . validity . badInput === true ) ;
} else {
$this . siblings ( 'label' ) . removeClass ( 'active' ) ;
}
} ) ;
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . validate _field = function ( object ) {
var hasLength = object . attr ( 'data-length' ) !== null ;
var lenAttr = parseInt ( object . attr ( 'data-length' ) ) ;
var len = object [ 0 ] . value . length ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( len === 0 && object [ 0 ] . validity . badInput === false && ! object . is ( ':required' ) ) {
if ( object . hasClass ( 'validate' ) ) {
object . removeClass ( 'valid' ) ;
object . removeClass ( 'invalid' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} else {
if ( object . hasClass ( 'validate' ) ) {
// Check for character counter attributes
if ( object . is ( ':valid' ) && hasLength && len <= lenAttr || object . is ( ':valid' ) && ! hasLength ) {
object . removeClass ( 'invalid' ) ;
object . addClass ( 'valid' ) ;
} else {
object . removeClass ( 'valid' ) ;
object . addClass ( 'invalid' ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . textareaAutoResize = function ( $textarea ) {
// Wrap if native element
if ( $textarea instanceof Element ) {
$textarea = $ ( $textarea ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( ! $textarea . length ) {
console . error ( 'No textarea element found' ) ;
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Textarea Auto Resize
var hiddenDiv = $ ( '.hiddendiv' ) . first ( ) ;
if ( ! hiddenDiv . length ) {
hiddenDiv = $ ( '<div class="hiddendiv common"></div>' ) ;
$ ( 'body' ) . append ( hiddenDiv ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set font properties of hiddenDiv
var fontFamily = $textarea . css ( 'font-family' ) ;
var fontSize = $textarea . css ( 'font-size' ) ;
var lineHeight = $textarea . css ( 'line-height' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Firefox can't handle padding shorthand.
var paddingTop = $textarea . css ( 'padding-top' ) ;
var paddingRight = $textarea . css ( 'padding-right' ) ;
var paddingBottom = $textarea . css ( 'padding-bottom' ) ;
var paddingLeft = $textarea . css ( 'padding-left' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( fontSize ) {
hiddenDiv . css ( 'font-size' , fontSize ) ;
}
if ( fontFamily ) {
hiddenDiv . css ( 'font-family' , fontFamily ) ;
}
if ( lineHeight ) {
hiddenDiv . css ( 'line-height' , lineHeight ) ;
}
if ( paddingTop ) {
hiddenDiv . css ( 'padding-top' , paddingTop ) ;
}
if ( paddingRight ) {
hiddenDiv . css ( 'padding-right' , paddingRight ) ;
}
if ( paddingBottom ) {
hiddenDiv . css ( 'padding-bottom' , paddingBottom ) ;
}
if ( paddingLeft ) {
hiddenDiv . css ( 'padding-left' , paddingLeft ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set original-height, if none
if ( ! $textarea . data ( 'original-height' ) ) {
$textarea . data ( 'original-height' , $textarea . height ( ) ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( $textarea . attr ( 'wrap' ) === 'off' ) {
hiddenDiv . css ( 'overflow-wrap' , 'normal' ) . css ( 'white-space' , 'pre' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
hiddenDiv . text ( $textarea [ 0 ] . value + '\n' ) ;
var content = hiddenDiv . html ( ) . replace ( /\n/g , '<br>' ) ;
hiddenDiv . html ( content ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// When textarea is hidden, width goes crazy.
// Approximate with half of window size
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( $textarea [ 0 ] . offsetWidth > 0 && $textarea [ 0 ] . offsetHeight > 0 ) {
hiddenDiv . css ( 'width' , $textarea . width ( ) + 'px' ) ;
} else {
hiddenDiv . css ( 'width' , window . innerWidth / 2 + 'px' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Resize if the new height is greater than the
* original height of the textarea
* /
if ( $textarea . data ( 'original-height' ) <= hiddenDiv . innerHeight ( ) ) {
$textarea . css ( 'height' , hiddenDiv . innerHeight ( ) + 'px' ) ;
} else if ( $textarea [ 0 ] . value . length < $textarea . data ( 'previous-length' ) ) {
/ * *
* In case the new height is less than original height , it
* means the textarea has less text than before
* So we set the height to the original one
* /
$textarea . css ( 'height' , $textarea . data ( 'original-height' ) + 'px' ) ;
}
$textarea . data ( 'previous-length' , $textarea [ 0 ] . value . length ) ;
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
$ ( document ) . ready ( function ( ) {
// Text based inputs
var input _selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], textarea' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Add active if form auto complete
$ ( document ) . on ( 'change' , input _selector , function ( ) {
if ( this . value . length !== 0 || $ ( this ) . attr ( 'placeholder' ) !== null ) {
$ ( this ) . siblings ( 'label' ) . addClass ( 'active' ) ;
}
M . validate _field ( $ ( this ) ) ;
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Add active if input element has been pre-populated on document ready
$ ( document ) . ready ( function ( ) {
M . updateTextFields ( ) ;
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// HTML DOM FORM RESET handling
$ ( document ) . on ( 'reset' , function ( e ) {
var formReset = $ ( e . target ) ;
if ( formReset . is ( 'form' ) ) {
formReset . find ( input _selector ) . removeClass ( 'valid' ) . removeClass ( 'invalid' ) ;
formReset . find ( input _selector ) . each ( function ( e ) {
if ( this . value . length ) {
$ ( this ) . siblings ( 'label' ) . removeClass ( 'active' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Reset select (after native reset)
setTimeout ( function ( ) {
formReset . find ( 'select' ) . each ( function ( ) {
// check if initialized
if ( this . M _FormSelect ) {
$ ( this ) . trigger ( 'change' ) ;
2019-05-19 17:39:30 +10:00
}
2019-06-07 02:11:04 +10:00
} ) ;
} , 0 ) ;
}
2018-01-28 23:22:43 +11:00
} ) ;
2019-06-07 02:11:04 +10:00
/ * *
* Add active when element has focus
* @ param { Event } e
* /
document . addEventListener ( 'focus' , function ( e ) {
if ( $ ( e . target ) . is ( input _selector ) ) {
$ ( e . target ) . siblings ( 'label, .prefix' ) . addClass ( 'active' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} , true ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Remove active when element is blurred
* @ param { Event } e
* /
document . addEventListener ( 'blur' , function ( e ) {
var $inputElement = $ ( e . target ) ;
if ( $inputElement . is ( input _selector ) ) {
var selector = '.prefix' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( $inputElement [ 0 ] . value . length === 0 && $inputElement [ 0 ] . validity . badInput !== true && $inputElement . attr ( 'placeholder' ) === null ) {
selector += ', label' ;
}
$inputElement . siblings ( selector ) . removeClass ( 'active' ) ;
M . validate _field ( $inputElement ) ;
}
} , true ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Radio and Checkbox focus class
var radio _checkbox = 'input[type=radio], input[type=checkbox]' ;
$ ( document ) . on ( 'keyup' , radio _checkbox , function ( e ) {
// TAB, check if tabbing to radio or checkbox.
if ( e . which === M . keys . TAB ) {
$ ( this ) . addClass ( 'tabbed' ) ;
var $this = $ ( this ) ;
$this . one ( 'blur' , function ( e ) {
$ ( this ) . removeClass ( 'tabbed' ) ;
} ) ;
return ;
}
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var text _area _selector = '.materialize-textarea' ;
$ ( text _area _selector ) . each ( function ( ) {
var $textarea = $ ( this ) ;
/ * *
* Resize textarea on document load after storing
* the original height and the original length
* /
$textarea . data ( 'original-height' , $textarea . height ( ) ) ;
$textarea . data ( 'previous-length' , this . value . length ) ;
M . textareaAutoResize ( $textarea ) ;
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
$ ( document ) . on ( 'keyup' , text _area _selector , function ( ) {
M . textareaAutoResize ( $ ( this ) ) ;
} ) ;
$ ( document ) . on ( 'keydown' , text _area _selector , function ( ) {
M . textareaAutoResize ( $ ( this ) ) ;
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// File Input Path
$ ( document ) . on ( 'change' , '.file-field input[type="file"]' , function ( ) {
var file _field = $ ( this ) . closest ( '.file-field' ) ;
var path _input = file _field . find ( 'input.file-path' ) ;
var files = $ ( this ) [ 0 ] . files ;
var file _names = [ ] ;
for ( var i = 0 ; i < files . length ; i ++ ) {
file _names . push ( files [ i ] . name ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
path _input [ 0 ] . value = file _names . join ( ', ' ) ;
path _input . trigger ( 'change' ) ;
} ) ;
} ) ; // End of $(document).ready
} ) ( cash ) ;
; ( function ( $ , anim ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
indicators : true ,
height : 400 ,
duration : 500 ,
interval : 6000
2018-01-28 23:22:43 +11:00
} ;
2019-06-07 02:11:04 +10:00
/ * *
* @ class
*
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var Slider = function ( _Component11 ) {
_inherits ( Slider , _Component11 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct Slider instance and set up overlay
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Slider ( el , options ) {
_classCallCheck ( this , Slider ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this40 = _possibleConstructorReturn ( this , ( Slider . _ _proto _ _ || Object . getPrototypeOf ( Slider ) ) . call ( this , Slider , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this40 . el . M _Slider = _this40 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Options for the modal
* @ member Slider # options
* @ prop { Boolean } [ indicators = true ] - Show indicators
* @ prop { Number } [ height = 400 ] - height of slider
* @ prop { Number } [ duration = 500 ] - Length in ms of slide transition
* @ prop { Number } [ interval = 6000 ] - Length in ms of slide interval
* /
_this40 . options = $ . extend ( { } , Slider . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// setup
_this40 . $slider = _this40 . $el . find ( '.slides' ) ;
_this40 . $slides = _this40 . $slider . children ( 'li' ) ;
_this40 . activeIndex = _this40 . $slides . filter ( function ( item ) {
return $ ( item ) . hasClass ( 'active' ) ;
} ) . first ( ) . index ( ) ;
if ( _this40 . activeIndex != - 1 ) {
_this40 . $active = _this40 . $slides . eq ( _this40 . activeIndex ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this40 . _setSliderHeight ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set initial positions of captions
_this40 . $slides . find ( '.caption' ) . each ( function ( el ) {
_this40 . _animateCaptionIn ( el , 0 ) ;
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Move img src into background-image
_this40 . $slides . find ( 'img' ) . each ( function ( el ) {
var placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' ;
if ( $ ( el ) . attr ( 'src' ) !== placeholderBase64 ) {
$ ( el ) . css ( 'background-image' , 'url("' + $ ( el ) . attr ( 'src' ) + '")' ) ;
$ ( el ) . attr ( 'src' , placeholderBase64 ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this40 . _setupIndicators ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Show active slide
if ( _this40 . $active ) {
_this40 . $active . css ( 'display' , 'block' ) ;
} else {
_this40 . $slides . first ( ) . addClass ( 'active' ) ;
anim ( {
targets : _this40 . $slides . first ( ) [ 0 ] ,
opacity : 1 ,
duration : _this40 . options . duration ,
easing : 'easeOutQuad'
2018-01-28 23:22:43 +11:00
} ) ;
2019-06-07 02:11:04 +10:00
_this40 . activeIndex = 0 ;
_this40 . $active = _this40 . $slides . eq ( _this40 . activeIndex ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Update indicators
if ( _this40 . options . indicators ) {
_this40 . $indicators . eq ( _this40 . activeIndex ) . addClass ( 'active' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Adjust height to current slide
_this40 . $active . find ( 'img' ) . each ( function ( el ) {
anim ( {
targets : _this40 . $active . find ( '.caption' ) [ 0 ] ,
opacity : 1 ,
translateX : 0 ,
translateY : 0 ,
duration : _this40 . options . duration ,
easing : 'easeOutQuad'
} ) ;
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this40 . _setupEventHandlers ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// auto scroll
_this40 . start ( ) ;
return _this40 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_createClass ( Slider , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . pause ( ) ;
this . _removeIndicators ( ) ;
this . _removeEventHandlers ( ) ;
this . el . M _Slider = undefined ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
var _this41 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . _handleIntervalBound = this . _handleInterval . bind ( this ) ;
this . _handleIndicatorClickBound = this . _handleIndicatorClick . bind ( this ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . options . indicators ) {
this . $indicators . each ( function ( el ) {
el . addEventListener ( 'click' , _this41 . _handleIndicatorClickBound ) ;
} ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
var _this42 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . options . indicators ) {
this . $indicators . each ( function ( el ) {
el . removeEventListener ( 'click' , _this42 . _handleIndicatorClickBound ) ;
2018-01-28 23:22:43 +11:00
} ) ;
}
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle indicator click
* @ param { Event } e
* /
} , {
key : "_handleIndicatorClick" ,
value : function _handleIndicatorClick ( e ) {
var currIndex = $ ( e . target ) . index ( ) ;
this . set ( currIndex ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Interval
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleInterval" ,
value : function _handleInterval ( ) {
var newActiveIndex = this . $slider . find ( '.active' ) . index ( ) ;
if ( this . $slides . length === newActiveIndex + 1 ) newActiveIndex = 0 ;
// loop to start
else newActiveIndex += 1 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . set ( newActiveIndex ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Animate in caption
* @ param { Element } caption
* @ param { Number } duration
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_animateCaptionIn" ,
value : function _animateCaptionIn ( caption , duration ) {
var animOptions = {
targets : caption ,
opacity : 0 ,
duration : duration ,
easing : 'easeOutQuad'
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( $ ( caption ) . hasClass ( 'center-align' ) ) {
animOptions . translateY = - 100 ;
} else if ( $ ( caption ) . hasClass ( 'right-align' ) ) {
animOptions . translateX = 100 ;
} else if ( $ ( caption ) . hasClass ( 'left-align' ) ) {
animOptions . translateX = - 100 ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
anim ( animOptions ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Set height of slider
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setSliderHeight" ,
value : function _setSliderHeight ( ) {
// If fullscreen, do nothing
if ( ! this . $el . hasClass ( 'fullscreen' ) ) {
if ( this . options . indicators ) {
// Add height if indicators are present
this . $el . css ( 'height' , this . options . height + 40 + 'px' ) ;
} else {
this . $el . css ( 'height' , this . options . height + 'px' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . $slider . css ( 'height' , this . options . height + 'px' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup indicators
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupIndicators" ,
value : function _setupIndicators ( ) {
var _this43 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . options . indicators ) {
this . $indicators = $ ( '<ul class="indicators"></ul>' ) ;
this . $slides . each ( function ( el , index ) {
var $indicator = $ ( '<li class="indicator-item"></li>' ) ;
_this43 . $indicators . append ( $indicator [ 0 ] ) ;
} ) ;
this . $el . append ( this . $indicators [ 0 ] ) ;
this . $indicators = this . $indicators . children ( 'li.indicator-item' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Remove indicators
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeIndicators" ,
value : function _removeIndicators ( ) {
this . $el . find ( 'ul.indicators' ) . remove ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Cycle to nth item
* @ param { Number } index
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "set" ,
value : function set ( index ) {
var _this44 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Wrap around indices.
if ( index >= this . $slides . length ) index = 0 ; else if ( index < 0 ) index = this . $slides . length - 1 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Only do if index changes
if ( this . activeIndex != index ) {
this . $active = this . $slides . eq ( this . activeIndex ) ;
var $caption = this . $active . find ( '.caption' ) ;
this . $active . removeClass ( 'active' ) ;
anim ( {
targets : this . $active [ 0 ] ,
opacity : 0 ,
duration : this . options . duration ,
easing : 'easeOutQuad' ,
complete : function ( ) {
_this44 . $slides . not ( '.active' ) . each ( function ( el ) {
anim ( {
targets : el ,
opacity : 0 ,
translateX : 0 ,
translateY : 0 ,
duration : 0 ,
easing : 'easeOutQuad'
} ) ;
} ) ;
}
} ) ;
this . _animateCaptionIn ( $caption [ 0 ] , this . options . duration ) ;
// Update indicators
if ( this . options . indicators ) {
this . $indicators . eq ( this . activeIndex ) . removeClass ( 'active' ) ;
this . $indicators . eq ( index ) . addClass ( 'active' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
anim ( {
targets : this . $slides . eq ( index ) [ 0 ] ,
opacity : 1 ,
duration : this . options . duration ,
easing : 'easeOutQuad'
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
anim ( {
targets : this . $slides . eq ( index ) . find ( '.caption' ) [ 0 ] ,
opacity : 1 ,
translateX : 0 ,
translateY : 0 ,
duration : this . options . duration ,
delay : this . options . duration ,
easing : 'easeOutQuad'
} ) ;
this . $slides . eq ( index ) . addClass ( 'active' ) ;
this . activeIndex = index ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Reset interval
this . start ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Pause slider interval
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "pause" ,
value : function pause ( ) {
clearInterval ( this . interval ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Start slider interval
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "start" ,
value : function start ( ) {
clearInterval ( this . interval ) ;
this . interval = setInterval ( this . _handleIntervalBound , this . options . duration + this . options . interval ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Move to next slide
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "next" ,
value : function next ( ) {
var newIndex = this . activeIndex + 1 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Wrap around indices.
if ( newIndex >= this . $slides . length ) newIndex = 0 ; else if ( newIndex < 0 ) newIndex = this . $slides . length - 1 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . set ( newIndex ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Move to previous slide
* /
} , {
key : "prev" ,
value : function prev ( ) {
var newIndex = this . activeIndex - 1 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Wrap around indices.
if ( newIndex >= this . $slides . length ) newIndex = 0 ; else if ( newIndex < 0 ) newIndex = this . $slides . length - 1 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . set ( newIndex ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Slider . _ _proto _ _ || Object . getPrototypeOf ( Slider ) , "init" , this ) . call ( this , this , els , options ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Slider ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Slider ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . Slider = Slider ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Slider , 'slider' , 'M_Slider' ) ;
}
} ) ( cash , M . anime ) ;
; ( function ( $ , anim ) {
$ ( document ) . on ( 'click' , '.card' , function ( e ) {
if ( $ ( this ) . children ( '.card-reveal' ) . length ) {
var $card = $ ( e . target ) . closest ( '.card' ) ;
if ( $card . data ( 'initialOverflow' ) === undefined ) {
$card . data ( 'initialOverflow' , $card . css ( 'overflow' ) === undefined ? '' : $card . css ( 'overflow' ) ) ;
}
var $cardReveal = $ ( this ) . find ( '.card-reveal' ) ;
if ( $ ( e . target ) . is ( $ ( '.card-reveal .card-title' ) ) || $ ( e . target ) . is ( $ ( '.card-reveal .card-title i' ) ) ) {
// Make Reveal animate down and display none
anim ( {
targets : $cardReveal [ 0 ] ,
translateY : 0 ,
duration : 225 ,
easing : 'easeInOutQuad' ,
complete : function ( anim ) {
var el = anim . animatables [ 0 ] . target ;
$ ( el ) . css ( { display : 'none' } ) ;
$card . css ( 'overflow' , $card . data ( 'initialOverflow' ) ) ;
}
} ) ;
} else if ( $ ( e . target ) . is ( $ ( '.card .activator' ) ) || $ ( e . target ) . is ( $ ( '.card .activator i' ) ) ) {
$card . css ( 'overflow' , 'hidden' ) ;
$cardReveal . css ( { display : 'block' } ) ;
anim ( {
targets : $cardReveal [ 0 ] ,
translateY : '-100%' ,
duration : 300 ,
easing : 'easeInOutQuad'
} ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
} ) ;
} ) ( cash , M . anime ) ;
; ( function ( $ ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
data : [ ] ,
placeholder : '' ,
secondaryPlaceholder : '' ,
autocompleteOptions : { } ,
limit : Infinity ,
onChipAdd : null ,
onChipSelect : null ,
onChipDelete : null
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ typedef { Object } chip
* @ property { String } tag chip tag string
* @ property { String } [ image ] chip avatar image string
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ class
*
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var Chips = function ( _Component12 ) {
_inherits ( Chips , _Component12 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct Chips instance and set up overlay
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Chips ( el , options ) {
_classCallCheck ( this , Chips ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this45 = _possibleConstructorReturn ( this , ( Chips . _ _proto _ _ || Object . getPrototypeOf ( Chips ) ) . call ( this , Chips , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this45 . el . M _Chips = _this45 ;
/ * *
* Options for the modal
* @ member Chips # options
* @ prop { Array } data
* @ prop { String } placeholder
* @ prop { String } secondaryPlaceholder
* @ prop { Object } autocompleteOptions
* /
_this45 . options = $ . extend ( { } , Chips . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this45 . $el . addClass ( 'chips input-field' ) ;
_this45 . chipsData = [ ] ;
_this45 . $chips = $ ( ) ;
_this45 . _setupInput ( ) ;
_this45 . hasAutocomplete = Object . keys ( _this45 . options . autocompleteOptions ) . length > 0 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set input id
if ( ! _this45 . $input . attr ( 'id' ) ) {
_this45 . $input . attr ( 'id' , M . guid ( ) ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
// Render initial chips
if ( _this45 . options . data . length ) {
_this45 . chipsData = _this45 . options . data ;
_this45 . _renderChips ( _this45 . chipsData ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Setup autocomplete if needed
if ( _this45 . hasAutocomplete ) {
_this45 . _setupAutocomplete ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
_this45 . _setPlaceholder ( ) ;
_this45 . _setupLabel ( ) ;
_this45 . _setupEventHandlers ( ) ;
return _this45 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_createClass ( Chips , [ {
key : "getData" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Chips Data
* /
value : function getData ( ) {
return this . chipsData ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "destroy" ,
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . $chips . remove ( ) ;
this . el . M _Chips = undefined ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleChipClickBound = this . _handleChipClick . bind ( this ) ;
this . _handleInputKeydownBound = this . _handleInputKeydown . bind ( this ) ;
this . _handleInputFocusBound = this . _handleInputFocus . bind ( this ) ;
this . _handleInputBlurBound = this . _handleInputBlur . bind ( this ) ;
this . el . addEventListener ( 'click' , this . _handleChipClickBound ) ;
document . addEventListener ( 'keydown' , Chips . _handleChipsKeydown ) ;
document . addEventListener ( 'keyup' , Chips . _handleChipsKeyup ) ;
this . el . addEventListener ( 'blur' , Chips . _handleChipsBlur , true ) ;
this . $input [ 0 ] . addEventListener ( 'focus' , this . _handleInputFocusBound ) ;
this . $input [ 0 ] . addEventListener ( 'blur' , this . _handleInputBlurBound ) ;
this . $input [ 0 ] . addEventListener ( 'keydown' , this . _handleInputKeydownBound ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
this . el . removeEventListener ( 'click' , this . _handleChipClickBound ) ;
document . removeEventListener ( 'keydown' , Chips . _handleChipsKeydown ) ;
document . removeEventListener ( 'keyup' , Chips . _handleChipsKeyup ) ;
this . el . removeEventListener ( 'blur' , Chips . _handleChipsBlur , true ) ;
this . $input [ 0 ] . removeEventListener ( 'focus' , this . _handleInputFocusBound ) ;
this . $input [ 0 ] . removeEventListener ( 'blur' , this . _handleInputBlurBound ) ;
this . $input [ 0 ] . removeEventListener ( 'keydown' , this . _handleInputKeydownBound ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Chip Click
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleChipClick" ,
value : function _handleChipClick ( e ) {
var $chip = $ ( e . target ) . closest ( '.chip' ) ;
var clickedClose = $ ( e . target ) . is ( '.close' ) ;
if ( $chip . length ) {
var index = $chip . index ( ) ;
if ( clickedClose ) {
// delete chip
this . deleteChip ( index ) ;
this . $input [ 0 ] . focus ( ) ;
} else {
// select chip
this . selectChip ( index ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Default handle click to focus on input
} else {
this . $input [ 0 ] . focus ( ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Chips Keydown
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleInputFocus" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Input Focus
* /
value : function _handleInputFocus ( ) {
this . $el . addClass ( 'focus' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Input Blur
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleInputBlur" ,
value : function _handleInputBlur ( ) {
this . $el . removeClass ( 'focus' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Input Keydown
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleInputKeydown" ,
value : function _handleInputKeydown ( e ) {
Chips . _keydown = true ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// enter
if ( e . keyCode === 13 ) {
// Override enter if autocompleting.
if ( this . hasAutocomplete && this . autocomplete && this . autocomplete . isOpen ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
e . preventDefault ( ) ;
this . addChip ( {
tag : this . $input [ 0 ] . value
2018-01-28 23:22:43 +11:00
} ) ;
2019-06-07 02:11:04 +10:00
this . $input [ 0 ] . value = '' ;
// delete or left
} else if ( ( e . keyCode === 8 || e . keyCode === 37 ) && this . $input [ 0 ] . value === '' && this . chipsData . length ) {
e . preventDefault ( ) ;
this . selectChip ( this . chipsData . length - 1 ) ;
2018-01-28 23:22:43 +11:00
}
}
2019-06-07 02:11:04 +10:00
/ * *
* Render Chip
* @ param { chip } chip
* @ return { Element }
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_renderChip" ,
value : function _renderChip ( chip ) {
if ( ! chip . tag ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var renderedChip = document . createElement ( 'div' ) ;
var closeIcon = document . createElement ( 'i' ) ;
renderedChip . classList . add ( 'chip' ) ;
renderedChip . textContent = chip . tag ;
renderedChip . setAttribute ( 'tabindex' , 0 ) ;
$ ( closeIcon ) . addClass ( 'material-icons close' ) ;
closeIcon . textContent = 'close' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// attach image if needed
if ( chip . image ) {
var img = document . createElement ( 'img' ) ;
img . setAttribute ( 'src' , chip . image ) ;
renderedChip . insertBefore ( img , renderedChip . firstChild ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
renderedChip . appendChild ( closeIcon ) ;
return renderedChip ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Render Chips
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_renderChips" ,
value : function _renderChips ( ) {
this . $chips . remove ( ) ;
for ( var i = 0 ; i < this . chipsData . length ; i ++ ) {
var chipEl = this . _renderChip ( this . chipsData [ i ] ) ;
this . $el . append ( chipEl ) ;
this . $chips . add ( chipEl ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
// move input to end
this . $el . append ( this . $input [ 0 ] ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Setup Autocomplete
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupAutocomplete" ,
value : function _setupAutocomplete ( ) {
var _this46 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . options . autocompleteOptions . onAutocomplete = function ( val ) {
_this46 . addChip ( {
tag : val
} ) ;
_this46 . $input [ 0 ] . value = '' ;
_this46 . $input [ 0 ] . focus ( ) ;
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . autocomplete = M . Autocomplete . init ( this . $input [ 0 ] , this . options . autocompleteOptions ) ;
}
/ * *
* Setup Input
* /
} , {
key : "_setupInput" ,
value : function _setupInput ( ) {
this . $input = this . $el . find ( 'input' ) ;
if ( ! this . $input . length ) {
this . $input = $ ( '<input></input>' ) ;
this . $el . append ( this . $input ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . $input . addClass ( 'input' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup Label
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupLabel" ,
value : function _setupLabel ( ) {
this . $label = this . $el . find ( 'label' ) ;
if ( this . $label . length ) {
this . $label . setAttribute ( 'for' , this . $input . attr ( 'id' ) ) ;
}
}
/ * *
* Set placeholder
* /
} , {
key : "_setPlaceholder" ,
value : function _setPlaceholder ( ) {
if ( this . chipsData !== undefined && ! this . chipsData . length && this . options . placeholder ) {
$ ( this . $input ) . prop ( 'placeholder' , this . options . placeholder ) ;
} else if ( ( this . chipsData === undefined || ! ! this . chipsData . length ) && this . options . secondaryPlaceholder ) {
$ ( this . $input ) . prop ( 'placeholder' , this . options . secondaryPlaceholder ) ;
}
}
/ * *
* Check if chip is valid
* @ param { chip } chip
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_isValid" ,
value : function _isValid ( chip ) {
if ( chip . hasOwnProperty ( 'tag' ) && chip . tag !== '' ) {
var exists = false ;
for ( var i = 0 ; i < this . chipsData . length ; i ++ ) {
if ( this . chipsData [ i ] . tag === chip . tag ) {
exists = true ;
break ;
}
}
return ! exists ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return false ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Add chip
* @ param { chip } chip
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "addChip" ,
value : function addChip ( chip ) {
if ( ! this . _isValid ( chip ) || this . chipsData . length >= this . options . limit ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var renderedChip = this . _renderChip ( chip ) ;
this . $chips . add ( renderedChip ) ;
this . chipsData . push ( chip ) ;
$ ( this . $input ) . before ( renderedChip ) ;
this . _setPlaceholder ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// fire chipAdd callback
if ( typeof this . options . onChipAdd === 'function' ) {
this . options . onChipAdd . call ( this , this . $el , renderedChip ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Delete chip
* @ param { Number } chip
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "deleteChip" ,
value : function deleteChip ( chipIndex ) {
var $chip = this . $chips . eq ( chipIndex ) ;
this . $chips . eq ( chipIndex ) . remove ( ) ;
this . $chips = this . $chips . filter ( function ( el ) {
return $ ( el ) . index ( ) >= 0 ;
} ) ;
this . chipsData . splice ( chipIndex , 1 ) ;
this . _setPlaceholder ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// fire chipDelete callback
if ( typeof this . options . onChipDelete === 'function' ) {
this . options . onChipDelete . call ( this , this . $el , $chip [ 0 ] ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Select chip
* @ param { Number } chip
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "selectChip" ,
value : function selectChip ( chipIndex ) {
var $chip = this . $chips . eq ( chipIndex ) ;
this . _selectedChip = $chip ;
$chip [ 0 ] . focus ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// fire chipSelect callback
if ( typeof this . options . onChipSelect === 'function' ) {
this . options . onChipSelect . call ( this , this . $el , $chip [ 0 ] ) ;
}
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Chips . _ _proto _ _ || Object . getPrototypeOf ( Chips ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Chips ;
}
} , {
key : "_handleChipsKeydown" ,
value : function _handleChipsKeydown ( e ) {
Chips . _keydown = true ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var $chips = $ ( e . target ) . closest ( '.chips' ) ;
var chipsKeydown = e . target && $chips . length ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Don't handle keydown inputs on input and textarea
if ( $ ( e . target ) . is ( 'input, textarea' ) || ! chipsKeydown ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var currChips = $chips [ 0 ] . M _Chips ;
2019-05-19 17:39:30 +10:00
2019-06-07 02:11:04 +10:00
// backspace and delete
if ( e . keyCode === 8 || e . keyCode === 46 ) {
e . preventDefault ( ) ;
2019-05-19 17:39:30 +10:00
2019-06-07 02:11:04 +10:00
var selectIndex = currChips . chipsData . length ;
if ( currChips . _selectedChip ) {
var index = currChips . _selectedChip . index ( ) ;
currChips . deleteChip ( index ) ;
currChips . _selectedChip = null ;
2019-05-19 17:39:30 +10:00
2019-06-07 02:11:04 +10:00
// Make sure selectIndex doesn't go negative
selectIndex = Math . max ( index - 1 , 0 ) ;
2019-05-19 17:39:30 +10:00
}
2019-06-07 02:11:04 +10:00
if ( currChips . chipsData . length ) {
currChips . selectChip ( selectIndex ) ;
2019-05-19 17:39:30 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// left arrow key
} else if ( e . keyCode === 37 ) {
if ( currChips . _selectedChip ) {
var _selectIndex = currChips . _selectedChip . index ( ) - 1 ;
if ( _selectIndex < 0 ) {
return ;
}
currChips . selectChip ( _selectIndex ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// right arrow key
} else if ( e . keyCode === 39 ) {
if ( currChips . _selectedChip ) {
var _selectIndex2 = currChips . _selectedChip . index ( ) + 1 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( _selectIndex2 >= currChips . chipsData . length ) {
currChips . $input [ 0 ] . focus ( ) ;
} else {
currChips . selectChip ( _selectIndex2 ) ;
}
2019-05-19 17:39:30 +10:00
}
2019-06-07 02:11:04 +10:00
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Chips Keyup
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleChipsKeyup" ,
value : function _handleChipsKeyup ( e ) {
Chips . _keydown = false ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Chips Blur
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleChipsBlur" ,
value : function _handleChipsBlur ( e ) {
if ( ! Chips . _keydown ) {
var $chips = $ ( e . target ) . closest ( '.chips' ) ;
var currChips = $chips [ 0 ] . M _Chips ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
currChips . _selectedChip = null ;
}
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Chips ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ static
* @ memberof Chips
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Chips . _keydown = false ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . Chips = Chips ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Chips , 'chips' , 'M_Chips' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
$ ( document ) . ready ( function ( ) {
// Handle removal of static chips.
$ ( document . body ) . on ( 'click' , '.chip .close' , function ( ) {
var $chips = $ ( this ) . closest ( '.chips' ) ;
if ( $chips . length && $chips [ 0 ] . M _Chips ) {
return ;
}
$ ( this ) . closest ( '.chip' ) . remove ( ) ;
} ) ;
} ) ;
} ) ( cash ) ;
; ( function ( $ ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
top : 0 ,
bottom : Infinity ,
offset : 0 ,
onPositionChange : null
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ class
*
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var Pushpin = function ( _Component13 ) {
_inherits ( Pushpin , _Component13 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct Pushpin instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Pushpin ( el , options ) {
_classCallCheck ( this , Pushpin ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this47 = _possibleConstructorReturn ( this , ( Pushpin . _ _proto _ _ || Object . getPrototypeOf ( Pushpin ) ) . call ( this , Pushpin , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this47 . el . M _Pushpin = _this47 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Options for the modal
* @ member Pushpin # options
* /
_this47 . options = $ . extend ( { } , Pushpin . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this47 . originalOffset = _this47 . el . offsetTop ;
Pushpin . _pushpins . push ( _this47 ) ;
_this47 . _setupEventHandlers ( ) ;
_this47 . _updatePosition ( ) ;
return _this47 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_createClass ( Pushpin , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . el . style . top = null ;
this . _removePinClasses ( ) ;
this . _removeEventHandlers ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Remove pushpin Inst
var index = Pushpin . _pushpins . indexOf ( this ) ;
Pushpin . _pushpins . splice ( index , 1 ) ;
}
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
document . addEventListener ( 'scroll' , Pushpin . _updateElements ) ;
}
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
document . removeEventListener ( 'scroll' , Pushpin . _updateElements ) ;
}
} , {
key : "_updatePosition" ,
value : function _updatePosition ( ) {
var scrolled = M . getDocumentScrollTop ( ) + this . options . offset ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . options . top <= scrolled && this . options . bottom >= scrolled && ! this . el . classList . contains ( 'pinned' ) ) {
this . _removePinClasses ( ) ;
this . el . style . top = this . options . offset + "px" ;
this . el . classList . add ( 'pinned' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// onPositionChange callback
if ( typeof this . options . onPositionChange === 'function' ) {
this . options . onPositionChange . call ( this , 'pinned' ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Add pin-top (when scrolled position is above top)
if ( scrolled < this . options . top && ! this . el . classList . contains ( 'pin-top' ) ) {
this . _removePinClasses ( ) ;
this . el . style . top = 0 ;
this . el . classList . add ( 'pin-top' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// onPositionChange callback
if ( typeof this . options . onPositionChange === 'function' ) {
this . options . onPositionChange . call ( this , 'pin-top' ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Add pin-bottom (when scrolled position is below bottom)
if ( scrolled > this . options . bottom && ! this . el . classList . contains ( 'pin-bottom' ) ) {
this . _removePinClasses ( ) ;
this . el . classList . add ( 'pin-bottom' ) ;
this . el . style . top = this . options . bottom - this . originalOffset + "px" ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// onPositionChange callback
if ( typeof this . options . onPositionChange === 'function' ) {
this . options . onPositionChange . call ( this , 'pin-bottom' ) ;
2019-05-19 17:39:30 +10:00
}
2019-06-07 02:11:04 +10:00
}
}
} , {
key : "_removePinClasses" ,
value : function _removePinClasses ( ) {
// IE 11 bug (can't remove multiple classes in one line)
this . el . classList . remove ( 'pin-top' ) ;
this . el . classList . remove ( 'pinned' ) ;
this . el . classList . remove ( 'pin-bottom' ) ;
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Pushpin . _ _proto _ _ || Object . getPrototypeOf ( Pushpin ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Pushpin ;
}
} , {
key : "_updateElements" ,
value : function _updateElements ( ) {
for ( var elIndex in Pushpin . _pushpins ) {
var pInstance = Pushpin . _pushpins [ elIndex ] ;
pInstance . _updatePosition ( ) ;
}
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Pushpin ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ static
* @ memberof Pushpin
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Pushpin . _pushpins = [ ] ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . Pushpin = Pushpin ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Pushpin , 'pushpin' , 'M_Pushpin' ) ;
}
} ) ( cash ) ;
; ( function ( $ , anim ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
direction : 'top' ,
hoverEnabled : true ,
toolbarEnabled : false
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
$ . fn . reverse = [ ] . reverse ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ class
*
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var FloatingActionButton = function ( _Component14 ) {
_inherits ( FloatingActionButton , _Component14 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct FloatingActionButton instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function FloatingActionButton ( el , options ) {
_classCallCheck ( this , FloatingActionButton ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this48 = _possibleConstructorReturn ( this , ( FloatingActionButton . _ _proto _ _ || Object . getPrototypeOf ( FloatingActionButton ) ) . call ( this , FloatingActionButton , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this48 . el . M _FloatingActionButton = _this48 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Options for the fab
* @ member FloatingActionButton # options
* @ prop { Boolean } [ direction ] - Direction fab menu opens
* @ prop { Boolean } [ hoverEnabled = true ] - Enable hover vs click
* @ prop { Boolean } [ toolbarEnabled = false ] - Enable toolbar transition
* /
_this48 . options = $ . extend ( { } , FloatingActionButton . defaults , options ) ;
_this48 . isOpen = false ;
_this48 . $anchor = _this48 . $el . children ( 'a' ) . first ( ) ;
_this48 . $menu = _this48 . $el . children ( 'ul' ) . first ( ) ;
_this48 . $floatingBtns = _this48 . $el . find ( 'ul .btn-floating' ) ;
_this48 . $floatingBtnsReverse = _this48 . $el . find ( 'ul .btn-floating' ) . reverse ( ) ;
_this48 . offsetY = 0 ;
_this48 . offsetX = 0 ;
_this48 . $el . addClass ( "direction-" + _this48 . options . direction ) ;
if ( _this48 . options . direction === 'top' ) {
_this48 . offsetY = 40 ;
} else if ( _this48 . options . direction === 'right' ) {
_this48 . offsetX = - 40 ;
} else if ( _this48 . options . direction === 'bottom' ) {
_this48 . offsetY = - 40 ;
} else {
_this48 . offsetX = 40 ;
}
_this48 . _setupEventHandlers ( ) ;
return _this48 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_createClass ( FloatingActionButton , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . el . M _FloatingActionButton = undefined ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleFABClickBound = this . _handleFABClick . bind ( this ) ;
this . _handleOpenBound = this . open . bind ( this ) ;
this . _handleCloseBound = this . close . bind ( this ) ;
if ( this . options . hoverEnabled && ! this . options . toolbarEnabled ) {
this . el . addEventListener ( 'mouseenter' , this . _handleOpenBound ) ;
this . el . addEventListener ( 'mouseleave' , this . _handleCloseBound ) ;
} else {
this . el . addEventListener ( 'click' , this . _handleFABClickBound ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
if ( this . options . hoverEnabled && ! this . options . toolbarEnabled ) {
this . el . removeEventListener ( 'mouseenter' , this . _handleOpenBound ) ;
this . el . removeEventListener ( 'mouseleave' , this . _handleCloseBound ) ;
} else {
this . el . removeEventListener ( 'click' , this . _handleFABClickBound ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle FAB Click
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleFABClick" ,
value : function _handleFABClick ( ) {
if ( this . isOpen ) {
this . close ( ) ;
} else {
this . open ( ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Document Click
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleDocumentClick" ,
value : function _handleDocumentClick ( e ) {
if ( ! $ ( e . target ) . closest ( this . $menu ) . length ) {
this . close ( ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Open FAB
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "open" ,
value : function open ( ) {
if ( this . isOpen ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . options . toolbarEnabled ) {
this . _animateInToolbar ( ) ;
} else {
this . _animateInFAB ( ) ;
}
this . isOpen = true ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Close FAB
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "close" ,
value : function close ( ) {
if ( ! this . isOpen ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . options . toolbarEnabled ) {
window . removeEventListener ( 'scroll' , this . _handleCloseBound , true ) ;
document . body . removeEventListener ( 'click' , this . _handleDocumentClickBound , true ) ;
this . _animateOutToolbar ( ) ;
} else {
this . _animateOutFAB ( ) ;
}
this . isOpen = false ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Classic FAB Menu open
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_animateInFAB" ,
value : function _animateInFAB ( ) {
var _this49 = this ;
this . $el . addClass ( 'active' ) ;
var time = 0 ;
this . $floatingBtnsReverse . each ( function ( el ) {
anim ( {
targets : el ,
opacity : 1 ,
scale : [ 0.4 , 1 ] ,
translateY : [ _this49 . offsetY , 0 ] ,
translateX : [ _this49 . offsetX , 0 ] ,
duration : 275 ,
delay : time ,
easing : 'easeInOutQuad'
} ) ;
time += 40 ;
} ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Classic FAB Menu close
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_animateOutFAB" ,
value : function _animateOutFAB ( ) {
var _this50 = this ;
this . $floatingBtnsReverse . each ( function ( el ) {
anim . remove ( el ) ;
anim ( {
targets : el ,
opacity : 0 ,
scale : 0.4 ,
translateY : _this50 . offsetY ,
translateX : _this50 . offsetX ,
duration : 175 ,
easing : 'easeOutQuad' ,
complete : function ( ) {
_this50 . $el . removeClass ( 'active' ) ;
2019-05-19 17:39:30 +10:00
}
2019-06-07 02:11:04 +10:00
} ) ;
} ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Toolbar transition Menu open
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_animateInToolbar" ,
value : function _animateInToolbar ( ) {
var _this51 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var scaleFactor = void 0 ;
var windowWidth = window . innerWidth ;
var windowHeight = window . innerHeight ;
var btnRect = this . el . getBoundingClientRect ( ) ;
var backdrop = $ ( '<div class="fab-backdrop"></div>' ) ;
var fabColor = this . $anchor . css ( 'background-color' ) ;
this . $anchor . append ( backdrop ) ;
this . offsetX = btnRect . left - windowWidth / 2 + btnRect . width / 2 ;
this . offsetY = windowHeight - btnRect . bottom ;
scaleFactor = windowWidth / backdrop [ 0 ] . clientWidth ;
this . btnBottom = btnRect . bottom ;
this . btnLeft = btnRect . left ;
this . btnWidth = btnRect . width ;
// Set initial state
this . $el . addClass ( 'active' ) ;
this . $el . css ( {
'text-align' : 'center' ,
width : '100%' ,
bottom : 0 ,
left : 0 ,
transform : 'translateX(' + this . offsetX + 'px)' ,
transition : 'none'
} ) ;
this . $anchor . css ( {
transform : 'translateY(' + - this . offsetY + 'px)' ,
transition : 'none'
} ) ;
backdrop . css ( {
'background-color' : fabColor
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
setTimeout ( function ( ) {
_this51 . $el . css ( {
transform : '' ,
transition : 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
} ) ;
_this51 . $anchor . css ( {
overflow : 'visible' ,
transform : '' ,
transition : 'transform .2s'
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
setTimeout ( function ( ) {
_this51 . $el . css ( {
overflow : 'hidden' ,
'background-color' : fabColor
} ) ;
backdrop . css ( {
transform : 'scale(' + scaleFactor + ')' ,
transition : 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
} ) ;
_this51 . $menu . children ( 'li' ) . children ( 'a' ) . css ( {
opacity : 1
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Scroll to close.
_this51 . _handleDocumentClickBound = _this51 . _handleDocumentClick . bind ( _this51 ) ;
window . addEventListener ( 'scroll' , _this51 . _handleCloseBound , true ) ;
document . body . addEventListener ( 'click' , _this51 . _handleDocumentClickBound , true ) ;
} , 100 ) ;
} , 0 ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Toolbar transition Menu close
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_animateOutToolbar" ,
value : function _animateOutToolbar ( ) {
var _this52 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var windowWidth = window . innerWidth ;
var windowHeight = window . innerHeight ;
var backdrop = this . $el . find ( '.fab-backdrop' ) ;
var fabColor = this . $anchor . css ( 'background-color' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . offsetX = this . btnLeft - windowWidth / 2 + this . btnWidth / 2 ;
this . offsetY = windowHeight - this . btnBottom ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Hide backdrop
this . $el . removeClass ( 'active' ) ;
this . $el . css ( {
'background-color' : 'transparent' ,
transition : 'none'
} ) ;
this . $anchor . css ( {
transition : 'none'
} ) ;
backdrop . css ( {
transform : 'scale(0)' ,
'background-color' : fabColor
} ) ;
this . $menu . children ( 'li' ) . children ( 'a' ) . css ( {
opacity : ''
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
setTimeout ( function ( ) {
backdrop . remove ( ) ;
// Set initial state.
_this52 . $el . css ( {
'text-align' : '' ,
width : '' ,
bottom : '' ,
left : '' ,
overflow : '' ,
'background-color' : '' ,
transform : 'translate3d(' + - _this52 . offsetX + 'px,0,0)'
} ) ;
_this52 . $anchor . css ( {
overflow : '' ,
transform : 'translate3d(0,' + _this52 . offsetY + 'px,0)'
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
setTimeout ( function ( ) {
_this52 . $el . css ( {
transform : 'translate3d(0,0,0)' ,
transition : 'transform .2s'
} ) ;
_this52 . $anchor . css ( {
transform : 'translate3d(0,0,0)' ,
transition : 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
} ) ;
} , 20 ) ;
} , 200 ) ;
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( FloatingActionButton . _ _proto _ _ || Object . getPrototypeOf ( FloatingActionButton ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _FloatingActionButton ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return FloatingActionButton ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . FloatingActionButton = FloatingActionButton ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( FloatingActionButton , 'floatingActionButton' , 'M_FloatingActionButton' ) ;
}
} ) ( cash , M . anime ) ;
; ( function ( $ ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
// Close when date is selected
autoClose : false ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// the default output format for the input field value
format : 'mmm dd, yyyy' ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Used to create date object from current input string
parse : null ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// The initial date to view when first opened
defaultDate : null ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Make the `defaultDate` the initial selected value
setDefaultDate : false ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
disableWeekends : false ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
disableDayFn : null ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// First day of week (0: Sunday, 1: Monday etc)
firstDay : 0 ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// The earliest date that can be selected
minDate : null ,
// Thelatest date that can be selected
maxDate : null ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Number of years either side, or array of upper/lower range
yearRange : 10 ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// used internally (don't config outside)
minYear : 0 ,
maxYear : 9999 ,
minMonth : undefined ,
maxMonth : undefined ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
startRange : null ,
endRange : null ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
isRTL : false ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Render the month after year in the calendar title
showMonthAfterYear : false ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Render days of the calendar grid that fall in the next or previous month
showDaysInNextAndPreviousMonths : false ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Specify a DOM element to render the calendar in
container : null ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Show clear button
showClearBtn : false ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// internationalization
i18n : {
cancel : 'Cancel' ,
clear : 'Clear' ,
done : 'Ok' ,
previousMonth : '‹ ' ,
nextMonth : '› ' ,
months : [ 'January' , 'February' , 'March' , 'April' , 'May' , 'June' , 'July' , 'August' , 'September' , 'October' , 'November' , 'December' ] ,
monthsShort : [ 'Jan' , 'Feb' , 'Mar' , 'Apr' , 'May' , 'Jun' , 'Jul' , 'Aug' , 'Sep' , 'Oct' , 'Nov' , 'Dec' ] ,
weekdays : [ 'Sunday' , 'Monday' , 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' ] ,
weekdaysShort : [ 'Sun' , 'Mon' , 'Tue' , 'Wed' , 'Thu' , 'Fri' , 'Sat' ] ,
weekdaysAbbrev : [ 'S' , 'M' , 'T' , 'W' , 'T' , 'F' , 'S' ]
} ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// events array
events : [ ] ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// callback function
onSelect : null ,
onOpen : null ,
onClose : null ,
onDraw : null
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ class
*
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var Datepicker = function ( _Component15 ) {
_inherits ( Datepicker , _Component15 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct Datepicker instance and set up overlay
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Datepicker ( el , options ) {
_classCallCheck ( this , Datepicker ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this53 = _possibleConstructorReturn ( this , ( Datepicker . _ _proto _ _ || Object . getPrototypeOf ( Datepicker ) ) . call ( this , Datepicker , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this53 . el . M _Datepicker = _this53 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this53 . options = $ . extend ( { } , Datepicker . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// make sure i18n defaults are not lost when only few i18n option properties are passed
if ( ! ! options && options . hasOwnProperty ( 'i18n' ) && typeof options . i18n === 'object' ) {
_this53 . options . i18n = $ . extend ( { } , Datepicker . defaults . i18n , options . i18n ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Remove time component from minDate and maxDate options
if ( _this53 . options . minDate ) _this53 . options . minDate . setHours ( 0 , 0 , 0 , 0 ) ;
if ( _this53 . options . maxDate ) _this53 . options . maxDate . setHours ( 0 , 0 , 0 , 0 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this53 . id = M . guid ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this53 . _setupVariables ( ) ;
_this53 . _insertHTMLIntoDOM ( ) ;
_this53 . _setupModal ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this53 . _setupEventHandlers ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( ! _this53 . options . defaultDate ) {
_this53 . options . defaultDate = new Date ( Date . parse ( _this53 . el . value ) ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var defDate = _this53 . options . defaultDate ;
if ( Datepicker . _isDate ( defDate ) ) {
if ( _this53 . options . setDefaultDate ) {
_this53 . setDate ( defDate , true ) ;
_this53 . setInputValue ( ) ;
} else {
_this53 . gotoDate ( defDate ) ;
}
} else {
_this53 . gotoDate ( new Date ( ) ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Describes open / close state of datepicker
* @ type { Boolean }
* /
_this53 . isOpen = false ;
return _this53 ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
_createClass ( Datepicker , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . modal . destroy ( ) ;
$ ( this . modalEl ) . remove ( ) ;
this . destroySelects ( ) ;
this . el . M _Datepicker = undefined ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} , {
key : "destroySelects" ,
value : function destroySelects ( ) {
var oldYearSelect = this . calendarEl . querySelector ( '.orig-select-year' ) ;
if ( oldYearSelect ) {
M . FormSelect . getInstance ( oldYearSelect ) . destroy ( ) ;
}
var oldMonthSelect = this . calendarEl . querySelector ( '.orig-select-month' ) ;
if ( oldMonthSelect ) {
M . FormSelect . getInstance ( oldMonthSelect ) . destroy ( ) ;
}
}
} , {
key : "_insertHTMLIntoDOM" ,
value : function _insertHTMLIntoDOM ( ) {
if ( this . options . showClearBtn ) {
$ ( this . clearBtn ) . css ( { visibility : '' } ) ;
this . clearBtn . innerHTML = this . options . i18n . clear ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . doneBtn . innerHTML = this . options . i18n . done ;
this . cancelBtn . innerHTML = this . options . i18n . cancel ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . options . container ) {
this . $modalEl . appendTo ( this . options . container ) ;
} else {
this . $modalEl . insertBefore ( this . el ) ;
}
}
} , {
key : "_setupModal" ,
value : function _setupModal ( ) {
var _this54 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . modalEl . id = 'modal-' + this . id ;
this . modal = M . Modal . init ( this . modalEl , {
onCloseEnd : function ( ) {
_this54 . isOpen = false ;
}
2019-05-19 17:39:30 +10:00
} ) ;
2019-06-07 02:11:04 +10:00
}
} , {
key : "toString" ,
value : function toString ( format ) {
var _this55 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
format = format || this . options . format ;
if ( ! Datepicker . _isDate ( this . date ) ) {
return '' ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var formatArray = format . split ( /(d{1,4}|m{1,4}|y{4}|yy|!.)/g ) ;
var formattedDate = formatArray . map ( function ( label ) {
if ( _this55 . formats [ label ] ) {
return _this55 . formats [ label ] ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return label ;
} ) . join ( '' ) ;
return formattedDate ;
}
} , {
key : "setDate" ,
value : function setDate ( date , preventOnSelect ) {
if ( ! date ) {
this . date = null ;
this . _renderDateDisplay ( ) ;
return this . draw ( ) ;
}
if ( typeof date === 'string' ) {
date = new Date ( Date . parse ( date ) ) ;
}
if ( ! Datepicker . _isDate ( date ) ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var min = this . options . minDate ,
max = this . options . maxDate ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( Datepicker . _isDate ( min ) && date < min ) {
date = min ;
} else if ( Datepicker . _isDate ( max ) && date > max ) {
date = max ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . date = new Date ( date . getTime ( ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . _renderDateDisplay ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Datepicker . _setToStartOfDay ( this . date ) ;
this . gotoDate ( this . date ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( ! preventOnSelect && typeof this . options . onSelect === 'function' ) {
this . options . onSelect . call ( this , this . date ) ;
2018-01-28 23:22:43 +11:00
}
}
2019-06-07 02:11:04 +10:00
} , {
key : "setInputValue" ,
value : function setInputValue ( ) {
this . el . value = this . toString ( ) ;
this . $el . trigger ( 'change' , { firedBy : this } ) ;
}
} , {
key : "_renderDateDisplay" ,
value : function _renderDateDisplay ( ) {
var displayDate = Datepicker . _isDate ( this . date ) ? this . date : new Date ( ) ;
var i18n = this . options . i18n ;
var day = i18n . weekdaysShort [ displayDate . getDay ( ) ] ;
var month = i18n . monthsShort [ displayDate . getMonth ( ) ] ;
var date = displayDate . getDate ( ) ;
this . yearTextEl . innerHTML = displayDate . getFullYear ( ) ;
this . dateTextEl . innerHTML = day + ", " + month + " " + date ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* change view to a specific date
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "gotoDate" ,
value : function gotoDate ( date ) {
var newCalendar = true ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( ! Datepicker . _isDate ( date ) ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . calendars ) {
var firstVisibleDate = new Date ( this . calendars [ 0 ] . year , this . calendars [ 0 ] . month , 1 ) ,
lastVisibleDate = new Date ( this . calendars [ this . calendars . length - 1 ] . year , this . calendars [ this . calendars . length - 1 ] . month , 1 ) ,
visibleDate = date . getTime ( ) ;
// get the end of the month
lastVisibleDate . setMonth ( lastVisibleDate . getMonth ( ) + 1 ) ;
lastVisibleDate . setDate ( lastVisibleDate . getDate ( ) - 1 ) ;
newCalendar = visibleDate < firstVisibleDate . getTime ( ) || lastVisibleDate . getTime ( ) < visibleDate ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( newCalendar ) {
this . calendars = [ {
month : date . getMonth ( ) ,
year : date . getFullYear ( )
} ] ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . adjustCalendars ( ) ;
}
} , {
key : "adjustCalendars" ,
value : function adjustCalendars ( ) {
this . calendars [ 0 ] = this . adjustCalendar ( this . calendars [ 0 ] ) ;
this . draw ( ) ;
}
} , {
key : "adjustCalendar" ,
value : function adjustCalendar ( calendar ) {
if ( calendar . month < 0 ) {
calendar . year -= Math . ceil ( Math . abs ( calendar . month ) / 12 ) ;
calendar . month += 12 ;
}
if ( calendar . month > 11 ) {
calendar . year += Math . floor ( Math . abs ( calendar . month ) / 12 ) ;
calendar . month -= 12 ;
}
return calendar ;
}
} , {
key : "nextMonth" ,
value : function nextMonth ( ) {
this . calendars [ 0 ] . month ++ ;
this . adjustCalendars ( ) ;
}
} , {
key : "prevMonth" ,
value : function prevMonth ( ) {
this . calendars [ 0 ] . month -- ;
this . adjustCalendars ( ) ;
}
} , {
key : "render" ,
value : function render ( year , month , randId ) {
var opts = this . options ,
now = new Date ( ) ,
days = Datepicker . _getDaysInMonth ( year , month ) ,
before = new Date ( year , month , 1 ) . getDay ( ) ,
data = [ ] ,
row = [ ] ;
Datepicker . _setToStartOfDay ( now ) ;
if ( opts . firstDay > 0 ) {
before -= opts . firstDay ;
if ( before < 0 ) {
before += 7 ;
}
}
var previousMonth = month === 0 ? 11 : month - 1 ,
nextMonth = month === 11 ? 0 : month + 1 ,
yearOfPreviousMonth = month === 0 ? year - 1 : year ,
yearOfNextMonth = month === 11 ? year + 1 : year ,
daysInPreviousMonth = Datepicker . _getDaysInMonth ( yearOfPreviousMonth , previousMonth ) ;
var cells = days + before ,
after = cells ;
while ( after > 7 ) {
after -= 7 ;
}
cells += 7 - after ;
var isWeekSelected = false ;
for ( var i = 0 , r = 0 ; i < cells ; i ++ ) {
var day = new Date ( year , month , 1 + ( i - before ) ) ,
isSelected = Datepicker . _isDate ( this . date ) ? Datepicker . _compareDates ( day , this . date ) : false ,
isToday = Datepicker . _compareDates ( day , now ) ,
hasEvent = opts . events . indexOf ( day . toDateString ( ) ) !== - 1 ? true : false ,
isEmpty = i < before || i >= days + before ,
dayNumber = 1 + ( i - before ) ,
monthNumber = month ,
yearNumber = year ,
isStartRange = opts . startRange && Datepicker . _compareDates ( opts . startRange , day ) ,
isEndRange = opts . endRange && Datepicker . _compareDates ( opts . endRange , day ) ,
isInRange = opts . startRange && opts . endRange && opts . startRange < day && day < opts . endRange ,
isDisabled = opts . minDate && day < opts . minDate || opts . maxDate && day > opts . maxDate || opts . disableWeekends && Datepicker . _isWeekend ( day ) || opts . disableDayFn && opts . disableDayFn ( day ) ;
if ( isEmpty ) {
if ( i < before ) {
dayNumber = daysInPreviousMonth + dayNumber ;
monthNumber = previousMonth ;
yearNumber = yearOfPreviousMonth ;
} else {
dayNumber = dayNumber - days ;
monthNumber = nextMonth ;
yearNumber = yearOfNextMonth ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var dayConfig = {
day : dayNumber ,
month : monthNumber ,
year : yearNumber ,
hasEvent : hasEvent ,
isSelected : isSelected ,
isToday : isToday ,
isDisabled : isDisabled ,
isEmpty : isEmpty ,
isStartRange : isStartRange ,
isEndRange : isEndRange ,
isInRange : isInRange ,
showDaysInNextAndPreviousMonths : opts . showDaysInNextAndPreviousMonths
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
row . push ( this . renderDay ( dayConfig ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( ++ r === 7 ) {
data . push ( this . renderRow ( row , opts . isRTL , isWeekSelected ) ) ;
row = [ ] ;
r = 0 ;
isWeekSelected = false ;
}
}
return this . renderTable ( opts , data , randId ) ;
}
} , {
key : "renderDay" ,
value : function renderDay ( opts ) {
var arr = [ ] ;
var ariaSelected = 'false' ;
if ( opts . isEmpty ) {
if ( opts . showDaysInNextAndPreviousMonths ) {
arr . push ( 'is-outside-current-month' ) ;
arr . push ( 'is-selection-disabled' ) ;
} else {
return '<td class="is-empty"></td>' ;
}
}
if ( opts . isDisabled ) {
arr . push ( 'is-disabled' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( opts . isToday ) {
arr . push ( 'is-today' ) ;
}
if ( opts . isSelected ) {
arr . push ( 'is-selected' ) ;
ariaSelected = 'true' ;
}
if ( opts . hasEvent ) {
arr . push ( 'has-event' ) ;
}
if ( opts . isInRange ) {
arr . push ( 'is-inrange' ) ;
}
if ( opts . isStartRange ) {
arr . push ( 'is-startrange' ) ;
}
if ( opts . isEndRange ) {
arr . push ( 'is-endrange' ) ;
}
return "<td data-day=\"" + opts . day + "\" class=\"" + arr . join ( ' ' ) + "\" aria-selected=\"" + ariaSelected + "\">" + ( "<button class=\"datepicker-day-button\" type=\"button\" data-year=\"" + opts . year + "\" data-month=\"" + opts . month + "\" data-day=\"" + opts . day + "\">" + opts . day + "</button>" ) + '</td>' ;
}
} , {
key : "renderRow" ,
value : function renderRow ( days , isRTL , isRowSelected ) {
return '<tr class="datepicker-row' + ( isRowSelected ? ' is-selected' : '' ) + '">' + ( isRTL ? days . reverse ( ) : days ) . join ( '' ) + '</tr>' ;
}
} , {
key : "renderTable" ,
value : function renderTable ( opts , data , randId ) {
return '<div class="datepicker-table-wrapper"><table cellpadding="0" cellspacing="0" class="datepicker-table" role="grid" aria-labelledby="' + randId + '">' + this . renderHead ( opts ) + this . renderBody ( data ) + '</table></div>' ;
}
} , {
key : "renderHead" ,
value : function renderHead ( opts ) {
var i = void 0 ,
arr = [ ] ;
for ( i = 0 ; i < 7 ; i ++ ) {
arr . push ( "<th scope=\"col\"><abbr title=\"" + this . renderDayName ( opts , i ) + "\">" + this . renderDayName ( opts , i , true ) + "</abbr></th>" ) ;
}
return '<thead><tr>' + ( opts . isRTL ? arr . reverse ( ) : arr ) . join ( '' ) + '</tr></thead>' ;
}
} , {
key : "renderBody" ,
value : function renderBody ( rows ) {
return '<tbody>' + rows . join ( '' ) + '</tbody>' ;
}
} , {
key : "renderTitle" ,
value : function renderTitle ( instance , c , year , month , refYear , randId ) {
var i = void 0 ,
j = void 0 ,
arr = void 0 ,
opts = this . options ,
isMinYear = year === opts . minYear ,
isMaxYear = year === opts . maxYear ,
html = '<div id="' + randId + '" class="datepicker-controls" role="heading" aria-live="assertive">' ,
monthHtml = void 0 ,
yearHtml = void 0 ,
prev = true ,
next = true ;
for ( arr = [ ] , i = 0 ; i < 12 ; i ++ ) {
arr . push ( '<option value="' + ( year === refYear ? i - c : 12 + i - c ) + '"' + ( i === month ? ' selected="selected"' : '' ) + ( isMinYear && i < opts . minMonth || isMaxYear && i > opts . maxMonth ? 'disabled="disabled"' : '' ) + '>' + opts . i18n . months [ i ] + '</option>' ) ;
}
monthHtml = '<select class="datepicker-select orig-select-month" tabindex="-1">' + arr . join ( '' ) + '</select>' ;
if ( $ . isArray ( opts . yearRange ) ) {
i = opts . yearRange [ 0 ] ;
j = opts . yearRange [ 1 ] + 1 ;
} else {
i = year - opts . yearRange ;
j = 1 + year + opts . yearRange ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
for ( arr = [ ] ; i < j && i <= opts . maxYear ; i ++ ) {
if ( i >= opts . minYear ) {
arr . push ( "<option value=\"" + i + "\" " + ( i === year ? 'selected="selected"' : '' ) + ">" + i + "</option>" ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
yearHtml = "<select class=\"datepicker-select orig-select-year\" tabindex=\"-1\">" + arr . join ( '' ) + "</select>" ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var leftArrow = '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>' ;
html += "<button class=\"month-prev" + ( prev ? '' : ' is-disabled' ) + "\" type=\"button\">" + leftArrow + "</button>" ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
html += '<div class="selects-container">' ;
if ( opts . showMonthAfterYear ) {
html += yearHtml + monthHtml ;
} else {
html += monthHtml + yearHtml ;
}
html += '</div>' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( isMinYear && ( month === 0 || opts . minMonth >= month ) ) {
prev = false ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( isMaxYear && ( month === 11 || opts . maxMonth <= month ) ) {
next = false ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var rightArrow = '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>' ;
html += "<button class=\"month-next" + ( next ? '' : ' is-disabled' ) + "\" type=\"button\">" + rightArrow + "</button>" ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return html += '</div>' ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* refresh the HTML
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "draw" ,
value : function draw ( force ) {
if ( ! this . isOpen && ! force ) {
return ;
}
var opts = this . options ,
minYear = opts . minYear ,
maxYear = opts . maxYear ,
minMonth = opts . minMonth ,
maxMonth = opts . maxMonth ,
html = '' ,
randId = void 0 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . _y <= minYear ) {
this . _y = minYear ;
if ( ! isNaN ( minMonth ) && this . _m < minMonth ) {
this . _m = minMonth ;
}
}
if ( this . _y >= maxYear ) {
this . _y = maxYear ;
if ( ! isNaN ( maxMonth ) && this . _m > maxMonth ) {
this . _m = maxMonth ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
randId = 'datepicker-title-' + Math . random ( ) . toString ( 36 ) . replace ( /[^a-z]+/g , '' ) . substr ( 0 , 2 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
for ( var c = 0 ; c < 1 ; c ++ ) {
this . _renderDateDisplay ( ) ;
html += this . renderTitle ( this , c , this . calendars [ c ] . year , this . calendars [ c ] . month , this . calendars [ 0 ] . year , randId ) + this . render ( this . calendars [ c ] . year , this . calendars [ c ] . month , randId ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . destroySelects ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . calendarEl . innerHTML = html ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Init Materialize Select
var yearSelect = this . calendarEl . querySelector ( '.orig-select-year' ) ;
var monthSelect = this . calendarEl . querySelector ( '.orig-select-month' ) ;
M . FormSelect . init ( yearSelect , {
classes : 'select-year' ,
dropdownOptions : { container : document . body , constrainWidth : false }
} ) ;
M . FormSelect . init ( monthSelect , {
classes : 'select-month' ,
dropdownOptions : { container : document . body , constrainWidth : false }
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Add change handlers for select
yearSelect . addEventListener ( 'change' , this . _handleYearChange . bind ( this ) ) ;
monthSelect . addEventListener ( 'change' , this . _handleMonthChange . bind ( this ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( typeof this . options . onDraw === 'function' ) {
this . options . onDraw ( this ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleInputKeydownBound = this . _handleInputKeydown . bind ( this ) ;
this . _handleInputClickBound = this . _handleInputClick . bind ( this ) ;
this . _handleInputChangeBound = this . _handleInputChange . bind ( this ) ;
this . _handleCalendarClickBound = this . _handleCalendarClick . bind ( this ) ;
this . _finishSelectionBound = this . _finishSelection . bind ( this ) ;
this . _handleMonthChange = this . _handleMonthChange . bind ( this ) ;
this . _closeBound = this . close . bind ( this ) ;
this . el . addEventListener ( 'click' , this . _handleInputClickBound ) ;
this . el . addEventListener ( 'keydown' , this . _handleInputKeydownBound ) ;
this . el . addEventListener ( 'change' , this . _handleInputChangeBound ) ;
this . calendarEl . addEventListener ( 'click' , this . _handleCalendarClickBound ) ;
this . doneBtn . addEventListener ( 'click' , this . _finishSelectionBound ) ;
this . cancelBtn . addEventListener ( 'click' , this . _closeBound ) ;
if ( this . options . showClearBtn ) {
this . _handleClearClickBound = this . _handleClearClick . bind ( this ) ;
this . clearBtn . addEventListener ( 'click' , this . _handleClearClickBound ) ;
}
}
} , {
key : "_setupVariables" ,
value : function _setupVariables ( ) {
var _this56 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . $modalEl = $ ( Datepicker . _template ) ;
this . modalEl = this . $modalEl [ 0 ] ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . calendarEl = this . modalEl . querySelector ( '.datepicker-calendar' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . yearTextEl = this . modalEl . querySelector ( '.year-text' ) ;
this . dateTextEl = this . modalEl . querySelector ( '.date-text' ) ;
if ( this . options . showClearBtn ) {
this . clearBtn = this . modalEl . querySelector ( '.datepicker-clear' ) ;
}
this . doneBtn = this . modalEl . querySelector ( '.datepicker-done' ) ;
this . cancelBtn = this . modalEl . querySelector ( '.datepicker-cancel' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . formats = {
d : function ( ) {
return _this56 . date . getDate ( ) ;
} ,
dd : function ( ) {
var d = _this56 . date . getDate ( ) ;
return ( d < 10 ? '0' : '' ) + d ;
} ,
ddd : function ( ) {
return _this56 . options . i18n . weekdaysShort [ _this56 . date . getDay ( ) ] ;
} ,
dddd : function ( ) {
return _this56 . options . i18n . weekdays [ _this56 . date . getDay ( ) ] ;
} ,
m : function ( ) {
return _this56 . date . getMonth ( ) + 1 ;
} ,
mm : function ( ) {
var m = _this56 . date . getMonth ( ) + 1 ;
return ( m < 10 ? '0' : '' ) + m ;
} ,
mmm : function ( ) {
return _this56 . options . i18n . monthsShort [ _this56 . date . getMonth ( ) ] ;
} ,
mmmm : function ( ) {
return _this56 . options . i18n . months [ _this56 . date . getMonth ( ) ] ;
} ,
yy : function ( ) {
return ( '' + _this56 . date . getFullYear ( ) ) . slice ( 2 ) ;
} ,
yyyy : function ( ) {
return _this56 . date . getFullYear ( ) ;
}
} ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
this . el . removeEventListener ( 'click' , this . _handleInputClickBound ) ;
this . el . removeEventListener ( 'keydown' , this . _handleInputKeydownBound ) ;
this . el . removeEventListener ( 'change' , this . _handleInputChangeBound ) ;
this . calendarEl . removeEventListener ( 'click' , this . _handleCalendarClickBound ) ;
}
} , {
key : "_handleInputClick" ,
value : function _handleInputClick ( ) {
this . open ( ) ;
}
} , {
key : "_handleInputKeydown" ,
value : function _handleInputKeydown ( e ) {
if ( e . which === M . keys . ENTER ) {
e . preventDefault ( ) ;
this . open ( ) ;
}
}
} , {
key : "_handleCalendarClick" ,
value : function _handleCalendarClick ( e ) {
if ( ! this . isOpen ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var $target = $ ( e . target ) ;
if ( ! $target . hasClass ( 'is-disabled' ) ) {
if ( $target . hasClass ( 'datepicker-day-button' ) && ! $target . hasClass ( 'is-empty' ) && ! $target . parent ( ) . hasClass ( 'is-disabled' ) ) {
this . setDate ( new Date ( e . target . getAttribute ( 'data-year' ) , e . target . getAttribute ( 'data-month' ) , e . target . getAttribute ( 'data-day' ) ) ) ;
if ( this . options . autoClose ) {
this . _finishSelection ( ) ;
}
} else if ( $target . closest ( '.month-prev' ) . length ) {
this . prevMonth ( ) ;
} else if ( $target . closest ( '.month-next' ) . length ) {
this . nextMonth ( ) ;
}
}
}
} , {
key : "_handleClearClick" ,
value : function _handleClearClick ( ) {
this . date = null ;
this . setInputValue ( ) ;
this . close ( ) ;
}
} , {
key : "_handleMonthChange" ,
value : function _handleMonthChange ( e ) {
this . gotoMonth ( e . target . value ) ;
}
} , {
key : "_handleYearChange" ,
value : function _handleYearChange ( e ) {
this . gotoYear ( e . target . value ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* change view to a specific month ( zero - index , e . g . 0 : January )
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "gotoMonth" ,
value : function gotoMonth ( month ) {
if ( ! isNaN ( month ) ) {
this . calendars [ 0 ] . month = parseInt ( month , 10 ) ;
this . adjustCalendars ( ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* change view to a specific full year ( e . g . "2012" )
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "gotoYear" ,
value : function gotoYear ( year ) {
if ( ! isNaN ( year ) ) {
this . calendars [ 0 ] . year = parseInt ( year , 10 ) ;
this . adjustCalendars ( ) ;
}
}
} , {
key : "_handleInputChange" ,
value : function _handleInputChange ( e ) {
var date = void 0 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Prevent change event from being fired when triggered by the plugin
if ( e . firedBy === this ) {
return ;
}
if ( this . options . parse ) {
date = this . options . parse ( this . el . value , this . options . format ) ;
} else {
date = new Date ( Date . parse ( this . el . value ) ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( Datepicker . _isDate ( date ) ) {
this . setDate ( date ) ;
}
}
} , {
key : "renderDayName" ,
value : function renderDayName ( opts , day , abbr ) {
day += opts . firstDay ;
while ( day >= 7 ) {
day -= 7 ;
}
return abbr ? opts . i18n . weekdaysAbbrev [ day ] : opts . i18n . weekdays [ day ] ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Set input value to the selected date and close Datepicker
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_finishSelection" ,
value : function _finishSelection ( ) {
this . setInputValue ( ) ;
this . close ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Open Datepicker
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "open" ,
value : function open ( ) {
if ( this . isOpen ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . isOpen = true ;
if ( typeof this . options . onOpen === 'function' ) {
this . options . onOpen . call ( this ) ;
}
this . draw ( ) ;
this . modal . open ( ) ;
return this ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Close Datepicker
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "close" ,
value : function close ( ) {
if ( ! this . isOpen ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . isOpen = false ;
if ( typeof this . options . onClose === 'function' ) {
this . options . onClose . call ( this ) ;
}
this . modal . close ( ) ;
return this ;
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Datepicker . _ _proto _ _ || Object . getPrototypeOf ( Datepicker ) , "init" , this ) . call ( this , this , els , options ) ;
}
} , {
key : "_isDate" ,
value : function _isDate ( obj ) {
return ( /Date/ . test ( Object . prototype . toString . call ( obj ) ) && ! isNaN ( obj . getTime ( ) )
) ;
}
} , {
key : "_isWeekend" ,
value : function _isWeekend ( date ) {
var day = date . getDay ( ) ;
return day === 0 || day === 6 ;
}
} , {
key : "_setToStartOfDay" ,
value : function _setToStartOfDay ( date ) {
if ( Datepicker . _isDate ( date ) ) date . setHours ( 0 , 0 , 0 , 0 ) ;
}
} , {
key : "_getDaysInMonth" ,
value : function _getDaysInMonth ( year , month ) {
return [ 31 , Datepicker . _isLeapYear ( year ) ? 29 : 28 , 31 , 30 , 31 , 30 , 31 , 31 , 30 , 31 , 30 , 31 ] [ month ] ;
}
} , {
key : "_isLeapYear" ,
value : function _isLeapYear ( year ) {
// solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0 ;
}
} , {
key : "_compareDates" ,
value : function _compareDates ( a , b ) {
// weak date comparison (use setToStartOfDay(date) to ensure correct result)
return a . getTime ( ) === b . getTime ( ) ;
}
} , {
key : "_setToStartOfDay" ,
value : function _setToStartOfDay ( date ) {
if ( Datepicker . _isDate ( date ) ) date . setHours ( 0 , 0 , 0 , 0 ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Datepicker ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Datepicker ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Datepicker . _template = [ '<div class= "modal datepicker-modal">' , '<div class="modal-content datepicker-container">' , '<div class="datepicker-date-display">' , '<span class="year-text"></span>' , '<span class="date-text"></span>' , '</div>' , '<div class="datepicker-calendar-container">' , '<div class="datepicker-calendar"></div>' , '<div class="datepicker-footer">' , '<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>' , '<div class="confirmation-btns">' , '<button class="btn-flat datepicker-cancel waves-effect" type="button"></button>' , '<button class="btn-flat datepicker-done waves-effect" type="button"></button>' , '</div>' , '</div>' , '</div>' , '</div>' , '</div>' ] . join ( '' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . Datepicker = Datepicker ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Datepicker , 'datepicker' , 'M_Datepicker' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} ) ( cash ) ;
; ( function ( $ ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
dialRadius : 135 ,
outerRadius : 105 ,
innerRadius : 70 ,
tickRadius : 20 ,
duration : 350 ,
container : null ,
defaultTime : 'now' , // default time, 'now' or '13:14' e.g.
fromNow : 0 , // Millisecond offset from the defaultTime
showClearBtn : false ,
// internationalization
i18n : {
cancel : 'Cancel' ,
clear : 'Clear' ,
done : 'Ok'
} ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
autoClose : false , // auto close when minute is selected
twelveHour : true , // change to 12 hour AM/PM clock from 24 hour
vibrate : true , // vibrate the device when dragging clock hand
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Callbacks
onOpenStart : null ,
onOpenEnd : null ,
onCloseStart : null ,
onCloseEnd : null ,
onSelect : null
} ;
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* @ class
*
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
var Timepicker = function ( _Component16 ) {
_inherits ( Timepicker , _Component16 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
function Timepicker ( el , options ) {
_classCallCheck ( this , Timepicker ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this57 = _possibleConstructorReturn ( this , ( Timepicker . _ _proto _ _ || Object . getPrototypeOf ( Timepicker ) ) . call ( this , Timepicker , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this57 . el . M _Timepicker = _this57 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this57 . options = $ . extend ( { } , Timepicker . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this57 . id = M . guid ( ) ;
_this57 . _insertHTMLIntoDOM ( ) ;
_this57 . _setupModal ( ) ;
_this57 . _setupVariables ( ) ;
_this57 . _setupEventHandlers ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this57 . _clockSetup ( ) ;
_this57 . _pickerSetup ( ) ;
return _this57 ;
2019-05-19 17:39:30 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_createClass ( Timepicker , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . modal . destroy ( ) ;
$ ( this . modalEl ) . remove ( ) ;
this . el . M _Timepicker = undefined ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleInputKeydownBound = this . _handleInputKeydown . bind ( this ) ;
this . _handleInputClickBound = this . _handleInputClick . bind ( this ) ;
this . _handleClockClickStartBound = this . _handleClockClickStart . bind ( this ) ;
this . _handleDocumentClickMoveBound = this . _handleDocumentClickMove . bind ( this ) ;
this . _handleDocumentClickEndBound = this . _handleDocumentClickEnd . bind ( this ) ;
this . el . addEventListener ( 'click' , this . _handleInputClickBound ) ;
this . el . addEventListener ( 'keydown' , this . _handleInputKeydownBound ) ;
this . plate . addEventListener ( 'mousedown' , this . _handleClockClickStartBound ) ;
this . plate . addEventListener ( 'touchstart' , this . _handleClockClickStartBound ) ;
$ ( this . spanHours ) . on ( 'click' , this . showView . bind ( this , 'hours' ) ) ;
$ ( this . spanMinutes ) . on ( 'click' , this . showView . bind ( this , 'minutes' ) ) ;
}
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
this . el . removeEventListener ( 'click' , this . _handleInputClickBound ) ;
this . el . removeEventListener ( 'keydown' , this . _handleInputKeydownBound ) ;
}
} , {
key : "_handleInputClick" ,
value : function _handleInputClick ( ) {
this . open ( ) ;
}
} , {
key : "_handleInputKeydown" ,
value : function _handleInputKeydown ( e ) {
if ( e . which === M . keys . ENTER ) {
e . preventDefault ( ) ;
this . open ( ) ;
}
}
} , {
key : "_handleClockClickStart" ,
value : function _handleClockClickStart ( e ) {
e . preventDefault ( ) ;
var clockPlateBR = this . plate . getBoundingClientRect ( ) ;
var offset = { x : clockPlateBR . left , y : clockPlateBR . top } ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . x0 = offset . x + this . options . dialRadius ;
this . y0 = offset . y + this . options . dialRadius ;
this . moved = false ;
var clickPos = Timepicker . _Pos ( e ) ;
this . dx = clickPos . x - this . x0 ;
this . dy = clickPos . y - this . y0 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set clock hands
this . setHand ( this . dx , this . dy , false ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Mousemove on document
document . addEventListener ( 'mousemove' , this . _handleDocumentClickMoveBound ) ;
document . addEventListener ( 'touchmove' , this . _handleDocumentClickMoveBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Mouseup on document
document . addEventListener ( 'mouseup' , this . _handleDocumentClickEndBound ) ;
document . addEventListener ( 'touchend' , this . _handleDocumentClickEndBound ) ;
}
} , {
key : "_handleDocumentClickMove" ,
value : function _handleDocumentClickMove ( e ) {
e . preventDefault ( ) ;
var clickPos = Timepicker . _Pos ( e ) ;
var x = clickPos . x - this . x0 ;
var y = clickPos . y - this . y0 ;
this . moved = true ;
this . setHand ( x , y , false , true ) ;
}
} , {
key : "_handleDocumentClickEnd" ,
value : function _handleDocumentClickEnd ( e ) {
var _this58 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
e . preventDefault ( ) ;
document . removeEventListener ( 'mouseup' , this . _handleDocumentClickEndBound ) ;
document . removeEventListener ( 'touchend' , this . _handleDocumentClickEndBound ) ;
var clickPos = Timepicker . _Pos ( e ) ;
var x = clickPos . x - this . x0 ;
var y = clickPos . y - this . y0 ;
if ( this . moved && x === this . dx && y === this . dy ) {
this . setHand ( x , y ) ;
}
if ( this . currentView === 'hours' ) {
this . showView ( 'minutes' , this . options . duration / 2 ) ;
} else if ( this . options . autoClose ) {
$ ( this . minutesView ) . addClass ( 'timepicker-dial-out' ) ;
setTimeout ( function ( ) {
_this58 . done ( ) ;
} , this . options . duration / 2 ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( typeof this . options . onSelect === 'function' ) {
this . options . onSelect . call ( this , this . hours , this . minutes ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Unbind mousemove event
document . removeEventListener ( 'mousemove' , this . _handleDocumentClickMoveBound ) ;
document . removeEventListener ( 'touchmove' , this . _handleDocumentClickMoveBound ) ;
}
} , {
key : "_insertHTMLIntoDOM" ,
value : function _insertHTMLIntoDOM ( ) {
this . $modalEl = $ ( Timepicker . _template ) ;
this . modalEl = this . $modalEl [ 0 ] ;
this . modalEl . id = 'modal-' + this . id ;
// Append popover to input by default
var containerEl = document . querySelector ( this . options . container ) ;
if ( this . options . container && ! ! containerEl ) {
this . $modalEl . appendTo ( containerEl ) ;
} else {
this . $modalEl . insertBefore ( this . el ) ;
}
}
} , {
key : "_setupModal" ,
value : function _setupModal ( ) {
var _this59 = this ;
this . modal = M . Modal . init ( this . modalEl , {
onOpenStart : this . options . onOpenStart ,
onOpenEnd : this . options . onOpenEnd ,
onCloseStart : this . options . onCloseStart ,
onCloseEnd : function ( ) {
if ( typeof _this59 . options . onCloseEnd === 'function' ) {
_this59 . options . onCloseEnd . call ( _this59 ) ;
}
_this59 . isOpen = false ;
}
} ) ;
}
} , {
key : "_setupVariables" ,
value : function _setupVariables ( ) {
this . currentView = 'hours' ;
this . vibrate = navigator . vibrate ? 'vibrate' : navigator . webkitVibrate ? 'webkitVibrate' : null ;
this . _canvas = this . modalEl . querySelector ( '.timepicker-canvas' ) ;
this . plate = this . modalEl . querySelector ( '.timepicker-plate' ) ;
this . hoursView = this . modalEl . querySelector ( '.timepicker-hours' ) ;
this . minutesView = this . modalEl . querySelector ( '.timepicker-minutes' ) ;
this . spanHours = this . modalEl . querySelector ( '.timepicker-span-hours' ) ;
this . spanMinutes = this . modalEl . querySelector ( '.timepicker-span-minutes' ) ;
this . spanAmPm = this . modalEl . querySelector ( '.timepicker-span-am-pm' ) ;
this . footer = this . modalEl . querySelector ( '.timepicker-footer' ) ;
this . amOrPm = 'PM' ;
}
} , {
key : "_pickerSetup" ,
value : function _pickerSetup ( ) {
var $clearBtn = $ ( "<button class=\"btn-flat timepicker-clear waves-effect\" style=\"visibility: hidden;\" type=\"button\" tabindex=\"" + ( this . options . twelveHour ? '3' : '1' ) + "\">" + this . options . i18n . clear + "</button>" ) . appendTo ( this . footer ) . on ( 'click' , this . clear . bind ( this ) ) ;
if ( this . options . showClearBtn ) {
$clearBtn . css ( { visibility : '' } ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var confirmationBtnsContainer = $ ( '<div class="confirmation-btns"></div>' ) ;
$ ( '<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + ( this . options . twelveHour ? '3' : '1' ) + '">' + this . options . i18n . cancel + '</button>' ) . appendTo ( confirmationBtnsContainer ) . on ( 'click' , this . close . bind ( this ) ) ;
$ ( '<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + ( this . options . twelveHour ? '3' : '1' ) + '">' + this . options . i18n . done + '</button>' ) . appendTo ( confirmationBtnsContainer ) . on ( 'click' , this . done . bind ( this ) ) ;
confirmationBtnsContainer . appendTo ( this . footer ) ;
}
} , {
key : "_clockSetup" ,
value : function _clockSetup ( ) {
if ( this . options . twelveHour ) {
this . $amBtn = $ ( '<div class="am-btn">AM</div>' ) ;
this . $pmBtn = $ ( '<div class="pm-btn">PM</div>' ) ;
this . $amBtn . on ( 'click' , this . _handleAmPmClick . bind ( this ) ) . appendTo ( this . spanAmPm ) ;
this . $pmBtn . on ( 'click' , this . _handleAmPmClick . bind ( this ) ) . appendTo ( this . spanAmPm ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . _buildHoursView ( ) ;
this . _buildMinutesView ( ) ;
this . _buildSVGClock ( ) ;
}
} , {
key : "_buildSVGClock" ,
value : function _buildSVGClock ( ) {
// Draw clock hands and others
var dialRadius = this . options . dialRadius ;
var tickRadius = this . options . tickRadius ;
var diameter = dialRadius * 2 ;
var svg = Timepicker . _createSVGEl ( 'svg' ) ;
svg . setAttribute ( 'class' , 'timepicker-svg' ) ;
svg . setAttribute ( 'width' , diameter ) ;
svg . setAttribute ( 'height' , diameter ) ;
var g = Timepicker . _createSVGEl ( 'g' ) ;
g . setAttribute ( 'transform' , 'translate(' + dialRadius + ',' + dialRadius + ')' ) ;
var bearing = Timepicker . _createSVGEl ( 'circle' ) ;
bearing . setAttribute ( 'class' , 'timepicker-canvas-bearing' ) ;
bearing . setAttribute ( 'cx' , 0 ) ;
bearing . setAttribute ( 'cy' , 0 ) ;
bearing . setAttribute ( 'r' , 4 ) ;
var hand = Timepicker . _createSVGEl ( 'line' ) ;
hand . setAttribute ( 'x1' , 0 ) ;
hand . setAttribute ( 'y1' , 0 ) ;
var bg = Timepicker . _createSVGEl ( 'circle' ) ;
bg . setAttribute ( 'class' , 'timepicker-canvas-bg' ) ;
bg . setAttribute ( 'r' , tickRadius ) ;
g . appendChild ( hand ) ;
g . appendChild ( bg ) ;
g . appendChild ( bearing ) ;
svg . appendChild ( g ) ;
this . _canvas . appendChild ( svg ) ;
this . hand = hand ;
this . bg = bg ;
this . bearing = bearing ;
this . g = g ;
}
} , {
key : "_buildHoursView" ,
value : function _buildHoursView ( ) {
var $tick = $ ( '<div class="timepicker-tick"></div>' ) ;
// Hours view
if ( this . options . twelveHour ) {
for ( var i = 1 ; i < 13 ; i += 1 ) {
var tick = $tick . clone ( ) ;
var radian = i / 6 * Math . PI ;
var radius = this . options . outerRadius ;
tick . css ( {
left : this . options . dialRadius + Math . sin ( radian ) * radius - this . options . tickRadius + 'px' ,
top : this . options . dialRadius - Math . cos ( radian ) * radius - this . options . tickRadius + 'px'
} ) ;
tick . html ( i === 0 ? '00' : i ) ;
this . hoursView . appendChild ( tick [ 0 ] ) ;
// tick.on(mousedownEvent, mousedown);
}
} else {
for ( var _i2 = 0 ; _i2 < 24 ; _i2 += 1 ) {
var _tick = $tick . clone ( ) ;
var _radian = _i2 / 6 * Math . PI ;
var inner = _i2 > 0 && _i2 < 13 ;
var _radius = inner ? this . options . innerRadius : this . options . outerRadius ;
_tick . css ( {
left : this . options . dialRadius + Math . sin ( _radian ) * _radius - this . options . tickRadius + 'px' ,
top : this . options . dialRadius - Math . cos ( _radian ) * _radius - this . options . tickRadius + 'px'
} ) ;
_tick . html ( _i2 === 0 ? '00' : _i2 ) ;
this . hoursView . appendChild ( _tick [ 0 ] ) ;
// tick.on(mousedownEvent, mousedown);
}
}
}
} , {
key : "_buildMinutesView" ,
value : function _buildMinutesView ( ) {
var $tick = $ ( '<div class="timepicker-tick"></div>' ) ;
// Minutes view
for ( var i = 0 ; i < 60 ; i += 5 ) {
var tick = $tick . clone ( ) ;
var radian = i / 30 * Math . PI ;
tick . css ( {
left : this . options . dialRadius + Math . sin ( radian ) * this . options . outerRadius - this . options . tickRadius + 'px' ,
top : this . options . dialRadius - Math . cos ( radian ) * this . options . outerRadius - this . options . tickRadius + 'px'
} ) ;
tick . html ( Timepicker . _addLeadingZero ( i ) ) ;
this . minutesView . appendChild ( tick [ 0 ] ) ;
}
}
} , {
key : "_handleAmPmClick" ,
value : function _handleAmPmClick ( e ) {
var $btnClicked = $ ( e . target ) ;
this . amOrPm = $btnClicked . hasClass ( 'am-btn' ) ? 'AM' : 'PM' ;
this . _updateAmPmView ( ) ;
}
} , {
key : "_updateAmPmView" ,
value : function _updateAmPmView ( ) {
if ( this . options . twelveHour ) {
this . $amBtn . toggleClass ( 'text-primary' , this . amOrPm === 'AM' ) ;
this . $pmBtn . toggleClass ( 'text-primary' , this . amOrPm === 'PM' ) ;
}
}
} , {
key : "_updateTimeFromInput" ,
value : function _updateTimeFromInput ( ) {
// Get the time
var value = ( ( this . el . value || this . options . defaultTime || '' ) + '' ) . split ( ':' ) ;
if ( this . options . twelveHour && ! ( typeof value [ 1 ] === 'undefined' ) ) {
if ( value [ 1 ] . toUpperCase ( ) . indexOf ( 'AM' ) > 0 ) {
this . amOrPm = 'AM' ;
} else {
this . amOrPm = 'PM' ;
}
value [ 1 ] = value [ 1 ] . replace ( 'AM' , '' ) . replace ( 'PM' , '' ) ;
}
if ( value [ 0 ] === 'now' ) {
var now = new Date ( + new Date ( ) + this . options . fromNow ) ;
value = [ now . getHours ( ) , now . getMinutes ( ) ] ;
if ( this . options . twelveHour ) {
this . amOrPm = value [ 0 ] >= 12 && value [ 0 ] < 24 ? 'PM' : 'AM' ;
}
}
this . hours = + value [ 0 ] || 0 ;
this . minutes = + value [ 1 ] || 0 ;
this . spanHours . innerHTML = this . hours ;
this . spanMinutes . innerHTML = Timepicker . _addLeadingZero ( this . minutes ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . _updateAmPmView ( ) ;
}
} , {
key : "showView" ,
value : function showView ( view , delay ) {
if ( view === 'minutes' && $ ( this . hoursView ) . css ( 'visibility' ) === 'visible' ) {
// raiseCallback(this.options.beforeHourSelect);
}
var isHours = view === 'hours' ,
nextView = isHours ? this . hoursView : this . minutesView ,
hideView = isHours ? this . minutesView : this . hoursView ;
this . currentView = view ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
$ ( this . spanHours ) . toggleClass ( 'text-primary' , isHours ) ;
$ ( this . spanMinutes ) . toggleClass ( 'text-primary' , ! isHours ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Transition view
hideView . classList . add ( 'timepicker-dial-out' ) ;
$ ( nextView ) . css ( 'visibility' , 'visible' ) . removeClass ( 'timepicker-dial-out' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Reset clock hand
this . resetClock ( delay ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// After transitions ended
clearTimeout ( this . toggleViewTimer ) ;
this . toggleViewTimer = setTimeout ( function ( ) {
$ ( hideView ) . css ( 'visibility' , 'hidden' ) ;
} , this . options . duration ) ;
}
} , {
key : "resetClock" ,
value : function resetClock ( delay ) {
var view = this . currentView ,
value = this [ view ] ,
isHours = view === 'hours' ,
unit = Math . PI / ( isHours ? 6 : 30 ) ,
radian = value * unit ,
radius = isHours && value > 0 && value < 13 ? this . options . innerRadius : this . options . outerRadius ,
x = Math . sin ( radian ) * radius ,
y = - Math . cos ( radian ) * radius ,
self = this ;
if ( delay ) {
$ ( this . canvas ) . addClass ( 'timepicker-canvas-out' ) ;
setTimeout ( function ( ) {
$ ( self . canvas ) . removeClass ( 'timepicker-canvas-out' ) ;
self . setHand ( x , y ) ;
} , delay ) ;
} else {
this . setHand ( x , y ) ;
2019-05-19 17:39:30 +10:00
}
2019-06-07 02:11:04 +10:00
}
} , {
key : "setHand" ,
value : function setHand ( x , y , roundBy5 ) {
var _this60 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var radian = Math . atan2 ( x , - y ) ,
isHours = this . currentView === 'hours' ,
unit = Math . PI / ( isHours || roundBy5 ? 6 : 30 ) ,
z = Math . sqrt ( x * x + y * y ) ,
inner = isHours && z < ( this . options . outerRadius + this . options . innerRadius ) / 2 ,
radius = inner ? this . options . innerRadius : this . options . outerRadius ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . options . twelveHour ) {
radius = this . options . outerRadius ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Radian should in range [0, 2PI]
if ( radian < 0 ) {
radian = Math . PI * 2 + radian ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Get the round value
var value = Math . round ( radian / unit ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Get the round radian
radian = value * unit ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Correct the hours or minutes
if ( this . options . twelveHour ) {
if ( isHours ) {
if ( value === 0 ) value = 12 ;
} else {
if ( roundBy5 ) value *= 5 ;
if ( value === 60 ) value = 0 ;
}
} else {
if ( isHours ) {
if ( value === 12 ) {
value = 0 ;
}
value = inner ? value === 0 ? 12 : value : value === 0 ? 0 : value + 12 ;
} else {
if ( roundBy5 ) {
value *= 5 ;
}
if ( value === 60 ) {
value = 0 ;
}
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Once hours or minutes changed, vibrate the device
if ( this [ this . currentView ] !== value ) {
if ( this . vibrate && this . options . vibrate ) {
// Do not vibrate too frequently
if ( ! this . vibrateTimer ) {
navigator [ this . vibrate ] ( 10 ) ;
this . vibrateTimer = setTimeout ( function ( ) {
_this60 . vibrateTimer = null ;
} , 100 ) ;
}
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this [ this . currentView ] = value ;
if ( isHours ) {
this [ 'spanHours' ] . innerHTML = value ;
} else {
this [ 'spanMinutes' ] . innerHTML = Timepicker . _addLeadingZero ( value ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set clock hand and others' position
var cx1 = Math . sin ( radian ) * ( radius - this . options . tickRadius ) ,
cy1 = - Math . cos ( radian ) * ( radius - this . options . tickRadius ) ,
cx2 = Math . sin ( radian ) * radius ,
cy2 = - Math . cos ( radian ) * radius ;
this . hand . setAttribute ( 'x2' , cx1 ) ;
this . hand . setAttribute ( 'y2' , cy1 ) ;
this . bg . setAttribute ( 'cx' , cx2 ) ;
this . bg . setAttribute ( 'cy' , cy2 ) ;
}
} , {
key : "open" ,
value : function open ( ) {
if ( this . isOpen ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . isOpen = true ;
this . _updateTimeFromInput ( ) ;
this . showView ( 'hours' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . modal . open ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} , {
key : "close" ,
value : function close ( ) {
if ( ! this . isOpen ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . isOpen = false ;
this . modal . close ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Finish timepicker selection .
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "done" ,
value : function done ( e , clearValue ) {
// Set input value
var last = this . el . value ;
var value = clearValue ? '' : Timepicker . _addLeadingZero ( this . hours ) + ':' + Timepicker . _addLeadingZero ( this . minutes ) ;
this . time = value ;
if ( ! clearValue && this . options . twelveHour ) {
value = value + " " + this . amOrPm ;
}
this . el . value = value ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Trigger change event
if ( value !== last ) {
this . $el . trigger ( 'change' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . close ( ) ;
this . el . focus ( ) ;
}
} , {
key : "clear" ,
value : function clear ( ) {
this . done ( null , true ) ;
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Timepicker . _ _proto _ _ || Object . getPrototypeOf ( Timepicker ) , "init" , this ) . call ( this , this , els , options ) ;
}
} , {
key : "_addLeadingZero" ,
value : function _addLeadingZero ( num ) {
return ( num < 10 ? '0' : '' ) + num ;
}
} , {
key : "_createSVGEl" ,
value : function _createSVGEl ( name ) {
var svgNS = 'http://www.w3.org/2000/svg' ;
return document . createElementNS ( svgNS , name ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ typedef { Object } Point
* @ property { number } x The X Coordinate
* @ property { number } y The Y Coordinate
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get x position of mouse or touch event
* @ param { Event } e
* @ return { Point } x and y location
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_Pos" ,
value : function _Pos ( e ) {
if ( e . targetTouches && e . targetTouches . length >= 1 ) {
return { x : e . targetTouches [ 0 ] . clientX , y : e . targetTouches [ 0 ] . clientY } ;
}
// mouse event
return { x : e . clientX , y : e . clientY } ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Timepicker ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Timepicker ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
Timepicker . _template = [ '<div class= "modal timepicker-modal">' , '<div class="modal-content timepicker-container">' , '<div class="timepicker-digital-display">' , '<div class="timepicker-text-container">' , '<div class="timepicker-display-column">' , '<span class="timepicker-span-hours text-primary"></span>' , ':' , '<span class="timepicker-span-minutes"></span>' , '</div>' , '<div class="timepicker-display-column timepicker-display-am-pm">' , '<div class="timepicker-span-am-pm"></div>' , '</div>' , '</div>' , '</div>' , '<div class="timepicker-analog-display">' , '<div class="timepicker-plate">' , '<div class="timepicker-canvas"></div>' , '<div class="timepicker-dial timepicker-hours"></div>' , '<div class="timepicker-dial timepicker-minutes timepicker-dial-out"></div>' , '</div>' , '<div class="timepicker-footer"></div>' , '</div>' , '</div>' , '</div>' ] . join ( '' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . Timepicker = Timepicker ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Timepicker , 'timepicker' , 'M_Timepicker' ) ;
}
} ) ( cash ) ;
; ( function ( $ ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = { } ;
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* @ class
*
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
var CharacterCounter = function ( _Component17 ) {
_inherits ( CharacterCounter , _Component17 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct CharacterCounter instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function CharacterCounter ( el , options ) {
_classCallCheck ( this , CharacterCounter ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this61 = _possibleConstructorReturn ( this , ( CharacterCounter . _ _proto _ _ || Object . getPrototypeOf ( CharacterCounter ) ) . call ( this , CharacterCounter , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this61 . el . M _CharacterCounter = _this61 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Options for the character counter
* /
_this61 . options = $ . extend ( { } , CharacterCounter . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this61 . isInvalid = false ;
_this61 . isValidLength = false ;
_this61 . _setupCounter ( ) ;
_this61 . _setupEventHandlers ( ) ;
return _this61 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_createClass ( CharacterCounter , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . el . CharacterCounter = undefined ;
this . _removeCounter ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleUpdateCounterBound = this . updateCounter . bind ( this ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . addEventListener ( 'focus' , this . _handleUpdateCounterBound , true ) ;
this . el . addEventListener ( 'input' , this . _handleUpdateCounterBound , true ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
this . el . removeEventListener ( 'focus' , this . _handleUpdateCounterBound , true ) ;
this . el . removeEventListener ( 'input' , this . _handleUpdateCounterBound , true ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup counter element
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupCounter" ,
value : function _setupCounter ( ) {
this . counterEl = document . createElement ( 'span' ) ;
$ ( this . counterEl ) . addClass ( 'character-counter' ) . css ( {
float : 'right' ,
'font-size' : '12px' ,
height : 1
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . $el . parent ( ) . append ( this . counterEl ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Remove counter element
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeCounter" ,
value : function _removeCounter ( ) {
$ ( this . counterEl ) . remove ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Update counter
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "updateCounter" ,
value : function updateCounter ( ) {
var maxLength = + this . $el . attr ( 'data-length' ) ,
actualLength = this . el . value . length ;
this . isValidLength = actualLength <= maxLength ;
var counterString = actualLength ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( maxLength ) {
counterString += '/' + maxLength ;
this . _validateInput ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
$ ( this . counterEl ) . html ( counterString ) ;
}
/ * *
* Add validation classes
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_validateInput" ,
value : function _validateInput ( ) {
if ( this . isValidLength && this . isInvalid ) {
this . isInvalid = false ;
this . $el . removeClass ( 'invalid' ) ;
} else if ( ! this . isValidLength && ! this . isInvalid ) {
this . isInvalid = true ;
this . $el . removeClass ( 'valid' ) ;
this . $el . addClass ( 'invalid' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( CharacterCounter . _ _proto _ _ || Object . getPrototypeOf ( CharacterCounter ) , "init" , this ) . call ( this , this , els , options ) ;
}
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _CharacterCounter ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return CharacterCounter ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . CharacterCounter = CharacterCounter ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( CharacterCounter , 'characterCounter' , 'M_CharacterCounter' ) ;
}
} ) ( cash ) ;
; ( function ( $ ) {
'use strict' ;
var _defaults = {
duration : 200 , // ms
dist : - 100 , // zoom scale TODO: make this more intuitive as an option
shift : 0 , // spacing for center image
padding : 0 , // Padding between non center items
numVisible : 5 , // Number of visible items in carousel
fullWidth : false , // Change to full width styles
indicators : false , // Toggle indicators
noWrap : false , // Don't wrap around and cycle through items.
onCycleTo : null // Callback for when a new slide is cycled to.
} ;
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* @ class
*
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
var Carousel = function ( _Component18 ) {
_inherits ( Carousel , _Component18 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct Carousel instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Carousel ( el , options ) {
_classCallCheck ( this , Carousel ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this62 = _possibleConstructorReturn ( this , ( Carousel . _ _proto _ _ || Object . getPrototypeOf ( Carousel ) ) . call ( this , Carousel , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this62 . el . M _Carousel = _this62 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Options for the carousel
* @ member Carousel # options
* @ prop { Number } duration
* @ prop { Number } dist
* @ prop { Number } shift
* @ prop { Number } padding
* @ prop { Number } numVisible
* @ prop { Boolean } fullWidth
* @ prop { Boolean } indicators
* @ prop { Boolean } noWrap
* @ prop { Function } onCycleTo
* /
_this62 . options = $ . extend ( { } , Carousel . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Setup
_this62 . hasMultipleSlides = _this62 . $el . find ( '.carousel-item' ) . length > 1 ;
_this62 . showIndicators = _this62 . options . indicators && _this62 . hasMultipleSlides ;
_this62 . noWrap = _this62 . options . noWrap || ! _this62 . hasMultipleSlides ;
_this62 . pressed = false ;
_this62 . dragged = false ;
_this62 . offset = _this62 . target = 0 ;
_this62 . images = [ ] ;
_this62 . itemWidth = _this62 . $el . find ( '.carousel-item' ) . first ( ) . innerWidth ( ) ;
_this62 . itemHeight = _this62 . $el . find ( '.carousel-item' ) . first ( ) . innerHeight ( ) ;
_this62 . dim = _this62 . itemWidth * 2 + _this62 . options . padding || 1 ; // Make sure dim is non zero for divisions.
_this62 . _autoScrollBound = _this62 . _autoScroll . bind ( _this62 ) ;
_this62 . _trackBound = _this62 . _track . bind ( _this62 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Full Width carousel setup
if ( _this62 . options . fullWidth ) {
_this62 . options . dist = 0 ;
_this62 . _setCarouselHeight ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Offset fixed items when indicators.
if ( _this62 . showIndicators ) {
_this62 . $el . find ( '.carousel-fixed-item' ) . addClass ( 'with-indicators' ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Iterate through slides
_this62 . $indicators = $ ( '<ul class="indicators"></ul>' ) ;
_this62 . $el . find ( '.carousel-item' ) . each ( function ( el , i ) {
_this62 . images . push ( el ) ;
if ( _this62 . showIndicators ) {
var $indicator = $ ( '<li class="indicator-item"></li>' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Add active to first by default.
if ( i === 0 ) {
$indicator [ 0 ] . classList . add ( 'active' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this62 . $indicators . append ( $indicator ) ;
}
} ) ;
if ( _this62 . showIndicators ) {
_this62 . $el . append ( _this62 . $indicators ) ;
}
_this62 . count = _this62 . images . length ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Cap numVisible at count
_this62 . options . numVisible = Math . min ( _this62 . count , _this62 . options . numVisible ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Setup cross browser string
_this62 . xform = 'transform' ;
[ 'webkit' , 'Moz' , 'O' , 'ms' ] . every ( function ( prefix ) {
var e = prefix + 'Transform' ;
if ( typeof document . body . style [ e ] !== 'undefined' ) {
_this62 . xform = e ;
return false ;
}
return true ;
} ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this62 . _setupEventHandlers ( ) ;
_this62 . _scroll ( _this62 . offset ) ;
return _this62 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_createClass ( Carousel , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . el . M _Carousel = undefined ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
var _this63 = this ;
this . _handleCarouselTapBound = this . _handleCarouselTap . bind ( this ) ;
this . _handleCarouselDragBound = this . _handleCarouselDrag . bind ( this ) ;
this . _handleCarouselReleaseBound = this . _handleCarouselRelease . bind ( this ) ;
this . _handleCarouselClickBound = this . _handleCarouselClick . bind ( this ) ;
if ( typeof window . ontouchstart !== 'undefined' ) {
this . el . addEventListener ( 'touchstart' , this . _handleCarouselTapBound ) ;
this . el . addEventListener ( 'touchmove' , this . _handleCarouselDragBound ) ;
this . el . addEventListener ( 'touchend' , this . _handleCarouselReleaseBound ) ;
}
this . el . addEventListener ( 'mousedown' , this . _handleCarouselTapBound ) ;
this . el . addEventListener ( 'mousemove' , this . _handleCarouselDragBound ) ;
this . el . addEventListener ( 'mouseup' , this . _handleCarouselReleaseBound ) ;
this . el . addEventListener ( 'mouseleave' , this . _handleCarouselReleaseBound ) ;
this . el . addEventListener ( 'click' , this . _handleCarouselClickBound ) ;
if ( this . showIndicators && this . $indicators ) {
this . _handleIndicatorClickBound = this . _handleIndicatorClick . bind ( this ) ;
this . $indicators . find ( '.indicator-item' ) . each ( function ( el , i ) {
el . addEventListener ( 'click' , _this63 . _handleIndicatorClickBound ) ;
} ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Resize
var throttledResize = M . throttle ( this . _handleResize , 200 ) ;
this . _handleThrottledResizeBound = throttledResize . bind ( this ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
window . addEventListener ( 'resize' , this . _handleThrottledResizeBound ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
var _this64 = this ;
if ( typeof window . ontouchstart !== 'undefined' ) {
this . el . removeEventListener ( 'touchstart' , this . _handleCarouselTapBound ) ;
this . el . removeEventListener ( 'touchmove' , this . _handleCarouselDragBound ) ;
this . el . removeEventListener ( 'touchend' , this . _handleCarouselReleaseBound ) ;
}
this . el . removeEventListener ( 'mousedown' , this . _handleCarouselTapBound ) ;
this . el . removeEventListener ( 'mousemove' , this . _handleCarouselDragBound ) ;
this . el . removeEventListener ( 'mouseup' , this . _handleCarouselReleaseBound ) ;
this . el . removeEventListener ( 'mouseleave' , this . _handleCarouselReleaseBound ) ;
this . el . removeEventListener ( 'click' , this . _handleCarouselClickBound ) ;
if ( this . showIndicators && this . $indicators ) {
this . $indicators . find ( '.indicator-item' ) . each ( function ( el , i ) {
el . removeEventListener ( 'click' , _this64 . _handleIndicatorClickBound ) ;
} ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
window . removeEventListener ( 'resize' , this . _handleThrottledResizeBound ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Carousel Tap
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleCarouselTap" ,
value : function _handleCarouselTap ( e ) {
// Fixes firefox draggable image bug
if ( e . type === 'mousedown' && $ ( e . target ) . is ( 'img' ) ) {
e . preventDefault ( ) ;
}
this . pressed = true ;
this . dragged = false ;
this . verticalDragged = false ;
this . reference = this . _xpos ( e ) ;
this . referenceY = this . _ypos ( e ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . velocity = this . amplitude = 0 ;
this . frame = this . offset ;
this . timestamp = Date . now ( ) ;
clearInterval ( this . ticker ) ;
this . ticker = setInterval ( this . _trackBound , 100 ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Carousel Drag
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleCarouselDrag" ,
value : function _handleCarouselDrag ( e ) {
var x = void 0 ,
y = void 0 ,
delta = void 0 ,
deltaY = void 0 ;
if ( this . pressed ) {
x = this . _xpos ( e ) ;
y = this . _ypos ( e ) ;
delta = this . reference - x ;
deltaY = Math . abs ( this . referenceY - y ) ;
if ( deltaY < 30 && ! this . verticalDragged ) {
// If vertical scrolling don't allow dragging.
if ( delta > 2 || delta < - 2 ) {
this . dragged = true ;
this . reference = x ;
this . _scroll ( this . offset + delta ) ;
}
} else if ( this . dragged ) {
// If dragging don't allow vertical scroll.
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
return false ;
} else {
// Vertical scrolling.
this . verticalDragged = true ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . dragged ) {
// If dragging don't allow vertical scroll.
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
return false ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Carousel Release
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleCarouselRelease" ,
value : function _handleCarouselRelease ( e ) {
if ( this . pressed ) {
this . pressed = false ;
} else {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
clearInterval ( this . ticker ) ;
this . target = this . offset ;
if ( this . velocity > 10 || this . velocity < - 10 ) {
this . amplitude = 0.9 * this . velocity ;
this . target = this . offset + this . amplitude ;
}
this . target = Math . round ( this . target / this . dim ) * this . dim ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// No wrap of items.
if ( this . noWrap ) {
if ( this . target >= this . dim * ( this . count - 1 ) ) {
this . target = this . dim * ( this . count - 1 ) ;
} else if ( this . target < 0 ) {
this . target = 0 ;
}
}
this . amplitude = this . target - this . offset ;
this . timestamp = Date . now ( ) ;
requestAnimationFrame ( this . _autoScrollBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . dragged ) {
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
}
return false ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Carousel CLick
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleCarouselClick" ,
value : function _handleCarouselClick ( e ) {
// Disable clicks if carousel was dragged.
if ( this . dragged ) {
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
return false ;
} else if ( ! this . options . fullWidth ) {
var clickedIndex = $ ( e . target ) . closest ( '.carousel-item' ) . index ( ) ;
var diff = this . _wrap ( this . center ) - clickedIndex ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Disable clicks if carousel was shifted by click
if ( diff !== 0 ) {
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
}
this . _cycleTo ( clickedIndex ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Indicator CLick
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleIndicatorClick" ,
value : function _handleIndicatorClick ( e ) {
e . stopPropagation ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var indicator = $ ( e . target ) . closest ( '.indicator-item' ) ;
if ( indicator . length ) {
this . _cycleTo ( indicator . index ( ) ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Throttle Resize
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleResize" ,
value : function _handleResize ( e ) {
if ( this . options . fullWidth ) {
this . itemWidth = this . $el . find ( '.carousel-item' ) . first ( ) . innerWidth ( ) ;
this . imageHeight = this . $el . find ( '.carousel-item.active' ) . height ( ) ;
this . dim = this . itemWidth * 2 + this . options . padding ;
this . offset = this . center * 2 * this . itemWidth ;
this . target = this . offset ;
this . _setCarouselHeight ( true ) ;
} else {
this . _scroll ( ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Set carousel height based on first slide
* @ param { Booleam } imageOnly - true for image slides
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setCarouselHeight" ,
value : function _setCarouselHeight ( imageOnly ) {
var _this65 = this ;
var firstSlide = this . $el . find ( '.carousel-item.active' ) . length ? this . $el . find ( '.carousel-item.active' ) . first ( ) : this . $el . find ( '.carousel-item' ) . first ( ) ;
var firstImage = firstSlide . find ( 'img' ) . first ( ) ;
if ( firstImage . length ) {
if ( firstImage [ 0 ] . complete ) {
// If image won't trigger the load event
var imageHeight = firstImage . height ( ) ;
if ( imageHeight > 0 ) {
this . $el . css ( 'height' , imageHeight + 'px' ) ;
} else {
// If image still has no height, use the natural dimensions to calculate
var naturalWidth = firstImage [ 0 ] . naturalWidth ;
var naturalHeight = firstImage [ 0 ] . naturalHeight ;
var adjustedHeight = this . $el . width ( ) / naturalWidth * naturalHeight ;
this . $el . css ( 'height' , adjustedHeight + 'px' ) ;
}
} else {
// Get height when image is loaded normally
firstImage . one ( 'load' , function ( el , i ) {
_this65 . $el . css ( 'height' , el . offsetHeight + 'px' ) ;
} ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} else if ( ! imageOnly ) {
var slideHeight = firstSlide . height ( ) ;
this . $el . css ( 'height' , slideHeight + 'px' ) ;
2019-05-19 17:39:30 +10:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get x position from event
* @ param { Event } e
* /
} , {
key : "_xpos" ,
value : function _xpos ( e ) {
// touch event
if ( e . targetTouches && e . targetTouches . length >= 1 ) {
return e . targetTouches [ 0 ] . clientX ;
2019-05-19 17:39:30 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// mouse event
return e . clientX ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get y position from event
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_ypos" ,
value : function _ypos ( e ) {
// touch event
if ( e . targetTouches && e . targetTouches . length >= 1 ) {
return e . targetTouches [ 0 ] . clientY ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// mouse event
return e . clientY ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Wrap index
* @ param { Number } x
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_wrap" ,
value : function _wrap ( x ) {
return x >= this . count ? x % this . count : x < 0 ? this . _wrap ( this . count + x % this . count ) : x ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Tracks scrolling information
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_track" ,
value : function _track ( ) {
var now = void 0 ,
elapsed = void 0 ,
delta = void 0 ,
v = void 0 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
now = Date . now ( ) ;
elapsed = now - this . timestamp ;
this . timestamp = now ;
delta = this . offset - this . frame ;
this . frame = this . offset ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
v = 1000 * delta / ( 1 + elapsed ) ;
this . velocity = 0.8 * v + 0.2 * this . velocity ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Auto scrolls to nearest carousel item .
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_autoScroll" ,
value : function _autoScroll ( ) {
var elapsed = void 0 ,
delta = void 0 ;
if ( this . amplitude ) {
elapsed = Date . now ( ) - this . timestamp ;
delta = this . amplitude * Math . exp ( - elapsed / this . options . duration ) ;
if ( delta > 2 || delta < - 2 ) {
this . _scroll ( this . target - delta ) ;
requestAnimationFrame ( this . _autoScrollBound ) ;
} else {
this . _scroll ( this . target ) ;
2018-01-28 23:22:43 +11:00
}
2019-05-19 17:39:30 +10:00
}
2019-06-07 02:11:04 +10:00
}
2019-05-19 17:39:30 +10:00
2019-06-07 02:11:04 +10:00
/ * *
* Scroll to target
* @ param { Number } x
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_scroll" ,
value : function _scroll ( x ) {
var _this66 = this ;
// Track scrolling state
if ( ! this . $el . hasClass ( 'scrolling' ) ) {
this . el . classList . add ( 'scrolling' ) ;
}
if ( this . scrollingTimeout != null ) {
window . clearTimeout ( this . scrollingTimeout ) ;
}
this . scrollingTimeout = window . setTimeout ( function ( ) {
_this66 . $el . removeClass ( 'scrolling' ) ;
} , this . options . duration ) ;
// Start actual scroll
var i = void 0 ,
half = void 0 ,
delta = void 0 ,
dir = void 0 ,
tween = void 0 ,
el = void 0 ,
alignment = void 0 ,
zTranslation = void 0 ,
tweenedOpacity = void 0 ,
centerTweenedOpacity = void 0 ;
var lastCenter = this . center ;
var numVisibleOffset = 1 / this . options . numVisible ;
this . offset = typeof x === 'number' ? x : this . offset ;
this . center = Math . floor ( ( this . offset + this . dim / 2 ) / this . dim ) ;
delta = this . offset - this . center * this . dim ;
dir = delta < 0 ? 1 : - 1 ;
tween = - dir * delta * 2 / this . dim ;
half = this . count >> 1 ;
if ( this . options . fullWidth ) {
alignment = 'translateX(0)' ;
centerTweenedOpacity = 1 ;
} else {
alignment = 'translateX(' + ( this . el . clientWidth - this . itemWidth ) / 2 + 'px) ' ;
alignment += 'translateY(' + ( this . el . clientHeight - this . itemHeight ) / 2 + 'px)' ;
centerTweenedOpacity = 1 - numVisibleOffset * tween ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set indicator active
if ( this . showIndicators ) {
var diff = this . center % this . count ;
var activeIndicator = this . $indicators . find ( '.indicator-item.active' ) ;
if ( activeIndicator . index ( ) !== diff ) {
activeIndicator . removeClass ( 'active' ) ;
this . $indicators . find ( '.indicator-item' ) . eq ( diff ) [ 0 ] . classList . add ( 'active' ) ;
2019-05-19 17:39:30 +10:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// center
// Don't show wrapped items.
if ( ! this . noWrap || this . center >= 0 && this . center < this . count ) {
el = this . images [ this . _wrap ( this . center ) ] ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Add active class to center item.
if ( ! $ ( el ) . hasClass ( 'active' ) ) {
this . $el . find ( '.carousel-item' ) . removeClass ( 'active' ) ;
el . classList . add ( 'active' ) ;
}
var transformString = alignment + " translateX(" + - delta / 2 + "px) translateX(" + dir * this . options . shift * tween * i + "px) translateZ(" + this . options . dist * tween + "px)" ;
this . _updateItemStyle ( el , centerTweenedOpacity , 0 , transformString ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
for ( i = 1 ; i <= half ; ++ i ) {
// right side
if ( this . options . fullWidth ) {
zTranslation = this . options . dist ;
tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1 ;
} else {
zTranslation = this . options . dist * ( i * 2 + tween * dir ) ;
tweenedOpacity = 1 - numVisibleOffset * ( i * 2 + tween * dir ) ;
}
// Don't show wrapped items.
if ( ! this . noWrap || this . center + i < this . count ) {
el = this . images [ this . _wrap ( this . center + i ) ] ;
var _transformString = alignment + " translateX(" + ( this . options . shift + ( this . dim * i - delta ) / 2 ) + "px) translateZ(" + zTranslation + "px)" ;
this . _updateItemStyle ( el , tweenedOpacity , - i , _transformString ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// left side
if ( this . options . fullWidth ) {
zTranslation = this . options . dist ;
tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1 ;
} else {
zTranslation = this . options . dist * ( i * 2 - tween * dir ) ;
tweenedOpacity = 1 - numVisibleOffset * ( i * 2 - tween * dir ) ;
}
// Don't show wrapped items.
if ( ! this . noWrap || this . center - i >= 0 ) {
el = this . images [ this . _wrap ( this . center - i ) ] ;
var _transformString2 = alignment + " translateX(" + ( - this . options . shift + ( - this . dim * i - delta ) / 2 ) + "px) translateZ(" + zTranslation + "px)" ;
this . _updateItemStyle ( el , tweenedOpacity , - i , _transformString2 ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// center
// Don't show wrapped items.
if ( ! this . noWrap || this . center >= 0 && this . center < this . count ) {
el = this . images [ this . _wrap ( this . center ) ] ;
var _transformString3 = alignment + " translateX(" + - delta / 2 + "px) translateX(" + dir * this . options . shift * tween + "px) translateZ(" + this . options . dist * tween + "px)" ;
this . _updateItemStyle ( el , centerTweenedOpacity , 0 , _transformString3 ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// onCycleTo callback
var $currItem = this . $el . find ( '.carousel-item' ) . eq ( this . _wrap ( this . center ) ) ;
if ( lastCenter !== this . center && typeof this . options . onCycleTo === 'function' ) {
this . options . onCycleTo . call ( this , $currItem [ 0 ] , this . dragged ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// One time callback
if ( typeof this . oneTimeCallback === 'function' ) {
this . oneTimeCallback . call ( this , $currItem [ 0 ] , this . dragged ) ;
this . oneTimeCallback = null ;
2019-05-19 17:39:30 +10:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Cycle to target
* @ param { Element } el
* @ param { Number } opacity
* @ param { Number } zIndex
* @ param { String } transform
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_updateItemStyle" ,
value : function _updateItemStyle ( el , opacity , zIndex , transform ) {
el . style [ this . xform ] = transform ;
el . style . zIndex = zIndex ;
el . style . opacity = opacity ;
el . style . visibility = 'visible' ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Cycle to target
* @ param { Number } n
* @ param { Function } callback
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_cycleTo" ,
value : function _cycleTo ( n , callback ) {
var diff = this . center % this . count - n ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Account for wraparound.
if ( ! this . noWrap ) {
if ( diff < 0 ) {
if ( Math . abs ( diff + this . count ) < Math . abs ( diff ) ) {
diff += this . count ;
}
} else if ( diff > 0 ) {
if ( Math . abs ( diff - this . count ) < diff ) {
diff -= this . count ;
2019-05-19 17:39:30 +10:00
}
2019-06-07 02:11:04 +10:00
}
2019-05-19 17:39:30 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . target = this . dim * Math . round ( this . offset / this . dim ) ;
// Next
if ( diff < 0 ) {
this . target += this . dim * Math . abs ( diff ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Prev
} else if ( diff > 0 ) {
this . target -= this . dim * diff ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set one time callback
if ( typeof callback === 'function' ) {
this . oneTimeCallback = callback ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Scroll
if ( this . offset !== this . target ) {
this . amplitude = this . target - this . offset ;
this . timestamp = Date . now ( ) ;
requestAnimationFrame ( this . _autoScrollBound ) ;
}
}
2019-05-19 17:39:30 +10:00
2019-06-07 02:11:04 +10:00
/ * *
* Cycle to next item
* @ param { Number } [ n ]
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "next" ,
value : function next ( n ) {
if ( n === undefined || isNaN ( n ) ) {
n = 1 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var index = this . center + n ;
if ( index >= this . count || index < 0 ) {
if ( this . noWrap ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
index = this . _wrap ( index ) ;
}
this . _cycleTo ( index ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Cycle to previous item
* @ param { Number } [ n ]
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "prev" ,
value : function prev ( n ) {
if ( n === undefined || isNaN ( n ) ) {
n = 1 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var index = this . center - n ;
if ( index >= this . count || index < 0 ) {
if ( this . noWrap ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
index = this . _wrap ( index ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . _cycleTo ( index ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Cycle to nth item
* @ param { Number } [ n ]
* @ param { Function } callback
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "set" ,
value : function set ( n , callback ) {
if ( n === undefined || isNaN ( n ) ) {
n = 0 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( n > this . count || n < 0 ) {
if ( this . noWrap ) {
return ;
2019-05-19 17:39:30 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
n = this . _wrap ( n ) ;
2019-05-19 17:39:30 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . _cycleTo ( n , callback ) ;
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Carousel . _ _proto _ _ || Object . getPrototypeOf ( Carousel ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Carousel ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return Carousel ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . Carousel = Carousel ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Carousel , 'carousel' , 'M_Carousel' ) ;
}
} ) ( cash ) ;
; ( function ( $ ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
onOpen : undefined ,
onClose : undefined
} ;
2018-01-28 23:22:43 +11:00
/ * *
2019-06-07 02:11:04 +10:00
* @ class
*
2018-01-28 23:22:43 +11:00
* /
2019-06-07 02:11:04 +10:00
var TapTarget = function ( _Component19 ) {
_inherits ( TapTarget , _Component19 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct TapTarget instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function TapTarget ( el , options ) {
_classCallCheck ( this , TapTarget ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this67 = _possibleConstructorReturn ( this , ( TapTarget . _ _proto _ _ || Object . getPrototypeOf ( TapTarget ) ) . call ( this , TapTarget , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this67 . el . M _TapTarget = _this67 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Options for the select
* @ member TapTarget # options
* @ prop { Function } onOpen - Callback function called when feature discovery is opened
* @ prop { Function } onClose - Callback function called when feature discovery is closed
* /
_this67 . options = $ . extend ( { } , TapTarget . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this67 . isOpen = false ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// setup
_this67 . $origin = $ ( '#' + _this67 . $el . attr ( 'data-target' ) ) ;
_this67 . _setup ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this67 . _calculatePositioning ( ) ;
_this67 . _setupEventHandlers ( ) ;
return _this67 ;
}
_createClass ( TapTarget , [ {
key : "destroy" ,
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . el . TapTarget = undefined ;
}
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleDocumentClickBound = this . _handleDocumentClick . bind ( this ) ;
this . _handleTargetClickBound = this . _handleTargetClick . bind ( this ) ;
this . _handleOriginClickBound = this . _handleOriginClick . bind ( this ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . addEventListener ( 'click' , this . _handleTargetClickBound ) ;
this . originEl . addEventListener ( 'click' , this . _handleOriginClickBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Resize
var throttledResize = M . throttle ( this . _handleResize , 200 ) ;
this . _handleThrottledResizeBound = throttledResize . bind ( this ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
window . addEventListener ( 'resize' , this . _handleThrottledResizeBound ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
this . el . removeEventListener ( 'click' , this . _handleTargetClickBound ) ;
this . originEl . removeEventListener ( 'click' , this . _handleOriginClickBound ) ;
window . removeEventListener ( 'resize' , this . _handleThrottledResizeBound ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Target Click
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleTargetClick" ,
value : function _handleTargetClick ( e ) {
this . open ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Origin Click
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleOriginClick" ,
value : function _handleOriginClick ( e ) {
this . close ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Resize
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleResize" ,
value : function _handleResize ( e ) {
this . _calculatePositioning ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Resize
* @ param { Event } e
* /
} , {
key : "_handleDocumentClick" ,
value : function _handleDocumentClick ( e ) {
if ( ! $ ( e . target ) . closest ( '.tap-target-wrapper' ) . length ) {
this . close ( ) ;
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup Tap Target
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setup" ,
value : function _setup ( ) {
// Creating tap target
this . wrapper = this . $el . parent ( ) [ 0 ] ;
this . waveEl = $ ( this . wrapper ) . find ( '.tap-target-wave' ) [ 0 ] ;
this . originEl = $ ( this . wrapper ) . find ( '.tap-target-origin' ) [ 0 ] ;
this . contentEl = this . $el . find ( '.tap-target-content' ) [ 0 ] ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Creating wrapper
if ( ! $ ( this . wrapper ) . hasClass ( '.tap-target-wrapper' ) ) {
this . wrapper = document . createElement ( 'div' ) ;
this . wrapper . classList . add ( 'tap-target-wrapper' ) ;
this . $el . before ( $ ( this . wrapper ) ) ;
this . wrapper . append ( this . el ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Creating content
if ( ! this . contentEl ) {
this . contentEl = document . createElement ( 'div' ) ;
this . contentEl . classList . add ( 'tap-target-content' ) ;
this . $el . append ( this . contentEl ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Creating foreground wave
if ( ! this . waveEl ) {
this . waveEl = document . createElement ( 'div' ) ;
this . waveEl . classList . add ( 'tap-target-wave' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Creating origin
if ( ! this . originEl ) {
this . originEl = this . $origin . clone ( true , true ) ;
this . originEl . addClass ( 'tap-target-origin' ) ;
this . originEl . removeAttr ( 'id' ) ;
this . originEl . removeAttr ( 'style' ) ;
this . originEl = this . originEl [ 0 ] ;
this . waveEl . append ( this . originEl ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . wrapper . append ( this . waveEl ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Calculate positioning
* /
} , {
key : "_calculatePositioning" ,
value : function _calculatePositioning ( ) {
// Element or parent is fixed position?
var isFixed = this . $origin . css ( 'position' ) === 'fixed' ;
if ( ! isFixed ) {
var parents = this . $origin . parents ( ) ;
for ( var i = 0 ; i < parents . length ; i ++ ) {
isFixed = $ ( parents [ i ] ) . css ( 'position' ) == 'fixed' ;
if ( isFixed ) {
break ;
}
}
}
// Calculating origin
var originWidth = this . $origin . outerWidth ( ) ;
var originHeight = this . $origin . outerHeight ( ) ;
var originTop = isFixed ? this . $origin . offset ( ) . top - M . getDocumentScrollTop ( ) : this . $origin . offset ( ) . top ;
var originLeft = isFixed ? this . $origin . offset ( ) . left - M . getDocumentScrollLeft ( ) : this . $origin . offset ( ) . left ;
// Calculating screen
var windowWidth = window . innerWidth ;
var windowHeight = window . innerHeight ;
var centerX = windowWidth / 2 ;
var centerY = windowHeight / 2 ;
var isLeft = originLeft <= centerX ;
var isRight = originLeft > centerX ;
var isTop = originTop <= centerY ;
var isBottom = originTop > centerY ;
var isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75 ;
// Calculating tap target
var tapTargetWidth = this . $el . outerWidth ( ) ;
var tapTargetHeight = this . $el . outerHeight ( ) ;
var tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2 ;
var tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2 ;
var tapTargetPosition = isFixed ? 'fixed' : 'absolute' ;
// Calculating content
var tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth ;
var tapTargetTextHeight = tapTargetHeight / 2 ;
var tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0 ;
var tapTargetTextBottom = 0 ;
var tapTargetTextLeft = isLeft && ! isCenterX ? tapTargetWidth / 2 - originWidth : 0 ;
var tapTargetTextRight = 0 ;
var tapTargetTextPadding = originWidth ;
var tapTargetTextAlign = isBottom ? 'bottom' : 'top' ;
// Calculating wave
var tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2 ;
var tapTargetWaveHeight = tapTargetWaveWidth ;
var tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2 ;
var tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2 ;
// Setting tap target
var tapTargetWrapperCssObj = { } ;
tapTargetWrapperCssObj . top = isTop ? tapTargetTop + 'px' : '' ;
tapTargetWrapperCssObj . right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth + 'px' : '' ;
tapTargetWrapperCssObj . bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + 'px' : '' ;
tapTargetWrapperCssObj . left = isLeft ? tapTargetLeft + 'px' : '' ;
tapTargetWrapperCssObj . position = tapTargetPosition ;
$ ( this . wrapper ) . css ( tapTargetWrapperCssObj ) ;
// Setting content
$ ( this . contentEl ) . css ( {
width : tapTargetTextWidth + 'px' ,
height : tapTargetTextHeight + 'px' ,
top : tapTargetTextTop + 'px' ,
right : tapTargetTextRight + 'px' ,
bottom : tapTargetTextBottom + 'px' ,
left : tapTargetTextLeft + 'px' ,
padding : tapTargetTextPadding + 'px' ,
verticalAlign : tapTargetTextAlign
2018-01-28 23:22:43 +11:00
} ) ;
2019-06-07 02:11:04 +10:00
// Setting wave
$ ( this . waveEl ) . css ( {
top : tapTargetWaveTop + 'px' ,
left : tapTargetWaveLeft + 'px' ,
width : tapTargetWaveWidth + 'px' ,
height : tapTargetWaveHeight + 'px'
2018-01-28 23:22:43 +11:00
} ) ;
}
2019-06-07 02:11:04 +10:00
/ * *
* Open TapTarget
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "open" ,
value : function open ( ) {
if ( this . isOpen ) {
return ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// onOpen callback
if ( typeof this . options . onOpen === 'function' ) {
this . options . onOpen . call ( this , this . $origin [ 0 ] ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . isOpen = true ;
this . wrapper . classList . add ( 'open' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
document . body . addEventListener ( 'click' , this . _handleDocumentClickBound , true ) ;
document . body . addEventListener ( 'touchend' , this . _handleDocumentClickBound ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Close Tap Target
* /
} , {
key : "close" ,
value : function close ( ) {
if ( ! this . isOpen ) {
2018-01-28 23:22:43 +11:00
return ;
}
2019-06-07 02:11:04 +10:00
// onClose callback
if ( typeof this . options . onClose === 'function' ) {
this . options . onClose . call ( this , this . $origin [ 0 ] ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . isOpen = false ;
this . wrapper . classList . remove ( 'open' ) ;
document . body . removeEventListener ( 'click' , this . _handleDocumentClickBound , true ) ;
document . body . removeEventListener ( 'touchend' , this . _handleDocumentClickBound ) ;
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( TapTarget . _ _proto _ _ || Object . getPrototypeOf ( TapTarget ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _TapTarget ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return TapTarget ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . TapTarget = TapTarget ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( TapTarget , 'tapTarget' , 'M_TapTarget' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
} ) ( cash ) ;
; ( function ( $ ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = {
classes : '' ,
dropdownOptions : { }
2018-01-28 23:22:43 +11:00
} ;
2019-06-07 02:11:04 +10:00
/ * *
* @ class
*
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var FormSelect = function ( _Component20 ) {
_inherits ( FormSelect , _Component20 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct FormSelect instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function FormSelect ( el , options ) {
_classCallCheck ( this , FormSelect ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Don't init if browser default version
var _this68 = _possibleConstructorReturn ( this , ( FormSelect . _ _proto _ _ || Object . getPrototypeOf ( FormSelect ) ) . call ( this , FormSelect , el , options ) ) ;
if ( _this68 . $el . hasClass ( 'browser-default' ) ) {
return _possibleConstructorReturn ( _this68 ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
_this68 . el . M _FormSelect = _this68 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Options for the select
* @ member FormSelect # options
* /
_this68 . options = $ . extend ( { } , FormSelect . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this68 . isMultiple = _this68 . $el . prop ( 'multiple' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Setup
_this68 . el . tabIndex = - 1 ;
_this68 . _keysSelected = { } ;
_this68 . _valueDict = { } ; // Maps key to original and generated option element.
_this68 . _setupDropdown ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this68 . _setupEventHandlers ( ) ;
return _this68 ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
_createClass ( FormSelect , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . _removeDropdown ( ) ;
this . el . M _FormSelect = undefined ;
}
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
var _this69 = this ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . _handleSelectChangeBound = this . _handleSelectChange . bind ( this ) ;
this . _handleOptionClickBound = this . _handleOptionClick . bind ( this ) ;
this . _handleInputClickBound = this . _handleInputClick . bind ( this ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
$ ( this . dropdownOptions ) . find ( 'li:not(.optgroup)' ) . each ( function ( el ) {
el . addEventListener ( 'click' , _this69 . _handleOptionClickBound ) ;
} ) ;
this . el . addEventListener ( 'change' , this . _handleSelectChangeBound ) ;
this . input . addEventListener ( 'click' , this . _handleInputClickBound ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
var _this70 = this ;
$ ( this . dropdownOptions ) . find ( 'li:not(.optgroup)' ) . each ( function ( el ) {
el . removeEventListener ( 'click' , _this70 . _handleOptionClickBound ) ;
} ) ;
this . el . removeEventListener ( 'change' , this . _handleSelectChangeBound ) ;
this . input . removeEventListener ( 'click' , this . _handleInputClickBound ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Select Change
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleSelectChange" ,
value : function _handleSelectChange ( e ) {
this . _setValueToInput ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Option Click
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleOptionClick" ,
value : function _handleOptionClick ( e ) {
e . preventDefault ( ) ;
var option = $ ( e . target ) . closest ( 'li' ) [ 0 ] ;
var key = option . id ;
if ( ! $ ( option ) . hasClass ( 'disabled' ) && ! $ ( option ) . hasClass ( 'optgroup' ) && key . length ) {
var selected = true ;
if ( this . isMultiple ) {
// Deselect placeholder option if still selected.
var placeholderOption = $ ( this . dropdownOptions ) . find ( 'li.disabled.selected' ) ;
if ( placeholderOption . length ) {
placeholderOption . removeClass ( 'selected' ) ;
placeholderOption . find ( 'input[type="checkbox"]' ) . prop ( 'checked' , false ) ;
this . _toggleEntryFromArray ( placeholderOption [ 0 ] . id ) ;
}
selected = this . _toggleEntryFromArray ( key ) ;
} else {
$ ( this . dropdownOptions ) . find ( 'li' ) . removeClass ( 'selected' ) ;
$ ( option ) . toggleClass ( 'selected' , selected ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set selected on original select option
// Only trigger if selected state changed
var prevSelected = $ ( this . _valueDict [ key ] . el ) . prop ( 'selected' ) ;
if ( prevSelected !== selected ) {
$ ( this . _valueDict [ key ] . el ) . prop ( 'selected' , selected ) ;
this . $el . trigger ( 'change' ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
e . stopPropagation ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Handle Input Click
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleInputClick" ,
value : function _handleInputClick ( ) {
if ( this . dropdown && this . dropdown . isOpen ) {
this . _setValueToInput ( ) ;
this . _setSelectedStates ( ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup dropdown
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupDropdown" ,
value : function _setupDropdown ( ) {
var _this71 = this ;
this . wrapper = document . createElement ( 'div' ) ;
$ ( this . wrapper ) . addClass ( 'select-wrapper ' + this . options . classes ) ;
this . $el . before ( $ ( this . wrapper ) ) ;
this . wrapper . appendChild ( this . el ) ;
if ( this . el . disabled ) {
this . wrapper . classList . add ( 'disabled' ) ;
}
// Create dropdown
this . $selectOptions = this . $el . children ( 'option, optgroup' ) ;
this . dropdownOptions = document . createElement ( 'ul' ) ;
this . dropdownOptions . id = "select-options-" + M . guid ( ) ;
$ ( this . dropdownOptions ) . addClass ( 'dropdown-content select-dropdown ' + ( this . isMultiple ? 'multiple-select-dropdown' : '' ) ) ;
// Create dropdown structure.
if ( this . $selectOptions . length ) {
this . $selectOptions . each ( function ( el ) {
if ( $ ( el ) . is ( 'option' ) ) {
// Direct descendant option.
var optionEl = void 0 ;
if ( _this71 . isMultiple ) {
optionEl = _this71 . _appendOptionWithIcon ( _this71 . $el , el , 'multiple' ) ;
} else {
optionEl = _this71 . _appendOptionWithIcon ( _this71 . $el , el ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this71 . _addOptionToValueDict ( el , optionEl ) ;
} else if ( $ ( el ) . is ( 'optgroup' ) ) {
// Optgroup.
var selectOptions = $ ( el ) . children ( 'option' ) ;
$ ( _this71 . dropdownOptions ) . append ( $ ( '<li class="optgroup"><span>' + el . getAttribute ( 'label' ) + '</span></li>' ) [ 0 ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
selectOptions . each ( function ( el ) {
var optionEl = _this71 . _appendOptionWithIcon ( _this71 . $el , el , 'optgroup-option' ) ;
_this71 . _addOptionToValueDict ( el , optionEl ) ;
} ) ;
}
} ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . $el . after ( this . dropdownOptions ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Add input dropdown
this . input = document . createElement ( 'input' ) ;
$ ( this . input ) . addClass ( 'select-dropdown dropdown-trigger' ) ;
this . input . setAttribute ( 'type' , 'text' ) ;
this . input . setAttribute ( 'readonly' , 'true' ) ;
this . input . setAttribute ( 'data-target' , this . dropdownOptions . id ) ;
if ( this . el . disabled ) {
$ ( this . input ) . prop ( 'disabled' , 'true' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . $el . before ( this . input ) ;
this . _setValueToInput ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Add caret
var dropdownIcon = $ ( '<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>' ) ;
this . $el . before ( dropdownIcon [ 0 ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Initialize dropdown
if ( ! this . el . disabled ) {
var dropdownOptions = $ . extend ( { } , this . options . dropdownOptions ) ;
// Add callback for centering selected option when dropdown content is scrollable
dropdownOptions . onOpenEnd = function ( el ) {
var selectedOption = $ ( _this71 . dropdownOptions ) . find ( '.selected' ) . first ( ) ;
if ( selectedOption . length ) {
// Focus selected option in dropdown
M . keyDown = true ;
_this71 . dropdown . focusedIndex = selectedOption . index ( ) ;
_this71 . dropdown . _focusFocusedItem ( ) ;
M . keyDown = false ;
// Handle scrolling to selected option
if ( _this71 . dropdown . isScrollable ) {
var scrollOffset = selectedOption [ 0 ] . getBoundingClientRect ( ) . top - _this71 . dropdownOptions . getBoundingClientRect ( ) . top ; // scroll to selected option
scrollOffset -= _this71 . dropdownOptions . clientHeight / 2 ; // center in dropdown
_this71 . dropdownOptions . scrollTop = scrollOffset ;
}
}
} ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( this . isMultiple ) {
dropdownOptions . closeOnClick = false ;
}
this . dropdown = M . Dropdown . init ( this . input , dropdownOptions ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Add initial selections
this . _setSelectedStates ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
/ * *
* Add option to value dict
* @ param { Element } el original option element
* @ param { Element } optionEl generated option element
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_addOptionToValueDict" ,
value : function _addOptionToValueDict ( el , optionEl ) {
var index = Object . keys ( this . _valueDict ) . length ;
var key = this . dropdownOptions . id + index ;
var obj = { } ;
optionEl . id = key ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
obj . el = el ;
obj . optionEl = optionEl ;
this . _valueDict [ key ] = obj ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Remove dropdown
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeDropdown" ,
value : function _removeDropdown ( ) {
$ ( this . wrapper ) . find ( '.caret' ) . remove ( ) ;
$ ( this . input ) . remove ( ) ;
$ ( this . dropdownOptions ) . remove ( ) ;
$ ( this . wrapper ) . before ( this . $el ) ;
$ ( this . wrapper ) . remove ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup dropdown
* @ param { Element } select select element
* @ param { Element } option option element from select
* @ param { String } type
* @ return { Element } option element added
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_appendOptionWithIcon" ,
value : function _appendOptionWithIcon ( select , option , type ) {
// Add disabled attr if disabled
var disabledClass = option . disabled ? 'disabled ' : '' ;
var optgroupClass = type === 'optgroup-option' ? 'optgroup-option ' : '' ;
var multipleCheckbox = this . isMultiple ? "<label><input type=\"checkbox\"" + disabledClass + "\"/><span>" + option . innerHTML + "</span></label>" : option . innerHTML ;
var liEl = $ ( '<li></li>' ) ;
var spanEl = $ ( '<span></span>' ) ;
spanEl . html ( multipleCheckbox ) ;
liEl . addClass ( disabledClass + " " + optgroupClass ) ;
liEl . append ( spanEl ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// add icons
var iconUrl = option . getAttribute ( 'data-icon' ) ;
if ( ! ! iconUrl ) {
var imgEl = $ ( "<img alt=\"\" src=\"" + iconUrl + "\">" ) ;
liEl . prepend ( imgEl ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Check for multiple type.
$ ( this . dropdownOptions ) . append ( liEl [ 0 ] ) ;
return liEl [ 0 ] ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Toggle entry from option
* @ param { String } key Option key
* @ return { Boolean } if entry was added or removed
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_toggleEntryFromArray" ,
value : function _toggleEntryFromArray ( key ) {
var notAdded = ! this . _keysSelected . hasOwnProperty ( key ) ;
var $optionLi = $ ( this . _valueDict [ key ] . optionEl ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( notAdded ) {
this . _keysSelected [ key ] = true ;
} else {
delete this . _keysSelected [ key ] ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
$optionLi . toggleClass ( 'selected' , notAdded ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Set checkbox checked value
$optionLi . find ( 'input[type="checkbox"]' ) . prop ( 'checked' , notAdded ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// use notAdded instead of true (to detect if the option is selected or not)
$optionLi . prop ( 'selected' , notAdded ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return notAdded ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Set text value to input
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setValueToInput" ,
value : function _setValueToInput ( ) {
var values = [ ] ;
var options = this . $el . find ( 'option' ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
options . each ( function ( el ) {
if ( $ ( el ) . prop ( 'selected' ) ) {
var text = $ ( el ) . text ( ) ;
values . push ( text ) ;
2018-01-28 23:22:43 +11:00
}
} ) ;
2019-06-07 02:11:04 +10:00
if ( ! values . length ) {
var firstDisabled = this . $el . find ( 'option:disabled' ) . eq ( 0 ) ;
if ( firstDisabled . length && firstDisabled [ 0 ] . value === '' ) {
values . push ( firstDisabled . text ( ) ) ;
}
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
this . input . value = values . join ( ', ' ) ;
}
/ * *
* Set selected state of dropdown to match actual select element
* /
} , {
key : "_setSelectedStates" ,
value : function _setSelectedStates ( ) {
this . _keysSelected = { } ;
for ( var key in this . _valueDict ) {
var option = this . _valueDict [ key ] ;
var optionIsSelected = $ ( option . el ) . prop ( 'selected' ) ;
$ ( option . optionEl ) . find ( 'input[type="checkbox"]' ) . prop ( 'checked' , optionIsSelected ) ;
if ( optionIsSelected ) {
this . _activateOption ( $ ( this . dropdownOptions ) , $ ( option . optionEl ) ) ;
this . _keysSelected [ key ] = true ;
} else {
$ ( option . optionEl ) . removeClass ( 'selected' ) ;
2018-01-28 23:22:43 +11:00
}
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Make option as selected and scroll to selected position
* @ param { jQuery } collection Select options jQuery element
* @ param { Element } newOption element of the new option
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_activateOption" ,
value : function _activateOption ( collection , newOption ) {
if ( newOption ) {
if ( ! this . isMultiple ) {
collection . find ( 'li.selected' ) . removeClass ( 'selected' ) ;
}
var option = $ ( newOption ) ;
option . addClass ( 'selected' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Selected Values
* @ return { Array } Array of selected values
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getSelectedValues" ,
value : function getSelectedValues ( ) {
var selectedValues = [ ] ;
for ( var key in this . _keysSelected ) {
selectedValues . push ( this . _valueDict [ key ] . el . value ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
return selectedValues ;
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( FormSelect . _ _proto _ _ || Object . getPrototypeOf ( FormSelect ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _FormSelect ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
return FormSelect ;
} ( Component ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
M . FormSelect = FormSelect ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( FormSelect , 'formSelect' , 'M_FormSelect' ) ;
}
} ) ( cash ) ;
; ( function ( $ , anim ) {
'use strict' ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _defaults = { } ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* @ class
*
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var Range = function ( _Component21 ) {
_inherits ( Range , _Component21 ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Construct Range instance
* @ constructor
* @ param { Element } el
* @ param { Object } options
* /
function Range ( el , options ) {
_classCallCheck ( this , Range ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var _this72 = _possibleConstructorReturn ( this , ( Range . _ _proto _ _ || Object . getPrototypeOf ( Range ) ) . call ( this , Range , el , options ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this72 . el . M _Range = _this72 ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Options for the range
* @ member Range # options
* /
_this72 . options = $ . extend ( { } , Range . defaults , options ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this72 . _mousedown = false ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
// Setup
_this72 . _setupThumb ( ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_this72 . _setupEventHandlers ( ) ;
return _this72 ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
_createClass ( Range , [ {
key : "destroy" ,
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Teardown component
* /
value : function destroy ( ) {
this . _removeEventHandlers ( ) ;
this . _removeThumb ( ) ;
this . el . M _Range = undefined ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupEventHandlers" ,
value : function _setupEventHandlers ( ) {
this . _handleRangeChangeBound = this . _handleRangeChange . bind ( this ) ;
this . _handleRangeMousedownTouchstartBound = this . _handleRangeMousedownTouchstart . bind ( this ) ;
this . _handleRangeInputMousemoveTouchmoveBound = this . _handleRangeInputMousemoveTouchmove . bind ( this ) ;
this . _handleRangeMouseupTouchendBound = this . _handleRangeMouseupTouchend . bind ( this ) ;
this . _handleRangeBlurMouseoutTouchleaveBound = this . _handleRangeBlurMouseoutTouchleave . bind ( this ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . addEventListener ( 'change' , this . _handleRangeChangeBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . addEventListener ( 'mousedown' , this . _handleRangeMousedownTouchstartBound ) ;
this . el . addEventListener ( 'touchstart' , this . _handleRangeMousedownTouchstartBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . addEventListener ( 'input' , this . _handleRangeInputMousemoveTouchmoveBound ) ;
this . el . addEventListener ( 'mousemove' , this . _handleRangeInputMousemoveTouchmoveBound ) ;
this . el . addEventListener ( 'touchmove' , this . _handleRangeInputMousemoveTouchmoveBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . addEventListener ( 'mouseup' , this . _handleRangeMouseupTouchendBound ) ;
this . el . addEventListener ( 'touchend' , this . _handleRangeMouseupTouchendBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . addEventListener ( 'blur' , this . _handleRangeBlurMouseoutTouchleaveBound ) ;
this . el . addEventListener ( 'mouseout' , this . _handleRangeBlurMouseoutTouchleaveBound ) ;
this . el . addEventListener ( 'touchleave' , this . _handleRangeBlurMouseoutTouchleaveBound ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Remove Event Handlers
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeEventHandlers" ,
value : function _removeEventHandlers ( ) {
this . el . removeEventListener ( 'change' , this . _handleRangeChangeBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . removeEventListener ( 'mousedown' , this . _handleRangeMousedownTouchstartBound ) ;
this . el . removeEventListener ( 'touchstart' , this . _handleRangeMousedownTouchstartBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . removeEventListener ( 'input' , this . _handleRangeInputMousemoveTouchmoveBound ) ;
this . el . removeEventListener ( 'mousemove' , this . _handleRangeInputMousemoveTouchmoveBound ) ;
this . el . removeEventListener ( 'touchmove' , this . _handleRangeInputMousemoveTouchmoveBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . removeEventListener ( 'mouseup' , this . _handleRangeMouseupTouchendBound ) ;
this . el . removeEventListener ( 'touchend' , this . _handleRangeMouseupTouchendBound ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
this . el . removeEventListener ( 'blur' , this . _handleRangeBlurMouseoutTouchleaveBound ) ;
this . el . removeEventListener ( 'mouseout' , this . _handleRangeBlurMouseoutTouchleaveBound ) ;
this . el . removeEventListener ( 'touchleave' , this . _handleRangeBlurMouseoutTouchleaveBound ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Range Change
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleRangeChange" ,
value : function _handleRangeChange ( ) {
$ ( this . value ) . html ( this . $el . val ( ) ) ;
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
if ( ! $ ( this . thumb ) . hasClass ( 'active' ) ) {
this . _showRangeBubble ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
var offsetLeft = this . _calcRangeOffset ( ) ;
$ ( this . thumb ) . addClass ( 'active' ) . css ( 'left' , offsetLeft + 'px' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Range Mousedown and Touchstart
* @ param { Event } e
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleRangeMousedownTouchstart" ,
value : function _handleRangeMousedownTouchstart ( e ) {
// Set indicator value
$ ( this . value ) . html ( this . $el . val ( ) ) ;
this . _mousedown = true ;
this . $el . addClass ( 'active' ) ;
if ( ! $ ( this . thumb ) . hasClass ( 'active' ) ) {
this . _showRangeBubble ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
if ( e . type !== 'input' ) {
var offsetLeft = this . _calcRangeOffset ( ) ;
$ ( this . thumb ) . addClass ( 'active' ) . css ( 'left' , offsetLeft + 'px' ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Range Input , Mousemove and Touchmove
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleRangeInputMousemoveTouchmove" ,
value : function _handleRangeInputMousemoveTouchmove ( ) {
if ( this . _mousedown ) {
if ( ! $ ( this . thumb ) . hasClass ( 'active' ) ) {
this . _showRangeBubble ( ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
var offsetLeft = this . _calcRangeOffset ( ) ;
$ ( this . thumb ) . addClass ( 'active' ) . css ( 'left' , offsetLeft + 'px' ) ;
$ ( this . value ) . html ( this . $el . val ( ) ) ;
2018-01-28 23:22:43 +11:00
}
2019-06-07 02:11:04 +10:00
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Range Mouseup and Touchend
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleRangeMouseupTouchend" ,
value : function _handleRangeMouseupTouchend ( ) {
this . _mousedown = false ;
this . $el . removeClass ( 'active' ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Handle Range Blur , Mouseout and Touchleave
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_handleRangeBlurMouseoutTouchleave" ,
value : function _handleRangeBlurMouseoutTouchleave ( ) {
if ( ! this . _mousedown ) {
var paddingLeft = parseInt ( this . $el . css ( 'padding-left' ) ) ;
var marginLeft = 7 + paddingLeft + 'px' ;
if ( $ ( this . thumb ) . hasClass ( 'active' ) ) {
anim . remove ( this . thumb ) ;
anim ( {
targets : this . thumb ,
height : 0 ,
width : 0 ,
top : 10 ,
easing : 'easeOutQuad' ,
marginLeft : marginLeft ,
duration : 100
2018-01-28 23:22:43 +11:00
} ) ;
2019-06-07 02:11:04 +10:00
}
$ ( this . thumb ) . removeClass ( 'active' ) ;
}
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Setup dropdown
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_setupThumb" ,
value : function _setupThumb ( ) {
this . thumb = document . createElement ( 'span' ) ;
this . value = document . createElement ( 'span' ) ;
$ ( this . thumb ) . addClass ( 'thumb' ) ;
$ ( this . value ) . addClass ( 'value' ) ;
$ ( this . thumb ) . append ( this . value ) ;
this . $el . after ( this . thumb ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Remove dropdown
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_removeThumb" ,
value : function _removeThumb ( ) {
$ ( this . thumb ) . remove ( ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* morph thumb into bubble
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_showRangeBubble" ,
value : function _showRangeBubble ( ) {
var paddingLeft = parseInt ( $ ( this . thumb ) . parent ( ) . css ( 'padding-left' ) ) ;
var marginLeft = - 7 + paddingLeft + 'px' ; // TODO: fix magic number?
anim . remove ( this . thumb ) ;
anim ( {
targets : this . thumb ,
height : 30 ,
width : 30 ,
top : - 30 ,
marginLeft : marginLeft ,
duration : 300 ,
easing : 'easeOutQuint'
} ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Calculate the offset of the thumb
* @ return { Number } offset in pixels
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "_calcRangeOffset" ,
value : function _calcRangeOffset ( ) {
var width = this . $el . width ( ) - 15 ;
var max = parseFloat ( this . $el . attr ( 'max' ) ) || 100 ; // Range default max
var min = parseFloat ( this . $el . attr ( 'min' ) ) || 0 ; // Range default min
var percent = ( parseFloat ( this . $el . val ( ) ) - min ) / ( max - min ) ;
return percent * width ;
}
} ] , [ {
key : "init" ,
value : function init ( els , options ) {
return _get ( Range . _ _proto _ _ || Object . getPrototypeOf ( Range ) , "init" , this ) . call ( this , this , els , options ) ;
}
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
/ * *
* Get Instance
* /
2018-01-28 23:22:43 +11:00
2019-06-07 02:11:04 +10:00
} , {
key : "getInstance" ,
value : function getInstance ( el ) {
var domElem = ! ! el . jquery ? el [ 0 ] : el ;
return domElem . M _Range ;
}
} , {
key : "defaults" ,
get : function ( ) {
return _defaults ;
}
} ] ) ;
return Range ;
} ( Component ) ;
M . Range = Range ;
if ( M . jQueryLoaded ) {
M . initializeJqueryWrapper ( Range , 'range' , 'M_Range' ) ;
}
Range . init ( $ ( 'input[type=range]' ) ) ;
} ) ( cash , M . anime ) ;