Last active
July 12, 2020 05:57
-
-
Save cyrusfirheir/c8b47ca3af805964b5ebe1d51f5a7d2e to your computer and use it in GitHub Desktop.
Revisions
-
cyrusfirheir renamed this gist
Jul 12, 2020 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
Jul 12, 2020 . 3 changed files with 0 additions and 570 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,12 +0,0 @@ This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,172 +0,0 @@ This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,387 +1 @@ This Gist is no longer maintained. Head over to https://github.com/cyrusfirheir/cycy-wrote-custom-macros for newer versions. -
Jul 10, 2020 . 1 changed file with 2 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,3 +1,5 @@ This Gist is no longer maintained. Head over to https://github.com/cyrusfirheir/cycy-wrote-custom-macros for newer versions. ## Overview This set of macros/functions aims to provide an easy way to set up content that is revealed bit-by-bit via user interaction. -
Jul 4, 2020 . 2 changed files with 23 additions and 23 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -36,9 +36,9 @@ CTP.contentObject = function (content) { var mods = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; mods = mods.split(/\s+/g); return { clear: mods.includes("clear") && !mods.includes("noClear"), nobr: mods.includes("nobr") && !mods.includes("br"), transition: mods.includesAny("t8n", "transition") && !mods.includesAny("noT8n", "noTransition"), delay: Util.fromCssTime(mods.find(function (el) { return /\d+m?s/.test(el); }) || "0s"), This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -41,15 +41,27 @@ See [more examples](#examples). ## Macros #### Keywords Keywords for controlling behavior: - `clear`: Clears the content of the previous block. Use for replacing. - `nobr`: Appends content to the same line as the last block instead of going to a new line. - `t8n` or `transition`: Custom CSS animation based transition (250ms fade-in by default). - (delay): A valid CSS time value (e.g. `3s` or `250ms`) to delay the display of the block by. Additional keywords for individual blocks (`<<ctpNext>>`, `<<ctpHead>>`, `<<ctpTail>>`) in a chain (these are used to break out of behavior set by the `<<ctp>>` macro): - `noClear`: Overrides `clear` and keeps previous blocks in place instead of replacing. - `br`: Overrides `nobr` and adds a line break before the current block. - `noT8n` or `noTransition`: Overrides `t8n` or `transition` and removes the transition for the current block. - (delay): Overrides the delay set by `<<ctp>>` for the current block. --- ### `<<ctp "id" [keywords]>>` - `id`: *(string)* Unique ID to be used to identify the chain of content. The naming rule follows the same as those of SugarCube variable names (learn more [here](https://www.motoslave.net/sugarcube/2/docs/#twinescript-variables)). - `keywords`: *(optional|string)* Keywords (full list [here](#keywords)) can be used to alter the behavior of the macro throughout the entire chain. Keywords on `<<ctp>>` apply to all blocks. **Example:** @@ -65,11 +77,7 @@ See [more examples](#examples). To be used inside `<<ctp>>` to separate the content into blocks. - `keywords`: *(optional|string)* Keywords (full list [here](#keywords)) can be used to alter the behavior of the macro for the current block. **Example:** @@ -95,11 +103,7 @@ To be used inside `<<ctp>>` as a block *prepended* to the chain which is re-eval The main body of the CTP chain is always rendered first, before `<<ctpHead>>` or `<<ctpTail>>`. - `keywords`: *(optional|string)* Keywords (full list [here](#keywords)) can be used to alter the behavior of the macro for the current block. **Example:** @@ -124,11 +128,7 @@ To be used inside `<<ctp>>` as a block *appended* to the chain which is re-evalu The main body of the CTP chain is always rendered first, before `<<ctpHead>>` or `<<ctpTail>>`. - `keywords`: *(optional|string)* Keywords (full list [here](#keywords)) can be used to alter the behavior of the macro for the current block. **Example:** -
Jul 4, 2020 . 2 changed files with 7 additions and 5 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,10 +1,12 @@ .macro-ctp-entry-t8n { animation: macro-ctp-fade-in 0.4s ease; } @keyframes macro-ctp-fade-in { 0% { opacity: 0; }, 100% { opacity: 1; } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -58,7 +58,7 @@ CTP.item = function (item) { var noT8n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; if (!item) return ""; var t8n = noT8n ? "" : item.transition ? "macro-ctp-entry-t8n" : ""; var br = item.index === 0 || item.index === "head" || item.clear ? " " : item.nobr ? " " : "<br>"; var brAfter = item.index === "head" && !item.nobr ? "<br>" : " "; return br + '<span class="macro-ctp-entry macro-ctp-entry-index-' + item.index + ' ' + t8n + '">' + item.content + '</span>' + brAfter; }; @@ -135,7 +135,7 @@ Macro.add("ctp", { } case "ctpTail": { var _tail = CTP.contentObject(el.contents.trim(), _args + _overArgs); _tail.index = "tail"; ctp.tail = _tail; break; -
Jul 1, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -14,7 +14,7 @@ If using a compiler like Tweego, drop `CTP.js` and `CTP.css` to your source fold ## Example Usage See [more examples](#examples). ```html <<ctp "testID">> -
Jul 1, 2020 . 1 changed file with 113 additions and 8 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -14,6 +14,8 @@ If using a compiler like Tweego, drop `CTP.js` and `CTP.css` to your source fold ## Example Usage See [more examples](##examples). ```html <<ctp "testID">> This is the first string. @@ -87,6 +89,64 @@ To be used inside `<<ctp>>` to separate the content into blocks. --- ### `<<ctpHead [keywords]>>` To be used inside `<<ctp>>` as a block *prepended* to the chain which is re-evaluated at every `<<ctpAdvace>>` and `<<ctpBack>>`. As long as it is inside `<<ctp>>`, the position does not matter. The main body of the CTP chain is always rendered first, before `<<ctpHead>>` or `<<ctpTail>>`. - `keywords`: *(optional|string)* The following keywords can be used to alter the behavior of the macro for the current block: - `clear`: Clears the content of the previous block. Use for replacing. - `nobr`: Appends content in the same line as last block instead of going to a new line. - `t8n` or `transition`: Custom CSS animation based transition (250ms fade-in by default). - (delay): A valid CSS time value (e.g. `3s` or `250ms`) to delay the display of the block by. This delay **overrides** the delay specified in `<<ctp>>`. **Example:** ```html <<ctp "fancyCTP">> <<set _ctp to CTP.getCTP("fancyCTP")>> This is the first block. Declare any variables to be used by ctpHead in here. <<ctpHead>> <<if _ctp.log.index is 1>> <!-- do stuff if this is the second block --> <</if>> <<ctpNext>> This is the second! <</ctp>> ``` --- ### `<<ctpTail [keywords]>>` To be used inside `<<ctp>>` as a block *appended* to the chain which is re-evaluated at every `<<ctpAdvace>>` and `<<ctpBack>>`. As long as it is inside `<<ctp>>`, the position does not matter. The main body of the CTP chain is always rendered first, before `<<ctpHead>>` or `<<ctpTail>>`. - `keywords`: *(optional|string)* The following keywords can be used to alter the behavior of the macro for the current block: - `clear`: Clears the content of the previous block. Use for replacing. - `nobr`: Appends content in the same line as last block instead of going to a new line. - `t8n` or `transition`: Custom CSS animation based transition (250ms fade-in by default). - (delay): A valid CSS time value (e.g. `3s` or `250ms`) to delay the display of the block by. This delay **overrides** the delay specified in `<<ctp>>`. **Example:** ```html <<ctp "fancyCTP">> <<set _ctp to CTP.getCTP("fancyCTP")>> This is the first block. Declare any variables to be used by ctpHead in here. <<ctpNext>> This is the second! <<ctpTail>> <<if _ctp.log.index is 1>> <!-- do stuff if this is the second block --> <</if>> <</ctp>> ``` --- ### `<<ctpAdvance "id">>` The 'proceed' part of Click To Proceed... Used to move the train forward and show the next blocks. @@ -129,9 +189,24 @@ Turns back time and goes back one block. <</link>> ``` --- ## JavaScript usage - Functions ### `CTP.getCTP(id [, clone])` Returns a `CTP` object created with the `<<ctp>>` macro. - `id`: *(string)* ID of the `CTP` object. - `clone`: *(optional|boolean)* Whether to return a deep clone. False by default, making the function return a reference to the original object. **Example:** ```js CTP.getCTP("testID"); ``` --- ## JavaScript usage - The `CTP` object @@ -150,7 +225,6 @@ var ctpTest = new CTP({ }); ``` ***Other properties which are used under the hood:*** `stack`: *(array)* Contains the content of all blocks. @@ -162,7 +236,7 @@ var ctpTest = new CTP({ ***Object methods:*** ### `<CTP Object>.add(content [, keywords])` Adds content to the end of the stack and returns the `CTP` object for chaining. @@ -181,7 +255,7 @@ ctpTest --- ### `<CTP Object>.advance()` Does the same as `<<ctpAdvance>>`, moving to the next block. Returns the `CTP` object for chaining. @@ -193,7 +267,7 @@ ctpTest.advance(); --- ### `<CTP Object>.back()` Does the same as `<<ctpBack>>`, reverting to the previous blocks. Returns the `CTP` object for chaining. @@ -205,7 +279,7 @@ ctpTest.back(); --- ### `<CTP Object>.entry(index [, noT8n])` Returns the HTML output for a single block at the index passed into it. @@ -215,15 +289,15 @@ Returns the HTML output for a single block at the index passed into it. **Example:** ```js ctpTest.entry(2); // Assuming ctpTest is the same as in the previous examples, this returns: // <span class="macro-ctp-entry macro-ctp-entry-index-2">Third, but with nobr...</span> ``` --- ### `<CTP Object>.out([keywords])` Returns the HTML output for the entire chain from the last 'clear' to the current index. @@ -278,3 +352,34 @@ In Passage: ``` --- ## Examples ### A chain where the `Back` and `Next` buttons hide themselves when they're not needed. ```html <<ctp "testID">> <<set _ctp to CTP.getCTP("testID")>> This is the first string. <<ctpHead>> <<if _ctp.log.index gt 0>> <<button "Back">> <<ctpBack "testID">> <</button>> <</if>> <<ctpNext clear>> Second! It cleared the first one out! <<ctpNext nobr>> Third, but with nobr.. <<ctpNext 500ms>> The fourth shows up half a second late. <<ctpNext t8n>> And the final one. With a transition! <<ctpTail>> <<if _ctp.log.index lt _ctp.stack.length - 1>> <<button "Next">> <<ctpAdvance "testID">> <</button>> <</if>> <</ctp>> ``` -
Jun 30, 2020 . 1 changed file with 74 additions and 99 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -8,13 +8,11 @@ window.CTP = function (config) { index: 0, delayed: false }; Object.keys(config).forEach(function (pn) { this[pn] = clone(config[pn]); }, this); }; CTP.prototype.clone = function () { return new CTP(this); }; @@ -27,171 +25,148 @@ CTP.prototype.toJSON = function () { return JSON.reviveWrapper('new CTP($ReviveData$)', ownData); }; CTP.getCTP = function (id) { var clone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; if (!id || !id.trim()) return; variables()["#macro-ctp-dump"] = variables()["#macro-ctp-dump"] || {}; return clone ? variables()["#macro-ctp-dump"][id].clone() : variables()["#macro-ctp-dump"][id]; }; CTP.contentObject = function (content) { var mods = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; mods = mods.split(/\s+/g); return { clear: mods.includes("clear"), nobr: mods.includes("nobr"), transition: mods.includesAny("t8n", "transition"), delay: Util.fromCssTime(mods.find(function (el) { return /\d+m?s/.test(el); }) || "0s"), content: content }; }; CTP.prototype.add = function (content) { var mods = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; var contentObj = CTP.contentObject(content, mods); contentObj.index = this.stack.length; this.stack.push(contentObj); return this; }; CTP.item = function (item) { var noT8n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; if (!item) return ""; var t8n = noT8n ? "" : item.transition ? "macro-ctp-entry-t8n" : ""; var br = item.index === 0 || item.clear ? " " : item.nobr ? " " : "<br>"; var brAfter = item.index === "head" && !item.nobr ? "<br>" : " "; return br + '<span class="macro-ctp-entry macro-ctp-entry-index-' + item.index + ' ' + t8n + '">' + item.content + '</span>' + brAfter; }; CTP.prototype.entry = function (index) { var noT8n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; if (index < 0 || index >= this.stack.length) return ""; var entry = this.stack[index]; return CTP.item(entry, noT8n); }; CTP.prototype.out = function () { var _this = this; var mods = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""; var noClear = mods.includes("noClear"); var noT8n = mods.includes("noT8n"); var clearIndex = 0; if (!noClear) { var _clear = this.stack.filter(function (el) { return el.clear && el.index < _this.log.index + 1; }); if (_clear.length) clearIndex = _clear[_clear.length - 1].index; } return this.stack.slice(clearIndex, this.log.index + 1).reduce(function (acc, cur) { return acc + _this.entry(cur.index, noT8n); }, ""); }; CTP.prototype.advance = function () { var _this2 = this; if (this.log.index === this.stack.length - 1 || this.log.delayed) return this; var index = ++this.log.index; var _el = $(this.selector).find(".ctp-body"); if (this.stack[index].clear) _el.empty(); this.log.delayed = true; function delay(ctp) { ctp.log.delayed = false; $(ctp.selector).find(".ctp-body").wiki(ctp.entry(ctp.log.index)).parent().find(".ctp-head").empty().wiki(CTP.item(ctp.head)).parent().find(".ctp-tail").empty().wiki(CTP.item(ctp.tail)); } setTimeout(function () { return delay(_this2); }, this.stack[index].delay); return this; }; CTP.prototype.back = function () { if (this.log.index <= 0 || this.log.delayed) return this; this.log.index--; $(this.selector).find(".ctp-body").empty().wiki(this.out("noT8n")).parent().find(".ctp-head").empty().wiki(CTP.item(this.head)).parent().find(".ctp-tail").empty().wiki(CTP.item(this.tail)); return this; }; Macro.add("ctp", { tags: ["ctpNext", "ctpHead", "ctpTail"], handler: function handler() { var _id = this.args[0]; var _data = 'data-ctp="' + Util.escape(_id) + '"'; var ctp = new CTP({ id: _id, selector: '[' + _data + ']' }); var _overArgs = this.payload[0].args; _overArgs.reverse().pop(); _overArgs = " " + _overArgs.join(" "); this.payload.forEach(function (el, index) { var _args = el.args.join(" "); switch (el.name) { case "ctpHead": { var _head = CTP.contentObject(el.contents.trim(), _args); _head.index = "head"; ctp.head = _head; break; } case "ctpTail": { var _tail = CTP.contentObject(el.contents.trim(), _args); _tail.index = "tail"; ctp.tail = _tail; break; } default: { ctp.add(el.contents.trim(), (el.name === "ctp" ? "" : _args) + _overArgs); break; } } }); variables()["#macro-ctp-dump"] = variables()["#macro-ctp-dump"] || {}; variables()["#macro-ctp-dump"][_id] = ctp; $(this.output).wiki('<span ' + _data + ' class="macro-ctp-wrapper">' + '<span class="ctp-head"></span>' + '<span class="ctp-body">' + ctp.out() + '</span>' + '<span class="ctp-tail"></span>' + '</span>').find(".ctp-head").wiki(CTP.item(ctp.head)).parent().find(".ctp-tail").wiki(CTP.item(ctp.tail)); } }); Macro.add("ctpAdvance", { handler: function handler() { var ctp = CTP.getCTP(this.args[0]); if (ctp) ctp.advance(); } }); Macro.add("ctpBack", { handler: function handler() { var ctp = CTP.getCTP(this.args[0]); if (ctp) ctp.back(); } }); $(document).on(':passageinit', function () { delete variables()["#macro-ctp-dump"]; }); -
Jun 30, 2020 . 1 changed file with 125 additions and 62 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,16 +2,19 @@ window.CTP = function (config) { this.id = ""; this.selector = ""; this.stack = []; this.head = ""; this.tail = ""; this.log = { index: 0, delayed: false }; Object.keys(config).forEach(function (pn) { this[pn] = clone(config[pn]); }, this); }; CTP.prototype.clone = function () { return new CTP(this); }; @@ -24,111 +27,171 @@ CTP.prototype.toJSON = function () { return JSON.reviveWrapper('new CTP($ReviveData$)', ownData); }; CTP.getCTP = function(id, clone=false) { if (!id || !id.trim()) return; variables()["#macro-ctp-dump"] = variables()["#macro-ctp-dump"] || {}; return clone ? variables()["#macro-ctp-dump"][id].clone() : variables()["#macro-ctp-dump"][id]; }; CTP.contentObject = function(content, mods="") { mods = mods.split(/\s+/g); return { clear: mods.includes("clear"), nobr: mods.includes("nobr"), transition: mods.includesAny("t8n", "transition"), delay: Util.fromCssTime(mods.find(el => /\d+m?s/.test(el)) || "0s"), content: content }; }; CTP.prototype.add = function(content, mods="") { let contentObj = CTP.contentObject(content, mods); contentObj.index = this.stack.length; this.stack.push(contentObj); return this; }; CTP.item = function(item, noT8n=false) { if (!item) return ""; let t8n = noT8n ? "" : item.transition ? "macro-ctp-entry-t8n" : ""; let br = item.index === 0 || item.clear ? " " : item.nobr ? " " : "<br>"; let brAfter = item.index === "head" && !item.nobr ? "<br>" : " "; return br + '<span class="macro-ctp-entry macro-ctp-entry-index-' + item.index + ' ' + t8n + '">' + item.content + '</span>' + brAfter; }; CTP.prototype.entry = function(index, noT8n=false) { if (index < 0 || index >= this.stack.length) return ""; let entry = this.stack[index]; return CTP.item(entry, noT8n); }; CTP.prototype.out = function(mods="") { let noClear = mods.includes("noClear"); let noT8n = mods.includes("noT8n"); let clearIndex = 0; if (!noClear) { let _clear = this.stack.filter(el => el.clear && el.index < this.log.index + 1); if (_clear.length) clearIndex = _clear[_clear.length - 1].index; } return this.stack .slice(clearIndex, this.log.index + 1) .reduce((acc, cur) => acc + this.entry(cur.index, noT8n), ""); }; CTP.prototype.advance = function() { if ( this.log.index === this.stack.length - 1 || this.log.delayed ) return this; let index = ++this.log.index; let _el = $(this.selector).find(".ctp-body"); if (this.stack[index].clear) _el.empty(); this.log.delayed = true; function delay(ctp) { ctp.log.delayed = false; $(ctp.selector) .find(".ctp-body").wiki(ctp.entry(ctp.log.index)) .parent().find(".ctp-head").empty().wiki(CTP.item(ctp.head)) .parent().find(".ctp-tail").empty().wiki(CTP.item(ctp.tail)); } setTimeout(() => delay(this), this.stack[index].delay); return this; }; CTP.prototype.back = function() { if (this.log.index <= 0 || this.log.delayed) return this; this.log.index--; $(this.selector) .find(".ctp-body").empty().wiki(this.out("noT8n")) .parent().find(".ctp-head").empty().wiki(CTP.item(this.head)) .parent().find(".ctp-tail").empty().wiki(CTP.item(this.tail)); return this; }; Macro.add("ctp", { tags: ["ctpNext", "ctpHead", "ctpTail"], handler: function() { let _id = this.args[0]; let _data = 'data-ctp="' + Util.escape(_id) + '"'; let ctp = new CTP({ id: _id, selector: '[' + _data + ']' }); let _overArgs = this.payload[0].args; _overArgs.reverse().pop(); _overArgs = " " + _overArgs.join(" "); this.payload.forEach((el, index) => { let _args = el.args.join(" "); switch (el.name) { case "ctpHead": { let _head = CTP.contentObject(el.contents.trim(), _args); _head.index = "head"; ctp.head = _head; break; } case "ctpTail": { let _tail = CTP.contentObject(el.contents.trim(), _args); _tail.index = "tail"; ctp.tail = _tail; break; } default: { ctp.add( el.contents.trim(), (el.name === "ctp" ? "" : _args) + _overArgs ); break; } } }); variables()["#macro-ctp-dump"] = variables()["#macro-ctp-dump"] || {}; variables()["#macro-ctp-dump"][_id] = ctp; $(this.output).wiki( '<span ' + _data + ' class="macro-ctp-wrapper">' + '<span class="ctp-head"></span>' + '<span class="ctp-body">' + ctp.out() + '</span>' + '<span class="ctp-tail"></span>' + '</span>' ) .find(".ctp-head").wiki(CTP.item(ctp.head)) .parent() .find(".ctp-tail").wiki(CTP.item(ctp.tail)); } }); Macro.add("ctpAdvance", { handler: function() { let ctp = CTP.getCTP(this.args[0]); if (ctp) ctp.advance(); } }); Macro.add("ctpBack", { handler: function() { let ctp = CTP.getCTP(this.args[0]); if (ctp) ctp.back(); } }); $(document).on(':passageinit', function() { delete variables()["#macro-ctp-dump"]; }); -
Jun 27, 2020 . No changes.There are no files selected for viewing
-
Jun 27, 2020 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
Jun 20, 2020 . 1 changed file with 1 addition and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -157,9 +157,7 @@ var ctpTest = new CTP({ `log`: *(object)* Keeps track of blocks and their behaviors: - `index`: *(whole number)* Current index of block (zero-based). - `delayed`: *(boolean)* Whether the current block is delayed or not. ***Object methods:*** -
Jun 20, 2020 . 1 changed file with 14 additions and 14 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,6 @@ ## Overview This set of macros/functions aims to provide an easy way to set up content that is revealed bit-by-bit via user interaction. Using nested `<<linkreplace>>` and `<<linkappend>>` works, but gets tedious and is often prone to errors. The CTP (Click To Proceed: original-est name ever) macros make it a bit easier by turning them into blocks instead of nests. @@ -41,11 +41,11 @@ If using a compiler like Tweego, drop `CTP.js` and `CTP.css` to your source fold ### `<<ctp "id" [keywords]>>` - `id`: *(string)* Unique ID to be used to identify the chain of content. The naming rule follows the same as those of SugarCube variable names (learn more [here](https://www.motoslave.net/sugarcube/2/docs/#twinescript-variables)). - `keywords`: *(optional|string)* The following keywords can be used to alter the behavior of the macro throughout the entire chain. These keywords apply to all blocks: - `clear`: Clears the content of the previous block. Use for replacing. - `nobr`: Appends content in the same line as the last block instead of going to a new line. - `t8n` or `transition`: Custom CSS animation based transition (250ms fade-in by default). - (delay): A valid CSS time value (e.g. `3s` or `250ms`) to delay the display of the block by. @@ -63,8 +63,8 @@ If using a compiler like Tweego, drop `CTP.js` and `CTP.css` to your source fold To be used inside `<<ctp>>` to separate the content into blocks. - `keywords`: *(optional|string)* The following keywords can be used to alter the behavior of the macro for the current block: - `clear`: Clears the content of the previous block. Use for replacing. - `nobr`: Appends content in the same line as last block instead of going to a new line. - `t8n` or `transition`: Custom CSS animation based transition (250ms fade-in by default). - (delay): A valid CSS time value (e.g. `3s` or `250ms`) to delay the display of the block by. This delay **overrides** the delay specified in `<<ctp>>`. @@ -93,7 +93,7 @@ The 'proceed' part of Click To Proceed... Used to move the train forward and sho - `id`: *(string)* Unique ID which was set up in `<<ctp>>`. **NOTE:** Use with user interaction (inside a `<<link>>` or `<<button>>`) or inside a `<<timed>>` macro to ensure the DOM is loaded and has the element on the page for the macro to target. **Example:** @@ -115,7 +115,7 @@ Turns back time and goes back one block. - `id`: *(string)* Unique ID which was set up in `<<ctp>>`. **NOTE:** Use with user interaction (inside a `<<link>>` or `<<button>>`) or inside a `<<timed>>` macro to ensure the DOM is loaded and has the element on the page for the macro to target. **Example:** @@ -155,7 +155,7 @@ var ctpTest = new CTP({ `stack`: *(array)* Contains the content of all blocks. `log`: *(object)* Keeps track of blocks and their behaviors: - `index`: *(whole number)* Current index of block (zero-based). - `clear`: *(array)* Indices of blocks at which to clear the output element before appending new content. - `nobr`: *(array)* Indices of blocks where no `<br>` is added. @@ -169,7 +169,7 @@ var ctpTest = new CTP({ Adds content to the end of the stack and returns the `CTP` object for chaining. - `content`: *(string)* The actual content in the block. - `keywords`: *(optional|string)* Space-separated list of keywords (clear, nobr, t8n, transition) to modify the behavior of the blocks. **Example:** @@ -209,7 +209,7 @@ ctpTest.back(); ### `CTP.ctpEntry(index [, noT8n])` Returns the HTML output for a single block at the index passed into it. - `index`: *(whole number)* Index of block to return. - `noT8n`: *(optional|boolean)* If true, all transitions are removed. False by default. @@ -227,9 +227,9 @@ ctpTest.ctpEntry(2); ### `CTP.out([keywords])` Returns the HTML output for the entire chain from the last 'clear' to the current index. - `keywords`: *(optional|string)* Space-separated list of words to alter the behavior of the output: - `noClear`: Renders all the blocks from start to finish without considering if anything was cleared in between. - `noT8n`: Removes all transitions. -
Jun 1, 2020 . 1 changed file with 15 additions and 16 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,7 +3,7 @@ window.CTP = function (config) { this.selector = ""; this.stack = []; this.log = { index: 0, delayed: false }; @@ -12,12 +12,24 @@ window.CTP = function (config) { }, this); }; CTP.prototype.clone = function () { return new CTP(this); }; CTP.prototype.toJSON = function () { var ownData = {}; Object.keys(this).forEach(function (pn) { ownData[pn] = clone(this[pn]); }, this); return JSON.reviveWrapper('new CTP($ReviveData$)', ownData); }; CTP.prototype.add = function (entry) { var mods = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; mods = mods.split(/\s+/g); this.stack.push({ index: this.stack.length, clear: this.stack.length && mods.includes("clear"), nobr: mods.includes("nobr"), transition: mods.includesAny("t8n", "transition"), delay: Util.fromCssTime(mods.find(function (el) { @@ -76,18 +88,6 @@ CTP.prototype.back = function () { return this; }; Macro.add("ctp", { tags: ["ctpNext"], handler: function handler() { @@ -105,8 +105,7 @@ Macro.add("ctp", { if (el.name === "ctp") _args = []; ctp.add(el.contents.trim(), _args.join(" ") + _overArgs); }); $(this.output).wiki('<span ' + _data + ' class="macro-ctp-wrapper">' + ctp.out() + '</span>'); variables()["#macro-ctp-dump"] = variables()["#macro-ctp-dump"] || {}; variables()["#macro-ctp-dump"][_id] = ctp; } -
May 31, 2020 . 1 changed file with 9 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -39,10 +39,16 @@ If using a compiler like Tweego, drop `CTP.js` and `CTP.css` to your source fold ## Macros ### `<<ctp "id" [keywords]>>` - `id`: *(string)* Unique ID to be used to identify the chain of content. Naming rule follows the same as those of SugarCube variable names (learn more [here](https://www.motoslave.net/sugarcube/2/docs/#twinescript-variables)). - `keywords`: *(optional|string)* The following keywords can be used to alter behavior of the macro throughout the entire chain. These keywords apply to all blocks: - `clear`: Clears content of previous block. Use for replacing. - `nobr`: Appends content in the same line as last block instead of going to a new line. - `t8n` or `transition`: Custom CSS animation based transition (250ms fade-in by default). - (delay): A valid CSS time value (e.g. `3s` or `250ms`) to delay the display of the block by. **Example:** ```html @@ -57,11 +63,11 @@ If using a compiler like Tweego, drop `CTP.js` and `CTP.css` to your source fold To be used inside `<<ctp>>` to separate the content into blocks. - `keywords`: *(optional|string)* The following keywords can be used to alter behavior of the macro for the current block: - `clear`: Clears content of previous block. Use for replacing. - `nobr`: Appends content in the same line as last block instead of going to a new line. - `t8n` or `transition`: Custom CSS animation based transition (250ms fade-in by default). - (delay): A valid CSS time value (e.g. `3s` or `250ms`) to delay the display of the block by. This delay **overrides** the delay specified in `<<ctp>>`. **Example:** -
May 31, 2020 . 1 changed file with 9 additions and 5 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,7 +3,7 @@ window.CTP = function (config) { this.selector = ""; this.stack = []; this.log = { index: -1, delayed: false }; @@ -14,7 +14,7 @@ window.CTP = function (config) { CTP.prototype.add = function (entry) { var mods = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; mods = mods.split(/\s+/g); this.stack.push({ index: this.stack.length, clear: mods.includes("clear"), @@ -97,14 +97,18 @@ Macro.add("ctp", { id: _id, selector: '[' + _data + ']' }); var _overArgs = this.payload[0].args; _overArgs.reverse().pop(); _overArgs = " " + _overArgs.join(" "); this.payload.forEach(function (el, index) { var _args = el.args; if (el.name === "ctp") _args = []; ctp.add(el.contents.trim(), _args.join(" ") + _overArgs); }); $(this.output).wiki('<span ' + _data + ' class="macro-ctp-wrapper"></span>'); ctp.advance(); variables()["#macro-ctp-dump"] = variables()["#macro-ctp-dump"] || {}; variables()["#macro-ctp-dump"][_id] = ctp; } }); -
May 24, 2020 . 1 changed file with 53 additions and 8 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -21,13 +21,19 @@ If using a compiler like Tweego, drop `CTP.js` and `CTP.css` to your source fold Second! It cleared the first one out! <<ctpNext nobr>> Third, but with nobr... <<ctpNext 2s>> The fourth shows up 2 seconds late. <<ctpNext t8n>> And the final one. With a transition! <</ctp>> <<link "Next">> <<ctpAdvance "testID">> <</link>> <<link "Back">> <<ctpBack "testID">> <</link>> ``` @@ -55,6 +61,7 @@ To be used inside `<<ctp>>` to separate the content into blocks. - `clear`: Clears content of previous block. Use for replacing. - `nobr`: Appends content in the same line as last block instead of going to a new line. - `t8n` or `transition`: Custom CSS animation based transition (250ms fade-in by default). - (delay): A valid CSS time value (e.g. `3s` or `250ms`) to delay the display of the block by. **Example:** @@ -65,8 +72,10 @@ To be used inside `<<ctp>>` to separate the content into blocks. Two with clear. <<ctpNext nobr>> Three on the same line. <<ctpNext 500ms>> Delayed four. <<ctpNext t8n>> Fading five. <</ctp>> ``` @@ -92,6 +101,29 @@ The 'proceed' part of Click To Proceed... Used to move the train forward and sho <</link>> ``` --- ### `<<ctpBack "id">>` Turns back time and goes back one block. - `id`: *(string)* Unique ID which was set up in `<<ctp>>`. **NOTE:** Use with user interaction (inside a `<<link>>` or `<<button>>`) or inside a `<<timed>>` macro to ensure the DOM is loaded and has the element on page for the macro to target. **Example:** ```html <<ctp "ID_of_the_year_yet_again">> <!-- stuff --> <</ctp>> <<link "Back">> <<ctpBack "ID_of_the_year_yet_again">> <</link>> ``` --- @@ -131,7 +163,7 @@ var ctpTest = new CTP({ Adds content to the end of the stack and returns the `CTP` object for chaining. - `content`: *(string)* The actual content in the block. - `keywords`: *(optional|string)* Space-separated list of keywords (clear, nobr, t8n, transition) to modify behavior of the blocks. **Example:** @@ -157,11 +189,24 @@ ctpTest.advance(); --- ### `CTP.back()` Does the same as `<<ctpBack>>`, reverting to the previous blocks. Returns the `CTP` object for chaining. **Example:** ```js ctpTest.back(); ``` --- ### `CTP.ctpEntry(index [, noT8n])` Returns the html output for a single block at the index passed into it. - `index`: *(whole number)* Index of block to return. - `noT8n`: *(optional|boolean)* If true, all transitions are removed. False by default. **Example:** @@ -174,10 +219,14 @@ ctpTest.ctpEntry(2); --- ### `CTP.out([keywords])` Returns the html output for entire chain from the last 'clear' to the current index. - `keywords`: *(optional|string)* Space separated list of words to alter behavior of the output: - `noClear`: Renders all the blocks from start to finish without considering if anything was cleared in between. - `noT8n`: Removes all transitions. **Example:** ```js @@ -225,7 +274,3 @@ In Passage: ``` --- -
May 24, 2020 . 1 changed file with 2 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -70,9 +70,10 @@ CTP.prototype.advance = function () { }; CTP.prototype.back = function () { if (this.log.index <= 0 || this.log.delayed) return this; this.log.index--; $(this.selector).empty().wiki(this.out("noT8n")); return this; }; CTP.prototype.clone = function () { -
May 24, 2020 . 1 changed file with 13 additions and 4 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,7 +3,8 @@ window.CTP = function (config) { this.selector = ""; this.stack = []; this.log = { index: 0, delayed: false }; Object.keys(config).forEach(function (pn) { @@ -52,16 +53,24 @@ CTP.prototype.out = function () { }; CTP.prototype.advance = function () { var _this2 = this; if (this.log.index === this.stack.length - 1 || this.log.delayed) return this; var index = ++this.log.index; var _el = $(this.selector); if (this.stack[index].clear) _el.empty(); this.log.delayed = true; function delay(ctp) { ctp.log.delayed = false; $(ctp.selector).wiki(ctp.ctpEntry(ctp.log.index)); } setTimeout(function () { return delay(_this2); }, this.stack[index].delay); return this; }; CTP.prototype.back = function () { if (this.log.index <= 0 || this.log.delayed) return; this.log.index--; $(this.selector).empty().wiki(this.out("noT8n")); }; -
May 24, 2020 . 1 changed file with 50 additions and 35 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,12 +2,8 @@ window.CTP = function (config) { this.id = ""; this.selector = ""; this.stack = []; this.log = { index: 0 }; Object.keys(config).forEach(function (pn) { @@ -16,43 +12,58 @@ window.CTP = function (config) { }; CTP.prototype.add = function (entry) { var mods = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; mods = mods.split(" "); this.stack.push({ index: this.stack.length, clear: mods.includes("clear"), nobr: mods.includes("nobr"), transition: mods.includesAny("t8n", "transition"), delay: Util.fromCssTime(mods.find(function (el) { return /\d+m?s/.test(el); }) || "0s"), content: entry }); return this; }; CTP.prototype.ctpEntry = function (index) { var noT8n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; if (index < 0 || index >= this.stack.length) return ""; var entry = this.stack[index]; var t8n = noT8n ? "" : entry.transition ? "macro-ctp-entry-t8n" : ""; var br = index === 0 || entry.clear ? " " : entry.nobr ? " " : "<br>"; return br + '<span class="macro-ctp-entry macro-ctp-entry-index-' + index + ' ' + t8n + '">' + entry.content + '</span>'; }; CTP.prototype.out = function () { var _this = this; var mods = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""; var noClear = mods.includes("noClear"); var noT8n = mods.includes("noT8n"); var clearIndex = 0; if (!noClear) clearIndex = Math.max(this.stack.filter(function (el) { return el.index <= _this.log.index && el.clear; }, this).length, 0); var ret = this.stack.slice(clearIndex, this.log.index + 1).reduce(function (acc, cur) { return acc + _this.ctpEntry(cur.index, noT8n); }, ""); return ret; }; CTP.prototype.advance = function () { if (this.log.index === this.stack.length - 1) return this; var index = ++this.log.index; var _el = $(this.selector); if (this.stack[index].clear) _el.empty(); _el.wiki(this.ctpEntry(index)); return this; }; CTP.prototype.back = function () { if (this.log.index <= 0) return; this.log.index--; $(this.selector).empty().wiki(this.out("noT8n")); }; CTP.prototype.clone = function () { @@ -71,10 +82,10 @@ Macro.add("ctp", { tags: ["ctpNext"], handler: function handler() { var _id = this.args[0]; var _data = 'data-ctp="' + Util.escape(_id) + '"'; var ctp = new CTP({ id: _id, selector: '[' + _data + ']' }); this.payload.forEach(function (el, index) { var _args = el.args; @@ -83,7 +94,7 @@ Macro.add("ctp", { }); variables()["#macro-ctp-dump"] = variables()["#macro-ctp-dump"] || {}; variables()["#macro-ctp-dump"][_id] = ctp; $(this.output).wiki('<span ' + _data + ' class="macro-ctp-wrapper">' + ctp.out() + '</span>'); } }); @@ -92,12 +103,16 @@ Macro.add("ctpAdvance", { var _id = this.args[0]; variables()["#macro-ctp-dump"] = variables()["#macro-ctp-dump"] || {}; var ctp = variables()["#macro-ctp-dump"][_id]; if (ctp) ctp.advance(); } }); Macro.add("ctpBack", { handler: function handler() { var _id = this.args[0]; variables()["#macro-ctp-dump"] = variables()["#macro-ctp-dump"] || {}; var ctp = variables()["#macro-ctp-dump"][_id]; if (ctp) ctp.back(); } }); -
May 22, 2020 . 1 changed file with 1 addition and 4 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -33,9 +33,6 @@ If using a compiler like Tweego, drop `CTP.js` and `CTP.css` to your source fold ## Macros ### `<<ctp "id">>` - `id`: *(string)* Unique ID to be used to identify the chain of content. Naming rule follows the same as those of SugarCube variable names (learn more [here](https://www.motoslave.net/sugarcube/2/docs/#twinescript-variables)). @@ -223,7 +220,7 @@ In Passage: <<link "Advance">> <<run $ctpTest.advance()>> <!-- Because $ctpTest was created manually, using the <<ctpAdvance>> macro won't work. To be able to use <<ctpAdvance>>, the CTP object needs to be set as a property of State.variables["#macro-ctp-dump"] as that is what is used internally to store CTP objects created via the macros. --> <</link>> ``` -
May 22, 2020 . 1 changed file with 50 additions and 47 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -9,51 +9,50 @@ window.CTP = function (config) { nobr: [], transition: [] }; Object.keys(config).forEach(function (pn) { this[pn] = clone(config[pn]); }, this); }; CTP.prototype.add = function (entry) { var _this = this; var mods = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; this.stack.push(entry); mods.replace("t8n", "transition").split(" ").forEach(function (el) { if (el) _this.log[el].pushUnique(_this.stack.length - 1); }, this); return this; }; CTP.prototype.ctpEntry = function (index) { if (index < 0 || index >= this.stack.length) return ""; var t8n = this.log.transition.includes(index) ? "macro-ctp-entry-t8n" : ""; var br = index === 0 || this.log.clear.includes(index) ? " " : this.log.nobr.includes(index) ? " " : "<br>"; return br + '<span class="macro-ctp-entry macro-ctp-entry-index-' + index + ' ' + t8n + '">' + this.stack[index] + '</span>'; }; CTP.prototype.advance = function () { if (this.log.index === this.stack.length - 1) return this; var index = ++this.log.index; var _el = $(this.selector); if (this.log.clear.includes(index)) _el.empty(); _el.wiki(this.ctpEntry(index)); return this; }; CTP.prototype.out = function () { var _this2 = this; var clear = this.log.clear; var clearIndex = this.log.index > 0 ? clear.findIndex(function (el) { return el >= _this2.log.index; }, this) - 1 : 0; var ret = this.stack.map(function (el, index) { return index; }).slice(clearIndex, this.log.index + 1).reduce(function (acc, cur) { return acc + _this2.ctpEntry(cur); }, ""); return ret; }; CTP.prototype.clone = function () { @@ -82,22 +81,26 @@ Macro.add("ctp", { if (el.name === "ctp") _args.reverse().pop(); ctp.add(el.contents.trim(), _args.join(" ")); }); variables()["#macro-ctp-dump"] = variables()["#macro-ctp-dump"] || {}; variables()["#macro-ctp-dump"][_id] = ctp; $(this.output).wiki('<span id="' + Util.slugify(_id) + '" class="macro-ctp-wrapper">' + ctp.out() + '</span>'); } }); Macro.add("ctpAdvance", { handler: function handler() { var _id = this.args[0]; variables()["#macro-ctp-dump"] = variables()["#macro-ctp-dump"] || {}; var ctp = variables()["#macro-ctp-dump"][_id]; if (ctp) { ctp.advance(); if (ctp.log.index === ctp.stack.length - 1) { delete variables()["#macro-ctp-dump"][_id]; } } } }); $(document).on(':passageinit', function () { delete variables()["#macro-ctp-dump"]; }); -
May 22, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -84,7 +84,7 @@ Macro.add("ctp", { }); variables().macroCTP = variables().macroCTP || {}; variables().macroCTP[_id] = ctp; $(this.output).wiki('<span id="' + Util.slugify(_id) + '" class="macro-ctp-wrapper">' + ctp.out() + "</span>"); } }); -
May 22, 2020 . No changes.There are no files selected for viewing
-
May 22, 2020 . 2 changed files with 3 additions and 4 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -21,7 +21,7 @@ window.CTP = function (config) { }; this.ctpEntry = function (index) { if (index < 0 || index >= this.stack.length) return ""; var t8n = this.log.transition.includes(index) ? "macro-ctp-entry-t8n" : ""; var br = index === 0 || this.log.clear.includes(index) ? " " : this.log.nobr.includes(index) ? " " : "<br>"; return br + '<span class="macro-ctp-entry macro-ctp-entry-index-' + index + " " + t8n + '">' + this.stack[index] + "</span>"; @@ -46,7 +46,6 @@ window.CTP = function (config) { var ret = ctp.stack.map(function (el, index) { return index; }).slice(clearIndex, ctp.log.index + 1).reduce(function (acc, cur) { return acc + ctp.ctpEntry(cur); }, ""); return ret; This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -25,9 +25,9 @@ If using a compiler like Tweego, drop `CTP.js` and `CTP.css` to your source fold And the final one. With a transition! <</ctp>> <<link "Next">> <<ctpAdvance "testID">> <</link>> ``` -
May 22, 2020 . 3 changed files with 116 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,10 @@ .macro-ctp-entry-t8n { opacity: 1; animation: macro-ctp-fade-in 0.25s ease; } @keyframes macro-ctp-fade-in { 0% { opacity: 0; } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,104 @@ window.CTP = function (config) { this.id = ""; this.selector = ""; this.stack = []; this.log = { index: 0, clear: [0], nobr: [], transition: [] }; this.add = function (entry) { var mods = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; var ctp = this; this.stack.push(entry); mods.replace("t8n", "transition").split(" ").forEach(function (el) { if (el) ctp.log[el].pushUnique(ctp.stack.length - 1); }); return this; }; this.ctpEntry = function (index) { if (index < 0 || index >= this.log.index) return ""; var t8n = this.log.transition.includes(index) ? "macro-ctp-entry-t8n" : ""; var br = index === 0 || this.log.clear.includes(index) ? " " : this.log.nobr.includes(index) ? " " : "<br>"; return br + '<span class="macro-ctp-entry macro-ctp-entry-index-' + index + " " + t8n + '">' + this.stack[index] + "</span>"; }; this.advance = function () { if (this.log.index === this.stack.length - 1) return this; var ctp = this; var index = ++this.log.index; var _el = $(this.selector); if (this.log.clear.includes(index)) _el.empty(); _el.wiki(ctp.ctpEntry(index)); return this; }; this.out = function () { var ctp = this; var clear = ctp.log.clear; var clearIndex = ctp.log.index > 0 ? clear.findIndex(function (el) { return el >= ctp.log.index; }) - 1 : 0; var ret = ctp.stack.map(function (el, index) { return index; }).slice(clearIndex, ctp.log.index + 1).reduce(function (acc, cur) { var nobr = ctp.log.nobr.includes(cur) ? "" : "<br>"; return acc + ctp.ctpEntry(cur); }, ""); return ret; }; Object.keys(config).forEach(function (pn) { this[pn] = clone(config[pn]); }, this); }; CTP.prototype.clone = function () { return new CTP(this); }; CTP.prototype.toJSON = function () { var ownData = {}; Object.keys(this).forEach(function (pn) { ownData[pn] = clone(this[pn]); }, this); return JSON.reviveWrapper('new CTP($ReviveData$)', ownData); }; Macro.add("ctp", { tags: ["ctpNext"], handler: function handler() { var _id = this.args[0]; var _selector = "#" + Util.slugify(_id); var ctp = new CTP({ id: _id, selector: _selector }); this.payload.forEach(function (el, index) { var _args = el.args; if (el.name === "ctp") _args.reverse().pop(); ctp.add(el.contents.trim(), _args.join(" ")); }); variables().macroCTP = variables().macroCTP || {}; variables().macroCTP[_id] = ctp; $(this.output).wiki('<span id="' + _id + '" class="macro-ctp-wrapper">' + ctp.out() + "</span>"); } }); Macro.add("ctpAdvance", { handler: function handler() { var _id = this.args[0]; variables().macroCTP = variables().macroCTP || {}; var ctp = variables().macroCTP[_id]; if (ctp) { ctp.advance(); if (ctp.log.index === ctp.stack.length - 1) { delete variables().macroCTP[_id]; } } } }); This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -223,13 +223,12 @@ In Passage: <<link "Advance">> <<run $ctpTest.advance()>> <!-- Because $ctpTest was created manually, using the <<ctpAdvance>> macro won't work. To be able to use <<ctpAdvance>>, the CTP object needs to be set as a property of State.variables.macroCTP as that is what is used internally to store CTP objects created via the macros. --> <</link>> ``` --- ## TODO - Add CSS time keyword to delay before next block appears. -
May 22, 2020 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,235 @@ ## Overview This set of macros/functions aim to provide an easy way to set up content which is revealed bit-by-bit via user interaction. Using nested `<<linkreplace>>` and `<<linkappend>>` works, but gets tedious and is often prone to errors. The CTP (Click To Proceed: original-est name ever) macros make it a bit easier by turning them into blocks instead of nests. ## Installation If using the Twine desktop/web app, copy contents of `CTP.js` to `Story JavaScript`, and contents of `CTP.css` to `Story Stylesheet`. If using a compiler like Tweego, drop `CTP.js` and `CTP.css` to your source folder. ## Example Usage ```html <<ctp "testID">> This is the first string. <<ctpNext clear>> Second! It cleared the first one out! <<ctpNext nobr>> Third, but with nobr... <<ctpNext t8n>> And the final one. With a transition! <</ctp>> <<button>> <<ctpAdvance "testID">> <</button>> ``` ## Macros **NOTE:** Avoid usage of passage navigation macros until the end of the entire chain. To free up memory when not required anymore, CTP objects created via the macros are deleted once they reach the end. If the passage changes before that happens, then the object will stay in memory and bloat the `State` (and affect performance; and the size of save files) unnecessarily. ### `<<ctp "id">>` - `id`: *(string)* Unique ID to be used to identify the chain of content. Naming rule follows the same as those of SugarCube variable names (learn more [here](https://www.motoslave.net/sugarcube/2/docs/#twinescript-variables)). **Example:** ```html <<ctp "ID_of_the_year">> Bare minimum... <</ctp>> ``` --- ### `<<ctpNext [keywords]>>` To be used inside `<<ctp>>` to separate the content into blocks. - `keywords`: *(optional|string)* The following keywords can be used to alter behavior of the macro: - `clear`: Clears content of previous block. Use for replacing. - `nobr`: Appends content in the same line as last block instead of going to a new line. - `t8n` or `transition`: Custom CSS animation based transition (250ms fade-in by default). **Example:** ```html <<ctp "fancyCTP">> One. <<ctpNext clear>> Two with clear. <<ctpNext nobr>> Three on the same line. <<ctpNext t8n>> Fading four. <</ctp>> ``` --- ### `<<ctpAdvance "id">>` The 'proceed' part of Click To Proceed... Used to move the train forward and show the next blocks. - `id`: *(string)* Unique ID which was set up in `<<ctp>>`. **NOTE:** Use with user interaction (inside a `<<link>>` or `<<button>>`) or inside a `<<timed>>` macro to ensure the DOM is loaded and has the element on page for the macro to target. **Example:** ```html <<ctp "ID_of_the_year_once_again">> <!-- stuff --> <</ctp>> <<link "Next">> <<ctpAdvance "ID_of_the_year_once_again">> <</link>> ``` --- ## JavaScript usage - The `CTP` object ***The `CTP` custom object is set up as follows:*** `id`: *(string)* Unique ID. `selector`: *(string)* CSS selector to target to output to. When used by the macro, this is the slugified form of `id`. **Example:** ```js var ctpTest = new CTP({ id: "ctpTest", selector: "#ctp-test-id" }); ``` ***Other properties which are used under the hood:*** `stack`: *(array)* Contains the content of all blocks. `log`: *(object)* Keeps track of blocks amd their behaviors: - `index`: *(whole number)* Current index of block (zero-based). - `clear`: *(array)* Indices of blocks at which to clear the output element before appending new content. - `nobr`: *(array)* Indices of blocks where no `<br>` is added. - `transition`: *(array)* Indices of blocks which have the CSS transition (Target the class `.macro-ctp-entry-t8n` to customize). ***Object methods:*** ### `CTP.add(content [, keywords])` Adds content to the end of the stack and returns the `CTP` object for chaining. - `content`: *(string)* The actual content in the block. - `keywords`: *(string)* Space-separated list of keywords (clear, nobr, t8n, transition) to modify behavior of the blocks. **Example:** ```js ctpTest .add("This is the first string.") .add("Second! It cleared the first one out!", "clear") .add("Third, but with nobr...", "nobr") .add("And the final one. With a transition!", "t8n"); ``` --- ### `CTP.advance()` Does the same as `<<ctpAdvance>>`, moving to the next block. Returns the `CTP` object for chaining. **Example:** ```js ctpTest.advance(); ``` --- ### `CTP.ctpEntry(index)` Returns the html output for a single block at the index passed into it. - `index`: *(whole number)* Index of block to return. **Example:** ```js ctpTest.ctpEntry(2); // Assuming ctpTest is the same as in the previous examples, this returns: // <span class="macro-ctp-entry macro-ctp-entry-index-2">Third, but with nobr...</span> ``` --- ### `CTP.out()` Returns the html output for entire chain from the last 'clear' to the current index. **Example:** ```js // Assuming current index is 3 ctpTest.out() /* Returns: * * <span class="macro-ctp-entry macro-ctp-entry-index-1">Second! It cleared the first one out!</span> * <span class="macro-ctp-entry macro-ctp-entry-index-2">Third, but with nobr...</span> * <br> * <span class="macro-ctp-entry macro-ctp-entry-index-3">And the final one. With a transition!</span> */ ``` --- ***Complete usage:*** JavaScript: ```js State.variables.ctpTest = new CTP({ id: "ctpTest", selector: "#ctp-test-id" }); State.variables.ctpTest .add("This is the first string.") .add("Second! It cleared the first one out!", "clear") .add("Third, but with nobr...", "nobr") .add("And the final one. With a transition!", "t8n"); ``` In Passage: ```html <div id="#ctp-test-id"> <<= $ctpTest.out()>> </div> <<link "Advance">> <<run $ctpTest.advance()>> <!--Because $ctpTest was created manually, using the <<ctpAdvance>> macro won't work. To be able to use <<ctpAdvance>>, the CTP object needs to be set as a property of State.variables.macroCTP as that is what is used internally to store CTP objects created via the macros. --> <</link>> ``` --- ## TODO Add css time delays before next one appears Interactive skip keyword `skip` - if current entry has interactive elements, you can skip their use and move on.