plugin.html

<plugin>

	<div class="mobile-header">This is title for mobile devices</div>

	<div class="plugin-content">

		<h2>Plugin on the left side</h2>

		<p>Use left side window to present larger amount of information. Check the plugin
		in mobile phone display to see effect of 'plugin-mobile-fullscreen' class</p>

		<p>This plugin also demonstrates:</p>

		<p>1) Receiving broadcasted messages. Open your console, to see console.log messages</p>

		<p>2) Using store to programatically change overlay</p>

	</div>
	<script>

	import bcast from '@windy/broadcast'
	import store from '@windy/store'

	let hasHooks = false
	, timer = null

	let overlays = ['rain','wind','temp','clouds']
    , i = 0

    const log = params => console.log('Received "redrawFinished" bcast',params)

	//	this.onopen method is called when your plugin is being opened
	this.onopen = () => {

		if(hasHooks) return

		// Change overlay programatically
		timer = setInterval( ()=> {
           	i = ( i === 3 ? 0 : i + 1 )
           	store.set('overlay', overlays[ i ] )
       	}, 2000)

       	// Observe the change
        bcast.on('redrawFinished', log )

        hasHooks = true

	}

	this.onclose = () => {
		if( hasHooks ) {

			clearInterval( timer )

	        bcast.off('redrawFinished', log )

	        hasHooks = false

		}
	}

	</script>
</plugin>