initial commit on forge variable
This commit is contained in:
sarahgarcin1
parent
388079e6bb
commit
581d60f883
63 changed files with 518 additions and 34500 deletions
|
|
@ -156,7 +156,7 @@
|
|||
|
||||
#interface-header {
|
||||
all: initial;
|
||||
/*display: none;*/
|
||||
display: none;
|
||||
}
|
||||
#interface-header * {
|
||||
all: unset;
|
||||
|
|
@ -191,17 +191,15 @@
|
|||
--border-color: #999;
|
||||
--backgroung-button: rgb(195, 195, 195);
|
||||
color: var(--color-interface-header);
|
||||
border: 1px solid magenta;
|
||||
border: 1px solid black;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 99999;
|
||||
font-size: 11px;
|
||||
/* display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;*/
|
||||
display: block;
|
||||
padding: 10px;
|
||||
font-family: "IBM Plex Mono";
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#interface-header input[type="checkbox"] {
|
||||
|
|
@ -297,10 +295,10 @@ form {
|
|||
|
||||
/* BUTTONS GROUP */
|
||||
|
||||
#header-group-right {
|
||||
/*#header-group-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}*/
|
||||
|
||||
#header-group-right > p {
|
||||
margin-right: 5ch !important;
|
||||
|
|
@ -320,52 +318,42 @@ form {
|
|||
line-height: 1em !important;
|
||||
}
|
||||
|
||||
#buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
/* width: 300px; */
|
||||
#preview-form,
|
||||
#black-form{
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#button-print {
|
||||
width: 60px;
|
||||
opacity: 0.2;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#label-preview-toggle img {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
#label-preview-toggle,
|
||||
#button-print {
|
||||
--buttons-size: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--buttons-size);
|
||||
height: var(--buttons-size);
|
||||
margin-right: 10px;
|
||||
#label-black-toggle,
|
||||
#button-print,
|
||||
#button-print-spread,
|
||||
#quality-toggle {
|
||||
border: 1px solid var(--color-interface-header);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
/* box-shadow: 1px 1px 0px 0px #9f9f9f;*/
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.interface-preview #label-preview-toggle {
|
||||
border: 2px solid var(--color-interface-header);
|
||||
}
|
||||
|
||||
#button-print {
|
||||
box-shadow: 1px 1px 0px 0px #9f9f9f;
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.interface-preview #label-preview-toggle,
|
||||
.mode-black #label-black-toggle{
|
||||
background-color: #000;
|
||||
color: #FFF;
|
||||
/*border: 2px solid var(--color-interface-header);*/
|
||||
}
|
||||
|
||||
#label-preview-toggle:hover,
|
||||
#button-print:hover {
|
||||
background-color: var(--backgroung-button);
|
||||
#label-black-toggle:hover,
|
||||
#button-print:hover,
|
||||
#button-print-spread:hover,
|
||||
#quality-toggle:hover {
|
||||
background-color: #000;
|
||||
color: #FFF;
|
||||
/*background-color: var(--backgroung-button);*/
|
||||
}
|
||||
|
||||
#button-print[data-ready="true"] {
|
||||
|
|
@ -373,6 +361,53 @@ form {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* LAYER SELECTOR --------------------------------------- */
|
||||
|
||||
#layer-form {
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#layer-select {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--color-interface-header);
|
||||
border-radius: 2px;
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 0px 0px #9f9f9f;
|
||||
margin-top: 10px;
|
||||
font-family: sans-serif;
|
||||
font-size: 11px;
|
||||
color: var(--color-interface-header);
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23222'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
#layer-select:hover {
|
||||
background-color: #000;
|
||||
color: #FFF;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23FFF'/%3E%3C/svg%3E");
|
||||
box-shadow: 1px 1px 0px 0px #9f9f9f;
|
||||
}
|
||||
|
||||
#layer-select:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* État actif quand une couche est isolée */
|
||||
body[class*="isolate-"] #layer-select {
|
||||
background-color: #000;
|
||||
color: #FFF;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23FFF'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media print {
|
||||
#interface-header {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
<div class="reset-this grid-form-values-group" id="size-baseline-form">
|
||||
<div>
|
||||
<label class="reset-this" for="size-baseline">Size (px)</label>
|
||||
<label class="reset-this" for="size-baseline">Taille (px)</label>
|
||||
<input class="reset-this" type="number" id="size-baseline" name="size-baseline" min="1" max="100" value="12">
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -26,17 +26,37 @@
|
|||
</form>
|
||||
</div>
|
||||
<div class="reset-this" id="header-group-right">
|
||||
<p class="reset-this"><span id="nrb-pages" class="reset-this"></span> pages</p>
|
||||
<div class="reset-this header-group" id="buttons">
|
||||
<form class="reset-this" id="layer-form">
|
||||
<label class="reset-this" for="layer-select">Sélection de couche</label>
|
||||
<select class="reset-this" id="layer-select" name="layer-select">
|
||||
<option value="">Toutes</option>
|
||||
<option value="red-layer">Rouge</option>
|
||||
<option value="green-layer">Verte</option>
|
||||
<option value="blue-layer">Bleue</option>
|
||||
<option value="black-layer">Noire</option>
|
||||
</select>
|
||||
</form>
|
||||
<br>
|
||||
<form class="reset-this" id="preview-form">
|
||||
<input class="reset-this" type="checkbox" id="preview-toggle" name="preview-toggle">
|
||||
<label class="reset-this"for="preview-toggle" id="label-preview-toggle">
|
||||
<img src="assets/pagedjs/icon-preview.svg">
|
||||
<!-- <img src="assets/pagedjs/icon-preview.svg"> -->
|
||||
Preview
|
||||
</label>
|
||||
</form>
|
||||
<form class="reset-this" id="black-form">
|
||||
<input class="reset-this" type="checkbox" id="black-toggle" name="black-toggle">
|
||||
<label class="reset-this"for="black-toggle" id="label-black-toggle">
|
||||
Noir et blanc
|
||||
</label>
|
||||
</form>
|
||||
<button class="reset-this" id="button-print" onclick="window.print()" data-ready="false" data-text="Print">
|
||||
<img src="assets/pagedjs/icon-printer.svg">
|
||||
|
||||
<!-- <img src="assets/pagedjs/icon-printer.svg">-->
|
||||
Exporter le PDF page à page
|
||||
</button>
|
||||
<button class="reset-this" id="button-print-spread" data-ready="false" data-text="Print Spread">
|
||||
Exporter le PDF imposé
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -135,6 +135,55 @@ function interfaceEvents(){
|
|||
body.classList.remove('interface-preview');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* LAYER SELECTOR ------------------------------------------------------------*/
|
||||
document.querySelector("#layer-select").addEventListener("change", (e) => {
|
||||
const layers = ["red-layer", "green-layer", "blue-layer", "black-layer"];
|
||||
const selected = e.target.value;
|
||||
|
||||
layers.forEach(layer => {
|
||||
body.classList.remove("isolate-" + layer);
|
||||
});
|
||||
|
||||
if (selected) {
|
||||
body.classList.add("isolate-" + selected);
|
||||
// Active automatiquement le mode noir et blanc
|
||||
body.classList.add("mode-black");
|
||||
document.querySelector("#black-toggle").checked = true;
|
||||
} else {
|
||||
// Repasse en couleur si on revient sur "Toutes"
|
||||
body.classList.remove("mode-black");
|
||||
document.querySelector("#black-toggle").checked = false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* Passer le PDF en noir et blanc ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
|
||||
document.querySelector("#black-toggle").addEventListener("input", (e) => {
|
||||
if(e.target.checked){
|
||||
/* black mode */
|
||||
body.classList.add('mode-black');
|
||||
}else{
|
||||
body.classList.remove('mode-black');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* PRINT SPREAD ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
window.enableBooklet = false;
|
||||
document.querySelector("#button-print-spread").addEventListener("click", (e) => {
|
||||
// not working
|
||||
// body.style.setProperty("--paged-layout", "booklet");
|
||||
// window.print();
|
||||
window.enableBooklet = true;
|
||||
window.print();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -177,8 +226,8 @@ class interfacePaged extends Paged.Handler {
|
|||
|
||||
afterPageLayout(pageElement, page, breakToken){
|
||||
let nbr = page.id.replace('page-', '');
|
||||
let span = document.querySelector("#nrb-pages");
|
||||
span.innerHTML = nbr;
|
||||
// let span = document.querySelector("#nrb-pages");
|
||||
// span.innerHTML = nbr;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -187,5 +236,4 @@ class interfacePaged extends Paged.Handler {
|
|||
print.dataset.ready = 'true';
|
||||
}
|
||||
}
|
||||
Paged.registerHandlers(interfacePaged);
|
||||
|
||||
Paged.registerHandlers(interfacePaged);
|
||||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue