Tento skript by nemal byť nainštalovaný priamo. Je to knižnica pre ďalšie skripty, ktorú by mali používať cez meta príkaz // @require https://update.greasyfork.org/scripts/451522/1104972/KameSame%20Open%20Framework%20-%20Menu%20module.js
"use strict";
// ==UserScript==
// @name KameSame Open Framework - Menu module
// @namespace timberpile
// @description Menu module for KameSame Open Framework
// @version 0.1.1.1
// @copyright 2022+, Robin Findley, Timberpile
// @license MIT; http://opensource.org/licenses/MIT
// ==/UserScript==
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
(async (global) => {
var _MenuUi_instances, _MenuUi_install_style, _MenuUi_install_menu;
const ksof = global.ksof;
await ksof.ready('document');
// `<div id="scripts-menu" class="scripts-menu-icon">
// <a class="scripts-icon state" href="#"><i title="Script Menu">⚙️</i></a>
// <ul class="dropdown-menu">
// <li class="scripts-header">Script Menu</li>
// </ul>
// </div>`
class MenuUi {
constructor() {
_MenuUi_instances.add(this);
if (!this.style) {
__classPrivateFieldGet(this, _MenuUi_instances, "m", _MenuUi_install_style).call(this);
}
if (!this.menu) {
__classPrivateFieldGet(this, _MenuUi_instances, "m", _MenuUi_install_menu).call(this);
}
}
get style() {
return document.head.querySelector('style[name="scripts_submenu"]');
}
get header() {
return this.dropdown_menu?.querySelector(':scope > li.scripts-header');
}
get scripts_icon() {
if (ksof.pageInfo.on == 'review') {
return this.menu.querySelector(':scope > a.scripts-icon');
}
else {
// TODO use fitting selector for top menu bar
return this.menu.querySelector(':scope > a.scripts-icon');
}
}
get dropdown_menu() {
return this.menu.querySelector(':scope > ul.dropdown-menu');
}
get menu() {
return document.querySelector('#scripts-menu');
}
get_submenu(name) {
const safe_name = escape_attr(name);
return document.querySelector('.scripts-submenu[name="' + safe_name + '"]');
}
//------------------------------
// Install Submenu, if not present.
//------------------------------
install_scripts_submenu(name) {
// Abort if already installed.
const sub = this.get_submenu(name);
if (sub) {
return sub;
}
const safe_name = escape_attr(name);
const safe_text = escape_text(name);
const scripts_header = this.header;
scripts_header.insertAdjacentHTML('afterend', `<li class="scripts-submenu" name="${safe_name}">
<a href="#">${safe_text}</a>
<ul class="dropdown-menu"></ul>
</li>`);
// if (ksof.pageInfo.on == 'review') {
// scripts_header.insertAdjacentHTML('afterend',
// `<li class="scripts-submenu" name="${safe_name}">
// <a href="#">${safe_text}</a>
// <ul class="dropdown-menu"></ul>
// </li>`
// );
// } else {
// scripts_header.insertAdjacentHTML('beforeend',
// `<li class="sitemap__page scripts-submenu" name="${safe_name}">
// <a href="#">${safe_text}</a>
// <div class="sitemap__expandable-chunk dropdown-menu" data-expanded="true" aria-expanded="true">
// <ul class="sitemap__pages">
// </ul>
// </div>
// <li>`
// );
// }
const menu_contents = this.dropdown_menu.querySelectorAll(':scope > .scripts-submenu, :scope > .script-link');
if (!menu_contents)
return null;
for (const node of Array.from(menu_contents).sort(sort_name)) {
// TODO why append again without removing first?
node.parentNode?.append(node);
}
return this.get_submenu(name);
}
}
_MenuUi_instances = new WeakSet(), _MenuUi_install_style = function _MenuUi_install_style() {
document.head.insertAdjacentHTML('beforeend', `<style name="scripts_submenu">
#scripts-menu {text-shadow:none;}
#scripts-menu.scripts-menu-icon {display:inline-block;}
#scripts-menu .scripts-icon {display:inline-block; cursor: pointer; font-size: 1.2em; margin-right: auto; opacity: .65; position: relative; top: 3px;}
#scripts-menu:not(.open) > .dropdown-menu {display:none;}
#scripts-menu .scripts-submenu:not(.open) > .dropdown-menu {display:none;}
#scripts-menu ul.dropdown-menu {position:absolute; background-color:#eee; margin:0; padding:5px 0; list-style-type:none; border:1px solid #333; display:block;}
#scripts-menu ul.dropdown-menu > li {text-align:left; color:#333; white-space:nowrap; line-height:20px; padding:3px 0; display:list-item;}
#scripts-menu ul.dropdown-menu > li.scripts-header {text-transform:uppercase; font-size:11px; font-weight:bold; padding:3px 20px; display:list-item;}
#scripts-menu ul.dropdown-menu > li:hover:not(.scripts-header) {background-color:rgba(0,0,0,0.15)}
#scripts-menu ul.dropdown-menu a {padding:3px 20px; color:#333; opacity:1;}
#scripts-menu .scripts-submenu {position:relative; font-size: 1rem;}
#scripts-menu .scripts-submenu > a:after {content:">"; font-family:"FontAwesome"; position:absolute; top:0; right:0; padding:3px 4px 3px 0;}
#scripts-menu .scripts-submenu .dropdown-menu {left:100%; top:-6px;}
</style>`);
}, _MenuUi_install_menu = function _MenuUi_install_menu() {
const page = ksof.pageInfo.on;
// Abort if on unsupported page
if (!page)
return false;
// Install html.
if (page == 'review') {
const exit_button = document.querySelector('.header a.exit');
if (!exit_button)
return false;
exit_button.insertAdjacentHTML('afterend', `
<div id="scripts-menu" class="scripts-menu-icon">
<a class="scripts-icon state" href="#"><i title="Script Menu">⚙️</i></a>
<ul class="dropdown-menu">
<li class="scripts-header">Script Menu</li>
</ul>
</div>`);
}
else {
const search_icon = document.querySelector('#nav_container .real ul li a.active');
if (!search_icon)
return false;
search_icon.parentElement?.insertAdjacentHTML('afterend', `
<li>
<div id="scripts-menu" class="scripts-menu-icon">
<a class="scripts-icon active" href="#">
<div class="icon">
<div>⚙</div>
</div>
<ul class="dropdown-menu">
<li class="scripts-header label"><span>Scripts Menu</span></li>
</ul>
</a>
</div>
</li>`);
}
this.scripts_icon.addEventListener('click', (e) => {
this.menu.classList.toggle('open');
if (this.menu.classList.contains('open'))
document.body.addEventListener('click', body_click);
e.stopPropagation();
});
// else {
// // Install css and html.
// ui.menu = document.querySelector('button[class$="account"]') as HTMLDivElement
// if (!ui.menu) return false;
// if (!document.querySelector('style[name="scripts_submenu"]')) {
// document.head.insertAdjacentHTML('beforeend',
// `<style name="scripts_submenu">
// .sitemap__section.scripts-noposition {position:initial;}
// .scripts-submenu>.dropdown-menu {display:none;}
// .scripts-submenu.open>.dropdown-menu {display:block;position:absolute;top:0px;margin-top:0;left:-8px;transform:scale(1) translateX(-100%);min-width:200px}
// .scripts-submenu .dropdown-menu:before {left:100%;top:12px;z-index:-1;}
// .scripts-submenu .dropdown-menu .sitemap__pages {padding:5px 15px 0px 15px;}
// .scripts-submenu .dropdown-menu .sitemap__page:last-child {margin-bottom:0;}
// .scripts-submenu>a:before {content:"\uf0d9 "; font-family:"FontAwesome";}
// @media (max-width: 979px) {
// .scripts-submenu>a:before {content:"";}
// .scripts-submenu>.dropdown-menu {display:contents;position:initial;top:initial;margin-top:initial;left:initial;transform:none;min-width:initial}
// }
// </style>`
// );
// }
// document.querySelector('.user-summary')?.insertAdjacentHTML('afterend',
// `<li id="scripts-menu" class="sitemap__section sitemap__section--subsection scripts-noposition">
// <h3 class="sitemap__section-header--subsection">Scripts</h3>
// <ul class="sitemap__pages scripts-header"></ul>
// </li>`
// );
// }
// Click to open/close sub-menu.
this.menu.addEventListener('click', submenu_click);
function submenu_click(e) {
const target = e.target;
if (!target.matches('.scripts-submenu>a'))
return false;
const link = target.parentElement;
if (!link)
return false;
if (!link.parentElement)
return false;
for (const submenu of link.parentElement.querySelectorAll('.scripts-submenu.open')) {
if (submenu !== link)
submenu.classList.remove('open');
}
if (ksof.pageInfo.on === null) {
const menu = document.querySelector('#sitemap__account,[id="#sitemap__account"]');
const submenu = link.querySelector('.dropdown-menu');
if (menu && submenu) {
submenu.style.fontSize = '12px';
submenu.style.maxHeight = '';
let top = Math.max(0, link.offsetTop);
link.classList.toggle('open');
if (link.classList.contains('open')) {
submenu.style.top = top + 'px';
if (menu.offsetHeight - top < submenu.offsetHeight) {
top = Math.max(0, menu.offsetHeight - submenu.offsetHeight);
submenu.style.top = top + 'px';
submenu.style.maxHeight = String(menu.offsetHeight - top);
}
}
}
}
else {
link.classList.toggle('open');
}
// If we opened the menu, listen for off-menu clicks.
if (link.classList.contains('open')) {
document.body.addEventListener('click', body_click);
}
else {
document.body.removeEventListener('click', body_click);
}
e.stopPropagation();
}
return true;
};
ksof.Menu = {
insert_script_link: insert_script_link,
ui: new MenuUi()
};
const ui = ksof.Menu.ui;
ui.menu.setAttribute('hidden', '');
function escape_attr(attr) { return attr.replace(/"/g, '\''); }
function escape_text(text) {
return text.replace(/[<&>]/g, (ch) => {
switch (ch) {
case '<':
return '<';
case '>':
return '>';
case '&':
return '&';
default:
return ch;
}
});
}
//------------------------------
// Handler that closes menus when clicking outside of menu.
//------------------------------
function body_click() {
ui.menu.classList.remove('open');
for (const submenu of document.querySelectorAll('.scripts-submenu.open')) {
submenu.classList.remove('open');
}
document.body.removeEventListener('click', body_click);
}
//------------------------------
// Sort menu items
//------------------------------
function sort_name(a, b) {
const a1 = a.querySelector('a');
if (!a1)
return -1;
const b1 = b.querySelector('a');
if (!b1)
return -1;
return a1.innerText.localeCompare(b1.innerText);
}
//------------------------------
// Inserts script link into Wanikani menu.
//------------------------------
function insert_script_link(config) {
// Abort if the script already exists
const link_id = config.name + '_script_link';
const link_text = escape_text(config.title);
if (document.querySelector('#' + link_id))
return;
if (ui.menu.hasAttribute('hidden')) {
ui.menu.removeAttribute('hidden');
}
let menu, classes;
const scripts_header = document.querySelector('.scripts-header');
if (!scripts_header)
return;
const link = document.createElement('li');
link.id = link_id;
link.setAttribute('name', config.name);
link.innerHTML = '<a href="#">' + link_text + '</a>';
if (config.submenu) {
const submenu = ui.install_scripts_submenu(config.submenu);
// Append the script, and sort the menu.
if (ksof.pageInfo.on == 'review') {
menu = submenu?.querySelector('.dropdown-menu');
}
else {
menu = submenu?.querySelector('.dropdown-menu>ul');
}
classes = ['sitemap__page'];
if (config.class)
classes.push(config.class_html || '');
link.setAttribute('class', classes.join(' '));
link.innerHTML = '<a href="#">' + link_text + '</a>';
menu?.append(link);
}
else {
classes = ['sitemap__page', 'script-link'];
if (config.class)
classes.push(config.class_html || '');
link.setAttribute('class', classes.join(' '));
if (ksof.pageInfo.on == 'review') {
scripts_header.after(link);
}
else {
scripts_header.append(link);
}
}
const menu_contents = scripts_header.parentElement?.querySelectorAll(':scope > .scripts-submenu, :scope > .script-link');
if (menu_contents)
for (const node of Array.from(menu_contents).sort(sort_name))
node.parentNode?.append(node);
// Add a callback for when the link is clicked.
document.querySelector('#' + link_id)?.addEventListener('click', function (e) {
document.body.removeEventListener('click', body_click);
document.querySelector('#scripts-menu')?.classList.remove('open');
for (const submenu of document.querySelectorAll('.scripts-submenu'))
submenu.classList.remove('open');
const temp = document.querySelector('#sitemap__account,[id="#sitemap__account"]');
if (temp) {
const temp2 = temp.parentElement?.querySelector('[data-expandable-navigation-target],[data-navigation-section-toggle]');
temp2.click();
const nav_toggle = document.querySelector('.navigation__toggle');
if (nav_toggle.offsetWidth > 0 || nav_toggle.offsetWidth > 0)
nav_toggle.click();
}
config.on_click(e);
return false;
});
}
// Delay guarantees include() callbacks are called before ready() callbacks.
setTimeout(() => { ksof.set_state('ksof.Menu', 'ready'); }, 0);
})(window);
