hyperbook 0.72.0 → 0.72.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/client.js +32 -27
- package/dist/assets/dexie-export-import.js +15 -3497
- package/dist/assets/directive-collapsible/style.css +19 -23
- package/dist/assets/directive-tabs/client.js +31 -27
- package/dist/assets/directive-tabs/style.css +95 -12
- package/dist/assets/shell.css +55 -22
- package/dist/index.js +142 -94
- package/package.json +2 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
display: flow-root;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
.directive-collapsible>
|
|
5
|
+
.directive-collapsible>summary {
|
|
6
6
|
width: 100%;
|
|
7
7
|
text-align: left;
|
|
8
8
|
border-style: solid;
|
|
@@ -13,37 +13,46 @@
|
|
|
13
13
|
padding: 8px 16px;
|
|
14
14
|
border-radius: 4px;
|
|
15
15
|
margin-bottom: 10px;
|
|
16
|
+
list-style: none;
|
|
17
|
+
color: var(--color-text);
|
|
18
|
+
border-color: var(--color-spacer);
|
|
19
|
+
background-color: var(--color-nav);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.directive-collapsible>summary::-webkit-details-marker {
|
|
23
|
+
display: none;
|
|
16
24
|
}
|
|
17
25
|
|
|
18
|
-
.directive-collapsible>
|
|
26
|
+
.directive-collapsible>summary::marker {
|
|
27
|
+
display: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.directive-collapsible[open]>summary {
|
|
19
31
|
border-bottom-left-radius: 0px;
|
|
20
32
|
border-bottom-right-radius: 0px;
|
|
21
33
|
margin-bottom: 0px;
|
|
22
34
|
}
|
|
23
35
|
|
|
24
|
-
.directive-collapsible>
|
|
36
|
+
.directive-collapsible>summary:after {
|
|
25
37
|
content: "\02795";
|
|
26
38
|
/* Unicode character for "plus" sign (+) */
|
|
27
39
|
font-size: 13px;
|
|
28
40
|
float: right;
|
|
29
41
|
margin-left: 5px;
|
|
42
|
+
color: var(--color-text);
|
|
30
43
|
}
|
|
31
44
|
|
|
32
|
-
.directive-collapsible>
|
|
45
|
+
.directive-collapsible[open]>summary:after {
|
|
33
46
|
content: "\2796";
|
|
34
47
|
/* Unicode character for "minus" sign (-) */
|
|
35
48
|
}
|
|
36
49
|
|
|
37
|
-
.directive-collapsible .
|
|
50
|
+
.directive-collapsible .content {
|
|
38
51
|
border-top: none;
|
|
39
52
|
margin-bottom: 10px;
|
|
40
53
|
}
|
|
41
54
|
|
|
42
|
-
.directive-collapsible .
|
|
43
|
-
display: none;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.directive-collapsible>button.expanded+.collapsible-content {
|
|
55
|
+
.directive-collapsible[open] .content {
|
|
47
56
|
display: block;
|
|
48
57
|
border-style: solid;
|
|
49
58
|
border-width: 1px;
|
|
@@ -53,18 +62,5 @@
|
|
|
53
62
|
margin-bottom: 10px;
|
|
54
63
|
border-bottom-left-radius: 4px;
|
|
55
64
|
border-bottom-right-radius: 4px;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.directive-collapsible>button {
|
|
59
|
-
color: var(--color-text);
|
|
60
|
-
border-color: var(--color-spacer);
|
|
61
|
-
background-color: var(--color-nav);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.directive-collapsible>button:after {
|
|
65
|
-
color: var(--color-text);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.directive-collapsible .collapsible-content {
|
|
69
65
|
border-color: var(--color-spacer);
|
|
70
66
|
}
|
|
@@ -1,43 +1,47 @@
|
|
|
1
1
|
hyperbook.tabs = (function () {
|
|
2
2
|
const init = (root) => {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
3
|
+
// Find all radio inputs for tabs
|
|
4
|
+
let allTabInputs = root.querySelectorAll(".directive-tabs .tab-input[data-tabs-id]");
|
|
5
|
+
allTabInputs.forEach((input) => {
|
|
6
|
+
const tabsId = input.getAttribute("data-tabs-id");
|
|
7
|
+
const tabId = input.getAttribute("data-tab-id");
|
|
8
|
+
|
|
9
|
+
// Listen for changes on radio inputs
|
|
10
|
+
input.addEventListener("change", () => {
|
|
11
|
+
if (input.checked) {
|
|
12
|
+
store.tabs.put({
|
|
13
|
+
id: tabsId,
|
|
14
|
+
active: tabId,
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
// Sync all radio inputs with the same tabs-id and tab-id
|
|
18
|
+
syncAllTabs(tabsId, tabId);
|
|
19
|
+
}
|
|
13
20
|
});
|
|
14
21
|
});
|
|
22
|
+
|
|
23
|
+
// Restore saved tab selections
|
|
15
24
|
store.tabs.each((result) => {
|
|
16
25
|
selectTab(result.id, result.active);
|
|
17
26
|
});
|
|
18
27
|
};
|
|
19
28
|
|
|
20
|
-
function
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
relevantTabButtons.forEach((e) => {
|
|
25
|
-
e.className = e.className.replace(" active", "");
|
|
26
|
-
if (e.getAttribute("data-tab-id") == tabId) {
|
|
27
|
-
e.className += " active";
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
let relevantTabPanels = document.querySelectorAll(
|
|
31
|
-
`.directive-tabs .tabpanel[data-tabs-id="${tabsId}"]`
|
|
29
|
+
function syncAllTabs(tabsId, tabId) {
|
|
30
|
+
// Find all radio inputs with the same tabs-id and tab-id across the page
|
|
31
|
+
const allMatchingInputs = document.querySelectorAll(
|
|
32
|
+
`.directive-tabs .tab-input[data-tabs-id="${tabsId}"][data-tab-id="${tabId}"]`
|
|
32
33
|
);
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
e.className += " active";
|
|
37
|
-
}
|
|
34
|
+
|
|
35
|
+
allMatchingInputs.forEach((input) => {
|
|
36
|
+
input.checked = true;
|
|
38
37
|
});
|
|
39
38
|
}
|
|
40
39
|
|
|
40
|
+
function selectTab(tabsId, tabId) {
|
|
41
|
+
// Sync all tabs with this combination
|
|
42
|
+
syncAllTabs(tabsId, tabId);
|
|
43
|
+
}
|
|
44
|
+
|
|
41
45
|
init(document.body);
|
|
42
46
|
|
|
43
47
|
// Observe for new tabs added to the DOM
|
|
@@ -10,6 +10,15 @@
|
|
|
10
10
|
border-width: 1px;
|
|
11
11
|
border-top-right-radius: 4px;
|
|
12
12
|
border-top-left-radius: 4px;
|
|
13
|
+
background-color: var(--color-nav);
|
|
14
|
+
border-color: var(--color-spacer);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/* Hide radio inputs */
|
|
18
|
+
.directive-tabs .tab-input {
|
|
19
|
+
position: absolute;
|
|
20
|
+
opacity: 0;
|
|
21
|
+
pointer-events: none;
|
|
13
22
|
}
|
|
14
23
|
|
|
15
24
|
.directive-tabs > .tabs .tab {
|
|
@@ -23,6 +32,7 @@
|
|
|
23
32
|
padding: 8px 16px;
|
|
24
33
|
transition: 0.3s;
|
|
25
34
|
border-bottom: 4px solid transparent;
|
|
35
|
+
color: var(--color-text);
|
|
26
36
|
}
|
|
27
37
|
|
|
28
38
|
.directive-tabs > .tabpanel {
|
|
@@ -34,33 +44,106 @@
|
|
|
34
44
|
margin-bottom: 12px;
|
|
35
45
|
border-bottom-right-radius: 4px;
|
|
36
46
|
border-bottom-left-radius: 4px;
|
|
47
|
+
border-color: var(--color-spacer);
|
|
48
|
+
display: none;
|
|
37
49
|
}
|
|
38
50
|
|
|
39
|
-
.directive-tabs .tabs {
|
|
40
|
-
|
|
41
|
-
|
|
51
|
+
.directive-tabs .tabs .tab:hover {
|
|
52
|
+
border-bottom-color: var(--color-spacer);
|
|
53
|
+
color: var(--color-brand);
|
|
42
54
|
}
|
|
43
55
|
|
|
44
|
-
|
|
45
|
-
|
|
56
|
+
/* Style active tab based on radio button state using :has() */
|
|
57
|
+
/* Check each input position and style the corresponding label */
|
|
58
|
+
.directive-tabs:has(> .tab-input:nth-of-type(1):checked) .tabs .tab:nth-of-type(1) {
|
|
59
|
+
border-bottom-color: var(--color-brand);
|
|
60
|
+
color: var(--color-brand);
|
|
46
61
|
}
|
|
47
62
|
|
|
48
|
-
.directive-tabs .tabs .tab:
|
|
49
|
-
border-bottom-color: var(--color-
|
|
63
|
+
.directive-tabs:has(> .tab-input:nth-of-type(2):checked) .tabs .tab:nth-of-type(2) {
|
|
64
|
+
border-bottom-color: var(--color-brand);
|
|
50
65
|
color: var(--color-brand);
|
|
51
66
|
}
|
|
52
67
|
|
|
53
|
-
.directive-tabs .tabs .tab
|
|
68
|
+
.directive-tabs:has(> .tab-input:nth-of-type(3):checked) .tabs .tab:nth-of-type(3) {
|
|
54
69
|
border-bottom-color: var(--color-brand);
|
|
55
70
|
color: var(--color-brand);
|
|
56
71
|
}
|
|
57
72
|
|
|
58
|
-
.directive-tabs .
|
|
59
|
-
border-color: var(--color-
|
|
60
|
-
|
|
73
|
+
.directive-tabs:has(> .tab-input:nth-of-type(4):checked) .tabs .tab:nth-of-type(4) {
|
|
74
|
+
border-bottom-color: var(--color-brand);
|
|
75
|
+
color: var(--color-brand);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.directive-tabs:has(> .tab-input:nth-of-type(5):checked) .tabs .tab:nth-of-type(5) {
|
|
79
|
+
border-bottom-color: var(--color-brand);
|
|
80
|
+
color: var(--color-brand);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.directive-tabs:has(> .tab-input:nth-of-type(6):checked) .tabs .tab:nth-of-type(6) {
|
|
84
|
+
border-bottom-color: var(--color-brand);
|
|
85
|
+
color: var(--color-brand);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.directive-tabs:has(> .tab-input:nth-of-type(7):checked) .tabs .tab:nth-of-type(7) {
|
|
89
|
+
border-bottom-color: var(--color-brand);
|
|
90
|
+
color: var(--color-brand);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.directive-tabs:has(> .tab-input:nth-of-type(8):checked) .tabs .tab:nth-of-type(8) {
|
|
94
|
+
border-bottom-color: var(--color-brand);
|
|
95
|
+
color: var(--color-brand);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.directive-tabs:has(> .tab-input:nth-of-type(9):checked) .tabs .tab:nth-of-type(9) {
|
|
99
|
+
border-bottom-color: var(--color-brand);
|
|
100
|
+
color: var(--color-brand);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.directive-tabs:has(> .tab-input:nth-of-type(10):checked) .tabs .tab:nth-of-type(10) {
|
|
104
|
+
border-bottom-color: var(--color-brand);
|
|
105
|
+
color: var(--color-brand);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Show tabpanel based on checked radio input using general sibling combinator */
|
|
109
|
+
/* Note: nth-of-type counts by element type, and .tabs div is the first div */
|
|
110
|
+
.directive-tabs > .tab-input:nth-of-type(1):checked ~ .tabpanel:nth-of-type(2) {
|
|
111
|
+
display: block;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.directive-tabs > .tab-input:nth-of-type(2):checked ~ .tabpanel:nth-of-type(3) {
|
|
115
|
+
display: block;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.directive-tabs > .tab-input:nth-of-type(3):checked ~ .tabpanel:nth-of-type(4) {
|
|
119
|
+
display: block;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.directive-tabs > .tab-input:nth-of-type(4):checked ~ .tabpanel:nth-of-type(5) {
|
|
123
|
+
display: block;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.directive-tabs > .tab-input:nth-of-type(5):checked ~ .tabpanel:nth-of-type(6) {
|
|
127
|
+
display: block;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.directive-tabs > .tab-input:nth-of-type(6):checked ~ .tabpanel:nth-of-type(7) {
|
|
131
|
+
display: block;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.directive-tabs > .tab-input:nth-of-type(7):checked ~ .tabpanel:nth-of-type(8) {
|
|
135
|
+
display: block;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.directive-tabs > .tab-input:nth-of-type(8):checked ~ .tabpanel:nth-of-type(9) {
|
|
139
|
+
display: block;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.directive-tabs > .tab-input:nth-of-type(9):checked ~ .tabpanel:nth-of-type(10) {
|
|
143
|
+
display: block;
|
|
61
144
|
}
|
|
62
145
|
|
|
63
|
-
.directive-tabs .tabpanel
|
|
146
|
+
.directive-tabs > .tab-input:nth-of-type(10):checked ~ .tabpanel:nth-of-type(11) {
|
|
64
147
|
display: block;
|
|
65
148
|
}
|
|
66
149
|
|
package/dist/assets/shell.css
CHANGED
|
@@ -33,6 +33,43 @@ side-drawer {
|
|
|
33
33
|
width: 500px;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
/* Hide side-drawer when JavaScript is disabled */
|
|
37
|
+
.no-js side-drawer {
|
|
38
|
+
display: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Hide mobile nav toggle when JavaScript is disabled */
|
|
42
|
+
.no-js .mobile-nav .toggle {
|
|
43
|
+
display: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Hide TOC toggle when JavaScript is disabled */
|
|
47
|
+
.no-js #toc-toggle {
|
|
48
|
+
display: none;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Hide search button when JavaScript is disabled */
|
|
52
|
+
.no-js #search-toggle {
|
|
53
|
+
display: none;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Hide share button when JavaScript is disabled */
|
|
57
|
+
.no-js #share-button {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Hide QR code button when JavaScript is disabled */
|
|
62
|
+
.no-js #qrcode-open {
|
|
63
|
+
display: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Hide export/import/reset links when JavaScript is disabled */
|
|
67
|
+
.no-js .export-icon,
|
|
68
|
+
.no-js .import-icon,
|
|
69
|
+
.no-js .reset-icon {
|
|
70
|
+
display: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
36
73
|
#nav-drawer {
|
|
37
74
|
background: var(--color-nav);
|
|
38
75
|
border-right-color: var(--color-nav-border);
|
|
@@ -588,7 +625,7 @@ nav li+li {
|
|
|
588
625
|
margin-top: 4px;
|
|
589
626
|
}
|
|
590
627
|
|
|
591
|
-
.section
|
|
628
|
+
.section summary.name {
|
|
592
629
|
display: flex;
|
|
593
630
|
text-decoration: none;
|
|
594
631
|
padding: 10px;
|
|
@@ -596,48 +633,44 @@ nav li+li {
|
|
|
596
633
|
border-style: solid;
|
|
597
634
|
width: 100%;
|
|
598
635
|
user-select: none;
|
|
636
|
+
cursor: pointer;
|
|
637
|
+
list-style: none;
|
|
599
638
|
}
|
|
600
639
|
|
|
601
|
-
.section
|
|
640
|
+
.section summary.name::-webkit-details-marker {
|
|
641
|
+
display: none;
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
.section summary.name::marker {
|
|
645
|
+
display: none;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.section summary.name>.label {
|
|
602
649
|
flex: 1;
|
|
603
650
|
text-decoration: none;
|
|
604
651
|
}
|
|
605
652
|
|
|
606
|
-
.section
|
|
607
|
-
|
|
608
|
-
background: none;
|
|
609
|
-
border: none;
|
|
610
|
-
font-size: 13px;
|
|
653
|
+
.section.empty summary.name {
|
|
654
|
+
cursor: default;
|
|
611
655
|
}
|
|
612
656
|
|
|
613
|
-
.
|
|
614
|
-
|
|
657
|
+
.section.empty summary.name .label {
|
|
658
|
+
font-style: italic;
|
|
615
659
|
}
|
|
616
660
|
|
|
617
|
-
.
|
|
661
|
+
.section summary.name:after {
|
|
618
662
|
content: "\002B";
|
|
619
663
|
width: 1.2rem;
|
|
620
664
|
color: var(--color-text);
|
|
621
665
|
font-weight: bold;
|
|
622
666
|
text-align: right;
|
|
623
|
-
float: right;
|
|
624
667
|
margin-left: 5px;
|
|
625
668
|
}
|
|
626
669
|
|
|
627
|
-
.
|
|
670
|
+
.section[open] summary.name:after {
|
|
628
671
|
content: "\2212";
|
|
629
672
|
}
|
|
630
673
|
|
|
631
|
-
.collapsible-content {
|
|
632
|
-
display: none;
|
|
633
|
-
opacity: 0;
|
|
634
|
-
}
|
|
635
|
-
|
|
636
|
-
.collapsible.expanded+.collapsible-content {
|
|
637
|
-
display: block;
|
|
638
|
-
opacity: 1;
|
|
639
|
-
}
|
|
640
|
-
|
|
641
674
|
.section .section {
|
|
642
675
|
margin-left: 16px;
|
|
643
676
|
margin-bottom: 0px;
|