From dc5f28e756d5bd12cf4e542e848fb7a1f4afd237 Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Mon, 8 May 2017 14:09:37 +0100 Subject: [PATCH 1/5] add select word from list --- src/js/oCrossword.js | 48 +++++++++++++++++++++++++++++++++----------- src/scss/_base.scss | 2 ++ 2 files changed, 38 insertions(+), 12 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index a95b774..da42909 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -266,6 +266,12 @@ OCrossword.prototype.assemble = function assemble() { magicInput.type = 'text'; magicInput.style.display = 'none'; + this.hammerMC = new Hammer.Manager(this.rootEl, { + recognizers: [ + [Hammer.Tap] + ] + }); + this.addEventListener(magicInput, 'keydown', function (e) { e.preventDefault(); @@ -299,8 +305,6 @@ OCrossword.prototype.assemble = function assemble() { progress(); }); - //on keyup rem receiving-input class - const progress = debounce(function progress(direction) { direction = direction === -1 ? -1 : 1; const oldMagicInputEl = magicInputTargetEl; @@ -501,11 +505,29 @@ OCrossword.prototype.assemble = function assemble() { } const onTap = function onTap(e) { - if (e.target === magicInput) { - e.target = magicInputTargetEl; + let target; + let clueDetails; + + if(e.target.nodeName === 'TD' || e.target.nodeName === 'INPUT') { + target = e.target; + } else { + const num = e.target.parentElement.getAttribute('data-o-crossword-number'); + clueDetails = {}; + clueDetails.number = num; + clueDetails.direction = e.target.parentElement.getAttribute('data-o-crossword-direction'); + clueDetails.answerLength = e.target.parentElement.getAttribute('data-o-crossword-answer-length'); + const el = gridEl.querySelector(`td[data-o-crossword-number="${num}"]`); + target = el; + + //TODO: lock direction + } + + if (target === magicInput) { + target = magicInputTargetEl; } - if (gridEl.contains(e.target)) { - let cell = e.target; + + if (gridEl.contains(target)) { + let cell = target; while(cell.parentNode) { if (cell.tagName === 'TD') { break; @@ -524,12 +546,14 @@ OCrossword.prototype.assemble = function assemble() { // if a new item is selected find what ever matches the current selection if (index === -1 && currentlySelectedGridItem) { const oldClue = currentlySelectedGridItem; + currentlySelectedGridItem = clues.find(item => ( item.direction === oldClue.direction && item.number === oldClue.number && item.answerLength === oldClue.answerLength )); } + if (index !== -1 || !currentlySelectedGridItem) { // the same cell has been clicked on again so @@ -537,6 +561,12 @@ OCrossword.prototype.assemble = function assemble() { currentlySelectedGridItem = clues[index + 1]; } + if(clueDetails !== undefined) { + currentlySelectedGridItem.number = clueDetails.number; + currentlySelectedGridItem.direction = clueDetails.direction; + currentlySelectedGridItem.answerLength = clueDetails.answerLength; + } + highlightGridByNumber( currentlySelectedGridItem.number, currentlySelectedGridItem.direction, @@ -552,12 +582,6 @@ OCrossword.prototype.assemble = function assemble() { if(!this._doFancyBehaviour) return; }.bind(this); - this.hammerMC = new Hammer.Manager(this.rootEl, { - recognizers: [ - [Hammer.Tap] - ] - }); - this.addEventListener(cluesEl, 'mousemove', e => highlightGridByCluesEl(e.target)); this.hammerMC.on('tap', onTap); diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 3d66416..7f0e495 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -167,6 +167,8 @@ line-height: 1.5em; padding-bottom: 0.5em; margin-left: 1em; + cursor: pointer; + .has-hover { color: grey; } From 515d8b6acafff814ed775adfb72278d2dbb9803d Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Tue, 9 May 2017 10:15:45 +0100 Subject: [PATCH 2/5] implemented grid focus from clue list --- src/js/oCrossword.js | 67 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 61 insertions(+), 6 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index da42909..0a137fc 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -266,6 +266,8 @@ OCrossword.prototype.assemble = function assemble() { magicInput.type = 'text'; magicInput.style.display = 'none'; + let blockHighlight = false; + this.hammerMC = new Hammer.Manager(this.rootEl, { recognizers: [ [Hammer.Tap] @@ -329,6 +331,7 @@ OCrossword.prototype.assemble = function assemble() { magicInput.value = ''; magicInput.blur(); magicInput.style.display = 'none'; + blockHighlight = false; }, 16); this.addEventListener(magicInput, 'focus', magicInput.select()); @@ -472,6 +475,8 @@ OCrossword.prototype.assemble = function assemble() { }.bind(this)); function highlightGridByCluesEl(el) { + if(blockHighlight) return; + while(el.parentNode) { if (el.dataset.oCrosswordNumber) { highlightGridByNumber(Number(el.dataset.oCrosswordNumber), el.dataset.oCrosswordDirection, el.dataset.oCrosswordAnswerLength); @@ -504,22 +509,72 @@ OCrossword.prototype.assemble = function assemble() { gridElsToHighlight.forEach(el => el.dataset.oCrosswordHighlighted = direction); } + function unsetClue(number, direction, length) { + const el = cluesEl.querySelector(`li[data-o-crossword-number="${number}"][data-o-crossword-direction="${direction}"]`); + if (el) { + clueDisplayer.textContent = ''; + const els = Array.from(cluesEl.getElementsByClassName('has-hover')); + els.filter(el2 => el2 !== el).forEach(el => el.classList.remove('has-hover')); + el.classList.remove('has-hover'); + } + } + + let previousClueSelection = null; + + function isEquivalent(a, b) { + var aProps = Object.getOwnPropertyNames(a); + var bProps = Object.getOwnPropertyNames(b); + + if (aProps.length != bProps.length) { + return false; + } + + for (var i = 0; i < aProps.length; i++) { + var propName = aProps[i]; + if (a[propName] !== b[propName]) { + return false; + } + } + + return true; + } + + function toggleClueSelection(clue) { + if(previousClueSelection !== null && isEquivalent(previousClueSelection, clue)) { + // unsetClue(clue.number, clue.direction, clue.answerLength); + //TODO: rem highlight! + blockHighlight = false; + previousClueSelection = null; + return; + } + + blockHighlight = true; + previousClueSelection = clue; + } + + //TODO: disable block highlight on grid click/different clue. + //TODO: handle click on li instead of span. + const onTap = function onTap(e) { let target; let clueDetails; + blockHighlight = false; if(e.target.nodeName === 'TD' || e.target.nodeName === 'INPUT') { target = e.target; } else { - const num = e.target.parentElement.getAttribute('data-o-crossword-number'); + const defEl = (e.target.nodeName === 'SPAN')?e.target.parentElement:e.target; + + const num = defEl.getAttribute('data-o-crossword-number'); clueDetails = {}; clueDetails.number = num; - clueDetails.direction = e.target.parentElement.getAttribute('data-o-crossword-direction'); - clueDetails.answerLength = e.target.parentElement.getAttribute('data-o-crossword-answer-length'); + clueDetails.direction = defEl.getAttribute('data-o-crossword-direction'); + clueDetails.answerLength = defEl.getAttribute('data-o-crossword-answer-length'); + + toggleClueSelection(clueDetails); + const el = gridEl.querySelector(`td[data-o-crossword-number="${num}"]`); target = el; - - //TODO: lock direction } if (target === magicInput) { @@ -542,6 +597,7 @@ OCrossword.prototype.assemble = function assemble() { // iterate through list of answers associated with that cell let index = clues.indexOf(currentlySelectedGridItem); + console.log('index::', index); // if a new item is selected find what ever matches the current selection if (index === -1 && currentlySelectedGridItem) { @@ -555,7 +611,6 @@ OCrossword.prototype.assemble = function assemble() { } if (index !== -1 || !currentlySelectedGridItem) { - // the same cell has been clicked on again so if (index + 1 === clues.length) index = -1; currentlySelectedGridItem = clues[index + 1]; From 1f24a099e751b9756d53f765acaed92f1806153f Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Tue, 9 May 2017 11:05:10 +0100 Subject: [PATCH 3/5] implement clue toggle --- src/js/oCrossword.js | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 0a137fc..ceec6d3 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -327,10 +327,9 @@ OCrossword.prototype.assemble = function assemble() { } } + unsetClue(magicInputNextEls.length, direction); magicInputNextEls = null; magicInput.value = ''; - magicInput.blur(); - magicInput.style.display = 'none'; blockHighlight = false; }, 16); this.addEventListener(magicInput, 'focus', magicInput.select()); @@ -509,14 +508,23 @@ OCrossword.prototype.assemble = function assemble() { gridElsToHighlight.forEach(el => el.dataset.oCrosswordHighlighted = direction); } - function unsetClue(number, direction, length) { + function unsetClue(number, direction) { const el = cluesEl.querySelector(`li[data-o-crossword-number="${number}"][data-o-crossword-direction="${direction}"]`); + const els = Array.from(gridEl.querySelectorAll('td[data-o-crossword-highlighted]')); + + for (const o of els) { + delete o.dataset.oCrosswordHighlighted; + } + if (el) { clueDisplayer.textContent = ''; const els = Array.from(cluesEl.getElementsByClassName('has-hover')); - els.filter(el2 => el2 !== el).forEach(el => el.classList.remove('has-hover')); + els.forEach(el => el.classList.remove('has-hover')); el.classList.remove('has-hover'); } + + magicInput.blur(); + magicInput.style.display = 'none'; } let previousClueSelection = null; @@ -541,19 +549,17 @@ OCrossword.prototype.assemble = function assemble() { function toggleClueSelection(clue) { if(previousClueSelection !== null && isEquivalent(previousClueSelection, clue)) { - // unsetClue(clue.number, clue.direction, clue.answerLength); - //TODO: rem highlight! + unsetClue(clue.number, clue.direction); blockHighlight = false; previousClueSelection = null; - return; + return false; } blockHighlight = true; previousClueSelection = clue; - } - //TODO: disable block highlight on grid click/different clue. - //TODO: handle click on li instead of span. + return true; + } const onTap = function onTap(e) { let target; @@ -571,7 +577,7 @@ OCrossword.prototype.assemble = function assemble() { clueDetails.direction = defEl.getAttribute('data-o-crossword-direction'); clueDetails.answerLength = defEl.getAttribute('data-o-crossword-answer-length'); - toggleClueSelection(clueDetails); + if(!toggleClueSelection(clueDetails)) return; const el = gridEl.querySelector(`td[data-o-crossword-number="${num}"]`); target = el; @@ -597,7 +603,6 @@ OCrossword.prototype.assemble = function assemble() { // iterate through list of answers associated with that cell let index = clues.indexOf(currentlySelectedGridItem); - console.log('index::', index); // if a new item is selected find what ever matches the current selection if (index === -1 && currentlySelectedGridItem) { From f1155ed699d29cf7d0bcdb6a0bce7760536c3e22 Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Tue, 9 May 2017 11:35:12 +0100 Subject: [PATCH 4/5] add colour to selected clue --- src/scss/_base.scss | 4 ++-- src/scss/_color-use-cases.scss | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 7f0e495..e6b346b 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -168,9 +168,9 @@ padding-bottom: 0.5em; margin-left: 1em; cursor: pointer; - + .has-hover { - color: grey; + @include oColorsFor(o-crossword-clue-highlight, text); } } } diff --git a/src/scss/_color-use-cases.scss b/src/scss/_color-use-cases.scss index 9d12cb6..30c4ca3 100644 --- a/src/scss/_color-use-cases.scss +++ b/src/scss/_color-use-cases.scss @@ -5,3 +5,4 @@ @include oColorsSetUseCase(o-crossword-hidden-down, background, 'grey-tint1'); @include oColorsSetUseCase(o-crossword-hidden-across, text, 'black'); @include oColorsSetUseCase(o-crossword-hidden-down, text, 'black'); +@include oColorsSetUseCase(o-crossword-clue-highlight, text, 'claret-1'); From 667e356b29314a22447cba312ffa3ff8a1630098 Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Tue, 9 May 2017 11:43:16 +0100 Subject: [PATCH 5/5] lock grid selection too --- src/js/oCrossword.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index ceec6d3..211f44c 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -568,6 +568,7 @@ OCrossword.prototype.assemble = function assemble() { if(e.target.nodeName === 'TD' || e.target.nodeName === 'INPUT') { target = e.target; + blockHighlight = true; } else { const defEl = (e.target.nodeName === 'SPAN')?e.target.parentElement:e.target;