#93 preventing scrolls if element is already in view. It still has wi…

…erd scroll behavior.
interactionlab · Mar 15, 2018 · 1ce841c · 1ce841c
1 parent 8815e46
commit 1ce841c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 20 deletions.
diff --git a/views/components/analysis/entitiesview.vue b/views/components/analysis/entitiesview.vue
@@ -242,7 +242,7 @@
                         searched = false;
                     }
                     if (query !== '') {
-                        let wordids = []
+                        let wordids = [];
                         for (let k = 0; k < sortedtokens[i].length; k++) {
                             wordids.push(sortedtokens[i][k].wordID);
                         }
@@ -305,6 +305,17 @@
             saveResults: function () {
                 //console.log('TODO: Trying to save but not implemented.');
             },
+            isElementInViewport: function (el) {
+                console.log('element here is: ' + el);
+
+                let rect = el.getBoundingClientRect();
+                return (
+                    rect.top >= 0 &&
+                    rect.left >= 0 &&
+                    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
+                    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
+                );
+            },
         },
         computed: {
             numberOfPersons: function () {
@@ -392,10 +403,11 @@
                     if (hoverdata.semanticClass === 'PERSON') {
                         if (typeof this.$refs["personresults"] !== 'undefined' && this.$refs["personresults"].length > 0) {
                             for (let i = 0; i < this.$refs["personresults"].length; i++) {
-                                let refElement = this.$refs.personresults[i]
+                                let refElement = this.$refs.personresults[i];
                                 if (refElement.researchdata.sourcequery.wordids.indexOf(newwordid) > -1) {
-                                    if (hoverdata.hoverstarted == "text")
+                                    if (hoverdata.hoverstarted === "text" && !this.isElementInViewport(refElement.$el)) {
                                         refElement.$el.scrollIntoView();
+                                    }
 
                                     bb = refElement.$el.getBoundingClientRect();
                                     wordtomarkonhoverDUMMY = refElement.researchdata.sourcequery.wordids
@@ -407,9 +419,9 @@
                     } else if (hoverdata.semanticClass === 'LOCATION') {
                         if (typeof this.$refs["locationresults"] !== 'undefined' && this.$refs["locationresults"].length > 0) {
                             for (let i = 0; i < this.$refs["locationresults"].length; i++) {
-                                let refElement = this.$refs.locationresults[i]
+                                let refElement = this.$refs.locationresults[i];
                                 if (refElement.researchdata.sourcequery.wordids.indexOf(newwordid) > -1) {
-                                    if (hoverdata.hoverstarted === "text")
+                                    if (hoverdata.hoverstarted === "text" && !this.isElementInViewport(refElement.$el))
                                         refElement.$el.scrollIntoView();
 
                                     bb = refElement.$el.getBoundingClientRect();
@@ -422,9 +434,9 @@
                     } else if (hoverdata.semanticClass === "ORGANIZATION") {
                         if (typeof this.$refs["organisazionresults"] !== 'undefined' && this.$refs["organisazionresults"].length > 0) {
                             for (let i = 0; i < this.$refs["organisazionresults"].length; i++) {
-                                let refElement = this.$refs.organisazionresults[i]
+                                let refElement = this.$refs.organisazionresults[i];
                                 if (refElement.researchdata.sourcequery.wordids.indexOf(newwordid) > -1) {
-                                    if (hoverdata.hoverstarted === "text")
+                                    if (hoverdata.hoverstarted === "text" && !this.isElementInViewport(refElement.$el))
                                         refElement.$el.scrollIntoView();
 
                                     bb = refElement.$el.getBoundingClientRect();
@@ -437,9 +449,9 @@
                     } else if (hoverdata.semanticClass === "MISC") {
                         if (typeof this.$refs["miscresults"] !== 'undefined' && this.$refs["miscresults"].length > 0) {
                             for (let i = 0; i < this.$refs["miscresults"].length; i++) {
-                                let refElement = this.$refs.miscresults[i]
+                                let refElement = this.$refs.miscresults[i];
                                 if (refElement.researchdata.sourcequery.wordids.indexOf(newwordid) > -1) {
-                                    if (hoverdata.hoverstarted === "text")
+                                    if (hoverdata.hoverstarted === "text" && !this.isElementInViewport(refElement.$el))
                                         refElement.$el.scrollIntoView();
 
                                     bb = refElement.$el.getBoundingClientRect();
@@ -450,7 +462,7 @@
                             bb = this.$refs["miscresultsparent"].getBoundingClientRect();
                         }
                     }
-                    let data = {hoverended: "research", offsetend: bb, wordtomarkonhover: wordtomarkonhoverDUMMY}
+                    let data = {hoverended: "research", offsetend: bb, wordtomarkonhover: wordtomarkonhoverDUMMY};
                     this.$emit('endhover', data);
                 }, deep: true
             },

diff --git a/views/components/analysis/researchresult.vue b/views/components/analysis/researchresult.vue
@@ -143,7 +143,8 @@
             editResearch: function () {
                 console.log('clicked edit Research');
                 this.$emit('editresearch', this.researchdata);
-            }
+            },
+
         },
         components: {
             googlemap

diff --git a/views/components/analysis/text.vue b/views/components/analysis/text.vue
@@ -25,7 +25,6 @@
                     return []
                 }
             },
-            allowtexttoscroll: {type: Boolean, default: false}
         },
         data: function () {
             return {
@@ -35,6 +34,15 @@
             }
         },
         computed: {
+            allowtexttoscroll: function () {
+                let rect = this.$el.getBoundingClientRect();
+                return !(
+                    rect.top >= 0 &&
+                    rect.left >= 0 &&
+                    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
+                    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
+                );
+            },
             tobejumped: function () {
                 if (this.index === this.selectedindexes.start) {
                     return this.index;

diff --git a/views/components/analysis/textfeatureviewport.vue b/views/components/analysis/textfeatureviewport.vue
@@ -45,7 +45,6 @@
                             v-bind:selectedchain="selectedchain"
                             v-bind:hoverdata="hoverdata"
                             v-bind:wordtomarkonhoverdata="wordtomarkonhoverdata"
-                            v-bind:allowtexttoscroll="allowTextToScroll"
                             v-bind:classestomark="classestomark"
                             v-bind:contentcontrol="contentcontrol"
                             v-on:togglesemanticlass="togglesemanticlass($event)"
@@ -107,13 +106,7 @@
             }
         },
         computed: {
-            allowTextToScroll:function () {
-                if(this.$refs["textviewport"] !== undefined) {
-                    return this.$refs["textviewport"].scrollHeight > this.$refs["textviewport"].clientHeight;
-                } else{
-                    return false;
-                }
-            }
+
         },
         methods: {
             updateclassestomark:function (newClassesToMark) {