From d79fa0068561ac77702931f7109f0e6db5068ea0 Mon Sep 17 00:00:00 2001 From: Ramiro Saenz Date: Mon, 26 Sep 2016 16:07:53 -0300 Subject: [PATCH] New Loading Screen --- app.json | 5 +- index.html | 10 +- .../resources/fonts/icomoon/icomoon.eot | Bin 0 -> 3676 bytes .../resources/fonts/icomoon/icomoon.svg | 21 ++ .../resources/fonts/icomoon/icomoon.ttf | Bin 0 -> 3512 bytes .../resources/fonts/icomoon/icomoon.woff | Bin 0 -> 3588 bytes .../sass/etc/_loadscreen.scss | 229 +++++++++++++++ .../rambox-default-theme/sass/etc/all.scss | 1 + resources/js/loadscreen.js | 263 ++++++++++++++++++ 9 files changed, 527 insertions(+), 2 deletions(-) create mode 100644 packages/local/rambox-default-theme/resources/fonts/icomoon/icomoon.eot create mode 100644 packages/local/rambox-default-theme/resources/fonts/icomoon/icomoon.svg create mode 100644 packages/local/rambox-default-theme/resources/fonts/icomoon/icomoon.ttf create mode 100644 packages/local/rambox-default-theme/resources/fonts/icomoon/icomoon.woff create mode 100644 packages/local/rambox-default-theme/sass/etc/_loadscreen.scss create mode 100644 resources/js/loadscreen.js diff --git a/app.json b/app.json index 8fac74ac..abef42a1 100644 --- a/app.json +++ b/app.json @@ -113,7 +113,10 @@ { "path": "resources/js/GALocalStorage.js" }, - { + { + "path": "resources/js/loadscreen.js" + }, + { "path": "env.js" }, { diff --git a/index.html b/index.html index 22c60550..f315b2d1 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,14 @@ -
+
+
+
diff --git a/packages/local/rambox-default-theme/resources/fonts/icomoon/icomoon.eot b/packages/local/rambox-default-theme/resources/fonts/icomoon/icomoon.eot new file mode 100644 index 0000000000000000000000000000000000000000..0d9f71a5c789b89b1aba4f230d3e42173986ca00 GIT binary patch literal 3676 zcmaJETWlN0argEfJU+$8krGW(N1jMZqD=82K4eoeEnAXh%aSbD65y94TdGXgl59yv z>?A zPqAbeS@L#gW@l#SW@l#ij+zm=YeEPk25oK_UBi^pKeU-nd8_Thr;g7apF_xu3g{%7 zLo@Kqp;=%sqhU0KrqOwH22G%Opg7S8Q0CDB@KPQb#ZeT+RNlv>fk+oLpdunDHh8c# zVX+Cn1noPFiT*K@$+0sQspiG{N;)&PDNM&0z83txSCWqA_t5<=qAsi}!c z{Xbnl2ZdRfPoDyU@N4o1z^PorshP#41VVj)zYKWp%-qQd;|u0@00$l<&rB?x1@nIf z_d@}9S)#!>In5&LNTo9giFC@^7Q+67 z(s~R9T@T$uiPi4$=*joYp|o0JGc+}JT77ef3#9%yj>{V#yAhi z%11!16zR_Ntd+S*LZf49#Ym1`*ScX78Ungrg% z^F~phZSXemyuh(~j^zl!gz@Tx8jd##yj>?Yv~r9;I}md=m|cxl+jgCfVTe&rA`RJ~ zW9Z7=!mdl(Dxde(*AG2^uaG=(6MsF^3)zn9QzV7}5kNi z^1+UpHbj)>ZaXn!a5uy}xSaua2GdS~L8srnIy7|k-P79m(pR`zTd{-J>y3nM`MQMN z_}|t#o|HE5sJxY1l|@M}j^#L=!Ei0i*Xe(ubGm7gtN9CgnMb{Vz#hV;K_7*MX^cBv zQ4+518f+6}9#B-H!mxuHK$5D_p%jR+$kQSFW5)Vj4W6N`k^Sv{!t8uzc06pdB%ABv z(!?H<$D+6E9bfBCe`~L)&ZzVs7-@O&;~N9GJ|!`KFBG&N(>^D#A6`{#&{+M!3i_8htLHo@G5FBC!sPqdC7xaP8!?sSUQt-f`=x=a%PreFky+9@T6s4 zcRXm&3E0943}N{6Hd~8GT-&{A9i#;|7*dg5Pg6L|c;UhTp$Ihqen>=CsBd)$*#)a# zN@kMSN(4nnL6s4bR)xSbK8{hb2$iL{yj(0X#Ruc#rSWl6T3(flMJzMps}G<8G5O*e z#8ve)QuV8K---62QMgi|U;=yx#RSTH!YM(;gaQx#!+=-;gL>bAT|C_bVC=-&F~uqWY*}_fDnqJ8U++gr(le%7d!T z<6TvaP=|TggI|Go%rH#lG9)Nw2%MlWRL*0FH-h!}+i;R%%(8a7E#>#`k8B-_ zyP{5zFn~~fx6)o{Y>L>eDi@(#ZGkG6)GTRS@}8i|WwTX6m!6XAGXCjQ)}`DymTKO0 zDAG9G6$#b0g69)C`P{J`^&Lk$$ZK$Xe?v3jHY`LnRi0B#!`}oP7ROSHGd>1|${%R6 z+3hSxXRX#qQ)8h$*dwdP6AV_wk3V8!8OCmJX>2;Rt)W-`<7BM1z7X?T6*1&G+#1^* zu{(kZZ=Gi}?DM$=w__q1-W{ix+6^_I-s6zn>bJsKo+3$CCJBjHk@G+8yL`EilpX@M zdiTQ*@t%hdK~B44edhS|!k8uZUu1x!g7&As6<&WdYBvVBE7Nt<26F116SUC=y{1V; zX=ka*Pk!a&OebcB)>5&8C^&)x){R969mziOvOx)xxcA34eu4X|$q45oE z-6|E)Iy1~xZNf+ZS`~)d92(bP0&rS`S%A-LFb7`}k_PiY->1QP + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/local/rambox-default-theme/resources/fonts/icomoon/icomoon.ttf b/packages/local/rambox-default-theme/resources/fonts/icomoon/icomoon.ttf new file mode 100644 index 0000000000000000000000000000000000000000..fc7e5642b6d27a6a827835e09a1ba329d5c5beaa GIT binary patch literal 3512 zcmaJES!`R!arf;z_;`xPBPE)o9{EI45@m{qc*v$?TCy%5l5E!!;7g({Ri5g=%Q#z4`uWm}*>EfCbAI{Wxk z%Yl&<-|o!p%)gN5TA%s1EzcEu- zJP%_X;CEou&78aVSUHcJ=*NKni{f*I+36d5#s4B?tb;W!pPye`0z09Z zuG4u$$cOkv#397oU_JoKH)|vQJ4#}a@@;7tR6N@92vy!E<&84R6Zl|~`eL)mDnM7G zp9kh@BT>0Lhy|ZfdL7V>K$9!aR9>jORQXorTIG7>+m&}JzpT8!vA(eZTxiSetDl?2 z8-J3XmY$H7r6p-mT9D336VjkG09vaJod?jg!Qh!zq^##VO7o2!%7QjLVFbjDr`# z84s4MOy$wSir8 zXai2PdK(WxpT{N4;E&g8jJJx#TNvj7S^F5s)e=3G{*5wO1KTC!MM1DTU}hwTk4Z}1 zB-IgR6yo5Ol#)tv+Q^{eH&^IXUV>eg&tEf3USuWE~jSbCL%2pp)VS!XfdMB2Y0Pn>~L9uFnBdZTUG~0|Yu&(Dj(_cDN zqbQ*O7!3@P!wGUOABJCzhcb|2)8S*MlEu5vj|KvR*pzuHU%Y!|)Dg;5mpf+zt885%5@a^i?~M=O#<)Xd84S$HhG(PUf@_g$8v;V!gzH;9mg95-mVjy z+BwFb9gaDh%&umuZKqDhFvO@Qk)~|WF?!`rvG?g6)z1bR8%LkNTTGrhc6i<8^NKC6 z*CiHn<2M$2>KdayU*GBUli{ zM0@)%PqycFIrJu0z=SAHXMkk|7Rt!~^TCcy3nM`>KT9_@CAWo|L!nsJzvi)g?(UPUJY9!SG_3Z_xi# z=XBE~SMwM0GLHrTfir|dgFXri(-?QUq9j~9H8>{7JfNsXh2aD>fFxC;Ln#ntk*7=c z$Bd1=O`g&1kprE6!t8!(ZZd4LBwHKeQen{KvFPo3$5;B&&+Roe7?u48$J$={uccr2YsJ3$};RM0~M+R1O`Ax*FB)f3ws?wG^QV~(}7p6?3eq8`Gs zb<+lpWu0}60fPlII>F9y2GP9TE7?UiG4Zlub#fdlo|ReFEvF1^t!`|MY^HH7bJvsD zZ0i;H9cGp%b-R>_v7DLZ7))3qCOm1G*PRR+bON@p0z()+y~EZf64y>|S_f%?4Te-? zz|#^AGhP#dy9Mepfj=Z7E7Z3JgzSRVFC{ZcY$bvsq@c#x$y6;5$&^S7cP%r_$gJJ?@KH-$0 zVnTrj|6xF^fI+?Q!Y-bk0WfysaIH*q(6dlWh!BV55W?1ubkc9{2ti$es7xl(K_F}@ z#4$(6Xg7I#bT%9>Kh&9uHYXD``p-adO9Lq@XMk$vfyAdo$q*UE1W#wLPZpU>Mg z(f$bsny5ai*u7h+{u-N2FJoz7s(Qbs^JGs=Bh+CY&fw?Zqn`m}hF6IXJ&E2y2nRw+ zD;BVWmms>rTn=X-2VEGDbRrq1bee_TP>{7MOQRKBM60&b6$YjnUd!K(bjk(tS_xJo z7D_z07?yFhVx@-Ev~htD+%(`#mm{B|6%`FkTRpla-t0Pe3l3FE= zOCAiWTsB)Z^z;*QL&iUo%DR;6CsM7wM6Ctovul-2oFAZ0CL(J>pzZvT%54v{*4TfRM39^ z=i(a=NA1M`Z)LiU+CWZybAmS7pw~31DD5n@nHo;TC=Or0HWF>zq(3sMQhMZoc)f() zMSsQL#}(!fQz35hHoMB+Q&+Q~AJX`SwrQ1$Xq_2mYc^pd0IdeYYYt6nFabEN!7RYb z8qC3e5|Re4nAO{G1$*#?Tm=Mhj>W7+?bQ#8DK*9xL@&;-Tr8 z<#UAvSacc;T}J0n0WCb1vwwbWNuHUWn_eg^O;5?EF3Llv=MR8wQPi)ly#%YzfSNhg dq5@iiaSCXs&_(En)D0Y{Z2)Yf@4zo?{{vVWYzzPZ literal 0 HcmV?d00001 diff --git a/packages/local/rambox-default-theme/resources/fonts/icomoon/icomoon.woff b/packages/local/rambox-default-theme/resources/fonts/icomoon/icomoon.woff new file mode 100644 index 0000000000000000000000000000000000000000..5b3c470a9080301998d7bbadbeaca8c4ce1abae0 GIT binary patch literal 3588 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 A%>V!Z literal 0 HcmV?d00001 diff --git a/packages/local/rambox-default-theme/sass/etc/_loadscreen.scss b/packages/local/rambox-default-theme/sass/etc/_loadscreen.scss new file mode 100644 index 00000000..dddb9092 --- /dev/null +++ b/packages/local/rambox-default-theme/sass/etc/_loadscreen.scss @@ -0,0 +1,229 @@ +/* Main component wrapper */ +body { + overflow: hidden; +} +.component { + position: absolute;; + z-index: 1; + width: 200px; + height: 200px; + margin: -100px 0 0 -100px; + top: 50%; + left: 50%; +} + + +/* Actual buttons (laid over shapes) */ + +.button { + font-weight: bold; + position: absolute; + bottom: 4px; + top: 50%; + left: 50%; + width: 200px; + height: 200px; + margin: -100px 0 0 -100px; + padding: 0; + text-align: center; + color: #00a7e7; + border: none; + background: none; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.button:hover, +.button:focus { + outline: none; + color: #048abd; +} + +.button--listen { + pointer-events: none; +} + +.button--close { + z-index: 10; + top: 0px; + right: 0px; + left: auto; + width: 40px; + height: 40px; + padding: 10px; + color: #fff; +} + +.button--close:hover, +.button--close:focus { + color: #ddd; +} + +.button--hidden { + pointer-events: none; + opacity: 0; +} + + +/* Inner content of the start/*/ + +.button__content { + position: absolute; + opacity: 0; + -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; + transition: transform 0.4s, opacity 0.4s; +} + +.button__content--listen { + font-size: 1.75em; + line-height: 64px; + bottom: 0; + left: 50%; + width: 60px; + height: 60px; + margin: 0 0 0 -30px; + border-radius: 50%; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + -webkit-transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1); + transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1); +} + +.button__content--listen::before, +.button__content--listen::after { + content: ''; + position: absolute; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + opacity: 0; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 50%; +} + +.button--animate .button__content--listen::before, +.button--animate .button__content--listen::after { + -webkit-animation: anim-ripple 1.2s ease-out infinite forwards; + animation: anim-ripple 1.2s ease-out infinite forwards; +} + +.button--animate .button__content--listen::after { + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; +} + +@-webkit-keyframes anim-ripple { + 0% { + opacity: 0; + -webkit-transform: scale3d(3, 3, 1); + transform: scale3d(3, 3, 1); + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes anim-ripple { + 0% { + opacity: 0; + -webkit-transform: scale3d(3, 3, 1); + transform: scale3d(3, 3, 1); + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.notes { + position: absolute; + z-index: -1; + bottom: 0; + left: 50%; + width: 200px; + height: 100px; + margin: 0 0 0 -100px; +} + +.note { + font-size: 2.8em; + position: absolute; + left: 50%; + width: 1em; + margin: 0 0 0 -0.5em; + opacity: 0; + color: rgba(255, 255, 255, 0.75); +} + +.note:nth-child(odd) { + color: rgba(0, 0, 0, 0.1); +} + +.note:nth-child(4n) { + font-size: 2em; +} + +.note:nth-child(6n) { + color: rgba(255, 255, 255, 0.3); +} + +/* ICONS */ +@font-face { + font-family: 'icomoon'; + src:url('../resources/fonts/icomoon/icomoon.eot?4djz1y'); + src:url('../resources/fonts/icomoon/icomoon.eot?4djz1y#iefix') format('embedded-opentype'), + url('../resources/fonts/icomoon/icomoon.ttf?4djz1y') format('truetype'), + url('../resources/fonts/icomoon/icomoon.woff?4djz1y') format('woff'), + url('../resources/fonts/icomoon/icomoon.svg?4djz1y#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +.icon { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + + +.icon--microphone:before { + content: "\ea95"; +} +.icon--cross:before { + content: "\e90c"; +} +.icon--note1:before { + content: "\ea83"; +} +.icon--note2:before { + content: "\eaad"; +} +.icon--note3:before { + content: "\eac5"; +} +.icon--note4:before { + content: "\ea93"; +} +.icon--note5:before { + content: "\ea95"; +} +.icon--note6:before { + content: "\ea96"; +} diff --git a/packages/local/rambox-default-theme/sass/etc/all.scss b/packages/local/rambox-default-theme/sass/etc/all.scss index 851e7101..1eda5991 100644 --- a/packages/local/rambox-default-theme/sass/etc/all.scss +++ b/packages/local/rambox-default-theme/sass/etc/all.scss @@ -1,6 +1,7 @@ @import url(../resources/fonts/font-awesome/css/font-awesome.min.css); @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700,600); @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,700italic,700,500italic,500,400italic); +@import 'loadscreen'; $base-color: #2E658E; $font-family: 'Roboto', sans-serif; diff --git a/resources/js/loadscreen.js b/resources/js/loadscreen.js new file mode 100644 index 00000000..049d2675 --- /dev/null +++ b/resources/js/loadscreen.js @@ -0,0 +1,263 @@ +/*! modernizr 3.2.0 (Custom Build) | MIT * + * http://modernizr.com/download/?-csstransitions-prefixedcss !*/ +!function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,i,s,a;for(var f in C)if(C.hasOwnProperty(f)){if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;td;d++)if(v=e[d],h=N.style[v],f(v,"-")&&(v=a(v)),N.style[v]!==t){if(i||r(o,"undefined"))return s(),"pfx"==n?v:!0;try{N.style[v]=o}catch(g){}if(N.style[v]!=h)return s(),"pfx"==n?v:!0}return s(),!1}function h(e,n,t,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(s+" ")+s).split(" ");return r(n,"string")||r(n,"undefined")?v(a,n,o,i):(a=(e+" "+P.join(s+" ")+s).split(" "),p(a,n,t))}function y(e,n,r){return h(e,t,t,n,r)}var g=[],C=[],x={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=x,Modernizr=new Modernizr;var _=n.documentElement,w="svg"===_.nodeName.toLowerCase(),S="Moz O ms Webkit",b=x._config.usePrefixes?S.split(" "):[];x._cssomPrefixes=b;var E=function(n){var r,o=prefixes.length,i=e.CSSRule;if("undefined"==typeof i)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i)return"@"+n;for(var s=0;o>s;s++){var a=prefixes[s],f=a.toUpperCase()+"_"+r;if(f in i)return"@-"+a.toLowerCase()+"-"+n}return!1};x.atRule=E;var P=x._config.usePrefixes?S.toLowerCase().split(" "):[];x._domPrefixes=P;var z={elem:l("modernizr")};Modernizr._q.push(function(){delete z.elem});var N={style:z.elem.style};Modernizr._q.unshift(function(){delete N.style}),x.testAllProps=h;var T=x.prefixed=function(e,n,t){return 0===e.indexOf("@")?E(e):(-1!=e.indexOf("-")&&(e=a(e)),n?h(e,n,t):h(e,"pfx"))};x.prefixedCSS=function(e){var n=T(e);return n&&s(n)};x.testAllProps=y,Modernizr.addTest("csstransitions",y("transition","all",!0)),o(),i(g),delete x.addTest,delete x.addAsyncTest;for(var j=0;j t1) return curveY(t1); + + // Fallback to the bisection method for reliability. + while (t0 < t1){ + x2 = curveX(t2); + if (Math.abs(x2 - x) < epsilon) return curveY(t2); + if (x > x2) t0 = t2; + else t1 = t2; + t2 = (t1 - t0) * .5 + t0; + } + // Failure + return curveY(t2); + }; + }, + getRandomNumber = function(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + }, + throttle = function(fn, delay) { + var allowSample = true; + + return function(e) { + if (allowSample) { + allowSample = false; + setTimeout(function() { allowSample = true; }, delay); + fn(e); + } + }; + }, + // from https://davidwalsh.name/vendor-prefix + prefix = (function () { + var styles = window.getComputedStyle(document.documentElement, ''), + pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']))[1], + dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1]; + + return { + dom: dom, + lowercase: pre, + css: '-' + pre + '-', + js: pre[0].toUpperCase() + pre.substr(1) + }; + })(); + + var support = {transitions : Modernizr.csstransitions}, + transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, + transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], + onEndTransition = function( el, callback, propTest ) { + var onEndCallbackFn = function( ev ) { + if( support.transitions ) { + if( ev.target != this || propTest && ev.propertyName !== propTest && ev.propertyName !== prefix.css + propTest ) return; + this.removeEventListener( transEndEventName, onEndCallbackFn ); + } + if( callback && typeof callback === 'function' ) { callback.call(this); } + }; + if( support.transitions ) { + el.addEventListener( transEndEventName, onEndCallbackFn ); + } + else { + onEndCallbackFn(); + } + }, + // the main component element/wrapper + shzEl = document.querySelector('.component'), + // the initial button + shzCtrl = shzEl.querySelector('div.button--start'), + // total number of notes/symbols moving towards the listen button + totalNotes = 50, + // the notes elements + notes, + // the note´s speed factor relative to the distance from the note element to the button. + // if notesSpeedFactor = 1, then the speed equals the distance (in ms) + notesSpeedFactor = 4.5, + // window sizes + winsize = {width: window.innerWidth, height: window.innerHeight}, + // button offset + shzCtrlOffset = shzCtrl.getBoundingClientRect(), + // button sizes + shzCtrlSize = {width: shzCtrl.offsetWidth, height: shzCtrl.offsetHeight}, + // tells us if the listening animation is taking place + isListening = false, + // audio player element + playerEl = shzEl.querySelector('.player'); + // close player control + //playerCloseCtrl = playerEl.querySelector('.button--close'); + + function init() { + // create the music notes elements - the musical symbols that will animate/move towards the listen button + createNotes(); + // star animation + listen(); + } + + /** + * creates [totalNotes] note elements (the musical symbols that will animate/move towards the listen button) + */ + function createNotes() { + var notesEl = document.createElement('div'), notesElContent = ''; + notesEl.className = 'notes'; + for(var i = 0; i < totalNotes; ++i) { + // we have 6 different types of symbols (icon--note1, icon--note2 ... icon--note6) + var j = (i + 1) - 6 * Math.floor(i/6); + notesElContent += '
'; + } + notesEl.innerHTML = notesElContent; + shzEl.insertBefore(notesEl, shzEl.firstChild) + + // reference to the notes elements + notes = [].slice.call(notesEl.querySelectorAll('.note')); + } + + /** + * transform the initial button into a circle shaped one that "listens" to the current song.. + */ + function listen() { + isListening = true; + + showNotes(); + } + + /** + * stop the ripples and notes animations + */ + function stopListening() { + isListening = false; + // music notes animation stops... + hideNotes(); + } + + /** + * show the notes elements: first set a random position and then animate them towards the button + */ + function showNotes() { + notes.forEach(function(note) { + // first position the notes randomly on the page + positionNote(note); + // now, animate the notes torwards the button + animateNote(note); + }); + } + + /** + * fade out the notes elements + */ + function hideNotes() { + notes.forEach(function(note) { + note.style.opacity = 0; + }); + } + + /** + * positions a note/symbol randomly on the page. The area is restricted to be somewhere outside of the viewport. + * @param {Element Node} note - the note element + */ + function positionNote(note) { + // we want to position the notes randomly (translation and rotation) outside of the viewport + var x = getRandomNumber(-2*(shzCtrlOffset.left + shzCtrlSize.width/2), 2*(winsize.width - (shzCtrlOffset.left + shzCtrlSize.width/2))), y, + rotation = getRandomNumber(-30, 30); + + if( x > -1*(shzCtrlOffset.top + shzCtrlSize.height/2) && x < shzCtrlOffset.top + shzCtrlSize.height/2 ) { + y = getRandomNumber(0,1) > 0 ? getRandomNumber(-2*(shzCtrlOffset.top + shzCtrlSize.height/2), -1*(shzCtrlOffset.top + shzCtrlSize.height/2)) : getRandomNumber(winsize.height - (shzCtrlOffset.top + shzCtrlSize.height/2), winsize.height + winsize.height - (shzCtrlOffset.top + shzCtrlSize.height/2)); + } + else { + y = getRandomNumber(-2*(shzCtrlOffset.top + shzCtrlSize.height/2), winsize.height + winsize.height - (shzCtrlOffset.top + shzCtrlSize.height/2)); + } + + // first reset transition if any + note.style.WebkitTransition = note.style.transition = 'none'; + + // apply the random transforms + note.style.WebkitTransform = note.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0) rotate3d(0,0,1,' + rotation + 'deg)'; + + // save the translation values for later + note.setAttribute('data-tx', Math.abs(x)); + note.setAttribute('data-ty', Math.abs(y)); + } + + /** + * animates a note torwards the button. Once that's done, it repositions the note and animates it again until the component is no longer listening. + * @param {Element Node} note - the note element + */ + function animateNote(note) { + setTimeout(function() { + if(!isListening) return; + // the transition speed of each note will be proportional to the its distance to the button + // speed = notesSpeedFactor * distance + var noteSpeed = notesSpeedFactor * Math.sqrt(Math.pow(note.getAttribute('data-tx'),2) + Math.pow(note.getAttribute('data-ty'),2)); + + // apply the transition + note.style.WebkitTransition = '-webkit-transform ' + noteSpeed + 'ms ease, opacity 0.8s'; + note.style.transition = 'transform ' + noteSpeed + 'ms ease-in, opacity 0.8s'; + + // now apply the transform (reset the transform so the note moves to its original position) and fade in the note + note.style.WebkitTransform = note.style.transform = 'translate3d(0,0,0)'; + note.style.opacity = 1; + + // after the animation is finished, + var onEndTransitionCallback = function() { + // reset transitions and styles + note.style.WebkitTransition = note.style.transition = 'none'; + note.style.opacity = 0; + + if(!isListening) return; + + positionNote(note); + animateNote(note); + }; + + onEndTransition(note, onEndTransitionCallback, 'transform'); + }, 60); + } + + init(); + +})(window);