Mstrdav 3 years ago
parent
commit
079883634d
2 changed files with 112 additions and 4 deletions
  1. 45
    0
      Y/Scripts/yfold.js
  2. 67
    4
      Y/ystyle.css

+ 45
- 0
Y/Scripts/yfold.js View File

@@ -79,3 +79,48 @@ function toggleYfold(id) {
79 79
     var expand = content.classList.contains("anim-hide") || content.classList.contains("hidden") ;
80 80
     setStatus(id, expand, content, true) ;
81 81
 }
82
+
83
+/*********************************
84
+
85
+ Du js pour les codes snippets !
86
+ - theme sombre/clair
87
+ - copier le texte
88
+
89
+**********************************/
90
+
91
+window.onload = function() {
92
+  console.log("DOM loaded.")
93
+  var snippet = document.getElementsByTagName("code")[0];
94
+  console.log(snippet);
95
+
96
+  let img = document.createElement('div');
97
+  img.innerHTML = '<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M407 128H185C153.52 128 128 153.52 128 185V407C128 438.48 153.52 464 185 464H407C438.48 464 464 438.48 464 407V185C464 153.52 438.48 128 407 128Z" stroke="black" stroke-width="32" stroke-linejoin="round"/><path d="M383.5 128L384 104C383.958 89.1609 378.044 74.9416 367.551 64.4487C357.058 53.9558 342.839 48.0422 328 48H112C95.0416 48.0501 78.792 54.8091 66.8005 66.8005C54.8091 78.792 48.0501 95.0416 48 112V328C48.0422 342.839 53.9558 357.058 64.4487 367.551C74.9416 378.044 89.1609 383.958 104 384H128" stroke="black" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/></svg>';
98
+  img.addEventListener('click', function() {
99
+    console.log(snippet.innerText);
100
+    navigator.clipboard.writeText(snippet.innerText).then(function() {
101
+      console.log("copié !");
102
+      img.classList = "valid"
103
+    }, function() {
104
+      console.log("pas copié !");
105
+      img.classList = "not-valid"
106
+    });
107
+  });
108
+
109
+  let theme = document.createElement('div');
110
+  theme.setAttribute("class", "theme");
111
+  theme.innerHTML = '<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M256 464C370.875 464 464 370.875 464 256C464 141.125 370.875 48 256 48C141.125 48 48 141.125 48 256C48 370.875 141.125 464 256 464Z" stroke="black" stroke-width="32" stroke-linejoin="round"/><path d="M256 464C141.12 464 48 370.88 48 256C48 141.12 141.12 48 256 48V464Z" fill="black"/></svg>';
112
+
113
+  theme.addEventListener('click', function() {
114
+    snippet.classList.toggle("light");
115
+    console.log("theme switched !");
116
+    if (theme.classList == "theme darken") {
117
+      theme.classList = "theme lighten";
118
+    } else {
119
+      theme.classList = "theme darken";
120
+    }
121
+  });
122
+
123
+
124
+  snippet.appendChild(img)
125
+  snippet.appendChild(theme)
126
+};

+ 67
- 4
Y/ystyle.css View File

@@ -211,8 +211,9 @@ footer .pcom a {
211 211
 
212 212
 /* PAGE DE CODE */
213 213
 code {
214
+  position: relative;
214 215
   z-index: 2;
215
-  background: #000;
216
+  background: rgba(19,19,19,.8);
216 217
   width: min(94vw, 900px);
217 218
   border-radius: 12px;
218 219
   margin-left: 3vw;
@@ -237,6 +238,40 @@ code * {
237 238
   display: inline;
238 239
 }
239 240
 
241
+code div {
242
+  position: absolute;
243
+  top: 12px;
244
+  right: 12px;
245
+  padding: 6px;
246
+  border-radius: 8px;
247
+  height: 42px;
248
+  width: 42px;
249
+  background: #333;
250
+}
251
+
252
+code div.theme {
253
+  right: 62px;
254
+}
255
+
256
+code div svg {
257
+  height: 30px;
258
+  width: 30px;
259
+  filter: invert(1);
260
+}
261
+
262
+code div.valid {
263
+  background: #181;
264
+}
265
+
266
+code div.not-valid {
267
+  background: #811;
268
+}
269
+
270
+code div.valid, code div.not-valid, code div.darken {
271
+  animation-name: shake;
272
+  animation-duration: .6s;
273
+} 
274
+
240 275
 span.comment {
241 276
   font-style: italic;
242 277
   color: rgb(128, 139, 150);
@@ -244,15 +279,15 @@ span.comment {
244 279
 }
245 280
 
246 281
 span.kw {
247
-  color: rgb(227,99,99);
282
+  color: rgb(203, 128, 53);
248 283
 }
249 284
 
250 285
 span.type {
251
-  color: rgb(203, 128, 53);
286
+  color: rgb(203, 203, 53);
252 287
 }
253 288
 
254 289
 span.fname {
255
-  color: rgb(203, 203, 53);
290
+  color: #72e0d1;
256 291
 }
257 292
 
258 293
 span.string {
@@ -352,3 +387,31 @@ span.uident{
352 387
     margin-bottom: 0;
353 388
   }
354 389
 }
390
+
391
+@keyframes shake {
392
+  0% {
393
+    transform: translateX(0%);
394
+  }
395
+
396
+  20% {
397
+    transform: translateX(-5%);
398
+  }
399
+
400
+  40% {
401
+    transform: translateX(15%);
402
+  }
403
+
404
+  60% {
405
+    transform: translateX(-15%);
406
+  }
407
+
408
+  80% {
409
+    transform: translateX(5%);
410
+  }
411
+
412
+  100% {
413
+    transform: translateX(0%);
414
+  }
415
+
416
+
417
+}

Loading…
Cancel
Save