/// <summary>
/// Renders the menu and its settings.
/// </summary>
/// <param name="parent"></param>
public void Render(Element parent)
{
// The menu's button in the toolbar and also the root element.
var menu = (HTMLAnchorElement)window.document.createElement("A");
menu.href = "#";
menu.className = "menu " + _className;
// The menu popup element
_popup = (HTMLAnchorElement)window.document.createElement("A");
_popup.href = "#";
_popup.className = "popup";
// Shows the menu name as a title
var title = (HTMLDivElement)window.document.createElement("H1");
title.innerHTML = _name;
_popup.appendChild(title);
if ((dynamic)_settings && (dynamic)_settings.length)
{
// Renders all of the menu settings
foreach (var setting in _settings)
{
// Attach the changed event to the settings controls
setting.changed += settingChanged;
setting.render(_popup);
}
_popup.appendChild(window.document.createElement("BR"));
// Button to apply the setting changes.
var applyButton = (HTMLAnchorElement)window.document.createElement("A");
applyButton.innerHTML = "Apply";
applyButton.className = "button ok";
_popup.appendChild(applyButton);
// Handling the mousedown event to ensure the click is captured on all browsers.
applyButton.addEventListener("mousedown", (e) =>
{
// Deselect menu to hide it
menu.className = menu.className.replace(" selected", "");
// Save the changes.
persistSettings();
}, false);
// Button to exit the menu and discard changes
var cancelButton = (HTMLAnchorElement)window.document.createElement("A");
cancelButton.innerHTML = "Cancel";
cancelButton.className = "button cancel";
_popup.appendChild(cancelButton);
// Handling the mousedown event to ensure the click is captured on all browsers.
cancelButton.addEventListener("mousedown", (e) =>
{
menu.className = menu.className.replace(" selected", "");
}, false);
}
else
{
// Just in case a developer creates a menu with no settings
_popup.appendChild(window.document.createTextNode("No settings available."));
}
// Prevents the # from being appended to the URL
menu.addEventListener("click", (e) => { e.preventDefault(); }, false);
// Certain browsers will trigger the blur event unless we capture and dispose of the mousedown event
menu.addEventListener("mousedown", (e) =>
{
// Make sure nothing catches the event as this could close the menu.
e.preventDefault();
// If the mouse event target occured inside the menu, then
if (contains(menu, (Element)e.target)) return;
// Check if the menu is open or closed
if (menu.className.indexOf("selected") < 0)
{
// If closed, set the setting controls from the game settings object
loadSettings();
// Showing the menu by setting the 'selected' CSS class
menu.className += " selected";
}
else
{
// Hiding the menu by removing the 'selected' CSS class
menu.className = menu.className.replace(" selected", "");
}
// Set the focus because when the popup is blurred, ir needs to close.
_popup.focus();
}, false);
// Catching the popup's blur event, this lets us close the popup no matter what gets clicked
_popup.addEventListener("blur", (e) =>
{
menu.className = menu.className.replace(" selected", "");
e.preventDefault();
}, false);
menu.appendChild(_popup);
parent.appendChild(menu);
// Forcing the settings to load in order to save the default values, then persist them in local storage
loadSettings();
persistSettings();
}
