Get Started

To get started you must download and add the luna script file and stylesheet to your document head.


	<head>
		<script src="luna.js"></script>
		<link rel="stylesheet" href="luna.css" />
	</head>

Now you are able to call the Lunajs initializer and create an interface using the following code:


	new Lunajs().init();

Interface Usage

The Luna interface currently supports all the Mission Control buttons, the Component Library, and the Control Panel. To choose an element to edit in the Control Panel, simply click on it to select it.

Initializer Options

Here are all the initializer options you can specify.


	{
		'debug': true || false, // enable debug console output
		'initialContent': HTML String || DOM Element, // initial content in interface
		'targetElement': HTML String || DOM Element, // element to attach Luna interface to
		'useStylesheets': true || false, // copy stylesheets from document
		'removeInitialContent': true || false, // remove initialContent if it's a DOM element
		'showSizeButtons': true || false OR 'hideShowButtons': true || false, // show or hide size buttons
		'showRevisionHistory': true || false OR 'hideRevisionHistory': true || false, // show or hide revision history
		'showExportButton': true || false OR 'hideExportButton': true || false, // show or hide export button
		'disableLaunchpad': true,
		'overwriteIds': { // pass in one of the following keys with a value to overwrite them (showing default value)
			colonyId: 'luna-colony',
			interfaceId: 'luna-interface',
			warningId: 'luna-warning',
			launchpadId: 'luna-launchpad',
			launchpadWarningId: 'luna-launchpad-warning',
			missionControlId: 'luna-mission-control',
			lunaControlsId: 'luna-controls',
			baseId: 'luna-base',
			habitatAreaId: 'luna-habitat-area',
			habitatId: 'luna-habitat',
			habitatInfoId: 'luna-habitat-info',
			controlPanelId: 'luna-control-panel',
			selectedClass: 'luna-selected',
			rocketClass: 'luna-rocket',
			controlPanelShowingClass: 'luna-control-panel-showing',
			launchpadShowingClass: 'luna-launchpad-showing'
		}, // BE CAREFUL AS THIS MESSES WITH STYLING
		'components': [
			{ Component instance }
		]
	}

Stored Data

Here are all the variables stored inside a Lunajs instance.


	{
		'debug': true, // whether to output debug messages to console
		'actions': {
			'actionName': { action object } // actions available in Control Panel
		},
		'controlPanels': {
			'controlPanel': { panel object } // panels available in Control Panel
		},
		'colony': div#luna-colony, // colony DOM element, contains entire editor instance
		'missionControl': {
			'element': div#luna-mission-control, // mission control DOM element, contains buttons and sidebar
			'controlPanel': {
				'element': div#luna-control-panel, // control panel DOM element, is the sidebar that edits properties
				'selectedElement': div // selected element DOM element
			},
			'controls': {
				'element': div#luna-controls, // controls DOM element, contains resize buttons and export button
				'luna-size-control': {
					'element': div#luna-size-control, // DOM element containing resize buttons
				},
				'luna-export-control': {
					'element': div#luna-export-control, // DOM element containing export button
				}
			}
		},
		'launchpad': {
			'element': div#luna-launchpad // DOM element, contains component library
		},
		'habitat': {
			'element': div#luna-habitat // DOM element, contains iframe
		},
		'habitatInfo': {
			'element': div#luna-habitat // DOM element, contains bottom right label
		},
		'lunaWarning': {
			'element': div#luna-warning // DOM element, contains screen width warning
		}
	}

Available Functions

Here are all functions available in a Lunajs instance.


	Lunajs.init(parameters); // initializes and returns Luna instance
	Lunajs.exportToFile(); // exports Habitat contents to HTML fill-rule
	Lunajs.close(); // closes Luna instance and returns Habitat contents
	Lunajs.addComponent(component); // add component to Component Library
	Lunajs.addControl(); // add control to Mission Control
	Lunajs.exportToFile(); // exports Habitat contents to HTML fill-rule
	Lunajs.resetControlPanel(); // resets Control Panel (hiding it)
	Lunajs.resetHabitatSize(); // resets Habitat Size to Fit
	Lunajs.setHabitatSize(label, width, height); // set Habitat Size to width px x height px and update label
	Lunajs.selectElement(); // select element to be edited in Control Panel
	Lunajs.updateState(); // updates Mission Control state

Creating a Component

Here is how to create a Component instance.


	new Component ({
		'name': 'Component name', // name of component
		'innerHTML': 'HTML string' // premade component HTML
	})