-
Notifications
You must be signed in to change notification settings - Fork 0
/
SideBarToggleButtonOnTeachable.user.js
109 lines (101 loc) · 4.62 KB
/
SideBarToggleButtonOnTeachable.user.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// ==UserScript==
// @name SideBar Toggle Button on Teachable
// @description 為 Teachable 增加收合 sidebar 的按鈕,可點畫面右上角的按鈕觸發,同時按下 `ctrl + shift + Z` 鍵也可以
// @namespace https://kevinshu1995.github.io/blog/
// @author Kevin Hsu
// @license MIT
// @version 0.3
// @include *://courses.hexschool.com/*
// @grant none
// @homepage https://kevinshu1995.github.io/blog/
// @website https://github.com/kevinshu1995
// @source https://gist.github.com/kevinshu1995/9691a0206bc9222b73334b4f3c17b759
// ==/UserScript==
(function () {
const svg = `<svg x="0px" y="0px" viewBox="0 0 40 34" enable-background="new 0 0 40 34" focusable="false" style="fill: rgb(255, 255, 255);height: 100%;left: 0px;stroke-width: 0px;top: 0px;width: 3rem;/* height: 1rem; *//* width: 1rem; */"><g><g><polyline fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="31.4,12.6 31.4,8.7 25.8,8.7"></polyline><polyline fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="14.7,8.7 9.1,8.7 9.1,12.6"></polyline><polyline fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="25.8,24.8 31.4,24.8 31.4,20.9"></polyline><polyline fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="9.1,20.9 9.1,24.8 14.7,24.8"></polyline></g><rect x="13.7" y="12.3" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" enable-background="new" width="13.3" height="8.9"></rect></g></svg>`;
const toggle = new Toggle();
const keyMap = {};
const keyMapHandler = function (e) {
e = e || event; // to deal with IE
keyMap[e.key] = e.type == "keydown";
/* insert conditional here */
const isTrigger =
keyMap.Control === true &&
keyMap.Shift === true &&
keyMap.Z === true;
if (isTrigger) throttle(toggle.toggle)();
};
appendBtn();
window.addEventListener("keydown", keyMapHandler);
window.addEventListener("keyup", keyMapHandler);
function Toggle() {
const vm = this;
let isShow = true;
this.el_sidebar = {
elementId: "courseSidebar",
showSidebarStyle: "display: none !important",
hideSidebarStyle: "",
};
this.el_main = {
elementSelector: ".revamped_lecture_player .course-mainbar",
showSidebarStyle: "margin-left: 0px !important",
hideSidebarStyle: "",
};
this.toggle = function () {
const finalAnswer =
isShow === true ? "showSidebarStyle" : "hideSidebarStyle";
document.getElementById(vm.el_sidebar.elementId).style.cssText =
vm.el_sidebar[finalAnswer];
document.querySelector(vm.el_main.elementSelector).style.cssText =
vm.el_main[finalAnswer];
isShow = !isShow;
console.log(
isShow,
finalAnswer,
vm.el_main.element.style.cssText,
vm.el_sidebar.element.style.cssText
);
};
}
function appendBtn(
o = {
btnText: "影片擴展/復原",
id: "sideBarToggleBtn",
classList: "nav-btn",
}
) {
const fragment = document.createDocumentFragment();
const btn = document.createElement("a");
btn.style.padding = "0.1rem";
btn.classList.add(o.classList);
btn.id = o.id;
btn.innerHTML = svg;
btn.setAttribute("role", "button");
btn.setAttribute("href", "#");
listenToggleBtn(btn);
fragment.appendChild(btn);
document.querySelector(".lecture-nav").appendChild(fragment);
}
function listenToggleBtn(btn) {
btn.addEventListener("click", toggle.toggle);
}
function throttle(func, timeout = 250) {
let last;
let timer;
return function () {
const context = this;
const args = arguments;
const now = +new Date();
if (last && now < last + timeout) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
func.apply(context, args);
}, timeout);
} else {
last = now;
func.apply(context, args);
}
};
}
})();