VulpesOS/assets/webapps/gallery.gaiamobile.org/shared/js/shrinking_ui.js

;'use strict';(function(exports){var ShrinkingUI=function(foregroundElement,backgroundElement){this.elements.foregroundElement=foregroundElement;this.elements.backgroundElement=backgroundElement;};ShrinkingUI.prototype={DEBUG:false,THRESHOLD:50,SUSPEND_INTERVAL:100,state:{shrinking:false,ending:false,tilting:false,overThreshold:false,toward:'TOP',touch:{initY:-1,prevY:-1},slideTransitionCb:null,tiltTransitionCb:null},elements:{},configs:{degreeLandscape:'2.7deg',degreePortrait:'0.65deg',overDegreeLandscape:'2.9deg',overDegreePortrait:'0.9deg'},tip:null,cover:null};ShrinkingUI.prototype.debug=function su_debug(msg,optObject){if(this.DEBUG){var output='[DEBUG] ShrinkingUI: '+msg;if(optObject){output+=JSON.stringify(optObject);}
dump(output);}};ShrinkingUI.prototype.start=function su_start(){window.addEventListener('shrinking-receiving',this);this.startTilt();};ShrinkingUI.prototype.stop=function su_stop(){if(this.isActive()){this.stopTilt();}
window.removeEventListener('shrinking-receiving',this);};ShrinkingUI.prototype.handleEvent=function su_handleEvent(evt){switch(evt.type){case'shrinking-receiving':this._receivingEffects();break;case'touchstart':this._handleSendingStart(evt);break;case'touchmove':this._handleSendingSlide(evt);break;case'touchend':this._handleSendingOut(evt);break;}};ShrinkingUI.prototype.respondToHierarchyEvent=function su_respondToHierarchyEvent(evt){if(this['_handle_'+evt.type]){return this['_handle_'+evt.type](evt);}
return true;};ShrinkingUI.prototype._handle_holdhome=function su__handle_holdhome(evt){return this.isActive();};ShrinkingUI.prototype._handle_home=function su__handle_home(evt){return this.isActive();};ShrinkingUI.prototype.startTilt=function su_startTilt(){if(this.isActive()){return;}
if(!this.elements.backgroundElement||!this.elements.foregroundElement){return;}
this.state.shrinking=true;this.state.tilting=true;var afterTilt=()=>{this.elements.foregroundElement.classList.add('hidden');this.state.tilting=false;};this._setTip();this._setState(true);screen.mozLockOrientation(screen.mozOrientation);this._shrinkingTilt(afterTilt);};ShrinkingUI.prototype._setTip=function su_setTip(){var backgroundElement=this.elements.backgroundElement;if(!this.tip){this.tip=this._slidingTip();backgroundElement.appendChild(this.tip);}
this.tip.classList.remove('hide');};ShrinkingUI.prototype.stopTilt=function su_stopTilt(){if(!this.state.shrinking||this.state.ending){return;}
if(this.state.tilting){this.state.tilting=false;}
this.state.shrinking=false;this.state.ending=true;var afterTiltBack=(()=>{this.elements.foregroundElement.classList.remove('hidden');this._cleanEffects().then(()=>{this.state.ending=false;});});this.tip.remove();this.tip=null;this._shrinkingTiltBack(true,afterTiltBack);};ShrinkingUI.prototype.isActive=function su_isActive(){if(this.state.shrinking||this.state.tilting||this.state.ending){return true;}
return false;};ShrinkingUI.prototype._setState=function su_shrinking(state){var foregroundElement=this.elements.foregroundElement;foregroundElement.setAttribute('data-shrinking-state',state.toString());this.debug('Setting shrink state to: '+state);};ShrinkingUI.prototype._updateSlideTransition=function su_updateSlideTransition(cb){if(this.tip&&this.state.slideTransitionCb){this.elements.foregroundElement.style.transitionDuration='0s';this.tip.removeEventListener('transitionend',this.state.slideTransitionCb);}
this.state.slideTransitionCb=cb;};ShrinkingUI.prototype._updateTiltTransition=function su_updateTiltTransition(cb){var foregroundElement=this.elements.foregroundElement;if(foregroundElement&&this.state.tiltTransitionCb){foregroundElement.removeEventListener('transitionend',this.state.tiltTransitionCb);}
this.state.tiltTransitionCb=cb;};ShrinkingUI.prototype._receivingEffects=function su_receivingEffects(){var foregroundElement=this.elements.foregroundElement;foregroundElement.style.opacity='0';var afterTop=(function(){foregroundElement.style.opacity='';foregroundElement.style.transition='transform 0.5s ease';this._sendingSlideTo('BOTTOM',(function doTiltBack(){this._shrinkingTiltBack(false,this._cleanEffects);}).bind(this));}).bind(this);var afterTilt=(function(){foregroundElement.style.transition='transform 0.05s ease';this._sendingSlideTo('TOP',afterTop);}).bind(this);this._shrinkingTilt(afterTilt);};ShrinkingUI.prototype._sendingSlideTo=function su_sendingSlideTo(y,callback){var foregroundElement=this.elements.foregroundElement;var cbDone=(function on_cbDone(evt){foregroundElement.removeEventListener('transitionend',cbDone);this.elements.foregroundElement.style.transitionDuration='0s';if('undefined'!==typeof callback){callback();}}).bind(this);if('TOP'===y){foregroundElement.style.transitionDuration='0.3s';y=foregroundElement.parentElement.clientHeight;}else if('BOTTOM'===y){if(this.state.touch.prevY<=0){cbDone();}else{foregroundElement.style.transitionDuration='0.3s';}
y=0;}else if(y<0){y=0;}
foregroundElement.addEventListener('transitionend',cbDone);this._updateTiltTransition(cbDone);foregroundElement.style.transform='rotateX('+this._getTiltingDegree()+') '+'translateY(-'+y+'px)';};ShrinkingUI.prototype._slidingCover=function slidingCover(){var cover=document.createElement('div');cover.id='shrinking-cover';cover.style.width='100%';cover.style.height='100%';cover.style.position='relative';cover.style.zIndex='2';cover.addEventListener('touchstart',this);cover.addEventListener('touchmove',this);cover.addEventListener('touchend',this);return cover;};ShrinkingUI.prototype._slidingTip=function slidingTip(){var tip=document.createElement('div');var tipArrow=document.createElement('div');var tipText=document.createElement('div');tip.id='shrinking-tip';tipArrow.id='shrinking-tip-arrow';tipText.id='shrinking-text';tipArrow.textContent='\u00A0';tipText.setAttribute('data-l10n-id','shrinking-tip');tip.appendChild(tipText);tip.appendChild(tipArrow);return tip;};ShrinkingUI.prototype._disableSlidingCover=function su_disableSlidingCover(){this.cover.removeEventListener('touchstart',this);this.cover.removeEventListener('touchmove',this);this.cover.removeEventListener('touchend',this);};ShrinkingUI.prototype._shrinkingTilt=function su_shrinkingTilt(cb){var foregroundElement=this.elements.foregroundElement;var backgroundElement=this.elements.backgroundElement;if(null===this.cover){this.cover=this._slidingCover();var anchor=foregroundElement.firstElementChild;foregroundElement.insertBefore(this.cover,anchor);}
backgroundElement.classList.add('shrinking-wrapper');foregroundElement.style.transition='transform 0.5s ease';var bounceBack=(function on_bounceBack(evt){if(evt.target!==foregroundElement){return;}
foregroundElement.removeEventListener('transitionend',bounceBack);foregroundElement.addEventListener('transitionend',bounceBackEnd);this._updateTiltTransition(bounceBackEnd);foregroundElement.style.transition='transform ease';foregroundElement.style.transform='rotateX('+this._getTiltingDegree()+') ';}).bind(this);var bounceBackEnd=(function on_bounceBackEnd(evt){if(evt.target!==foregroundElement){return;}
foregroundElement.removeEventListener('transitionend',bounceBackEnd);foregroundElement.style.transition='transform 0.5s ease 0s';if(cb){cb();}}).bind(this);foregroundElement.addEventListener('transitionend',bounceBack);this._updateTiltTransition(bounceBack);foregroundElement.style.transformOrigin='50% 100% 0';foregroundElement.style.transform='rotateX('+this._getOverTiltingDegree()+')';};ShrinkingUI.prototype._shrinkingTiltBack=function su_shrinkingTiltBack(instant,callback){var foregroundElement=this.elements.foregroundElement;if(!instant){var tsEnd=(function _tsEnd(evt){foregroundElement.removeEventListener('transitionend',tsEnd);if(callback){callback();}}).bind(this);foregroundElement.style.transition='transform 0.3s ease';foregroundElement.addEventListener('transitionend',tsEnd);this._updateTiltTransition(tsEnd);foregroundElement.style.transform='rotateX(0.0deg)';}else{foregroundElement.style.transition='';foregroundElement.style.transform='rotateX(0.0deg)';if(callback){callback();}}};ShrinkingUI.prototype._handleSendingStart=function su_handleSendingStart(evt){this.state.touch.initY=evt.touches[0].pageY;this.debug('_handleSendingStart(): ',this.isActive());evt.stopImmediatePropagation();var tsEnd=(function _tsEnd(){this.tip.removeEventListener('transitionend',tsEnd);}).bind(this);this.tip.classList.add('hide');this.tip.addEventListener('transitionend',tsEnd);this._updateSlideTransition(tsEnd);return false;};ShrinkingUI.prototype._handleSendingSlide=function su_handleSendingSlide(evt){var pgy=evt.touches[0].pageY;var slideY=this.state.touch.initY-pgy;if('undefined'===typeof this.state.touch.initY){this.state.touch.initY=slideY;}
if('undefined'===typeof this.state.touch.prevY){this.state.touch.prevY=slideY;}
this.state.toward=(this.state.touch.prevY<slideY)?'TOP':'BOTTOM';this._sendingSlideTo(slideY);this.state.touch.prevY=slideY;this.state.overThreshold=(slideY>this.THRESHOLD)?true:false;};ShrinkingUI.prototype._handleSendingOut=function su_handleSendingOut(evt){this.debug('_handleSendingOut(): ',this.isActive());if(this.state.overThreshold&&'TOP'===this.state.toward){this._sendingSlideTo('TOP',(function(){this._disableSlidingCover();window.dispatchEvent(new CustomEvent('shrinking-sent'));}).bind(this));}else{this._sendingSlideTo('BOTTOM',(function resumeSending(){this._setTip();}).bind(this));}};ShrinkingUI.prototype._cleanEffects=function su_cleanEffects(){var foregroundElement=this.elements.foregroundElement;var backgroundElement=this.elements.backgroundElement;return new Promise((resolve,rejected)=>{this.debug('_cleanEffects(): ',this.isActive());this._disableSlidingCover();foregroundElement.style.transition='';foregroundElement.style.transform='';foregroundElement.style.transformOrigin='50% 50% 0';this._setState(false);this._updateTiltTransition(null);this._updateSlideTransition(null);backgroundElement.classList.remove('shrinking-wrapper');this.cover.remove();this.cover=null;resolve();});};ShrinkingUI.prototype._getTiltingDegree=function su_getTiltingDegree(){return(window.OrientationManager?window.OrientationManager.fetchCurrentOrientation().indexOf('landscape')!==-1:window.innerHeight<window.innerWidth)?this.configs.degreeLandscape:this.configs.degreePortrait;};ShrinkingUI.prototype._getOverTiltingDegree=function su_getOverTiltingDegree(){return(window.OrientationManager?window.OrientationManager.fetchCurrentOrientation().indexOf('landscape')!==-1:window.innerHeight<window.innerWidth)?this.configs.overDegreeLandscape:this.configs.overDegreePortrait;};exports.ShrinkingUI=ShrinkingUI;})(window);