确保关注隐藏在固定选项卡后面的元素(表现得像“航向图”)

fnatzsnv  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(331)

关于所谓的大纲视图(toc)函数。
【规格】
使用150%的浏览器缩放率进行调整。
用于带有 "Ctrl" + "Shift" + "H" 钥匙。
firefox无法使用h键,因此暂时显示为 "Alt" + "Shift" + "O" 钥匙。
按相同的键将其隐藏,或者单击大纲视图以外的元素将其隐藏。或者,按下红色的“x”按钮将其隐藏。
对于firefox,id(#created_toc)元素的字体大小为:10px;线高:1.5em;请替换为。

document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.shiftKey && e.key == 'H') {
        // Firefox cannot use the "H" key, so
        // if( e.altKey && e.shiftKey && e.key=='O' ){
        let all, pLevel, cLevel, cList, counter, div, style, ol, li, a, i, j;
        let d = document;
        let toc = d.getElementById("created_toc");
        let close_toc = d.getElementById("my_toc_close_btn");
        if (toc) {
            d.body.removeChild(toc);
            d.body.removeChild(close_toc);
        } else {
            all = d.getElementsByTagName("*");
            let toc = d.createElement("ol");
            //let close_toc=d.createElement("ol");
            toc.onclick = new Function("event", `
let target=event.target,ols=target.getElementsByTagName("ol"),flag=target.flag==0;
if(ols.length>0){ols.item(0).style.display=flag?"block":"none";
target.style.listStyleImage=flag?"none":"url(data:image/gif;)";
target.flag=flag?1:0;}
`);

            let cList = toc;
            let pLevel = 1;
            let counter = [0, 0, 0, 0, 0, 0];
            for (i = 0; i < all.length; i++) {
                if (all.item(i).tagName.match(/^h([1-6])$/i)) {
                    let cLevel = RegExp.$1;
                    let a = d.createElement("a");
                    //a+="&nbsp";
                    a.href = "javascript:;";
                    a.onclick = new Function('document.getElementsByTagName("h' + cLevel + '").item(' + counter[cLevel - 1] + ').scrollIntoView();');
                    a.appendChild(d.createTextNode(all.item(i).textContent));
                    /*
                    d.createElement("a").onclick = (event) => {
                                toggle(event);
                                target.focus();
                            };
                    */
                    let li = d.createElement("li");
                    li.appendChild(a);
                    counter[cLevel - 1]++;
                    if (cLevel > pLevel) {
                        ol = d.createElement("ol");
                        ol.style.padding = "1em";
                        ol.style.margin = "0em 1em";
                        ol.appendChild(li);
                        if (cList.lastChild) {
                            cList.lastChild.appendChild(ol);
                        } else {
                            cList.appendChild(ol);
                        }
                        cList = ol;
                    } else if (cLevel < pLevel) {
                        for (j = 0; j < (pLevel - cLevel) * 2; j++)
                            if (cList.parentNode) cList = cList.parentNode;
                        cList.appendChild(li);
                    } else {
                        cList.appendChild(li);
                    }
                    pLevel = cLevel;
                }
            }

            let style = d.createElement("style");
            style.appendChild(d.createTextNode(`

# created_toc{

text-align:left;
position:fixed;
top:0px;
right:0px;

/* max- Exclude */
width:25%;
height:98%;

/*☆☆☆ Firefox font-size:10px; line-height:1.5em; ☆☆☆*/
font-size:1px;
line-height: 20em;

overflow:auto;
background:#eef1f1;
-moz-opacity:0.9;
border-style:solid;
border-width: 2px;
border-color: #000;
border-radius:11px;
z-index:999999999;
}

# created_toc a:link{

color: #0416fb;}

# created_toc a:hover{

color: #01afd5;
}

# created_toc ol{

counter-reset:item;} 

# created_toc li{

counter-increment:item;
list-style-type:none;
white-space:pre;
/* word-break:keep-all; */
} 

# created_toc li:before{

font-size:smaller;
/* word-break:keep-all;*/
content:counters(item,'.') '. ';
cursor:ns-resize;
}

# my_toc_close_btn{

position:fixed;
align-items: center;
text-align:justify-all;
line-height:5px;

/* justify-content:center; */
/* display:inline-block; */
margin-right:240px;
top:0px;
right:8px;
background:red;
font-size:10px;

height:12px;
width:13px;
content:"x";
color:#000;
border-radius:4px;
cursor:pointer;
z-index:999999999;
}
`));

            let div = d.createElement("div");
            div.id = "created_toc";
            div.appendChild(style);
            div.appendChild(toc, close_toc);
            d.body.insertBefore(div, d.body.firstChild);

            document.body.insertAdjacentHTML('beforeend', `
<input type="button" id="my_toc_close_btn" value="x" />
 `);
        }

    }

    // Clicking on an element other than the outliner hides the outliner element.
    document.addEventListener('click', (c) => {
        let toc = document.getElementById("created_toc");
        let close_toc = document.getElementById("my_toc_close_btn");
        if (toc, close_toc) {
            if (!c.target.closest('#created_toc')) {
                document.body.removeChild(toc);
                document.body.removeChild(close_toc);
                // document.getElementById("my_toc_close_btn").style.display="none";
            }
        }
    });

    // Hide the outliner by clicking the red "x" button.
    document.getElementById("my_toc_close_btn")
        .addEventListener('click', () => {
            let toc = document.getElementById("created_toc");
            let close_toc = document.getElementById("my_toc_close_btn");
            if (toc, close_toc) {
                document.body.removeChild(toc);
                document.body.removeChild(close_toc);
                // document.getElementById("my_toc_close_btn").style.display="none";
            }
        });

});

【问题】
我个人认为这是一个不错的结果,但有一个问题。
在stackoverflow.com上https://stackoverflow.com/questions/tagged/javascript
(日本网站)雅虎!首页等。https://www.yahoo.co.jp/ 我可以毫无困难地跳到目标,
(问答网站)chiebukuro类别问答列表页面https://chiebukuro.yahoo.co.jp/category/2080401322/question/list?sort=16 例如,如果在大纲视图中运行流程,则流程将隐藏在固定(位置:固定;看起来是)选项卡,您最终将不得不手动向上滚动一点。
我查看了各种大纲视图和相关站点,但到目前为止,只有以下稍重的扩展解决了这个问题:https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
https://addons.mozilla.org/en/firefox/addon/headingsmap/?utm_content=addons-经理查看链接&utm\u medium=firefox浏览器&utm\u source=firefox浏览器
单击“大纲视图”(outliner)一侧的链接后立即跳转到实际链接时,我会重新编辑 focus() 我对实际的链接感到困惑,所以我个人认为我每次都一定能跳转到目标,
【我想要达到的目标】
如果是这样的话,可以对代码进行哪些更改以确保焦点和焦点实现理想的行为?

uttx8gqw

uttx8gqw1#

【旧代码】

a.onclick = new Function('document.getElementsByTagName("h' + cLevel + '").item(' + counter[cLevel - 1] + ').scrollIntoView();');

【自解代码】

a.onclick=new Function('document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+').scrollIntoView((true));window.scrollBy(0, -57);document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+').style.cssText ="border: solid 2px red !important;"; ');
``` `.scrollIntoView();` 一旦元素进入,它就会停止。这与工作列表不兼容,例如“位置:固定标签。它隐藏在标签后面。 `.scrollIntoView((true));window.scrollBy(0, -57);` 我将其替换为,将停止位置调整到前面,并添加了一个红色标记,这样即使它不在固定位置,也很容易理解。
我有一个新问题,所以稍后我会问另一个问题。

相关问题