diff --git a/demo/mobile.html b/demo/mobile.html index 66cb2b2..e85c3d9 100644 --- a/demo/mobile.html +++ b/demo/mobile.html @@ -25,14 +25,6 @@ height: 100%; } - iron-swipeable-pages > * { - -webkit-user-select: none; /* Chrome all / Safari all */ - -moz-user-select: none; /* Firefox all */ - -ms-user-select: none; /* IE 10+ */ - user-select: none; /* Likely future */ - cursor: default; - } - div { color: white; font-size: 2rem; diff --git a/iron-swipeable-pages.html b/iron-swipeable-pages.html index 95e3fa6..649d9d6 100644 --- a/iron-swipeable-pages.html +++ b/iron-swipeable-pages.html @@ -168,6 +168,24 @@ this.setScrollDirection('y'); }, + attached: function() { + document.addEventListener("selectionchange", this._onSelectionChange.bind(this)); + }, + + detached: function() { + document.removeEventListener("selectionchange", this._onSelectionChange.bind(this)); + }, + + _onSelectionChange: function(event) { + var selection = document.getSelection(); + var range = selection ? selection.getRangeAt(0) : undefined; + if (range && range.startOffset != range.endOffset) { + this._swipeDisabled = true; + } else { + this._swipeDisabled = false; + } + }, + // Element page set up _onItemsChanged: function(event) { @@ -183,14 +201,14 @@ _addPage: function(page) { if (page.nodeType !== Node.ELEMENT_NODE) return; - // TODO PG: check for webkit 'webkitTransitionEnd' + this.listen(page, 'webkitTransitionEnd', '_onTransitionEnd'); this.listen(page, 'transitionend', '_onTransitionEnd'); }, _removePage: function(page) { if (page.nodeType !== Node.ELEMENT_NODE) return; - // TODO PG: check for webkit 'webkitTransitionEnd' + this.unlisten(page, 'webkitTransitionEnd', '_onTransitionEnd'); this.unlisten(page, 'transitionend', '_onTransitionEnd'); }, @@ -212,8 +230,7 @@ _onTrack: function(event) { var track = event.detail; - if (this.noCycle && !this._canCycle(track)) { - // TODO PG: eventually provide an animation to show the swiping blocking + if (this._swipeDisabled || (this.noCycle && !this._canCycle(track))) { return; }