Readouble Laravel Document Menu

Greasy Fork is available in English.
Readouble Laravel Document Menu

ReadDoubleのLaravel日本語ドキュメントにサイドメニューを表示する
22.11.2018 itibariyledir. En son verisyonu görün.
Bir soru sorun, yorum yayınlayın veya komut dosyasını bildirin.
Satırları kaydır
// ==UserScript==
// @name         Readouble Laravel Document Menu
// @namespace    https://greasyfork.org/ja/scripts/374656-readouble-laravel-document-menu
// @version      0.1
// @description  ReadDoubleのLaravel日本語ドキュメントにサイドメニューを表示する
// @author       tobigumo
// @match        https://readouble.com/laravel/*.*/*/*.html
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle(`
.menu-button{
  width: 30px;
  height: 30px;
  display: block;
  position: fixed;
  right: 10px;
  top: 30px;
  background-color:#ffffffcc;
  display:none;
}
.menu-button i{
display: block;
width: 20px;
height: 2px;
border-radius: 3px;
background: #000;
transition: background 0.5s;
position: relative;
left: 5px;
top: 14px;
}
.menu-button i::before,
.menu-button i::after{
content: "";
display: block;
width: 20px;
height: 2px;
border-radius: 3px;
background: #000;
position: fixed;
transform: rotate(0deg);
transition: all 0.3s !important;
}
.menu-button i::before{
transform:translateY(8px);
}
.menu-button i::after{
transform:translateY(-8px);
}
.menu_container{
  float:right;
}
.menu_accordion_ul{
  height: 0;
  overflow: hidden;
}
.menu_accordion{
  display:none;
}
.current-page {
  font-weight:bold;
}
.menu_accordion:checked + .menu_accordion_ul{
  height: auto;
}
.full_screen_label{
  display:none !important;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:99;
}
@media screen and (max-width:1200px) {
  .menu_container {
    display: none;
  }
  .menu_switch:checked ~ .menu_container{
    display: block;
  }
  .menu_container{
    position:fixed;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;

    z-index:100;
    background-color:#000000cc;
  }
  .menu_container::-webkit-scrollbar{
    display:none;
  }
  .menu_container label{
    color:#fff;
  }
  .menu_container a{
    color:#f6c2ac;
  }
  .menu-button {
    display:block;
  }
  .menu_switch:checked ~ .full_screen_label{
    display: block !important;
  }

}
.menu_switch{
  display:none;
}
`);

(function() {
    'use strict';

    const menu_container = document.createElement('div');
    menu_container.className = 'menu_container';
    const content_container = document.getElementById('content');
    const category_blocks = document.getElementById('moveToPage').getElementsByClassName('categoryBlock');
    const ul = document.createElement('ul');

    const menu_button = document.createElement('label');
    const full_screen_label = document.createElement('label');
    full_screen_label.className = 'full_screen_label';
    full_screen_label.setAttribute('for', 'menu_switch');
    menu_button.className = 'menu-button';
    menu_button.setAttribute('for', 'menu_switch');
    const menu_button_i = document.createElement('i');
    menu_button.appendChild(menu_button_i);
    const menu_switch = document.createElement('input');
    menu_switch.type = 'checkbox';
    menu_switch.id = 'menu_switch';
    menu_switch.className = 'menu_switch';

    const url = location.origin + location.pathname;

    for(let category_block of category_blocks) {
        const li = document.createElement('li');
        const input = document.createElement('input');
        const label = document.createElement('label');
        const category_name = category_block.getElementsByClassName('categoryName')[0].textContent;
        input.type = 'checkbox';
        input.id = category_name;
        input.name = 'menu_accordion';
        input.className = 'menu_accordion';
        label.textContent = category_name;
        label.setAttribute('for', category_name);
        li.appendChild(label);
        li.appendChild(input);

        const sub_ul = document.createElement('ul');
        sub_ul.className = 'menu_accordion_ul';
        const document_pages = category_block.getElementsByClassName('chapters')[0].getElementsByTagName('a');
        for(let document_page of document_pages) {
            const sub_li = document.createElement('li');
            const a = document.createElement('a');

            a.textContent = document_page.textContent;
            a.href = document_page.href;

            if(url === a.href) {
              a.className = 'current-page';
              input.checked = true;
            }

            sub_li.appendChild(a);
            sub_ul.appendChild(sub_li);
        }
        li.appendChild(sub_ul);
        ul.appendChild(li);
    }

    menu_container.appendChild(ul);

    content_container.insertBefore(menu_container, content_container.firstChild);
    content_container.insertBefore(full_screen_label, content_container.firstChild);
    content_container.insertBefore(menu_switch, content_container.firstChild);
    content_container.insertBefore(menu_button, content_container.firstChild);
})();