Browse Source

close history panel when scrolling text #851

bach 1 year ago
parent
commit
9c8bf3f38f
3 changed files with 22 additions and 4 deletions
  1. 1 1
      assets/css/app.scss
  2. 18 2
      src/components/Layouts/MainContentLayout.vue
  3. 3 1
      src/pages/Edition.vue

+ 1 - 1
assets/css/app.scss

@@ -812,7 +812,7 @@ section[role="main-content"]{
             li{
               ul{
                 overflow: hidden;
-                max-height: 1000px;
+                max-height: 10000px;
                 transition: max-height 0.5s ease-in-out;
                 // transform: scaleY(1);
                 // transform-origin: top;

+ 18 - 2
src/components/Layouts/MainContentLayout.vue

@@ -49,13 +49,29 @@ export default {
   },
   methods: {
     onScrollCenter (e) {
-      // console.log('mainLayout onScrollCenter: e', e)
+      console.log('mainLayout onScrollCenter: e', e)
       this.$emit('onCenterScrolled', e)
+      // attribute scrollToRef is created then removed by this.$scrollTo()
+      // we want to close the history panle only when user scroll the center
+      // not when we click on toc item
+      if (!e.currentTarget.hasAttribute('scrollToRef')) {
+        this.$store.commit('History/setOpened', false)
+      }
     },
     scrollToRef () {
       console.log('scrollToRef', this.reftoscrollto, this.$refs)
       this.$scrollTo(this.reftoscrollto, 500, {
-        container: this.$refs.scrollablecenter
+        container: this.$refs.scrollablecenter,
+        onStart: function (e) {
+          console.log('$scrollTo start', e, this)
+          this.setAttribute('scrollToRef', true)
+        }.bind(this.$refs.scrollablecenter),
+        onDone: function (e) {
+          setTimeout(function () {
+            console.log('$scrollTo done', e, this)
+            this.removeAttribute('scrollToRef')
+          }.bind(this), 100)
+        }.bind(this.$refs.scrollablecenter)
       })
     }
   }

+ 3 - 1
src/pages/Edition.vue

@@ -193,6 +193,7 @@ export default {
         // change textid when route change
         this.textid = to.params.textid
         // change also extract if exists
+        this.extractid = null
         if (to.params.extract) {
           console.log('extract params from route', to.params.extract)
           this.extractid = to.params.ocid
@@ -351,9 +352,10 @@ export default {
         })
     },
     onCenterScrolled (e) {
-      // console.log('Edition centerScrolled(e)', e.target.scrollTop)
+      console.log('Edition centerScrolled(e)', e.target.scrollTop)
       if (!this.center_scrolled && e.target.scrollTop > this.inifinite_load_distance * 1.5) {
         this.center_scrolled = true
+        // this.$store.commit('History/setOpened', false)
       }
       this.indexitem = null
     },