From 7b35dd5c36634d092542f143e57f42eb27f2aa44 Mon Sep 17 00:00:00 2001 From: Robert Ivanov Date: Thu, 2 Feb 2017 13:09:52 +0200 Subject: [PATCH 1/8] #11 wip --- main.scss | 2 ++ src/js/oCrossword.js | 11 ++++++++++- src/scss/_mobile.scss | 9 +++++++++ 3 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 src/scss/_mobile.scss diff --git a/main.scss b/main.scss index 2d487cc..ea7898c 100644 --- a/main.scss +++ b/main.scss @@ -15,3 +15,5 @@ $o-crossword-is-silent: true !default; // Set crossword to silent again to avoid being output twice $o-crossword-is-silent: true !global; } + +@import "src/scss/mobile"; diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 07a93b7..35e49e5 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -303,6 +303,14 @@ OCrossword.prototype.assemble = function assemble() { } const onResize = function onResize() { + var isMobile = false; + if(typeof screen != 'undefined' && screen.width <= 480) { + isMobile = true; + } else if (window.innerWidth <= 480) { + isMobile = true; + } + + cluesEl.classList.remove('magnify'); this.rootEl.classList.remove('collapsable-clues'); cluesEl.style.opacity = '0'; @@ -327,7 +335,8 @@ OCrossword.prototype.assemble = function assemble() { this.rootEl.classList.add('collapsable-clues'); if (cluesEl.className.indexOf('magnify') === -1) cluesEl.classList.add('magnify'); cluesEl.style.opacity = ''; - this._doFancyBehaviour = window.getComputedStyle(previewEl).display !== 'none'; + this._doFancyBehaviour = window.getComputedStyle(previewEl).display !== 'none' && !isMobile; + if (this._doFancyBehaviour) { cluesEl.style.marginLeft = gridWrapper.style.marginLeft = `${this._previewElWidth}px`; } else { diff --git a/src/scss/_mobile.scss b/src/scss/_mobile.scss new file mode 100644 index 0000000..2c23c88 --- /dev/null +++ b/src/scss/_mobile.scss @@ -0,0 +1,9 @@ +$break-phone: 480px; +@media screen and (max-width: $break-phone) { + .o-crossword table, .o-crossword .o-crossword-grid-wrapper .o-crossword-magic-input { + font-size: 1.2rem; + } + .o-crossword-clues-wrapper { + display: none; + } +} From 613393f8291ce7bb9eae72a98fe94b41a3275e92 Mon Sep 17 00:00:00 2001 From: Robert Ivanov Date: Thu, 2 Feb 2017 15:18:50 +0200 Subject: [PATCH 2/8] #11 further responsive improvements --- src/js/oCrossword.js | 13 +++++++++++-- src/scss/_mobile.scss | 2 +- src/scss/_orientation.scss | 1 - 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 35e49e5..4c4f9f3 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -304,10 +304,12 @@ OCrossword.prototype.assemble = function assemble() { const onResize = function onResize() { var isMobile = false; - if(typeof screen != 'undefined' && screen.width <= 480) { + if(typeof screen != 'undefined' && screen.width <= 750) { //phone isMobile = true; - } else if (window.innerWidth <= 480) { + } else if (window.innerWidth <= 750) { //phones that do not support screen and other small devices isMobile = true; + } else if (window.innerWidth > window.innerHeight && window.innerHeight <=750) { //rotated phones and small devices + } @@ -321,6 +323,11 @@ OCrossword.prototype.assemble = function assemble() { const height1 = d1.height; const width2 = d2.width; const height2 = d2.height; + + + + + let scale = height2/height1; if (scale > 0.2) scale = 0.2; this._cluesElHeight = height1; @@ -489,6 +496,8 @@ OCrossword.prototype.assemble = function assemble() { const clues = gridMap.get(cell); if (!clues) return; + cell.scrollIntoView(); + // iterate through list of answers associated with that cell let index = clues.indexOf(currentlySelectedGridItem); diff --git a/src/scss/_mobile.scss b/src/scss/_mobile.scss index 2c23c88..b47cafb 100644 --- a/src/scss/_mobile.scss +++ b/src/scss/_mobile.scss @@ -1,4 +1,4 @@ -$break-phone: 480px; +$break-phone: 750px; //iPhone 7 Plus width @media screen and (max-width: $break-phone) { .o-crossword table, .o-crossword .o-crossword-grid-wrapper .o-crossword-magic-input { font-size: 1.2rem; diff --git a/src/scss/_orientation.scss b/src/scss/_orientation.scss index ca43397..38fd59b 100644 --- a/src/scss/_orientation.scss +++ b/src/scss/_orientation.scss @@ -3,7 +3,6 @@ //since keyboard popping will make "orientation" wrong in some cases @media screen and (min-aspect-ratio: 13/9) and (max-width: 767px) { #main-container { - background-color: #4f1828; transform: rotate(-90deg); width: 100% /* screen width */ ; height: 100% /* screen height */ ; From a1ca7fb4c6c4d74042c196d912a8a2fb37ca0904 Mon Sep 17 00:00:00 2001 From: Robert Ivanov Date: Fri, 3 Feb 2017 15:38:57 +0200 Subject: [PATCH 3/8] #11 further responsive improvements 2 --- src/js/oCrossword.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 4c4f9f3..68ca641 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -309,7 +309,8 @@ OCrossword.prototype.assemble = function assemble() { } else if (window.innerWidth <= 750) { //phones that do not support screen and other small devices isMobile = true; } else if (window.innerWidth > window.innerHeight && window.innerHeight <=750) { //rotated phones and small devices - + isMobile = true; + document.getElementById('main-container').width = window.innerHeight + 'px !important'; } From 3fc483bceac8524425ea3fde5963e204b90c78df Mon Sep 17 00:00:00 2001 From: Robert Ivanov Date: Sun, 5 Feb 2017 14:10:40 +0200 Subject: [PATCH 4/8] #11 further responsive improvements 3 --- src/js/oCrossword.js | 76 ++++++++++++++++++++++++++++++++------ src/scss/_base.scss | 8 ++-- src/scss/_mobile.scss | 17 ++++++++- src/scss/_orientation.scss | 2 +- 4 files changed, 85 insertions(+), 18 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 68ca641..7810eef 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -128,13 +128,13 @@ function OCrossword(rootEl) { if (this.rootEl.dataset.oCrosswordData) { if (this.rootEl.dataset.oCrosswordData.startsWith('http')) { return fetch(this.rootEl.dataset.oCrosswordData) - .then(res => res.json()) + .then(res => res.json()) .then(json => buildGrid(rootEl, json)) - .then(() => this.assemble()); + .then(() => this.assemble()); } else { // assume this is json text return new Promise((resolve) => resolve( JSON.parse(this.rootEl.dataset.oCrosswordData) ) ) .then(json => buildGrid(rootEl, json)) - .then(() => this.assemble() ); + .then(() => this.assemble() ); } } } @@ -309,8 +309,8 @@ OCrossword.prototype.assemble = function assemble() { } else if (window.innerWidth <= 750) { //phones that do not support screen and other small devices isMobile = true; } else if (window.innerWidth > window.innerHeight && window.innerHeight <=750) { //rotated phones and small devices - isMobile = true; - document.getElementById('main-container').width = window.innerHeight + 'px !important'; + isMobile = true; + document.getElementById('main-container').width = window.innerHeight + 'px !important'; } @@ -325,19 +325,23 @@ OCrossword.prototype.assemble = function assemble() { const width2 = d2.width; const height2 = d2.height; - - - - let scale = height2/height1; if (scale > 0.2) scale = 0.2; + this._cluesElHeight = height1; this._previewElWidth = width1 * scale; this._height = height1 * scale; this._cluesPanHorizTarget = this._cluesPanHoriz = this._cluesPanHorizStart = -(width1 + this._previewElWidth + 20); this._scale = scale; - previewEl.style.marginBottom = `${-height1 * (1-scale)}px`; - previewEl.style.transform = `scale(${scale})`; + + if(isMobile) { + previewEl.style.removeProperty('marginBottom'); + previewEl.style.removeProperty('transform'); + } else { + previewEl.style.marginBottom = `${-height1 * (1-scale)}px`; + previewEl.style.transform = `scale(${scale})`; + } + wrapper.style.height = gridEl.height; clueDisplayer.style.width = width2 + 'px'; this.rootEl.classList.add('collapsable-clues'); @@ -350,6 +354,45 @@ OCrossword.prototype.assemble = function assemble() { } else { cluesEl.style.marginLeft = gridWrapper.style.marginLeft = ''; } + + + //update grid size to fill 100% on mobile view + const fullWidth = document.querySelector('#main-container').offsetWidth; + const gridTDs = gridEl.querySelectorAll('td'); + const gridSize = gridEl.querySelectorAll('tr').length; + const newTdWidth = parseInt(fullWidth / gridSize); + const inputEl = document.querySelector('.o-crossword-magic-input'); + console.log(inputEl); + + if(isMobile) { + for (let i = 0; i < gridTDs.length; i++) { + let td = gridTDs[i]; + td.style.width = newTdWidth + "px"; + td.style.height = newTdWidth + "px"; + td.style.maxWidth = "initial"; + } + previewEl.style.width = fullWidth + "px"; + previewEl.style.maxWidth = "initial"; + clueDisplayer.style.width = fullWidth + "px"; + inputEl.style.width = newTdWidth + "px"; + inputEl.style.height = newTdWidth + "px"; + inputEl.style.maxWidth = "initial"; + } else { + for (let i = 0; i < gridTDs.length; i++) { + let td = gridTDs[i]; + td.style.removeProperty('width'); + td.style.removeProperty('height'); + td.style.removeProperty('maxWidth'); + } + previewEl.style.removeProperty('width'); + previewEl.style.removeProperty('maxWidth'); + clueDisplayer.style.removeProperty('width'); + inputEl.style.removeProperty('width'); + inputEl.style.removeProperty('height'); + inputEl.style.removeProperty('maxWidth'); + } + //END update grid size to fill 100% on mobile view + }.bind(this); this.onResize = debounce(onResize, 100); @@ -497,7 +540,7 @@ OCrossword.prototype.assemble = function assemble() { const clues = gridMap.get(cell); if (!clues) return; - cell.scrollIntoView(); + cell.scrollIntoView(); // iterate through list of answers associated with that cell let index = clues.indexOf(currentlySelectedGridItem); @@ -579,6 +622,10 @@ OCrossword.prototype.assemble = function assemble() { onResize(); this.addEventListener(window, 'resize', this.onResize); } + + if(isiOS()) { + document.getElementsByTagName('body')[0].className += " iOS"; + } }; OCrossword.prototype.addEventListener = function(el, type, callback) { @@ -600,3 +647,8 @@ OCrossword.prototype.destroy = function destroy() { }; module.exports = OCrossword; + +function isiOS() { + var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; + return iOS; +} \ No newline at end of file diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 27f7fc0..fe8fd6e 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -193,24 +193,24 @@ .o-crossword-clues-down { span { @include oColorsFor(o-crossword-hidden-down, text); - @include oColorsFor(o-crossword-hidden-down, background); + //@include oColorsFor(o-crossword-hidden-down, background); } &:before { @include oColorsFor(o-crossword-hidden-down, text); - @include oColorsFor(o-crossword-hidden-down, background); + //@include oColorsFor(o-crossword-hidden-down, background); } } .o-crossword-clues-across { span { @include oColorsFor(o-crossword-hidden-across, text); - @include oColorsFor(o-crossword-hidden-across, background); + //@include oColorsFor(o-crossword-hidden-across, background); } &:before { @include oColorsFor(o-crossword-hidden-across, text); - @include oColorsFor(o-crossword-hidden-across, background); + //@include oColorsFor(o-crossword-hidden-across, background); } } } diff --git a/src/scss/_mobile.scss b/src/scss/_mobile.scss index b47cafb..b832634 100644 --- a/src/scss/_mobile.scss +++ b/src/scss/_mobile.scss @@ -4,6 +4,21 @@ $break-phone: 750px; //iPhone 7 Plus width font-size: 1.2rem; } .o-crossword-clues-wrapper { - display: none; + display: block; + } + + .o-crossword div.o-crossword-clues-wrapper { + position: relative; + } + + .o-crossword .o-crossword-clues li, .o-crossword .o-crossword-clues ul li { + line-height: 1.1em; + } + + .o-crossword-clues.magnify { + display: none !important; + } + .o-crossword-clues-wrapper { + pointer-events: all; } } diff --git a/src/scss/_orientation.scss b/src/scss/_orientation.scss index 38fd59b..395a55a 100644 --- a/src/scss/_orientation.scss +++ b/src/scss/_orientation.scss @@ -2,7 +2,7 @@ //it uses "min-aspect-ratio" to detect landscape, //since keyboard popping will make "orientation" wrong in some cases @media screen and (min-aspect-ratio: 13/9) and (max-width: 767px) { - #main-container { + body:not('iOS') #main-container { transform: rotate(-90deg); width: 100% /* screen width */ ; height: 100% /* screen height */ ; From 1f4f5cb3ce50b362ddeaf119f6649be89fc9dd83 Mon Sep 17 00:00:00 2001 From: Robert Ivanov Date: Sun, 5 Feb 2017 15:02:26 +0200 Subject: [PATCH 5/8] #11 further responsive improvements 4 --- src/js/oCrossword.js | 56 +++++++++++++++++++++---------------------- src/scss/_mobile.scss | 4 +++- 2 files changed, 31 insertions(+), 29 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 7810eef..2d67bac 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -13,7 +13,7 @@ function prevAll(node) { return nodes.slice(0, pos); }; -const Hammer = require('hammerjs'); +// const Hammer = require('hammerjs'); const HORIZ_PAN_SPRING = 0.2; function buildGrid( @@ -304,16 +304,12 @@ OCrossword.prototype.assemble = function assemble() { const onResize = function onResize() { var isMobile = false; - if(typeof screen != 'undefined' && screen.width <= 750) { //phone + if (window.innerWidth <= 400) { isMobile = true; - } else if (window.innerWidth <= 750) { //phones that do not support screen and other small devices + } else if (window.innerWidth > window.innerHeight && window.innerHeight <=400 ) { //rotated phones and small devices, but not iOS isMobile = true; - } else if (window.innerWidth > window.innerHeight && window.innerHeight <=750) { //rotated phones and small devices - isMobile = true; - document.getElementById('main-container').width = window.innerHeight + 'px !important'; } - cluesEl.classList.remove('magnify'); this.rootEl.classList.remove('collapsable-clues'); cluesEl.style.opacity = '0'; @@ -357,19 +353,22 @@ OCrossword.prototype.assemble = function assemble() { //update grid size to fill 100% on mobile view - const fullWidth = document.querySelector('#main-container').offsetWidth; + const fullWidth = Math.min(window.innerHeight, window.innerWidth); + document.getElementById('main-container').width = fullWidth + 'px !important'; const gridTDs = gridEl.querySelectorAll('td'); const gridSize = gridEl.querySelectorAll('tr').length; const newTdWidth = parseInt(fullWidth / gridSize); const inputEl = document.querySelector('.o-crossword-magic-input'); - console.log(inputEl); + console.log(isMobile); + console.log(fullWidth); if(isMobile) { for (let i = 0; i < gridTDs.length; i++) { let td = gridTDs[i]; td.style.width = newTdWidth + "px"; td.style.height = newTdWidth + "px"; td.style.maxWidth = "initial"; + td.style.minWidth = "initial"; } previewEl.style.width = fullWidth + "px"; previewEl.style.maxWidth = "initial"; @@ -383,6 +382,7 @@ OCrossword.prototype.assemble = function assemble() { td.style.removeProperty('width'); td.style.removeProperty('height'); td.style.removeProperty('maxWidth'); + td.style.removeProperty('minWidth'); } previewEl.style.removeProperty('width'); previewEl.style.removeProperty('maxWidth'); @@ -540,7 +540,7 @@ OCrossword.prototype.assemble = function assemble() { const clues = gridMap.get(cell); if (!clues) return; - cell.scrollIntoView(); + // cell.scrollIntoView(); // iterate through list of answers associated with that cell let index = clues.indexOf(currentlySelectedGridItem); @@ -596,26 +596,26 @@ OCrossword.prototype.assemble = function assemble() { } }.bind(this); - this.hammerMC = new Hammer.Manager(this.rootEl, { - recognizers: [ - [Hammer.Tap], - [Hammer.Pan, { direction: Hammer.DIRECTION_ALL }], - [Hammer.Press, { time: 150 }], - [Hammer.Swipe, { direction: Hammer.DIRECTION_ALL }] - ] - }); + // this.hammerMC = new Hammer.Manager(this.rootEl, { + // recognizers: [ + // [Hammer.Tap], + // [Hammer.Pan, { direction: Hammer.DIRECTION_ALL }], + // [Hammer.Press, { time: 150 }], + // [Hammer.Swipe, { direction: Hammer.DIRECTION_ALL }] + // ] + // }); this.addEventListener(cluesEl, 'mousemove', e => highlightGridByCluesEl(e.target)); - this.hammerMC.on('panup pandown swipeup swipedown panstart press', onPanVert); - this.hammerMC.on('panleft panright', onPanHoriz); - this.hammerMC.on('panend pressup pancancel', onPanEnd); - this.hammerMC.on('tap', onTap); - this.hammerMC.on('hammer.input', function (e) { - if (!cluesEl.contains(e.target) && !gridWrapper.contains(e.target)) { - e.preventDefault(); - } - }); + // this.hammerMC.on('panup pandown swipeup swipedown panstart press', onPanVert); + // this.hammerMC.on('panleft panright', onPanHoriz); + // this.hammerMC.on('panend pressup pancancel', onPanEnd); + // this.hammerMC.on('tap', onTap); + // this.hammerMC.on('hammer.input', function (e) { + // if (!cluesEl.contains(e.target) && !gridWrapper.contains(e.target)) { + // e.preventDefault(); + // } + // }); this.addEventListener(this.rootEl, 'click', onPanEnd); @@ -642,7 +642,7 @@ OCrossword.prototype.removeAllEventListeners = function() { OCrossword.prototype.destroy = function destroy() { this.removeAllEventListeners(); - if (this.hammerMC) this.hammerMC.destroy(); + // if (this.hammerMC) this.hammerMC.destroy(); if (this._raf) cancelAnimationFrame(this._raf); }; diff --git a/src/scss/_mobile.scss b/src/scss/_mobile.scss index b832634..f80f79f 100644 --- a/src/scss/_mobile.scss +++ b/src/scss/_mobile.scss @@ -1,4 +1,4 @@ -$break-phone: 750px; //iPhone 7 Plus width +$break-phone: 400px; @media screen and (max-width: $break-phone) { .o-crossword table, .o-crossword .o-crossword-grid-wrapper .o-crossword-magic-input { font-size: 1.2rem; @@ -9,6 +9,8 @@ $break-phone: 750px; //iPhone 7 Plus width .o-crossword div.o-crossword-clues-wrapper { position: relative; + width: auto; + overflow: auto; } .o-crossword .o-crossword-clues li, .o-crossword .o-crossword-clues ul li { From ee1e6509417b202a6431dfa36286e7c41800bb96 Mon Sep 17 00:00:00 2001 From: Robert Ivanov Date: Sun, 5 Feb 2017 15:11:52 +0200 Subject: [PATCH 6/8] #11 scroll enabled --- src/js/oCrossword.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 2d67bac..8a7445a 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -13,7 +13,7 @@ function prevAll(node) { return nodes.slice(0, pos); }; -// const Hammer = require('hammerjs'); +const Hammer = require('hammerjs'); const HORIZ_PAN_SPRING = 0.2; function buildGrid( @@ -596,21 +596,21 @@ OCrossword.prototype.assemble = function assemble() { } }.bind(this); - // this.hammerMC = new Hammer.Manager(this.rootEl, { - // recognizers: [ - // [Hammer.Tap], + this.hammerMC = new Hammer.Manager(this.rootEl, { + recognizers: [ + [Hammer.Tap]//, // [Hammer.Pan, { direction: Hammer.DIRECTION_ALL }], // [Hammer.Press, { time: 150 }], // [Hammer.Swipe, { direction: Hammer.DIRECTION_ALL }] - // ] - // }); + ] + }); this.addEventListener(cluesEl, 'mousemove', e => highlightGridByCluesEl(e.target)); // this.hammerMC.on('panup pandown swipeup swipedown panstart press', onPanVert); // this.hammerMC.on('panleft panright', onPanHoriz); // this.hammerMC.on('panend pressup pancancel', onPanEnd); - // this.hammerMC.on('tap', onTap); + this.hammerMC.on('tap', onTap); // this.hammerMC.on('hammer.input', function (e) { // if (!cluesEl.contains(e.target) && !gridWrapper.contains(e.target)) { // e.preventDefault(); @@ -642,7 +642,7 @@ OCrossword.prototype.removeAllEventListeners = function() { OCrossword.prototype.destroy = function destroy() { this.removeAllEventListeners(); - // if (this.hammerMC) this.hammerMC.destroy(); + if (this.hammerMC) this.hammerMC.destroy(); if (this._raf) cancelAnimationFrame(this._raf); }; From daa676be75998e1d0323f28794858e794c36dc86 Mon Sep 17 00:00:00 2001 From: Robert Ivanov Date: Sun, 5 Feb 2017 17:19:23 +0200 Subject: [PATCH 7/8] #11 further responsive improvements 5 --- main.scss | 1 + src/js/oCrossword.js | 28 ++++++++++++++++------------ src/scss/_base.scss | 2 +- src/scss/_mobile.scss | 1 - src/scss/_orientation.scss | 2 +- src/scss/_variables.scss | 1 + 6 files changed, 20 insertions(+), 15 deletions(-) create mode 100644 src/scss/_variables.scss diff --git a/main.scss b/main.scss index ea7898c..58b838b 100644 --- a/main.scss +++ b/main.scss @@ -4,6 +4,7 @@ $o-crossword-is-silent: true !default; @import "o-grid/main"; @import "o-typography/main"; +@import "src/scss/variables"; @import "src/scss/color-use-cases"; @import "src/scss/mixins"; @import "src/scss/base"; diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 8a7445a..6b09fc8 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -304,9 +304,9 @@ OCrossword.prototype.assemble = function assemble() { const onResize = function onResize() { var isMobile = false; - if (window.innerWidth <= 400) { + if (window.innerWidth <= 739) { isMobile = true; - } else if (window.innerWidth > window.innerHeight && window.innerHeight <=400 ) { //rotated phones and small devices, but not iOS + } else if (window.innerWidth > window.innerHeight && window.innerHeight <=739 ) { //rotated phones and small devices, but not iOS isMobile = true; } @@ -330,8 +330,10 @@ OCrossword.prototype.assemble = function assemble() { this._cluesPanHorizTarget = this._cluesPanHoriz = this._cluesPanHorizStart = -(width1 + this._previewElWidth + 20); this._scale = scale; + magicInput.style.display = 'none'; + if(isMobile) { - previewEl.style.removeProperty('marginBottom'); + previewEl.style.removeProperty('margin-bottom'); previewEl.style.removeProperty('transform'); } else { previewEl.style.marginBottom = `${-height1 * (1-scale)}px`; @@ -357,11 +359,9 @@ OCrossword.prototype.assemble = function assemble() { document.getElementById('main-container').width = fullWidth + 'px !important'; const gridTDs = gridEl.querySelectorAll('td'); const gridSize = gridEl.querySelectorAll('tr').length; - const newTdWidth = parseInt(fullWidth / gridSize); + const newTdWidth = parseInt(fullWidth / (gridSize + 1) ); const inputEl = document.querySelector('.o-crossword-magic-input'); - console.log(isMobile); - console.log(fullWidth); if(isMobile) { for (let i = 0; i < gridTDs.length; i++) { let td = gridTDs[i]; @@ -372,7 +372,11 @@ OCrossword.prototype.assemble = function assemble() { } previewEl.style.width = fullWidth + "px"; previewEl.style.maxWidth = "initial"; - clueDisplayer.style.width = fullWidth + "px"; + clueDisplayer.style.width = (newTdWidth * (gridSize) +1) + "px"; + clueDisplayer.style.marginLeft = "auto"; + clueDisplayer.style.marginRight = "auto"; + gridEl.style.marginLeft = "auto"; + gridEl.style.marginRight = "auto"; inputEl.style.width = newTdWidth + "px"; inputEl.style.height = newTdWidth + "px"; inputEl.style.maxWidth = "initial"; @@ -381,15 +385,15 @@ OCrossword.prototype.assemble = function assemble() { let td = gridTDs[i]; td.style.removeProperty('width'); td.style.removeProperty('height'); - td.style.removeProperty('maxWidth'); - td.style.removeProperty('minWidth'); + td.style.removeProperty('max-width'); + td.style.removeProperty('min-width'); } previewEl.style.removeProperty('width'); - previewEl.style.removeProperty('maxWidth'); - clueDisplayer.style.removeProperty('width'); + previewEl.style.removeProperty('max-width'); + // clueDisplayer.style.removeProperty('width'); inputEl.style.removeProperty('width'); inputEl.style.removeProperty('height'); - inputEl.style.removeProperty('maxWidth'); + inputEl.style.removeProperty('max-width'); } //END update grid size to fill 100% on mobile view diff --git a/src/scss/_base.scss b/src/scss/_base.scss index fe8fd6e..2ae477f 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -134,7 +134,7 @@ } .o-crossword-clues-wrapper { - position: absolute; + position: relative; pointer-events: none; z-index: 2; width: 20em; diff --git a/src/scss/_mobile.scss b/src/scss/_mobile.scss index f80f79f..7794bb0 100644 --- a/src/scss/_mobile.scss +++ b/src/scss/_mobile.scss @@ -1,4 +1,3 @@ -$break-phone: 400px; @media screen and (max-width: $break-phone) { .o-crossword table, .o-crossword .o-crossword-grid-wrapper .o-crossword-magic-input { font-size: 1.2rem; diff --git a/src/scss/_orientation.scss b/src/scss/_orientation.scss index 395a55a..dd26646 100644 --- a/src/scss/_orientation.scss +++ b/src/scss/_orientation.scss @@ -1,7 +1,7 @@ //below forces portrait mode on mobile phones //it uses "min-aspect-ratio" to detect landscape, //since keyboard popping will make "orientation" wrong in some cases -@media screen and (min-aspect-ratio: 13/9) and (max-width: 767px) { +@media screen and (min-aspect-ratio: 13/9) and (max-width: $break-phone) { body:not('iOS') #main-container { transform: rotate(-90deg); width: 100% /* screen width */ ; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..6cf6fe1 --- /dev/null +++ b/src/scss/_variables.scss @@ -0,0 +1 @@ +$break-phone: 739px; From 28be012be5169c4c61369a49eb642521d890e68d Mon Sep 17 00:00:00 2001 From: Robert Ivanov Date: Wed, 8 Feb 2017 23:37:40 +0200 Subject: [PATCH 8/8] #11 cleanup --- src/js/oCrossword.js | 122 +------------------------------------------ 1 file changed, 2 insertions(+), 120 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 6b09fc8..f846274 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -410,91 +410,6 @@ OCrossword.prototype.assemble = function assemble() { } }.bind(this)); - const onPanVert = function onPanVert(e) { - if(!this._doFancyBehaviour) return; - getRelativeCenter(e, previewEl); - if (e.isFirst || (e.type.indexOf('start') !== -1 && (e.additionalEvent === 'panup' || e.additionalEvent === 'pandown'))){ - if (e.relativeCenter.x < this._previewElWidth) { - if (cluesEl.className.indexOf('magnify-drag') === -1) cluesEl.classList.add('magnify-drag'); - } - } - if (cluesEl.className.indexOf('magnify-drag') !== -1) { - - if (cluesEl.className.indexOf('magnify') === -1) cluesEl.classList.add('magnify'); - if (cluesEl.className.indexOf('expanded') !== -1) cluesEl.classList.remove('expanded'); - if (cluesEl.scrollTop) cluesEl.scrollTop = 0; - this._cluesPanHorizTarget = this._cluesPanHorizStart; - this._isGrabbed = true; - - const hoverEl = document.elementsFromPoint(e.center.x, e.center.y).filter(el => !!el.dataset.oCrosswordNumber)[0]; - if (hoverEl) { - const number = hoverEl.dataset.oCrosswordNumber; - const direction = hoverEl.dataset.oCrosswordDirection; - setClue(number, direction); - highlightGridByCluesEl(hoverEl); - } - - e.preventDefault(); - const proportion = (e.relativeCenter.y/this._height); - const offset = this._cluesElHeight * proportion; - - for (const li of cluesUlEls) { - li.style.transform = `translateY(${-offset}px)`; - } - - cluesEl.style.transform = `translateY(${e.relativeCenter.y}px) translateY(-50%)`; - } - }.bind(this); - - const onPanHoriz = function onPanHoriz(e) { - if(!this._doFancyBehaviour) return; - getRelativeCenter(e, previewEl); - if ( - cluesEl.contains(e.target) || - (e.relativeCenter.x < this._previewElWidth || this._isGrabbed) && - Math.abs(e.deltaX) > 20 - ) { - this._isGrabbed = true; - e.preventDefault(); - if (cluesEl.className.indexOf('magnify-drag') !== -1) cluesEl.classList.remove('magnify-drag'); - if (cluesEl.className.indexOf('magnify') !== -1) cluesEl.classList.remove('magnify'); - if (cluesEl.className.indexOf('expanded') === -1) { - cluesEl.classList.add('expanded'); - this._cluesElWidth = cluesEl.clientWidth; - } - for (const li of cluesUlEls) { - li.style.transform = ''; - } - let offset = this._cluesPanHoriz + e.deltaX; - if (offset + this._cluesElWidth - 5 < e.relativeCenter.x) { - this._cluesPanHoriz += 8; - offset = this._cluesPanHoriz + e.deltaX; - } - cluesEl.style.transform = `translateX(${offset}px)`; - } - }.bind(this); - - const onPanEnd = function onPanEnd(e) { - if(!this._doFancyBehaviour) return; - if ( this._isGrabbed && cluesEl.className.indexOf('expanded') !== -1 ) { - this._cluesPanHoriz = e.deltaX + this._cluesPanHoriz; - this._isGrabbed = false; - if (this._cluesPanHoriz > -this._previewElWidth/2) { - this._cluesPanHorizTarget = 0; - } else { - this._cluesPanHorizTarget = this._cluesPanHorizStart; - } - } else if ( - this._isGrabbed && cluesEl.className.indexOf('magnify') !== -1 - ) { - this._isGrabbed = false; - cluesEl.classList.remove('magnify-drag'); - cluesEl.classList.add('magnify'); - cluesEl.classList.remove('expanded'); - } - }.bind(this); - - function highlightGridByCluesEl(el) { while(el.parentNode) { if (el.dataset.oCrosswordNumber) { @@ -544,7 +459,7 @@ OCrossword.prototype.assemble = function assemble() { const clues = gridMap.get(cell); if (!clues) return; - // cell.scrollIntoView(); + // cell.scrollIntoView(); //TODO: this works OK-ish for vertical oriented phones, could be explored // iterate through list of answers associated with that cell let index = clues.indexOf(currentlySelectedGridItem); @@ -578,50 +493,17 @@ OCrossword.prototype.assemble = function assemble() { )); } if(!this._doFancyBehaviour) return; - const previewHit = previewEl.contains(e.target); - if (previewHit || cluesEl.contains(e.target)) { - getRelativeCenter(e, previewEl); - if (cluesEl.className.indexOf('magnify-drag') !== -1) cluesEl.classList.remove('magnify-drag'); - if (cluesEl.className.indexOf('magnify') !== -1) cluesEl.classList.remove('magnify'); - if (cluesEl.className.indexOf('expanded') === -1) cluesEl.classList.add('expanded'); - for (const li of cluesUlEls) { - li.style.transform = ''; - } - - // if the preview is clicked on open it and bring to that point - // if the box is clicked on highlight that row and close it - if (previewHit) { - cluesEl.scrollTop = e.relativeCenter.y / this._scale; - this._cluesPanHorizTarget = 0; - } else { - this._cluesPanHorizTarget = this._cluesPanHorizTarget === 0 ? this._cluesPanHorizStart : 0; - highlightGridByCluesEl(e.target); - } - } }.bind(this); this.hammerMC = new Hammer.Manager(this.rootEl, { recognizers: [ - [Hammer.Tap]//, - // [Hammer.Pan, { direction: Hammer.DIRECTION_ALL }], - // [Hammer.Press, { time: 150 }], - // [Hammer.Swipe, { direction: Hammer.DIRECTION_ALL }] + [Hammer.Tap] ] }); this.addEventListener(cluesEl, 'mousemove', e => highlightGridByCluesEl(e.target)); - // this.hammerMC.on('panup pandown swipeup swipedown panstart press', onPanVert); - // this.hammerMC.on('panleft panright', onPanHoriz); - // this.hammerMC.on('panend pressup pancancel', onPanEnd); this.hammerMC.on('tap', onTap); - // this.hammerMC.on('hammer.input', function (e) { - // if (!cluesEl.contains(e.target) && !gridWrapper.contains(e.target)) { - // e.preventDefault(); - // } - // }); - - this.addEventListener(this.rootEl, 'click', onPanEnd); onResize(); this.addEventListener(window, 'resize', this.onResize);