license import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import '../node_modules/material-remixer/src/ui/styles/overlay.less' ; import { remixer } from '../node_modules/material-remixer/src/core/Remixer' ; import { Variable } from '../node_modules/material-remixer/src/core/variables/Variable' ; import { ConstraintType , DataType } from '../node_modules/material-remixer/src/lib/Constants' ; import { LocalStorage } from '../node_modules/material-remixer/src/lib/LocalStorage' ; import { OverlayController } from '../node_modules/material-remixer/src/ui/OverlayController' ; import { PageLayout } from './PageLayout' ; /** The globally exposed library MDL exposes as `window['componentHandler']`. */ declare var componentHandler ; /** The globally exposed firebase library. */ declare var firebase ; class class RemoteController { private static return { Remote } private static _sharedInstance = new RemoteController ( ) ; private private remixer : remixer = remixer . attachedInstance ; private type { Variable [ ] private variables : Variable [ ] = [ ] ; private private dbReference : any ; static static start ( ) { const instance = this . _sharedInstance ; const remoteId = location . pathname . split ( '/' ) [ 1 ] ; instance . dbReference = firebase . database ( ) . ref ( `remixer/${ remoteId }` ) ; instance . dbReference . on ( 'value' , ( data ) => { instance . syncData ( data . val ( ) ) ; } ) ; } private param { any } data private syncData ( data ) { this . variables = [ ] ; for ( const key of Object . keys ( data ) ) { const variable = LocalStorage . deserialize ( data [ key ] ) ; if ( variable instanceof Variable ) { this . variables . push ( variable ) ; } } this . redraw ( ) ; } param { Variable } variable param { any } selectedValue private updateVariable = ( variable , selectedValue ) : void => { if ( variable . selectedValue !== selectedValue ) { variable . selectedValue = selectedValue ; this . dbReference . child ( variable . key ) . set ( variable . serialize ( ) ) ; } } ; /** Renders the remote controller to the DOM. */ private redraw ( ) { const overlayWrapper = document . getElementById ( 'remixer-remote' ) ; ReactDOM . render ( < div > < PageLayout > < OverlayController toggleRemoteEnabled = { null } updateVariable = { this . updateVariable } variables = { this . variables } wrapperElement = { overlayWrapper } / > < /PageLayout> < /div>, overlayWrapper); componentHandler . upgradeAllRegistered ( ) ; } } export { RemoteController as remoteController } ;