Merge the two occurences of vertical tab in js and xml code

Agreed with and Comments by: elexis
Differential Revision: https://code.wildfiregames.com/D1175
This was SVN commit r20684.
This commit is contained in:
bb
2017-12-25 16:11:41 +00:00
parent 350c4580f8
commit 9ae7c4d810
6 changed files with 143 additions and 144 deletions
@@ -0,0 +1,71 @@
/**
* Number of categories.
*/
var g_TabCategoryCount;
/**
* Index of the currently visible tab, set first tab as default.
*/
var g_TabCategorySelected = 0;
/**
* Function to be executed when selecting a tab. The new category index is passed.
*/
var g_OnSelectTab;
/**
* Create tab buttons.
*
* @param {Array} categoriesData - Arrays of objects containing for every tab a (translated) label and tooltip.
* @param {number} buttonHeight - Vertical distance between the top and bottom of a button.
* @param {number} spacing - Vertical distance between two buttons.
* @param {function} onPress - Function to be executed when a button is pressed, it gets the new category index passed.
* @param {function} onSelect - Function to be executed whenever the selection changes (so also for scrolling), it gets the new category index passed.
*/
function placeTabButtons(categoriesData, buttonHeight, spacing, onPress, onSelect)
{
g_OnSelectTab = onSelect;
g_TabCategoryCount = categoriesData.length;
for (let category in categoriesData)
{
let button = Engine.GetGUIObjectByName("tabButton[" + category + "]");
if (!button)
{
warn("Too few tab-buttons!");
break;
}
button.hidden = false;
let size = button.size;
size.top = category * (buttonHeight + spacing) + spacing / 2;
size.bottom = size.top + buttonHeight;
button.size = size;
button.tooltip = categoriesData[category].tooltip || "";
button.onPress = (category => function() { onPress(category); })(+category);
Engine.GetGUIObjectByName("tabButtonText[" + category + "]").caption = categoriesData[category].label;
}
selectPanel(g_TabCategorySelected);
}
/*
* Show next/previous panel.
* @param direction - +1/-1 for forward/backward.
*/
function selectNextTab(direction)
{
selectPanel((g_TabCategorySelected + direction + g_TabCategoryCount) % g_TabCategoryCount);
}
function selectPanel(category)
{
g_TabCategorySelected = category;
Engine.GetGUIObjectByName("tabButtons").children.forEach((button, j) => {
button.sprite = category == j ? "ModernTabVerticalForeground" : "ModernTabVerticalBackground";
});
g_OnSelectTab(category);
}
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<object>
<object hotkey="tab.next">
<action on="Press">selectNextTab(1);</action>
</object>
<object hotkey="tab.prev">
<action on="Press">selectNextTab(-1);</action>
</object>
<object name="tabButtons" type="image">
<repeat count="20">
<object name="tabButton[n]" type="button" style="ModernTabButtonVertical" size="0 0 100% 30" hidden="true">
<object type="text" name="tabButtonText[n]" style="ModernLabelText" ghost="true"/>
<action on="MouseWheelUp">selectNextTab(1);</action>
<action on="MouseWheelDown">selectNextTab(-1);</action>
</object>
</repeat>
</object>
</object>
@@ -1,58 +1,48 @@
var g_PanelNames = ["special", "programming", "art", "translators", "misc", "donators"];
var g_ButtonNames = {};
var g_PanelTexts = {};
var g_SelectedPanel = 0;
/**
* Order in which the tabs should show up.
*/
var g_OrderTabNames = ["special", "programming", "art", "translators", "misc", "donators"];
/**
* Array of Objects containg all relevant data per tab.
*/
var g_PanelData = [];
/**
* Vertical size of a tab button.
*/
var g_TabButtonHeight = 30;
/**
* Vertical space between two tab buttons.
*/
var g_TabButtonDist = 5;
function init()
{
// Load credits list from the disk and parse them
for (let name of g_PanelNames)
for (let category of g_OrderTabNames)
{
let json = Engine.ReadJSONFile("gui/credits/texts/" + name + ".json");
let json = Engine.ReadJSONFile("gui/credits/texts/" + category + ".json");
if (!json || !json.Content)
{
error("Could not load credits for " + name + "!");
error("Could not load credits for " + category + "!");
continue;
}
g_ButtonNames[name] = json.Title || name;
g_PanelTexts[name] = parseHelper(json.Content);
g_PanelData.push({
"label": json.Title || category,
"content": parseHelper(json.Content)
});
}
placeButtons();
selectPanel(0);
}
/*
* Show next/previous panel.
* @param direction - 1/-1 forward, backward panel.
*/
function selectNextTab(direction)
{
selectPanel((g_SelectedPanel + direction + g_PanelNames.length) % g_PanelNames.length);
}
function placeButtons()
{
for (let i = 0; i < g_PanelNames.length; ++i)
{
let button = Engine.GetGUIObjectByName("creditsPanelButton[" + i + "]");
if (!button)
{
warn("Could not display some credits.");
break;
}
button.onMouseWheelUp = () => selectNextTab(1);
button.onMouseWheelDown = () => selectNextTab(-1);
button.hidden = false;
let size = button.size;
size.top = i * 35;
size.bottom = size.top + 30;
button.size = size;
button.onPress = (i => function() {selectPanel(i);})(i);
let buttonText = Engine.GetGUIObjectByName("creditsPanelButtonText[" + i + "]");
buttonText.caption = translate(g_ButtonNames[g_PanelNames[i]]);
}
placeTabButtons(
g_PanelData,
g_TabButtonHeight,
g_TabButtonDist,
selectPanel,
category => {
Engine.GetGUIObjectByName("creditsText").caption = g_PanelData[category].content;
});
}
// Run through a "Content" list and parse elements for formatting and translation
@@ -92,13 +82,3 @@ function parseHelper(list)
return result;
}
function selectPanel(i)
{
g_SelectedPanel = i;
Engine.GetGUIObjectByName("creditsPanelButtons").children.forEach((button, j) => {
button.sprite = i == j ? "ModernTabVerticalForeground" : "ModernTabVerticalBackground";
});
Engine.GetGUIObjectByName("creditsText").caption = g_PanelTexts[g_PanelNames[i]];
}
@@ -14,32 +14,19 @@
<!-- Add a translucent black background to fade out the menu page -->
<object type="image" z="0" sprite="ModernFade"/>
<object hotkey="tab.next">
<action on="Press">selectNextTab(1);</action>
</object>
<object hotkey="tab.prev">
<action on="Press">selectNextTab(-1);</action>
</object>
<object type="image" style="ModernDialog" size="50%-473 24 50%+473 100%-24">
<object style="ModernLabelText" name="dialogTitle" type="text" size="50%-128 -18 50%+128 14">
<translatableAttribute id="caption">0 A.D. Credits</translatableAttribute>
</object>
<object name="creditsPanelButtons" type="image" size="20 30 210 100%-54">
<repeat count="20">
<object name="creditsPanelButton[n]" type="button" style="ModernTabButtonVertical" size="0 0 190 30" hidden="true">
<object type="text" name="creditsPanelButtonText[n]" style="ModernLabelText" ghost="true">
</object>
</object>
</repeat>
</object>
<object type="image" sprite="ModernFade" size="220 30 100%-20 100%-54">
<object name="creditsText" type="text" style="ModernTextPanel" text_align="center" scroll_top="true"/>
</object>
<object size="20 30 210 100%-54">
<include file="gui/common/tab_buttons.xml"/>
</object>
<!-- Close dialog -->
<object type="button" style="ModernButtonRed" size="100%-200 100%-45 100%-17 100%-17" hotkey="cancel">
<translatableAttribute id="caption">Close</translatableAttribute>
@@ -3,11 +3,6 @@
*/
var g_Options;
/**
* Numerical index of the chosen category.
*/
var g_SelectedCategory;
/**
* Remember whether to unpause running singleplayer games.
*/
@@ -142,75 +137,33 @@ var g_OptionType = {
function init(data, hotloadData)
{
g_HasCallback = hotloadData && hotloadData.callback || data && data.callback;
g_SelectedCategory = hotloadData ? hotloadData.selectedCategory : 0;
g_TabCategorySelected = hotloadData ? hotloadData.tabCategorySelected : 0;
g_Options = Engine.ReadJSONFile("gui/options/options.json");
translateObjectKeys(g_Options, ["label", "tooltip"]);
deepfreeze(g_Options);
placeTabButtons();
displayOptions();
placeTabButtons(
g_Options,
g_TabButtonHeight,
g_TabButtonDist,
selectPanel,
displayOptions);
}
function getHotloadData()
{
return {
"selectedCategory": g_SelectedCategory,
"tabCategorySelected": g_TabCategorySelected,
"callback": g_HasCallback
};
}
/*
* Show next/previous panel.
* @param direction - 1/-1 forward, backward panel.
*/
function selectNextTab(direction)
{
g_SelectedCategory = (g_SelectedCategory + direction + Object.keys(g_Options).length) %
Object.keys(g_Options).length;
displayOptions();
}
function placeTabButtons()
{
for (let category in g_Options)
{
let button = Engine.GetGUIObjectByName("tabButton[" + category + "]");
if (!button)
{
warn("Too few tab-buttons!");
break;
}
button.onMouseWheelUp = () => selectNextTab(1);
button.onMouseWheelDown = () => selectNextTab(-1);
button.hidden = false;
let size = button.size;
size.top = category * (g_TabButtonHeight + g_TabButtonDist);
size.bottom = size.top + g_TabButtonHeight;
button.size = size;
button.tooltip = g_Options[category].tooltip || "";
button.onPress = (category => function() {
g_SelectedCategory = category;
displayOptions();
})(category);
Engine.GetGUIObjectByName("tabButtonText[" + category + "]").caption = g_Options[category].label;
}
}
/**
* Sets up labels and controls of all options of the currently selected category.
*/
function displayOptions()
{
// Highlight the selected tab
Engine.GetGUIObjectByName("tabButtons").children.forEach((button, i) => {
button.sprite = i == g_SelectedCategory ? "ModernTabVerticalForeground" : "ModernTabVerticalBackground";
});
// Hide all controls
for (let body of Engine.GetGUIObjectByName("option_controls").children)
{
@@ -220,7 +173,7 @@ function displayOptions()
}
// Initialize label and control of each option for this category
for (let i = 0; i < g_Options[g_SelectedCategory].options.length; ++i)
for (let i = 0; i < g_Options[g_TabCategorySelected].options.length; ++i)
{
// Position vertically
let body = Engine.GetGUIObjectByName("option_control[" + i + "]");
@@ -231,7 +184,7 @@ function displayOptions()
body.hidden = false;
// Load option data
let option = g_Options[g_SelectedCategory].options[i];
let option = g_Options[g_TabCategorySelected].options[i];
let optionType = g_OptionType[option.type];
let value = optionType.configToValue(Engine.ConfigDB_GetValue("user", option.config));
@@ -286,7 +239,7 @@ function displayOptions()
*/
function enableButtons()
{
g_Options[g_SelectedCategory].options.forEach((option, i) => {
g_Options[g_TabCategorySelected].options.forEach((option, i) => {
let enabled =
!option.dependencies ||
@@ -353,7 +306,7 @@ function saveChanges()
if (value == optionType.sanitizeValue(value, control, option))
continue;
g_SelectedCategory = category;
g_TabCategorySelected = category;
displayOptions();
messageBox(
@@ -8,14 +8,6 @@
<!-- Add a translucent black background to fade out the menu page -->
<object type="image" sprite="ModernFade"/>
<object hotkey="tab.next">
<action on="Press">selectNextTab(1);</action>
</object>
<object hotkey="tab.prev">
<action on="Press">selectNextTab(-1);</action>
</object>
<!-- Settings Window -->
<object name="options" type="image" style="ModernDialog" size="50%-350 50%-330 50%+350 50%+330">
@@ -24,12 +16,8 @@
</object>
<!-- Category Tabs -->
<object name="tabButtons" type="image" sprite="ModernDarkBoxGold" size="15 16 210 100%-52">
<repeat count="15">
<object name="tabButton[n]" type="button" style="ModernTabButtonVertical" size="0 0 195 30" hidden="true">
<object type="text" name="tabButtonText[n]" style="ModernLabelText" ghost="true"/>
</object>
</repeat>
<object size="15 16 210 100%-52">
<include file="gui/common/tab_buttons.xml"/>
</object>
<!-- Option Controls -->