2019-01-10 18:48:02 +00:00
! function ( t ) { var e = { } ; function n ( i ) { if ( e [ i ] ) return e [ i ] . exports ; var o = e [ i ] = { i : i , l : ! 1 , exports : { } } ; return t [ i ] . call ( o . exports , o , o . exports , n ) , o . l = ! 0 , o . exports } n . m = t , n . c = e , n . d = function ( t , e , i ) { n . o ( t , e ) || Object . defineProperty ( t , e , { enumerable : ! 0 , get : i } ) } , n . r = function ( t ) { "undefined" != typeof Symbol && Symbol . toStringTag && Object . defineProperty ( t , Symbol . toStringTag , { value : "Module" } ) , Object . defineProperty ( t , "__esModule" , { value : ! 0 } ) } , n . t = function ( t , e ) { if ( 1 & e && ( t = n ( t ) ) , 8 & e ) return t ; if ( 4 & e && "object" == typeof t && t && t . _ _esModule ) return t ; var i = Object . create ( null ) ; if ( n . r ( i ) , Object . defineProperty ( i , "default" , { enumerable : ! 0 , value : t } ) , 2 & e && "string" != typeof t ) for ( var o in t ) n . d ( i , o , function ( e ) { return t [ e ] } . bind ( null , o ) ) ; return i } , n . n = function ( t ) { var e = t && t . _ _esModule ? function ( ) { return t . default } : function ( ) { return t } ; return n . d ( e , "a" , e ) , e } , n . o = function ( t , e ) { return Object . prototype . hasOwnProperty . call ( t , e ) } , n . p = "" , n ( n . s = 140 ) } ( [ function ( t , e , n ) { "use strict" ;
2019-01-09 01:21:29 +00:00
/ * *
* @ license
* Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
* This code may only be used under the BSD style license found at
* http : //polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http : //polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http : //polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http : //polymer.github.io/PATENTS.txt
2019-01-10 18:48:02 +00:00
* /const i=new WeakMap,o=t=>"function"==typeof t&&i.has(t),r=void 0!==window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,s=(t,e,n=null)=>{let i=e;for(;i!==n;){const e=i.nextSibling;t.removeChild(i),i=e}},a={},l=`{{lit-${String(Math.random()).slice(2)}}}`,c=`\x3c!--${l}--\x3e`,u=new RegExp(`${l}|${c}`),h="$lit$";class d{constructor(t,e){this.parts=[],this.element=e;let n=-1,i=0;const o=[],r=e=>{const s=e.content,a=document.createTreeWalker(s,133,null,!1);let c,d;for(;a.nextNode();){n++,c=d;const e=d=a.currentNode;if(1===e.nodeType){if(e.hasAttributes()){const o=e.attributes;let r=0;for(let t=0;t<o.length;t++)o[t].value.indexOf(l)>=0&&r++;for(;r-- >0;){const o=t.strings[i],r=v.exec(o)[2],s=r.toLowerCase()+h,a=e.getAttribute(s).split(u);this.parts.push({type:"attribute",index:n,name:r,strings:a}),e.removeAttribute(s),i+=a.length-1}}"TEMPLATE"===e.tagName&&r(e)}else if(3===e.nodeType){const t=e.nodeValue;if(t.indexOf(l)<0)continue;const r=e.parentNode,s=t.split(u),a=s.length-1;i+=a;for(let t=0;t<a;t++)r.insertBefore(""===s[t]?f():document.createTextNode(s[t]),e),this.parts.push({type:"node",index:n++});r.insertBefore(""===s[a]?f():document.createTextNode(s[a]),e),o.push(e)}else if(8===e.nodeType)if(e.nodeValue===l){const t=e.parentNode,r=e.previousSibling;null===r||r!==c||r.nodeType!==Node.TEXT_NODE?t.insertBefore(f(),e):n--,this.parts.push({type:"node",index:n++}),o.push(e),null===e.nextSibling?t.insertBefore(f(),e):n--,d=c,i++}else{let t=-1;for(;-1!==(t=e.nodeValue.indexOf(l,t+1));)this.parts.push({type:"node",index:-1})}}};r(e);for(const t of o)t.parentNode.removeChild(t)}}const p=t=>-1!==t.index,f=()=>document.createComment(""),v=/ ( [ \ x09 \ x0a \ x0c \ x0d ] ) ( [ ^ \ 0 - \ x1F \ x7F - \ x9F \ x09 \ x0a \ x0c \ x0d "'>=\/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d" '`<>=]*|"[^"]*|' [ ^ ' ] * ) ) $ / ;
2019-01-09 01:21:29 +00:00
/ * *
* @ license
* Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
* This code may only be used under the BSD style license found at
* http : //polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http : //polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http : //polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http : //polymer.github.io/PATENTS.txt
* /
2019-01-10 18:48:02 +00:00
class b { constructor ( t , e , n ) { this . _parts = [ ] , this . template = t , this . processor = e , this . options = n } update ( t ) { let e = 0 ; for ( const n of this . _parts ) void 0 !== n && n . setValue ( t [ e ] ) , e ++ ; for ( const t of this . _parts ) void 0 !== t && t . commit ( ) } _clone ( ) { const t = r ? this . template . element . content . cloneNode ( ! 0 ) : document . importNode ( this . template . element . content , ! 0 ) , e = this . template . parts ; let n = 0 , i = 0 ; const o = t => { const r = document . createTreeWalker ( t , 133 , null , ! 1 ) ; let s = r . nextNode ( ) ; for ( ; n < e . length && null !== s ; ) { const t = e [ n ] ; if ( p ( t ) ) if ( i === t . index ) { if ( "node" === t . type ) { const t = this . processor . handleTextExpression ( this . options ) ; t . insertAfterNode ( s ) , this . _parts . push ( t ) } else this . _parts . push ( ... this . processor . handleAttributeExpressions ( s , t . name , t . strings , this . options ) ) ; n ++ } else i ++ , "TEMPLATE" === s . nodeName && o ( s . content ) , s = r . nextNode ( ) ; else this . _parts . push ( void 0 ) , n ++ } } ; return o ( t ) , r && ( document . adoptNode ( t ) , customElements . upgrade ( t ) ) , t } }
2019-01-09 01:21:29 +00:00
/ * *
* @ license
* Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
* This code may only be used under the BSD style license found at
* http : //polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http : //polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http : //polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http : //polymer.github.io/PATENTS.txt
2019-01-10 18:48:02 +00:00
* / c l a s s m { c o n s t r u c t o r ( t , e , n , i ) { t h i s . s t r i n g s = t , t h i s . v a l u e s = e , t h i s . t y p e = n , t h i s . p r o c e s s o r = i } g e t H T M L ( ) { c o n s t t = t h i s . s t r i n g s . l e n g t h - 1 ; l e t e = " " ; f o r ( l e t n = 0 ; n < t ; n + + ) { c o n s t t = t h i s . s t r i n g s [ n ] ; l e t i = ! 1 ; e + = t . r e p l a c e ( v , ( t , e , n , o ) = > ( i = ! 0 , e + n + h + o + l ) ) , i | | ( e + = c ) } r e t u r n e + t h i s . s t r i n g s [ t ] } g e t T e m p l a t e E l e m e n t ( ) { c o n s t t = d o c u m e n t . c r e a t e E l e m e n t ( " t e m p l a t e " ) ; r e t u r n t . i n n e r H T M L = t h i s . g e t H T M L ( ) , t } }
2019-01-09 01:21:29 +00:00
/ * *
* @ license
* Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
* This code may only be used under the BSD style license found at
* http : //polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http : //polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http : //polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http : //polymer.github.io/PATENTS.txt
* /
2019-01-10 18:48:02 +00:00
const g = t => null === t || ! ( "object" == typeof t || "function" == typeof t ) ; class y { constructor ( t , e , n ) { this . dirty = ! 0 , this . element = t , this . name = e , this . strings = n , this . parts = [ ] ; for ( let t = 0 ; t < n . length - 1 ; t ++ ) this . parts [ t ] = this . _createPart ( ) } _createPart ( ) { return new x ( this ) } _getValue ( ) { const t = this . strings , e = t . length - 1 ; let n = "" ; for ( let i = 0 ; i < e ; i ++ ) { n += t [ i ] ; const e = this . parts [ i ] ; if ( void 0 !== e ) { const t = e . value ; if ( null != t && ( Array . isArray ( t ) || "string" != typeof t && t [ Symbol . iterator ] ) ) for ( const e of t ) n += "string" == typeof e ? e : String ( e ) ; else n += "string" == typeof t ? t : String ( t ) } } return n += t [ e ] } commit ( ) { this . dirty && ( this . dirty = ! 1 , this . element . setAttribute ( this . name , this . _getValue ( ) ) ) } } class x { constructor ( t ) { this . value = void 0 , this . committer = t } setValue ( t ) { t === a || g ( t ) && t === this . value || ( this . value = t , o ( t ) || ( this . committer . dirty = ! 0 ) ) } commit ( ) { for ( ; o ( this . value ) ; ) { const t = this . value ; this . value = a , t ( this ) } this . value !== a && this . committer . commit ( ) } } class _ { constructor ( t ) { this . value = void 0 , this . _pendingValue = void 0 , this . options = t } appendInto ( t ) { this . startNode = t . appendChild ( f ( ) ) , this . endNode = t . appendChild ( f ( ) ) } insertAfterNode ( t ) { this . startNode = t , this . endNode = t . nextSibling } appendIntoPart ( t ) { t . _insert ( this . startNode = f ( ) ) , t . _insert ( this . endNode = f ( ) ) } insertAfterPart ( t ) { t . _insert ( this . startNode = f ( ) ) , this . endNode = t . endNode , t . endNode = this . startNode } setValue ( t ) { this . _pendingValue = t } commit ( ) { for ( ; o ( this . _pendingValue ) ; ) { const t = this . _pendingValue ; this . _pendingValue = a , t ( this ) } const t = this . _pendingValue ; t !== a && ( g ( t ) ? t !== this . value && this . _commitText ( t ) : t instanceof m ? this . _commitTemplateResult ( t ) : t instanceof Node ? this . _commitNode ( t ) : Array . isArray ( t ) || t [ Symbol . iterator ] ? this . _commitIterable ( t ) : this . _commitText ( t ) ) } _insert ( t ) { this . endNode . parentNode . insertBefore ( t , this . endNode ) } _commitNode ( t ) { this . value !== t && ( this . clear ( ) , this . _insert ( t ) , this . value = t ) } _commitText ( t ) { const e = this . startNode . nextSibling ; t = null == t ? "" : t , e === this . endNode . previousSibling && e . nodeType === Node . TEXT _NODE ? e . textContent = t : this . _commitNode ( document . createTextNode ( "string" == typeof t ? t : String ( t ) ) ) , this . value = t } _commitTemplateResult ( t ) { const e = this . options . templateFactory ( t ) ; if ( this . value && this . value . template === e ) this . value . update ( t . values ) ; else { const n = new b ( e , t . processor , this . options ) , i = n . _clone ( ) ; n . update ( t . values ) , this . _commitNode ( i ) , this . value = n } } _commitIterable ( t ) { Array . isArray ( this . value ) || ( this . value = [ ] , this . clear ( ) ) ; const e = this . value ; let n , i = 0 ; for ( const o of t ) void 0 === ( n = e [ i ] ) && ( n = new _ ( this . options ) , e . push ( n ) , 0 === i ? n . appendIntoPart ( this ) : n . insertAfterPart ( e [ i - 1 ] ) ) , n . setValue ( o ) , n . commit ( ) , i ++ ; i < e . length && ( e . length = i , this . clear ( n && n . endNode ) ) } clear ( t = this . startNode ) { s ( this . startNode . parentNode , t . nextSibling , this . endNode ) } } class w { constructor ( t , e , n ) { if ( this . value = void 0 , this . _pendingValue = void 0 , 2 !== n . length || "" !== n [ 0 ] || "" !== n [ 1 ] ) throw new Error ( "Boolean attributes can only contain a single expression" ) ; this . element = t , this . name = e , this . strings = n } setValue ( t ) { this . _pendingValue = t } commit ( ) { for ( ; o ( this . _pendingValue ) ; ) { const t = this . _pendingValue ; this . _pendingValue = a , t ( this ) } if ( this . _pendingValue === a ) return ; const t = ! ! this . _pendingValue ; this . value !== t && ( t ? this . element . setAttribute ( this . name , "" ) : this . element . removeAttribute ( this . name ) ) , this . value = t , this . _pendingValue = a } } class S extends y { constructor ( t , e , n ) { super ( t , e , n ) , this . single = 2 === n . length && "" === n [ 0 ] && "" === n [ 1 ] } _createPart ( ) { return new E ( this ) } _getValue ( ) { return this . single ? this . parts [ 0 ] . value : super . _getValue ( ) } commit ( ) { this . dirty && ( this . dirty = ! 1 , this . element [ this . name ] = this . _getValue ( ) ) } } class E extends x { } let k = ! 1 ; try { const t = { get capture ( ) { return k = ! 0 , ! 1 } } ; window . addEventListener ( "test" , t , t ) , window . removeEventListener ( "test" , t , t ) } catch ( t ) { } class M { constructor ( t , e , n ) { this . value = void 0 , this . _pendingValue = void 0 , this . element = t , this . eventName = e , this . eventContext = n , this . _boundHandleEvent = ( t => this . handleEvent ( t ) ) } setValue ( t ) { this . _pendingValue = t } commit ( ) { for ( ; o ( this . _pendingValue ) ; ) { const t = this . _pendingValue ; this . _pendingValue = a , t ( this ) } if ( this . _pendingValue === a ) return ; const t = this . _pendingValue , e = this . value , n = null == t || null != e && ( t . capture !== e . capture || t . once
2019-01-09 01:21:29 +00:00
/ * *
* @ license
* Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
* This code may only be used under the BSD style license found at
* http : //polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http : //polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http : //polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http : //polymer.github.io/PATENTS.txt
2019-01-10 18:48:02 +00:00
* / c o n s t I = n e w c l a s s { h a n d l e A t t r i b u t e E x p r e s s i o n s ( t , e , n , i ) { c o n s t o = e [ 0 ] ; r e t u r n " . " = = = o ? n e w S ( t , e . s l i c e ( 1 ) , n ) . p a r t s : " @ " = = = o ? [ n e w M ( t , e . s l i c e ( 1 ) , i . e v e n t C o n t e x t ) ] : " ? " = = = o ? [ n e w w ( t , e . s l i c e ( 1 ) , n ) ] : n e w y ( t , e , n ) . p a r t s } h a n d l e T e x t E x p r e s s i o n ( t ) { r e t u r n n e w _ ( t ) } } ;
2019-01-09 01:21:29 +00:00
/ * *
* @ license
* Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
* This code may only be used under the BSD style license found at
* http : //polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http : //polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http : //polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http : //polymer.github.io/PATENTS.txt
2019-01-10 04:38:07 +00:00
* / f u n c t i o n C ( t ) { l e t e = T . g e t ( t . t y p e ) ; v o i d 0 = = = e & & ( e = { s t r i n g s A r r a y : n e w W e a k M a p , k e y S t r i n g : n e w M a p } , T . s e t ( t . t y p e , e ) ) ; l e t n = e . s t r i n g s A r r a y . g e t ( t . s t r i n g s ) ; i f ( v o i d 0 ! = = n ) r e t u r n n ; c o n s t i = t . s t r i n g s . j o i n ( l ) ; r e t u r n v o i d 0 = = = ( n = e . k e y S t r i n g . g e t ( i ) ) & & ( n = n e w d ( t , t . g e t T e m p l a t e E l e m e n t ( ) ) , e . k e y S t r i n g . s e t ( i , n ) ) , e . s t r i n g s A r r a y . s e t ( t . s t r i n g s , n ) , n } c o n s t T = n e w M a p , N = n e w W e a k M a p , P = ( t , . . . e ) = > n e w m ( t , e , " h t m l " , I ) , O = N o d e F i l t e r . S H O W _ E L E M E N T | N o d e F i l t e r . S H O W _ C O M M E N T | N o d e F i l t e r . S H O W _ T E X T ;
2019-01-09 01:21:29 +00:00
/ * *
* @ license
* Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
* This code may only be used under the BSD style license found at
* http : //polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http : //polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http : //polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http : //polymer.github.io/PATENTS.txt
2019-01-10 18:48:02 +00:00
* / f u n c t i o n R ( t , e ) { c o n s t { e l e m e n t : { c o n t e n t : n } , p a r t s : i } = t , o = d o c u m e n t . c r e a t e T r e e W a l k e r ( n , O , n u l l , ! 1 ) ; l e t r = F ( i ) , s = i [ r ] , a = - 1 , l = 0 ; c o n s t c = [ ] ; l e t u = n u l l ; f o r ( ; o . n e x t N o d e ( ) ; ) { a + + ; c o n s t t = o . c u r r e n t N o d e ; f o r ( t . p r e v i o u s S i b l i n g = = = u & & ( u = n u l l ) , e . h a s ( t ) & & ( c . p u s h ( t ) , n u l l = = = u & & ( u = t ) ) , n u l l ! = = u & & l + + ; v o i d 0 ! = = s & & s . i n d e x = = = a ; ) s . i n d e x = n u l l ! = = u ? - 1 : s . i n d e x - l , s = i [ r = F ( i , r ) ] } c . f o r E a c h ( t = > t . p a r e n t N o d e . r e m o v e C h i l d ( t ) ) } c o n s t $ = t = > { l e t e = t . n o d e T y p e = = = N o d e . D O C U M E N T _ F R A G M E N T _ N O D E ? 0 : 1 ; c o n s t n = d o c u m e n t . c r e a t e T r e e W a l k e r ( t , O , n u l l , ! 1 ) ; f o r ( ; n . n e x t N o d e ( ) ; ) e + + ; r e t u r n e } , F = ( t , e = - 1 ) = > { f o r ( l e t n = e + 1 ; n < t . l e n g t h ; n + + ) { c o n s t e = t [ n ] ; i f ( p ( e ) ) r e t u r n n } r e t u r n - 1 } ;
2019-01-09 01:21:29 +00:00
/ * *
* @ license
* Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
* This code may only be used under the BSD style license found at
* http : //polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http : //polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http : //polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http : //polymer.github.io/PATENTS.txt
* /
2019-01-10 18:48:02 +00:00
const z = ( t , e ) => ` ${ t } -- ${ e } ` ; let D = ! 0 ; void 0 === window . ShadyCSS ? D = ! 1 : void 0 === window . ShadyCSS . prepareTemplateDom && ( console . warn ( "Incompatible ShadyCSS version detected.Please update to at least @webcomponents/webcomponentsjs@2.0.2 and@webcomponents/shadycss@1.3.1." ) , D = ! 1 ) ; const L = t => e => { const n = z ( e . type , t ) ; let i = T . get ( n ) ; void 0 === i && ( i = { stringsArray : new WeakMap , keyString : new Map } , T . set ( n , i ) ) ; let o = i . stringsArray . get ( e . strings ) ; if ( void 0 !== o ) return o ; const r = e . strings . join ( l ) ; if ( void 0 === ( o = i . keyString . get ( r ) ) ) { const n = e . getTemplateElement ( ) ; D && window . ShadyCSS . prepareTemplateDom ( n , t ) , o = new d ( e , n ) , i . keyString . set ( r , o ) } return i . stringsArray . set ( e . strings , o ) , o } , q = [ "html" , "svg" ] , j = new Set , H = ( t , e , n ) => { j . add ( n ) ; const i = t . querySelectorAll ( "style" ) ; if ( 0 === i . length ) return ; const o = document . createElement ( "style" ) ; for ( let t = 0 ; t < i . length ; t ++ ) { const e = i [ t ] ; e . parentNode . removeChild ( e ) , o . textContent += e . textContent } if ( ( t => { q . forEach ( e => { const n = T . get ( z ( e , t ) ) ; void 0 !== n && n . keyString . forEach ( t => { const { element : { content : e } } = t , n = new Set ; Array . from ( e . querySelectorAll ( "style" ) ) . forEach ( t => { n . add ( t ) } ) , R ( t , n ) } ) } ) } ) ( n ) , function ( t , e , n = null ) { const { element : { content : i } , parts : o } = t ; if ( null == n ) return void i . appendChild ( e ) ; const r = document . createTreeWalker ( i , O , null , ! 1 ) ; let s = F ( o ) , a = 0 , l = - 1 ; for ( ; r . nextNode ( ) ; ) for ( l ++ , r . currentNode === n && ( a = $ ( e ) , n . parentNode . insertBefore ( e , n ) ) ; - 1 !== s && o [ s ] . index === l ; ) { if ( a > 0 ) { for ( ; - 1 !== s ; ) o [ s ] . index += a , s = F ( o , s ) ; return } s = F ( o , s ) } } ( e , o , e . element . content . firstChild ) , window . ShadyCSS . prepareTemplateStyles ( e . element , n ) , window . ShadyCSS . nativeShadow ) { const n = e . element . content . querySelector ( "style" ) ; t . insertBefore ( n . cloneNode ( ! 0 ) , t . firstChild ) } else { e . element . content . insertBefore ( o , e . element . content . firstChild ) ; const t = new Set ; t . add ( o ) , R ( e , t ) } } , V = t => null !== t , B = t => t ? "" : null , G = ( t , e ) => e !== t && ( e == e || t == t ) , U = { attribute : ! 0 , type : String , reflect : ! 1 , hasChanged : G } , W = new Promise ( t => t ( ! 0 ) ) , Y = 1 , K = 4 , J = 8 ; class X extends HTMLElement { constructor ( ) { super ( ) , this . _updateState = 0 , this . _instanceProperties = void 0 , this . _updatePromise = W , this . _changedProperties = new Map , this . _reflectingProperties = void 0 , this . initialize ( ) } static get observedAttributes ( ) { this . _finalize ( ) ; const t = [ ] ; for ( const [ e , n ] of this . _classProperties ) { const i = this . _attributeNameForProperty ( e , n ) ; void 0 !== i && ( this . _attributeToPropertyMap . set ( i , e ) , t . push ( i ) ) } return t } static createProperty ( t , e = U ) { if ( ! this . hasOwnProperty ( "_classProperties" ) ) { this . _classProperties = new Map ; const t = Object . getPrototypeOf ( this ) . _classProperties ; void 0 !== t && t . forEach ( ( t , e ) => this . _classProperties . set ( e , t ) ) } if ( this . _classProperties . set ( t , e ) , this . prototype . hasOwnProperty ( t ) ) return ; const n = "symbol" == typeof t ? Symbol ( ) : ` __ ${ t } ` ; Object . defineProperty ( this . prototype , t , { get ( ) { return this [ n ] } , set ( i ) { const o = this [ t ] ; this [ n ] = i , this . _requestPropertyUpdate ( t , o , e ) } , configurable : ! 0 , enumerable : ! 0 } ) } static _finalize ( ) { if ( this . hasOwnProperty ( "_finalized" ) && this . _finalized ) return ; const t = Object . getPrototypeOf ( this ) ; "function" == typeof t . _finalize && t . _finalize ( ) , this . _finalized = ! 0 , this . _attributeToPropertyMap = new Map ; const e = this . properties , n = [ ... Object . getOwnPropertyNames ( e ) , ... "function" == typeof Object . getOwnPropertySymbols ? Object . getOwnPropertySymbols ( e ) : [ ] ] ; for ( const t of n ) this . createProperty ( t , e [ t ] ) } static _attributeNameForProperty ( t , e ) { const n = void 0 !== e && e . attribute ; return ! 1 === n ? void 0 : "string" == typeof n ? n : "string" == typeof t ? t . toLowerCase ( ) : void 0 } static _valueHasChanged ( t , e , n = G ) { return n ( t , e ) } static _propertyValueFromAttribute ( t , e ) { const n = e && e . type ; if ( void 0 === n ) return t ; const i = n === Boolean ? V : "function" == typeof n ? n : n . fromAttribute ; return i ? i ( t ) : t } static _propertyValueToAttribute ( t , e ) { if ( void 0 === e || void 0 === e . reflect ) return ; return ( e . type === Boolean ? B : e . type && e . type . toAttribute || String ) ( t ) } initialize ( ) { this . renderRoot = this . createRenderRoot ( ) , this . _saveInstanceProperties ( ) } _saveInstanceProperties ( ) { for ( const [ t ] of this . constructor . _classProperties ) if ( this . hasOwnProperty ( t ) ) { const e = this [ t ] ; delete this [ t ] , this . _instanceProperties || ( this . _instanceProperties = new Map ) , this . _instanceProperties . set ( t , e ) } } _applyInstanceProperties ( ) { for ( const [ t , e ] of
2019-01-09 01:21:29 +00:00
/ * *
* @ license
* Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
* This code may only be used under the BSD style license found at
* http : //polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http : //polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http : //polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http : //polymer.github.io/PATENTS.txt
* /
Q ( ( t , e ) => t . querySelector ( e ) ) , Q ( ( t , e ) => t . querySelectorAll ( e ) ) ; function Q ( t ) { return e => ( n , i ) => { Object . defineProperty ( n , i , { get ( ) { return t ( this . renderRoot , e ) } , enumerable : ! 0 , configurable : ! 0 } ) } } n . d ( e , "a" , function ( ) { return Z } ) , n . d ( e , "b" , function ( ) { return P } ) ;
/ * *
* @ license
* Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
* This code may only be used under the BSD style license found at
* http : //polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http : //polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http : //polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http : //polymer.github.io/PATENTS.txt
* /
2019-01-10 18:48:02 +00:00
class Z extends X { update ( t ) { super . update ( t ) ; const e = this . render ( ) ; e instanceof m && this . constructor . render ( e , this . renderRoot , { scopeName : this . localName , eventContext : this } ) } render ( ) { } } Z . render = ( ( t , e , n ) => { const i = n . scopeName , o = N . has ( e ) , r = e instanceof ShadowRoot && D && t instanceof m , a = r && ! j . has ( i ) , l = a ? document . createDocumentFragment ( ) : e ; if ( ( ( t , e , n ) => { let i = N . get ( e ) ; void 0 === i && ( s ( e , e . firstChild ) , N . set ( e , i = new _ ( Object . assign ( { templateFactory : C } , n ) ) ) , i . appendInto ( e ) ) , i . setValue ( t ) , i . commit ( ) } ) ( t , l , Object . assign ( { templateFactory : L ( i ) } , n ) ) , a ) { const t = N . get ( l ) ; N . delete ( l ) , t . value instanceof b && H ( l , t . value . template , i ) , s ( e , e . firstChild ) , e . appendChild ( l ) , N . set ( e , t ) } ! o && r && window . ShadyCSS . styleElement ( e . host ) } ) } , function ( t , e , n ) { var i = n ( 3 ) , o = n ( 13 ) , r = n ( 16 ) , s = n ( 17 ) , a = n ( 21 ) , l = function ( t , e , n ) { var c , u , h , d , p = t & l . F , f = t & l . G , v = t & l . S , b = t & l . P , m = t & l . B , g = f ? i : v ? i [ e ] || ( i [ e ] = { } ) : ( i [ e ] || { } ) . prototype , y = f ? o : o [ e ] || ( o [ e ] = { } ) , x = y . prototype || ( y . prototype = { } ) ; for ( c in f && ( n = e ) , n ) h = ( ( u = ! p && g && void 0 !== g [ c ] ) ? g : n ) [ c ] , d = m && u ? a ( h , i ) : b && "function" == typeof h ? a ( Function . call , h ) : h , g && s ( g , c , h , t & l . U ) , y [ c ] != h && r ( y , c , d ) , b && x [ c ] != h && ( x [ c ] = h ) } ; i . core = o , l . F = 1 , l . G = 2 , l . S = 4 , l . P = 8 , l . B = 16 , l . W = 32 , l . U = 64 , l . R = 128 , t . exports = l } , function ( t , e , n ) { var i = n ( 4 ) ; t . exports = function ( t ) { if ( ! i ( t ) ) throw TypeError ( t + " is not an object!" ) ; return t } } , function ( t , e ) { var n = t . exports = "undefined" != typeof window && window . Math == Math ? window : "undefined" != typeof self && self . Math == Math ? self : Function ( "return this" ) ( ) ; "number" == typeof _ _g && ( _ _g = n ) } , function ( t , e ) { t . exports = function ( t ) { return "object" == typeof t ? null !== t : "function" == typeof t } } , function ( t , e ) { t . exports = function ( t ) { try { return ! ! t ( ) } catch ( t ) { return ! 0 } } } , function ( t , e , n ) { var i = n ( 54 ) ( "wks" ) , o = n ( 39 ) , r = n ( 3 ) . Symbol , s = "function" == typeof r ; ( t . exports = function ( t ) { return i [ t ] || ( i [ t ] = s && r [ t ] || ( s ? r : o ) ( "Symbol." + t ) ) } ) . store = i } , function ( t , e , n ) { "use strict" ; ( function ( t ) { n . d ( e , "a" , function ( ) { return o } ) ; var i = n ( 0 ) ; class o extends i . a { static get properties ( ) { return { collapsed : { type : Boolean } } } constructor ( ) { super ( ) , this . collapsed = ! 1 , this . _syncTimeout = - 1 } setAttribute ( t , e , n ) { e . set ( n ) } bind ( e ) { Array . from ( this . shadowRoot . querySelectorAll ( "[attribute]" ) ) . forEach ( n => { const i = n . getAttribute ( "attribute" ) ; this . addEventListener ( i , n => { t . Tone . isDefined ( e [ i ] ) && ( t . Tone . isDefined ( e [ i ] . value ) ? e [ i ] . value = n . detail : e [ i ] = n . detail ) , this . sync ( e ) } ) } ) , Array . from ( this . shadowRoot . querySelectorAll ( "[component]" ) ) . forEach ( t => { const n = t . getAttribute ( "component" ) ; t && t . bind ( e [ n ] ) } ) , this . sync ( e ) , this . addEventListener ( "collapse" , ( ) => this . sync ( e ) ) , this . addEventListener ( "sync" , ( ) => this . sync ( e ) ) } sync ( t ) { Array . from ( this . shadowRoot . querySelectorAll ( "[attribute]" ) ) . forEach ( e => { const n = e . getAttribute ( "attribute" ) ; void 0 !== t [ n ] && e . sync ( t ) } ) , Array . from ( this . shadowRoot . querySelectorAll ( "[component]" ) ) . forEach ( e => { const n = e . getAttribute ( "component" ) ; void 0 !== t [ n ] && e . sync ( t [ n ] ) } ) , clearTimeout ( this . _syncTimeout ) , this . _syncTimeout = setTimeout ( ( ) => { const e = Array . from ( this . shadowRoot . querySelectorAll ( ".viz" ) ) ; e . length && e . forEach ( e => e . visualize ( t ) ) } , 10 ) } } } ) . call ( this , n ( 135 ) ) } , function ( t , e , n ) { var i = n ( 2 ) , o = n ( 100 ) , r = n ( 24 ) , s = Object . defineProperty ; e . f = n ( 9 ) ? Object . defineProperty : function ( t , e , n ) { if ( i ( t ) , e = r ( e , ! 0 ) , i ( n ) , o ) try { return s ( t , e , n ) } catch ( t ) { } if ( "get" in n || "set" in n ) throw TypeError ( "Accessors not supported!" ) ; return "value" in n && ( t [ e ] = n . value ) , t } } , function ( t , e , n ) { t . exports = ! n ( 5 ) ( function ( ) { return 7 != Object . defineProperty ( { } , "a" , { get : function ( ) { return 7 } } ) . a } ) } , function ( t , e , n ) { var i = n ( 26 ) , o = Math . min ; t . exports = function ( t ) { return t > 0 ? o ( i ( t ) , 9007199254740991 ) : 0 } } , function ( t , e , n ) { var i = n ( 25 ) ; t . exports = function ( t ) { return Object ( i ( t ) ) } } , function ( t , e ) { t . exports = function ( t ) { if ( "function" != typeof t ) throw TypeError ( t + " is not a function!" ) ; return t } } , function ( t , e ) { var n = t . exports = { version : "2.5.7" } ; "number" == typeof _ _e && ( _ _e = n ) } , function ( t , e , n ) { var i = n ( 51 ) , o = n ( 25 ) ; t . exports = function ( t ) { return i ( o ( t ) ) } } , function ( t , e ) { var n = { } . hasOwnProperty ; t . exports = function ( t , e ) { return n . call ( t , e ) } } , function ( t , e , n ) { var i = n ( 8 ) , o = n ( 33 ) ; t . exports = n ( 9 ) ? function ( t , e , n ) { return i . f ( t , e , o ( 1 , n ) ) } : function ( t , e , n ) { return t [ e ] = n , t } } , function ( t , e , n ) { var i = n ( 3 ) , o = n ( 16 ) ,
2019-01-09 01:21:29 +00:00
< style >
: host {
display : inline - block ;
width : 40 px ;
height : 20 px ;
}
canvas {
width : 100 % ;
height : 100 % ;
}
< / s t y l e >
< canvas >
$ { this . alt }
< / c a n v a s >
2019-01-10 18:48:02 +00:00
` }}},function(t,e,n){var i=n(22);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==i(t)?t.split(""):Object(t)}},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var i=n(42),o=n(6)("iterator"),r=n(43);t.exports=n(13).getIteratorMethod=function(t){if(null!=t)return t[o]||t["@@iterator"]||r[i(t)]}},function(t,e,n){var i=n(13),o=n(3),r=o["__core-js_shared__"]||(o["__core-js_shared__"]={});(t.exports=function(t,e){return r[t]||(r[t]=void 0!==e?e:{})})("versions",[]).push({version:i.version,mode:n(35)?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},function(t,e,n){var i=n(14),o=n(10),r=n(40);t.exports=function(t){return function(e,n,s){var a,l=i(e),c=o(l.length),u=r(s,c);if(t&&n!=n){for(;c>u;)if((a=l[u++])!=a)return!0}else for(;c>u;u++)if((t||u in l)&&l[u]===n)return t||u||0;return!t&&-1}}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var i=n(22);t.exports=Array.isArray||function(t){return"Array"==i(t)}},function(t,e,n){"use strict";var i=n(35),o=n(1),r=n(17),s=n(16),a=n(43),l=n(59),c=n(47),u=n(19),h=n(6)("iterator"),d=!([].keys&&"next"in[].keys()),p=function(){return this};t.exports=function(t,e,n,f,v,b,m){l(n,e,f);var g,y,x,_=function(t){if(!d&&t in k)return k[t];switch(t){case"keys":case"values":return function(){return new n(this,t)}}return function(){return new n(this,t)}},w=e+" Iterator",S="values"==v,E=!1,k=t.prototype,M=k[h]||k["@@iterator"]||v&&k[v],A=M||_(v),I=v?S?_("entries"):A:void 0,C="Array"==e&&k.entries||M;if(C&&(x=u(C.call(new t)))!==Object.prototype&&x.next&&(c(x,w,!0),i||"function"==typeof x[h]||s(x,h,p)),S&&M&&"values"!==M.name&&(E=!0,A=function(){return M.call(this)}),i&&!m||!d&&!E&&k[h]||s(k,h,A),a[e]=A,a[w]=p,v)if(g={values:S?A:_("values"),keys:b?A:_("keys"),entries:I},m)for(y in g)y in k||r(k,y,g[y]);else o(o.P+o.F*(d||E),e,g);return g}},function(t,e,n){"use strict";var i=n(30),o=n(33),r=n(47),s={};n(16)(s,n(6)("iterator"),function(){return this}),t.exports=function(t,e,n){t.prototype=i(s,{next:o(1,n)}),r(t,e+" Iterator")}},function(t,e,n){var i=n(4),o=n(22),r=n(6)("match");t.exports=function(t){var e;return i(t)&&(void 0!==(e=t[r])?!!e:"RegExp"==o(t))}},function(t,e,n){var i=n(6)("iterator"),o=!1;try{var r=[7][i]();r.return=function(){o=!0},Array.from(r,function(){throw 2})}catch(t){}t.exports=function(t,e){if(!e&&!o)return!1;var n=!1;try{var r=[7],s=r[i]();s.next=function(){return{done:n=!0}},r[i]=function(){return s},t(r)}catch(t){}return n}},function(t,e,n){"use strict";var i=n(2);t.exports=function(){var t=i(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},function(t,e,n){"use strict";var i=n(16),o=n(17),r=n(5),s=n(25),a=n(6);t.exports=function(t,e,n){var l=a(t),c=n(s,l,""[t]),u=c[0],h=c[1];r(function(){var e={};return e[l]=function(){return 7},7!=""[t](e)})&&(o(String.prototype,t,u),i(RegExp.prototype,l,2==e?function(t,e){return h.call(t,this,e)}:function(t){return h.call(t,this)}))}},function(t,e,n){var i=n(2),o=n(12),r=n(6)("species");t.exports=function(t,e){var n,s=i(t).constructor;return void 0===s||null==(n=i(s)[r])?e:o(n)}},function(t,e,n){var i=n(3).navigator;t.exports=i&&i.userAgent||""},function(t,e,n){"use strict";var i=n(3),o=n(1),r=n(17),s=n(46),a=n(34),l=n(37),c=n(45),u=n(4),h=n(5),d=n(61),p=n(47),f=n(80);t.exports=function(t,e,n,v,b,m){var g=i[t],y=g,x=b?"set":"add",_=y&&y.prototype,w={},S=function(t){var e=_[t];r(_,t,"delete"==t?function(t){return!(m&&!u(t))&&e.call(this,0===t?0:t)}:"has"==t?function(t){return!(m&&!u(t))&&e.call(this,0===t?0:t)}:"get"==t?function(t){return m&&!u(t)?void 0:e.call(this,0===t?0:t)}:"add"==t?function(t){return e.call(this,0===t?0:t),this}:function(t,n){return e.call(this,0===t?0:t,n),this})};if("function"==typeof y&&(m||_.forEach&&!h(function(){(new y).entries().next()}))){var E=new y,k=E[x](m?{}:-0,1)!=E,M=h(function(){E.has(1)}),A=d(function(t){new y(t)}),I=!m&&h(function(){for(var t=new y,e=5;e--;)t[x](e,e);return!t.has(-0)});A||((y=e(function(e,n){c(e,y,t);var i=f(new g,e,y);return null!=n&&l
2019-01-09 01:21:29 +00:00
/ * *
@ license
Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
This code may only be used under the BSD style license found at http : //polymer.github.io/LICENSE.txt
The complete set of authors may be found at http : //polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http : //polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http : //polymer.github.io/PATENTS.txt
* /
2019-01-10 18:48:02 +00:00
function r ( t , e , n ) { return { index : t , removed : e , addedCount : n } }
2019-01-09 01:21:29 +00:00
/ * *
@ license
Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
This code may only be used under the BSD style license found at http : //polymer.github.io/LICENSE.txt
The complete set of authors may be found at http : //polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http : //polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http : //polymer.github.io/PATENTS.txt
* /
2019-01-10 18:48:02 +00:00
window . JSCompiler _renameProperty = function ( t , e ) { return t } ; const s = 0 , a = 1 , l = 2 , c = 3 ; function u ( t , e , n , i , o , u ) { let d , p = 0 , f = 0 , v = Math . min ( n - e , u - o ) ; if ( 0 == e && 0 == o && ( p = function ( t , e , n ) { for ( let i = 0 ; i < n ; i ++ ) if ( ! h ( t [ i ] , e [ i ] ) ) return i ; return n } ( t , i , v ) ) , n == t . length && u == i . length && ( f = function ( t , e , n ) { let i = t . length , o = e . length , r = 0 ; for ( ; r < n && h ( t [ -- i ] , e [ -- o ] ) ; ) r ++ ; return r } ( t , i , v - p ) ) , o += p , u -= f , ( n -= f ) - ( e += p ) == 0 && u - o == 0 ) return [ ] ; if ( e == n ) { for ( d = r ( e , [ ] , 0 ) ; o < u ; ) d . removed . push ( i [ o ++ ] ) ; return [ d ] } if ( o == u ) return [ r ( e , [ ] , n - e ) ] ; let b = function ( t ) { let e = t . length - 1 , n = t [ 0 ] . length - 1 , i = t [ e ] [ n ] , o = [ ] ; for ( ; e > 0 || n > 0 ; ) { if ( 0 == e ) { o . push ( l ) , n -- ; continue } if ( 0 == n ) { o . push ( c ) , e -- ; continue } let r , u = t [ e - 1 ] [ n - 1 ] , h = t [ e - 1 ] [ n ] , d = t [ e ] [ n - 1 ] ; ( r = h < d ? h < u ? h : u : d < u ? d : u ) == u ? ( u == i ? o . push ( s ) : ( o . push ( a ) , i = u ) , e -- , n -- ) : r == h ? ( o . push ( c ) , e -- , i = h ) : ( o . push ( l ) , n -- , i = d ) } return o . reverse ( ) , o } ( function ( t , e , n , i , o , r ) { let s = r - o + 1 , a = n - e + 1 , l = new Array ( s ) ; for ( let t = 0 ; t < s ; t ++ ) l [ t ] = new Array ( a ) , l [ t ] [ 0 ] = t ; for ( let t = 0 ; t < a ; t ++ ) l [ 0 ] [ t ] = t ; for ( let n = 1 ; n < s ; n ++ ) for ( let r = 1 ; r < a ; r ++ ) if ( h ( t [ e + r - 1 ] , i [ o + n - 1 ] ) ) l [ n ] [ r ] = l [ n - 1 ] [ r - 1 ] ; else { let t = l [ n - 1 ] [ r ] + 1 , e = l [ n ] [ r - 1 ] + 1 ; l [ n ] [ r ] = t < e ? t : e } return l } ( t , e , n , i , o , u ) ) ; d = void 0 ; let m = [ ] , g = e , y = o ; for ( let t = 0 ; t < b . length ; t ++ ) switch ( b [ t ] ) { case s : d && ( m . push ( d ) , d = void 0 ) , g ++ , y ++ ; break ; case a : d || ( d = r ( g , [ ] , 0 ) ) , d . addedCount ++ , g ++ , d . removed . push ( i [ y ] ) , y ++ ; break ; case l : d || ( d = r ( g , [ ] , 0 ) ) , d . addedCount ++ , g ++ ; break ; case c : d || ( d = r ( g , [ ] , 0 ) ) , d . removed . push ( i [ y ] ) , y ++ } return d && m . push ( d ) , m } function h ( t , e ) { return t === e }
2019-01-09 01:21:29 +00:00
/ * *
@ license
Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
This code may only be used under the BSD style license found at http : //polymer.github.io/LICENSE.txt
The complete set of authors may be found at http : //polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http : //polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http : //polymer.github.io/PATENTS.txt
2019-01-10 04:38:07 +00:00
* / l e t d = 0 , p = 0 , f = [ ] , v = 0 , b = d o c u m e n t . c r e a t e T e x t N o d e ( " " ) ; n e w w i n d o w . M u t a t i o n O b s e r v e r ( f u n c t i o n ( ) { c o n s t t = f . l e n g t h ; f o r ( l e t e = 0 ; e < t ; e + + ) { l e t t = f [ e ] ; i f ( t ) t r y { t ( ) } c a t c h ( t ) { s e t T i m e o u t ( ( ) = > { t h r o w t } ) } } f . s p l i c e ( 0 , t ) , p + = t } ) . o b s e r v e ( b , { c h a r a c t e r D a t a : ! 0 } ) ; c o n s t m = { r u n : t = > ( b . t e x t C o n t e n t = v + + , f . p u s h ( t ) , d + + ) , c a n c e l ( t ) { c o n s t e = t - p ; i f ( e > = 0 ) { i f ( ! f [ e ] ) t h r o w n e w E r r o r ( " i n v a l i d a s y n c h a n d l e : " + t ) ; f [ e ] = n u l l } } } ;
2019-01-09 01:21:29 +00:00
/ * *
@ license
Copyright ( c ) 2017 The Polymer Project Authors . All rights reserved .
This code may only be used under the BSD style license found at http : //polymer.github.io/LICENSE.txt
The complete set of authors may be found at http : //polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http : //polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http : //polymer.github.io/PATENTS.txt
* /
2019-01-10 18:48:02 +00:00
function g ( t ) { return "slot" === t . localName } class y { static getFlattenedNodes ( t ) { return g ( t ) ? ( t = t ) . assignedNodes ( { flatten : ! 0 } ) : Array . from ( t . childNodes ) . map ( t => g ( t ) ? ( t = t ) . assignedNodes ( { flatten : ! 0 } ) : [ t ] ) . reduce ( ( t , e ) => t . concat ( e ) , [ ] ) } constructor ( t , e ) { this . _shadyChildrenObserver = null , this . _nativeChildrenObserver = null , this . _connected = ! 1 , this . _target = t , this . callback = e , this . _effectiveNodes = [ ] , this . _observer = null , this . _scheduled = ! 1 , this . _boundSchedule = ( ( ) => { this . _schedule ( ) } ) , this . connect ( ) , this . _schedule ( ) } connect ( ) { g ( this . _target ) ? this . _listenSlots ( [ this . _target ] ) : this . _target . children && ( this . _listenSlots ( this . _target . children ) , window . ShadyDOM ? this . _shadyChildrenObserver = ShadyDOM . observeChildren ( this . _target , t => { this . _processMutations ( t ) } ) : ( this . _nativeChildrenObserver = new MutationObserver ( t => { this . _processMutations ( t ) } ) , this . _nativeChildrenObserver . observe ( this . _target , { childList : ! 0 } ) ) ) , this . _connected = ! 0 } disconnect ( ) { g ( this . _target ) ? this . _unlistenSlots ( [ this . _target ] ) : this . _target . children && ( this . _unlistenSlots ( this . _target . children ) , window . ShadyDOM && this . _shadyChildrenObserver ? ( ShadyDOM . unobserveChildren ( this . _shadyChildrenObserver ) , this . _shadyChildrenObserver = null ) : this . _nativeChildrenObserver && ( this . _nativeChildrenObserver . disconnect ( ) , this . _nativeChildrenObserver = null ) ) , this . _connected = ! 1 } _schedule ( ) { this . _scheduled || ( this . _scheduled = ! 0 , m . run ( ( ) => this . flush ( ) ) ) } _processMutations ( t ) { this . _processSlotMutations ( t ) , this . flush ( ) } _processSlotMutations ( t ) { if ( t ) for ( let e = 0 ; e < t . length ; e ++ ) { let n = t [ e ] ; n . addedNodes && this . _listenSlots ( n . addedNodes ) , n . removedNodes && this . _unlistenSlots ( n . removedNodes ) } } flush ( ) { if ( ! this . _connected ) return ! 1 ; window . ShadyDOM && ShadyDOM . flush ( ) , this . _nativeChildrenObserver ? this . _processSlotMutations ( this . _nativeChildrenObserver . takeRecords ( ) ) : this . _shadyChildrenObserver && this . _processSlotMutations ( this . _shadyChildrenObserver . takeRecords ( ) ) , this . _scheduled = ! 1 ; let t = { target : this . _target , addedNodes : [ ] , removedNodes : [ ] } , e = this . constructor . getFlattenedNodes ( this . _target ) , n = ( i = e , o = this . _effectiveNodes , u ( i , 0 , i . length , o , 0 , o . length ) ) ; var i , o ; for ( let e , i = 0 ; i < n . length && ( e = n [ i ] ) ; i ++ ) for ( let n , i = 0 ; i < e . removed . length && ( n = e . removed [ i ] ) ; i ++ ) t . removedNodes . push ( n ) ; for ( let i , o = 0 ; o < n . length && ( i = n [ o ] ) ; o ++ ) for ( let n = i . index ; n < i . index + i . addedCount ; n ++ ) t . addedNodes . push ( e [ n ] ) ; this . _effectiveNodes = e ; let r = ! 1 ; return ( t . addedNodes . length || t . removedNodes . length ) && ( r = ! 0 , this . callback . call ( this . _target , t ) ) , r } _listenSlots ( t ) { for ( let e = 0 ; e < t . length ; e ++ ) { let n = t [ e ] ; g ( n ) && n . addEventListener ( "slotchange" , this . _boundSchedule ) } } _unlistenSlots ( t ) { for ( let e = 0 ; e < t . length ; e ++ ) { let n = t [ e ] ; g ( n ) && n . removeEventListener ( "slotchange" , this . _boundSchedule ) } } } const x = i . b ` <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg> ` ; class _ extends i . a { static get properties ( ) { return { selectedIndex : { type : Number } , attribute : { type : String } } } constructor ( ) { super ( ) , this . selectedIndex = - 1 , this . options = [ ] , this . _observer = new y ( this , t => { this . options = [ ... this . options , ... t . addedNodes . filter ( t => "option" === t . nodeName . toLowerCase ( ) ) ] , this . options . length && - 1 === this . selectedIndex && ( this . selectedIndex = 0 ) , this . requestUpdate ( ) } ) } updated ( t ) { if ( t . has ( "selectedIndex" ) && - 1 !== this . selectedIndex ) { const t = this . shadowRoot . querySelector ( "select" ) ; this . dispatchEvent ( new CustomEvent ( "change" , { detail : this . value , composed : ! 0 , bubbles : ! 0 } ) ) , t && ( t . selectedIndex = this . selectedIndex ) , this . attribute && this . dispatchEvent ( new CustomEvent ( this . attribute , { detail : this . value , composed : ! 0 , bubbles : ! 0 } ) ) } } get value ( ) { return this . options [ this . selectedIndex ] . getAttribute ( "value" ) } set value ( t ) { const e = this . options . findIndex ( e => e . getAttribute ( "value" ) === t . toString ( ) ) ; - 1 !== e && ( this . selectedIndex = e ) } sync ( t ) { this . value = t [ this . attribute ] } render ( ) { return i . b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
}
# container {
height : 24 px ;
display : inline - block ;
position : relative ;
}
select {
width : 100 % ;
text - overflow : ellipses ;
display : inline - block ;
padding - right : 30 px ;
font - size : 14 px ;
padding - left : 10 px ;
height : 24 px ;
line - height : 18 px ;
border - radius : 12 px ;
- webkit - appearance : none ;
background - color : transparent ;
border : 2 px solid var ( -- border - color , var ( -- color - gray ) ) ;
box - sizing : border - box ;
outline - color : var ( -- outline - color ) ;
outline - offset : 1 px ;
}
# arrow {
position : absolute ;
right : 15 px ;
top : 0 px ;
width : 10 px ;
height : 10 px ;
font - size : 8 px ;
color : var ( -- border - color , var ( -- color - gray ) ) ;
pointer - events : none ;
line - height : 12 px ;
}
# arrow svg {
fill : var ( -- border - color , var ( -- color - gray ) ) ;
}
< / s t y l e >
< div id = "container" >
< select @ change = $ { t => this . selectedIndex = t . target . selectedIndex } >
$ { this . options }
< / s e l e c t >
< div id = "arrow" > $ { x } < / d i v >
< / d i v >
` }}customElements.define("tone-select",_);customElements.define("tone-select-attribute",class extends _{static get properties(){return{label:{type:String},attribute:{type:String}}}constructor(){super(),this.label=""}sync(t){this.value=t[this.attribute]}set(t){t[this.attribute]!==this.value&&(t[this.attribute]=this.value)}render(){return i.b `
< style >
# attribute - container {
display : block ;
height : 24 px ;
}
label , # container {
height : 24 px ;
line - height : 24 px ;
display : block ;
}
label {
float : left ;
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
}
# container {
float : right ;
}
< / s t y l e >
< div id = "attribute-container" >
< label > $ { this . label } < / l a b e l >
$ { super . render ( ) }
< / d i v >
` }});customElements.define("tone-oscillator-type",class extends i.a{static get properties(){return{attribute:{type:String},nocustom:{type:Boolean},label:{type:String}}}constructor(){super(),this.nocustom=!1,this.value="sine"}sync(t){const e=t[this.attribute];this.value=e;const n=this.shadowRoot.querySelector("tone-select-attribute");n&&n.options.forEach(t=>{const n=t.getAttribute("value");e.includes(n)&&(this.shadowRoot.querySelector("tone-select-attribute").value=n)})}render(){return i.b `
< tone - select - attribute label = $ { this . label } attribute = $ { this . attribute } >
< option value = "sine" > sine < / o p t i o n >
< option value = "square" > square < / o p t i o n >
< option value = "sawtooth" > sawtooth < / o p t i o n >
< option value = "triangle" > triangle < / o p t i o n >
$ { this . nocustom ? i . b ` ` : i . b ` <option value="custom">custom</option> ` }
< / t o n e - s e l e c t - a t t r i b u t e >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-oscillator",class extends o.a{static get properties(){return{label:{type:String},sourceType:{type:String},omni:{type:Boolean},frequency:{type:Boolean}}}constructor(){super(),this.label="Oscillator",this.sourceType="oscillator"}setAttribute(t,e,n){"type"===t?"oscillator"===this.sourceType?n.type=e.value:"am"===this.sourceType||"fat"===this.sourceType||"fm"===this.sourceType?n.type= ` $ { this . sourceType } $ { e . value } ` :n.type=e.value:e.set(n)}updated(t){t.has("sourceType")&&this.dispatchEvent(new CustomEvent("sourceType",{detail:this.sourceType,composed:!0,bubbles:!0}))}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
# sourceType {
position : absolute ;
top : 8 px ;
right : 80 px ;
background - color : white ;
}
# attributeContainer {
margin - top : 20 px ;
}
tone - oscillator - type : not ( [ display ] ) , tone - slider : not ( [ display ] ) , tone - multislider : not ( [ display ] ) {
display : none ;
}
< / s t y l e >
$ { this . omni ? i . b ` <tone-select
@ change = $ { t => this . sourceType = t . detail }
slot = "top"
attribute = "sourceType"
id = "sourceType" >
< option value = "oscillator" > basic < / o p t i o n >
< option value = "fm" > fm < / o p t i o n >
< option value = "am" > am < / o p t i o n >
< option value = "fat" > fat < / o p t i o n >
< option value = "pulse" > pulse < / o p t i o n >
< option value = "pwm" > pwm < / o p t i o n >
< / t o n e - s e l e c t > ` : i . b ` ` }
< div id = "attributeContainer" >
< tone - oscillator - type
? display = $ { "pulse" !== this . sourceType && "pwm" !== this . sourceType }
label = "${" fm "===this.sourceType||" am "===this.sourceType?" Carrier Type ":" Type "}"
attribute = "baseType" >
< / t o n e - o s c i l l a t o r - t y p e >
< tone - multislider
? display = $ { "pulse" !== this . sourceType && "pwm" !== this . sourceType }
length = "32"
label = "Partials"
attribute = "partials" >
< / t o n e - m u l t i s l i d e r >
< tone - slider
? display = $ { "pulse" !== this . sourceType && "pwm" !== this . sourceType }
attribute = "partialCount"
min = "0"
max = "32"
value = "0"
integer
label = "Partial Count" >
< / t o n e - s l i d e r >
< tone - oscillator - type
? display = $ { "fm" === this . sourceType || "am" === this . sourceType }
nocustom
label = "Modulator Type"
attribute = "modulationType" >
< / t o n e - o s c i l l a t o r - t y p e >
< tone - slider
? display = $ { "fm" === this . sourceType }
attribute = "modulationIndex"
min = "0.1"
max = "20"
exp = "1.5"
value = "2"
label = "Modulation Index" >
< / t o n e - s l i d e r >
< tone - slider
? display = $ { "fm" === this . sourceType || "am" === this . sourceType }
attribute = "harmonicity"
min = "0.25"
max = "5"
value = "2"
label = "Harmonicity" >
< / t o n e - s l i d e r >
< tone - slider
? display = $ { "fat" === this . sourceType }
attribute = "spread"
min = "2"
max = "100"
value = "20"
units = "cents"
label = "Spread" >
< / t o n e - s l i d e r >
< tone - slider
? display = $ { "fat" === this . sourceType }
default = "0"
attribute = "count"
integer
value = "2"
min = "1"
max = "10"
label = "Count" >
< / t o n e - s l i d e r >
< tone - slider
? display = $ { "pulse" === this . sourceType }
default = "0"
attribute = "width"
min = "0"
max = "1"
value = "0"
label = "Width" >
< / t o n e - s l i d e r >
< tone - slider
? display = $ { "pwm" === this . sourceType }
default = "0"
attribute = "modulationFrequency"
min = "0.1"
max = "10"
value = "0.5"
units = "hz"
label = "Modulation Frequency" >
< / t o n e - s l i d e r >
< / d i v >
` }render(){return i.b `
< style >
tone - slider {
display : block ;
margin - top : 5 px ;
}
tone - oscillator - type {
margin - top : 10 px ;
display : block ;
}
tone - multislider {
margin - top : 10 px ;
}
tone - viz - oscillator {
position : absolute ;
top : 9 px ;
right : 20 px ;
}
< / s t y l e >
< tone - rack label = "${this.label}" ? collapsed = $ { this . collapsed } >
< tone - viz - oscillator slot = "top" class = "viz" > < / t o n e - v i z - o s c i l l a t o r >
$ { this . frequency ? i . b `
< tone - slider
attribute = "frequency"
min = "20"
max = "10000"
value = "440"
exp = "2"
units = "hz"
label = "frequency" >
< / t o n e - s l i d e r > ` : i . b ` ` }
$ { this . renderAttributes ( ) }
< / t o n e - r a c k >
` }});const w=i.b ` < svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" > < path d = "M10 17l5-5-5-5v10z" / > < path fill = "none" d = "M0 24V0h24v24H0z" / > < /svg>`,S=i.b`<svg xmlns="http:/ / www . w3 . org / 2000 / svg " width=" 24 " height=" 24 " viewBox=" 0 0 24 24 "><path d=" M7 10 l5 5 5 - 5 z "/><path d=" M0 0 h24v24H0z " fill=" none "/></svg>`;customElements.define(" tone - rack ",class extends i.a{static get properties(){return{collapsed:{type:Boolean},incollapsable:{type:Boolean},square:{type:Boolean},label:{type:String},color:{type:String}}}constructor(){super(),this.incollapsable=!1,this.collapsed=!1,this.square=!1}updated(t){const e=t=>{t.dispatchEvent(new CustomEvent(" collapse ",{detail:this.collapsed,composed:!0,bubbles:!0}))};t.has(" collapsed ")&&(e(this),Array.from(this.children).forEach(t=>{t.assignedNodes?Array.from(t.assignedNodes()).forEach(t=>e(t)):e(t),t.dispatchEvent(new CustomEvent(" collapse ",{detail:this.collapsed,composed:!0,bubbles:!0}))}))}_keydown(t){" ArrowRight "===t.key||" ArrowDown "===t.key?this.collapsed=!1:" ArrowLeft "!==t.key&&" ArrowUp " !== t . key || ( this . collapsed = ! 0 ) } render ( ) { return i . b `
< style >
: host {
display : block ;
min - width : 300 px ;
width : 100 % ;
}
button {
position : absolute ;
top : 20 px ;
left : 12 px ;
border : none ;
- webkit - appearance : none ;
width : 24 px ;
height : 24 px ;
margin : 0 ;
padding : 0 ;
transform : translate ( 0 , - 50 % ) ;
outline - color : var ( -- outline - color ) ;
background - color : transparent ;
}
# container {
box - sizing : border - box ;
position : relative ;
border : 2 px solid black ;
border - radius : 22 px ;
padding : 20 px ;
background - color : white ;
width : 100 % ;
}
# container [ square ] {
border - radius : 0 px ;
background - color : # eee ;
padding : 30 px 5 px 5 px 5 px ;
border - color : # eee ;
min - width : 310 px ;
}
# padding {
height : 10 px ;
}
# container . closed {
height : 0 px ;
overflow : hidden ;
padding : 20 px ;
}
# label {
position : absolute ;
left : 45 px ;
top : 12 px ;
font - family : var ( -- title - font - family ) ;
font - size : var ( -- title - font - size ) ;
font - weight : normal ;
margin : 0 ;
}
# label [ hidden ] {
display : none ;
}
# container . closed : : slotted : not ( [ top ] ) {
display : none ;
}
< / s t y l e >
< div id = "container" class = $ { this . collapsed ? "closed" : "open" } ? square = $ { this . square } >
$ { this . incollapsable ? i . b ` ` : i . b `
< button
@ keydown = $ { this . _keydown . bind ( this ) }
@ click = $ { ( ) => this . collapsed = ! this . collapsed }
aria - label = 'collapse menu'
role = "checkbox" aria - checked = "${this.collapsed}" > $ { this . collapsed ? w : S } < / b u t t o n > ` }
< h2 id = "label" > $ { this . label } < / h 2 >
< div id = "padding" > < / d i v >
< slot name = "top" > < / s l o t >
$ { this . collapsed ? i . b ` ` : i . b ` <slot></slot> ` }
< / d i v >
` }});customElements.define("tone-toggle",class extends i.a{static get properties(){return{label:{type:String},checked:{type:Boolean},attribute:{type:String}}}constructor(){super(),this.label="",this.checked=!1}updated(t){t.has("checked")&&(this.dispatchEvent(new CustomEvent("change",{detail:this.checked,composed:!0,bubbles:!0})),this.attribute&&this.dispatchEvent(new CustomEvent(this.attribute,{detail:this.checked,composed:!0,bubbles:!0})))}sync(t){const e=this.attribute;this.checked=t[e]}set(t){t[this.attribute]=this.checked}_clicked(t){t.stopPropagation(),this.checked=!this.checked,this.shadowRoot.querySelector("button").focus()}render(){return i.b `
< style >
: host {
display : block ;
}
# container {
display : block ;
}
label {
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
min - width : 80 px ;
display : inline - block ;
margin - right : 20 px ;
}
# check - container {
width : 30 px ;
height : 10 px ;
display : inline - block ;
position : relative ;
}
# check - container # background {
position : absolute ;
width : 100 % ;
height : 100 % ;
background - color : var ( -- color - gray ) ;
border - radius : 5 px ;
}
# check - container button {
- webkit - appearance : none ;
width : 20 px ;
height : 20 px ;
left : 0 px ;
margin : 0 ;
padding : 0 ;
border : none ;
background - color : var ( -- color - light - gray ) ;
border - radius : 50 % ;
top : 50 % ;
position : absolute ;
transform : translate ( 0 , - 50 % ) ;
outline - color : var ( -- outline - color ) ;
transition : left 0.1 s ;
// box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
box - shadow : var ( -- shadow - low ) ;
}
# check - container button [ checked ] {
left : 10 px ;
background - color : black ;
}
< / s t y l e >
< div id = "container" >
< label for = "checkbox" > $ { this . label } < / l a b e l >
< div id = "check-container"
@ click = $ { this . _clicked . bind ( this ) } >
< div id = "background" > < / d i v >
< button name = "checkbox"
? checked = $ { this . checked }
@ click = $ { this . _clicked . bind ( this ) }
aria - checked = $ { this . checked }
aria - role = "checkbox"
id = "thumb" > < / b u t t o n >
< div >
< / d i v >
` }});const E="data:audio/mp3;base64,//MkxAAHiAICWABElBeKPL/RANb2w+yiT1g/gTok//lP/W/l3h8QO/OCdCqCW2Cw//MkxAQHkAIWUAhEmAQXWUOFW2dxPu//9mr60ElY5sseQ+xxesmHKtZr7bsqqX2L//MkxAgFwAYiQAhEAC2hq22d3///9FTV6tA36JdgBJoOGgc+7qvqej5Zu7/7uI9l//MkxBQHAAYi8AhEAO193vt9KGOq+6qcT7hhfN5FTInmwk8RkqKImTM55pRQHQSq//MkxBsGkgoIAABHhTACIJLf99nVI///yuW1uBqWfEu7CgNPWGpUadBmZ////4sL//MkxCMHMAH9iABEmAsKioqKigsLCwtVTEFNRTMuOTkuNVVVVVVVVVVVVVVVVVVV//MkxCkECAUYCAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";async function k(t){if("suspended"===Tone.context.state){const e=Tone.context.resume(),n=document.createElement("audio");n.controls=!1,n.preload="auto",n.loop=!1,n.src=E,n.title="Tone.js Examples";let i=Promise.resolve();try{i=await n.play()}catch(t){i=Promise.resolve(),console.log("did not start audio")}await Promise.all([i,e])}}const M=i.b ` < svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" > < path d = "M8 5v14l11-7z" / > < path d = "M0 0h24v24H0z" fill = "none" / > < /svg>`,A=i.b`<svg xmlns="http:/ / www . w3 . org / 2000 / svg " width=" 24 " height=" 24 " viewBox=" 0 0 24 24 "><path d=" M0 0 h24v24H0z " fill=" none "/><path d=" M6 6 h12v12H6z "/></svg>`;customElements.define(" tone - play - toggle ",class extends i.a{static get properties(){return{playing:{type:Boolean},disabled:{type:Boolean}}}constructor(){super(),this.playing=!1}updated(t){t.has(" playing ")&&(this.dispatchEvent(new CustomEvent(" change ",{detail:this.playing,composed:!0,bubbles:!0})),this.dispatchEvent(new CustomEvent(" play ",{detail:this.playing,composed:!0,bubbles:!0})))}bind(t){this.addEventListener(" change ",e=>{e.detail?t.start():t.stop()}),setInterval(()=>{" stopped " === t . state && ( this . playing = ! 1 ) } , 100 ) } async _clicked ( t ) { await k ( ) , this . playing = ! this . playing } render ( ) { return i . b `
< style >
: host {
display : inline - block ;
min - width : 80 px ;
width : 100 % ;
}
# container {
display : inline - block ;
width : 100 % ;
}
label {
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
margin - right : 20 px ;
}
button {
box - sizing : border - box ;
width : 100 % ;
height : 44 px ;
outline - color : var ( -- outline - color ) ;
border : 2 px solid black ;
border - radius : 22 px ;
padding : 0 px ;
font - size : 30 px ;
text - align : center ;
cursor : pointer ;
transition : box - shadow 0.1 s ;
box - shadow : var ( -- shadow - low ) ;
}
button : hover , button : focus {
box - shadow : var ( -- shadow - medium ) ;
}
button [ disabled ] {
opacity : 0.5 ;
}
button svg {
margin - top : 4 px ;
width : 30 px ;
height : 30 px ;
}
< / s t y l e >
< div id = "container" >
< button
? disabled = $ { this . disabled }
? playing = $ { this . playing }
@ click = $ { this . _clicked . bind ( this ) }
aria - label = "Play" . aria - checked = $ { this . playing } >
$ { this . playing ? A : M }
< / b u t t o n >
< / d i v >
2019-01-10 18:48:02 +00:00
` }});var I=n(137),C=n.n(I);customElements.define("tone-player-viz",class extends i.a{static get properties(){return{color:{type:String},loading:{type:Boolean}}}constructor(){super(),this.color="black",this.loading=!0}_computeRMS(t,e){if(this._waveform&&this._waveform.length===e)return;const n=t.toArray(0),i=[];for(let t=0;t<e;t++){const o=Math.floor(Math.scale(t,0,e,0,n.length-64)),r=o+64;let s=0;for(let t=o;t<r;t++)s+=Math.pow(n[t],2);const a=Math.sqrt(s/64);i[t]=a}const o=Math.max(...i);this._waveform=i.map(t=>Math.scale(Math.pow(t,.8),0,o,0,1))}visualize(t){if(this.loading=!t.loaded,t.loaded){const e=t.buffer,n=this.shadowRoot.querySelector("canvas");n.width=2*n.clientWidth,n.height=2*n.clientHeight;const{width:i,height:o}=n,r=n.getContext("2d");r.clearRect(0,0,i,o),this._computeRMS(e,i);const s=Math.scale(t.loopStart,0,e.duration,0,i);let a=Math.scale(t.loopEnd,0,e.duration,0,i);0===t.loopEnd&&(a=i),r.fillStyle=this.color;const l=C()(this.color).setAlpha(.2).toRgbString();this._waveform.forEach((e,n)=>{const c=e*o,u=t.reverse?i-n:n;t.loop&&(r.fillStyle=s>u||u>a?l:this.color),r.fillRect(u,o/2-c/2,1,c),r.fill()})}}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : inline - block ;
width : 60 px ;
height : 20 px ;
position : relative ;
}
canvas {
width : 100 % ;
height : 100 % ;
}
# loading {
position : absolute ;
bottom : 4 px ;
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
}
# loading [ hidden ] {
display : none ;
}
< / s t y l e >
< canvas >
the audio file ' s waveform
< / c a n v a s >
< div id = "loading" ? hidden = $ { ! this . loading } style = "color: ${this.color}" > loading < / d i v >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-player",class extends o.a{static get properties(){return{label:{type:String},duration:{type:Number}}}constructor(){super(),this.label="Player",this.duration=0}bind(t){const e=setInterval(()=>{t.loaded&&(clearInterval(e),this.duration=t.buffer.duration,this.sync(t))},100);super.bind(t)}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
}
tone - slider , tone - toggle {
display : block ;
margin - top : 10 px ;
}
tone - player - viz # top {
position : absolute ;
top : 9 px ;
right : 15 px ;
}
tone - rack : not ( [ collapsed ] ) tone - player - viz # top {
display : none ;
}
tone - player - viz # bottom {
position : relative ;
display : block ;
width : calc ( 100 % - 20 px ) ;
height : 60 px ;
background - color : black ;
border - radius : 10 px ;
padding : 10 px ;
margin - top : 20 px ;
}
tone - play - toggle {
position : absolute ;
top : 5 px ;
left : 50 % ;
transform : translate ( - 50 % , 0 ) ;
}
< / s t y l e >
< tone - rack
@ collapse = $ { t => this . collapsed = t . detail }
? collapsed = $ { this . collapsed } label = "${this.label}" >
< tone - player - viz slot = "top" class = "viz" id = "top" color = "black" > < / t o n e - p l a y e r - v i z >
< tone - player - viz class = "viz" id = "bottom" color = "white" > < / t o n e - p l a y e r - v i z >
< tone - slider
min = "0.5"
max = "2"
exp = "2"
value = "1"
label = "Playback Rate"
attribute = "playbackRate" >
< / t o n e - s l i d e r >
< tone - toggle
label = "Loop"
attribute = "loop" >
< / t o n e - t o g g l e >
< tone - slider
min = "0"
value = "0"
label = "Loop Start"
. max = $ { this . duration }
attribute = "loopStart" >
< / t o n e - s l i d e r >
< tone - slider
min = "0"
value = "0"
label = "Loop End"
. max = $ { this . duration }
attribute = "loopEnd" >
< / t o n e - s l i d e r >
< tone - toggle
label = "Reverse"
attribute = "reverse" >
< / t o n e - t o g g l e >
< / t o n e - r a c k >
2019-01-10 18:48:02 +00:00
` }});var T=n(99),N=n.n(T);customElements.define("tone-slider",class extends i.a{static get properties(){return{min:{type:Number},max:{type:Number},step:{type:Number},value:{type:Number},default:{type:Number},exp:{type:Number},anchor:{type:String},label:{type:String},units:{type:String},integer:{type:Boolean},attribute:{type:String},bare:{type:Boolean}}}constructor(){super(),this.min=0,this.max=100,this.step=1,this.value=50,this.exp=1,this.anchor="left",this.integer=!1,this.bare=!1,this._setThrottle=-1}_logValue(t){const e=Math.pow(t,this.exp),n=Math.pow(1,this.exp),i=Math.pow(101,this.exp);let o=Math.scale(e,n,i,this.min,this.max);this.integer&&(o=Math.round(o)),this.value=o,this.dispatchEvent(new CustomEvent("input",{composed:!0,detail:this.value}))}_exp(t,e){return Math.sign(t)*Math.pow(Math.abs(t),e)}_logPosition(){const t=Math.scale(this.value,this.min,this.max,Math.pow(1,this.exp),Math.pow(101,this.exp));return Math.pow(t,1/this.exp)}_beautifyVal(){const t=Math.abs(this.min-this.max);return t>10||this.integer?this.value.toFixed(0):t>1&&1===this.exp?this.value.toFixed(1):this.value.toFixed(2)}_getStep(){const t=Math.abs(this.min-this.max);return t>10||this.integer?1:t>1&&1===this.exp?.1:.01}sync(t){const e=this.attribute;void 0!==t[e].value?this.value=Math.clamp(t[e].value,this.min,this.max):this.value=Math.clamp(t[e],this.min,this.max)}set(t){const e=this.attribute;isFinite(this.value)&&(void 0!==t[e].value?t[e].value!==this.value&&(t[e].value=this.value):t[e]!==this.value&&(t[e]=this.value))}updated(t){super.updated(t),t.has("value")&&(this.dispatchEvent(new CustomEvent("change",{composed:!0,detail:this.value,bubbles:!0})),this.attribute&&this.dispatchEvent(new CustomEvent(this.attribute,{composed:!0,detail:this.value,bubbles:!0})))}_numberInput(t){const e=Math.clamp(parseFloat(t.target.value),this.min,this.max);this.integer?this.value=Math.floor(e):this.value=e}render(){const t=Math.clamp(this._logPosition(),0,100);let e=t-1,n=0;return"center"===this.anchor&&(n=50-Math.max(50-e,0),e=Math.abs(50-e)),i.b `
2019-01-09 01:21:29 +00:00
< style >
2019-01-10 04:38:07 +00:00
$ { N . a }
2019-01-09 01:21:29 +00:00
< / s t y l e >
< div id = "container" @ keydown = $ { t => "Backspace" === t . key && void 0 !== this . default ? this . value = this . default : "" } >
< label ? hidden = $ { this . bare } for = "value" > $ { this . label } < / l a b e l >
< span ? hidden = $ { this . bare } id = "units" > $ { this . units } < / s p a n >
< input ? hidden = $ { this . bare } name = "value" type = "number"
@ change = $ { this . _numberInput . bind ( this ) }
. min = $ { this . min }
. max = $ { this . max }
. step = $ { this . _getStep ( ) }
. value = $ { this . _beautifyVal ( ) } >
< div id = "slider" >
< input name = "value" type = "range"
@ input = $ { t => this . _logValue ( parseFloat ( t . target . value ) ) }
min = "1"
max = "101"
. step = $ { Math . pow ( this . step , 1 / this . exp ) }
@ focus = $ { ( ) => this . shadowRoot . querySelector ( "#circle" ) . classList . add ( "focus" ) }
@ blur = $ { ( ) => this . shadowRoot . querySelector ( "#circle" ) . classList . remove ( "focus" ) }
. value = $ { t } >
< div id = "line" >
< div id = "anchor" class = $ { this . anchor } style = "width:${e.toString()}%; left:${n.toString()}%" > < / d i v >
< / d i v >
< div id = "circle" style = "left: calc(${(t-1).toString()}% - ${(12*(t-1)/100).toString()}px);" > < / d i v >
< / d i v >
< / d i v >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-noise",class extends o.a{static get properties(){return{label:{type:String}}}constructor(){super(),this.label="Noise"}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
}
tone - slider , tone - select - attribute {
display : block ;
margin - top : 10 px ;
}
< / s t y l e >
< tone - rack label = "${this.label}" ? collapsed = $ { this . collapsed } >
< tone - select - attribute
attribute = "type"
label = "Type" >
< option value = "white" > white < / o p t i o n >
< option value = "brown" > brown < / o p t i o n >
< option value = "pink" > pink < / o p t i o n >
< / t o n e - s e l e c t - a t t r i b u t e >
< tone - slider
min = "0.1"
max = "4"
exp = "2"
value = "1"
label = "Playback Rate"
attribute = "playbackRate" >
< / t o n e - s l i d e r >
< / t o n e - r a c k >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-oscilloscope",class extends i.a{constructor(){super(),this._waveform=new Tone.Waveform(256)}bind(t){t.connect(this._waveform),this._canvas=this.shadowRoot.querySelector("canvas"),this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight,this._context=this._canvas.getContext("2d"),this.loop(),window.addEventListener("resize",()=>{this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight})}loop(){requestAnimationFrame(this.loop.bind(this));const t=this._waveform.getValue(),e=this._canvas.width,n=this._canvas.height;this._context.clearRect(0,0,e,n),this._context.beginPath(),this._context.lineWidth=4,t.forEach((i,o)=>{const r=Math.scale(o,0,t.length,0,e),s=Math.scale(i,-1,1,0,n);0===o?this._context.moveTo(r,s):this._context.lineTo(r,s)}),this._context.lineCap="round",this._context.strokeStyle="white",this._context.stroke()}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : inline - block ;
width : 45 px ;
height : 24 px ;
border - radius : 15 px ;
padding : 4 px ;
box - sizing : border - box ;
background - color : # aaa ;
overflow : hidden ;
}
canvas {
width : 100 % ;
height : 100 % ;
}
< / s t y l e >
< canvas >
waveform of current playing audio
< / c a n v a s >
2019-01-10 18:48:02 +00:00
` }});const P=i.b ` < svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" > < path d = "M0 0h24v24H0zm0 0h24v24H0z" fill = "none" / > < path d = "M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z" / > < /svg>`,O=i.b`<svg xmlns="http:/ / www . w3 . org / 2000 / svg " width=" 24 " height=" 24 " viewBox=" 0 0 24 24 "><path d=" M12 14 c1 . 66 0 2.99 - 1.34 2.99 - 3 L15 5 c0 - 1.66 - 1.34 - 3 - 3 - 3 S9 3.34 9 5 v6c0 1.66 1.34 3 3 3 zm5 . 3 - 3 c0 3 - 2.54 5.1 - 5.3 5.1 S6 . 7 14 6.7 11 H5c0 3.41 2.72 6.23 6 6.72 V21h2v - 3.28 c3 . 28 - . 48 6 - 3.3 6 - 6.72 h - 1.7 z "/><path d=" M0 0 h24v24H0z " fill=" none "/></svg>`;customElements.define(" tone - microphone ",class extends o.a{static get properties(){return{label:{type:String},open:{type:Boolean},supported:{type:Boolean}}}constructor(){super(),this.label=" Noise ",this.inputs=[],this.supported=Tone.UserMedia.supported}async bind(t){if(!this.supported)return;setInterval(()=>{this.open=" started "===t.state},100);const e=this.shadowRoot.querySelector(" tone - select ");this.shadowRoot.querySelector(" # mic ").addEventListener(" click ",n=>{k(),this.open?t.close():t.open(e.value)}),e.addEventListener(" change ",n=>{this.open&&t.open(e.value)}),this.shadowRoot.querySelector(" tone - oscilloscope " ) . bind ( t ) , this . inputs = await Tone . UserMedia . enumerateDevices ( ) , this . requestUpdate ( ) } render ( ) { return i . b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
}
# container {
width : 100 % ;
min - width : 100 px ;
height : 44 px ;
box - sizing : border - box ;
border - radius : 22 px ;
border : 2 px solid black ;
position : relative ;
}
# mic {
background - color : transparent ;
outline - color : var ( -- outline - color ) ;
border : none ;
- webkit - appearance : none ;
height : 100 % ;
margin - left : 10 px ;
margin - top : 1 px ;
}
tone - oscilloscope {
position : absolute ;
right : 10 px ;
top : 8 px ;
}
tone - select {
max - width : 200 px ;
position : absolute ;
left : 50 % ;
transform : translate ( - 50 % , 0 ) ;
top : 8 px ;
}
button [ disabled ] {
opacity : 0.5 ;
}
# notSupported {
display : inline - block ;
color : # aaa ;
top : - 6 px ;
position : relative ;
margin - left : 10 px ;
}
< / s t y l e >
< div id = "container" >
< button
? disabled = $ { ! this . supported }
id = "mic" aria - label = "microphone" aria - checked = $ { this . open } >
$ { this . open ? O : P }
< / b u t t o n >
$ { this . supported ? i . b `
< tone - select >
$ { this . inputs . map ( t => i . b `
< option value = $ { t . deviceId } > $ { t . label } < / o p t i o n >
` )}
< / t o n e - s e l e c t >
< tone - oscilloscope > < / t o n e - o s c i l l o s c o p e >
` :i.b `
< div id = "notSupported" > UserMedia Not Supported < / d i v >
` }
< / d i v >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-grain-player",class extends o.a{static get properties(){return{label:{type:String},duration:{type:Number}}}constructor(){super(),this.label="GrainPlayer",this.duration=0}bind(t){const e=setInterval(()=>{t.loaded&&(clearInterval(e),this.duration=t.buffer.duration,this.sync(t))},100);super.bind(t)}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
}
tone - slider , tone - toggle {
display : block ;
margin - top : 10 px ;
}
tone - player - viz # top {
position : absolute ;
top : 9 px ;
right : 15 px ;
}
tone - rack : not ( [ collapsed ] ) tone - player - viz # top {
display : none ;
}
tone - player - viz # bottom {
position : relative ;
display : block ;
width : calc ( 100 % - 20 px ) ;
height : 60 px ;
background - color : black ;
border - radius : 10 px ;
padding : 10 px ;
margin - top : 20 px ;
}
tone - play - toggle {
position : absolute ;
top : 5 px ;
left : 50 % ;
transform : translate ( - 50 % , 0 ) ;
}
< / s t y l e >
< tone - rack
@ collapse = $ { t => this . collapsed = t . detail }
? collapsed = $ { this . collapsed } label = "${this.label}" >
< tone - player - viz slot = "top" class = "viz" id = "top" color = "black" > < / t o n e - p l a y e r - v i z >
< tone - player - viz class = "viz" id = "bottom" color = "white" > < / t o n e - p l a y e r - v i z >
< tone - slider
min = "0.5"
max = "2"
exp = "2"
value = "1"
label = "Playback Rate"
attribute = "playbackRate" >
< / t o n e - s l i d e r >
< tone - slider
min = "-1200"
max = "1200"
default = "0"
anchor = "center"
value = "0"
label = "Detune"
units = "cents"
attribute = "detune" >
< / t o n e - s l i d e r >
< tone - slider
min = "0.01"
max = "0.5"
value = "0.1"
label = "Grain Size"
attribute = "grainSize" >
< / t o n e - s l i d e r >
< tone - slider
min = "0.01"
max = "0.2"
value = "0.1"
label = "Overlap"
attribute = "overlap" >
< / t o n e - s l i d e r >
< tone - toggle
label = "Loop"
attribute = "loop" >
< / t o n e - t o g g l e >
< tone - slider
min = "0"
value = "0"
label = "Loop Start"
. max = $ { this . duration }
attribute = "loopStart" >
< / t o n e - s l i d e r >
< tone - slider
min = "0"
value = "0"
label = "Loop End"
. max = $ { this . duration }
attribute = "loopEnd" >
< / t o n e - s l i d e r >
< tone - toggle
label = "Reverse"
attribute = "reverse" >
< / t o n e - t o g g l e >
< / t o n e - r a c k >
` }});customElements.define("tone-multislider",class extends i.a{static get properties(){return{label:{type:String},length:{type:Number},attribute:{type:String}}}constructor(){super(),this.length=32,this.value=Array.from(new Float32Array(this.length))}_scaleArray(t){const e=Math.max(1,...t);return t.slice(0,this.length).map(t=>Math.clamp(Math.abs(t/e),0,1))}sync(t){this._scaleArray(t[this.attribute]).toString()!==this.value&&(this.value=this._scaleArray(t[this.attribute]),this.requestUpdate())}set(t){t[this.attribute]=this.value}_eventToXY(t){return{x:t.offsetX/t.target.offsetWidth,y:1-t.offsetY/t.target.offsetHeight}}mousedown(t){if(t.buttons){const{x:e,y:n}=this._eventToXY(t),i=this.value.length;if(this.value[Math.floor(e*this.length)]=n,i!==this.value.length)for(let t=0;t<this.value.length;t++)this.value[t]||(this.value[t]=0);this.requestUpdate(),this.dispatchEvent(new CustomEvent("change",{detail:this.value,composed:!0})),this.attribute&&this.dispatchEvent(new CustomEvent(this.attribute,{composed:!0,detail:this.value,bubbles:!0}))}}render(){const t=this.value;return i.b `
< style >
: host {
display : block ;
}
# container {
position : relative ;
width : 100 % ;
height : 55 px ;
display : block ;
background - color : # eee ;
margin - top : 5 px ;
}
. slider {
width : calc ( 100 % / $ { t h i s . l e n g t h } ) ;
display : inline - block ;
height : 100 % ;
position : relative ;
float : left ;
pointer - events : none ;
}
. slider . fill {
color : green ;
width : 100 % ;
height : 0 % ;
background - color : # 777 ;
position : absolute ;
bottom : 0 px ;
}
label {
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
}
< / s t y l e >
< label > $ { this . label } < / l a b e l >
< div id = "container"
@ mousedown = $ { this . mousedown }
@ mousemove = $ { this . mousedown } >
$ { t . map ( t => i . b `
< span class = "slider" >
< div class = "fill" style = "height : ${Math.ceil(100*t).toString()}%" > < / d i v >
< / s p a n >
` )}
< / d i v >
2019-01-10 18:48:02 +00:00
` }});var R=n(138), $ =n.n(R);customElements.define("tone-keyboard-note",class extends i.a{static get properties(){return{note:{type:Number},color:{type:String},activecolor:{type:String},active:{type:Boolean},velocity:{type:Number},touchid:{type:Number}}}fromMidi(t){return Tone.Midi(t).toNote()}constructor(){super(),this.color="#eee",this.activecolor="white",this.active=!1,this.touchid=-1}updated(t){if(t.has("active")){const t=this.active?"noteon":"noteoff";this.active||(this.touchid=-1),this.dispatchEvent(new CustomEvent(t,{detail:{name:this.fromMidi(this.note),midi:this.note,velocity:this.active?1:0},composed:!0,bubbles:!0}))}}mouseover(t){t.buttons&&(this.active=!0,this.shadowRoot.querySelector("button").focus())}keydown(t){k(),t.repeat||" "!==t.key&&"Enter"!==t.key||(this.active=!0)}keyup(t){" "!==t.key&&"Enter"!==t.key||(this.active=!1)}touchstart(t){t.preventDefault(),this.touchid=t.touches[0].identifier,this.active=!0}render(){const t=0!==this.note;return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
}
# container {
width : 100 % ;
height : 100 % ;
display : block ;
}
# container : not ( [ show ] ) {
opacity : 0 ;
margin : 2 px ;
pointer - events : none ;
}
button {
border : none ;
- webkit - appearance : none ;
-- key - margin : 2 px ;
width : 100 % ;
height : 100 % ;
border : 2 px solid white ;
box - sizing : border - box ;
padding : 0 ;
outline : none ;
transition : background - color 0.2 s ;
color : transparent ;
font - size : 0 px ;
border - radius : 2 px ;
}
button [ active ] {
background - color : # 666 ! important ;
transition - duration : 0 s ;
}
button : focus {
border - color : # 666 ;
}
< / s t y l e >
< div id = "container" ? show = $ { t } >
$ { t ? i . b `
< button
? active = $ { this . active }
@ mouseover = $ { this . mouseover . bind ( this ) }
@ mouseleave = $ { ( ) => this . active = ! 1 }
@ mousedown = $ { ( ) => this . active = ! 0 }
@ touchstart = $ { this . touchstart . bind ( this ) }
@ touchend = $ { ( ) => this . active = ! 1 }
@ mouseup = $ { ( ) => this . active = ! 1 }
@ keydown = $ { this . keydown . bind ( this ) }
@ keyup = $ { this . keyup . bind ( this ) }
style = "background-color: ${this.active?this.activecolor:this.color};" >
$ { this . fromMidi ( this . note ) . replace ( "#" , "♯" ) }
< / b u t t o n > ` : i . b ` ` }
< / d i v >
` }});customElements.define("tone-keyboard-octave",class extends i.a{static get properties(){return{octave:{type:Number}}}constructor(){super(),this.octave=1}noteon(t){this.shadowRoot.querySelector( ` tone - keyboard - note [ note = "${t}" ] ` ).active=!0}noteoff(t){this.shadowRoot.querySelector( ` tone - keyboard - note [ note = "${t}" ] ` ).active=!1}_getNoteByTouchId(t){const e=Array.from(this.shadowRoot.querySelectorAll("tone-keyboard-note")).find(e=>e.touchid===t);if(e&&e.note)return e}render(){const t=12*this.octave,e=[0,2,4,5,7,9,11].map(e=>e+t),n=[0,1,3,0,6,8,10,0].map(e=>e?e+t:0);return i.b `
< style >
# container {
display : block ;
position : relative ;
height : 100 % ;
width : 100 % ;
}
tone - keyboard - note {
order : 0 ;
flex - grow : 1 ;
}
# white - notes {
position : absolute ;
left : 0 px ;
top : 0 px ;
width : 100 % ;
height : 100 % ;
display : flex ;
flex - direction : row ;
}
# black - notes {
position : absolute ;
top : 0 px ;
width : 100 % ;
display : flex ;
flex - direction : row ;
height : 55 % ;
}
# black - notes tone - keyboard - note : first - child , # black - notes tone - keyboard - note : last - child {
flex - grow : 0.5 ;
pointer - events : none ;
}
< / s t y l e >
< div id = "container" >
< div id = "white-notes" >
$ { e . map ( t => i . b `
< tone - keyboard - note color = "#aaa" note = "${t.toString()}" > < / t o n e - k e y b o a r d - n o t e >
` )}
< / d i v >
< div id = "black-notes" >
$ { n . map ( t => i . b `
< tone - keyboard - note color = "black" note = "${t.toString()}" > < / t o n e - k e y b o a r d - n o t e >
` )}
< / d i v >
< / d i v >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-keyboard",class extends i.a{static get properties(){return{rootoctave:{type:Number},octaves:{type:Number},polyphonic:{type:Boolean}}}constructor(){super(),this.rootoctave=4,this.octaves=4,this.polyphonic=!1,this._computerKeyboard=new $ .a({polyphony:1/0}),this._computerKeyboard.down(t=>{k(),this.noteon(t.note)}),this._computerKeyboard.up(t=>{this.noteoff(t.note)})}_getNoteByTouchId(t){const e=Array.from(this.shadowRoot.querySelectorAll("tone-keyboard-octave")).find(e=>e._getNoteByTouchId(t));if(e)return e._getNoteByTouchId(t)}_touchmove(t){Array.from(t.changedTouches).forEach(t=>{this._getNoteByTouchId(t.identifier);const e=this._getNoteByTouchId(t.identifier),n=this.shadowRoot.elementFromPoint(t.clientX,t.clientY);if(n&&n.shadowRoot){const i=n.shadowRoot.elementFromPoint(t.clientX,t.clientY);i&&i.note&&e.note!==i.note&&(e.active=!1,e.touchid=-1,i.active=!0,i.touchid=t.identifier)}})}_touchend(t){Array.from(t.changedTouches).forEach(t=>{this._getNoteByTouchId(t.identifier);const e=this._getNoteByTouchId(t.identifier);e&&e.active&&(e.active=!1,e.touchid=-1)})}noteon(t){const e=Math.floor(t/12),n=this.shadowRoot.querySelector( ` tone - keyboard - octave [ octave = "${e}" ] ` );n&&n.noteon(t)}noteoff(t){const e=Math.floor(t/12),n=this.shadowRoot.querySelector( ` tone - keyboard - octave [ octave = "${e}" ] ` );n&&n.noteoff(t)}render(){const t=[];for(let e=this.rootoctave;e<this.rootoctave+this.octaves;e++)t.push(e);return i.b `
2019-01-09 01:21:29 +00:00
< style >
# container {
display : flex ;
background - color : white ;
height : 80 px ;
}
tone - keyboard - octave {
flex - grow : 1 ;
}
< / s t y l e >
< div id = "container"
@ touchmove = $ { this . _touchmove . bind ( this ) }
@ touchend = $ { this . _touchend . bind ( this ) } >
$ { t . map ( t => i . b `
< tone - keyboard - octave octave = $ { t . toString ( ) } > < / t o n e - k e y b o a r d - o c t a v e >
` )}
< / d i v >
2019-01-10 18:48:02 +00:00
` }});var F=n(38),z=n.n(F);customElements.define("tone-midi-in",class extends i.a{constructor(){super(),z.a.enable(t=>{t&&error(t),z.a.addListener("connected",t=>{"input"===t.port.type&&this.requestUpdate()}),z.a.addListener("disconnected",t=>{this.requestUpdate()})})}_flash(){clearTimeout(this._flashTimeout);const t=this.shadowRoot.querySelector("#light");t.classList.add("flash"),this._flashTimeout=setTimeout(()=>t.classList.remove("flash"),100)}_connectMidi(t){if("none"===t.target.value)return void this.shadowRoot.querySelector("#light").classList.remove("connected");this.shadowRoot.querySelector("#light").classList.add("connected");const e=z.a.getInputById(t.target.value);e.addListener("noteon","all",t=>{const e= ` $ { t . note . name } $ { t . note . octave } ` ,n=t.note.number;this._flash(),this.dispatchEvent(new CustomEvent("noteon",{detail:{name:e,midi:n,velocity:t.velocity},composed:!0,bubbles:!0}))}),e.addListener("noteoff","all",t=>{const e= ` $ { t . note . name } $ { t . note . octave } ` ,n=t.note.number;this._flash(),this.dispatchEvent(new CustomEvent("noteoff",{detail:{name:e,midi:n,velocity:t.velocity},composed:!0,bubbles:!0}))}),e.addListener("controlchange","all",t=>{this._flash()})}render(){return window.WebMidi=z.a,z.a.supported?i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
}
# container {
display : block ;
margin - bottom : 10 px ;
}
label {
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
margin - right : 10 px ;
}
tone - select , label {
display : inline - block ;
}
# container {
position : relative ;
}
# light {
width : 10 px ;
height : 10 px ;
background - color : white ;
display : inline - block ;
}
# light . connected {
background - color : var ( -- color - gray ) ;
}
# light . connected . flash {
background - color : black ! important ;
}
< / s t y l e >
< div id = "container" >
< div id = "light" > < / d i v >
< label > MIDI < / l a b e l >
< tone - select
@ change = $ { this . _connectMidi . bind ( this ) } >
< option value = "none" > none < / o p t i o n >
$ { z . a . inputs . map ( t => i . b `
< option value = $ { t . id } > $ { t . name } < / o p t i o n >
` )}
< / t o n e - s e l e c t >
< / d i v >
` :i.b ` ` }});customElements.define("tone-piano",class extends i.a{static get properties(){return{polyphonic:{type:Boolean}}}constructor(){super()}bind(t){this.addEventListener("noteon",e=>{t.triggerAttack(e.detail.name)}),this.addEventListener("noteoff",e=>{this.polyphonic?t.triggerRelease(e.detail.name):t.triggerRelease()})}firstUpdated(){super.firstUpdated();const t=this.shadowRoot.querySelector("tone-keyboard");this.shadowRoot.querySelector("tone-midi-in").addEventListener("noteon",e=>{e.stopPropagation(),t.noteon(e.detail.midi)}),this.shadowRoot.querySelector("tone-midi-in").addEventListener("noteoff",e=>{e.stopPropagation(),t.noteoff(e.detail.midi)}),window.addEventListener("resize",this._resize.bind(this)),setTimeout(()=>this._resize(),100)}_resize(){const t=this.shadowRoot.querySelector("#container").clientWidth,e=Math.clamp(Math.floor(t/100)-1,1,8),n=Math.ceil(Math.scale(e,1,8,5,1));this.shadowRoot.querySelector("tone-keyboard").setAttribute("rootoctave",n),this.shadowRoot.querySelector("tone-keyboard").setAttribute("octaves",e)}render(){return i.b `
< style >
: host {
display : block ;
}
# container {
background - color : var ( -- color - light - gray ) ;
position : relative ;
padding : 5 px ;
display : block ;
}
tone - keyboard {
display : block ;
clear : both ;
}
tone - midi - in {
position : relative ;
top : 5 px ;
right : 5 px ;
display : inline - block ;
float : right ;
}
< / s t y l e >
< div id = "container" >
< tone - midi - in >
< / t o n e - m i d i - i n >
< tone - keyboard ? polyphonic = $ { this . polyphonic } > < / t o n e - k e y b o a r d >
< / d i v >
` }});customElements.define("tone-button",class extends i.a{static get properties(){return{label:{type:String},disabled:{type:Boolean}}}constructor(){super()}_clicked(t){k(),this.disabled&&t.stopPropagation()}render(){return i.b `
< style >
: host {
display : inline - block ;
min - width : 80 px ;
width : 100 % ;
-- computed - button - height : var ( -- button - height , 44 px ) ;
}
# container {
display : inline - block ;
width : 100 % ;
}
button {
box - sizing : border - box ;
width : 100 % ;
height : var ( -- computed - button - height ) ;
outline - color : var ( -- outline - color ) ;
border : 2 px solid black ;
border - radius : calc ( var ( -- computed - button - height ) / 2 ) ;
padding : 0 px ;
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
text - align : center ;
cursor : pointer ;
transition : box - shadow 0.1 s ;
box - shadow : var ( -- shadow - low ) ;
}
button : not ( [ disabled ] ) : hover , button : not ( [ disabled ] ) : focus {
box - shadow : var ( -- shadow - medium ) ;
}
button : active {
color : var ( -- color - gray ) ;
border - color : var ( -- color - gray ) ;
}
button [ disabled ] {
opacity : 0.5 ;
}
< / s t y l e >
< div id = "container" >
< button
? disabled = $ { this . disabled }
@ click = $ { this . _clicked . bind ( this ) } >
$ { this . label }
< / b u t t o n >
< / d i v >
` }});customElements.define("tone-trigger",class extends i.a{static get properties(){return{triggered:{type:Boolean},disabled:{type:Boolean}}}constructor(){super(),this.triggered=!1}updated(t){t.has("triggered")&&this.dispatchEvent(new CustomEvent("change",{detail:this.triggered,composed:!0,bubbles:!0}))}bind(t){this.addEventListener("change",e=>{e.detail?t.start():t.stop()})}_mousedown(t){k(),"touchstart"===t.type&&t.preventDefault(),this.triggered=!0}_keydown(t){k()," "!==t.key&&"Enter"!==t.key||(this.triggered=!0)}_keyup(t){" "!==t.key&&"Enter"!==t.key||(this.triggered=!1)}render(){return i.b `
< style >
: host {
display : inline - block ;
min - width : 80 px ;
width : 100 % ;
}
# container {
display : inline - block ;
width : 100 % ;
}
label {
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
margin - right : 20 px ;
}
button {
position : relative ;
box - sizing : border - box ;
width : 100 % ;
height : 44 px ;
outline - color : var ( -- outline - color ) ;
border : 2 px solid black ;
border - radius : 22 px ;
padding : 0 px ;
font - size : 30 px ;
text - align : center ;
cursor : pointer ;
transition : box - shadow 0.1 s ;
box - shadow : var ( -- shadow - low ) ;
}
button : hover , button : focus {
box - shadow : var ( -- shadow - medium ) ;
}
button # ring {
width : 20 px ;
height : 20 px ;
position : absolute ;
border - radius : 50 % ;
left : 50 % ;
top : 50 % ;
transform : translate ( - 50 % , - 50 % ) ;
border : 2 px solid black ;
box - sizing : border - box ;
transition : all 0.1 s ;
}
button [ triggered ] # ring {
width : 30 px ;
height : 30 px ;
}
button # circle {
position : absolute ;
left : 50 % ;
top : 50 % ;
transform : translate ( - 50 % , - 50 % ) ;
width : 100 % ;
height : 100 % ;
border - radius : 50 % ;
transition : all 0.1 s ;
background - color : black ;
}
button [ triggered ] # circle {
width : 0 px ;
height : 0 px ;
}
button [ disabled ] {
opacity : 0.5 ;
}
< / s t y l e >
< div id = "container" >
< button
? disabled = $ { this . disabled }
? triggered = $ { this . triggered }
@ keydown = $ { this . _keydown . bind ( this ) }
@ keyup = $ { this . _keyup . bind ( this ) }
@ mousedown = $ { this . _mousedown . bind ( this ) }
@ touchstart = $ { this . _mousedown . bind ( this ) }
@ mouseup = $ { ( ) => this . triggered = ! 1 }
@ touchend = $ { ( ) => this . triggered = ! 1 }
aria - label = "Trigger" . aria - checked = $ { this . triggered } >
< div id = "ring" >
< div id = "circle" > < / d i v >
< / d i v >
< / b u t t o n >
< / d i v >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-step-sequencer",class extends i.a{static get properties(){return{label:{type:String},rows:{type:Number},columns:{type:Number},highlight:{type:Number}}}constructor(){super(),this.rows=4,this.columns=16,this.highlight=-1,this.values=[],this.adding=!1}get currentColumn(){return this.values[Math.clamp(this.highlight,0,this.columns-1)]}_mousedown(t,e,n){t.cancelable&&t.preventDefault(),this.adding=!this.values[e][n],this.values[e][n]=this.adding,this.requestUpdate()}_mousemove(t,e,n){if(t.cancelable&&t.preventDefault(),t.buttons)this.values[e][n]=this.adding,this.requestUpdate();else if(t.changedTouches){const{clientWidth:i,clientHeight:o}=this.shadowRoot.querySelector("#container"),{top:r,left:s}=this.getBoundingClientRect();Array.from(t.changedTouches).forEach(t=>{const a=(t.clientX-s)/i,l=(t.clientY-r)/o;e=Math.floor(a*this.columns),n=Math.floor(l*this.rows),this.values[e][n]=this.adding}),this.requestUpdate()}}updated(t){if(t.has("columns")||t.has("rows")){this.values=[];for(let t=0;t<this.columns;t++){const t=[];for(let e=0;e<this.rows;e++)t[e]=!1;this.values.push(t)}this.requestUpdate()}}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : inline - block ;
width : 100 % ;
height : 120 px ;
}
# container {
width : 100 % ;
height : 100 % ;
display : flex ;
}
. column {
flex : 1 ;
display : flex ;
flex - direction : column ;
}
. column . highlight {
background - color : var ( -- color - gray ) ;
}
. column . highlight . row {
transition - duration : 0.4 s ;
}
. column . highlight . row . filled {
transition : background - color 0.1 s ;
}
. column . highlight . row . filled {
background - color : white ;
}
. row {
flex : 1 ;
margin : 1 px ;
background - color : var ( -- color - light - gray ) ;
transition : background - color 0 s ;
}
. row . filled {
background - color : var ( -- color - teal ) ;
}
< / s t y l e >
< div id = "container" >
$ { this . values . map ( ( t , e ) => i . b `
< div class = "column ${e===this.highlight?" highlight ":" "}" >
$ { t . map ( ( t , n ) => i . b `
< div
@ mousemove = $ { t => this . _mousemove ( t , e , n ) }
@ touchmove = $ { t => this . _mousemove ( t , e , n ) }
@ mousedown = $ { t => this . _mousedown ( t , e , n ) }
@ touchstart = $ { t => this . _mousedown ( t , e , n ) }
@ touchend = $ { ( ) => this . adding = ! 1 }
@ mouseup = $ { ( ) => this . adding = ! 1 }
class = "row ${t?" filled ":" "}" > < / d i v >
` )}
< / d i v >
` )}
< / d i v >
` }});customElements.define("tone-position",class extends i.a{static get properties(){return{position:{type:Number},min:{type:Number},max:{type:Number}}}constructor(){super(),this.position=0,this.min=0,this.max=1,this._dragging=!1}bind(t){this.tone=t,this.loop(t)}updated(t){if(t.has("position")){const t=Math.scale(this.position,this.min,this.max,0,1);this.dispatchEvent(new CustomEvent("position",{detail:t,composed:!0}))}}loop(t){requestAnimationFrame(this.loop.bind(this,t)),this._dragging||(this.position=t.progress)}_change(t){if(this._dragging=!0,clearTimeout(this._dragTimeout),this._dragTimeout=setTimeout(()=>this._dragging=!1,200),this.tone){const e=Math.scale(t.detail,this.min,this.max,0,this.tone.loopEnd);this.tone.seconds=e,this.position=this.tone.progress}}render(){return i.b `
< style >
: host {
display : block ;
}
tone - slider {
display : block ;
width : 100 % ;
}
< / s t y l e >
< div id = "container" >
< tone - slider
. value = $ { this . position }
@ input = $ { this . _change . bind ( this ) }
. min = $ { this . min }
. max = $ { this . max }
bare >
< / t o n e - s l i d e r >
< / d i v >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-slider-2d",class extends i.a{static get properties(){return{x:{type:Number},y:{type:Number}}}constructor(){super(),this.x=.5,this.y=.5}_resize(){const t=this.shadowRoot.querySelector("#container");this._slider.resize(t.clientWidth,t.clientHeight)}_getXY(t){t.stopPropagation(),t.preventDefault();const{clientWidth:e,clientHeight:n}=this.shadowRoot.querySelector("#container");let i=t.offsetX,o=t.offsetY;if(t.changedTouches){const{top:e,left:n}=this.getBoundingClientRect();i=t.changedTouches[0].clientX-n,o=t.changedTouches[0].clientY-e}return{x:Math.clamp(i/e,0,1),y:1-Math.clamp(o/n,0,1)}}_mousedown(t){const{x:e,y:n}=this._getXY(t);this.x=e,this.y=n,this.dispatchEvent(new CustomEvent("mousedown",{detail:{x:this.x,y:this.y},composed:!0}))}_mouseup(t){const{x:e,y:n}=this._getXY(t);this.x=e,this.y=n,this.dispatchEvent(new CustomEvent("mouseup",{detail:{x:this.x,y:this.y},composed:!0}))}_mousemove(t){if(t.buttons||t.changedTouches){const{x:e,y:n}=this._getXY(t);this.x=e,this.y=n,this.dispatchEvent(new CustomEvent("change",{detail:{x:this.x,y:this.y},composed:!0}))}}_mouseleave(t){t.buttons&&this._mouseup(t)}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : inline - block ;
width : 100 % ;
height : 120 px ;
}
# container {
width : 100 % ;
height : 100 % ;
background - color : var ( -- color - light - gray ) ;
position : relative ;
overflow : hidden ;
}
# circle {
position : absolute ;
top : 50 % ;
left : 50 % ;
transform : translate ( - 50 % , - 50 % ) ;
width : 30 px ;
height : 30 px ;
border - radius : 50 % ;
background - color : var ( -- color - teal ) ;
pointer - events : none ;
}
< / s t y l e >
< div id = "container"
@ mouseup = $ { this . _mouseup . bind ( this ) }
@ touchend = $ { this . _mouseup . bind ( this ) }
@ mousedown = $ { this . _mousedown . bind ( this ) }
@ touchstart = $ { this . _mousedown . bind ( this ) }
@ mousemove = $ { this . _mousemove . bind ( this ) }
@ touchmove = $ { this . _mousemove . bind ( this ) }
@ mouseleave = $ { this . _mouseleave . bind ( this ) } >
< div id = "circle" style = "left : ${(100*this.x).toString()}% ; top : ${(100*(1-this.y)).toString()}%" >
< / d i v >
< / d i v >
` }});var D=n(50);customElements.define("tone-envelope-viz",class extends D.a{constructor(){super(),this.min=0,this.max=1.1,this.duration=.1,this.alt="envelope curve"}async visualize(t){const e=t.get(),n=e.attack+e.decay+e.release,i=await Tone.Offline(()=>{const t=(new Tone.Envelope).toMaster();t.set(e),t.attack*=1,t.decay*=1,t.release*=1,t.toMaster(),t.triggerAttack(.001),t.triggerRelease(1*(e.attack+e.decay+.01)+.001)},1*(n+.01)+.002);this.buffer=i.toArray(0),this.requestUpdate()}});customElements.define("tone-envelope-curve",class extends i.a{static get properties(){return{label:{type:String},attribute:{type:String},basic:{type:Boolean}}}constructor(){super(),this.basic=!1}sync(t){const e=t[this.attribute];this.shadowRoot.querySelector("tone-select-attribute").value=e}get value(){return this.shadowRoot.querySelector("tone-select-attribute").value}set value(t){this.shadowRoot.querySelector("tone-select-attribute").value=t}render(){let t=i.b ` ` ;return this.basic||(t=i.b `
< option value = "bounce" > bounce < / o p t i o n >
< option value = "ripple" > ripple < / o p t i o n >
< option value = "step" > step < / o p t i o n >
< option value = "cosine" > cosine < / o p t i o n >
< option value = "sine" > sine < / o p t i o n >
` ),i.b `
< tone - select - attribute
label = $ { this . label } attribute = $ { this . attribute } >
< option value = "linear" > linear < / o p t i o n >
< option value = "exponential" > exponential < / o p t i o n >
$ { t }
< / d i v >
2019-01-10 18:48:02 +00:00
` }});class L extends o.a{static get properties(){return{label:{type:String}}}constructor(){super(),this.label="Envelope",this.collapsed=!1}renderAttributes(){return i.b ` ` }render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
# top . viz {
position : absolute ;
top : 9 px ;
right : 20 px ;
width : 50 px ;
}
tone - rack : not ( [ collapsed ] ) # top . viz {
display : none ;
}
# bottom . viz {
position : relative ;
display : block ;
width : calc ( 100 % - 20 px ) ;
height : 60 px ;
background - color : black ;
border - radius : 10 px ;
padding : 10 px ;
margin - top : 20 px ;
}
tone - slider {
display : block ;
margin - top : 10 px ;
}
tone - envelope - curve {
display : block ;
margin - top : 5 px ;
}
< / s t y l e >
< tone - rack
@ collapse = $ { t => this . collapsed = t . detail }
? collapsed = $ { this . collapsed } label = "${this.label}" >
< tone - envelope - viz class = "viz" id = "top" slot = "top" > < / t o n e - e n v e l o p e - v i z >
< tone - envelope - viz class = "viz" id = "bottom" color = "#eee" > < / t o n e - e n v e l o p e - v i z >
< tone - slider
attribute = "attack"
min = "0.01"
max = "2"
exp = "2"
value = "0.01"
label = "Attack" >
< / t o n e - s l i d e r >
< tone - envelope - curve
label = "Attack Curve"
attribute = "attackCurve"
> < / t o n e - e n v e l o p e - c u r v e >
< tone - slider
attribute = "decay"
min = "0.01"
max = "2"
exp = "2"
value = "0.01"
label = "Decay" >
< / t o n e - s l i d e r >
< tone - envelope - curve
basic
label = "Decay Curve"
attribute = "decayCurve"
> < / t o n e - e n v e l o p e - c u r v e >
< tone - slider
attribute = "sustain"
min = "0"
max = "1"
value = "0.01"
label = "Sustain" >
< / t o n e - s l i d e r >
< tone - slider
attribute = "release"
min = "0.01"
max = "4"
exp = "2"
value = "0.01"
label = "Release" >
< / t o n e - s l i d e r >
< tone - envelope - curve
label = "Release Curve"
attribute = "releaseCurve"
> < / t o n e - e n v e l o p e - c u r v e >
$ { this . renderAttributes ( ) }
< / t o n e - r a c k >
` }}customElements.define("tone-envelope",L);customElements.define("tone-frequency-envelope",class extends L{renderAttributes(){return i.b `
< tone - slider
attribute = "baseFrequency"
min = "20"
max = "20000"
value = "400"
units = "hz"
exp = "2"
label = "Frequency" >
< / t o n e - s l i d e r >
< tone - slider
attribute = "octaves"
min = "-8"
max = "8"
value = "2"
label = "Octaves" >
< / t o n e - s l i d e r >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-meter",class extends i.a{static get properties(){return{stereo:{type:Boolean},level:{type:Boolean},color:{type:String}}}constructor(){super(),this.color="#777"}bind(t){if(this.stereo,this.stereo){const e=new Tone.Split;t.connect(e),this._meters=[new Tone.Meter(.9),new Tone.Meter(.9)],e.left.connect(this._meters[0]),e.right.connect(this._meters[1])}else this._meters=[new Tone.Meter(.9)],t.connect(this._meters[0]);this._canvas=this.shadowRoot.querySelector("canvas"),this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight,this._context=this._canvas.getContext("2d"),this.loop(),window.addEventListener("resize",()=>{this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight})}loop(){requestAnimationFrame(this.loop.bind(this));const{width:t,height:e}=this._canvas,n=this._meters.map(t=>t.getLevel()),i=n.map(t=>Math.clamp(Math.scale(t,-100,6,0,e),4,e));this._context.clearRect(0,0,t,e);const o=t/this._meters.length;this._context.fillStyle=this.color;const r=this._meters.length>1?5:0;i.forEach((t,n)=>{this._context.fillRect(n*o+r*n,e-t,o-r,t)}),this.level&&Array.from(this.shadowRoot.querySelectorAll(".level")).forEach((t,e)=>{let i=n[e];i<-100&&(i=-1/0),t.textContent=i.toFixed(2)})}render(){let t=i.b ` ` ;return this.level&&(t=this.stereo?i.b `
2019-01-09 01:21:29 +00:00
< div class = "level" > - Infinity < / d i v >
< div class = "level" > - Infinity < / d i v >
` :i.b `
< div class = "level" > - Infinity < / d i v >
` ),i.b `
< style >
: host {
display : inline - block ;
width : 45 px ;
height : 24 px ;
border - radius : 4 px ;
padding : 4 px ;
box - sizing : border - box ;
background - color : # aaa ;
overflow : hidden ;
}
# container {
width : 100 % ;
height : 100 % ;
display : inline - block ;
}
canvas {
width : 100 % ;
height : 100 % ;
}
canvas . hasLevel {
height : calc ( 100 % - 15 px ) ;
}
# level {
height : 10 px ;
line - height : 10 px ;
display : flex ;
}
. level {
flex - grow : 1 ;
font - family : monospace ;
font - size : 10 px ;
text - align : center ;
}
< / s t y l e >
< div id = "container" >
< canvas class = $ { this . level ? "hasLevel" : "" } >
audio meter level
< / c a n v a s >
$ { this . level ? i . b `
< div id = "level" style = "color:${this.color}" > $ { t } < / d i v > ` : i . b ` ` }
< / d i v >
2019-01-10 18:48:02 +00:00
` }});var q=n(139),j=n.n(q);customElements.define("tone-presets",class extends i.a{static get properties(){return{label:{type:String},presets:{type:String}}}constructor(){super(),this.label="Presets",this.presets=JSON.stringify("[]"),this._options={}}bind(t){this.addEventListener("preset",e=>{const n=new t.constructor,i=n.get();n.dispose();const o=j()({},i,e.detail);t.set(o),this.dispatchEvent(new CustomEvent("sync",{detail:o,composed:!0,bubbles:!0}))})}_clicked(t,e){const n=Object.assign({},e);this.dispatchEvent(new CustomEvent("preset",{detail:n,composed:!0,bubbles:!0}))}render(){if("undefined"!==this.presets){const t=JSON.parse(this.presets);return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
}
# container {
display : flex ;
}
# label {
height : 20 px ;
line - height : 20 px ;
margin - left : 10 px ;
margin - right : 10 px ;
}
# label , button {
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
display : inline - block ;
color : var ( -- color - dark - gray ) ;
}
# presets {
display : inline - block ;
}
button {
font - family : monospace ;
border : none ;
- webkit - appearance : none ;
width : 20 px ;
height : 20 px ;
border : 2 px solid var ( -- color - dark - gray ) ;
padding - left : 5 px ;
color : var ( -- color - dark - gray ) ;
border - radius : 10 px ;
text - align : center ;
background - color : transparent ;
font - size : 10 px ;
outline - color : var ( -- outline - color ) ;
margin - left : 5 px ;
margin - bottom : 5 px ;
font - weight : bold ;
}
button # copy {
width : 40 px ;
font - family : var ( -- label - font - family ) ;
}
button . selected {
background - color : white ;
}
button : active {
color : var ( -- color - gray ) ;
border - color : var ( -- color - gray ) ;
}
< / s t y l e >
< div id = "container" >
< div id = "label" > $ { this . label } < / d i v >
< div id = "presets" >
$ { t . map ( ( t , e ) => i . b `
< button @ click = $ { e => this . _clicked ( e , t ) } >
$ { ( e + 1 ) . toString ( ) }
< / b u t t o n > ` ) }
<!-- button id = "copy" > copy < / b u t t o n - - >
< / d i v >
< / d i v >
2019-01-10 18:48:02 +00:00
` }return i.b ` ` }});class H extends o.a{static get properties(){return{label:{type:String},presets:{type:String},nopresets:{type:Boolean},collapsed:{type:Boolean},effect:{type:Boolean},polyphonic:{type:Boolean}}}constructor(){super(),this.label="",this.effect=!1,this.polyphonic=!1}bind(t){this.shadowRoot.querySelector("tone-meter").bind(t);const e=this.shadowRoot.querySelector("tone-presets");e&&e.bind(t),this.polyphonic?t.voices.forEach(t=>super.bind(t)):super.bind(t)}renderAttributes(){return i.b ` ` }render(){const t=i.b `
2019-01-09 01:21:29 +00:00
< div id = "drywet" slot = "top" >
< label > Dry / Wet < / l a b e l >
< tone - slider
label = "Dry/Wet"
attribute = "wet"
min = "0"
max = "1"
bare
value = "1" > < / t o n e - s l i d e r >
< / d i v >
` ;return i.b `
< style >
: host {
display : block ;
}
tone - meter {
position : absolute ;
top : 8 px ;
right : 8 px ;
width : 24 px ;
height : 24 px ;
background - color : white ;
}
tone - presets {
margin - top : 15 px ;
}
tone - slider , tone - oscillator - type , tone - select - attribute {
width : 90 % ;
min - width : 300 px ;
display : block ;
margin : 10 px auto ;
}
# attributeContainer * {
display : block ;
margin - top : 10 px ;
}
# drywet {
position : absolute ;
right : 60 px ;
top : 0 px ;
width : 50 % ;
max - width : 150 px ;
min - width : 100 px ;
}
# drywet tone - slider {
display : inline - block ;
margin : 0 ;
width : calc ( 100 % - 64 px ) ;
min - width : unset ;
float : right ;
}
label {
position : relative ;
top : 10 px ;
width : 60 px ;
display : inline - block ;
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
}
@ media only screen and ( max - width : 600 px ) {
# drywet label {
display : none ;
}
}
< / s t y l e >
< tone - rack square ? collapsed = $ { this . collapsed } label = $ { this . label } >
< tone - meter slot = "top" > < / t o n e - m e t e r >
$ { this . effect ? t : i . b ` ` }
< div id = "attributeContainer" >
$ { this . renderAttributes ( ) }
< / d i v >
$ { this . nopresets ? i . b ` ` : i . b ` <tone-presets presets= ${ this . presets } ></tone-presets> ` }
< / t o n e - r a c k s q u a r e >
` }}customElements.define("tone-instrument",H);const V=[{portamento:0,oscillator:{type:"fatsine4",spread:60,count:10},envelope:{attack:.4,decay:.01,sustain:1,attackCurve:"sine",releaseCurve:"sine",release:.4}},{portamento:0,oscillator:{type:"square4"},envelope:{attack:2,decay:1,sustain:.2,release:2}},{portamento:0,oscillator:{type:"pulse",width:.8},envelope:{attack:.01,decay:.05,sustain:.2,releaseCurve:"bounce",release:.4}},{portamento:.2,oscillator:{type:"sawtooth"},envelope:{attack:.03,decay:.1,sustain:.2,release:.02}},{portamento:.2,oscillator:{partials:[1,0,2,0,3]},envelope:{attack:.001,decay:1.2,sustain:0,release:1.2}},{portamento:.2,oscillator:{type:"fatcustom",partials:[.2,1,0,.5,.1],spread:40,count:3},envelope:{attack:.001,decay:1.6,sustain:0,release:1.6}},{portamento:0,oscillator:{type:"fatsawtooth",count:3,spread:30},envelope:{attack:.01,decay:.1,sustain:.5,release:.4,attackCurve:"exponential"}},{portamento:0,oscillator:{type:"sine"},envelope:{attack:.001,decay:.1,sustain:.1,release:1.2}}];customElements.define("tone-synth",class extends H{constructor(){super(),this.label="Synth",this.presets=JSON.stringify(V)}renderAttributes(){return i.b `
< tone - slider
label = "Portamento"
attribute = "portamento"
min = "0"
max = "0.3"
value = "0" > < / t o n e - s l i d e r >
< tone - envelope
component = "envelope"
collapsed label = "Envelope" > < / t o n e - e n v e l o p e >
< tone - oscillator
omni
component = "oscillator"
collapsed label = "Oscillator" > < / t o n e - o s c i l l a t o r >
` }});const B=[{portamento:0,oscillator:{type:"square"},filter:{Q:6,type:"lowpass",rolloff:-24},envelope:{attack:.005,decay:.1,sustain:.9,release:1},filterEnvelope:{attack:.06,decay:.2,sustain:.5,release:2,baseFrequency:200,octaves:7,exponent:2}},{portamento:0,oscillator:{type:"sawtooth"},filter:{Q:2,type:"bandpass",rolloff:-24},envelope:{attack:.01,decay:.1,sustain:.2,release:.6},filterEnvelope:{attack:.02,decay:.4,sustain:1,release:.7,releaseCurve:"linear",baseFrequency:20,octaves:5}},{portamento:0,oscillator:{type:"fmsquare5",modulationType:"triangle",modulationIndex:2,harmonicity:.501},filter:{Q:1,type:"lowpass",rolloff:-24},envelope:{attack:.01,decay:.1,sustain:.4,release:2},filterEnvelope:{attack:.01,decay:.1,sustain:.8,release:1.5,baseFrequency:50,octaves:4.4}},{portamento:.08,oscillator:{type:"custom",partials:[2,1,3,2,.4]},filter:{Q:4,type:"lowpass",rolloff:-48},envelope:{attack:.04,decay:.06,sustain:.4,release:1},filterEnvelope:{attack:.01,decay:.1,sustain:.6,release:1.5,baseFrequency:50,octaves:3.4}},{portamento:.01,oscillator:{type:"sawtooth"},filter:{Q:2,type:"lowpass",rolloff:-24},envelope:{attack:.1,decay:.1,sustain:.6,release:.5},filterEnvelope:{attack:.05,decay:.8,sustain:.4,release:1.5,baseFrequency:2e3,octaves:1.5}},{portamento:0,oscillator:{type:"pwm",modulationFrequency:1},filter:{Q:6,rolloff:-24},envelope:{attack:.025,decay:.3,sustain:.9,release:2},filterEnvelope:{attack:.245,decay:.131,sustain:.5,release:2,baseFrequency:20,octaves:7.2,exponent:2}},{portamento:0,oscillator:{type:"sawtooth"},filter:{Q:3,type:"highpass",rolloff:-12},envelope:{attack:.01,decay:.3,sustain:0,release:.9},filterEnvelope:{attack:.01,decay:.1,sustain:0,release:.1,baseFrequency:800,octaves:-1.2}}];customElements.define("tone-mono-synth",class extends H{constructor(){super(),this.label="MonoSynth",this.presets=JSON.stringify(B)}renderAttributes(){return i.b `
< tone - slider
label = "Portamento"
attribute = "portamento"
min = "0"
max = "0.1"
value = "0" > < / t o n e - s l i d e r >
< tone - envelope
component = "envelope"
collapsed
label = "Envelope" > < / t o n e - e n v e l o p e >
< tone - oscillator
omni
component = "oscillator"
class = "rack" collapsed label = "Oscillator" > < / t o n e - o s c i l l a t o r >
< tone - filter
component = "filter"
class = "rack" collapsed label = "Filter" > < / t o n e - f i l t e r >
< tone - frequency - envelope
component = "filterEnvelope"
collapsed
label = "Filter Envelope" > < / t o n e - f r e q u e n c y - e n v e l o p e >
2019-01-10 04:38:07 +00:00
` }});const G=[{frequency:300,envelope:{attack:.001,decay:.20958529411764706,sustain:0,release:.4888,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},harmonicity:17.075,modulationIndex:36.84,resonance:378.8235294117647,octaves:2.25},{frequency:200,envelope:{attack:.01,decay:.0427764705882353,sustain:0,release:.4888,attackCurve:"linear",decayCurve:"linear",releaseCurve:"exponential"},harmonicity:12,modulationIndex:21.04,resonance:106.19607843137256,octaves:4},{frequency:300,envelope:{attack:.09584313725490196,decay:.26265196078431374,sustain:0,release:.4888,attackCurve:"ripple",decayCurve:"exponential",releaseCurve:"exponential"},harmonicity:.5,modulationIndex:11.56,resonance:474.0882352941176,octaves:.99},{frequency:300,envelope:{attack:.001,decay:.4,sustain:0,release:.2,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},harmonicity:12,modulationIndex:20,resonance:800,octaves:1.5}];customElements.define("tone-metal-synth",class extends H{constructor(){super(),this.label="MetalSynth",this.presets=JSON.stringify(G)}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< tone - slider
label = "Harmonicity"
attribute = "harmonicity"
min = "0.5"
max = "20"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Modulation Index"
attribute = "modulationIndex"
min = "0.5"
max = "40"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Resonance"
attribute = "resonance"
min = "100"
max = "8000"
exp = "2"
value = "4000" > < / t o n e - s l i d e r >
< tone - slider
label = "Octaves"
attribute = "octaves"
min = "0.5"
max = "4"
value = "1.5" > < / t o n e - s l i d e r >
< tone - envelope
component = "envelope"
collapsed
label = "Envelope" > < / t o n e - e n v e l o p e >
2019-01-10 04:38:07 +00:00
` }});const U=[{pitchDecay:.0033411764705882354,octaves:.8300000000000001,oscillator:{frequency:440,detune:0,phase:0,type:"fmsine",modulationIndex:.1,modulationType:"sawtooth",harmonicity:.44,volume:0,mute:!1},envelope:{attack:6e-4,decay:.25,sustain:0,release:1.4,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"exponential"}},{pitchDecay:.008,octaves:2,oscillator:{type:"sine",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},envelope:{attack:6e-4,decay:.5,sustain:0,release:1.4,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"exponential"}},{pitchDecay:.019729411764705884,octaves:4.845,oscillator:{frequency:440,detune:0,phase:0,spread:80.4,count:3,type:"fatsine",partialCount:0,volume:0,mute:!1},envelope:{attack:.011560784313725491,decay:.22226666666666667,sustain:0,release:1.4,attackCurve:"sine",decayCurve:"exponential",releaseCurve:"exponential"}}];customElements.define("tone-membrane-synth",class extends H{constructor(){super(),this.label="MembraneSynth",this.presets=JSON.stringify(U)}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< tone - slider
label = "Pitch Decay"
attribute = "pitchDecay"
min = "0.001"
max = "0.2"
exp = "2"
value = "0.01" > < / t o n e - s l i d e r >
< tone - slider
label = "Octaves"
attribute = "octaves"
min = "0.5"
max = "6"
value = "1.5" > < / t o n e - s l i d e r >
< tone - oscillator
omni
component = "oscillator"
collapsed
label = "Oscillator" > < / t o n e - o s c i l l a t o r >
< tone - envelope
component = "envelope"
collapsed
label = "Envelope" > < / t o n e - e n v e l o p e >
` }});customElements.define("tone-noise-synth",class extends H{constructor(){super(),this.label="NoiseSynth"}renderAttributes(){return i.b `
< tone - noise
label = "Noise"
collapsed
component = "noise" > < / t o n e - n o i s e >
< tone - envelope
component = "envelope"
collapsed
label = "Envelope" > < / t o n e - e n v e l o p e >
2019-01-10 04:38:07 +00:00
` }});const W=[{harmonicity:1,modulationIndex:20.848,portamento:.024,oscillator:{type:"sawtooth9",frequency:440,detune:0,phase:0,partialCount:9},envelope:{attack:.012926470588235294,decay:.05975,sustain:.16,release:.18211764705882355,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"exponential"},modulation:{type:"custom",frequency:440,detune:0,phase:0,partials:[.8105694691387023,0,.0900632743487447,0,.03242277876554809,0,.016542234064055146,0,.010007030483193857,0,.00669892123255126,0,.004796269048158,0,.6,0,.0028047386475387615,.4727272727272728,.002245344789857901,0,.0018380260071172384,0,.0015322674274833694,0,.0012969111506219236,.8727272727272728,.0011118922759104286,0,.0009638162534348421,0,.0008434645880735718,0],partialCount:32},modulationEnvelope:{attack:.012926470588235294,decay:.08784411764705882,sustain:0,release:.08627941176470588,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"cosine"}},{harmonicity:1.515,modulationIndex:6.483999999999999,detune:0,oscillator:{type:"sawtooth3",frequency:440,detune:0,phase:0,partialCount:3,volume:0,mute:!1},envelope:{attack:.010585294117647059,decay:.27689411764705885,sustain:0,release:.7328941176470589,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},modulation:{type:"square",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},modulationEnvelope:{attack:.01,decay:.05975,sustain:0,release:.13635,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"exponential"},portamento:0},{harmonicity:1.655,modulationIndex:40,detune:0,oscillator:{type:"square",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},envelope:{attack:.09584313725490196,decay:.13174117647058822,sustain:.25,release:.5,attackCurve:"exponential",decayCurve:"exponential",releaseCurve:"exponential"},modulation:{type:"triangle",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},modulationEnvelope:{attack:.0427764705882353,decay:.8596519607843138,sustain:.08,release:3.392894117647059,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},portamento:.15899999999999997}];customElements.define("tone-fm-synth",class extends H{constructor(){super(),this.label="FMSynth",this.presets=JSON.stringify(W)}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< tone - slider
label = "Portamento"
attribute = "portamento"
min = "0"
max = "0.3"
value = "0" > < / t o n e - s l i d e r >
< tone - slider
label = "Harmonicity"
attribute = "harmonicity"
min = "0.5"
max = "4"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Modulation Index"
attribute = "modulationIndex"
min = "0.1"
max = "40"
value = "1" > < / t o n e - s l i d e r >
< tone - envelope
component = "envelope"
collapsed
label = "Carrier Envelope" > < / t o n e - e n v e l o p e >
< tone - oscillator
omni
component = "oscillator"
collapsed label = "Carrier Oscillator" > < / t o n e - o s c i l l a t o r >
< tone - envelope
component = "modulationEnvelope"
collapsed
label = "Modulation Envelope" > < / t o n e - e n v e l o p e >
< tone - oscillator
component = "modulation"
collapsed label = "Modulation Oscillator" > < / t o n e - o s c i l l a t o r >
2019-01-10 04:38:07 +00:00
` }});const Y=[{harmonicity:3.51,detune:0,oscillator:{type:"sawtooth",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},envelope:{attack:.01682843137254902,decay:.2,sustain:.3,release:.3,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},modulation:{type:"sine",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},modulationEnvelope:{attack:.6661147058823529,decay:1.1665411764705882,sustain:1,release:2.151691176470588,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},portamento:0},{harmonicity:2.88,detune:0,oscillator:{frequency:440,detune:0,phase:0,width:0,volume:0,mute:!1,type:"pulse"},envelope:{attack:.20958529411764706,decay:1.9219607843137254,sustain:.08,release:1.5132911764705883,attackCurve:"exponential",decayCurve:"linear",releaseCurve:"exponential"},modulation:{type:"square",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},modulationEnvelope:{attack:.01682843137254902,decay:1.1665411764705882,sustain:1,release:2.151691176470588,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},portamento:0},{harmonicity:2.355,detune:0,oscillator:{type:"sawtooth",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},envelope:{attack:.19729411764705884,decay:1.1072313725490197,sustain:.3,release:2.8358588235294118,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},modulation:{type:"triangle",frequency:440,detune:0,phase:0,partialCount:0,volume:0,mute:!1},modulationEnvelope:{attack:.09584313725490196,decay:1.1665411764705882,sustain:1,release:2.151691176470588,attackCurve:"linear",decayCurve:"exponential",releaseCurve:"exponential"},portamento:0}];customElements.define("tone-am-synth",class extends H{constructor(){super(),this.label="AMSynth",this.presets=JSON.stringify(Y)}renderAttributes(){return i.b `
< tone - slider
label = "Portamento"
attribute = "portamento"
min = "0"
max = "0.3"
value = "0" > < / t o n e - s l i d e r >
< tone - slider
label = "Harmonicity"
attribute = "harmonicity"
min = "0.5"
max = "4"
value = "1" > < / t o n e - s l i d e r >
< tone - envelope
component = "envelope"
collapsed
label = "Carrier Envelope" > < / t o n e - e n v e l o p e >
< tone - oscillator
omni
component = "oscillator"
collapsed label = "Carrier Oscillator" > < / t o n e - o s c i l l a t o r >
< tone - envelope
component = "modulationEnvelope"
collapsed
label = "Modulation Envelope" > < / t o n e - e n v e l o p e >
< tone - oscillator
component = "modulation"
collapsed label = "Modulation Oscillator" > < / t o n e - o s c i l l a t o r >
2019-01-09 01:21:29 +00:00
` }});customElements.define("tone-sampler",class extends H{constructor(){super(),this.label="Sampler"}renderAttributes(){return i.b `
< tone - slider
label = "Attack"
attribute = "attack"
min = "0"
max = "0.3"
value = "0" > < / t o n e - s l i d e r >
< tone - slider
label = "Release"
attribute = "release"
min = "0"
max = "1.5"
value = "0.1" > < / t o n e - s l i d e r >
< tone - select - attribute
attribute = "curve"
label = "Curve" >
< option value = "linear" > linear < / o p t i o n >
< option value = "exponential" > exponential < / o p t i o n >
< / t o n e - s e l e c t - a t t r i b u t e >
` }});customElements.define("tone-duo-synth",class extends H{constructor(){super(),this.label="MembraneSynth"}renderAttributes(){return i.b `
< tone - slider
label = "Vibrato Rate"
attribute = "vibratoRate"
min = "0.1"
max = "5"
units = "hz"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Vibrato Amount"
attribute = "vibratoAmount"
min = "0"
max = "1"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Harmonicity"
attribute = "harmonicity"
min = "0.5"
max = "4"
value = "1" > < / t o n e - s l i d e r >
< tone - mono - synth
component = "voice0"
collapsed
nopresets
label = "Voice 0" > < / t o n e - m o n o - s y n t h >
< tone - mono - synth
component = "voice1"
collapsed
nopresets
label = "Voice 1" > < / t o n e - m o n o - s y n t h >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-filter-viz",class extends D.a{constructor(){super(),this.min=0,this.max=2.5,this.alt="filter response curve"}drawBackground(t,e,n){t.fillStyle="rgba(255, 255, 255, 0.3)",t.fillRect(0,.6*n,e,3),t.fill()}async visualize(t){this.buffer=t.getFrequencyResponse().map(t=>Math.pow(t,.5)),this.requestUpdate()}});customElements.define("tone-filter",class extends o.a{static get properties(){return{label:{type:String},frequency:{type:Boolean}}}constructor(){super(),this.label="Filter"}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
# top . viz {
position : absolute ;
top : 9 px ;
right : 20 px ;
width : 50 px ;
}
tone - rack : not ( [ collapsed ] ) # top . viz {
display : none ;
}
# bottom . viz {
position : relative ;
display : block ;
width : calc ( 100 % - 20 px ) ;
height : 60 px ;
background - color : black ;
border - radius : 10 px ;
padding : 10 px ;
margin - top : 20 px ;
}
tone - slider {
display : block ;
margin - top : 10 px ;
}
tone - select - attribute {
display : block ;
margin - top : 5 px ;
}
< / s t y l e >
< tone - rack
@ collapse = $ { t => this . collapsed = t . detail }
? collapsed = $ { this . collapsed } label = "${this.label}" >
< tone - filter - viz class = "viz" slot = "top" id = "top" > < / t o n e - f i l t e r - v i z >
< tone - filter - viz class = "viz" id = "bottom" color = "white" > < / t o n e - f i l t e r - v i z >
< tone - select - attribute
label = "Type"
attribute = "type" >
< option value = "lowpass" > lowpass < / o p t i o n >
< option value = "highpass" > highpass < / o p t i o n >
< option value = "bandpass" > bandpass < / o p t i o n >
< option value = "lowshelf" > lowshelf < / o p t i o n >
< option value = "highshelf" > highshelf < / o p t i o n >
< option value = "peaking" > peaking < / o p t i o n >
< option value = "notch" > notch < / o p t i o n >
< option value = "allpass" > allpass < / o p t i o n >
< / t o n e - s e l e c t - a t t r i b u t e >
< tone - select - attribute
label = "Rolloff"
attribute = "rolloff" >
< option value = "-12" > - 12 < / o p t i o n >
< option value = "-24" > - 24 < / o p t i o n >
< option value = "-48" > - 48 < / o p t i o n >
< option value = "-96" > - 96 < / o p t i o n >
< / t o n e - s e l e c t - a t t r i b u t e >
$ { this . frequency ? i . b `
< tone - slider attribute = "frequency"
value = "5000"
min = "20"
max = "20000"
exp = "2"
units = "hz"
label = "Frequency"
> < / t o n e - s l i d e r >
` :i.b ` ` }
< tone - slider attribute = "Q"
value = "1"
min = "0"
max = "10"
label = "Q"
> < / t o n e - s l i d e r >
< tone - slider attribute = "gain"
value = "0"
min = "-20"
max = "3"
units = "dB"
label = "Gain"
> < / t o n e - s l i d e r >
< / t o n e - r a c k >
` }});customElements.define("tone-volume-slider",class extends i.a{static get properties(){return{value:{type:Number},attribute:{type:String}}}constructor(){super(),this.value=0}sync(t){this.shadowRoot.querySelector("tone-slider").sync(t)}render(){return i.b `
< style >
: host {
-- computed - slider - height : var ( -- slider - height , 100 px ) ;
display : inline - block ;
}
# slider - container {
height : var ( -- computed - slider - height ) ;
width : 40 px ;
display : block ;
margin : 0 auto ;
position : relative ;
}
tone - slider {
position : absolute ;
left : 0 px ;
top : 0 px ;
width : var ( -- computed - slider - height ) ;
transform : rotate ( - 90 deg ) translate ( - 100 % , 0 ) ;
transform - origin : top left ;
}
# number {
margin - top : 10 px ;
width : 100 % ;
text - align : center ;
font - family : monospace ;
font - size : 12 px ;
}
# container {
position : relative ;
}
< / s t y l e >
< div id = "container" >
< div id = "slider-container" >
< tone - slider
default = "0"
attribute = $ { this . attribute }
max = "6"
min = "-80"
exp = "0.4"
. value = "${this.value}"
@ change = $ { t => this . value = t . detail }
bare > < / t o n e - s l i d e r >
< / d i v >
< div id = "number" > $ { this . value >= 0 ? "+" : "" } $ { this . value . toFixed ( 0 ) } db < / d i v >
< / d i v >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-channel",class extends o.a{static get properties(){return{label:{type:String},solo:{type:Boolean},mute:{type:Boolean},muted:{type:Boolean}}}bind(t){this.shadowRoot.querySelector("tone-meter").bind(t),this.addEventListener("mute",e=>{t.mute=e.detail}),this.addEventListener("solo",e=>{t.solo=e.detail}),setInterval(()=>{this.muted=t.muted},100),super.bind(t)}updated(t){super.updated(t),t.has("solo")&&this.dispatchEvent(new CustomEvent("solo",{detail:this.solo,composed:!0,bubbles:!0})),t.has("mute")&&this.dispatchEvent(new CustomEvent("mute",{detail:this.mute,composed:!0,bubbles:!0}))}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : inline - block ;
}
h2 {
text - align : center ;
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
font - weight : normal ;
margin : 0 ;
padding : 0 ;
padding - bottom : 5 px ;
}
tone - volume - slider , tone - slider {
display : block ;
}
# volume {
padding : 10 px ;
position : relative ;
background - color : var ( -- color - light - gray ) ;
}
# volume tone - volume - slider {
z - index : 1 ;
position : relative ;
}
# volume tone - meter {
pointer - events : none ;
z - index : 0 ;
position : absolute ;
top : 0 px ;
left : 0 px ;
width : 100 % ;
height : calc ( 100 % - 25 px ) ;
background - color : var ( -- color - light - gray )
}
# container {
border : 2 px solid black ;
border - radius : 10 px ;
padding : 10 px ;
}
tone - meter {
position : absolute ;
}
# buttons {
margin - top : 10 px ;
display : flex ;
}
button {
flex - grow : 1 ;
display : inline - block ;
margin : 0 2 px ;
border : 2 px solid black ;
outline - color : var ( -- outline - color ) ;
- webkit - appearance : none ;
padding : 0 px 5 px ;
height : 20 px ;
border - radius : 12 px ;
width : 40 % ;
}
button . enabled {
color : white ;
}
button # solo . enabled {
background - color : # 149 df1 ;
}
button # mute . enabled {
background - color : # ff672a ;
}
button [ disabled ] {
opacity : 0.5 ;
background - color : # ff672a ;
color : white ;
}
< / s t y l e >
< div id = "container" >
< h2 > $ { this . label } < / h 2 >
< div id = "volume" >
< tone - meter stereo > < / t o n e - m e t e r >
< tone - volume - slider
attribute = "volume" >
< / t o n e - v o l u m e - s l i d e r >
< / d i v >
< tone - slider
bare
min = "-1"
max = "1"
default = "0"
value = "0"
anchor = "center"
attribute = "pan" >
< / t o n e - s l i d e r >
< div id = "buttons" >
< button id = "solo" aria - checked = $ { this . solo }
@ click = $ { t => this . solo = ! this . solo }
class = $ { this . solo ? "enabled" : "" } >
solo < / b u t t o n >
< button id = "mute" aria - checked = $ { this . mute }
? disabled = $ { this . muted && ! this . mute }
class = "${this.mute?" enabled ":" "}"
@ click = $ { t => this . mute = ! this . mute } >
mute < / b u t t o n >
< / d i v >
< / d i v >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-transport",class extends o.a{static get properties(){return{controls:{type:Boolean},position:{type:Boolean}}}constructor(){super(),this.collapsed=!0}bind(t){super.bind(t),this.shadowRoot.querySelector("tone-play-toggle").bind(t),setInterval(()=>{this.shadowRoot.querySelector("#position").textContent=t.position},100)}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
}
# container {
background - color : var ( -- color - light - gray ) ;
padding : 5 px ;
}
tone - play - toggle {
width : 50 % ;
}
# top {
position : relative ;
}
# top tone - play - toggle {
width : 60 % ;
}
# top # position {
background - color : white ;
padding : 5 px ;
position : absolute ;
width : 30 % ;
right : 8 px ;
transform : translate ( 0 % , - 50 % ) ;
text - align : center ;
top : 50 % ;
font - family : monospace ;
}
tone - rack {
margin - top : 10 px ;
}
tone - slider , tone - toggle {
display : block ;
margin - top : 10 px ;
}
tone - slider {
width : 80 % ;
margin : 10 px auto 0 ;
}
# tempo {
width : calc ( 100 % - 10 px ) ;
}
< / s t y l e >
< div id = "container" >
< div id = "top" >
< tone - play - toggle > < / t o n e - p l a y - t o g g l e >
< div id = "position" > 0 : 0 : 0 < / d i v >
< / d i v >
< tone - slider
id = "tempo"
min = "60"
max = "240"
label = "Tempo"
exp = "2"
units = "bpm"
attribute = "bpm" >
< / t o n e - s l i d e r >
$ { this . controls ? i . b `
< tone - rack square label = "Transport Settings" ? collapsed = $ { this . collapsed } >
< tone - toggle
label = "Loop"
attribute = "loop" >
< / t o n e - t o g g l e >
< tone - slider
min = "0"
max = "10"
label = "Loop Start"
attribute = "loopStart" >
< / t o n e - s l i d e r >
< tone - slider
min = "0"
max = "10"
label = "Loop End"
attribute = "loopEnd" >
< / t o n e - s l i d e r >
< / t o n e - r a c k >
` :i.b ` ` }
< / d i v >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-compressor",class extends o.a{static get properties(){return{label:{type:String}}}constructor(){super(),this.label="Compressor",this.collapsed=!1}renderAttributes(){return i.b ` ` }render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
# top . viz {
position : absolute ;
top : 9 px ;
right : 20 px ;
width : 50 px ;
}
# bottom . viz {
position : relative ;
display : block ;
width : calc ( 100 % - 20 px ) ;
height : 60 px ;
background - color : black ;
border - radius : 10 px ;
padding : 10 px ;
margin - top : 20 px ;
}
tone - rack : not ( [ collapsed ] ) # top . viz {
display : none ;
}
tone - slider {
display : block ;
margin - top : 10 px ;
}
< / s t y l e >
< tone - rack
@ collapse = $ { t => this . collapsed = t . detail }
? collapsed = $ { this . collapsed } label = "${this.label}" >
< tone - slider
attribute = "attack"
min = "0.001"
max = "1"
value = "0.1"
label = "Attack" >
< / t o n e - s l i d e r >
< tone - slider
attribute = "release"
min = "0.001"
max = "1"
value = "0.1"
label = "Release" >
< / t o n e - s l i d e r >
< tone - slider
attribute = "threshold"
min = "-60"
max = "0"
value = "-12"
exp = "0.5"
label = "Threshold" >
< / t o n e - s l i d e r >
< tone - slider
attribute = "ratio"
min = "1"
max = "20"
value = "4"
label = "Ratio" >
< / t o n e - s l i d e r >
< tone - slider
attribute = "knee"
min = "0"
max = "40"
value = "30"
label = "Knee" >
< / t o n e - s l i d e r >
< / t o n e - r a c k >
2019-01-10 18:48:02 +00:00
` }});const K=i.b ` < svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" > < path d = "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" / > < path d = "M0 0h24v24H0z" fill = "none" / > < /svg>`,J=(i.b`<svg xmlns="http:/ / www . w3 . org / 2000 / svg " width=" 24 " height=" 24 " viewBox=" 0 0 24 24 "><path d=" M18 . 5 12 c0 - 1.77 - 1.02 - 3.29 - 2.5 - 4.03 v8 . 05 c1 . 48 - . 73 2.5 - 2.25 2.5 - 4.02 zM5 9 v6h4l5 5 V4L9 9 H5z "/><path d=" M0 0 h24v24H0z " fill=" none "/></svg>`,i.b`<svg xmlns=" http : //www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/><path d="M0 0h24v24H0z" fill="none"/></svg>`);customElements.define("tone-unmute",class extends o.a{static get properties(){return{suspended:{type:Boolean},muted:{type:Boolean},focused:{type:Boolean},novolume:{type:Boolean}}}constructor(){super(),this.suspended=!0,this.muted=!1,this.focused=!1,setInterval(()=>{this.suspended="suspended"===Tone.context.state},100)}updated(t){if(t.has("muted")){Tone.Master.mute=this.muted;const t=this.shadowRoot.querySelector("#volume");this.novolume||this.muted||t.min!=t.value||(t.value=0)}}_clicked(t){k(),"suspended"!==Tone.context.state&&(this.muted=!this.muted)}_adjustVolume(t){t.detail===t.target.min?this.muted=!0:this.muted=!1,Tone.Master.volume.value=t.detail}render(){return i.b`
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
position : fixed ;
top : 10 px ;
right : 10 px ;
}
# container {
position : absolute ;
width : 44 px ;
height : 44 px ;
right : 0 px ;
top : 0 px ;
border - radius : 24 px ;
border : 2 px solid black ;
background - color : white ;
overflow : hidden ;
transition : width 0.2 s ;
box - shadow : var ( -- shadow - medium ) ;
}
2019-01-10 18:48:02 +00:00
# container : hover : not ( [ novolume ] ) , # container [ focused ] : not ( [ novolume ] ) {
2019-01-09 01:21:29 +00:00
width : 144 px ;
}
# container : hover tone - slider , # container [ focused ] tone - slider {
opacity : 1 ;
width : 80 px ;
}
tone - slider {
position : absolute ;
left : 16 px ;
top : 2 px ;
width : 0 px ;
opacity : 0 ;
transition : width 0.2 s , opacity 0.2 s ; ;
}
# speaker {
position : absolute ;
top : 10 px ;
right : 10 px ;
background - color : transparent ;
outline - color : var ( -- outline - color ) ;
border : none ;
- webkit - appearance : none ;
height : 24 px ;
width : 24 px ;
padding : 0 px ;
cursor : pointer ;
}
# speaker svg {
width : 100 % ;
height : 100 % ;
}
< / s t y l e >
2019-01-10 18:48:02 +00:00
< div id = "container" ? focused = $ { this . focused } ? novolume = $ { this . novolume } >
2019-01-09 01:21:29 +00:00
< button
@ blur = $ { t => this . focused = ! 1 }
@ focus = $ { t => this . focused = ! 0 }
@ click = $ { this . _clicked . bind ( this ) }
id = "speaker" aria - label = "speaker" aria - checked = $ { this . suspended } >
2019-01-10 04:38:07 +00:00
$ { this . suspended || this . muted ? K : J }
2019-01-09 01:21:29 +00:00
< / b u t t o n >
2019-01-10 18:48:02 +00:00
$ { this . novolume ? i . b ` ` : i . b `
< tone - slider
@ blur = $ { t => this . focused = ! 1 }
@ focus = $ { t => this . focused = ! 0 }
id = "volume"
@ change = $ { this . _adjustVolume . bind ( this ) }
bare min = "-60" max = "0" value = "0" > < / t o n e - s l i d e r > ` }
2019-01-09 01:21:29 +00:00
< / d i v >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-top-bar",class extends i.a{constructor(){super()}updated(){const t=this.shadowRoot.querySelector("canvas");t.width=2*t.clientWidth,t.width=2*t.clientHeight;const{width:e,height:n}=t,i=t.getContext("2d"),o=function(t){const e=new Array(t),n=new Array(t),i=new Array(t),o=new Array(t),r=[e,i,o,n];for(let n=0;n<t;n++)e[n]=Math.sin(2*Math.PI*n/t);for(let e=0;e<t;e++)i[e]=(e+t/2)%t/t*2-1;for(let e=0;e<t;e++)o[e]=e<t/3?e/(t/3)*2-1:e<2*t/3?2*(1-(e-t/3)/(t/3))-1:(e-2*t/3)/(t/3)*2-1;for(let e=0;e<t;e++){const i=t/16;n[e]=e<i?-1:e<t/2?1:e<t-i?-1:1}return r[Math.floor(Math.random()*r.length)]}(e+1);i.beginPath(),o.forEach((t,e)=>{const o=Math.scale(t,-1,1,.25*n,.75*n);0===e?i.moveTo(e,o):i.lineTo(e,o)}),i.lineTo(e,n),i.lineTo(0,n),i.fillStyle="#22DBC0",i.fill()}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
height : 44 px ;
width : 100 % ;
}
# container {
background - color : black ;
width : 100 % ;
height : 100 % ;
}
# logo {
color : white ;
font - family : 'Roboto Mono' , monospace ;
font - size : 20 px ;
line - height : 44 px ;
margin - left : 60 px ;
position : relative ;
display : inline - block ;
}
# logo # text {
display : inline - block ;
position : relative ;
}
# logo canvas {
position : absolute ;
right : - 1 px ;
background - color : # F734D7 ;
height : 26 px ;
width : 26 px ;
top : 10 px ;
}
tone - unmute {
position : fixed ;
top : 6 px ;
right : 6 px ;
z - index : 1000 ;
}
< / s t y l e >
< tone - unmute > < / t o n e - u n m u t e >
< div id = "container" >
< a id = "logo" href = "https://tonejs.github.io" >
< canvas > < / c a n v a s >
< div id = "text" > Tone . js < / d i v >
< / a >
< / d i v >
` }});customElements.define("tone-content",class extends i.a{render(){return i.b `
< style >
: host {
display : block ;
width : 100 % ;
}
# content {
width : 80 % ;
min - width : 320 px ;
max - width : 600 px ;
margin : 40 px auto 60 px ;
}
< / s t y l e >
< div id = "content" >
< slot > < / s l o t >
< / d i v >
2019-01-10 04:38:07 +00:00
` }});const X=i.b ` < svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" > < path d = "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" / > < path d = "M0 0h24v24H0z" fill = "none" / > < /svg>`,Q=i.b`<svg xmlns="http:/ / www . w3 . org / 2000 / svg " width=" 24 " height=" 24 " viewBox=" 0 0 24 24 "><path d=" M12 8 l - 6 6 1.41 1.41 L12 10.83 l4 . 59 4.58 L18 14 z "/><path d=" M0 0 h24v24H0z " fill=" none "/></svg>`;customElements.define(" tone - drawer ",class extends i.a{static get properties(){return{collapsed:{type:Boolean},label:{type:String}}}constructor(){super(),this.collapsed=window.innerHeight<700,this.label=" Components "}updated(t){if(t.has(" collapsed ")&&!this.collapsed){const t=t=>{t.dispatchEvent(new CustomEvent(" collapse ",{detail:this.collapsed,composed:!0,bubbles:!0}))};Array.from(this.children).forEach(e=>{e.assignedNodes?Array.from(e.assignedNodes()).forEach(e=>t(e)):t(e),e.dispatchEvent(new CustomEvent(" collapse ",{detail:this.collapsed,composed:!0,bubbles:!0}))}),window.dispatchEvent(new CustomEvent(" resize " ) ) } } render ( ) { return i . b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : block ;
width : 100 % ;
max - height : 100 % ;
position : fixed ;
bottom : 0 px ;
left : 0 px ;
overflow - y : auto ;
background - color : white ;
z - index : 100 ;
}
button {
padding : 0 px ;
width : calc ( 100 % - 24 px ) ;
- webkit - appearance : none ;
background - color : white ;
border : none ;
outline - color : var ( -- outline - color ) ;
margin - left : 12 px ;
margin - top : 8 px ;
}
button svg {
width : 24 px ;
float : left ;
height : 100 % ;
}
# content {
width : 100 % ;
display : block ;
border - top : 2 px solid black ;
box - shadow : var ( -- shadow - high ) ;
position : relative ;
z - index : 10000 ;
}
# content [ collapsed ] {
height : 40 px ;
overflow : hidden ;
}
# slots {
padding : 0 10 px 10 px 10 px ;
width : calc ( 100 % - 20 px ) ;
display : block ;
}
h2 {
font - weight : normal ;
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
display : inline - block ;
position : absolute ;
margin : 0 px ;
top : 12 px ;
left : 50 px ;
pointer - events : none ;
}
: : slotted ( * ) {
margin - top : 10 px ;
display : block ;
}
< / s t y l e >
< div id = "content" ? collapsed = $ { this . collapsed } >
< button
aria - label = "expand"
aria - checked = $ { this . collapsed }
@ click = $ { ( ) => this . collapsed = ! this . collapsed } >
2019-01-10 04:38:07 +00:00
$ { this . collapsed ? Q : X }
2019-01-09 01:21:29 +00:00
< / b u t t o n >
< h2 > $ { this . label } < / h 2 >
< div id = "slots" >
$ { this . collapsed ? i . b ` ` : i . b ` <slot></slot> ` }
< / d i v >
< / d i v >
` }});customElements.define("tone-explanation",class extends i.a{static get properties(){return{label:{type:String}}}constructor(){super()}render(){return i.b `
< style >
: host {
display : block ;
width : 100 % ;
margin - top : 8 px ;
box - shadow : var ( -- shadow - low ) ;
background - color : var ( -- color - light - gray ) ;
margin - bottom : 30 px ;
}
# container {
width : 100 % ;
height : auto ;
}
# title {
width : calc ( 100 % - 20 px ) ;
padding : 5 px ;
margin : 5 px ;
font - family : var ( -- title - font - family ) ;
font - size : var ( -- title - font - size ) ;
font - weight : normal ;
border - bottom : 2 px solid black ;
}
# body {
min - height : 20 px ;
padding : 10 px ;
}
: : slotted ( text ) {
font - family : var ( -- body - font - family ) ;
font - size : var ( -- body - font - size ) ;
}
: : slotted ( code ) {
font - family : monospace ;
}
: : slotted ( a ) {
color : var ( -- color - magenta ) ;
}
< / s t y l e >
< div id = "container" >
< h2 id = "title" > $ { this . label } < / h 2 >
< div id = "body" >
< slot > < / s l o t >
< / d i v >
< / d i v >
` }});customElements.define("tone-loader",class extends i.a{static get properties(){return{loaded:{type:Boolean},progress:{type:Number}}}constructor(){super(),this.progress=0,this.loaded=!1,Tone.Buffer.on("progress",t=>{this.progress=t}),Tone.loaded().then(()=>{this.loaded=!0,setTimeout(()=>{this.remove()},500)})}render(){return i.b `
< style >
# container {
position : fixed ;
top : 0 px ;
left : 0 px ;
bottom : 0 px ;
right : 0 px ;
z - index : 100000 ;
background - color : rgba ( 0 , 0 , 0 , 0.5 ) ;
opacity : 1 ;
transition : opacity 0.3 s ;
}
# container . loaded {
opacity : 0 ;
pointer - events : none ;
}
# loader {
width : 200 px ;
height : 10 px ;
position : absolute ;
top : 50 % ;
left : 50 % ;
transform : translate ( - 50 % , - 50 % ) ;
background - color : white ;
padding : 2 px ;
}
# bar {
background - color : black ;
width : 0 % ;
height : 100 % ;
transition : width 0.1 s ;
}
< / s t y l e >
< div id = "container" class = $ { this . loaded ? "loaded" : "" } >
< div id = "loader"
role = "progressbar"
aria - valuenow = $ { this . progress }
aria - valuemin = "0" aria - valuemax = "100" >
< div id = "bar" style = "width: ${(100*this.progress).toString()}%" > < / d i v >
< / d i v >
< / d i v >
2019-01-10 04:38:07 +00:00
` }});const Z=i.b ` < svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" > < path d = "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" / > < path d = "M0 0h24v24H0z" fill = "none" / > < /svg>`,tt=i.b`<svg xmlns="http:/ / www . w3 . org / 2000 / svg " width=" 24 " height=" 24 " viewBox=" 0 0 24 24 "><path d=" M0 0 h24v24H0z " fill=" none "/><path d=" M3 18 h18v - 2 H3v2zm0 - 5 h18v - 2 H3v2zm0 - 7 v2h18V6H3z "/></svg>`;customElements.define(" tone - side - panel ",class extends i.a{static get properties(){return{collapsed:{type:Boolean}}}constructor(){super(),this.collapsed=!0,this.examples={},this.fetchExamples()}async fetchExamples(){try{const t=await fetch(" . / js / ExampleList . json ");this.examples=await t.json(),this.requestUpdate()}catch(t){console.log(" could not load example list ")}}updated(t){t.has(" collapsed ")&&this.dispatchEvent(new CustomEvent(" collapse " , { detail : this . collapsed , composed : ! 0 } ) ) } render ( ) { const t = 0 === Object . keys ( this . examples ) . length ; return i . b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : inline - block ;
position : relative ;
}
# container {
width : var ( -- side - panel - width ) ;
height : 100 % ;
left : 0 px ;
top : 0 px ;
position : absolute ;
background - color : black ;
transition : width var ( -- side - panel - transition ) , box - shadow var ( -- side - panel - transition ) ;
box - shadow : var ( -- shadow - high ) ;
overflow : auto ;
overflow - x : hidden ;
color : white ;
}
# content {
min - width : 200 px ;
}
h2 , h3 {
background - color : black ;
color : white ;
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
margin : 0 px auto ;
}
h2 {
font - size : var ( -- title - font - size ) ;
margin : 20 px 10 px ;
}
h3 {
width : 90 % ;
padding : 2 px 5 px ;
font - weight : bold ;
border - bottom : 2 px solid white ;
}
ul {
padding : 0 px 5 px 10 px ;
margin : 5 px ;
}
li {
list - style - type : none ;
margin : 0 px ;
padding : 0 px ;
font - family : var ( -- label - font - family ) ;
font - size : var ( -- label - font - size ) ;
}
li a {
color : white ;
text - decoration : none ;
}
# close {
position : absolute ;
right : 5 px ;
top : 12 px ;
background - color : transparent ;
border : none ;
outline - color : var ( -- outline - color ) ;
- webkit - appearance : none ;
transition : right var ( -- side - panel - transition ) ;
}
# close svg {
fill : white ;
}
[ collapsed ] # close {
right : - 48 px ;
}
# container [ collapsed ] {
overflow : visible ;
box - shadow : none ;
}
# loading {
margin - left : 20 px ;
}
< / s t y l e >
< div id = "container" ? collapsed = $ { this . collapsed } >
< button id = "close"
@ click = $ { ( ) => this . collapsed = ! this . collapsed }
2019-01-10 04:38:07 +00:00
aria - label = "close" > $ { this . collapsed ? tt : Z } < / b u t t o n >
2019-01-09 01:21:29 +00:00
< div id = "content" >
$ { this . collapsed ? i . b ` ` : i . b `
< h2 > Examples < / h 2 >
< div id = "loading" > $ { t ? "Loading..." : "" } < / d i v >
$ { Object . entries ( this . examples ) . map ( ( [ t , e ] ) => i . b `
< h3 > $ { t } < / h 3 >
< ul >
$ { Object . entries ( e ) . map ( ( [ t , e ] ) => i . b `
< li > < a href = "${e}.html" > $ { t } < / a > < / l i >
` )}
< / u l >
` )}
` }
< / d i v >
< / d i v >
` }});customElements.define("tone-example",class extends i.a{static get properties(){return{collapsed:{type:Boolean},open:{type:Boolean}}}constructor(){super(),this.collapsed=!0}updated(t){t.has("open")&&(this.collapsed=!this.open)}render(){return i.b `
< style >
: host {
display : inline - block ;
-- top - bar - height : 44 px ;
}
# container {
position : absolute ;
top : 0 px ;
left : 0 px ;
width : 100 % ;
height : 100 % ;
}
# container [ collapsed ] {
-- side - panel - width : 0 px ;
}
# container [ collapsed ] tone - side - panel {
position : absolute ;
}
tone - side - panel {
position : fixed ;
height : 100 % ;
top : 0 px ;
z - index : 2 ;
transition : all var ( -- side - panel - transition ) ;
// top: var(--top-bar-height);
// height: calc(100% - var(--top-bar-height));
}
tone - top - bar {
width : 100 % ;
right : 0 px ;
}
# main {
-- margin : 4 px ;
transition : width var ( -- side - panel - transition ) ;
display : inline - block ;
width : calc ( 100 % - var ( -- side - panel - width ) - var ( -- margin ) * 2 ) ;
right : var ( -- margin ) ;
top : var ( -- margin ) ;
position : absolute ;
}
: : slotted ( tone - drawer ) {
width : calc ( 100 % - var ( -- side - panel - width ) ) ;
transition : width var ( -- side - panel - transition ) ;
right : 0 px ;
left : unset ;
}
@ media only screen and ( max - width : 700 px ) {
# main {
width : calc ( 100 % - var ( -- margin ) * 2 ) ;
}
}
< / s t y l e >
< div id = "container" ? collapsed = $ { this . collapsed } >
< tone - side - panel
? collapsed = $ { this . collapsed }
@ collapse = $ { t => this . collapsed = t . detail }
> < / t o n e - s i d e - p a n e l >
< div id = "main" >
< tone - top - bar > < / t o n e - t o p - b a r >
< slot > < / s l o t >
< / d i v >
< / d i v >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-waveform",class extends i.a{constructor(){super(),this._waveform=function(t){const e=new Array(t),n=new Array(t),i=new Array(t),o=new Array(t),r=[e,i,o,n];for(let n=0;n<t;n++)e[n]=Math.sin(2*Math.PI*n/t);for(let e=0;e<t;e++)i[e]=(e+t/2)%t/t*2-1;for(let e=0;e<t;e++)o[e]=e<t/3?e/(t/3)*2-1:e<2*t/3?2*(1-(e-t/3)/(t/3))-1:(e-2*t/3)/(t/3)*2-1;for(let e=0;e<t;e++){var s=t/16;n[e]=e<s?-1:e<t/2?1:e<t-s?-1:1}return{sawtooth:i,sine:e,triangle:o,square:n,random:r[Math.floor(Math.random()*r.length)]}}(512).random,this._analyser=new Tone.Waveform(512),this._signal=(new Tone.Zero).connect(this._analyser),this._silentThresh=.001,this._rms=0}firstUpdated(){super.firstUpdated(),this._loop()}bind(t){t.connect(this._analyser)}_loop(){requestAnimationFrame(this._loop.bind(this));const t=this.shadowRoot.querySelector("canvas"),e=this.shadowRoot.querySelector("#container"),n=t.getContext("2d");t.width=2*e.clientWidth,t.height=2*e.clientHeight;const i=this._analyser.getValue();this._isSilent(i)?this._drawAnalysis(this._waveform,!0,n):this._drawAnalysis(i,!1,n)}_isSilent(t){let e=0;for(let n=0;n<t.length;n++)e+=Math.pow(t[n],2);const n=Math.sqrt(e/t.length);return this._rms=Math.max(n,.9*this._rms),this._rms<this._silentThresh}_drawAnalysis(t,e,n){const{width:i,height:o}=n.canvas;let r,s=.2*o;e&&(s=Math.scale(this._rms,0,this._silentThresh,.2*o,.5*o)),n.clearRect(0,0,i,o),n.beginPath();for(let e=0,a=t.length;e<a;e++){const l=Math.scale(e,0,a-1,0,i),c=Math.scale(t[e],-1,1,o-s,s);0===e?(r=c,n.moveTo(l,c)):n.lineTo(l,c)}n.lineTo(i,o),n.lineTo(0,o),n.lineTo(0,r),n.lineCap="round",n.fillStyle="#22DBC0",n.fill()}render(){return i.b `
< style >
: host , # container , canvas {
width : 100 % ;
height : 100 % ;
position : absolute ;
top : 0 px ;
left : 0 px ;
}
# container {
background - color : var ( -- color - magenta ) ;
}
< / s t y l e >
< div id = "container" >
< canvas > < / c a n v a s >
< / d i v >
` }});const et=i.b ` < svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" > < path d = "M8 5v14l11-7z" / > < path d = "M0 0h24v24H0z" fill = "none" / > < / s v g > ` ; c u s t o m E l e m e n t s . d e f i n e ( " t o n e - s t a r t - c o n t e x t " , c l a s s e x t e n d s i . a { s t a t i c g e t p r o p e r t i e s ( ) { r e t u r n { r u n n i n g : { t y p e : B o o l e a n } , d i s a b l e d : { t y p e : B o o l e a n } } } c o n s t r u c t o r ( ) { s u p e r ( ) , t h i s . r u n n i n g = ! 1 } f i r s t U p d a t e d ( ) { c o n s t t = s e t I n t e r v a l ( ( ) = > { t h i s . r u n n i n g = " r u n n i n g " = = = T o n e . c o n t e x t . s t a t e , t h i s . r u n n i n g & & c l e a r I n t e r v a l ( t ) } , 1 0 0 ) } a s y n c _ c l i c k e d ( t ) { a w a i t k ( ) , t h i s . r u n n i n g = " r u n n i n g " = = = T o n e . c o n t e x t . s t a t e } r e n d e r ( ) { r e t u r n i . b `
< style >
: host {
display : block ;
position : fixed ;
top : 10 px ;
right : 10 px ;
}
# container {
position : absolute ;
width : 44 px ;
height : 44 px ;
right : 0 px ;
top : 0 px ;
opacity : 1 ;
transition : opacity 0.2 s ;
}
# container [ running ] {
opacity : 0 ;
pointer - events : none ;
}
button {
box - sizing : border - box ;
width : 100 % ;
height : 44 px ;
outline - color : var ( -- outline - color ) ;
border : 2 px solid black ;
border - radius : 22 px ;
padding : 0 px ;
font - size : 30 px ;
text - align : center ;
cursor : pointer ;
transition : box - shadow 0.1 s ;
box - shadow : var ( -- shadow - low ) ;
}
button : hover , button : focus {
box - shadow : var ( -- shadow - medium ) ;
}
button svg {
margin - top : 4 px ;
width : 30 px ;
height : 30 px ;
}
< / s t y l e >
< div id = "container" ? running = $ { this . running } >
< button
@ click = $ { this . _clicked . bind ( this ) }
aria - label = "Start" >
$ { et }
< / b u t t o n >
< / d i v >
` }});customElements.define("tone-demo",class extends i.a{static get properties(){return{autoplay:{type:Boolean}}}firstUpdated(){super.firstUpdated(),this.shadowRoot.querySelector("tone-waveform").bind(Tone.Master)}render(){return i.b `
< style >
: host , # container , tone - waveform {
width : 100 % ;
height : 100 % ;
position : absolute ;
top : 0 px ;
left : 0 px ;
}
tone - waveform {
z - index : 0 ;
}
# content {
position : relative ;
width : 80 % ;
min - width : 200 px ;
max - width : 400 px ;
margin : 40 px auto 0 px ;
z - index : 1 ;
}
tone - unmute {
z - index : 10 ;
}
: : slotted ( tone - trigger ) , : : slotted ( tone - button ) , : : slotted ( tone - play - toggle ) , : : slotted ( tone - slider ) {
width : 100 % ;
display : block ;
margin - bottom : 10 px ;
}
: : slotted ( * ) {
font - family : var ( -- title - font - family ) ;
font - size : var ( -- title - font - size ) ;
}
tone - start - context {
position : fixed ;
top : 10 px ;
right : 10 px ;
}
< / s t y l e >
< div id = "container" >
< tone - waveform > < / t o n e - w a v e f o r m >
$ { this . autoplay ? i . b ` <tone-start-context></tone-start-context> ` : i . b ` ` }
< div id = "content" >
< slot > < / s l o t >
< / d i v >
< / d i v >
` }});customElements.define("tone-fft",class extends i.a{constructor(){super(),this._fft=new Tone.FFT(256)}bind(t){t.connect(this._fft),this._canvas=this.shadowRoot.querySelector("canvas"),this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight,this._context=this._canvas.getContext("2d"),this.loop(),window.addEventListener("resize",()=>{this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight})}loop(){requestAnimationFrame(this.loop.bind(this));const t=this._fft.getValue(),e=this._canvas.width,n=this._canvas.height;this._context.clearRect(0,0,e,n),this._context.fillStyle="white",t.forEach((i,o)=>{const r=Math.scale(o,0,t.length,0,e),s=Math.clamp(Math.scale(i,-100,0,0,n),0,n);this._context.fillRect(r,n/2-s/2,2,s),this._context.fill()})}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : inline - block ;
width : 45 px ;
height : 24 px ;
border - radius : 15 px ;
padding : 4 px ;
box - sizing : border - box ;
background - color : # aaa ;
overflow : hidden ;
}
canvas {
width : 100 % ;
height : 100 % ;
}
< / s t y l e >
< canvas >
waveform of current playing audio
< / c a n v a s >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-loop",class extends i.a{static get properties(){return{color:{type:String}}}constructor(){super(),this.color="#777"}bind(t){this._canvas=this.shadowRoot.querySelector("canvas"),this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight,this._context=this._canvas.getContext("2d"),this.loop(t),window.addEventListener("resize",()=>{this._canvas.width=2*this._canvas.clientWidth,this._canvas.height=2*this._canvas.clientHeight})}loop(t){requestAnimationFrame(this.loop.bind(this,t));const{width:e,height:n}=this._canvas,i=this._context;i.clearRect(0,0,e,n),i.fillStyle="#eee";const o=Math.min(e,n);i.arc(e/2,n/2,o/2,0,2*Math.PI,!1),i.fill();const r=t.progress;i.beginPath(),i.fillStyle=this.color,i.moveTo(e/2,n/2);const s=Math.PI/2;i.arc(e/2,n/2,o/2,-s,r*Math.PI*2-s,!1),i.fill()}render(){return i.b `
2019-01-09 01:21:29 +00:00
< style >
: host {
display : inline - block ;
width : 45 px ;
height : 24 px ;
border - radius : 4 px ;
padding : 4 px ;
box - sizing : border - box ;
overflow : hidden ;
}
# container {
width : 100 % ;
height : 100 % ;
display : inline - block ;
}
canvas {
width : 100 % ;
height : 100 % ;
}
< / s t y l e >
< div id = "container" >
< canvas class = $ { this . level ? "hasLevel" : "" } >
audio meter level
< / c a n v a s >
< / d i v >
2019-01-10 18:48:02 +00:00
` }});class nt extends H{constructor(){super(),this.effect=!0}}customElements.define("tone-effect",nt);customElements.define("tone-chorus",class extends nt{constructor(){super(),this.label="Chorus"}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< tone - slider
label = "Frequency"
attribute = "frequency"
min = "0.1"
max = "4"
units = "hz"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Delay Time"
attribute = "delayTime"
min = "0.1"
exp = "2"
max = "20"
units = "ms"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Spread"
attribute = "spread"
min = "0"
max = "360"
units = "deg"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Depth"
attribute = "depth"
min = "0"
max = "1"
value = "0.5" > < / t o n e - s l i d e r >
< tone - oscillator - type
attribute = "type"
label = "Type"
nocustom
> < / t o n e - o s c i l l a t o r - t y p e >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-chebyshev",class extends nt{constructor(){super(),this.label="Chebyshev"}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< tone - slider
label = "Order"
attribute = "order"
min = "1"
integer
max = "100"
value = "1" > < / t o n e - s l i d e r >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-freeverb",class extends nt{constructor(){super(),this.label="Freeverb"}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< tone - slider
label = "Room Size"
attribute = "roomSize"
min = "0.1"
max = "0.95"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Dampening"
attribute = "dampening"
min = "100"
max = "5000"
exp = "2"
units = "hz"
value = "2000" > < / t o n e - s l i d e r >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-tremolo",class extends nt{constructor(){super(),this.label="Tremolo"}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< tone - slider
label = "Frequency"
attribute = "frequency"
min = "0.1"
max = "20"
units = "hz"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Spread"
attribute = "spread"
min = "0"
max = "360"
units = "deg"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Depth"
attribute = "depth"
min = "0"
max = "1"
value = "0.5" > < / t o n e - s l i d e r >
< tone - oscillator - type
attribute = "type"
label = "Type"
nocustom
> < / t o n e - o s c i l l a t o r - t y p e >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-auto-filter",class extends nt{constructor(){super(),this.label="AutoFilter"}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< tone - slider
label = "Frequency"
attribute = "frequency"
min = "0.1"
max = "20"
units = "hz"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Base Frequency"
attribute = "baseFrequency"
min = "20"
max = "4000"
units = "hz"
value = "200" > < / t o n e - s l i d e r >
< tone - slider
label = "Octaves"
attribute = "octaves"
min = "0.5"
max = "5"
value = "2.5" > < / t o n e - s l i d e r >
< tone - slider
label = "Depth"
attribute = "depth"
min = "0"
max = "1"
value = "0.5" > < / t o n e - s l i d e r >
< tone - oscillator - type
attribute = "type"
label = "Type"
nocustom > < / t o n e - o s c i l l a t o r - t y p e >
< tone - filter
collapsed
component = "filter"
label = "Filter" > < / t o n e - f i l t e r >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-auto-panner",class extends nt{constructor(){super(),this.label="AutoPanner"}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< tone - slider
label = "Frequency"
attribute = "frequency"
min = "0.1"
max = "20"
units = "hz"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
label = "Depth"
attribute = "depth"
min = "0"
max = "1"
value = "0.5" > < / t o n e - s l i d e r >
< tone - oscillator - type
attribute = "type"
label = "Type"
nocustom > < / t o n e - o s c i l l a t o r - t y p e >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-ping-pong-delay",class extends nt{constructor(){super(),this.label="PingPongDelay"}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< tone - slider
label = "Delay Time"
attribute = "delayTime"
min = "0.01"
max = "1"
value = "0.25" > < / t o n e - s l i d e r >
< tone - slider
label = "Feedback"
attribute = "feedback"
min = "0"
max = "0.95"
value = "0.5" > < / t o n e - s l i d e r >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-reverb",class extends nt{static get properties(){return{generating:{type:Boolean}}}constructor(){super(),this.label="Reverb",this.generating=!1}bind(t){super.bind(t),this.generate(t);let e=-1;this.addEventListener("change",()=>{this.generating=!0,clearTimeout(e),e=setTimeout(()=>{this.generate(t)},100)})}async generate(t){this.generating=!0,await t.generate(),this.generating=!1}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
$ { this . generating ? i . b `
< div style = "position: absolute; top: 2px; left: 110px; color: var(--color-dark-gray);"
id = "#generating" > Generating ... < / d i v >
` :i.b ` ` }
< tone - slider
label = "Decay"
attribute = "decay"
min = "0.1"
max = "4"
value = "1" > < / t o n e - s l i d e r >
< tone - slider
2019-01-10 18:48:02 +00:00
label = "Predelay"
2019-01-09 01:21:29 +00:00
attribute = "preDelay"
min = "0.001"
max = "0.1"
value = "0" > < / t o n e - s l i d e r >
2019-01-10 18:48:02 +00:00
` }});customElements.define("tone-distortion",class extends nt{constructor(){super(),this.label="Distortion"}renderAttributes(){return i.b `
2019-01-09 01:21:29 +00:00
< tone - slider
label = "Distortion"
attribute = "distortion"
min = "0"
max = "1"
value = "1" > < / t o n e - s l i d e r >
` }})}]);
