From f1467a9546b5e02e212ce47e06820520866c52fc Mon Sep 17 00:00:00 2001
From: inducedNCS <kidkinster@gmail.com>
Date: Sat, 12 May 2018 15:53:54 -0600
Subject: [PATCH] inducedncs-QL-devtr-color click button sort
A lot of background work was needed to make this happen. Had to pass
the devotion and trust as data-foo attributes to the buttons so we can
build a sort based on the values. So updated the hTag macro to work
better (correctly).
- modified: src/js/hTagMacroJS.tw
Added new CSS file to include our old/modified css and our new css in:
- new file: src/gui/css/quickListCSS.tw
Added new JS file to include our quick list specific functions in:
- new file: src/js/quickListJS.tw
Updated JS file to hold some more globally useful JS functions:
- modified: src/js/utilJS.tw
Needed to set up a means to hold the classes for coloration for both
types of coloration, the devotion theming and the trust theming; Used a
wrapper div that either holds a Devotion or Trust class, then when we
toggle that class we can fall into the trust or devotion pallet.
In the process, built a JS function to encapsulate the Name building
that's currently in the twine/sugarcube, rewritten as javascript for
simplicity, speed and portability.
Built a one use global variable to hold either devotion sort or trust
sort, and instantly defaulted to devotion, so not needing a backwards
compatibility update.
- modified: src/uncategorized/slaveSummary.tw
---
src/gui/css/quickListCSS.tw | 79 +++++++++++++++++++++++++
src/js/hTagMacroJS.tw | 44 ++++++++------
src/js/quickListJS.tw | 54 +++++++++++++++++
src/js/utilJS.tw | 75 +++++++++++++++++++++++-
src/uncategorized/slaveSummary.tw | 96 +++++++++++--------------------
5 files changed, 266 insertions(+), 82 deletions(-)
create mode 100644 src/gui/css/quickListCSS.tw
create mode 100644 src/js/quickListJS.tw
diff --git a/src/gui/css/quickListCSS.tw b/src/gui/css/quickListCSS.tw
new file mode 100644
index 00000000000..c9abfac2f18
--- /dev/null
+++ b/src/gui/css/quickListCSS.tw
@@ -0,0 +1,79 @@
+:: Quick List stylesheet [stylesheet]
+
+.hidden
+{
+ display:none;
+}
+
+div.quicklist.devotion button.mindbroken
+{
+ background-color:red;
+}
+div.quicklist.devotion button.very-hateful
+{
+ background-color:darkviolet;
+}
+div.quicklist.devotion button.hateful
+{
+ background-color:darkviolet;
+}
+div.quicklist.devotion button.resistant
+{
+ background-color:mediumorchid;
+}
+div.quicklist.devotion button.ambivelent
+{ background-color:yellow; }
+div.quicklist.devotion button.accepting
+{ background-color:hotpink; }
+div.quicklist.devotion button.devoted
+{ background-color:deeppink; }
+div.quicklist.devotion button.worshipful
+{ background-color:magenta; }
+div.quicklist.trust button.mindbroken
+{ }
+div.quicklist.trust button.extremely-terrified
+{ background-color:darkgoldenrod; }
+div.quicklist.trust button.terrified
+{
+ background-color:goldenrod; }
+div.quicklist.trust button.frightened
+{
+ background-color:gold; }
+div.quicklist.trust button.fearful
+{
+ background-color:yellow; }
+div.quicklist.trust button.hate-careful
+{
+ background-color:orange; }
+div.quicklist.trust button.careful
+{
+ background-color:mediumaquamarine; }
+div.quicklist.trust button.bold
+{
+ background-color:orangered; }
+div.quicklist.trust button.trusting
+{
+ background-color:mediumseagreen; }
+div.quicklist.trust button.defiant
+{
+ background-color:darkred; }
+div.quicklist.trust button.profoundly-trusting
+{
+ background-color:seagreen; }
+div.quicklist
+{
+ table-layout: fixed;
+ text-align: center;
+ border-collapse: separate;
+ border-spacing: 2px;
+ border-style: hidden;
+ empty-cells: hide;
+ width: 70%;
+}
+div.quicklist button
+{
+ margin-top: 15px;
+ margin-right: 20px;
+ white-space: nowrap;
+}
+
diff --git a/src/js/hTagMacroJS.tw b/src/js/hTagMacroJS.tw
index 9e8c566b7eb..db8d845a8e0 100644
--- a/src/js/hTagMacroJS.tw
+++ b/src/js/hTagMacroJS.tw
@@ -14,29 +14,39 @@
* Usage: <<htag atributes>>...<</htag>>
* Usage: <<htag atributes tag>>...<</htag>>
*/
-Macro.add('htag', {
- tags : null,
-
- munge(val, key) { return key + '="' + val + '"'; },
- handler() {
+Macro
+ .add(
+ 'htag',
+ { tags : null
+ , handler()
+ {
const payload = this.payload[0].contents.replace(/(^\n+|\n+$)/, '');
let htag = 'div';
let attributes;
+
+ var munge = function (val, key)
+ {
+ return key + '="' + val + '"';
+ };
- if (1 > this.args.length) {
- return this.error('invalid syntax, format: <<htag [id [ tag ] | attributes [ tag ] >>');
+ if (1 > this.args.length)
+ {
+ return
+ this.error(
+ 'invalid syntax, format: <<htag [id [ tag ] | attributes [ tag ] >>'
+ );
}
- if (1 < this.args.length) {
- htag = String(this.args[1]).trim();
+ if (1 < this.args.length)
+ {
+ htag = String(this.args[1]).trim();
+ }
+ if ("object" === typeof this.args[0])
+ {
+ attributes = $.map(this.args[0], munge).join(" ");
}
- if (typeof this.args[0] === "object") {
- attributes = //$.map(this.args[0], munge).join(" ");
- $.map(
- this.args[0],
- function (val, key) { return key + '="' + val + '"'; })
- .join(" ");
- } else {
- attributes = 'id="' + String(this.args[0]).trim() + '"';
+ else
+ {
+ attributes = 'id="' + String(this.args[0]).trim() + '"';
}
Config.debug && this.debugView.modes({block: true});
diff --git a/src/js/quickListJS.tw b/src/js/quickListJS.tw
new file mode 100644
index 00000000000..fc0c7f7ee9d
--- /dev/null
+++ b/src/js/quickListJS.tw
@@ -0,0 +1,54 @@
+:: Quick List [script]
+
+window.sortDomObjects = function (objects, attrName)
+{
+ var sortingByAttr = function (a, b)
+ {
+ var aVal = parseInt(a.getAttribute(attrName))
+ , bVal = parseInt(b.getAttribute(attrName))
+ ;
+ return bVal - aVal;
+ };
+ return objects.toArray().sort(sortingByAttr);
+};
+
+window.sortButtonsByDevotion = function ()
+{
+ var $sortedButtons = $('#qlWrapper button').remove();
+
+ $sortedButtons = sortDomObjects($sortedButtons, 'data-devotion');
+
+ $($sortedButtons).appendTo($('#qlWrapper'));
+ quickListBuildLinks();
+};
+
+window.sortButtonsByTrust = function ()
+{
+ var $sortedButtons = $('#qlWrapper button').remove();
+
+ $sortedButtons = sortDomObjects($sortedButtons, 'data-trust');
+
+ $($sortedButtons).appendTo($('#qlWrapper'));
+ quickListBuildLinks();
+};
+
+window.quickListBuildLinks = function ()
+{
+ $("[data-scroll-to]").click(function() {
+ var $this = $(this), $toElement = $this.attr('data-scroll-to'),
+ /*
+ * note the * 1 enforces $offset to be an integer, without
+ * it we scroll to True, which goes nowhere fast.
+ */
+ $offset = $this.attr('data-scroll-offset') * 1 || 0,
+ $speed = $this.attr('data-scroll-speed') * 1 || 500
+ ;
+ /*
+ * Use javascript scrollTop animation for in page navigation.
+ */
+ $('html, body').animate({
+ scrollTop: $($toElement).offset().top + $offset
+ }, $speed);
+ });
+};
+
diff --git a/src/js/utilJS.tw b/src/js/utilJS.tw
index 04abbefdb27..d1ff2c92fe6 100644
--- a/src/js/utilJS.tw
+++ b/src/js/utilJS.tw
@@ -473,4 +473,77 @@ window.weightedArray2HashMap = function weightedArray2HashMap(arr) {
window.capFirstChar = function capFirstChar(string) {
return string.charAt(0).toUpperCase() + string.substr(1);
-}
\ No newline at end of file
+}
+
+window.getSlaveDisplayName = function (slave)
+{
+ if ( (!slave)
+ || (!State)
+ )
+ {
+ return undefined;
+ }
+ var surnamesFirstCountries = [ "Cambodian", "Chinese", "Hungarian", "Japanese", "Korean",
+ "Mongolian", "Taiwanese", "Vietnamese"
+ ]
+ , names = [ slave.slaveName, slave.slaveSurname || ""
+ ];
+ ;
+ if ( (1 != State.variables.surnameOrder)
+ && (surnamesFirstCountries.includes(slave.nationality))
+ )
+ {
+ names.reverse();
+ }
+ return names.join(" ").trim();
+}
+
+window.getSlaveDevotionClass = function (slave)
+{
+ if ( (!slave)
+ || (!State)
+ )
+ {
+ return undefined;
+ }
+ if ('mindbroken' == slave.fetish) return 'mindbroken';
+
+ if (-95 > slave.devotion) return 'very-hateful';
+ else if (-50 > slave.devotion) return 'hateful';
+ else if (-20 > slave.devotion) return 'resistant';
+ else if (20 >= slave.devotion) return 'ambivelent';
+ else if (50 >= slave.devotion) return 'accepting';
+ else if (95 >= slave.devotion) return 'devoted';
+ else return 'worshipful';
+}
+
+window.getSlaveTrustClass = function (slave)
+{
+ if ( (!slave)
+ || (!State)
+ )
+ {
+ return undefined;
+ }
+ if ('mindbroken' == slave.fetish) return '';
+
+ if (-95 > slave.trust) return 'extremely-terrified';
+ else if (-50 > slave.trust) return 'terrified';
+ else if (-20 > slave.trust) return 'frightened';
+ else if (20 >= slave.trust) return 'fearful';
+ else if (50 >= slave.trust)
+ {
+ if (-20 > slave.devotion) return 'hate-careful';
+ else return 'careful';
+ }
+ else if (95 >= slave.trust)
+ {
+ if (-20 > slave.devotion) return 'bold';
+ else return 'trusting';
+ }
+ else
+ {
+ if (-20 > slave.devotion) return 'defiant';
+ else return 'profoundly-trusting';
+ }
+}
diff --git a/src/uncategorized/slaveSummary.tw b/src/uncategorized/slaveSummary.tw
index 823b5f19a17..4150918a5ad 100644
--- a/src/uncategorized/slaveSummary.tw
+++ b/src/uncategorized/slaveSummary.tw
@@ -76,16 +76,7 @@
_indexSlavesIdxs = $slaves.map(function(slave, idx) { return _passagePreFilter(slave) ? idx : null; }).filter(function(idx) { return idx !== null; })>>
<<for !_.isUndefined(_ssi = _filteredSlaveIdxs.shift())>>
<<set _Slave = $slaves[_ssi]>>
-<<if $surnameOrder != 1>>
- <<if ["Cambodian", "Chinese", "Hungarian", "Japanese", "Korean", "Mongolian", "Taiwanese", "Vietnamese"].includes(_Slave.nationality)>>
- <<set _slaveName = [_Slave.slaveSurname || "", _Slave.slaveName].join(" ").trim()>>
- <<else>>
- <<set _slaveName = [_Slave.slaveName, _Slave.slaveSurname || ""].join(" ").trim()>>
- <</if>>
-<<else>>
- <<set _slaveName = [_Slave.slaveName, _Slave.slaveSurname || ""].join(" ").trim()>>
-<</if>>
-
+<<set _slaveName = getSlaveDisplayName(_Slave);>>
<<capture _ssi>>
@@ -99,20 +90,6 @@
<<if (/Select/i.test(_Pass))>>
<<set _offset = -25>>
<</if>>
- <style>
- .hidden { display:none; }
- table.quicklist {
- table-layout: fixed;
- text-align: center;
- border-collapse: separate;
- border-spacing: 2px;
- border-style: hidden;
- empty-cells: hide;
- width: 70%;
- }
- table.quicklist td { margin: 1px; }
- table.quicklist col { width: 8%; }
- </style>
<br />
<<set _tableCount = _tableCount || 0>>
<<set _tableCount++>>
@@ -128,56 +105,47 @@
<<htag _divAttributes>>
<<for !_.isUndefined(_ssii = _indexSlavesIdxs.shift())>>
<<set _IndexSlave = $slaves[_ssii]>>
- <<if $surnameOrder != 1>>
- <<if ["Cambodian", "Chinese", "Hungarian", "Japanese", "Korean", "Mongolian", "Taiwanese", "Vietnamese"].includes(_IndexSlave.nationality)>>
- <<set _indexSlaveName = [_IndexSlave.slaveSurname || "", _IndexSlave.slaveName].join(" ").trim()>>
- <<else>>
- <<set _indexSlaveName = [_IndexSlave.slaveName, _IndexSlave.slaveSurname || ""].join(" ").trim()>>
- <</if>>
- <<else>>
- <<set _indexSlaveName = [_IndexSlave.slaveName, _IndexSlave.slaveSurname || ""].join(" ").trim()>>
- <</if>>
- <<set _buttons.push('<button data-scroll-to="#slave-' + _IndexSlave.ID + '" data-scroll-offset="' + _offset + '">' + _indexSlaveName + '</button>'); >>
+ <<set _indexSlaveName = getSlaveDisplayName(_IndexSlave);>>
+ <<set _devotionClass = getSlaveDevotionClass(_IndexSlave);>>
+ <<set _trustClass = getSlaveTrustClass(_IndexSlave);>>
+ <<set _buttons.push({'data-name': _IndexSlave.slaveName, 'data-scroll-to': '#slave-' + _IndexSlave.ID, 'data-scroll-offset': _offset, 'data-devotion': _IndexSlave.devotion, 'data-trust': _IndexSlave.trust, class: _devotionClass + ' ' + _trustClass }); >>
<</for>>
<<if !_.isUndefined(_buttons[0])>>
- <table class="quicklist">
+ <<set $sortQuickList = $sortQuickList || 'Devotion'>>
+ //Sorting:// ''<span id="qlSort">$sortQuickList</span>.''
+ <<link "Sort by Devotion">>
+ <<set $sortQuickList = 'Devotion'>>
+ <<replace "#qlSort">>$sortQuickList<</replace>>
+ <<script>>
+ $('#qlWrapper').removeClass('trust').addClass('devotion');
+ sortButtonsByDevotion();
+ <</script>>
+ <</link>>
+ <<link "Sort by Trust">>
+ <<set $sortQuickList = 'Trust'>>
+ <<replace "#qlSort">>$sortQuickList<</replace>>
+ <<script>>
+ $('#qlWrapper').removeClass('devotion').addClass('trust');
+ sortButtonsByTrust();
+ <</script>>
+ <</link>>
+ <br/>
+ <div id="qlWrapper" class="quicklist devotion">
<<for !_.isUndefined(_buttons[0])>>
- <tr>
- <<for _cols = 0; _cols <= 4; _cols++>>
- <<set _button = _buttons.shift()>>
- <<if !_.isUndefined(_button)>>
- <td></td>
- <td colspan="10">
- <<print _button>>
- </td>
- <</if>>
- <</for>>
- <td></td>
- </tr>
+ <<set _button = _buttons.shift()>>
+ <<if !_.isUndefined(_button)>>
+ <<set _buttonSlaveName = _button['data-name'];>>
+ <<htag _button 'button'>>_buttonSlaveName<</htag>>
+ <</if>>
<</for>>
- </table>
+ </div>
<script>
- /*
- * Use javascript scrollTop animation for in page navigation.
- */
$("[data-quick-index]").click(function () {
var $this = $(this), which = $this.attr('data-quick-index');
var $quick = $('div#list_index' + which);
$quick.toggleClass("hidden");
});
- $("[data-scroll-to]").click(function() {
- var $this = $(this), $toElement = $this.attr('data-scroll-to'),
- /*
- * note the *1 enforces $offset to be an integer, without
- * it we scroll to True, which goes nowhere fast.
- */
- $offset = $this.attr('data-scroll-offset') * 1 || 0,
- $speed = $this.attr('data-scroll-speed') * 1 || 500;
- $('html, body').animate({
- scrollTop: $($toElement).offset().top + $offset
- }, $speed);
-
- });
+ quickListBuildLinks();
</script>
<</if>>
<</htag>>
--
GitLab