bug fix

tohsakrat · May 11, 2024 · 0a8c45b · 0a8c45b
1 parent 210bab2
commit 0a8c45b
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 94 deletions.
diff --git a/extend.php b/extend.php
@@ -3,7 +3,7 @@
 /*
  * This file is part of tohsakarat/table-of-content
  *
- * Copyright (c) 2022 Tomás Romero.
+ * Copyright (c) 2022 Tom ás Romero.
  *
  * For the full copyright and license information, please view the LICENSE.md
  * file that was distributed with this source code.
@@ -16,15 +16,17 @@
         ->js(__DIR__.'/js/dist/forum.js')
         ->css(__DIR__ . '/less/forum.less'),
 
-
-	    (new Extend\Formatter)
+    new Extend\Locales(__DIR__ . '/locale'),
+
+
+    (new Extend\Formatter)
         ->configure(function (Configurator $config) {
             $config->BBCodes->addCustom(
         '[anchor="{TEXT}"]',
         '<div class="div-anchor">
         <span id={TEXT} class="anchor"></span> 
         <span id={TEXT} class="sub-anchor">{TEXT}</span> 
          </div>'
-    );
-        })
+        );
+    })
 ];
diff --git a/js/dist/forum.js b/js/dist/forum.js
diff --git a/js/dist/forum.js.map b/js/dist/forum.js.map
diff --git a/js/src/forum/index.js b/js/src/forum/index.js
@@ -6,17 +6,18 @@ import DiscussionPageResolver from 'flarum/forum/resolvers/DiscussionPageResolve
 import PostStreamScrubber from 'flarum/forum/components/PostStreamScrubber';
 import PostStream from 'flarum/forum/components/PostStream';
 
-app.initializers.add('mypost', () => {
-//console.log(12345)
+app.initializers.add('table-of-content', () => {
+
   extend(CommentPost.prototype, 'oncreate', function () {
+      if(!document.querySelector('.PostStream') )return;
     //console.log(this);
     let clearPunctuation=(str)=>{;
       let reg=new RegExp( /[\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]/)
       return str.replace( reg ,'-').replaceAll(' ','-');
   }
 
  //这一段母的是把页面内指向同一个discussion的链接改为跳转到楼层，这样就不用重载整个页面
-  let inPageLink=Array.prototype.slice.call(this.element.querySelectorAll('a'))
+  let inPageLink=Array.prototype.slice.call(this.element.querySelectorAll('.Post-body a'))
 
      inPageLink.forEach((e)=>{
       let curDiscussionRoute=window.location.href.replace("https://",'').split('/').splice(0,3).join('/');
@@ -25,17 +26,28 @@ app.initializers.add('mypost', () => {
         let goTo=e.href.split('/')[5].split('#')[0];
         console.log('点击了链接,即将前往楼层'+goTo);
         w.preventDefault();  
-        if(Math.floor(app.current.data.stream.number)==goTo){
+        if(window.location.href.split('/')[5].split('#')[0]==goTo){
           //如果和当前所在楼层相同，就不要滚动了
           console.log('当前所在楼层和目标楼层相同，不滚动');
           window.location.hash  =  '#'+ e.href.split('#')[1];
         return;}
         app.current.data.stream.goToNumber(goTo).then(()=>{
                 console.log('goto完毕');
 
-    		  if(e.href.split('/')[5])setTimeout(()=>{
-            window.location.hash  =  '#'+ e.href.split('#')[1];
-            setTimeout(()=>{ m.redraw();},100)
+    		  if(e.href.split('/')[5])setTimeout(
+    		  ()=>{
+    		      //多延迟下放图片加载下
+                    window.location.hash  =  '#'+ e.href.split('#')[1];
+                    setTimeout(()=>{ m.redraw();
+                     setTimeout(
+                         //再尝试一次，以防万一
+                         ()=>{
+                              window.location.hash  =  '#'+ e.href.split('#')[1];
+                         },500
+                    )
+
+
+                    },100)
     		  },500)}
       	)
       return false;
@@ -49,7 +61,7 @@ app.initializers.add('mypost', () => {
  //这一段开始，是生成目录
 
  //先把所有标题找出来
-  let elements1=Array.prototype.slice.call(this.element.querySelectorAll('.Post-body :is(h1, h2, h3, h4, h5, h6)'))
+  let elements1=Array.prototype.slice.call(this.element.querySelectorAll('.Post-body :is(h1, h2, h3, h4, h5, h6,.div-anchor)'))
 
   elements1.forEach((e,i)=>{
     //这一段是给标题加上锚点，以及给锚点加上id
@@ -59,9 +71,18 @@ app.initializers.add('mypost', () => {
       anchor = anchor.parentNode
       if(anchor.dataset.number)break
     }
+
+
     e.innerHTML='<span class="title-anchor"></span>'+ '<span class="title-sub-anchor">'+ e.innerHTML+'</span>'; 
-   //e.id=
-    e.dataset.id=anchor.dataset.number+'-'+clearPunctuation(e.innerText)+'-'+(elements1.map(k=>clearPunctuation(k.innerText)).filter(b=>b==clearPunctuation(e.innerText)).length==1?'':i);;
+  //加个点击引导
+    let icon = document.createElement('i');
+    icon.className='icon fas fa-up-right-from-square Button-icon';
+    e.appendChild(icon);
+    e.dataset.id=   anchor.dataset.number+'-'+clearPunctuation(e.innerText)+'-'+(elements1.map(k=>clearPunctuation(k.innerText)).filter(b=>b==clearPunctuation(e.innerText)).length==1?'':i);
+
+    e.dataset.id= e.dataset.id.length > 10 ? e.dataset.id.substring(0, 10) : e.dataset.id
+    e.dataset.id=encodeURI(e.dataset.id)
+
     e.className+=' title-has-anchor';
     e.querySelector('.title-anchor').id = e.dataset.id;
     e.querySelector('.title-sub-anchor').id = e.dataset.id;
@@ -71,7 +92,9 @@ app.initializers.add('mypost', () => {
   //这一段是生成目录
   this.catalog={}
   this.catalog.id=this.attrs.post.data.id
-  app.current.data.stream.posts().find(u=>u.data.id== this.catalog.id).catalog=this.catalog//把目录加到stream数据模型对应的post里面去
+  app.current.data.stream.posts().find(u=>u?.data?.id== this.catalog.id).catalog=this.catalog
+  //把目录加到stream数据模型对应的post里面去
+
   this.catalog.elements=elements1
 
   this.catalog.content=this.catalog.elements.map(
@@ -80,7 +103,11 @@ app.initializers.add('mypost', () => {
         let isAnchor=Array(e.classList).map(e=>e.value).indexOf('sub-anchor')!=-1
         let id=isAnchor? e.id : e.dataset.id
         let link= window.location.origin+app.route.discussion(app.current.data.discussion,this.attrs.post.data.attributes.number)+'#'+id;
-
+
+        e.addEventListener('click',()=>{
+            window.copyTextToClipboard('* ['+e.innerText+']('+link+')')
+        });//点击元素，复制链接
+
         let a=<p> <a
         href={link}
         target='_self'
@@ -91,10 +118,11 @@ app.initializers.add('mypost', () => {
         onclick={(u)=>{  
 
           u.preventDefault();
-           app.current.data.stream.goToNumber(a.dom.dataset.number).then(()=>{
+           app.current.data.stream.goToNumber(this.attrs.post.data.attributes.number).then(()=>{
               setTimeout(()=>{
                 //console.log(a)
-              window.location.hash  =  '#'+ id;
+              window.location.hash  =  '#'+  id;
+
                setTimeout(()=>{ m.redraw();},100)
             },500)}
             )
@@ -115,22 +143,42 @@ app.initializers.add('mypost', () => {
       // if(app.current.data.stream.posts().filter((w)=>{return w.attributes.number==this.attrs.post.data.attributes.number})[0])app.current.data.stream.posts().filter((w)=>{return w.attributes.number==this.attrs.post.data.attributes.number})[0].catalog=this.catalog
 
       if(!app.current)return;
-      //这一段时把滚动元素添加页面上
+      //这一段是把滚动元素添加页面上
         try{
 
 
-         if(app.current?.data?.stream?.posts().find(u=>u.data?.id==app.current.data.stream.posts()[Math.floor(app.current.data.stream.index-app.current.data.stream.visibleStart)-1>0?Math.floor(app.current.data.stream.index-app.current.data.stream.visibleStart)-1:0].data?.id)
-        .catalog?.content.length) vnode.children.push(
-            <div class='catalog-icon-mobile'
-            onclick={()=>{document.querySelector('.PostStreamScrubber.Dropdown.App-titleControl>button.Button.Dropdown-toggle:first-child').click()}}
-            ></div>
-        )
+         if(app.current?.data?.stream?.posts().find(
+                 u=>
+                    u?.data?.id==app?.current?.data?.stream?.posts()[
+                     Math.floor(app.current.data.stream.index-app.current.data.stream.visibleStart)-1>0?Math.floor(app.current.data.stream.index-app.current.data.stream.visibleStart)-1:0]?.data?.id
+                 )?.catalog?.content.length
+             ){ 
+                    vnode.children.push(
+                    <div class='catalog-icon-mobile'
+                    onclick={()=>{document.querySelector('.PostStreamScrubber.Dropdown.App-titleControl>button.Button.Dropdown-toggle:first-child').click()}}
+                    ></div>
+                    )
+
+            }
 
-        vnode.children.push(<div class='catalog-top'>
-            {app?.current?.data?.stream?.posts().find(u=>u?.data?.id==app.current?.data?.stream?.posts()[Math.floor(app.current?.data?.stream?.index-app.current?.data?.stream?.visibleStart)-1>0?Math.floor(app.current?.data?.stream?.index-app.current?.data?.stream?.visibleStart)-1:0].data?.id)
-           .catalog?.content}
-
-        </div>)
+        vnode.children.push(
+            <div class='catalog-top'>
+                {
+                    //确认到底要不要目录
+                     app.current.data.stream.progress&& app.current.data.stream.currentPostElement&&
+                    (app.current.data.stream.progress>100-app.current.data.stream.percentScreenPost||
+                    app.current.data.stream.currentPostElement.scrollHeight<window.innerHeight)
+                    ?
+                    ""
+                    :
+                    app?.current?.data?.stream?.posts().find(
+                    u=>u?.data?.id==app.current?.data?.stream?.posts()[Math.floor(app.current?.data?.stream?.index-app.current?.data?.stream?.visibleStart)-1>0?Math.floor(app.current?.data?.stream?.index-app.current?.data?.stream?.visibleStart)-1:0]?.data?.id)
+                   ?.catalog?.content
+
+                }
+
+            </div>
+        )
 
 
         }catch (e){
@@ -178,11 +226,12 @@ app.initializers.add('mypost', () => {
      extend(DiscussionPage.prototype, 'show', function (discussion){
 
          if(window.location.href.indexOf('#')!=-1 && window.location.href.split('#').length==2){
+            let hash= window.location.hash;
           setTimeout(()=>{
-          window.location.hash  =   '#'+hash;
+          window.location.hash  =   hash;
           },250)
           setTimeout(()=>{
-          window.location.hash  =   '#'+hash;
+          window.location.hash  =   hash;
           },500)
           }
 
@@ -329,17 +378,17 @@ app.initializers.add('mypost', () => {
        document.querySelector(".DiscussionPage-discussion").className=classList.join(' ')
 
        //升级阅读进度
-         var element1=document.querySelector(
+         let element1=document.querySelector(
          '.PostStream-item[data-index="'+Math.floor(app.current.data.stream.index-1) +'"]'
         )
 
-        app.current.data.stream.percentScreenPost = (window.innerHeight-40)/element1.scrollHeight*100-2;
-
+        app.current.data.stream.percentScreenPost = (window.innerHeight-100)/element1.scrollHeight*100-2;
+        app.current.data.stream.currentPostElement=element1;
 
-        var element2=document.querySelector(
+        let element2=document.querySelector(
          '.PostStreamCurrent'
         )
-        if(element1==element2 || !element1)return;
+        if(element1==element2 || (!element1))return;
 
 
         if(
@@ -356,9 +405,9 @@ app.initializers.add('mypost', () => {
         }else{
 
 
-         element1.className+=' PostStreamCurrent'
-        if(!element2)return;
-        element2.className=element2.className.replaceAll('PostStreamCurrent','')
+             element1.className+=' PostStreamCurrent'
+            if(!element2)return;
+            element2.className=element2.className.replaceAll('PostStreamCurrent','')
 
         }
      }

diff --git a/less/forum.less b/less/forum.less
@@ -1,3 +1,9 @@
+
+.CommentPost .Post-actions {
+    width: fit-content!important;
+}
+
+
 @keyframes fadeOutLeft {
     0% {
         opacity: 1
@@ -78,20 +84,57 @@
     transform: scale(-1,1);
   }
 }
-
-
-.Post-body :is(h1,h2,h3,h4,h5,h6):before {
-    content: '';
-    display: inline-block;
-    width: 1.5em;
-    height: 0.5em;
-    background: linear-gradient(90deg, rgba(0, 147, 233,0.8) 0%, rgba(128, 208, 199,0.8) 100%);
-    /* filter: brightness(1.5); */
-    opacity: .25;
-    position: absolute;
-    /* bottom: 0px; */
-    mix-blend-mode: color;
-    z-index:-1;
+ .fa-up-right-from-square:before{
+     content:'\f35d'
+ }
+a[data-tag='DIV']:before {
+    content: 'anchor';
+    content: "\f608";
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+}
+.title-has-anchor {
+    display: flex;
+    align-items: center;
+}
+.div-anchor{
+    justify-content:center;
+}
+.title-has-anchor:hover i {
+    animation: tada 0.5s 1;
+    color: var(--link-color);
+    transition: 0.5s;
+    text-shadow: 0 0 5px;
+}
+.title-has-anchor i {
+    vertical-align: middle;
+    color: var(--control-bg);
+    font-size: inherit;
+    /* letter-spacing: 20px; */
+    margin-left: 0.5em;
+}
+
+
+
+.Post-body :is(h1,h2,h3,h4,h5,h6){
+    position: relative;
+    &:before {
+        content: '';
+        display: inline-block;
+        width: 1.5em;
+        height: 50%;
+        background: linear-gradient(90deg, rgba(0, 147, 233,0.8) 0%, rgba(128, 208, 199,0.8) 100%);
+        /* filter: brightness(1.5); */
+        opacity: .25;
+        position: absolute;
+        /* bottom: 0px; */
+        mix-blend-mode: color;
+        z-index:-1;
+        position: absolute;
+        top: 0;
+        left: -0.5em;
+    }
+
 }
 
 .title-anchor:target+.title-sub-anchor:before {
@@ -294,16 +337,21 @@ div#app.panePinned .DiscussionPage-list+.DiscussionPage-discussion .catalog-top{
 
 
 @media @phone {
-.catalog-icon-mobile:before {
-animation: 2s 10 ease-in-out breath;
-    content: '\f02d';
-    font-family: 'Font Awesome 5 Free';
-    font-weight: 900;
-}
+    .catalog-icon-mobile:before {
+        animation: 2s 10 ease-in-out breath;
+        content: "";
+        font-weight: 900;
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        background: url('data:image/svg+xml,<svg width="1.2em" xmlns="http://www.w3.org/2000/svg" height="1.2em" viewBox="0 0 24 24" class="ZDI ZDI--Catalog24" fill="currentColor"><path d="M10 5a1 1 0 011-1h10a1 1 0 110 2H11a1 1 0 01-1-1zm4 6a1 1 0 100 2h7a1 1 0 100-2h-7zm0 7a1 1 0 100 2h7a1 1 0 100-2h-7zm-8.335.25a.915.915 0 01-.915-.915V12.75H10a.75.75 0 000-1.5H4.75V6.665c0-.505.41-.915.915-.915H7a.75.75 0 000-1.5H5.665A2.415 2.415 0 003.25 6.665v10.67a2.415 2.415 0 002.415 2.415H10a.75.75 0 000-1.5H5.665z"></path></svg>');
+        filter: invert(1);
+    }
+
 .catalog-icon-mobile {
     display: inline-block;
     opacity: .75;
-    transform: translate(3.5em, -1.8em) scale(-1, 1);
+    transform: translate(3.5em, -1.8em) ;
 }
     .PostStreamScrubber.App-titleControl .Scrubber {
         margin-left: 55vw;

diff --git a/locale/en.yml b/locale/en.yml
@@ -1,14 +1,5 @@
-tohsakarat-tags-filter:
-
+tohsakarat-table-of-content:
+  admin:
   forum:
-    index_page:
-      filter_tags:
-        accessible_label: tags filter
-        all: all
-        label: "{text}"
-        search_label: Search...
-        no_results: No results
-        start_typing: Start typing...
-        keep_typing: Typing...
-        remove_filter: stop searching;
-        comment_filter: Click pinned tags to cancel~
+    settings:
+        copied: share link copy done(markdown)！