Initial commit
This commit is contained in:
sarahgarcin1
commit
388079e6bb
1108 changed files with 330121 additions and 0 deletions
BIN
assets/pagedjs/IBMPlex/IBMPlexMono-Text.woff
Normal file
BIN
assets/pagedjs/IBMPlex/IBMPlexMono-Text.woff
Normal file
Binary file not shown.
BIN
assets/pagedjs/IBMPlex/IBMPlexMono-Text.woff2
Normal file
BIN
assets/pagedjs/IBMPlex/IBMPlexMono-Text.woff2
Normal file
Binary file not shown.
BIN
assets/pagedjs/IBMPlex/IBMPlexMono-TextItalic.woff
Normal file
BIN
assets/pagedjs/IBMPlex/IBMPlexMono-TextItalic.woff
Normal file
Binary file not shown.
BIN
assets/pagedjs/IBMPlex/IBMPlexMono-TextItalic.woff2
Normal file
BIN
assets/pagedjs/IBMPlex/IBMPlexMono-TextItalic.woff2
Normal file
Binary file not shown.
2
assets/pagedjs/icon-preview.svg
Normal file
2
assets/pagedjs/icon-preview.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<svg class="icon-preview" width="100%" height="100%" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polyline fill="none" points=" 649,137.999 675,137.999 675,155.999 661,155.999 " stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><polyline fill="none" points=" 653,155.999 649,155.999 649,141.999 " stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><polyline fill="none" points=" 661,156 653,162 653,156 " stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/></g><g><g><path d="M16,25c-4.265,0-8.301-1.807-11.367-5.088c-0.377-0.403-0.355-1.036,0.048-1.413c0.404-0.377,1.036-0.355,1.414,0.048 C8.778,21.419,12.295,23,16,23c4.763,0,9.149-2.605,11.84-7c-2.69-4.395-7.077-7-11.84-7c-4.938,0-9.472,2.801-12.13,7.493 c-0.272,0.481-0.884,0.651-1.363,0.377c-0.481-0.272-0.649-0.882-0.377-1.363C5.147,10.18,10.333,7,16,7 c5.668,0,10.853,3.18,13.87,8.507c0.173,0.306,0.173,0.68,0,0.985C26.853,21.819,21.668,25,16,25z"/></g><g><path d="M16,21c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S18.757,21,16,21z M16,13c-1.654,0-3,1.346-3,3s1.346,3,3,3 s3-1.346,3-3S17.654,13,16,13z"/></g></g></svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
assets/pagedjs/icon-printer.svg
Normal file
1
assets/pagedjs/icon-printer.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg class="reset-this icon-printer" width="100%" height="100%" viewBox="0 0 478 478" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M460.8,119.467L375.467,119.467L375.467,17.067C375.467,7.641 367.826,0 358.4,0L119.467,0C110.041,0 102.4,7.641 102.4,17.067L102.4,119.467L17.067,119.467C7.641,119.467 0,127.108 0,136.533L0,358.4C0,367.826 7.641,375.467 17.067,375.467L102.4,375.467L102.4,460.8C102.4,470.226 110.041,477.867 119.467,477.867L358.4,477.867C367.826,477.867 375.467,470.226 375.467,460.8L375.467,375.467L460.8,375.467C470.226,375.467 477.867,367.826 477.867,358.4L477.867,136.533C477.867,127.108 470.226,119.467 460.8,119.467ZM136.533,34.133L341.333,34.133L341.333,119.466L136.533,119.466L136.533,34.133ZM341.333,443.733L136.533,443.733L136.533,290.133L341.333,290.133L341.333,443.733ZM443.733,341.333L375.466,341.333L375.466,290.133L392.533,290.133C401.959,290.133 409.6,282.492 409.6,273.066C409.6,263.64 401.959,256 392.533,256L85.333,256C75.907,256 68.266,263.641 68.266,273.067C68.266,282.493 75.907,290.134 85.333,290.134L102.4,290.134L102.4,341.334L34.133,341.334L34.133,153.6L443.733,153.6L443.733,341.333Z" style="fill-rule:nonzero;"/><path d="M409.6,187.733L392.533,187.733C383.107,187.733 375.466,195.374 375.466,204.8C375.466,214.226 383.107,221.867 392.533,221.867L409.6,221.867C419.026,221.867 426.667,214.226 426.667,204.8C426.667,195.374 419.026,187.733 409.6,187.733Z" style="fill-rule:nonzero;"/><path d="M290.133,324.267L187.733,324.267C178.307,324.267 170.666,331.908 170.666,341.334C170.666,350.76 178.307,358.401 187.733,358.401L290.133,358.401C299.559,358.401 307.2,350.76 307.2,341.334C307.2,331.908 299.559,324.267 290.133,324.267Z" style="fill-rule:nonzero;"/><path d="M290.133,375.467L187.733,375.467C178.307,375.467 170.666,383.108 170.666,392.534C170.666,401.96 178.307,409.601 187.733,409.601L290.133,409.601C299.559,409.601 307.2,401.96 307.2,392.534C307.2,383.108 299.559,375.467 290.133,375.467Z" style="fill-rule:nonzero;"/></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
387
assets/pagedjs/interface-header.css
Normal file
387
assets/pagedjs/interface-header.css
Normal file
|
|
@ -0,0 +1,387 @@
|
|||
.reset-this {
|
||||
animation: none;
|
||||
animation-delay: 0;
|
||||
animation-direction: normal;
|
||||
animation-duration: 0;
|
||||
animation-fill-mode: none;
|
||||
animation-iteration-count: 1;
|
||||
animation-name: none;
|
||||
animation-play-state: running;
|
||||
animation-timing-function: ease;
|
||||
backface-visibility: visible;
|
||||
background: 0;
|
||||
background-attachment: scroll;
|
||||
background-clip: border-box;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-origin: padding-box;
|
||||
background-position: 0 0;
|
||||
background-position-x: 0;
|
||||
background-position-y: 0;
|
||||
background-repeat: repeat;
|
||||
background-size: auto auto;
|
||||
border: 0;
|
||||
border-style: none;
|
||||
border-width: medium;
|
||||
border-color: inherit;
|
||||
border-bottom: 0;
|
||||
border-bottom-color: inherit;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-style: none;
|
||||
border-bottom-width: medium;
|
||||
border-collapse: separate;
|
||||
border-image: none;
|
||||
border-left: 0;
|
||||
border-left-color: inherit;
|
||||
border-left-style: none;
|
||||
border-left-width: medium;
|
||||
border-radius: 0;
|
||||
border-right: 0;
|
||||
border-right-color: inherit;
|
||||
border-right-style: none;
|
||||
border-right-width: medium;
|
||||
border-spacing: 0;
|
||||
border-top: 0;
|
||||
border-top-color: inherit;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-style: none;
|
||||
border-top-width: medium;
|
||||
bottom: auto;
|
||||
box-shadow: none;
|
||||
box-sizing: content-box;
|
||||
caption-side: top;
|
||||
clear: none;
|
||||
clip: auto;
|
||||
color: inherit;
|
||||
columns: auto;
|
||||
column-count: auto;
|
||||
column-fill: balance;
|
||||
column-gap: normal;
|
||||
column-rule: medium none currentColor;
|
||||
column-rule-color: currentColor;
|
||||
column-rule-style: none;
|
||||
column-rule-width: none;
|
||||
column-span: 1;
|
||||
column-width: auto;
|
||||
content: normal;
|
||||
counter-increment: none;
|
||||
counter-reset: none;
|
||||
cursor: auto;
|
||||
direction: ltr;
|
||||
display: inline;
|
||||
empty-cells: show;
|
||||
float: none;
|
||||
font: normal;
|
||||
font-family: inherit;
|
||||
font-size: medium;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
height: auto;
|
||||
hyphens: none;
|
||||
left: auto;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: disc;
|
||||
margin: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: 0;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
opacity: 1;
|
||||
orphans: 0;
|
||||
outline: 0;
|
||||
outline-color: invert;
|
||||
outline-style: none;
|
||||
outline-width: medium;
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
padding: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
page-break-after: auto;
|
||||
page-break-before: auto;
|
||||
page-break-inside: auto;
|
||||
perspective: none;
|
||||
perspective-origin: 50% 50%;
|
||||
position: static;
|
||||
/* May need to alter quotes for different locales (e.g fr) */
|
||||
quotes: "\201C""\201D""\2018""\2019";
|
||||
right: auto;
|
||||
tab-size: 8;
|
||||
table-layout: auto;
|
||||
text-align: inherit;
|
||||
text-align-last: auto;
|
||||
text-decoration: none;
|
||||
text-decoration-color: inherit;
|
||||
text-decoration-line: none;
|
||||
text-decoration-style: solid;
|
||||
text-indent: 0;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
top: auto;
|
||||
transform: none;
|
||||
transform-style: flat;
|
||||
transition: none;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
transition-property: none;
|
||||
transition-timing-function: ease;
|
||||
unicode-bidi: normal;
|
||||
vertical-align: baseline;
|
||||
visibility: visible;
|
||||
white-space: normal;
|
||||
widows: 0;
|
||||
width: auto;
|
||||
word-spacing: normal;
|
||||
z-index: auto;
|
||||
/* basic modern patch */
|
||||
all: initial;
|
||||
all: unset;
|
||||
}
|
||||
|
||||
/* basic modern patch */
|
||||
|
||||
#interface-header {
|
||||
all: initial;
|
||||
/*display: none;*/
|
||||
}
|
||||
#interface-header * {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url("IBMPlex/IBMPlexMono-Text.woff2") format("woff2"),
|
||||
url("IBMPlex/IBMPlexMono-Text.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url("IBMPlex/IBMPlexMono-TextItalic.woff2") format("woff2"),
|
||||
url("IBMPlex/IBMPlexMono-TextItalic.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.interface-bar-bottom #interface-header {
|
||||
bottom: 0;
|
||||
top: unset;
|
||||
}
|
||||
#interface-header {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFF;
|
||||
--color-interface-header: #222;
|
||||
--border-color: #999;
|
||||
--backgroung-button: rgb(195, 195, 195);
|
||||
color: var(--color-interface-header);
|
||||
border: 1px solid magenta;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 99999;
|
||||
font-size: 11px;
|
||||
/* display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;*/
|
||||
padding: 10px;
|
||||
font-family: "IBM Plex Mono";
|
||||
}
|
||||
|
||||
#interface-header input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* GRID FORM --------------------------------------- */
|
||||
|
||||
#header-group-grid {
|
||||
/* width: 700px;*/
|
||||
}
|
||||
|
||||
#interface-header .grid-form {
|
||||
width: 100%;
|
||||
display: block;
|
||||
/* display: flex;
|
||||
align-items: center;*/
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid lightgray;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
#interface-header .grid-form h1 {
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
width: 14ch;
|
||||
margin: 0;
|
||||
margin-right: 3ch;
|
||||
}
|
||||
|
||||
#interface-header .grid-form-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 95px;
|
||||
padding: 5px 0px;
|
||||
border: 1px solid var(--color-interface-header);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
/* box-shadow: 1px 1px 0px 0px var(--color-interface-header);*/
|
||||
/* margin-right: 5ch;*/
|
||||
}
|
||||
|
||||
#interface-header .grid-form-label:hover {
|
||||
background-color: var(--backgroung-button);
|
||||
}
|
||||
|
||||
#interface-header .grid-form-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#interface-header .grid-form-values-group {
|
||||
display: block;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#interface-header .grid-form-values-group > div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#interface-header .grid-form-values-group > div:last-child{
|
||||
margin-top: 5px;
|
||||
|
||||
}
|
||||
|
||||
/* BASELINE GROUP --------------------------------------- */
|
||||
|
||||
#interface-header .grid-form input[type="number"] {
|
||||
width: 50px;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
/* box-shadow: 1px 1px 0px 0px #9f9f9f;*/
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/*#size-baseline-form label {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
*/
|
||||
/*#label-position {
|
||||
margin-left: 1.5em;
|
||||
}*/
|
||||
|
||||
/* BUTTONS GROUP */
|
||||
|
||||
#header-group-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#header-group-right > p {
|
||||
margin-right: 5ch !important;
|
||||
margin-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding: 0 !important;
|
||||
color: var(--color-interface-header) !important;
|
||||
position: relative !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
bottom: 0 !important;
|
||||
right: 0 !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 1em !important;
|
||||
}
|
||||
|
||||
#buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
/* width: 300px; */
|
||||
}
|
||||
|
||||
#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;
|
||||
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 {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#label-preview-toggle:hover,
|
||||
#button-print:hover {
|
||||
background-color: var(--backgroung-button);
|
||||
}
|
||||
|
||||
#button-print[data-ready="true"] {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media print {
|
||||
#interface-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen, pagedjs-ignore {
|
||||
.pagedjs_pages{
|
||||
padding-bottom: 20vh;
|
||||
}
|
||||
}
|
||||
203
assets/pagedjs/interface.css
Normal file
203
assets/pagedjs/interface.css
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
/* CSS for Paged.js interface – v0.2
|
||||
Julie Blanc - 2020
|
||||
MIT License https://opensource.org/licenses/MIT
|
||||
A simple stylesheet to see pages on screen (with baseline included) */
|
||||
|
||||
|
||||
/* Change the look */
|
||||
:root {
|
||||
--color-background: whitesmoke;
|
||||
--color-pageSheet: #cfcfcf;
|
||||
--color-pageBox: violet;
|
||||
--color-paper: white;
|
||||
--color-marginBox: purple;
|
||||
--pagedjs-crop-color: #000;
|
||||
--pagedjs-crop-stroke: 1px;
|
||||
|
||||
--pagedjs-baseline: 12px;
|
||||
--pagedjs-baseline-position: 0px;
|
||||
--pagedjs-baseline-color: cyan;
|
||||
|
||||
--pagedjs-header-height: 80px;
|
||||
}
|
||||
|
||||
.pagedjs_marks-crop{
|
||||
z-index: 999999999999;
|
||||
}
|
||||
|
||||
/* To define how the book look on the screen: */
|
||||
@media screen, pagedjs-ignore {
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
.pagedjs_pages {
|
||||
display: flex;
|
||||
width: calc(var(--pagedjs-width) * 2);
|
||||
flex: 0;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
margin-top: var(--pagedjs-header-height);
|
||||
}
|
||||
|
||||
.pagedjs_page {
|
||||
background-color: var(--color-paper);
|
||||
box-shadow: 0 0 0 1px var(--color-pageSheet);
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
margin-top: 10mm;
|
||||
}
|
||||
|
||||
.pagedjs_first_page {
|
||||
margin-left: calc(var(--pagedjs-width) - var(--pagedjs-bleed-left));
|
||||
}
|
||||
|
||||
.pagedjs_page:last-of-type {
|
||||
margin-bottom: 10mm;
|
||||
}
|
||||
|
||||
.pagedjs_pagebox{
|
||||
box-shadow: 0 0 0 1px var(--color-pageBox);
|
||||
}
|
||||
|
||||
.pagedjs_left_page{
|
||||
z-index: 20;
|
||||
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
|
||||
}
|
||||
|
||||
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.pagedjs_right_page{
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
left: calc(var(--pagedjs-bleed-left)*-1);
|
||||
}
|
||||
|
||||
/* show the margin-box */
|
||||
|
||||
|
||||
|
||||
.pagedjs_margin-top-left-corner-holder,
|
||||
.pagedjs_margin-top,
|
||||
.pagedjs_margin-top-left,
|
||||
.pagedjs_margin-top-center,
|
||||
.pagedjs_margin-top-right,
|
||||
.pagedjs_margin-top-right-corner-holder,
|
||||
.pagedjs_margin-bottom-left-corner-holder,
|
||||
.pagedjs_margin-bottom,
|
||||
.pagedjs_margin-bottom-left,
|
||||
.pagedjs_margin-bottom-center,
|
||||
.pagedjs_margin-bottom-right,
|
||||
.pagedjs_margin-bottom-right-corner-holder,
|
||||
.pagedjs_margin-right,
|
||||
.pagedjs_margin-right-top,
|
||||
.pagedjs_margin-right-middle,
|
||||
.pagedjs_margin-right-bottom,
|
||||
.pagedjs_margin-left,
|
||||
.pagedjs_margin-left-top,
|
||||
.pagedjs_margin-left-middle,
|
||||
.pagedjs_margin-left-bottom {
|
||||
box-shadow: 0 0 0 1px inset var(--color-marginBox);
|
||||
}
|
||||
|
||||
/* uncomment this part for recto/verso book : ------------------------------------ */
|
||||
|
||||
/*
|
||||
.pagedjs_pages {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagedjs_first_page {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pagedjs_page {
|
||||
margin: 0 auto;
|
||||
margin-top: 10mm;
|
||||
}
|
||||
|
||||
.pagedjs_left_page{
|
||||
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
|
||||
}
|
||||
|
||||
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
|
||||
border-color: var(--pagedjs-crop-color);
|
||||
}
|
||||
|
||||
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
|
||||
width: var(--pagedjs-cross-size)!important;
|
||||
}
|
||||
|
||||
.pagedjs_right_page{
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*--------------------------------------------------------------------------------------*/
|
||||
|
||||
|
||||
|
||||
/* PREVIEW MODE */
|
||||
|
||||
.interface-preview {
|
||||
background-color: black;
|
||||
--color-pageBox: #999;
|
||||
}
|
||||
|
||||
.interface-preview .pagedjs_page{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.interface-preview .pagedjs_right_page .pagedjs_bleed,
|
||||
.interface-preview .pagedjs_left_page .pagedjs_bleed-top,
|
||||
.interface-preview .pagedjs_left_page .pagedjs_bleed-bottom,
|
||||
.interface-preview .pagedjs_left_page .pagedjs_bleed-left{
|
||||
background-color: black;
|
||||
z-index:999999;
|
||||
}
|
||||
|
||||
.interface-preview .pagedjs_marks-crop,
|
||||
.interface-preview .pagedjs_marks-crop{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/* BASLINE -------------------------------------------*/
|
||||
|
||||
|
||||
.pagedjs_pagebox {
|
||||
|
||||
background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
|
||||
background-size: 100% var(--pagedjs-baseline);
|
||||
background-repeat: repeat-y;
|
||||
background-position-y: var(--pagedjs-baseline-position);
|
||||
|
||||
}
|
||||
|
||||
.no-baseline .pagedjs_pagebox,
|
||||
.interface-preview .pagedjs_pagebox {
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
||||
.button-print{ display: none; }
|
||||
|
||||
.interface-preview,
|
||||
.no-marginboxes{
|
||||
--color-marginBox: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
42
assets/pagedjs/interface.html
Normal file
42
assets/pagedjs/interface.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
<div class="reset-this" id="header-group-grid">
|
||||
<form class="reset-this grid-form" id="baseline-form">
|
||||
<div class="reset-this grid-form-header">
|
||||
<h1 class="reset-this">Baseline</h1>
|
||||
<input class="reset-this" type="checkbox" id="baseline-toggle" name="baseline-toggle">
|
||||
<label class="reset-this grid-form-label" for="baseline-toggle" id="label-baseline-toggle">Afficher</label>
|
||||
</div>
|
||||
<div class="reset-this grid-form-values-group" id="size-baseline-form">
|
||||
<div>
|
||||
<label class="reset-this" for="size-baseline">Size (px)</label>
|
||||
<input class="reset-this" type="number" id="size-baseline" name="size-baseline" min="1" max="100" value="12">
|
||||
</div>
|
||||
<div>
|
||||
<label class="reset-this" for="position-baseline" id="label-position">Position (px)</label>
|
||||
<input class="reset-this" type="number" id="position-baseline" name="position-baseline" value="0">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form class="reset-this grid-form" id="marginbox-form">
|
||||
<div class="reset-this grid-form-header">
|
||||
<h1 class="reset-this">Margin boxes</h1>
|
||||
<input class="reset-this" type="checkbox" id="marginbox-toggle" name="marginbox-toggle">
|
||||
<label class="reset-this grid-form-label" for="marginbox-toggle" id="label-marginbox-toggle">Afficher</label>
|
||||
</div>
|
||||
</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="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">
|
||||
</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">
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
191
assets/pagedjs/interface.js
Normal file
191
assets/pagedjs/interface.js
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
let p = includeHTML();
|
||||
p.then(() => {
|
||||
interfaceEvents();
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
let flowBook = document.querySelector("#book-content");
|
||||
let book_content = flowBook.content;
|
||||
let paged = new Paged.Previewer();
|
||||
// paged.preview(book_content, ["/assets/css/print-template.css", "/assets/css/main.css", "/assets/css/print.css"], document.querySelector("#renderbook")).then((flow) => {
|
||||
|
||||
// });
|
||||
paged.preview(book_content, ["assets/css/print-template.css", "assets/css/main.css", "assets/css/print.css"], document.querySelector("#renderbook")).then((flow) => {
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function interfaceEvents(){
|
||||
|
||||
let body = document.getElementsByTagName("body")[0];
|
||||
|
||||
|
||||
// set a "unique" filename based on title element, in case several books are opened
|
||||
var fileTitle = document.getElementsByTagName("title")[0].text;
|
||||
|
||||
/* BASELINE ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
/* Set baseline onload */
|
||||
let baselineToggle = localStorage.getItem('baselineToggle' + fileTitle);
|
||||
let baselineButton = document.querySelector('#label-baseline-toggle');
|
||||
let baselineSize = localStorage.getItem('baselineSize' + fileTitle);
|
||||
let baselinePosition = localStorage.getItem('baselinePosition');
|
||||
let baselineSizeInput = document.querySelector('#size-baseline');
|
||||
let baselinePositionInput = document.querySelector('#position-baseline');
|
||||
|
||||
if(baselineToggle == "no-baseline"){
|
||||
body.classList.add('no-baseline');
|
||||
baselineButton.innerHTML = "Afficher";
|
||||
}else if(baselineToggle == "baseline"){
|
||||
body.classList.remove('no-baseline');
|
||||
document.querySelector("#baseline-toggle").checked = "checked";
|
||||
baselineButton.innerHTML = "Masquer";
|
||||
}else{
|
||||
body.classList.add('no-baseline');
|
||||
localStorage.setItem('baselineToggle' + fileTitle, 'no-baseline');
|
||||
baselineButton.innerHTML = "Afficher";
|
||||
}
|
||||
|
||||
/* Get baseline size and position on load*/
|
||||
if(baselineSize){
|
||||
baselineSizeInput.value = baselineSize;
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline', baselineSize + 'px');
|
||||
}else{
|
||||
localStorage.setItem('baselineSize' + fileTitle, baselineSizeInput.value);
|
||||
}
|
||||
baselinePositionInput.addEventListener("input", (e) => {
|
||||
});
|
||||
if(baselinePosition){
|
||||
baselinePositionInput.value = baselinePosition;
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline-position', baselinePosition + 'px');
|
||||
}else{
|
||||
localStorage.setItem('baselineSPosition', baselinePositionInput.value);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Toggle baseline */
|
||||
document.querySelector("#baseline-toggle").addEventListener("input", (e) => {
|
||||
if(e.target.checked){
|
||||
/* see baseline */
|
||||
body.classList.remove('no-baseline');
|
||||
localStorage.setItem('baselineToggle' + fileTitle, 'baseline');
|
||||
baselineButton.innerHTML = "Masquer";
|
||||
}else{
|
||||
/* hide baseline */
|
||||
body.classList.add('no-baseline');
|
||||
localStorage.setItem('baselineToggle' + fileTitle, 'no-baseline');
|
||||
baselineButton.innerHTML = "Afficher";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* Change baseline size on input */
|
||||
document.querySelector("#size-baseline").addEventListener("input", (e) => {
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline', e.target.value + 'px');
|
||||
localStorage.setItem('baselineSize' + fileTitle, baselineSizeInput.value);
|
||||
});
|
||||
|
||||
|
||||
/* Change baseline position on input */
|
||||
document.querySelector("#position-baseline").addEventListener("input", (e) => {
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline-position', e.target.value + 'px');
|
||||
localStorage.setItem('baselinePosition', baselinePositionInput.value);
|
||||
});
|
||||
|
||||
|
||||
/* MARGIN BOXES ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
let marginButton = document.querySelector('#label-marginbox-toggle');
|
||||
|
||||
body.classList.add('no-marginboxes');
|
||||
|
||||
document.querySelector("#marginbox-toggle").addEventListener("input", (e) => {
|
||||
if(e.target.checked){
|
||||
/* see baseline */
|
||||
body.classList.remove('no-marginboxes');
|
||||
marginButton.innerHTML = "Masquer";
|
||||
}else{
|
||||
/* hide baseline */
|
||||
body.classList.add('no-marginboxes');
|
||||
marginButton.innerHTML = "Afficher";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* Preview ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
|
||||
document.querySelector("#preview-toggle").addEventListener("input", (e) => {
|
||||
if(e.target.checked){
|
||||
/* preview mode */
|
||||
body.classList.add('interface-preview');
|
||||
}else{
|
||||
body.classList.remove('interface-preview');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function includeHTML() {
|
||||
var z, i, file, xhttp;
|
||||
/* Loop through a collection of all HTML elements: */
|
||||
/*search for elements with a certain atrribute:*/
|
||||
let elmnt = document.getElementById("interface-header")
|
||||
file = elmnt.getAttribute("w3-include-html");
|
||||
let a = new Promise((resolve, reject) => {
|
||||
if (file) {
|
||||
/* Make an HTTP request using the attribute value as the file name: */
|
||||
xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4) {
|
||||
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
|
||||
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
|
||||
/* Remove the attribute, and call this function once more: */
|
||||
elmnt.removeAttribute("w3-include-html");
|
||||
resolve();
|
||||
}
|
||||
}
|
||||
xhttp.open("GET", file, true);
|
||||
xhttp.send();
|
||||
/* Exit the function: */
|
||||
return;
|
||||
}
|
||||
});
|
||||
return a;
|
||||
}
|
||||
|
||||
|
||||
class interfacePaged extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken){
|
||||
let nbr = page.id.replace('page-', '');
|
||||
let span = document.querySelector("#nrb-pages");
|
||||
span.innerHTML = nbr;
|
||||
}
|
||||
|
||||
|
||||
afterRendered(pages){
|
||||
let print = document.querySelector("#button-print");
|
||||
print.dataset.ready = 'true';
|
||||
}
|
||||
}
|
||||
Paged.registerHandlers(interfacePaged);
|
||||
|
||||
34388
assets/pagedjs/paged-new.js
Normal file
34388
assets/pagedjs/paged-new.js
Normal file
File diff suppressed because it is too large
Load diff
33204
assets/pagedjs/paged.js
Normal file
33204
assets/pagedjs/paged.js
Normal file
File diff suppressed because it is too large
Load diff
116
assets/pagedjs/reload-in-place.js
Normal file
116
assets/pagedjs/reload-in-place.js
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
// Reload-in-place v1.3
|
||||
// Nicolas Taffin + Sameh Chafik - 2020
|
||||
// MIT License https://opensource.org/licenses/MIT
|
||||
// A simple script to add your pagedjs project. On reload, it will make the web browser scroll to the place it was before reload.
|
||||
// Useful when styling or proof correcting your book. Multi docs compatible and doesn't wait for complete compilation to go.
|
||||
|
||||
|
||||
// console.log("reload in place");
|
||||
|
||||
|
||||
// separate human / machine scroll
|
||||
var machineScroll = false;
|
||||
|
||||
// check pagedJS ended compilation
|
||||
var pagedjsEnd = false;
|
||||
|
||||
class pagedjsEnded extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
afterRendered(pages) {
|
||||
pagedjsEnd = true;
|
||||
}
|
||||
}
|
||||
Paged.registerHandlers(pagedjsEnded);
|
||||
|
||||
// set a "unique" filename based on title element, in case several books are opened
|
||||
var fileTitle = document.getElementsByTagName("title")[0].text;
|
||||
|
||||
function getDocHeight() {
|
||||
var D = document;
|
||||
return Math.max(
|
||||
D.body.scrollHeight, D.documentElement.scrollHeight,
|
||||
D.body.offsetHeight, D.documentElement.offsetHeight,
|
||||
D.body.clientHeight, D.documentElement.clientHeight
|
||||
)
|
||||
}
|
||||
function saveAmountScrolled(){
|
||||
var scrollArray = [];
|
||||
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
|
||||
if (!machineScroll) {
|
||||
var scrollLeft = window.pageXOffset || (document.documentElement || document.body.parentNode || document.body).scrollLeft
|
||||
scrollArray.push({ X: Math.round(scrollLeft), Y: Math.round(scrollTop) });
|
||||
// console.log("Saved ", scrollArray);
|
||||
localStorage[fileTitle] = JSON.stringify(scrollArray);
|
||||
}
|
||||
}
|
||||
|
||||
// on Load, blur or opacify the page, and try to join ASAP
|
||||
// last saved position, or at least last compiled page
|
||||
|
||||
window.onload = function() {
|
||||
machineScroll= true;
|
||||
var styleEl = document.createElement('style');
|
||||
document.head.appendChild(styleEl);
|
||||
var styleSheet = styleEl.sheet;
|
||||
// uncomment one of the two options :
|
||||
// nice but high calculation usage : blur until scrolled
|
||||
styleSheet.insertRule('.pagedjs_pages { filter: blur(4px); }', 0);
|
||||
// less power consumption: low opacity until scrolled
|
||||
//styleSheet.insertRule('.pagedjs_pages { opacity: 0.3; }', 0);
|
||||
var savedData = localStorage.getItem(fileTitle);
|
||||
if (savedData) {
|
||||
var scrollArray = JSON.parse(savedData);
|
||||
var scrollTop = scrollArray[0].Y;
|
||||
var scrollLeft = scrollArray[0].X;
|
||||
} else {
|
||||
var scrollTop = 0;
|
||||
var scrollLeft = 0;
|
||||
}
|
||||
var winheight= window.innerHeight || (document.documentElement || document.body).clientHeight
|
||||
window.currentInterval = setInterval(function(){
|
||||
var docheight = getDocHeight();
|
||||
|
||||
if ( scrollTop > 0 && scrollTop > docheight - winheight && !pagedjsEnd) {
|
||||
window.scrollTo(scrollLeft,docheight);
|
||||
} else {
|
||||
window.scrollTo(scrollLeft,scrollTop);
|
||||
clearInterval(window.currentInterval);
|
||||
setTimeout(function(){
|
||||
window.scrollTo(scrollLeft,scrollTop);
|
||||
machineScroll = false;
|
||||
styleSheet.deleteRule(0);
|
||||
}, 100);
|
||||
}
|
||||
}, 50);
|
||||
};
|
||||
|
||||
// slow down a bit save position pace
|
||||
|
||||
var slowSave = debounce(function() {
|
||||
if(!machineScroll) {
|
||||
saveAmountScrolled();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
|
||||
// Scroll triggers save, but not immediately on load
|
||||
|
||||
setTimeout(function(){
|
||||
window.addEventListener('scroll', slowSave);
|
||||
}, 1000);
|
||||
Loading…
Add table
Add a link
Reference in a new issue