Make modmod.js a module

Actions in xml files only has access to the global scope, not the module
scope. So define them in the js file.

Refs: #8081

binaries/data/mods/mod/gui/modmod/modmod.js

@@ -19,33 +19,37 @@
  * This allows mods to express upwards and downwards compatibility.
  */
 
+import { downloadModsButton } from "gui/modmod/modmodio.js";
+import { regExpComparisonOperator, validateMod } from "gui/modmod/validatemod.js";
+
 /**
  * Mod definitions loaded from the files, including invalid mods.
  */
-var g_Mods = {};
+let g_Mods = {};
 
 /**
  * Folder names of all mods that are or can be launched.
  */
-var g_ModsEnabled = [];
+let g_ModsEnabled = [];
-var g_ModsDisabled = [];
+let g_ModsDisabled = [];
 
-var g_ModsEnabledFiltered = [];
+let g_ModsEnabledFiltered = [];
-var g_ModsDisabledFiltered = [];
+let g_ModsDisabledFiltered = [];
 
 /**
  * Cache mod compatibility recomputed when some mod is enbaled/disabled.
  */
-var g_ModsCompatibility = [];
+const g_ModsCompatibility = [];
 
 /**
  * Name of the mods installed by the ModInstaller.
  */
-var g_InstalledMods;
+let g_InstalledMods;
 
-var g_HasIncompatibleMods;
+let g_HasIncompatibleMods;
 
-var g_FakeMod = {
+/* eslint-disable prefer-const -- Mods should be able to change them */
+let g_FakeMod = {
 	"name": translate("This mod does not exist"),
 	"version": "",
 	"label": "",
@@ -54,12 +58,34 @@ var g_FakeMod = {
 	"dependencies": []
 };
 
-var g_ColorNoModSelected = "255 255 100";
+let g_ColorNoModSelected = "255 255 100";
-var g_ColorDependenciesMet = "100 255 100";
+let g_ColorDependenciesMet = "100 255 100";
-var g_ColorDependenciesNotMet = "255 100 100";
+let g_ColorDependenciesNotMet = "255 100 100";
+/* eslint-enable prefer-const */
 
-function init(data, hotloadData)
+export function init(data, hotloadData)
 {
+	Object.assign(Engine.GetGUIObjectByName("modsDisabledList"), {
+		"onSelectionChange": selectedMod.bind(undefined, "modsDisabledList"),
+		"onSelectionColumnChange": displayModLists,
+		"onMouseLeftDoubleClickItem": enableMod
+	});
+	Object.assign(Engine.GetGUIObjectByName("modsEnabledList"), {
+		"onSelectionChange": selectedMod.bind(undefined, "modsEnabledList"),
+		"onMouseLeftDoubleClickItem": disableMod
+	});
+
+	Engine.GetGUIObjectByName("enabledModUp").onPress =
+		moveCurrItem.bind(undefined, "modsEnabledList", true);
+	Engine.GetGUIObjectByName("enabledModDown").onPress =
+		moveCurrItem.bind(undefined, "modsEnabledList", false);
+
+	Engine.GetGUIObjectByName("visitWebButton").onPress = visitModWebsite;
+	Engine.GetGUIObjectByName("downloadButton").onPress = downloadModsButton.bind(undefined, initMods);
+	Engine.GetGUIObjectByName("saveConfigurationButton").onPress = saveMods;
+	Engine.GetGUIObjectByName("startButton").onPress = startMods;
+
+
 	g_InstalledMods = data && data.installedMods || hotloadData && hotloadData.installedMods || [];
 	g_HasIncompatibleMods = Engine.HasIncompatibleMods();
 
@@ -354,7 +380,7 @@ function recomputeCompatibility(disabledAction = false)
  */
 function isDependencyMet(dependency)
 {
-	const operator = dependency.match(g_RegExpComparisonOperator);
+	const operator = dependency.match(regExpComparisonOperator);
 	const [name, version] = operator ? dependency.split(operator[0]) : [dependency, undefined];
 
 	return g_ModsEnabled.some(folder =>
@@ -403,7 +429,7 @@ function sortEnabledMods()
 {
 	const dependencies = {};
 	for (const folder of g_ModsEnabled)
-		dependencies[folder] = getMod(folder).dependencies.map(d => d.split(g_RegExpComparisonOperator)[0]);
+		dependencies[folder] = getMod(folder).dependencies.map(d => d.split(regExpComparisonOperator)[0]);
 
 	g_ModsEnabled.sort((folder1, folder2) =>
 		dependencies[folder1].indexOf(getMod(folder2).name) != -1 ? 1 :

binaries/data/mods/mod/gui/modmod/modmod.xml

@@ -3,7 +3,7 @@
 <objects>
 
 	<script directory="gui/common/"/>
-	<script directory="gui/modmod/"/>
+	<script module="gui/modmod/modmod.js"/>
 
 	<object type="image" style="ModernWindow">
 
@@ -80,10 +80,6 @@
 				font="sans-stroke-13"
 				auto_scroll="true"
 			>
-				<action on="SelectionChange">selectedMod(this.name);</action>
-				<action on="SelectionColumnChange">displayModLists();</action>
-				<action on="MouseLeftDoubleClickItem">enableMod();</action>
-
 				<!-- List headers -->
 				<!-- Keep the column names in sync with the property names of mods -->
 				<column id="name" textcolor="255 255 255" width="10%">
@@ -123,9 +119,6 @@
 				tooltip_style="pgToolTip"
 				auto_scroll="true"
 			>
-				<action on="SelectionChange">selectedMod(this.name);</action>
-				<action on="MouseLeftDoubleClickItem">disableMod();</action>
-
 				<!-- List headers -->
 				<column id="name" textcolor="255 255 255" width="10%">
 					<translatableAttribute id="heading">Name</translatableAttribute>
@@ -159,7 +152,6 @@
 				sprite_disabled="ModernArrowUpGrey"
 			>
 				<translatableAttribute id="tooltip">Change the order in which mods are launched. This should match the mods dependencies.</translatableAttribute>
-				<action on="Press">moveCurrItem("modsEnabledList", true);</action>
 			</object>
 			<object
 				name="enabledModDown"
@@ -173,7 +165,6 @@
 				sprite_disabled="ModernArrowDownGrey"
 			>
 				<translatableAttribute id="tooltip">Change the order in which mods are launched. This should match the mods dependencies.</translatableAttribute>
-				<action on="Press">moveCurrItem("modsEnabledList", false);</action>
 			</object>
 		</object>
 
@@ -181,7 +172,6 @@
 		<object name="toggleModButton" type="button" style="ModernButtonRed" size="16 100%-80 196 100%-52" enabled="false"/>
 		<object name="visitWebButton" type="button" style="ModernButtonRed" size="200 100%-80 380 100%-52" enabled="false">
 			<translatableAttribute id="caption">Visit Website</translatableAttribute>
-			<action on="Press">visitModWebsite();</action>
 		</object>
 
 		<!-- Message -->
@@ -198,22 +188,19 @@
 
 		<object type="button" style="ModernButtonRed" size="100%-748 100%-44 100%-568 100%-16">
 			<translatableAttribute id="caption">Help</translatableAttribute>
-			<action on="Press">Engine.OpenChildPage("page_modhelp.xml");</action>
+		  <action on="Press">Engine.OpenChildPage("page_modhelp.xml");</action>
 		</object>
 
-		<object type="button" style="ModernButtonRed" size="100%-564 100%-44 100%-384 100%-16">
+		<object name="downloadButton" type="button" style="ModernButtonRed" size="100%-564 100%-44 100%-384 100%-16">
 			<translatableAttribute id="caption">Download Mods</translatableAttribute>
-			<action on="Press">downloadModsButton();</action>
 		</object>
 
 		<object name="saveConfigurationButton" type="button" style="ModernButtonRed" size="100%-380 100%-44 100%-200 100%-16">
 			<translatableAttribute id="caption">Save Configuration</translatableAttribute>
-			<action on="Press">saveMods();</action>
 		</object>
 
 		<object name="startButton" type="button" style="ModernButtonRed" size="100%-196 100%-44 100%-16 100%-16">
 			<translatableAttribute id="caption">Save and Restart</translatableAttribute>
-			<action on="Press">startMods();</action>
 		</object>
 	</object>
 </objects>

binaries/data/mods/mod/gui/modmod/modmodio.js

@@ -1,4 +1,4 @@
-function downloadModsButton()
+export function downloadModsButton(initMods)
 {
 	initTerms({
 		"Disclaimer": {
@@ -6,7 +6,7 @@ function downloadModsButton()
 			"file": "gui/modio/Disclaimer.txt",
 			"config": "modio.disclaimer",
 			"accepted": false,
-			"callback": openModIo,
+			"callback": openModIo.bind(undefined, initMods),
 			"urlButtons": [
 				{
 					"caption": translate("mod.io Terms"),
@@ -23,7 +23,7 @@ function downloadModsButton()
 	openTerms("Disclaimer");
 }
 
-async function openModIo(data)
+async function openModIo(initMods, data)
 {
 	if (!data.accepted)
 		return;

binaries/data/mods/mod/gui/modmod/validatemod.js

@@ -48,12 +48,12 @@ const g_RegExpVersion= /[0-9]+(\.[0-9]+){0,2}/;
 /**
  * Version checks in mod dependencies can use these operators.
  */
-const g_RegExpComparisonOperator = /(<=|>=|<|>|=)/;
+export const regExpComparisonOperator = /(<=|>=|<|>|=)/;
 
 /**
  * Tests if a dependency compares a mod version against another, for instance "0ad<=0.0.16".
  */
-const g_RegExpComparison = globalRegExp(new RegExp(g_RegExpName.source + g_RegExpComparisonOperator.source + g_RegExpVersion.source));
+const g_RegExpComparison = globalRegExp(new RegExp(g_RegExpName.source + regExpComparisonOperator.source + g_RegExpVersion.source));
 
 /**
  * The label may not be empty.
@@ -69,7 +69,7 @@ function globalRegExp(regexp)
  * Returns whether the mod defines all required properties and whether all properties are valid.
  * Shows a notification if not.
  */
-function validateMod(folder, modData, notify)
+export function validateMod(folder, modData, notify)
 {
 	let valid = true;