From 14f2ed64ac1de115d5ce81a6cf4bbbe13616306e Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@gmail.com>
Date: Tue, 3 Mar 2020 23:17:01 +0100
Subject: [PATCH] emulate untabbed by links instead of buttons
---
src/003-assets/CSS/tabs.css | 8 ++-
src/js/slaveListing.js | 107 +++++++++++++++--------------------
src/js/utilsSC.js | 32 +++++++----
src/uncategorized/options.tw | 13 ++---
4 files changed, 79 insertions(+), 81 deletions(-)
diff --git a/src/003-assets/CSS/tabs.css b/src/003-assets/CSS/tabs.css
index fd8adaf4b1e..52d47677153 100644
--- a/src/003-assets/CSS/tabs.css
+++ b/src/003-assets/CSS/tabs.css
@@ -23,7 +23,13 @@ div.tab button.active {
color: #c7cedf;
}
-.tabcontent {
+div.tab a.active {
+ color: white;
+ pointer-events: none;
+ cursor: default;
+}
+
+.tabcontent:not(.noFade) {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 0.3s;
diff --git a/src/js/slaveListing.js b/src/js/slaveListing.js
index d8abe61cd5b..ae9311d8ca2 100644
--- a/src/js/slaveListing.js
+++ b/src/js/slaveListing.js
@@ -380,7 +380,7 @@ App.UI.SlaveList.render = function() {
* <<print 'pass/count/indexed/flag::[' + passageName + '/' + _Count + '/' + _indexed + '/' + $SlaveSummaryFiler + ']'>>
*/
- if (indices.length > 1 && passageName === "Main" && V.useSlaveSummaryTabs === 0) {
+ if (indices.length > 1 && passageName === "Main") {// TODO && V.useSlaveSummaryTabs === 0) {
const _buttons = [];
let _offset = -50;
if (/Select/i.test(passageName)) {
@@ -792,7 +792,6 @@ App.UI.SlaveList.stdFacilityPage = function(facility, showTransfersPage) {
App.UI.SlaveList.penthousePage = function() {
const ph = App.Entity.facilities.penthouse;
- const listElementId = 'summarylist'; // for the untabbed mode only
function overviewTabContent() {
const fragment = document.createDocumentFragment();
@@ -905,34 +904,6 @@ App.UI.SlaveList.penthousePage = function() {
};
}
- /**
- * Displays job filter links, whose action are generated by the callback
- * @param {assignmentFilterGenerateCallback} callback
- * @returns {string}
- */
- function _jobFilter(callback) {
- const jd = App.Data.Facilities.penthouse.jobs;
- let links = [];
- links.push(`<<link "All">>${callback('all')}<</link>>`);
- // seems like SC2 does not process data-setter when data-passage is not set
- for (const jn in jd) {
- links.push(`<<link "${capFirstChar(jd[jn].position)}">>${callback(jn)}<</link>>`);
- }
-
- return links.join(' | ');
- }
-
- function _updateList(job) {
- State.temporary.mainPageUpdate.job = job;
- const e = document.getElementById(listElementId);
- e.innerHTML = '';
- const employeesIndices = job === 'all' ? ph.employeesIndices() : ph.job(job).employeesIndices();
- if (employeesIndices.length === 0) {
- return;
- }
- SlaveSort.indices(employeesIndices);
- e.appendChild(App.UI.SlaveList.render.listDOM(employeesIndices, [], App.UI.SlaveList.SlaveInteract.penthouseInteract));
- }
/**
* @typedef tabDesc
@@ -1004,6 +975,13 @@ App.UI.SlaveList.penthousePage = function() {
return span;
}
+ function allTab(caption) {
+ const penthouseSlavesIndices = ph.employeesIndices();
+ SlaveSort.indices(penthouseSlavesIndices);
+ return makeTabDesc('all', caption,
+ App.UI.SlaveList.render.listDOM(penthouseSlavesIndices, [], App.UI.SlaveList.SlaveInteract.penthouseInteract));
+ }
+
let fragment = document.createDocumentFragment();
if (V.positionMainLinks >= 0) {
@@ -1014,48 +992,53 @@ App.UI.SlaveList.penthousePage = function() {
fragment.append(this.sortingLinksDOM("Main"));
}
- if (V.useSlaveSummaryTabs) {
- /** @type {tabDesc[]} */
- let tabs = [];
+ /** @type {tabDesc[]} */
+ let tabs = [];
- // Overview tab
- if (V.useSlaveSummaryOverviewTab) {
- tabs.push(makeTabDesc('overview', 'Overview', overviewTabContent()));
- }
+ // Overview tab
+ if (V.useSlaveSummaryOverviewTab) {
+ tabs.push(makeTabDesc('overview', 'Overview', overviewTabContent()));
+ }
- // tabs for each assignment
- for (const jn of ph.jobsNames) {
- const slaves = _slavesForJob(jn);
- if (slaves.n > 0) {
- tabs.push(makeTabDesc(jn, `${ph.desc.jobs[jn].position} (${slaves.n})`, App.UI.DOM.combineNodes(encycTips(jn), slaves.dom)));
- }
- }
+ if (V.useSlaveSummaryTabs === 0) {
+ tabs.push(allTab("All"));
+ }
- // now generate the "All" tab
- const penthouseSlavesIndices = ph.employeesIndices();
- SlaveSort.indices(penthouseSlavesIndices);
- tabs.push(makeTabDesc('all', `All (${penthouseSlavesIndices.length})`,
- this.render.listDOM(penthouseSlavesIndices, [], App.UI.SlaveList.SlaveInteract.penthouseInteract)));
+ // tabs for each assignment
+ for (const jn of ph.jobsNames) {
+ const slaves = _slavesForJob(jn);
+ if (slaves.n > 0) {
+ tabs.push(makeTabDesc(jn, `${ph.desc.jobs[jn].position}${V.useSlaveSummaryTabs === 1 ? ` (${slaves.n})` : ""}`, App.UI.DOM.combineNodes(encycTips(jn), slaves.dom)));
+ } else if (V.useSlaveSummaryTabs === 0) {
+ tabs.push(makeTabDesc(jn, ph.desc.jobs[jn].position, encycTips(jn)));
+ }
+ }
+ if (V.useSlaveSummaryTabs === 1) {
+ tabs.push(allTab(`All (${penthouseSlavesIndices.length})`));
+ }
- const div = document.createElement("div");
- div.classList.add("tab");
+ const div = document.createElement("div");
+ div.classList.add("tab");
+ if (V.useSlaveSummaryTabs === 0) {
+ const links = [];
for (const tab of tabs) {
- div.append(App.UI.tabbar.tabButtonDOM(tab.tabName, tab.caption));
+ links.push(App.UI.tabbar.tabButtonDOM(tab.tabName, tab.caption, true));
}
- fragment.append(div);
-
+ div.append(App.UI.DOM.arrayToList(links, " | ", " | "));
+ } else {
for (const tab of tabs) {
- fragment.append(App.UI.tabbar.makeTabDOM(tab.tabName, tab.content));
+ div.append(App.UI.tabbar.tabButtonDOM(tab.tabName, tab.caption));
}
- } else {
- State.temporary.mainPageUpdate = {
- job: State.temporary.mainPageUpdate ? State.temporary.mainPageUpdate.job : 'all',
- update: _updateList
- };
+ }
+ fragment.append(div);
- $(document).one(':passagedisplay', () => { _updateList(State.temporary.mainPageUpdate.job); });
- r += `<div>${_jobFilter(s => `<<run _mainPageUpdate.update("${s}")>>`)} <div id=${listElementId}></div></div>`;
+ for (const tab of tabs) {
+ const div = App.UI.tabbar.makeTabDOM(tab.tabName, tab.content);
+ if (V.useSlaveSummaryTabs === 0) {
+ div.classList.add("noFade");
+ }
+ fragment.append(div);
}
if (V.positionMainLinks <= 0) {
diff --git a/src/js/utilsSC.js b/src/js/utilsSC.js
index c1e16fca96d..5e1e5008faf 100644
--- a/src/js/utilsSC.js
+++ b/src/js/utilsSC.js
@@ -181,17 +181,29 @@ App.UI.tabbar = function() {
/**
* @param {string} name
* @param {string} text
- * @returns {HTMLButtonElement}
+ * @param {boolean} [plainLink]
+ * @returns {HTMLButtonElement|HTMLAnchorElement}
*/
- function tabButtonDOM(name, text) {
- const button = document.createElement("button");
- button.classList.add("tablinks");
- button.id = `tab ${name}`;
- button.textContent = text;
- button.addEventListener('click', event => {
- openTab(event, name);
- });
- return button;
+ function tabButtonDOM(name, text, plainLink = false) {
+ if (plainLink) {
+ const link = document.createElement("a");
+ link.classList.add("tablinks", "pure");
+ link.id = `tab ${name}`;
+ link.textContent = text;
+ link.addEventListener('click', event => {
+ openTab(event, name);
+ });
+ return link;
+ } else {
+ const button = document.createElement("button");
+ button.classList.add("tablinks");
+ button.id = `tab ${name}`;
+ button.textContent = text;
+ button.addEventListener('click', event => {
+ openTab(event, name);
+ });
+ return button;
+ }
}
/**
diff --git a/src/uncategorized/options.tw b/src/uncategorized/options.tw
index d23f707e2f7..e384aea6987 100644
--- a/src/uncategorized/options.tw
+++ b/src/uncategorized/options.tw
@@ -231,14 +231,11 @@ This save was created using FC version $ver build $releaseID.
<<option 0 "Disabled">>
<</options>>
- <<if $useSlaveSummaryTabs > 0>>
- <br>
- <<options $useSlaveSummaryOverviewTab>>
- Condense special slaves into an overview tab
- <<option 1 "Enabled">>
- <<option 0 "Disabled">>
- <</options>>
- <</if>>
+ <<options $useSlaveSummaryOverviewTab>>
+ Condense special slaves into an overview tab
+ <<option 1 "Enabled">>
+ <<option 0 "Disabled">>
+ <</options>>
<div class="subHeading">
''Sidebar''
--
GitLab