From 896098436f6a51246c2f156d75d199bbdabde5cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 14 Feb 2023 12:01:15 +0100 Subject: [PATCH 1/2] feat: add CSS variables indexes to lines, words and chars --- lib/repositionAfterSplit.js | 4 ++-- lib/splitWordsAndChars.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/repositionAfterSplit.js b/lib/repositionAfterSplit.js index 8c4db29..3c72377 100644 --- a/lib/repositionAfterSplit.js +++ b/lib/repositionAfterSplit.js @@ -119,11 +119,11 @@ export default function repositionAfterSplit(element, settings, scrollPos) { // Iterate over lines of text (see 11 b) // Let `line` be the array of words in the current line. // Return an array of the wrapped line elements (lineElements) - lines = wordsInEachLine.map((wordsInThisLine) => { + lines = wordsInEachLine.map((wordsInThisLine, idx) => { // Create an element to wrap the current line. const lineElement = createElement(TAG_NAME, { class: `${settings.splitClass} ${settings.lineClass}`, - style: `display: block; text-align: ${align}; width: 100%;`, + style: `--index-line: ${idx}; display: block; text-align: ${align}; width: 100%;`, }) data.set(lineElement, 'isLine', true) diff --git a/lib/splitWordsAndChars.js b/lib/splitWordsAndChars.js index dfb8721..bbc8f93 100644 --- a/lib/splitWordsAndChars.js +++ b/lib/splitWordsAndChars.js @@ -45,10 +45,10 @@ export default function splitWordsAndChars(textNode, settings) { // -> If splitting text into characters... if (types.chars) { // Iterate through the characters in the current word - characterElementsForCurrentWord = toChars(WORD).map((CHAR) => { + characterElementsForCurrentWord = toChars(WORD).map((CHAR, idxChar) => { const characterElement = createElement(TAG_NAME, { class: `${settings.splitClass} ${settings.charClass}`, - style: 'display: inline-block;', + style: `--index-char: ${idxChar}; display: inline-block;`, children: CHAR, }) data.set(characterElement, 'isChar', true) @@ -65,7 +65,7 @@ export default function splitWordsAndChars(textNode, settings) { // plain text content (WORD) wordElement = createElement(TAG_NAME, { class: `${settings.wordClass} ${settings.splitClass}`, - style: `display: inline-block; ${ + style: `--index-word: ${idx}; display: inline-block; ${ types.words && settings.absolute ? `position: relative;` : '' }`, children: types.chars ? characterElementsForCurrentWord : WORD, From 2543ddfc1e0efb1e64db56c1f1bd06e2c146db3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 14 Feb 2023 12:07:21 +0100 Subject: [PATCH 2/2] feat: add option to enable or disable index CSS variables --- lib/defaults.js | 1 + lib/index.d.ts | 1 + lib/repositionAfterSplit.js | 3 ++- lib/splitWordsAndChars.js | 6 ++++-- 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/lib/defaults.js b/lib/defaults.js index edd7d52..f279a7f 100644 --- a/lib/defaults.js +++ b/lib/defaults.js @@ -6,4 +6,5 @@ export default { types: ['lines', 'words', 'chars'], absolute: false, tagName: 'div', + addIndex: true, } diff --git a/lib/index.d.ts b/lib/index.d.ts index b0aa48e..9848cd5 100644 --- a/lib/index.d.ts +++ b/lib/index.d.ts @@ -14,6 +14,7 @@ declare module 'split-type' { splitClass: string types: TypesListString | TypesValue[] split: TypesListString | TypesValue[] + addIndex: boolean } type TargetElement = diff --git a/lib/repositionAfterSplit.js b/lib/repositionAfterSplit.js index 3c72377..ef31935 100644 --- a/lib/repositionAfterSplit.js +++ b/lib/repositionAfterSplit.js @@ -121,9 +121,10 @@ export default function repositionAfterSplit(element, settings, scrollPos) { // Return an array of the wrapped line elements (lineElements) lines = wordsInEachLine.map((wordsInThisLine, idx) => { // Create an element to wrap the current line. + const lineIndex = settings.addIndex ? `--index-line: ${idx};` : '' const lineElement = createElement(TAG_NAME, { class: `${settings.splitClass} ${settings.lineClass}`, - style: `--index-line: ${idx}; display: block; text-align: ${align}; width: 100%;`, + style: `${lineIndex} display: block; text-align: ${align}; width: 100%;`, }) data.set(lineElement, 'isLine', true) diff --git a/lib/splitWordsAndChars.js b/lib/splitWordsAndChars.js index bbc8f93..eff3ed4 100644 --- a/lib/splitWordsAndChars.js +++ b/lib/splitWordsAndChars.js @@ -46,9 +46,10 @@ export default function splitWordsAndChars(textNode, settings) { if (types.chars) { // Iterate through the characters in the current word characterElementsForCurrentWord = toChars(WORD).map((CHAR, idxChar) => { + const charIndex = settings.addIndex ? `--index-char: ${idxChar};` : '' const characterElement = createElement(TAG_NAME, { class: `${settings.splitClass} ${settings.charClass}`, - style: `--index-char: ${idxChar}; display: inline-block;`, + style: `${charIndex} display: inline-block;`, children: CHAR, }) data.set(characterElement, 'isChar', true) @@ -63,9 +64,10 @@ export default function splitWordsAndChars(textNode, settings) { // splitting text into characters, the word element will contain the // wrapped character nodes for this word. If not, it will contain the // plain text content (WORD) + const wordIndex = settings.addIndex ? `--index-word: ${idx};` : '' wordElement = createElement(TAG_NAME, { class: `${settings.wordClass} ${settings.splitClass}`, - style: `--index-word: ${idx}; display: inline-block; ${ + style: `${wordIndex} display: inline-block; ${ types.words && settings.absolute ? `position: relative;` : '' }`, children: types.chars ? characterElementsForCurrentWord : WORD,