NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name fixed TOC for colab
// @namespace http://tampermonkey.net/
// @version 0.51
// @updateURL https://openuserjs.org/meta/Kuroi_mato_O/fixed_TOC_for_colab.meta.js
// @downloadURL https://openuserjs.org/install/Kuroi_mato_O/fixed_TOC_for_colab.user.js
// @description fixed TOC for colab
// @author Kuroi_Mato_O
// @license MIT
// @require https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js
// @match https://colab.research.google.com/drive/1TC4SSLncPWytSPvquR6Y4-U7wZRfAXrV*
// @icon https://i.imgur.com/VWxy3qP.png
// @grant none
// ==/UserScript==
(function () {
'use strict';
//check if links exist
(new MutationObserver(check)).observe(document, {childList: true, subtree: true});
function check(changes, observer) {
// if(document.querySelector('#copro_babka ul')) {
if(document.querySelector('#cell-gnzJeBa5OYO3 ul')) {
observer.disconnect();
//css black magic
function GM_addStyle(css) {
const style = document.getElementById("GM_addStyleBy8626") || (function () {
const style = document.createElement('style');
style.type = 'text/css';
style.id = "GM_addStyleBy8626";
document.head.appendChild(style);
return style;
})();
const sheet = style.sheet;
sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
}
GM_addStyle("#tocContainer{display: flex; flex-wrap: wrap; align-items: stretch;position:fixed;width:22vw;top: 50%;padding: 20px 0;z-index: 9999;transform: translateY(-50%);background: #262626;color: #fff;font-family: 'Merriweather', serif;line-height: 20px;box-shadow: 1px 0px 10px 2px #000;border-radius: 10px 0 0 10px;transition: right 1s ease;}");
GM_addStyle("#tocContainer a{color: #64b5f6;text-decoration: none;}");
GM_addStyle("#tocContainer a:hover{color: #7471F7;}");
GM_addStyle("#tocContainer li:hover::marker{color:#7471F7;}");
if (navigator.userAgent.toLowerCase().includes('firefox')){
GM_addStyle("#tocBody{width: 100%; padding: 10px 25px; padding-left: 40px;text-indent: 0; display: flex;align-items: flex-start;flex-direction: column;gap: 7px;}");
} else {
GM_addStyle("#tocBody{width: 100%; padding: 10px 25px; padding-left: 40px;text-indent: -22px; display: flex;align-items: flex-start;flex-direction: column;gap: 7px;}");
}
GM_addStyle("#tocButton{border: none;border-radius: 10px 0 0 10px; position: fixed; align-self: center; right:22vw; box-shadow: -4px 0px 5px -1px #000; cursor: pointer;width:60px;background: #262626 no-repeat center;}");
GM_addStyle("#tocButton div{display: flex;transition: transform 1s ease;}");
GM_addStyle("#tocSettings{width: 100%; padding: 10px 25px;}");
GM_addStyle("#tocCheckbox{color: white;}");
GM_addStyle("#tocLabel{ padding-left: 10px; text-decoration: underline;}");
GM_addStyle("#tocLabel:hover::after{background: #262626; border-radius: 4px; box-shadow: 1px 0px 25px -1px #000; top: 60px; content: 'Скрипт для автоматического переподключения при бездействии'; display: block; padding: 1em; position: absolute; width: 15vw; z-index: 9999999;}");
//create toc container
var tocContainer = document.createElement('div');
tocContainer.id = "tocContainer";
// create settings container
var tocSettings = document.createElement('div');
tocSettings.id = 'tocSettings';
tocContainer.appendChild(tocSettings)
//create checkbox
var tocCheckbox = document.createElement('INPUT');
tocCheckbox.setAttribute("type", "checkbox");
tocCheckbox.id = "tocCheckbox";
tocSettings.appendChild(tocCheckbox);
//create label
var tocLabel = document.createElement("label");
tocLabel.id = 'tocLabel';
tocLabel.htmlFor = "tocCheckbox";
tocLabel.innerHTML = 'Auto Reconnect';
tocSettings.appendChild(tocLabel);
//create toggle button
var tocButton = document.createElement('button');
var tocButtonImage = document.createElement('div');
tocButton.id = 'tocButton';
tocContainer.appendChild(tocButton);
tocButton.appendChild(tocButtonImage);
tocButtonImage.innerHTML = '<svg width="64px" height="64px" viewBox="0 0 1024.00 1024.00" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000" stroke-width="0.01024" transform="matrix(-1, 0, 0, 1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#000000" stroke-width="40.96"><path d="M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z" fill="#ffffff"></path></g><g id="SVGRepo_iconCarrier"><path d="M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z" fill="#ffffff"></path></g></svg>'
//create toc body
var tocBody = document.createElement('div');
tocBody.id = 'tocBody';
tocContainer.appendChild(tocBody);
//insert ul links inside toc body
// var originalLinks = document.querySelector('#copro_babka ul').innerHTML;
var originalLinks = document.querySelector('#cell-gnzJeBa5OYO3 ul').innerHTML;
tocBody.insertAdjacentHTML('afterbegin', originalLinks);
//add toc container to page
var pageBody = document.querySelector("body");
pageBody.appendChild(tocContainer);
WebFont.load({google: {families: ['Merriweather', 'serif']}});
tocContainer.style = "font-family: 'Merriweather', serif; flex-wrap: wrap;";
tocContainer.style.right = '-' + tocBody.offsetWidth + 'px';
console.log('yeeeeeet' + tocContainer.style.right)
//show\hide toggle
tocButton.addEventListener('click', function () {
if (tocContainer.style.right === '0px') {
tocContainer.style.right = '-' + tocBody.offsetWidth + 'px';
tocButtonImage.style.transform = 'rotateY(0deg)';
}
else {
tocContainer.style.right = '0px';
tocButtonImage.style.transform = 'rotateY(180deg)';
console.log(tocContainer.style.right + ' ' + tocBody.offsetWidth);
} //if
}); //click func
//auto reconnect script
//60 sec interval
let CheckBoxInterval;
function startReconnect(){
CheckBoxInterval = setInterval(ClickConnect, 60000);
}
function stopReconnect(){
clearInterval(CheckBoxInterval);
}
//checkbox status check
tocCheckbox.addEventListener('change', (event) => {
if (event.currentTarget.checked) {
console.log('Starting autoreconnect...');
startReconnect();
} else {
console.log('Stopping autoreconnect...');
stopReconnect();
}
})
//click on connect button if disconnected
function ClickConnect() {
if(document.querySelector('#top-toolbar > colab-connect-button')
.shadowRoot.querySelector('#connect-button-resource-display')){
console.log('Not disconnected yet')
} else {
document
.querySelector('#top-toolbar > colab-connect-button')
.shadowRoot.querySelector('#connect')
.click()
console.log('Attempting to reconnect')
}
}
} //mutation observer
} //mutation observer
})(); //global func