distorsion/distorsion.interhacker.space
9
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Nouveau styleswitcher

Browse source
This commit is contained in:
distorsion 2025-01-24 23:27:17 +01:00
parent 867344a579
commit eb449ccdbb
7 changed files with 46 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
site/blog.html
View file

@ -5,8 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>La Distorsion - Blog</title> <title>La Distorsion - Blog</title>
<link rel="icon" href="/img/favicon.svg" /> <link rel="icon" href="/img/favicon.svg" />
<link href="/css/simple.css" rel="stylesheet" title="Simple" /> <link href="/css/default.css" rel="stylesheet" />
<link href="/css/darkmagenta.css" rel="alternate stylesheet" title="Darkmagenta" />
<script src="/js/styleswitcher.js"></script> <script src="/js/styleswitcher.js"></script>
</head> </head>
<body> <body>
@ -18,16 +17,13 @@
<li><a href="/presentation.html">présentation</a></li> <li><a href="/presentation.html">présentation</a></li>
<li><a href="/blog.html">blog</a></li> <li><a href="/blog.html">blog</a></li>
<li> <li>
<label for="style">change de style :</label> <label for="styleswitcher">change de style :</label>
<select class="style" name="style"> <select id="styleswitcher" name="styleswitcher">
<option>Simple</option> <option>Default</option>
<option>No-CSS</option> <option>No-CSS</option>
<option>Darkmagenta</option> <option>Darkmagenta</option>
</select> </select>
<script> <script>initStyleSelectElement()</script>
const selectSelect = document.querySelector(".style");
selectSelect.addEventListener("change", (event) => { setActiveStyleSheet(event.target.value); });
</script>
</li> </li>
</ul> </ul>
</nav> </nav>

14
site/blog/article-template.html
View file

@ -5,8 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>La Distorsion - Blog</title> <title>La Distorsion - Blog</title>
<link rel="icon" href="/img/favicon.svg" /> <link rel="icon" href="/img/favicon.svg" />
<link href="/css/simple.css" rel="stylesheet" title="Simple" /> <link href="/css/default.css" rel="stylesheet" />
<link href="/css/darkmagenta.css" rel="alternate stylesheet" title="Darkmagenta" />
<script src="/js/styleswitcher.js"></script> <script src="/js/styleswitcher.js"></script>
</head> </head>
<body> <body>
@ -18,16 +17,13 @@
<li><a href="/presentation.html">présentation</a></li> <li><a href="/presentation.html">présentation</a></li>
<li><a href="/blog.html">blog</a></li> <li><a href="/blog.html">blog</a></li>
<li> <li>
<label for="style">change de style :</label> <label for="styleswitcher">change de style :</label>
<select class="style" name="style"> <select id="styleswitcher" name="styleswitcher">
<option>Simple</option> <option>Default</option>
<option>No-CSS</option> <option>No-CSS</option>
<option>Darkmagenta</option> <option>Darkmagenta</option>
</select> </select>
<script> <script>initStyleSelectElement()</script>
const selectSelect = document.querySelector(".style");
selectSelect.addEventListener("change", (event) => { setActiveStyleSheet(event.target.value); });
</script>
</li> </li>
</ul> </ul>
</nav> </nav>

0
site/css/simple.css → site/css/default.css
View file

0
site/css/no-css.css Normal file
View file

14
site/index.html
View file

@ -5,8 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>La Distorsion</title> <title>La Distorsion</title>
<link rel="icon" href="/img/favicon.svg" /> <link rel="icon" href="/img/favicon.svg" />
<link href="/css/simple.css" rel="stylesheet" title="Simple" /> <link href="/css/default.css" rel="stylesheet" />
<link href="/css/darkmagenta.css" rel="alternate stylesheet" title="Darkmagenta" />
<script src="/js/styleswitcher.js"></script> <script src="/js/styleswitcher.js"></script>
</head> </head>
<body> <body>
@ -18,16 +17,13 @@
<li><a href="/presentation.html">présentation</a></li> <li><a href="/presentation.html">présentation</a></li>
<li><a href="/blog.html">blog</a></li> <li><a href="/blog.html">blog</a></li>
<li> <li>
<label for="style">change de style :</label> <label for="styleswitcher">change de style :</label>
<select class="style" name="style"> <select id="styleswitcher" name="styleswitcher">
<option>Simple</option> <option>Default</option>
<option>No-CSS</option> <option>No-CSS</option>
<option>Darkmagenta</option> <option>Darkmagenta</option>
</select> </select>
<script> <script>initStyleSelectElement()</script>
const selectSelect = document.querySelector(".style");
selectSelect.addEventListener("change", (event) => { setActiveStyleSheet(event.target.value); });
</script>
</li> </li>
</ul> </ul>
</nav> </nav>

79
site/js/styleswitcher.js
View file

@ -1,64 +1,35 @@
function setActiveStyleSheet(title) { const styles = { "Default" : "/css/default.css",
var i, a, main; "No-CSS" : "/css/no-css.css",
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { "Darkmagenta" : "/css/darkmagenta.css",
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { };
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false; for (const linkElement of document.getElementsByTagName("link")) {
} if (linkElement.getAttribute("rel") === "stylesheet") {
var linkStyleElement = linkElement;
break;
} }
} }
function getActiveStyleSheet() { function setStyle (styleName) {
var i, a; linkStyleElement.setAttribute("href", styles[styleName])
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { sessionStorage.setItem("currentStyle", styleName);
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
} }
function getPreferredStyleSheet() { function initStyle () {
var i, a; const currentStyle = sessionStorage.getItem("currentStyle");
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if (currentStyle) {
if(a.getAttribute("rel").indexOf("style") != -1 setStyle(currentStyle);
&& a.getAttribute("rel").indexOf("alt") == -1 }
&& a.getAttribute("title") else {
) return a.getAttribute("title"); setStyle("Default");
} }
return null;
} }
function createCookie(name,value,days) { function initStyleSelectElement () {
if (days) { const styleSelectElement = document.getElementById("styleswitcher");
var date = new Date(); styleSelectElement.value = sessionStorage.getItem("currentStyle");
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString(); styleSelectElement.addEventListener("change", (event) => {setStyle(event.target.value)});
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
} }
function readCookie(name) { initStyle();
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

14
site/presentation.html
View file

@ -5,8 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>La Distorsion - Présentation</title> <title>La Distorsion - Présentation</title>
<link rel="icon" href="/img/favicon.svg" /> <link rel="icon" href="/img/favicon.svg" />
<link href="/css/simple.css" rel="stylesheet" title="Simple" /> <link href="/css/default.css" rel="stylesheet" />
<link href="/css/darkmagenta.css" rel="alternate stylesheet" title="Darkmagenta" />
<script src="/js/styleswitcher.js"></script> <script src="/js/styleswitcher.js"></script>
</head> </head>
<body> <body>
@ -18,16 +17,13 @@
<li><a href="/presentation.html">présentation</a></li> <li><a href="/presentation.html">présentation</a></li>
<li><a href="/blog.html">blog</a></li> <li><a href="/blog.html">blog</a></li>
<li> <li>
<label for="style">change de style :</label> <label for="styleswitcher">change de style :</label>
<select class="style" name="style"> <select id="styleswitcher" name="styleswitcher">
<option>Simple</option> <option>Default</option>
<option>No-CSS</option> <option>No-CSS</option>
<option>Darkmagenta</option> <option>Darkmagenta</option>
</select> </select>
<script> <script>initStyleSelectElement()</script>
const selectSelect = document.querySelector(".style");
selectSelect.addEventListener("change", (event) => { setActiveStyleSheet(event.target.value); });
</script>
</li> </li>
</ul> </ul>
</nav> </nav>