Commit 5233e6ac authored by antoine's avatar antoine
Browse files

versionning select

parent 5ac19e79
......@@ -2,3 +2,4 @@ meta-elastique.*
*.log
*.svg
rsync.sh
glyphs.*
......@@ -16,7 +16,10 @@ body {
padding: 5px;
border-top: 1px solid black;
width: 100%;
background: #cdcbcb;
}
#nav > * {
margin: 0px 5px;
}
#pad {
......@@ -45,3 +48,9 @@ body {
position: absolute;
right: 20px;
}
#pad_link {
left: 10px;
color: darkblue;
text-decoration: none;
}
var testing, inReload, inText, inScale, iframe, group, versions, link_pad
var testing, inReload, inText, inScale, iframe, group, versions, pad_link
function nav_versions() {
// let response = fetch('index.txt');
......@@ -18,7 +18,11 @@ function nav_versions() {
group = this.value;
loadLetters(document.querySelector('#inText').value)
location.hash = group
link_pad.innerHTML = this.getAttribute('data-href')
var selected = this.options[this.selectedIndex]
console.log(selected)
pad_link.innerHTML = 'open pad -> '+ selected.value
pad_link.href = selected.getAttribute('data-href')
};
group = versions.value;
......@@ -51,8 +55,8 @@ function loadLetters(letters){
document.addEventListener("DOMContentLoaded", (event) => {
group = location.hash.replace('#', '')
testing = document.querySelector('#testing')
link_pad = document.getElementById('link_pad')
console.log(link_pad)
pad_link = document.getElementById('pad_link')
console.log(pad_link)
inReload = document.querySelector('#inReload')
inText = document.querySelector('#inText')
inScale = document.querySelector('#inScale')
......
var testing, inReload, inText, inScale, iframe, group, versions, pad_link
function nav_versions() {
// let response = fetch('index.txt');
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var index = this.response.split('\n')
index.forEach(function(item, i){
versions = document.querySelector('#versions')
var name = item.split('-')
name = name[name.length-1]
versions.href = '<option data-href="'+item+'" value="'+name+'">'+name+'</option>'
});
versions.onchange = function (e) {
group = this.value;
loadLetters(document.querySelector('#inText').value)
location.hash = group
// var ll = this.getAttribute('data-href')
// var selected = this.options[this.selectedIndex].getAttribute('data-href')
// pad_link.innerHTML = selected
};
group = versions.value;
}
};
xhttp.open("GET", "index.txt", true);
xhttp.send();
}
function scale(value){
testing.style.transform = 'scale(' + value + ')'
}
function rand(){
return Math.floor((Math.random() * 10000) + 1)
}
function loadLetters(letters){
var tabLetters = letters.split('')
testing.innerHTML = ''
tabLetters.forEach(function(item, i){
var itemCode = item.charCodeAt(0)
var ra = rand()
testing.innerHTML += '<img src="projects/' + group + '/svg/' + itemCode + '.svg?rand=' + ra + '" />'
})
}
document.addEventListener("DOMContentLoaded", (event) => {
group = location.hash.replace('#', '')
testing = document.querySelector('#testing')
pad_link = document.getElementById('pad_link')
inReload = document.querySelector('#inReload')
inText = document.querySelector('#inText')
inScale = document.querySelector('#inScale')
inReload.addEventListener('click', (event) => {
loadLetters(inText.value)
})
inScale.addEventListener('change', (event) => {
scale(inScale.value)
})
nav_versions()
})
......@@ -14,6 +14,7 @@
<input id="inScale" type="range" min="0.1" max="2" value="1" step=".1">
<select name="versions" id="versions">
</select>
<a id="pad_link" target="_blank" href=""></a>
</section>
</main>
</body>
......
http://pads.osp.kitchen/p/meta-grand-est-v1
http://pads.osp.kitchen/p/meta-grand-est-v2
http://pads.osp.kitchen/p/meta-grand-est-v3
......@@ -8,6 +8,7 @@
% La ligne suivante indique à Metapost de stocker chaque figure produite dans un dossier nommé ‘svg’
outputtemplate := "projects/v2/svg/%c.svg";
% Pour plus de comodité dans la manipulation des fichiers on précise ici qu'on aimerait avoir des fichiers vectoriels, au format svg en sortie
outputformat := "svg";
......@@ -31,8 +32,8 @@ def variables=
capHeight := 11;
% L'épaisseur du trait peut être préciser en x et en y, l'inclinaison de la plume est définie avec une valeur de rotation.
strokeX := 2u;
strokeY := 2u;
strokeX := 1.2u;
strokeY := 1.2u;
rotation := 45;
% GRAISSES
......@@ -50,7 +51,7 @@ def variables=
enddef;
def col =
brown
black
enddef;
enddef;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment