Moonshine

Map example

About

This example shows how you can use the DOMAPI extension to expose the entire JavaScript DOM to the Lua environment. This enables the codebase to be heavily weighted towards Lua.

Result

Source

<div id="app">
	<p></p>
	<div></div>
</div>
<script src="./moonshine.min.js"></script>
<script src="./DOMAPI.moonshine.js"></script>
new shine.VM(shine.DOMAPI).load('./map.lua.json');
function initUI () 
	ui = {
		app = document:getElementById 'app',
		status = document:querySelector '#app p',
		mapFrame = document:querySelector '#app div'
	}

	applyCSSStyles(ui.app, {
		position = 'relative',
		border = '1px dotted #ccc',
		width = '100%',
		height = '300px',
		textAlign = 'center',
		backgroundColor = '#f7f7f7'
	})

	applyCSSStyles(ui.mapFrame, {
		position = 'absolute',
		top = 0,
		left = 0,
		width = '100%',
		height = '100%',
		opacity = 0,
		transition = 'opacity 1s ease-out'
	})
end




function applyCSSStyles (element, styles)
	local style = element.style

	for name, value in pairs(styles) do
		style[name] = value
	end
end




function updateStatus (status)
	ui.status.textContent = status
end




function requireJS (url, callback) 
	local script = document:createElement 'script'
	script.src = url

	script.onload = function ()
		window.extract()
		if callback then callback() end
	end

	document:querySelector('head'):appendChild(script)
end




function handlePosition (position)
	updateStatus 'Found you!'

	local pos = google.maps.LatLng.new(position.coords.latitude, position.coords.longitude);

	local mapOptions = {
		zoom = 14,
		center = pos,
	}

	local map = google.maps.Map.new(ui.mapFrame, mapOptions)

	local infowindow = google.maps.InfoWindow.new{
		map = map,
		position = pos,
		content = 'You are here.'
	}

	ui.mapFrame.style.opacity = 1
end




function handleError (e)
	updateStatus 'Unable to find you.'
	print(e)
end




function init ()
	updateStatus 'Finding you...'
	navigator.geolocation:getCurrentPosition(handlePosition, handleError)
end




window.extract()

initUI()
updateStatus 'Loading...'

window.initGMap = init
requireJS 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initGMap'