|
@@ -1,4 +1,3 @@
|
1
|
|
-
|
2
|
1
|
//
|
3
|
2
|
// Show/hide some sections by clicking on the title.
|
4
|
3
|
//
|
|
@@ -6,78 +5,83 @@
|
6
|
5
|
//
|
7
|
6
|
|
8
|
7
|
function saveStatus(id, shown) {
|
9
|
|
- if (typeof(Storage) !== "undefined") {
|
10
|
|
- localStorage.setItem("yfold-shown-" + id, shown) ;
|
11
|
|
- }
|
|
8
|
+ if (typeof(Storage) !== "undefined") {
|
|
9
|
+ localStorage.setItem("yfold-shown-" + id, shown);
|
|
10
|
+ }
|
12
|
11
|
}
|
13
|
12
|
|
14
|
13
|
// record : (when clicked), record the status in local storage
|
15
|
14
|
function setStatus(id, shown, content, record) {
|
16
|
15
|
|
17
|
|
- // console.log ("setStatus (" + id + ", " + shown + ")") ;
|
|
16
|
+ // console.log ("setStatus (" + id + ", " + shown + ")") ;
|
18
|
17
|
|
19
|
|
- var span = document.getElementById("arrow-" + id) ;
|
|
18
|
+ var span = document.getElementById("arrow-" + id);
|
20
|
19
|
|
21
|
|
- if (shown) {
|
22
|
|
- content.classList.remove("anim-hide") ;
|
23
|
|
- content.classList.remove("hidden") ;
|
24
|
|
- span.innerHTML = "▾" ;
|
25
|
|
- if (record) { content.classList.add("anim-show") ; }
|
26
|
|
- else { content.classList.add("shown") ; }
|
|
20
|
+ if (shown) {
|
|
21
|
+ content.classList.remove("anim-hide");
|
|
22
|
+ content.classList.remove("hidden");
|
|
23
|
+ span.innerHTML = "▾";
|
|
24
|
+ if (record) {
|
|
25
|
+ content.classList.add("anim-show");
|
|
26
|
+ } else {
|
|
27
|
+ content.classList.add("shown");
|
27
|
28
|
}
|
28
|
|
- else {
|
29
|
|
- content.classList.remove("anim-show") ;
|
30
|
|
- content.classList.remove("shown") ;
|
31
|
|
- span.innerHTML = "▸" ;
|
32
|
|
- if (record) { content.classList.add("anim-hide") ; }
|
33
|
|
- else { content.classList.add("hidden") ; }
|
|
29
|
+ } else {
|
|
30
|
+ content.classList.remove("anim-show");
|
|
31
|
+ content.classList.remove("shown");
|
|
32
|
+ span.innerHTML = "▸";
|
|
33
|
+ if (record) {
|
|
34
|
+ content.classList.add("anim-hide");
|
|
35
|
+ } else {
|
|
36
|
+ content.classList.add("hidden");
|
34
|
37
|
}
|
|
38
|
+ }
|
35
|
39
|
|
36
|
|
- if (record) { saveStatus(id, shown) ; }
|
|
40
|
+ if (record) {
|
|
41
|
+ saveStatus(id, shown);
|
|
42
|
+ }
|
37
|
43
|
}
|
38
|
44
|
|
39
|
45
|
// Invoked at load-time once for every yfold section.
|
40
|
46
|
function initYfold(id) {
|
41
|
47
|
|
42
|
|
- // console.log ("initYfold (" + id + ")") ;
|
43
|
|
-
|
44
|
|
- // console.log ("unknown " + id)
|
45
|
|
- var shown = true ;
|
46
|
|
- var content = document.getElementById("content-" + id) ;
|
47
|
|
-
|
48
|
|
- // Sets the state according to local storage or default value.
|
49
|
|
-
|
50
|
|
- if (typeof(Storage) !== "undefined") {
|
51
|
|
- var local = localStorage.getItem("yfold-shown-" + id) ;
|
52
|
|
- // console.log ("using storage value = " + local)
|
53
|
|
-
|
54
|
|
- if (local === 'true') {
|
55
|
|
- shown = true ;
|
56
|
|
- }
|
57
|
|
- else if (local === 'false') {
|
58
|
|
- shown = false ;
|
59
|
|
- }
|
60
|
|
- else {
|
61
|
|
- // Get default value
|
62
|
|
- var defv = content.getAttribute("data-yfold-default") ;
|
63
|
|
- if (defv === 'hide') {
|
64
|
|
- shown = false ;
|
65
|
|
- }
|
66
|
|
- // console.log ("using default value = " + shown)
|
67
|
|
- }
|
|
48
|
+ // console.log ("initYfold (" + id + ")") ;
|
|
49
|
+
|
|
50
|
+ // console.log ("unknown " + id)
|
|
51
|
+ var shown = true;
|
|
52
|
+ var content = document.getElementById("content-" + id);
|
|
53
|
+
|
|
54
|
+ // Sets the state according to local storage or default value.
|
|
55
|
+
|
|
56
|
+ if (typeof(Storage) !== "undefined") {
|
|
57
|
+ var local = localStorage.getItem("yfold-shown-" + id);
|
|
58
|
+ // console.log ("using storage value = " + local)
|
|
59
|
+
|
|
60
|
+ if (local === 'true') {
|
|
61
|
+ shown = true;
|
|
62
|
+ } else if (local === 'false') {
|
|
63
|
+ shown = false;
|
|
64
|
+ } else {
|
|
65
|
+ // Get default value
|
|
66
|
+ var defv = content.getAttribute("data-yfold-default");
|
|
67
|
+ if (defv === 'hide') {
|
|
68
|
+ shown = false;
|
|
69
|
+ }
|
|
70
|
+ // console.log ("using default value = " + shown)
|
68
|
71
|
}
|
|
72
|
+ }
|
69
|
73
|
|
70
|
|
- setStatus(id, shown, content, false) ;
|
|
74
|
+ setStatus(id, shown, content, false);
|
71
|
75
|
}
|
72
|
76
|
|
73
|
77
|
// Function invoked when the title is clicked.
|
74
|
78
|
function toggleYfold(id) {
|
75
|
79
|
|
76
|
|
- // console.log ("toggleYfold (" + id + ")") ;
|
|
80
|
+ // console.log ("toggleYfold (" + id + ")") ;
|
77
|
81
|
|
78
|
|
- var content = document.getElementById("content-" + id) ;
|
79
|
|
- var expand = content.classList.contains("anim-hide") || content.classList.contains("hidden") ;
|
80
|
|
- setStatus(id, expand, content, true) ;
|
|
82
|
+ var content = document.getElementById("content-" + id);
|
|
83
|
+ var expand = content.classList.contains("anim-hide") || content.classList.contains("hidden");
|
|
84
|
+ setStatus(id, expand, content, true);
|
81
|
85
|
}
|
82
|
86
|
|
83
|
87
|
/*********************************
|
|
@@ -121,10 +125,64 @@ window.onload = function() {
|
121
|
125
|
}
|
122
|
126
|
});
|
123
|
127
|
|
124
|
|
-
|
125
|
128
|
snippet.appendChild(img)
|
126
|
129
|
snippet.appendChild(theme)
|
127
|
130
|
} else {
|
128
|
131
|
console.log(snippet.classList);
|
129
|
132
|
}
|
130
|
|
-};
|
|
133
|
+
|
|
134
|
+ if (typeof(Storage) !== "undefined") {
|
|
135
|
+ var theme = localStorage.getItem("theme");
|
|
136
|
+ console.log("theme : " + theme)
|
|
137
|
+
|
|
138
|
+ if (theme === "/Y/ystyle.css") {
|
|
139
|
+ css_url = "/Y/ystyle.css";
|
|
140
|
+ } else if (theme === "/Y/ystyle2.css") {
|
|
141
|
+ css_url = "/Y/ystyle2.css";
|
|
142
|
+ changeCSS(css_url, 0)
|
|
143
|
+ } else {
|
|
144
|
+ // Get default value
|
|
145
|
+ css_url = "/Y/ystyle.css";
|
|
146
|
+ }
|
|
147
|
+ }
|
|
148
|
+
|
|
149
|
+ var toggler = document.createElement("a")
|
|
150
|
+ toggler.setAttribute("id", "toggler")
|
|
151
|
+ toggler.style.position = "absolute"
|
|
152
|
+ toggler.style.top = "12px"
|
|
153
|
+ toggler.style.right = "12px"
|
|
154
|
+ toggler.style.padding = "10px"
|
|
155
|
+ toggler.style.borderRadius = "7px"
|
|
156
|
+ toggler.style.background = "#335"
|
|
157
|
+ toggler.style.color = "#eee"
|
|
158
|
+ toggler.style.zIndex = "12"
|
|
159
|
+ toggler.innerHTML = "theme"
|
|
160
|
+ toggler.style.cursor = "pointer"
|
|
161
|
+ toggler.addEventListener("click", function() {
|
|
162
|
+ if (css_url == "/Y/ystyle.css") {
|
|
163
|
+ css_url = "/Y/ystyle2.css";
|
|
164
|
+ } else {
|
|
165
|
+ css_url = "/Y/ystyle.css";
|
|
166
|
+ }
|
|
167
|
+ changeCSS(css_url, 0)
|
|
168
|
+ })
|
|
169
|
+
|
|
170
|
+ document.body.appendChild(toggler)
|
|
171
|
+}
|
|
172
|
+
|
|
173
|
+function changeCSS(css_file, cssLinkIndex) {
|
|
174
|
+ if (typeof(Storage) !== "undefined") {
|
|
175
|
+ localStorage.setItem("theme", css_file);
|
|
176
|
+ }
|
|
177
|
+
|
|
178
|
+ console.log("changing css")
|
|
179
|
+
|
|
180
|
+ var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
|
|
181
|
+
|
|
182
|
+ var newlink = document.createElement("link");
|
|
183
|
+ newlink.setAttribute("rel", "stylesheet");
|
|
184
|
+ newlink.setAttribute("type", "text/css");
|
|
185
|
+ newlink.setAttribute("href", css_file);
|
|
186
|
+
|
|
187
|
+ document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
|
|
188
|
+}
|