initial commit
This commit is contained in:
Julie Blanc
commit
abbd549428
97 changed files with 97614 additions and 0 deletions
1
csspageweaver/.gitignore
vendored
Normal file
1
csspageweaver/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
104
csspageweaver/.gitlab-ci.yml
Normal file
104
csspageweaver/.gitlab-ci.yml
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
stages:
|
||||
- prepare
|
||||
- release
|
||||
|
||||
# This job compile CSS Page Weaver and few plugins
|
||||
prepare_job:
|
||||
stage: prepare
|
||||
image: ubuntu:latest
|
||||
rules:
|
||||
- if: $CI_COMMIT_TAG
|
||||
before_script:
|
||||
- apt-get update && apt-get install -y git curl jq zip bash
|
||||
- git config --global user.email "csspageweaver@csspageweaver.org"
|
||||
- git config --global user.name "Automated Releaser"
|
||||
script:
|
||||
|
||||
- |
|
||||
# Store Job ID since next stage (release_job) link to current job artifacts
|
||||
echo "ARTIFACTS_JOB=$CI_JOB_ID" >> build.env
|
||||
|
||||
- |
|
||||
# create plugins folder if needed
|
||||
mkdir -p plugins
|
||||
|
||||
- |
|
||||
# Set plugins list
|
||||
REPO_LIST=(
|
||||
"baseline"
|
||||
"grid"
|
||||
"imposition"
|
||||
"marginBox"
|
||||
"spread"
|
||||
"previewPage"
|
||||
"reloadInPlace"
|
||||
)
|
||||
|
||||
- |
|
||||
# Add listed plugins as git subtree. Need deployment tokens if repos are private
|
||||
for REPO in "${REPO_LIST[@]}"; do
|
||||
SUBTREE_URL="https://gitlab.com/csspageweaver/plugins/${REPO}.git"
|
||||
git subtree add --prefix="plugins/$REPO" "$SUBTREE_URL" main --squash
|
||||
done
|
||||
|
||||
- |
|
||||
# Define the pluginsParameters object
|
||||
PLUGINS_PARAMETERS='{
|
||||
"baseline": {
|
||||
"size": 16,
|
||||
"position": 0
|
||||
},
|
||||
"reloadInPlace": {
|
||||
"blur": false,
|
||||
"behavior": "instant"
|
||||
}
|
||||
}'
|
||||
|
||||
- |
|
||||
# Add plugin list to manifest
|
||||
MANIFEST_PATH="manifest.json"
|
||||
PLUGINS_ENTRY=$(jq --arg repos "${REPO_LIST[*]}" '.plugins = ($repos | split(" "))' "$MANIFEST_PATH")
|
||||
echo "$PLUGINS_ENTRY" > "$MANIFEST_PATH"
|
||||
|
||||
- |
|
||||
# Add plugin parameters to manifest
|
||||
PARAMETERS_PLUGINS_ENTRY=$(jq --argjson pluginsParameters "$PLUGINS_PARAMETERS" '.pluginsParameters = $pluginsParameters' "$MANIFEST_PATH")
|
||||
echo "$PARAMETERS_PLUGINS_ENTRY" > "$MANIFEST_PATH"
|
||||
|
||||
- |
|
||||
# create folder
|
||||
mkdir -p csspageweaver
|
||||
|
||||
# Copy releveant folder and file to a csspageweaver folder
|
||||
cp -r interface/ lib/ modules/ plugins/ csspageweaver/
|
||||
cp main.js manifest.json README.md .gitignore csspageweaver/
|
||||
|
||||
|
||||
artifacts:
|
||||
name: csspageweaver-core-$CI_COMMIT_TAG
|
||||
paths:
|
||||
- csspageweaver/
|
||||
reports:
|
||||
dotenv: build.env
|
||||
expire_in: never
|
||||
|
||||
# This job create a release based on previous artifact
|
||||
release_job:
|
||||
stage: release
|
||||
image: registry.gitlab.com/gitlab-org/release-cli:latest
|
||||
needs:
|
||||
- job: prepare_job
|
||||
artifacts: true
|
||||
rules:
|
||||
- if: $CI_COMMIT_TAG
|
||||
script:
|
||||
- echo "running release_job for $CI_COMMIT_TAG "
|
||||
release:
|
||||
name: 'Release $CI_COMMIT_TAG'
|
||||
tag_name: '$CI_COMMIT_TAG'
|
||||
ref: '$CI_COMMIT_SHA'
|
||||
description: 'Auto release'
|
||||
assets:
|
||||
links:
|
||||
- name: '👉 CSS Page Weaver with plugins embed'
|
||||
url: 'https://gitlab.com/csspageweaver/csspageweaver/-/jobs/$ARTIFACTS_JOB/artifacts/download'
|
||||
177
csspageweaver/README.md
Normal file
177
csspageweaver/README.md
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
# CSS Page Weaver
|
||||
|
||||
|
||||
|
||||
CSS Page Weaver is a browser-based publishing tool, made up of [PagedJs](https://pagedjs.org/about/) library and modulars additionals features. While it's design to ease installation for beginners CSS Page Weaver also bring elegant and extendable solution for more advanced users.
|
||||
|
||||
## ✨ Features
|
||||
|
||||
- **Streamlined and Ready-to-Use**: Get started quickly with a standardized way to integrate features.
|
||||
- **Extensive Plugin Library**: No need to reinvent the wheel with the available plugins.
|
||||
- **WYSIWYG Editor**: Streamline your design pratice with an extandable interface.
|
||||
- **Create and Share Plugins**: Develop and share your own plugins easily.
|
||||
|
||||
## ⛵ Getting Started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- A local web server
|
||||
|
||||
### 🪴 Installation (fastest way)
|
||||
|
||||
If you feel a bit lost with following instruction, you should probably look at the [CSS Page Weaver compiled with a few plugins](https://gitlab.com/csspageweaver/csspageweaver/-/releases)
|
||||
|
||||
Integrate it at the root level of your page and add a link to `csspageweaver` main _module_ into your HTML template
|
||||
|
||||
```html
|
||||
<script src="/csspageweaver/main.js" type="module"></script>
|
||||
```
|
||||
|
||||
*Do you need to also install PagedJs? Nope! CSS Page Weaver already embed it.*
|
||||
|
||||
### Use
|
||||
|
||||
Run a simple server. That's it!
|
||||
|
||||
### Boilerplate
|
||||
|
||||
Don't have a project to test it? There is [a ready-to-use boilerplate](https://gitlab.com/csspageweaver//boilerplate). Download, unzip & run a server!
|
||||
|
||||
|
||||
## 🚀 Going further
|
||||
|
||||
### 🌲 Installation (complete way)
|
||||
|
||||
Released version on CSS Page Weaver is compiled with few plugins. You can install the package yourself for greater control.
|
||||
|
||||
#### Clone CSS Page Weaver repo in your project [option A].
|
||||
|
||||
```bash
|
||||
# With HTTPS
|
||||
git clone https://gitlab.com/csspageweaver/csspageweaver.git
|
||||
|
||||
# With SSH
|
||||
git clone git@gitlab.com:csspageweaver/csspageweaver.git
|
||||
```
|
||||
#### Clone CSS Page Weaver as a git subtree [option B].
|
||||
|
||||
Subtree are great to:
|
||||
- embed CSS Page Weaver repo in another repo
|
||||
- get updates
|
||||
|
||||
```bash
|
||||
git subtree add --prefix csspageweaver/ git@gitlab.com:csspageweaver/cssPageWeaver.git --squash
|
||||
```
|
||||
|
||||
### 🔌 Dependencies
|
||||
|
||||
CSS Page Weaver is designed to work with plugins. In this complete installation, you need to install plugins by yourself. If you've downloaded [the last release of CSS Page Weaver](https://gitlab.com/csspageweaver/csspageweaver/-/releases), few plugins are already embedded.
|
||||
|
||||
**Here is a [list of all plugins](https://gitlab.com/csspageweaver//plugins) known.**
|
||||
|
||||
**Steps**
|
||||
|
||||
1. Download and place plugin folder in `csspageweaver/plugins`
|
||||
2. Add plugin to manifest
|
||||
|
||||
#### Installation as subtree
|
||||
|
||||
We prefer to install plugins using Git Subtree because it allows us to easily preserve the filiation link with the plugin directory (and to obtain updates!).
|
||||
|
||||
Bear in mind, if you're not comfortable with command lines, that *step 1* can easily be replaced by a simple *download, drag and drop*.
|
||||
|
||||
Otherwise, here is how it works.
|
||||
|
||||
##### (Step 1) Clone plugin as a subtree
|
||||
|
||||
Install plugin as a submodule of `csspageweaver`
|
||||
|
||||
```bash
|
||||
git subtree add --prefix="csspageweaver/plugins/{{PLUGIN_FOLDER_NAME}}" git@gitlab.com:csspageweaver/plugins/{{PLUGIN_NAME}}.git --squash
|
||||
```
|
||||
|
||||
##### (Step 2) Add plugin to manifest
|
||||
|
||||
Almost done. Add a mention to `csspageweaver/manifest.json`
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": [
|
||||
// existing plugin,
|
||||
"PLUGIN_FOLDER_NAME"
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
Look at complete [plugins list](https://gitlab.com/csspageweaver/plugins) and [plugins installation guide](https://gitlab.com/csspageweaver/csspageweaver/-/wikis/design/plugins/install)
|
||||
|
||||
#### Update as subtree
|
||||
|
||||
This is where Git subtrees are wonderful
|
||||
|
||||
```bash
|
||||
git subtree pull --prefix="csspageweaver/plugins/{{PLUGIN_NAME}}" main --squash
|
||||
```
|
||||
|
||||
A bit dazed? Don't worry. Once again, you can update your plugins with your favorite *download, unzip, drag and drop* shady method.
|
||||
|
||||
### 🎁 Package manager
|
||||
|
||||
You already like the principle of subtrees, but you think (rightly) that the multiplication of command lines can be a bit tedious in the long run? Installation and dependencies can me handle with our [Package Manager](https://gitlab.com/csspageweaver/package-manager)
|
||||
|
||||
**Install CSS Page Weaver and plugins with package manager**
|
||||
|
||||
```bash
|
||||
./weaver_manager.sh --install
|
||||
```
|
||||
|
||||
**Get update with package manager**
|
||||
|
||||
```bash
|
||||
./weaver_manager.sh --pull
|
||||
```
|
||||
|
||||
See [Package Manager repository](https://gitlab.com/csspageweaver-toolkit/package_manager) and [further documentation on managing your installation](https://gitlab.com/csspageweaver/csspageweaver/-/wikis/maintain_and_develop/core/5-manage_csspageweaver_integration)
|
||||
|
||||
|
||||
|
||||
## 🔄 Customization
|
||||
|
||||
### Basic Information
|
||||
|
||||
Edit `csspageweaver/manifest.json` to declare:
|
||||
- Plugins
|
||||
- Plugins configuration
|
||||
- Stylesheets
|
||||
- Your custom hooks
|
||||
|
||||
### CSS Page Weaver behavior (advanced)
|
||||
|
||||
Edit `csspageweaver/main.js` to:
|
||||
- disable Common dictionary
|
||||
- disable Interface
|
||||
- Choose render method
|
||||
|
||||
## 🎓 Documentation
|
||||
|
||||
A complete [documentation is available](https://gitlab.com/csspageweaver/csspageweaver/-/wikis/home)
|
||||
|
||||
## 📝 License
|
||||
|
||||
This project is licensed under the MIT License
|
||||
|
||||
## 👏 Acknowledgements
|
||||
|
||||
CSS Page Weaver is based on [PagedJs](https://pagedjs.org/about/) by Coko Foundation.
|
||||
|
||||
CSS Page Weaver is an original idea of Julie Blanc ehanced by Benjamin G.
|
||||
Julien Taquet was a great help in reimagining the rendering module. Finally, Nicolas Taffin and Julien Bidoret helped to oversee this tool.
|
||||
|
||||
All CSS Page Weaver plugins remains linked to their original creators.
|
||||
Without them, GUI would remain an empty shell. Thanks 🙏
|
||||
|
||||
## 🙌 Contributing
|
||||
|
||||
Features and documentation requests are welcome! Feel free to check the [issues page](https://gitlab.com/csspageweaver/csspageweaver/-/issues).
|
||||
|
||||
Contributions must follow our [code of conduct](https://www.contributor-covenant.org/version/2/1/code_of_conduct/)
|
||||
46
csspageweaver/interface/css/grid.css
Normal file
46
csspageweaver/interface/css/grid.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
@media print {
|
||||
|
||||
|
||||
|
||||
/* Size and marin for all pages ------------- */
|
||||
@page {
|
||||
size: 148mm 210mm;
|
||||
margin-top: 20mm;
|
||||
margin-bottom: 20mm;
|
||||
bleed: 6mm;
|
||||
marks: crop;
|
||||
@bottom-center{
|
||||
content: counter(page);
|
||||
}
|
||||
}
|
||||
|
||||
figure, img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
#image-full{
|
||||
--pagedjs-full-page: spread;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#image-full img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
.pagedjs_note{
|
||||
color: red;
|
||||
}
|
||||
136
csspageweaver/interface/css/interface.css
Normal file
136
csspageweaver/interface/css/interface.css
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
/* 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)
|
||||
Adapted for this project */
|
||||
|
||||
|
||||
/* Change the look */
|
||||
:root {
|
||||
--color-background: #efefef;
|
||||
--color-pageSheet: #cfcfcf;
|
||||
--color-pageBox: violet;
|
||||
--color-paper: white;
|
||||
--pagedjs-crop-color: #000;
|
||||
--pagedjs-crop-stroke: 1px;
|
||||
--color-preview: #222;
|
||||
--pagedjs-margin-interface: 20px;
|
||||
--pagedjs-header-height: 80px;
|
||||
|
||||
/* --pagedjs-bleed-left-right: 0mm!important; */
|
||||
}
|
||||
|
||||
.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);
|
||||
padding-left: var(--pagedjs-margin-interface);
|
||||
padding-right: var(--pagedjs-margin-interface);
|
||||
min-width: calc(var(--pagedjs-width) * 2 + var(--pagedjs-margin-interface)*2);
|
||||
}
|
||||
body.no-spread{
|
||||
min-width: calc(var(--pagedjs-width) + var(--pagedjs-margin-interface)*2);
|
||||
|
||||
}
|
||||
|
||||
.pagedjs_pages {
|
||||
display: flex;
|
||||
width: calc(var(--pagedjs-width) * 2);
|
||||
flex: 0;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
margin-bottom: var(--pagedjs-header-height);
|
||||
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_sheet{
|
||||
z-index: 20;
|
||||
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + 1px)!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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.note {
|
||||
float: footnote;
|
||||
}
|
||||
|
||||
/* define the position of the footnote on the page (only bottom is possible for now) */
|
||||
|
||||
@page {
|
||||
@footnote {
|
||||
float: bottom;
|
||||
}
|
||||
}
|
||||
532
csspageweaver/interface/css/panel.css
Normal file
532
csspageweaver/interface/css/panel.css
Normal file
|
|
@ -0,0 +1,532 @@
|
|||
@import url("../fonts/IBM_Plex_Mono/stylesheet.css");
|
||||
|
||||
@media print{
|
||||
csspageweaver-gui{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen, pagedjs-ignore {
|
||||
|
||||
|
||||
/* TOGGLE PANEL ----------------------------------- */
|
||||
#cssPageWeaver_toggle-panel ~ #cssPageWeaver_panel{ display: none; }
|
||||
#cssPageWeaver_toggle-panel + label #panel-open{ display: none; }
|
||||
|
||||
#cssPageWeaver_toggle-panel:checked ~ #cssPageWeaver_panel{ display: block; }
|
||||
#cssPageWeaver_toggle-panel:checked + label #panel-open{ display: block; }
|
||||
#cssPageWeaver_toggle-panel:checked + label #panel-closed{ display: none; }
|
||||
|
||||
#cssPageWeaver_toggle-panel{ display: none; }
|
||||
|
||||
|
||||
/* STYLE ----------------------------------- */
|
||||
:root{
|
||||
--cssPageWeaver-font:'IBM Plex Mono';
|
||||
--cssPageWeaver-size: 16px;
|
||||
--cssPageWeaver-fixed: 30px;
|
||||
|
||||
/* --cssPageWeaver-color-border: #8fb6b0;
|
||||
--cssPageWeaver-color-accent: #EE6C4D;
|
||||
--cssPageWeaver-color-accent-hover: #852811;
|
||||
--cssPageWeaver-color-text: #464f4e;
|
||||
--cssPageWeaver-color-bg: #f8f8f2; */
|
||||
|
||||
|
||||
/* --cssPageWeaver-color-accent: #EE6C4D;
|
||||
--cssPageWeaver-color-accent-hover: #852811;
|
||||
--cssPageWeaver-color-border: #86766e;
|
||||
--cssPageWeaver-color-text: #4f4946;
|
||||
--cssPageWeaver-color-bg: #efefef; */
|
||||
|
||||
--cssPageWeaver-color-accent: RebeccaPurple;
|
||||
--cssPageWeaver-color-accent-hover: BlueViolet;
|
||||
--cssPageWeaver-color-border: #836e86;
|
||||
--cssPageWeaver-color-border-light: #999999;
|
||||
--cssPageWeaver-color-text: #4e464f;
|
||||
--cssPageWeaver-color-bg: #f1f0f0;
|
||||
|
||||
--cssPageWeaver-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Toggle button -------------------------------------------- */
|
||||
|
||||
#cssPageWeaver_toggle-panel + label{
|
||||
background-color: var(--cssPageWeaver-color-bg);
|
||||
border: 2px solid var(--cssPageWeaver-color-border);
|
||||
border-radius: var(--cssPageWeaver-color-radius);
|
||||
|
||||
--size: 30px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25em;
|
||||
|
||||
color: var(--cssPageWeaver-color-text);
|
||||
//border-radius: var(--cssPageWeaver-radius);
|
||||
|
||||
transition: border-radius .25s ease-in-out;
|
||||
|
||||
}
|
||||
|
||||
#cssPageWeaver_toggle-panel:checked + label{
|
||||
border-top-left-radius: var(--cssPageWeaver-radius);
|
||||
}
|
||||
|
||||
|
||||
/* CONTAINER -------------------------------------------- */
|
||||
|
||||
csspageweaver-gui *{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
csspageweaver-gui{
|
||||
font-family: var(--cssPageWeaver-font);
|
||||
color: var(--cssPageWeaver-color-text);
|
||||
font-size: var(--cssPageWeaver-size);
|
||||
}
|
||||
|
||||
csspageweaver-gui label,
|
||||
csspageweaver-gui button{
|
||||
cursor: pointer!important;
|
||||
}
|
||||
|
||||
#cssPageWeaver_toggle-panel + label{
|
||||
position: fixed;
|
||||
left: var(--cssPageWeaver-fixed);
|
||||
top: var(--cssPageWeaver-fixed);
|
||||
width: 30px;
|
||||
left: 30px;
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel{
|
||||
width: 296px;
|
||||
background-color: var(--cssPageWeaver-color-bg);
|
||||
border: 2px solid var(--cssPageWeaver-color-border);
|
||||
border-radius: var(--cssPageWeaver-radius);
|
||||
position: fixed;
|
||||
left: var(--cssPageWeaver-fixed);
|
||||
top: var(--cssPageWeaver-fixed);
|
||||
z-index: 8900;
|
||||
padding: 1em 1em .5em 1em;
|
||||
|
||||
max-height: 80vh;
|
||||
max-height: calc(100vh - 5rem);
|
||||
overflow: scroll;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* panel-group ------------------------------------- */
|
||||
|
||||
|
||||
#cssPageWeaver_panel .panel-group{
|
||||
margin: 0;
|
||||
padding-top: 1.25em;
|
||||
}
|
||||
#cssPageWeaver_panel .panel-group:not(:last-of-type){
|
||||
border-bottom: 1px solid var(--cssPageWeaver-color-border);
|
||||
padding-bottom: 1.25em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* panel-group-title ------------------------------------- */
|
||||
|
||||
#cssPageWeaver_panel h1,
|
||||
#cssPageWeaver_panel button,
|
||||
#cssPageWeaver_panel p,
|
||||
#cssPageWeaver_panel svg,
|
||||
#cssPageWeaver_panel label{
|
||||
all: initial;
|
||||
all: unset;
|
||||
}
|
||||
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title{
|
||||
display: grid;
|
||||
grid-template-columns: auto 1ch 1fr;
|
||||
grid-gap: .5ch;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel h1 span{
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title:not(:empty) + *{
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title h1{
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title input{
|
||||
display: none;
|
||||
}
|
||||
#cssPageWeaver_panel .panel-group-title label{
|
||||
grid-column: -1;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title label span{
|
||||
/* color: var(--cssPageWeaver-color-accent); */
|
||||
font-size: 16px;
|
||||
border: 1.5px solid var(--cssPageWeaver-color-accent);
|
||||
padding: 0.25ch 1ch 0.5ch 1ch;
|
||||
min-width: 4ch;
|
||||
text-align: center;
|
||||
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
border-radius: var(--cssPageWeaver-radius);
|
||||
|
||||
background-color: var(--cssPageWeaver-color-accent);
|
||||
border-color: var(--cssPageWeaver-color-accent);
|
||||
color: var(--cssPageWeaver-color-bg);
|
||||
|
||||
font-style: italic;
|
||||
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title label span:hover{
|
||||
background-color: var(--cssPageWeaver-color-accent-hover);
|
||||
border-color: var(--cssPageWeaver-color-accent-hover);
|
||||
color: var(--cssPageWeaver-color-bg);
|
||||
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title input:not(:checked) + label[id*="toggle"] span.button-see{
|
||||
background-color: var(--cssPageWeaver-color-bg);
|
||||
color: var(--cssPageWeaver-color-accent);
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title input:checked + label[id*="toggle"] span.button-hide{
|
||||
background-color: var(--cssPageWeaver-color-bg);
|
||||
color: var(--cssPageWeaver-color-accent);
|
||||
}
|
||||
|
||||
/* INFO BOX ---------------------------------- */
|
||||
#cssPageWeaver_panel .panel-group-title details{
|
||||
position: relative;
|
||||
}
|
||||
#cssPageWeaver_panel .panel-group-title summary{
|
||||
color: var(--cssPageWeaver-color-text);
|
||||
//border: 1px solid black;
|
||||
//border-radius: 1rem;
|
||||
width: 1rem;
|
||||
font-size: .8em;
|
||||
height: 1rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
opacity: .3;
|
||||
line-height: 160%;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title details summary::marker {
|
||||
display: none;
|
||||
content: "";
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title details p{
|
||||
position: absolute;
|
||||
background: var(--cssPageWeaver-color-bg);
|
||||
padding: .5ch;
|
||||
width: max-content;
|
||||
max-width: 10rem;
|
||||
font-size: .7rem;
|
||||
margin-top: .5ch;
|
||||
border: 1px solid var(--cssPageWeaver-color-accent);
|
||||
border-radius: .2ch;
|
||||
top: -50%;
|
||||
left: 2em;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
|
||||
/* panel-group-values ---------------------------------- */
|
||||
|
||||
#cssPageWeaver_panel .panel-group-values{
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
/* INPUT NUMBER ---------------------------------- */
|
||||
|
||||
|
||||
#cssPageWeaver_panel input[type="number"]{
|
||||
font-family: var(--cssPageWeaver-font)!important;
|
||||
color: var(--cssPageWeaver-color-text);
|
||||
width: 8ch;
|
||||
background-color: transparent!important;
|
||||
border: 1px solid var(--cssPageWeaver-color-text);
|
||||
font-size: calc(var(--cssPageWeaver-size)*0.9);
|
||||
padding-left: 0.5ch;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel input[type="number"]:focus,
|
||||
#cssPageWeaver_panel input[type="number"]:focus-visible{
|
||||
border: 1px solid var(--cssPageWeaver-color-accent)!important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
/* INPUT CHECKBOX ---------------------------------- */
|
||||
|
||||
#cssPageWeaver_panel input[type="checkbox"],
|
||||
#cssPageWeaver_panel input[type="radio"]{ display: none; }
|
||||
|
||||
#cssPageWeaver_panel input + label:not([id*="toggle"])::before{
|
||||
content: "";
|
||||
--size: 12px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
border: 1.5px solid var(--cssPageWeaver-color-text);
|
||||
margin-right: 1ch;
|
||||
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel input:checked + label{
|
||||
color: var(--cssPageWeaver-color-accent);
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel input:checked + label::before{
|
||||
border: 5px solid var(--cssPageWeaver-color-accent);
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel input + label:hover{
|
||||
color: var(--cssPageWeaver-color-accent-hover);
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel input + label:hover::before{
|
||||
border: 1.5px solid var(--cssPageWeaver-color-accent-hover);
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel input[type="radio"]:checked + label:hover::before{
|
||||
border: 5px solid var(--cssPageWeaver-color-accent);
|
||||
}
|
||||
#cssPageWeaver_panel input[type="radio"]:checked + label:hover{
|
||||
color: var(--cssPageWeaver-color-accent);
|
||||
}
|
||||
#cssPageWeaver_panel input[type="checkbox"] + label:hover::before{
|
||||
border: 5px solid var(--cssPageWeaver-color-accent-hover);
|
||||
}
|
||||
|
||||
/* INPUT RADIO ---------------------------------- */
|
||||
|
||||
#cssPageWeaver_panel input[type="radio"] + label{
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* exception */
|
||||
/*#cssPageWeaver_panel #baseline-toggle + label::before{ display: none; }
|
||||
*/
|
||||
|
||||
/* BUTTONS-GROUP ------------------------------------------- */
|
||||
|
||||
#cssPageWeaver_panel .buttons-group button,
|
||||
#cssPageWeaver_panel .buttons-group .button{
|
||||
display: inline-block;
|
||||
--size: 40px;
|
||||
background-color: transparent;
|
||||
border: 1.5px solid var(--cssPageWeaver-color-accent);
|
||||
border-radius: var(--cssPageWeaver-radius);
|
||||
box-sizing: border-box;
|
||||
|
||||
color: var(--cssPageWeaver-color-accent);
|
||||
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .buttons-group .button:not(:has(*)){
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .buttons-group input{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .buttons-group button svg,
|
||||
#cssPageWeaver_panel .buttons-group .button svg{
|
||||
fill: var(--cssPageWeaver-color-accent);
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .buttons-group{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .buttons-group.align-right{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title:not(:empty) + .buttons-group{
|
||||
padding-top: 0.25em;
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .buttons-group .force-right{
|
||||
text-align: right;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#panel-buttons .buttons-group{
|
||||
padding-top: 1.25em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
#panel-buttons .buttons-group button,
|
||||
#panel-buttons .buttons-group .button{
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel input + label.label-block{
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-title.button-toggle label::before{ display: none!important; }
|
||||
|
||||
/* CHECKED BUTTONS --------------------------------------- */
|
||||
|
||||
#cssPageWeaver_panel .buttons-group input:checked + button,
|
||||
#cssPageWeaver_panel .buttons-group input:checked + .button{
|
||||
background-color: var(--cssPageWeaver-color-accent);
|
||||
border-color: var(--cssPageWeaver-color-accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
#cssPageWeaver_panel .buttons-group input:checked + button svg,
|
||||
#cssPageWeaver_panel .buttons-group input:checked + .button svg{
|
||||
fill: var(--cssPageWeaver-color-bg);
|
||||
}
|
||||
|
||||
/* TOGGLE LABEL ICONS --------------------------------------- */
|
||||
|
||||
#cssPageWeaver_panel input[id*="toggle"] + .buttons-group{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel input[id*="toggle"]:checked + .buttons-group .button:nth-of-type(1),
|
||||
#cssPageWeaver_panel input[id*="toggle"]:not(:checked) + .buttons-group .button:nth-of-type(2){
|
||||
background-color: var(--cssPageWeaver-color-accent);
|
||||
border-color: var(--cssPageWeaver-color-accent);
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel input[id*="toggle"]:checked + .buttons-group .button:nth-of-type(1) svg,
|
||||
#cssPageWeaver_panel input[id*="toggle"]:not(:checked) + .buttons-group .button:nth-of-type(2) svg{
|
||||
fill: var(--cssPageWeaver-color-bg);
|
||||
}
|
||||
|
||||
/* DETAILS CONTAINER< ------------------- */
|
||||
|
||||
[data-open-container*="details"] ~ [id*="details"]{
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
top: 1em;
|
||||
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
transition: max-height 1s;
|
||||
}
|
||||
|
||||
[data-open-container*="details"]:checked ~ [id*="details"]{
|
||||
max-height: 100vh;
|
||||
margin-bottom: 0.5em;
|
||||
border-top: .5px solid var(--cssPageWeaver-color-border-light);
|
||||
}
|
||||
|
||||
|
||||
/* HOVER BUTTONS ------------------------------------------------------------ */
|
||||
|
||||
#cssPageWeaver_panel .buttons-group button:hover,
|
||||
#cssPageWeaver_panel .buttons-group .button:hover{
|
||||
background-color: var(--cssPageWeaver-color-accent-hover)!important;
|
||||
border-color: var(--cssPageWeaver-color-accent-hover)!important;
|
||||
}
|
||||
#cssPageWeaver_panel .buttons-group button:hover svg,
|
||||
#cssPageWeaver_panel .buttons-group .button:hover svg{
|
||||
fill: var(--cssPageWeaver-color-bg)!important;
|
||||
}
|
||||
|
||||
/* SHORTCUT ------------------------------------------------------------ */
|
||||
|
||||
#cssPageWeaver_panel .shortcut-list{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: .25em;
|
||||
margin-top: .5em;
|
||||
}
|
||||
#cssPageWeaver_panel .shortcut-list li{
|
||||
font-size: .75em;
|
||||
color: var(--cssPageWeaver-color-text);
|
||||
border: 1px solid;
|
||||
border-radius: .25em;
|
||||
padding: .2em;
|
||||
cursor: help;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* List hidden hooks ------------------------------------------------------------ */
|
||||
|
||||
#cssPageWeaver_panel #hidden-features h1 {
|
||||
font-weight: bold;
|
||||
margin-bottom: .5em;
|
||||
|
||||
}
|
||||
#cssPageWeaver_panel #hidden-features summary {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-top: 1em;
|
||||
font-size: .75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
#cssPageWeaver_panel #hidden-features ul{
|
||||
list-style: none;
|
||||
font-size: .75rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .75em;
|
||||
}
|
||||
#cssPageWeaver_panel #hidden-features ul li{
|
||||
margin-bottom: .25em;
|
||||
color: var(--cssPageWeaver-color-bg);
|
||||
padding: .2em .4em;
|
||||
border-radius: .2em;
|
||||
background: var(--cssPageWeaver-color-accent);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel #hidden-features summary::marker {
|
||||
display: none;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
42
csspageweaver/interface/fonts/IBM_Plex_Mono/stylesheet.css
Normal file
42
csspageweaver/interface/fonts/IBM_Plex_Mono/stylesheet.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
@font-face {
|
||||
src: url('IBMPlexMono-Regular.woff2') format("woff2"),
|
||||
url('IBMPlexMono-Regular.woff') format("woff");
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
src: url('IBMPlexMono-Italic.woff2') format("woff2"),
|
||||
url('IBMPlexMono-Italic.woff') format("woff");
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
src: url('IBMPlexMono-Medium.woff2') format("woff2"),
|
||||
url('IBMPlexMono-Medium.woff') format("woff");
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
src: url('IBMPlexMono-MediumItalic.woff2') format("woff2"),
|
||||
url('IBMPlexMono-MediumItalic.woff') format("woff");
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
src: url('IBMPlexMono-SemiBold.woff2') format("woff2"),
|
||||
url('IBMPlexMono-SemiBold.woff') format("woff");
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
@font-face {
|
||||
src: url('IBMPlexMono-SemiBoldItalic.woff2') format("woff2"),
|
||||
url('IBMPlexMono-SemiBoldItalic.woff') format("woff");
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
}
|
||||
1
csspageweaver/lib/csstree.min.js
vendored
Normal file
1
csspageweaver/lib/csstree.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
33190
csspageweaver/lib/paged.esm.js
Normal file
33190
csspageweaver/lib/paged.esm.js
Normal file
File diff suppressed because it is too large
Load diff
119
csspageweaver/main.js
Normal file
119
csspageweaver/main.js
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/**
|
||||
* @author Benjamin G. <ecrire@bnjm.eu>, Julie Blanc <contact@julie-blanc.fr>
|
||||
* @tutorial https://gitlab.com/csspageweaver/csspageweaver/-/wikis/home
|
||||
* Credit: This global tool is based on an original idea from Julie Blanc
|
||||
*/
|
||||
|
||||
import CssPageWeaver_Dict from './modules/dict.js';
|
||||
import CssPageWeaver_GUI from './modules/gui.js';
|
||||
import CssPageWeaver_SimpleRender from './modules/render.js';
|
||||
import CssPageWeaver_FrameRender from './modules/frame_render.js';
|
||||
|
||||
import * as csstree from './lib/csstree.min.js';
|
||||
|
||||
/**
|
||||
* This script manage the way CSS Page Weaver
|
||||
* With or without GUI, with or without common dictionary
|
||||
* With simple render or framed render
|
||||
* Call instances on purpose
|
||||
*/
|
||||
|
||||
//👋 HERE - Edit method here or from you own script
|
||||
if(typeof cssPageWeaver_method == "undefined"){
|
||||
window.cssPageWeaver_method = {
|
||||
gui: true,
|
||||
dict: true,
|
||||
render: "simple",
|
||||
}
|
||||
}
|
||||
|
||||
// Dict
|
||||
if(cssPageWeaver_method.dict){
|
||||
window.cssPageWeaver_dict = new CssPageWeaver_Dict()
|
||||
}
|
||||
|
||||
// GUI
|
||||
if(cssPageWeaver_method.gui){
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
customElements.define('csspageweaver-gui', CssPageWeaver_GUI)
|
||||
window.cssPageWeaver_gui = document.createElement('csspageweaver-gui');
|
||||
cssPageWeaver_gui.classList.add("pagedjs-ignore");
|
||||
document.body.insertAdjacentElement('afterbegin', cssPageWeaver_gui)
|
||||
})
|
||||
}
|
||||
|
||||
// SIMPLE RENDER
|
||||
if(cssPageWeaver_method.dict && cssPageWeaver_method.render == "simple"){
|
||||
// If pagedjs is defined, wait for the 'cssPageWeaver_dictInit' event to initialize
|
||||
document.addEventListener('cssPageWeaver-dictInit', () => {
|
||||
|
||||
window.cssPageWeaver_simpleRender = new CssPageWeaver_SimpleRender()
|
||||
|
||||
cssPageWeaver_simpleRender.interface = `${cssPageWeaver.directory.root}/interface/css/interface.css`
|
||||
|
||||
cssPageWeaver_simpleRender.hook = [
|
||||
...cssPageWeaver_dict.getFeaturesHookAsArray(),
|
||||
...cssPageWeaver.user?.hook
|
||||
]
|
||||
|
||||
cssPageWeaver_simpleRender.css = [
|
||||
...cssPageWeaver.user?.css,
|
||||
...cssPageWeaver_dict.getFeaturesStyleAsArray()
|
||||
]
|
||||
|
||||
cssPageWeaver_simpleRender.setup()
|
||||
});
|
||||
}
|
||||
|
||||
// FRAMED RENDER
|
||||
if(cssPageWeaver_method.dict && cssPageWeaver_method.render == "frame"){
|
||||
/* Using with shadow */
|
||||
document.addEventListener('cssPageWeaver-dictInit', () => {
|
||||
|
||||
customElements.define('csspageweaver-frame', CssPageWeaver_FrameRender);
|
||||
window.cssPageWeaver_frame = document.createElement('csspageweaver-frame');
|
||||
|
||||
cssPageWeaver_frame.interface = `${cssPageWeaver.directory.root}/interface/css/interface.css`
|
||||
|
||||
cssPageWeaver_frame.hook = [
|
||||
...cssPageWeaver_dict.getFeaturesHookAsArray(),
|
||||
...cssPageWeaver.user?.hook
|
||||
]
|
||||
|
||||
cssPageWeaver_frame.css = [
|
||||
...cssPageWeaver.user?.css,
|
||||
...cssPageWeaver.stylesheet.features
|
||||
]
|
||||
|
||||
document.body.insertAdjacentElement('afterbegin', cssPageWeaver_frame)
|
||||
|
||||
// Simulate Change
|
||||
/*
|
||||
setTimeout( async () => {
|
||||
cssPageWeaver_frame.css.push('/css/style-2.css')
|
||||
cssPageWeaver_frame.reloadDocument('/')
|
||||
}, 2000)
|
||||
*/
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/* Using without GUI or Dict */
|
||||
if( !cssPageWeaver_method.dict && !cssPageWeaver_method.dict){
|
||||
if(cssPageWeaver_method.render == "frame"){
|
||||
customElements.define('csspageweaver-frame', CssPageWeaver_FrameRender);
|
||||
window.cssPageWeaver_frame = document.createElement('csspageweaver-frame');
|
||||
cssPageWeaver_frame.interface = `csspageweaver/interface/css/interface.css`
|
||||
cssPageWeaver_frame.css = ['/css/style.css']
|
||||
document.body.insertAdjacentElement('afterbegin', cssPageWeaver_frame)
|
||||
} else {
|
||||
window.cssPageWeaver_simpleRender = new CssPageWeaver_SimpleRender()
|
||||
cssPageWeaver_simpleRender.interface = `csspageweaver/interface/css/interface.css`
|
||||
cssPageWeaver_simpleRender.hook = []
|
||||
cssPageWeaver_simpleRender.css.push('/css/style.css')
|
||||
cssPageWeaver_simpleRender.setup()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
18
csspageweaver/manifest.json
Normal file
18
csspageweaver/manifest.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"plugins": ["baseline","grid","marginBox","imposition","spread","previewPage","reloadInPlace","fullPage","inlineNotes"],
|
||||
"pluginsParameters":{},
|
||||
"css": [
|
||||
"css/style.css"
|
||||
],
|
||||
"pluginsParameters": {
|
||||
"inlineNotes": {
|
||||
"input": ".footnote-ref",
|
||||
"containerNotes": ".footnotes"
|
||||
}
|
||||
},
|
||||
"hook": [
|
||||
"/js/custom-handler-example-1.js",
|
||||
"/js/custom-handler-example-2.js"
|
||||
]
|
||||
}
|
||||
|
||||
333
csspageweaver/modules/dict.js
Normal file
333
csspageweaver/modules/dict.js
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
/**
|
||||
* @classdesc This provides a common dictionnary for a Paged.js tools.
|
||||
*
|
||||
* Web Component will fetch the list of features. For each one a class will be instantiated.
|
||||
* This class groups all the key data. From this list of instances
|
||||
* the component will refine the data, import all necessary scripts, hooks and stylesheet.
|
||||
*
|
||||
* This very logic can be observed at the end of the component in the setup() function.
|
||||
*
|
||||
* @author Benjamin G. <ecrire@bnjm.eu>
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @tutorial https://gitlab.com/csspageweaver/csspageweaver/-/wikis/home
|
||||
*/
|
||||
|
||||
class CssPageWeaver_Dict {
|
||||
constructor(){
|
||||
console.log('CSS Page Weaver Dict initialized');
|
||||
|
||||
// Define a Feature class to manage individual features
|
||||
this.Feature = class {
|
||||
constructor(featureConfig, id, directory, config) {
|
||||
this.id = id
|
||||
this.directory = directory
|
||||
this.ui = featureConfig.ui
|
||||
this.parameters = featureConfig.parameters
|
||||
this.hook = featureConfig.hook
|
||||
this.script = featureConfig.script
|
||||
this.stylesheet = featureConfig.stylesheet
|
||||
this.globalParameters = config
|
||||
}
|
||||
}
|
||||
|
||||
this.setup()
|
||||
}
|
||||
|
||||
/*-- Generics functions --*/
|
||||
|
||||
/**
|
||||
* Clear and split feature directory path to define an unique ID
|
||||
* @param {string} path - Feature folder path.
|
||||
* @returns {string} - Feature ID.
|
||||
*/
|
||||
getIdFromPath(path){
|
||||
return path.trim().split("/").filter(segment => segment.trim() !== '').pop()
|
||||
}
|
||||
|
||||
/*-- Dict --*/
|
||||
|
||||
setSharedDictionnary(){
|
||||
|
||||
window.cssPageWeaver = {}
|
||||
// Get the document title and remove spaces for use as a variable
|
||||
cssPageWeaver.docTitle = document.getElementsByTagName("title")[0].text.replace(/ /g, "");
|
||||
|
||||
// Set path & directory
|
||||
cssPageWeaver.directory = {}
|
||||
cssPageWeaver.directory.root = `${window.location.origin}/csspageweaver`
|
||||
cssPageWeaver.directory.plugins = `${cssPageWeaver.directory.root}/plugins`
|
||||
|
||||
// Initialise user custom files
|
||||
cssPageWeaver.user = {}
|
||||
|
||||
// Object to hold all features
|
||||
cssPageWeaver.features = {}
|
||||
}
|
||||
|
||||
/*-- Import or list files --*/
|
||||
|
||||
/**
|
||||
* Import the list of feature names from the manifest file or directory.
|
||||
*
|
||||
* This method attempts to import the feature names from a manifest.json file.
|
||||
* If the manifest is not found, it falls back to listing the feature names
|
||||
* from the plugin directory.
|
||||
*
|
||||
* @returns {Promise<Array>} A promise that resolves to an array of feature names.
|
||||
*/
|
||||
async importManifest(){
|
||||
|
||||
try{
|
||||
// Attempt to read the manifest file to get the list of features
|
||||
return await this.importJson(`${cssPageWeaver.directory.root}/`,`manifest.json`);
|
||||
} catch(error){
|
||||
console.log('Manifest not found, trying alternative method.');
|
||||
// If the manifest is not found, list feature names from the plugin directory
|
||||
let featuresNamesList = await this.listDir(cssPageWeaver.directory.plugins);
|
||||
// Return object
|
||||
return {"plugins": featuresNamesList }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Imports an HTML template file from a given directory and file name.
|
||||
* @param {string} dir - The directory where the template file is located.
|
||||
* @param {string} file - The name of the template file.
|
||||
* @returns {Promise<string>} - A promise that resolves to the contents of the template file.
|
||||
*/
|
||||
async importTemplate(dir, file) {
|
||||
const response = await fetch(`${dir}/${file}`);
|
||||
const template = await response.text();
|
||||
return template;
|
||||
}
|
||||
|
||||
/**
|
||||
* Imports a Javascript file from a specified directory.
|
||||
*
|
||||
* @param {string} path - The path path where the JS file is located.
|
||||
* @returns {Promise<Object>} A promise that resolves to the JS content of the file.
|
||||
* @throws {Error} Throws an error if the fetch request fails or if the file is not found.
|
||||
*/
|
||||
async importJs(path) {
|
||||
try {
|
||||
return await import(path)
|
||||
} catch (error) {
|
||||
console.error(`Error loading JS for ${path}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Imports a JSON file from a specified directory.
|
||||
*
|
||||
* @param {string} dir - The directory path where the JSON file is located.
|
||||
* @param {string} file - The name of the JSON file to import.
|
||||
* @returns {Promise<Object>} A promise that resolves to the JSON content of the file.
|
||||
* @throws {Error} Throws an error if the fetch request fails or if the file is not found.
|
||||
*/
|
||||
async importJson(dir, file) {
|
||||
|
||||
try {
|
||||
const response = await fetch(`${dir}/${file}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`🚨 Oups. Can't find ${file} in ${this.getIdFromPath(dir)}`);
|
||||
}
|
||||
const json = await response.json();
|
||||
return json;
|
||||
} catch (error) {
|
||||
console.error(`Error fetching json file in ${this.getIdFromPath(dir)}:`, error);
|
||||
throw error; // Re-throw the error to be caught in importJson
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Lists the directories within a specified directory by fetching and parsing its HTML content.
|
||||
*
|
||||
* This method fetches the automatically generated HTML page listing content of a directory,
|
||||
* parses it to find links, and extracts directory names based on a date pattern.
|
||||
*
|
||||
* Server must allow listing directory.
|
||||
* Yes. It's dirty.
|
||||
*
|
||||
* @param {string} dir - The URL of the directory to list.
|
||||
* @returns {Promise<Array<string>>} A promise that resolves to an array of directory names.
|
||||
* @throws {Error} Throws an error if the fetch request fails or if there is an issue parsing the content.
|
||||
*/
|
||||
async listDir(dir) {
|
||||
try {
|
||||
const response = await fetch(dir);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch plugin directory'); }
|
||||
const text = await response.text();
|
||||
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(text, 'text/html');
|
||||
const links = doc.querySelectorAll('a');
|
||||
|
||||
const directories = [];
|
||||
const datePattern = /\d+\//; // Matches the first number followed by a '/'
|
||||
|
||||
links.forEach(link => {
|
||||
const name = link.textContent;
|
||||
if (name) {
|
||||
const match = name.match(datePattern);
|
||||
if (match) {
|
||||
// Remove everything from the date part onward
|
||||
const cleanedName = name.split(datePattern)[0].trim();
|
||||
directories.push(cleanedName);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return directories;
|
||||
} catch (error) {
|
||||
console.error(`Error listing ${dir} items`, error);
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-- CSS --*/
|
||||
|
||||
/**
|
||||
* Compare declared and DOM loaded stylesheet. Warn user if he missed one.
|
||||
* {array} - An array of stylesheet declared by user in manifest
|
||||
*/
|
||||
lookForForgottenStylesheet(userStylesheets) {
|
||||
// Get all stylesheet (not for screen) already loaded
|
||||
const links = document.querySelectorAll(`link[rel="stylesheet"]:not([media="screen"]`)
|
||||
|
||||
let domStylesheets = []
|
||||
|
||||
// Iterate over each link element
|
||||
links.forEach(link => {
|
||||
// Exlude CSS Page Weaver stylesheet
|
||||
if(!link.href.includes('csspageweaver')){
|
||||
domStylesheets.push(link.href.split('?')[0])
|
||||
}
|
||||
});
|
||||
|
||||
// We'll not retrieve already loaded CSS just warn user if he forget one stylesheet
|
||||
//return CSSArray
|
||||
|
||||
let missedStylesheets = domStylesheets.filter(sheet => !userStylesheets.includes(sheet));
|
||||
|
||||
if(missedStylesheets.length > 0){
|
||||
console.warn(`😶🌫️ Did you missed to include ${missedStylesheets.join(', ') } into csspageweaver/manifest.json? `)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-- Features --*/
|
||||
|
||||
/**
|
||||
* Initializes features by loading their configurations and creating instances.
|
||||
*
|
||||
* This method reads feature names from a manifest, imports their configurations,
|
||||
* and sets up their UI, hooks and scripts if available.
|
||||
*/
|
||||
async initializeFeatures(featuresNamesList, featuresParameters) {
|
||||
|
||||
// Loop all features
|
||||
for (const featureName of featuresNamesList) {
|
||||
const featureDir = `${cssPageWeaver.directory.plugins}/${featureName}/`
|
||||
|
||||
const featureEmbedConfig = await this.importJson(featureDir, `config.json`)
|
||||
const featureManifestConfig = {"parameters" : featuresParameters[featureName]} || {}
|
||||
const featureConfig = {...featureEmbedConfig, ...featureManifestConfig}
|
||||
|
||||
// Create a new instance of the feature
|
||||
let feature = new this.Feature(featureConfig, featureName, featureDir, cssPageWeaver.parameters);
|
||||
|
||||
// Import feature's HTML template if specified
|
||||
if(feature.ui){
|
||||
if(feature.ui.template){
|
||||
feature.ui.html = await this.importTemplate(featureDir, feature.ui.template);
|
||||
}
|
||||
}
|
||||
|
||||
// Import the feature's script and hook if specified
|
||||
['script', 'hook'].forEach(property => {
|
||||
if (feature[property]) {
|
||||
let fileName = feature[property];
|
||||
feature[property] = this.importJs(`${featureDir}/${fileName}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Store the initialized feature
|
||||
cssPageWeaver.features[featureName] = feature
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
async initializeUserHook(handlerList = []) {
|
||||
cssPageWeaver.user.hook = await Promise.all(
|
||||
handlerList.map(async path => {
|
||||
return await this.importJs(path) // Return the promise from importJs
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves features that have a hook from the `cssPageWeaver` object.
|
||||
* @returns {Array} An array of features that have a hook. Returns an empty array if `cssPageWeaver` is undefined or does not have features.
|
||||
*/
|
||||
getFeaturesHookAsArray(){
|
||||
// Convert the features object to an array
|
||||
const featuresArray = Object.values(cssPageWeaver.features);
|
||||
// Filter to only features with a hook
|
||||
return featuresArray
|
||||
.filter(feature => feature.hook)
|
||||
.map(feature => feature.hook);
|
||||
}
|
||||
|
||||
/**
|
||||
* Aggregates the CSS paths from all features that have a stylesheet.
|
||||
* @returns {Array} An array of CSS file paths.
|
||||
*/
|
||||
getFeaturesStyleAsArray(){
|
||||
// Convert the features object to an array
|
||||
const featuresArray = Object.values(cssPageWeaver.features);
|
||||
// Filter to only features with a hook
|
||||
return featuresArray
|
||||
.filter(feature => feature.stylesheet)
|
||||
.map(feature => `${feature.directory}${feature.stylesheet}`);
|
||||
}
|
||||
|
||||
/*-- Setup --*/
|
||||
|
||||
async setup(){
|
||||
|
||||
// Set Shared dict
|
||||
this.setSharedDictionnary()
|
||||
|
||||
// Import Manifest
|
||||
let manifest = await this.importManifest()
|
||||
|
||||
// Get features list as an array of class for each
|
||||
await this.initializeFeatures(manifest.plugins, manifest.pluginsParameters)
|
||||
|
||||
// list user stylesheets
|
||||
cssPageWeaver.user.css = manifest.css || []
|
||||
|
||||
// list stylesheets as convenient object
|
||||
cssPageWeaver.stylesheet = {
|
||||
features: this.getFeaturesStyleAsArray(),
|
||||
user: cssPageWeaver.user.css
|
||||
}
|
||||
|
||||
// Warn user if he missed a stylesheet
|
||||
this.lookForForgottenStylesheet(cssPageWeaver.user.css)
|
||||
|
||||
// Import User handlers
|
||||
await this.initializeUserHook(manifest.hook)
|
||||
|
||||
// Dispatch an event to signal that features are loaded
|
||||
const event = new Event('cssPageWeaver-dictInit');
|
||||
document.dispatchEvent(event)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default CssPageWeaver_Dict
|
||||
410
csspageweaver/modules/frame_render.js
Normal file
410
csspageweaver/modules/frame_render.js
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
/**
|
||||
* @classdsec Render paged through a shadow element and return desired pages
|
||||
* @author Benjamin G. <ecrire@bnjm.eu>
|
||||
* @tutorial https://gitlab.com/csspageweaver/csspageweaver/-/wikis/home
|
||||
* Credit: This code is based on an original idea from Julien Taquet
|
||||
*/
|
||||
|
||||
import { Handler, Previewer } from '../lib/paged.esm.js';
|
||||
import CssPageWeaver_PreRender from './pre_render.js';
|
||||
|
||||
// Define a custom web component
|
||||
class CssPageWeaver_FrameRender extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
|
||||
// Attach a shadow root to the element
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.range = {
|
||||
from: 0,
|
||||
to: Infinity
|
||||
}
|
||||
|
||||
this.container = {
|
||||
origin: {
|
||||
body: document.body,
|
||||
head: document.head
|
||||
},
|
||||
pages: null
|
||||
}
|
||||
|
||||
this.hook = []
|
||||
this.css = []
|
||||
|
||||
console.log('CSS Page Weaver Frame Render initialized');
|
||||
|
||||
}
|
||||
|
||||
/*-- CSS --*/
|
||||
|
||||
hideFrame(){
|
||||
this.setAttribute("style", "position: absolute; left: 100vw; max-height: 0; width: 100vw; overflow: hidden;")
|
||||
}
|
||||
|
||||
/**
|
||||
* Copies the dimensions from the document body and applies them to the container inside the shadow DOM.
|
||||
* This method ensures that the shadow DOM container matches the size and position of the document body.
|
||||
*/
|
||||
copyDimensionsFromBody() {
|
||||
// Get the offsetHeight and client rect of the body.
|
||||
const offsetHeight = this.container.origin.body.offsetHeight;
|
||||
const clientRect = this.container.origin.body.getBoundingClientRect();
|
||||
|
||||
// Set the dimensions on the container inside the shadow DOM.
|
||||
this.container.shadow.body.style.width = `${clientRect.width}px`;
|
||||
this.container.shadow.body.style.height = `${clientRect.height}px`;
|
||||
this.container.shadow.body.style.top = `${clientRect.top}px`;
|
||||
this.container.shadow.body.style.left = `${clientRect.left}px`;
|
||||
|
||||
// Optionally, log the dimensions for debugging.
|
||||
console.log('Body Dimensions:', { offsetHeight, clientRect });
|
||||
console.log('Container Dimensions:', {
|
||||
height: this.container.shadow.body.style.height,
|
||||
width: this.container.shadow.body.style.width
|
||||
})
|
||||
}
|
||||
|
||||
/*-- DOM --*/
|
||||
|
||||
/**
|
||||
* Resets the shadow root by clearing its existing content and creating a new HTML structure.
|
||||
* This method ensures that the shadow root is empty and ready for new content.
|
||||
*/
|
||||
resetShadowRoot() {
|
||||
// Clear existing content in the shadow root
|
||||
while (this.shadowRoot.firstChild) {
|
||||
this.shadowRoot.removeChild(this.shadowRoot.firstChild);
|
||||
}
|
||||
|
||||
// Create new HTML structure
|
||||
const head = document.createElement('head');
|
||||
const body = document.createElement('body');
|
||||
|
||||
// Append head and body to the shadow root
|
||||
this.shadowRoot.appendChild(head);
|
||||
this.shadowRoot.appendChild(body);
|
||||
|
||||
this.container.shadow = { head, body };
|
||||
}
|
||||
|
||||
/**
|
||||
* Passes elements to the light DOM, handling both individual elements and arrays of elements.
|
||||
*
|
||||
* @param {Element|Element[]} element - The element or array of elements to pass to the light DOM.
|
||||
* @returns {void}
|
||||
*/
|
||||
passElementsToLightDom(element) {
|
||||
|
||||
// Array means a slection of pages had been made
|
||||
|
||||
if (Array.isArray(element)) {
|
||||
|
||||
|
||||
element.forEach(page => {
|
||||
if (page.getAttribute('data-page-number')) {
|
||||
let page_clone = page.cloneNode(true)
|
||||
let page_number = parseInt(page.getAttribute('data-page-number'));
|
||||
let page_ref = this.container.origin.body.querySelector(`[data-page-number="${page_number}"]`);
|
||||
|
||||
page_ref?.remove();
|
||||
|
||||
let previous = this.container.origin.pages.querySelector(`[data-page-number="${page_number - 1}"]`)
|
||||
previous.insertAdjacentElement('afterend', page_clone);
|
||||
|
||||
// TODO Check if there are pages to remove
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
if (element.classList.contains('pagedjs_pages')) {
|
||||
this.container.origin.body.querySelector('.pagedjs_pages')?.remove();
|
||||
this.container.origin.body.appendChild(element);
|
||||
} else {
|
||||
let el_UI = parseInt(element.getAttribute('data-unique-identifier'));
|
||||
let elementOriginal = this.container.origin.body.querySelector(`[data-unique-identifier="${el_UI}"]`);
|
||||
|
||||
elementOriginal?.replaceWith(element);
|
||||
|
||||
// TODO Need to check if break token is still coherent.
|
||||
}
|
||||
}
|
||||
|
||||
// Update pages container
|
||||
this.container.origin.pages = this.container.origin.body.querySelector('.pagedjs_pages')
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a unique CSS selector for a given HTML element.
|
||||
* This method attempts to create a selector that uniquely identifies the element
|
||||
* based on its attributes and position in the DOM hierarchy.
|
||||
*
|
||||
* @param {HTMLElement} element - The HTML element for which to generate a unique selector.
|
||||
* @returns {string} - A CSS selector string that uniquely identifies the element.
|
||||
*/
|
||||
getUniqueSelector(element) {
|
||||
|
||||
if(element.tagName == 'BODY'){
|
||||
return 'body'
|
||||
}
|
||||
|
||||
if (element.getAttribute('data-unique-identifier')) {
|
||||
// If the element has data-unique-identifier, use it
|
||||
return `[data-unique-identidier='${element.getAttribute('data-unique-identifier')}]`;
|
||||
}
|
||||
|
||||
if (element.id) {
|
||||
// If the element has an ID, use it
|
||||
return `#${element.id}`;
|
||||
}
|
||||
|
||||
if (element.className && element.className.trim() !== '') {
|
||||
// If the element has a class, use it
|
||||
// Note: This might not be unique if other elements share the same class
|
||||
return `.${element.className.split(' ').join('.')}`;
|
||||
}
|
||||
|
||||
// Fallback to using the tag name and its position in the hierarchy
|
||||
let selector = element.tagName.toLowerCase();
|
||||
let parent = element.parentElement;
|
||||
|
||||
return selector;
|
||||
}
|
||||
|
||||
/* Import & reload */
|
||||
|
||||
/**
|
||||
* Fetches a document from the specified path.
|
||||
*
|
||||
* @param {string} path - The URL or path to the document to be fetched.
|
||||
* @returns {Promise<Document|Object>} - A promise that resolves to the fetched HTML document or JSON object.
|
||||
* @throws {Error} - Throws an error if the network response is not ok or if there is a problem with the fetch operation.
|
||||
*/
|
||||
async fetchDocument(path) {
|
||||
try {
|
||||
const response = await fetch(path);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
|
||||
if (path.endsWith('.html') || path.endsWith('/')) {
|
||||
const text = await response.text();
|
||||
const parser = new DOMParser();
|
||||
|
||||
// Parse the HTML content into a Document object
|
||||
const html = parser.parseFromString(text, "text/html");
|
||||
|
||||
// Get all script elements
|
||||
//const scripts = html.querySelectorAll('script');
|
||||
|
||||
// Remove each script element
|
||||
//scripts.forEach(script => script.remove());
|
||||
|
||||
return html;
|
||||
} else if (path.endsWith('.json')) {
|
||||
// Parse the JSON response
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('There was a problem with the fetch operation:', error);
|
||||
throw error; // Rethrow the error to handle it outside if needed
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads a document from the specified path and updates the instance content.
|
||||
*
|
||||
* @param {string} path - The URL or path to the document to be reloaded.
|
||||
* @returns {Promise<void>} - A promise that resolves when the document is reloaded and the content is updated.
|
||||
*/
|
||||
async reloadDocument(path) {
|
||||
let newDoc = await this.fetchDocument(path);
|
||||
|
||||
let selector = this.getUniqueSelector(this.container.origin.body);
|
||||
|
||||
let newContainer = await newDoc.querySelector(selector);
|
||||
|
||||
this._render.setUniqueIdentfier(newContainer);
|
||||
|
||||
// DEBUG
|
||||
const elements = newContainer.querySelectorAll('p');
|
||||
elements.forEach(el => {
|
||||
el.textContent = el.textContent.replaceAll('e', '🙈');
|
||||
});
|
||||
|
||||
// Set instance content with new content
|
||||
this.content = this._render.storeElements(newContainer, true);
|
||||
|
||||
// Show me!
|
||||
this.setView(false);
|
||||
}
|
||||
|
||||
/* Paged JS */
|
||||
|
||||
/**
|
||||
* Determines which elements or pages within a document should be passed to the light DOM.
|
||||
* Handles different scenarios for selecting elements or pages to pass, including specific
|
||||
* elements, all pages, or a range of pages.
|
||||
*/
|
||||
defineElementsToPass() {
|
||||
|
||||
let toPass;
|
||||
|
||||
// Detect if we keep a page or an element
|
||||
if (this.range.element) {
|
||||
// Get element to pass
|
||||
toPass = this.container.pages.querySelector(`[data-unique-identifier="${this.range.element}"]`);
|
||||
// Append element to light DOM
|
||||
|
||||
// Finally, delete the element property from the range
|
||||
delete this.range.element;
|
||||
console.log(`🔃 Update page ${this.range.to}`)
|
||||
|
||||
} else if (this.range.from === 0 && this.range.to === Infinity) {
|
||||
// Just clone pagedjs_pages container
|
||||
toPass = this.container.pages.cloneNode(true);
|
||||
|
||||
if(!this.firstTime){
|
||||
console.log(`🔃 Update full document `)
|
||||
}
|
||||
|
||||
} else {
|
||||
// Array of pages to pass
|
||||
toPass = [];
|
||||
|
||||
// Select all pages with the data-page-number attribute within the clone
|
||||
const pages = this.container.pages.querySelectorAll('[data-page-number]');
|
||||
|
||||
// Iterate through the pages and remove those outside the range
|
||||
pages.forEach(page => {
|
||||
const pageNumber = parseInt(page.getAttribute('data-page-number'));
|
||||
if (pageNumber >= this.range.from && pageNumber <= this.range.to) {
|
||||
toPass.push(page.cloneNode(true));
|
||||
}
|
||||
});
|
||||
|
||||
console.log(`🔃 Update ${toPass.length} page${toPass.length > 1 ? 's' : ''}, from page ${this.range.from}`)
|
||||
}
|
||||
|
||||
this.passElementsToLightDom(toPass);
|
||||
}
|
||||
/**
|
||||
* Pagedjs library append style on document head.
|
||||
* Here we edit this very fucntion to append styles on head's shadow container
|
||||
* Without this, page break is erratic. Pages are missing.
|
||||
*/
|
||||
redefineInsertFunction(){
|
||||
const polisherInstance = this.previewer.polisher;
|
||||
|
||||
// Define the new insert function
|
||||
polisherInstance.insert = function(text) {
|
||||
let style = document.createElement("style");
|
||||
style.setAttribute("data-css-page-weaver-inserted-styles", "true");
|
||||
style.appendChild(document.createTextNode(text));
|
||||
cssPageWeaver_frame.container.shadow.head.appendChild(style);
|
||||
this.inserted.push(style);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Appends Paged.js styles to the shadow DOM.
|
||||
* This method creates a custom handler that clones styles from the document's head
|
||||
* to the shadow DOM's head before the content is parsed.
|
||||
* Without this, page break is erratic. Pages are missing.
|
||||
*/
|
||||
appendPagedJsStyle(){
|
||||
|
||||
class appendPagedStyleToShadow extends Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
beforeParsed(content){
|
||||
cssPageWeaver_frame._render.cloneElements('style[data-css-page-weaver-inserted-styles="true"]', cssPageWeaver_frame.container.shadow.head, document.head)
|
||||
|
||||
}
|
||||
}
|
||||
this.hook.push({default: appendPagedStyleToShadow})
|
||||
|
||||
}
|
||||
|
||||
/* Setup */
|
||||
|
||||
connectedCallback() {
|
||||
// Hide the entire frame
|
||||
this.hideFrame();
|
||||
|
||||
// Initialize a new instance of CssPageWeaver_PreRender
|
||||
this._render = new CssPageWeaver_PreRender();
|
||||
|
||||
// Append a style link to the document's head using the interface
|
||||
if (typeof this.interface === 'string' && this.interface.length > 0) {
|
||||
this._render.appendStyleLink(this.interface, this.container.origin.head);
|
||||
}
|
||||
|
||||
// Store elements from the renderer's container origin into this.content
|
||||
this.content = this._render.storeElements(this._render.container.origin, false);
|
||||
|
||||
// Set a unique identifier for the stored content
|
||||
this._render.setUniqueIdentfier(this.content);
|
||||
|
||||
// Copy styles appended by Paged.js to the document's head into the shadow DOM's head
|
||||
this.appendPagedJsStyle();
|
||||
|
||||
// Set up the view for rendering
|
||||
this.setView(true);
|
||||
}
|
||||
|
||||
async setView(firstTime) {
|
||||
// Initialize a new instance of Previewer
|
||||
this.previewer = new Previewer();
|
||||
|
||||
// TODO: This should register hook on fresh instance. It dont and duplicate hook. So I set a trick here.
|
||||
if(firstTime){
|
||||
// Register all hooks with the renderer
|
||||
await this._render.registerAllHook(this.hook, this.previewer);
|
||||
}
|
||||
|
||||
// Modify the Paged.js polisher insert function to append styles to the shadow DOM
|
||||
this.redefineInsertFunction();
|
||||
|
||||
// Clear the shadow root
|
||||
this.resetShadowRoot();
|
||||
|
||||
// Append style links to both the document's head and the shadow DOM's head if interface is a non-empty string
|
||||
if (typeof this.interface === 'string' && this.interface.length > 0) {
|
||||
this._render.appendStyleLink(this.interface, this.container.origin.head);
|
||||
this._render.appendStyleLink(this.interface, this.container.shadow.head);
|
||||
}
|
||||
|
||||
try {
|
||||
// Preview the content and log the number of rendered pages
|
||||
const pages = await this.previewer.preview(
|
||||
this.content,
|
||||
this.css,
|
||||
this.container.shadow.body
|
||||
);
|
||||
|
||||
this.container.pages = this.shadowRoot.querySelector('.pagedjs_pages');
|
||||
console.log('✅ Rendered', pages.total, 'pages');
|
||||
} catch (error) {
|
||||
// Handle any errors that occur during the preview operation
|
||||
console.error('Error during pagination:', error);
|
||||
}
|
||||
|
||||
// Update stylesheet by removing and cloning elements with inserted styles
|
||||
let styles = 'style[data-css-page-weaver-inserted-styles="true"]';
|
||||
this._render.removeElements(styles, this.container.origin.head);
|
||||
this._render.cloneElements(styles, this.container.shadow.head, this.container.origin.head);
|
||||
|
||||
// Define elements to pass
|
||||
this.defineElementsToPass();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default CssPageWeaver_FrameRender
|
||||
|
||||
510
csspageweaver/modules/gui.js
Normal file
510
csspageweaver/modules/gui.js
Normal file
|
|
@ -0,0 +1,510 @@
|
|||
/**
|
||||
* @classdesc A web component that provides a GUI for a Paged.js previewer.
|
||||
* Web Component will compose (or import) a HTML template and attach event listener
|
||||
* to allow front-end interactions.
|
||||
* @extends HTMLElement
|
||||
* @author Benjamin G. <ecrire@bnjm.eu>, Julie Blanc <contact@julie-blanc.fr>
|
||||
* @tutorial https://gitlab.com/csspageweaver/csspageweaver/-/wikis/home
|
||||
* Credit: This code is based on an original idea from Julie Blanc
|
||||
*/
|
||||
|
||||
class CssPageWeaver_GUI extends HTMLElement {
|
||||
|
||||
constructor (){
|
||||
super()
|
||||
console.log('CSS Page Weaver GUI Component initialized');
|
||||
}
|
||||
|
||||
/*-- Dict --*/
|
||||
|
||||
extendSharedDict(){
|
||||
cssPageWeaver.directory.interface = `${cssPageWeaver.directory.root}/interface`
|
||||
|
||||
// Initialize UI elements
|
||||
cssPageWeaver.ui = {}
|
||||
cssPageWeaver.ui.body = document.querySelector('body')
|
||||
cssPageWeaver.ui.shortcut_index = [] // For user convenience, store all keyboard shortcut
|
||||
|
||||
// Initialize parameters and events
|
||||
cssPageWeaver.ui.event = {}
|
||||
|
||||
// Set API
|
||||
cssPageWeaver.helpers = {
|
||||
addKeydownListener: this.addKeydownListener.bind(this)
|
||||
};
|
||||
}
|
||||
|
||||
/*-- CSS --*/
|
||||
|
||||
/**
|
||||
* Loads a CSS file and appends it to the document head.
|
||||
* @param {string} path - The path to the CSS file.
|
||||
*/
|
||||
appendCSStoDOM(path) {
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
link.href = path;
|
||||
link.setAttribute('data-css-page-weaver-gui', true)
|
||||
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Aggregates the CSS paths from all features that have a stylesheet.
|
||||
* @returns {Array} An array of CSS file paths.
|
||||
*/
|
||||
getFeaturesStyleAsArray(){
|
||||
// Convert the features object to an array
|
||||
const featuresArray = Object.values(cssPageWeaver.features);
|
||||
// Filter to only features with a hook
|
||||
return featuresArray
|
||||
.filter(feature => feature.stylesheet)
|
||||
.map(feature => `${feature.directory}${feature.stylesheet}`);
|
||||
}
|
||||
|
||||
/*-- DOM --*/
|
||||
|
||||
/**
|
||||
* Creates a panel for a feature with the specified UI configuration.
|
||||
*
|
||||
* This method constructs a form element for a feature, including a title,
|
||||
* description, toggle switch, and additional HTML content if specified.
|
||||
* It also handles shortcuts for the feature.
|
||||
*
|
||||
* @param {string} id - The ID of the feature.
|
||||
* @param {Object} ui - The UI configuration object for the feature.
|
||||
* @returns {HTMLElement} The created form element representing the feature's panel.
|
||||
*/
|
||||
createPanel(id, ui){
|
||||
function createTitle(){
|
||||
if(ui.title){
|
||||
// Create a title for this feature
|
||||
const title = document.createElement('h1');
|
||||
title.textContent = ui.title;
|
||||
|
||||
if(ui.description){
|
||||
title.title = ui.description
|
||||
}
|
||||
|
||||
// Compose title container
|
||||
titleContainer.appendChild(title);
|
||||
}
|
||||
}
|
||||
|
||||
function createDescription(){
|
||||
|
||||
if(ui.description){
|
||||
// Create a details element for the description
|
||||
const details = document.createElement('details');
|
||||
const summary = document.createElement('summary');
|
||||
summary.textContent = '?'
|
||||
const p = document.createElement('p')
|
||||
p.textContent = ui.description
|
||||
|
||||
// compose details container
|
||||
details.appendChild(summary)
|
||||
details.appendChild(p)
|
||||
|
||||
// Append the details container to the title container
|
||||
titleContainer.appendChild(details)
|
||||
}
|
||||
}
|
||||
|
||||
function createToggle(){
|
||||
//
|
||||
// If feature require a simple ON/OFF toggle,
|
||||
if(ui.toggle){
|
||||
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.id = `${id}-toggle`;
|
||||
checkbox.name = `${id}-toggle`;
|
||||
|
||||
const label = document.createElement('label');
|
||||
label.htmlFor = `${id}-toggle`;
|
||||
label.id = `label-${id}-toggle`;
|
||||
|
||||
const seeSpan = document.createElement('span');
|
||||
seeSpan.className = 'button-see button-not-selected';
|
||||
seeSpan.textContent = 'see';
|
||||
|
||||
const hideSpan = document.createElement('span');
|
||||
hideSpan.className = 'button-hide';
|
||||
hideSpan.textContent = 'hide';
|
||||
|
||||
label.appendChild(seeSpan);
|
||||
label.insertAdjacentHTML('beforeEnd', ' '); // This little hack to preserve harmony with handmade template
|
||||
label.appendChild(hideSpan);
|
||||
|
||||
// Append input & label to group-title
|
||||
titleContainer.appendChild(checkbox);
|
||||
titleContainer.appendChild(label);
|
||||
|
||||
form.classList.add('button-toggle')
|
||||
|
||||
// Add toggle to API
|
||||
cssPageWeaver.ui[id] = {
|
||||
toggleInput: checkbox,
|
||||
toggleLabel: label
|
||||
}
|
||||
cssPageWeaver.ui.event[id] = {
|
||||
toggleState: checkbox.checked
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function displayShortcut(){
|
||||
if(ui.shortcut){
|
||||
|
||||
// Function to convert key array to a human-readable string
|
||||
function keysToString(keyArray) {
|
||||
const keyMapping = {
|
||||
"shiftKey": "Shift",
|
||||
"ctrlKey": "Ctrl",
|
||||
"altKey": "Alt",
|
||||
"metaKey": "Meta"
|
||||
};
|
||||
|
||||
// Transform the array to a string like 'Ctrl + Z'
|
||||
const humanReadableKeys = keyArray.map(key => keyMapping[key] || key);
|
||||
return humanReadableKeys.join(' + ');
|
||||
}
|
||||
|
||||
const shortcutList = document.createElement('ul')
|
||||
shortcutList.className = "shortcut-list"
|
||||
|
||||
ui.shortcut.forEach(item => {
|
||||
|
||||
// If item disable shortcut display on panel
|
||||
if(item.tutorial == false){
|
||||
return
|
||||
}
|
||||
|
||||
// Create a list item for the shortcut
|
||||
const li = document.createElement('li')
|
||||
li.textContent = Array.isArray(item.keys) ? keysToString(item.keys) : item.keys
|
||||
li.title = item.description;
|
||||
|
||||
// Append the item to the shortcut list
|
||||
shortcutList.appendChild(li)
|
||||
})
|
||||
|
||||
// Append Shortcut list to its feature panel
|
||||
form.appendChild(shortcutList)
|
||||
}
|
||||
}
|
||||
|
||||
// Create a form for this feature
|
||||
const form = document.createElement('form');
|
||||
form.className = `panel-group`;
|
||||
form.id = `${id}-form`;
|
||||
|
||||
// Create Title Container for this feature
|
||||
const titleContainer = document.createElement('div');
|
||||
titleContainer.className = 'panel-group-title';
|
||||
|
||||
createTitle()
|
||||
createDescription()
|
||||
createToggle()
|
||||
|
||||
// Append title group to form
|
||||
form.appendChild(titleContainer);
|
||||
|
||||
|
||||
// Append additional template to form
|
||||
if(ui.html){
|
||||
form.insertAdjacentHTML("beforeEnd", ui.html)
|
||||
}
|
||||
|
||||
displayShortcut()
|
||||
|
||||
// Return complete feature panel
|
||||
return form
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the panel container and subpanels for each feature.
|
||||
*
|
||||
* This method constructs a panel container and populates it with subpanels
|
||||
* for features that have a UI. It also lists features without a UI in a
|
||||
* separate section.
|
||||
*/
|
||||
createMainPanel() {
|
||||
// Create Panel container
|
||||
const formContainer = document.createElement('div');
|
||||
formContainer.id = 'cssPageWeaver_panel';
|
||||
|
||||
// Create base input to toggle Menu
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.id = 'cssPageWeaver_toggle-panel';
|
||||
checkbox.name = 'toggle-panel';
|
||||
checkbox.checked = this.isPanelOpen()
|
||||
|
||||
const label = document.createElement('label');
|
||||
label.htmlFor = 'cssPageWeaver_toggle-panel';
|
||||
|
||||
const openSpan = document.createElement('span');
|
||||
openSpan.id = 'panel-open';
|
||||
openSpan.textContent = '−';
|
||||
|
||||
const closedSpan = document.createElement('span');
|
||||
closedSpan.id = 'panel-closed';
|
||||
closedSpan.textContent = '≡';
|
||||
|
||||
label.appendChild(openSpan);
|
||||
label.appendChild(closedSpan);
|
||||
|
||||
this.appendChild(checkbox);
|
||||
this.appendChild(label);
|
||||
|
||||
// Convert the features object to an array
|
||||
const featuresArray = Object.values(cssPageWeaver.features);
|
||||
|
||||
// Lets filter to only features with control panel
|
||||
const featuresWithPanels = featuresArray.filter(feature => feature.ui && feature.ui.panel !== null && feature.ui.panel !== undefined);
|
||||
|
||||
// Append the panels to the panel container
|
||||
featuresWithPanels.forEach(feature => {
|
||||
formContainer.insertAdjacentElement('beforeEnd', feature.ui.panel);
|
||||
});
|
||||
|
||||
// Create Hidden Feature Panel
|
||||
this.createHiddenFeaturePanel(featuresArray, formContainer)
|
||||
|
||||
// Append panel container to main element
|
||||
this.appendChild(formContainer);
|
||||
|
||||
}
|
||||
|
||||
createHiddenFeaturePanel(featuresArray, formContainer){
|
||||
// Create a list of active Hook or script without UI
|
||||
const featuresWithoutPanels = featuresArray.filter(feature => !feature.ui);
|
||||
|
||||
// List these elements on the interface if there are any
|
||||
if(featuresWithoutPanels.length > 0){
|
||||
const details = document.createElement('details');
|
||||
details.id = "hidden-features"
|
||||
|
||||
// Create Summary with title
|
||||
const summary = document.createElement('summary');
|
||||
const title = document.createElement('h1');
|
||||
title.textContent = "Also active";
|
||||
const span = document.createElement('span');
|
||||
span.textContent = `${featuresWithoutPanels.length} plugin${featuresWithoutPanels.length > 1 ? 's' : ''}`
|
||||
|
||||
// Append Title to summary
|
||||
summary.appendChild(title)
|
||||
summary.appendChild(span)
|
||||
|
||||
// Create list
|
||||
const ul = document.createElement('ul');
|
||||
|
||||
// Create a list of features without panels
|
||||
featuresWithoutPanels.forEach(feature => {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = feature.id;
|
||||
ul.appendChild(li);
|
||||
});
|
||||
|
||||
// Append elements to details container
|
||||
details.appendChild(summary)
|
||||
details.appendChild(ul)
|
||||
|
||||
// Append unlisted features container to main container
|
||||
formContainer.insertAdjacentElement('beforeEnd', details);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/*-- Features --*/
|
||||
|
||||
/**
|
||||
*/
|
||||
loopFeatures_attachPanel() {
|
||||
Object.values(cssPageWeaver.features).forEach(feature => {
|
||||
if(feature.ui){
|
||||
// Create a UI panel for the feature
|
||||
feature.ui.panel = this.createPanel(feature.id, feature.ui);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/*-- Script --*/
|
||||
|
||||
|
||||
/**
|
||||
* Registers all script features
|
||||
*
|
||||
* @param {Object} data - Dataset to loop for registration.
|
||||
* @returns {Promise<void>} - A promise that resolves when all features of the specified type are registered.
|
||||
*/
|
||||
async runAllScript(data){
|
||||
|
||||
async function runScript(scriptPromise, parameters){
|
||||
|
||||
// Await the script promise to get the script
|
||||
const script = await scriptPromise;
|
||||
|
||||
// If the script or its default export is not available, exit the function
|
||||
if(!script || !script.default){
|
||||
return
|
||||
}
|
||||
|
||||
new script.default(parameters)
|
||||
}
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
// If data is an array, iterate over each item directly
|
||||
for (const item of data) {
|
||||
await runScript(item);
|
||||
}
|
||||
} else {
|
||||
// If data is an object,
|
||||
for (const key in data) {
|
||||
if (data.hasOwnProperty(key) && data[key].script) {
|
||||
await runScript(data[key].script, data[key].id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*-- Events --*/
|
||||
|
||||
/**
|
||||
* Connects the custom element to the DOM.
|
||||
*/
|
||||
async connectedCallback () {
|
||||
this.addEventListener('click', this);
|
||||
this.addEventListener('input', this);
|
||||
|
||||
document.addEventListener('cssPageWeaver-dictInit', this.setup.bind(this));
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles events for this Web Component.
|
||||
* @param {Event} event - The event object.
|
||||
*/
|
||||
handleEvent (event) {
|
||||
let featureId = this.findParentID(event)
|
||||
this[`on${event.type}`](event, featureId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find subpanel ID targeted by event
|
||||
* @param {event} - the event object
|
||||
*/
|
||||
findParentID(event){
|
||||
let parent = event.target.parentNode;
|
||||
while (parent) {
|
||||
if (parent.id && parent.id.includes('-form')) {
|
||||
const id = parent.id.split('-form')[0];
|
||||
return id
|
||||
break;
|
||||
}
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handles the click event for a feature.
|
||||
*
|
||||
* @param {Event} event - The click event object.
|
||||
* @param {string} featureId - The ID of the feature being clicked.
|
||||
*/
|
||||
onclick (event, featureId) {
|
||||
this.togglePanel(event)
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the input event for a feature.
|
||||
*
|
||||
* @param {Event} event - The input event object.
|
||||
* @param {string} featureId - The ID of the feature being interacted with.
|
||||
*/
|
||||
oninput (event, featureId) {
|
||||
// If the input event is for a toggle element
|
||||
if(cssPageWeaver.ui.event && event.target.id == `${featureId}-toggle` ){
|
||||
cssPageWeaver.ui.event[featureId].toggleState = event.target.checked
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles the state of a panel based on the event target.
|
||||
* @param {Event} event - The event object that triggered the toggle action.
|
||||
*/
|
||||
togglePanel(event){
|
||||
// Handle Toogle
|
||||
if(event.target.id == "cssPageWeaver_toggle-panel"){
|
||||
let isOpen = this.isPanelOpen()
|
||||
localStorage.setItem('gui_toggle' + cssPageWeaver.docTitle, !isOpen)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks whether the panel is open or not.
|
||||
* @returns {boolean} - Whether the panel is open or not.
|
||||
*/
|
||||
isPanelOpen(){
|
||||
return localStorage.getItem('gui_toggle' + cssPageWeaver.docTitle) == 'true' || false
|
||||
}
|
||||
|
||||
/*-- Helpers --*/
|
||||
|
||||
/**
|
||||
* This function associate a keydown event to a function
|
||||
* Important: scope is document wide, when above events are component specific
|
||||
* @param {array} keyArray - Keyboard keys combinaison to listen to
|
||||
* @param {function} callback - Function to call when right selection is pressed
|
||||
*/
|
||||
addKeydownListener(keyArray, callback) {
|
||||
document.addEventListener('keydown', (event) => {
|
||||
const isKeyPressed = keyArray.every(key => {
|
||||
if (key === 'shiftKey') return event.shiftKey;
|
||||
if (key === 'ctrlKey') return event.ctrlKey;
|
||||
if (key === 'altKey') return event.altKey;
|
||||
if (key === 'metaKey') return event.metaKey;
|
||||
return event.key === key;
|
||||
});
|
||||
|
||||
if (isKeyPressed) {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
|
||||
// Store shortcut information for convenience
|
||||
cssPageWeaver.ui.shortcut_index.push(`${keyArray.join(" + ")} is set for ${callback.name}`)
|
||||
}
|
||||
|
||||
|
||||
/*-- Setup component --*/
|
||||
setup (){
|
||||
|
||||
this.extendSharedDict()
|
||||
|
||||
// Load basic CSS assets
|
||||
this.appendCSStoDOM(`${cssPageWeaver.directory.interface}/css/panel.css`);
|
||||
|
||||
// Load features CSS
|
||||
cssPageWeaver.stylesheet.features.forEach(path => this.appendCSStoDOM(path))
|
||||
|
||||
// Create and populate main Panel
|
||||
this.loopFeatures_attachPanel()
|
||||
this.createMainPanel()
|
||||
|
||||
// Register plugins scripts in a PagedJs after render event
|
||||
this.runAllScript(cssPageWeaver.features)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default CssPageWeaver_GUI
|
||||
160
csspageweaver/modules/pre_render.js
Normal file
160
csspageweaver/modules/pre_render.js
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
/**
|
||||
* @classdesc This are methods shared between render.js and frame_render.js
|
||||
* @author Benjamin G. <ecrire@bnjm.eu>, Julie Blanc <contact@julie-blanc.fr>
|
||||
* @tutorial https://gitlab.com/csspageweaver/csspageweaver/-/wikis/home
|
||||
*/
|
||||
|
||||
import { Handler } from '../lib/paged.esm.js';
|
||||
|
||||
class CssPageWeaver_PreRender{
|
||||
constructor(){
|
||||
// Object of container shortcut
|
||||
this.container = {
|
||||
origin: document.body
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-- CSS --*/
|
||||
|
||||
/**
|
||||
* Append CSS Style as link
|
||||
* @param {string} path CSS rules to append
|
||||
* @param {string} destination destination elementto append style element
|
||||
* @param {string} name name to append as a data-attribute
|
||||
*/
|
||||
appendStyleLink(path, destination, name) {
|
||||
|
||||
if(!path){
|
||||
return
|
||||
}
|
||||
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
link.href = path;
|
||||
link.media = 'screen';
|
||||
link.setAttribute(name ? name : 'data-csspageweaver-frame', true)
|
||||
|
||||
destination.appendChild(link);
|
||||
}
|
||||
|
||||
/**
|
||||
* Append CSS Style as style element
|
||||
* @param {string} style CSS rules to append
|
||||
* @param {string} destination destination elementto append style element
|
||||
* @param {string} name name to append as a data-attribute
|
||||
*/
|
||||
appendStyleElement(style, destination, name) {
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.textContent = style;
|
||||
styleElement.setAttribute(name ? name : 'data-csspageweaver-frame', true)
|
||||
destination.appendChild(styleElement);
|
||||
}
|
||||
|
||||
/*-- DOM --*/
|
||||
|
||||
clearElement(container){
|
||||
container.innerHTML = ""
|
||||
}
|
||||
|
||||
removeElements(query, container){
|
||||
const headStyles = container.querySelectorAll(query)
|
||||
headStyles.forEach(style => style.remove());
|
||||
}
|
||||
|
||||
cloneElements(query, container, destination){
|
||||
const els = container.querySelectorAll(query);
|
||||
|
||||
els.forEach(el => {
|
||||
const _el = el.cloneNode(true);
|
||||
destination.appendChild(_el);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Store a copy of within a container to a document fragment, optionally keeping the original elements.
|
||||
*
|
||||
* @param {Element} container - The container whose child elements need to be cloned.
|
||||
* @param {boolean} keep - Flag indicating whether to keep the original elements.
|
||||
* @returns {DocumentFragment} A document fragment containing the cloned elements.
|
||||
*/
|
||||
storeElements(container, keep) {
|
||||
// Create a document fragment
|
||||
let content = document.createDocumentFragment();
|
||||
// Clone content
|
||||
container.childNodes.forEach(child => {
|
||||
if (child.nodeType === 1 && (child.tagName !== 'SCRIPT' && !child.tagName.includes('CSSPAGEWEAVER'))) {
|
||||
const clonedChild = child.cloneNode(true);
|
||||
content.appendChild(clonedChild);
|
||||
|
||||
if (!keep) {
|
||||
child.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets a unique identifier for each element within a container.
|
||||
*
|
||||
* @param {Element} container - The container whose elements need unique identifiers.
|
||||
* @returns {void}
|
||||
*/
|
||||
setUniqueIdentfier(container) {
|
||||
const elements = container.querySelectorAll('*');
|
||||
let parentCount = -1;
|
||||
// Iterate over each element and assign a unique identifier using the index
|
||||
elements.forEach((el, i) => {
|
||||
parentCount = (el.tagName === 'SECTION' || el.tagName === 'ARTICLE') ? parentCount + 1 : parentCount;
|
||||
let prefix = el.closest('article, section') ? String.fromCharCode(65 + parentCount) : '';
|
||||
el.setAttribute('data-unique-identifier', `${prefix}-${i}`);
|
||||
});
|
||||
}
|
||||
|
||||
/* Paged JS */
|
||||
|
||||
/**
|
||||
* Registers all hook features
|
||||
*
|
||||
* @param {Object} data - Dataset to loop for registration.
|
||||
* @param {Object} previewer - PagedJs instance to register
|
||||
* @returns {Promise<void>} - A promise that resolves when all features of the specified type are registered.
|
||||
*/
|
||||
async registerAllHook(hooks, previewer) {
|
||||
|
||||
/**
|
||||
* Register features pagedJs custom hook.
|
||||
* Hook are function happening at certain time of PagedJs workflow
|
||||
* @param {Object} hookPromise - The import object for the feature.
|
||||
* @param {string} id - The feature Id for debugging
|
||||
*/
|
||||
async function registerHook(hookPromise, id) {
|
||||
const hook = await hookPromise;
|
||||
|
||||
if (!hook) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handlerClass = hook.default || Object.values(hook)[0];
|
||||
|
||||
// Ensure the handlerClass is a valid Handler class
|
||||
if (handlerClass.prototype instanceof Handler) {
|
||||
try {
|
||||
previewer.registerHandlers(handlerClass);
|
||||
} catch (error) {
|
||||
console.error(`An error occurred while registering the handler ${id ? `for ${id}` : ``}:`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const hookPromise of hooks) {
|
||||
await registerHook(hookPromise);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default CssPageWeaver_PreRender
|
||||
58
csspageweaver/modules/render.js
Normal file
58
csspageweaver/modules/render.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
/**
|
||||
* @classdesc This take content, paginates it and return pages to DOM. Simple.
|
||||
* @author Benjamin G. <ecrire@bnjm.eu>, Julie Blanc <contact@julie-blanc.fr>
|
||||
* @tutorial https://gitlab.com/csspageweaver/csspageweaver/-/wikis/home
|
||||
*/
|
||||
|
||||
import { Previewer } from '../lib/paged.esm.js';
|
||||
import CssPageWeaver_PreRender from './pre_render.js';
|
||||
|
||||
class CssPageWeaver_SimpleRender extends CssPageWeaver_PreRender{
|
||||
constructor(){
|
||||
super()
|
||||
|
||||
// Futur Parsed HTML to store in order to paginate
|
||||
this.content = null
|
||||
|
||||
// Hook and CSS to pass to pagedJs. Can be edit.
|
||||
this.hook = []
|
||||
this.css = []
|
||||
|
||||
this.interface = null
|
||||
console.log('CSS Page Weaver simple view initialized');
|
||||
}
|
||||
|
||||
async setup(){
|
||||
// Clone the content elements
|
||||
this.content = this.storeElements(this.container.origin, false);
|
||||
|
||||
// Unique Id
|
||||
this.setUniqueIdentfier(this.content);
|
||||
|
||||
this.setView()
|
||||
}
|
||||
|
||||
async setView(){
|
||||
// Set up the previewer
|
||||
this.previewer = new Previewer();
|
||||
await this.registerAllHook(this.hook, this.previewer);
|
||||
|
||||
if(typeof this.interface == 'string' && this.interface.length > 0){
|
||||
this.appendStyleLink(this.interface, document.head)
|
||||
}
|
||||
|
||||
try {
|
||||
// Await the preview operation
|
||||
const pages = await this.previewer.preview(this.content, this.css, this.destination);
|
||||
|
||||
// Log the result
|
||||
console.log('Rendered', pages.total, 'pages.');
|
||||
|
||||
} catch (error) {
|
||||
// Handle any errors that occur during the preview operation
|
||||
console.error('Error during pagination:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default CssPageWeaver_SimpleRender
|
||||
1
csspageweaver/plugins/.gitignore
vendored
Normal file
1
csspageweaver/plugins/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Hi! Just need to ensure folder remain tracked, even empty.
|
||||
1
csspageweaver/plugins/baseline/.gitignore
vendored
Normal file
1
csspageweaver/plugins/baseline/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
8
csspageweaver/plugins/baseline/README.md
Normal file
8
csspageweaver/plugins/baseline/README.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
name: baseline
|
||||
tags: recommended, stable, boilerplate, gui
|
||||
description: A simple helper to see custom baseline grid.
|
||||
---
|
||||
|
||||
|
||||
|
||||
21
csspageweaver/plugins/baseline/baseline.css
Normal file
21
csspageweaver/plugins/baseline/baseline.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/* BASELINE -------------------------------------------*/
|
||||
|
||||
:root {
|
||||
--pagedjs-baseline: 12px;
|
||||
--pagedjs-baseline-position: 0px;
|
||||
--pagedjs-baseline-color: cyan;
|
||||
}
|
||||
|
||||
@media screen{
|
||||
.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{
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
100
csspageweaver/plugins/baseline/baseline.js
Normal file
100
csspageweaver/plugins/baseline/baseline.js
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
/**
|
||||
* @name Baseline
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/baseline/ }
|
||||
*/
|
||||
|
||||
|
||||
export default function baseline() {
|
||||
let body = cssPageWeaver.ui.body
|
||||
let fileTitle = cssPageWeaver.docTitle;
|
||||
let parameters = cssPageWeaver.features.baseline.parameters || {}
|
||||
let isParametersSet = Object.keys(parameters).length > 0
|
||||
|
||||
/* BASELINE ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
/* Set baseline onload */
|
||||
let baseline = {}
|
||||
|
||||
// set default value
|
||||
baseline.default = {
|
||||
size: 32 ,
|
||||
position: 0
|
||||
}
|
||||
|
||||
baseline.toggle = {}
|
||||
baseline.toggle.value = localStorage.getItem('baselineToggle_' + fileTitle)
|
||||
baseline.toggle.input = cssPageWeaver.ui.baseline.toggleInput
|
||||
|
||||
baseline.button = cssPageWeaver.ui.baseline.toggleLabel
|
||||
|
||||
baseline.size = {}
|
||||
baseline.size.value = parameters.size || baseline.default.size
|
||||
baseline.size.input = document.querySelector('#size-baseline')
|
||||
|
||||
baseline.position = {}
|
||||
baseline.position.value = parameters.position || baseline.default.position
|
||||
baseline.position.input = document.querySelector('#position-baseline')
|
||||
|
||||
|
||||
/* */
|
||||
/* Retrieve previous sessions */
|
||||
baseline.size.value = localStorage.getItem('baselineSize_' + fileTitle) || baseline.size.value
|
||||
baseline.position.value = localStorage.getItem('baselinePosition_' + fileTitle) || baseline.position.value
|
||||
|
||||
/* */
|
||||
/* DOM edit */
|
||||
|
||||
/* Toggle */
|
||||
if(baseline.toggle.value == "no-baseline"){
|
||||
body.classList.add('no-baseline');
|
||||
baseline.toggle.input.checked = false;
|
||||
}else if(baseline.toggle.value == "baseline"){
|
||||
body.classList.remove('no-baseline');
|
||||
baseline.toggle.input.checked = true;
|
||||
}else{
|
||||
body.classList.add('no-baseline');
|
||||
localStorage.setItem('baselineToggle_' + fileTitle, 'no-baseline'); //baselineButton.querySelector(".button-hide").classList.remove("button-not-selected");
|
||||
baseline.toggle.input.checked = false;
|
||||
}
|
||||
|
||||
/* Set baseline size and position on load */
|
||||
baseline.size.input.value = baseline.size.value
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline', baseline.size.value + 'px');
|
||||
baseline.position.input.value = baseline.position.value
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline-position', baseline.position.value + 'px');
|
||||
|
||||
|
||||
/* */
|
||||
/* Event listenner */
|
||||
|
||||
/* Toggle event */
|
||||
baseline.toggle.input.addEventListener("input", (e) => {
|
||||
if(e.target.checked){
|
||||
/* see baseline */
|
||||
body.classList.remove('no-baseline');
|
||||
localStorage.setItem('baselineToggle_' + fileTitle, 'baseline');
|
||||
}else{
|
||||
/* hide baseline */
|
||||
body.classList.add('no-baseline');
|
||||
localStorage.setItem('baselineToggle_' + fileTitle, 'no-baseline');
|
||||
}
|
||||
});
|
||||
|
||||
/* Change baseline size on input */
|
||||
document.querySelector("#size-baseline").addEventListener("input", (e) => {
|
||||
baseline.size.value = e.target.value
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline', baseline.size.value + 'px');
|
||||
localStorage.setItem('baselineSize_' + fileTitle, baseline.size.value);
|
||||
});
|
||||
|
||||
|
||||
/* Change baseline position on input */
|
||||
document.querySelector("#position-baseline").addEventListener("input", (e) => {
|
||||
baseline.position.value = e.target.value
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline-position', baseline.position.value + 'px');
|
||||
localStorage.setItem('baselinePosition_' + fileTitle, baseline.position.value);
|
||||
});
|
||||
|
||||
}
|
||||
13
csspageweaver/plugins/baseline/config.json
Normal file
13
csspageweaver/plugins/baseline/config.json
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"name": "Baseline",
|
||||
"description": "",
|
||||
"version": "1.0",
|
||||
"ui": {
|
||||
"title": "Baseline Grid",
|
||||
"description": "This Toogle a baseline on pages",
|
||||
"template": "template.html",
|
||||
"toggle": true
|
||||
},
|
||||
"script": "baseline.js",
|
||||
"stylesheet": "baseline.css"
|
||||
}
|
||||
8
csspageweaver/plugins/baseline/template.html
Normal file
8
csspageweaver/plugins/baseline/template.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div class="panel-group-values">
|
||||
<label for="size-baseline">Size (px)</label>
|
||||
<input type="number" id="size-baseline" name="size-baseline" min="1" max="100" value="12">
|
||||
</div>
|
||||
<div class="panel-group-values">
|
||||
<label for="position-baseline" id="label-position">Position (px)</label>
|
||||
<input type="number" id="position-baseline" name="position-baseline" value="0">
|
||||
</div>
|
||||
1
csspageweaver/plugins/fullPage/.gitignore
vendored
Normal file
1
csspageweaver/plugins/fullPage/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
126
csspageweaver/plugins/fullPage/README.md
Executable file
126
csspageweaver/plugins/fullPage/README.md
Executable file
|
|
@ -0,0 +1,126 @@
|
|||
---
|
||||
name: fullPage
|
||||
tags: recommended, stable
|
||||
description: Create full page elements and full spread elements in the flow of your book.
|
||||
|
||||
---
|
||||
|
||||
|
||||
# Full page elements (paged.js)
|
||||
|
||||
This script help you to create full page elements and full spread elements in the flow of your book.
|
||||
|
||||
You need to use [csstree.js](https://github.com/csstree/csstree) in order to transform custom properties.
|
||||
If you use CSS Page Maker is inclued by default
|
||||
|
||||
|
||||
## How to install
|
||||
|
||||
**With CSS Page Marker**
|
||||
|
||||
Make sure the csstree library is included in the `<head>` of your HTML:
|
||||
|
||||
|
||||
```html
|
||||
<script src="/csspageweaver/lib/csstree.min.js"></script>
|
||||
```
|
||||
|
||||
|
||||
Register the `fullPage` plugin in your `manifest.json`:
|
||||
|
||||
```json
|
||||
[
|
||||
"fullPage",
|
||||
// other plugins
|
||||
|
||||
]
|
||||
|
||||
```
|
||||
|
||||
|
||||
**Without CSS Page Maker**
|
||||
|
||||
Include both csstree and the fullPage script in your HTML `<head>`:
|
||||
|
||||
```html
|
||||
<script src="js/csstree.min.js"></script>
|
||||
<script src="path/to/fullPage/fullPage.js"></script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## How to use it
|
||||
|
||||
In the CSS, on the element(s) you want in full page add the following custom property(works with id and classes):
|
||||
|
||||
```css
|
||||
elem{
|
||||
--pagedjs-full-page: page
|
||||
}
|
||||
```
|
||||
|
||||
You have multiple keywords for the custom property:
|
||||
- `--pagedjs-full-page: page` → The element will be remove from flow and put in the next page.
|
||||
- `--pagedjs-full-page: left` → The element will be remove from flow and put in the next left page.
|
||||
- `--pagedjs-full-page: right` → The element will be remove from flow and put in the next right page.
|
||||
- `--pagedjs-full-page: spread` → The element will be remove from flow and put in the next spread.
|
||||
- `--pagedjs-full-page: <number>` → The element will be remove from flow and put in the page you specify (with `--pagedjs-full-page: 4`, the element is put on page number 4).
|
||||
|
||||
Note that this script works on any elements, even if the element contains several child elements.
|
||||
|
||||
|
||||
### Images in full page
|
||||
|
||||
If you want an image in full page, we advise you to use the usual `objet-fit` properties.
|
||||
|
||||
```css
|
||||
#figure{
|
||||
--pagedjs-full-page: page;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
object-position: 0px 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
- To change the size of you image, use `width` and `height`.
|
||||
- To change the position of your image, use `object-position`.
|
||||
- In the case of the `spread` option, all the spread will be considered, i.e. `width: 100%` cover all the spread.
|
||||
|
||||
|
||||
### Spread and central fold
|
||||
|
||||
Sometimes, when a book is binding, the elements that cover the spread need to be offset from the central fold. A custom value can be added to the page to take it into account.
|
||||
|
||||
```css
|
||||
@page {
|
||||
--pagedjs-fold: 10mm;
|
||||
}
|
||||
```
|
||||
|
||||
### Bleeds of full page and full spread elements
|
||||
|
||||
In order to avoid that your elements moves when you change the bleeds and the crop marks of your document, the bleeds of full page elements was set up to `6mm`. This is due to the way Paged.js modifies the DOM (full page elements are contained in the page sheet and depend on the dimensions of this page sheet).
|
||||
If you want to change the dimensions of these specific bleeds, you just have to change the value of the `bleedFull` variable in the first line of the `full-page.js` file
|
||||
|
||||
|
||||
### Examples
|
||||
|
||||
You can find examples of use in `css/full-page.css`.
|
||||
|
||||
|
||||
|
||||
|
||||
## Credits
|
||||
|
||||
- [pagedjs.org](https://www.pagedjs.org/)
|
||||
- [csstree.js](https://github.com/csstree/csstree)
|
||||
|
||||
MIT licence, Julie Blanc, 2021
|
||||
|
||||
|
||||
9
csspageweaver/plugins/fullPage/config.json
Normal file
9
csspageweaver/plugins/fullPage/config.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"name": "Full page",
|
||||
"description": "Create full page elements and full spread elements in the flow of your book",
|
||||
"licence": "MIT",
|
||||
"author": ["Julie Blanc"],
|
||||
"version": "2.0",
|
||||
"hook": "fullPage.js",
|
||||
"stylesheet": "fullPage.css"
|
||||
}
|
||||
49
csspageweaver/plugins/fullPage/fullPage.css
Normal file
49
csspageweaver/plugins/fullPage/fullPage.css
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
.pagedjs_page_fullLeft .pagedjs_full-spread_container{
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
||||
position: absolute;
|
||||
top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
|
||||
left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.pagedjs_page_fullRight .pagedjs_full-spread_container{
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
||||
position: absolute;
|
||||
top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
|
||||
left: calc(var(--pagedjs-margin-left)*-1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.pagedjs_full-spread_content{
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width)*2 + var(--bleed-images)*2);
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.pagedjs_page_fullLeft .pagedjs_full-spread_content{
|
||||
left: calc(var(--pagedjs-fold)*-1);
|
||||
}
|
||||
.pagedjs_page_fullRight .pagedjs_full-spread_content{
|
||||
left: calc((var(--pagedjs-pagebox-width) + var(--bleed-images))*-1 + var(--pagedjs-fold))
|
||||
}
|
||||
|
||||
.pagedjs_full-page_content {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
|
||||
}
|
||||
.pagedjs_left_page .pagedjs_full-page_content {
|
||||
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images) + var(--bleed-images))!important;
|
||||
left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
|
||||
|
||||
}
|
||||
.pagedjs_right_page .pagedjs_full-page_content {
|
||||
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images) * 2)!important;
|
||||
left: calc(var(--pagedjs-margin-left)*-1);
|
||||
}
|
||||
294
csspageweaver/plugins/fullPage/fullPage.js
Normal file
294
csspageweaver/plugins/fullPage/fullPage.js
Normal file
|
|
@ -0,0 +1,294 @@
|
|||
/**
|
||||
* @name Full page
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/fullPage }
|
||||
*/
|
||||
import { Handler } from '/csspageweaver/lib/paged.esm.js';
|
||||
|
||||
|
||||
let bleedFull = '6mm';
|
||||
|
||||
export default class fullPage extends Handler {
|
||||
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.selectorFullSpread = new Set();
|
||||
this.fullSpreadEls = new Set();
|
||||
this.selectorFullPage = new Set();
|
||||
this.fullPageEls = new Set();
|
||||
this.selectorFullRight = new Set();
|
||||
this.fullRightEls = new Set();
|
||||
this.selectorFullLeft= new Set();
|
||||
this.fullLeftEls = new Set();
|
||||
this.usedPagedEls = new Set();
|
||||
this.specificPage = new Set();
|
||||
this.specificPageClone = new Set();
|
||||
}
|
||||
|
||||
|
||||
|
||||
onDeclaration(declaration, dItem, dList, rule) {
|
||||
// Read customs properties
|
||||
if (declaration.property == "--pagedjs-full-page") {
|
||||
// get selector of the declaration (NOTE: need csstree.js)
|
||||
let selector = csstree.generate(rule.ruleNode.prelude);
|
||||
// Push selector in correct set
|
||||
if (declaration.value.value.includes("page")) {
|
||||
this.selectorFullPage.add(selector);
|
||||
}else if(declaration.value.value.includes("spread")) {
|
||||
this.selectorFullSpread.add(selector);
|
||||
}else if(declaration.value.value.includes("right")) {
|
||||
this.selectorFullRight.add(selector);
|
||||
}else if(declaration.value.value.includes("left")) {
|
||||
this.selectorFullLeft.add(selector);
|
||||
}else{
|
||||
let obj = { page: declaration.value.value, elem: selector };
|
||||
this.specificPage.add(JSON.stringify(obj));
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
afterParsed(parsed){
|
||||
|
||||
console.log("FULL PAGE loaded");
|
||||
|
||||
// ADD pagedjs classes to elements
|
||||
for (let item of this.selectorFullPage) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-page-elem");
|
||||
}
|
||||
}
|
||||
for (let item of this.selectorFullSpread) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-spread-elem");
|
||||
}
|
||||
}
|
||||
for (let item of this.selectorFullLeft) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-page-left-elem");
|
||||
}
|
||||
}
|
||||
for (let item of this.selectorFullRight) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-page-right-elem");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// SPECIFIC PAGE ------------------------------------
|
||||
this.specificPage.forEach(entry => {
|
||||
const obj = JSON.parse(entry);
|
||||
const elements = parsed.querySelectorAll(obj.elem);
|
||||
if (elements.length > 0) {
|
||||
// pourquoi c’est ajouté même si l’élément n’existe pas ?
|
||||
elements[0].classList.add("pagedjs_full-page-specific");
|
||||
const clone = elements[0].cloneNode(true);
|
||||
obj.elemClone = clone.outerHTML;
|
||||
elements[0].remove();
|
||||
}
|
||||
this.specificPageClone.add(JSON.stringify(obj));
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
renderNode(clone, node) {
|
||||
// FULL SPREAD
|
||||
// if you find a full page element, move it in the array
|
||||
if (node.nodeType == 1 && node.classList.contains("pagedjs_full-spread-elem")) {
|
||||
this.fullSpreadEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
|
||||
// remove the element from the flow by hiding it.
|
||||
clone.style.display = "none";
|
||||
}
|
||||
|
||||
// FULL PAGE
|
||||
if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-left-elem")) {
|
||||
this.fullLeftEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
clone.style.display = "none";
|
||||
}else if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-right-elem")) {
|
||||
this.fullRightEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
clone.style.display = "none";
|
||||
}else if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-elem")) {
|
||||
this.fullPageEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
clone.style.display = "none";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken, chunker) {
|
||||
|
||||
if(page.id == "page-1"){
|
||||
let allPages = document.querySelector(".pagedjs_pages");
|
||||
allPages.style.setProperty('--bleed-images', bleedFull);
|
||||
}
|
||||
|
||||
// ADD --pagedjs-fold on body if doesn't exist
|
||||
if(pageElement.classList.contains("pagedjs_first_page")){
|
||||
let body = document.getElementsByTagName("body")[0];
|
||||
let style = window.getComputedStyle(body);
|
||||
let fold = style.getPropertyValue('--pagedjs-fold');
|
||||
if(!fold){
|
||||
body.style.setProperty('--pagedjs-fold', '0mm')
|
||||
}
|
||||
}
|
||||
|
||||
// FULL SPREAD
|
||||
// if there is an element in the fullSpreadEls Set, (goodbye arrays!)
|
||||
|
||||
for (let img of this.fullSpreadEls) {
|
||||
|
||||
if (page.element.classList.contains("pagedjs_right_page")) {
|
||||
|
||||
let imgLeft;
|
||||
let imgRight;
|
||||
|
||||
if (img.nodeName == "IMG") {
|
||||
/* Add outside + inside container if the element is an img */
|
||||
let containerLeft = document.createElement("div");
|
||||
containerLeft.classList.add("pagedjs_full-spread_container");
|
||||
let containerLeftInside = document.createElement("div");
|
||||
containerLeftInside.classList.add("pagedjs_full-spread_content");
|
||||
containerLeft.appendChild(containerLeftInside).appendChild(img);
|
||||
imgLeft = containerLeft;
|
||||
|
||||
let containerRight = document.createElement("div");
|
||||
containerRight.classList.add("pagedjs_full-spread_container");
|
||||
let containerRightInside = document.createElement("div");
|
||||
containerRightInside.classList.add("pagedjs_full-spread_content");
|
||||
containerRight.appendChild(containerRightInside).appendChild(img.cloneNode(true));
|
||||
imgRight = containerRight;
|
||||
|
||||
} else {
|
||||
/* Add outside container if the element is an img */
|
||||
let containerLeft = document.createElement("div");
|
||||
containerLeft.classList.add("pagedjs_full-spread_container");
|
||||
img.classList.add("pagedjs_full-spread_content");
|
||||
containerLeft.appendChild(img);
|
||||
imgLeft = containerLeft;
|
||||
let containerRight = document.createElement("div");
|
||||
containerRight.classList.add("pagedjs_full-spread_container");
|
||||
img.classList.add("pagedjs_full-spread_content");
|
||||
containerRight.appendChild(img.cloneNode(true));
|
||||
imgRight = containerRight;
|
||||
|
||||
}
|
||||
|
||||
// put the first element on the page
|
||||
let fullPage = chunker.addPage();
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", imgLeft);
|
||||
fullPage.element.classList.add("pagedjs_page_fullLeft");
|
||||
|
||||
// page right
|
||||
let fullPageRight = chunker.addPage();
|
||||
fullPageRight.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", imgRight);
|
||||
fullPageRight.element.classList.add("pagedjs_page_fullRight");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
this.fullSpreadEls.delete(img);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FULL PAGE
|
||||
// if there is an element in the fullPageEls Set
|
||||
for (let img of this.fullPageEls) {
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("pagedjs_full-page_content");
|
||||
container.appendChild(img);
|
||||
let fullPage = chunker.addPage();
|
||||
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", container);
|
||||
fullPage.element.classList.add("pagedjs_page_fullPage");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
this.fullPageEls.delete(img);
|
||||
}
|
||||
|
||||
// FULL Left PAGE
|
||||
// if there is an element in the fullLeftEls Set
|
||||
for (let img of this.fullLeftEls) {
|
||||
|
||||
if (page.element.classList.contains("pagedjs_right_page")) {
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("pagedjs_full-page_content");
|
||||
container.appendChild(img);
|
||||
let fullPage = chunker.addPage();
|
||||
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", container);
|
||||
fullPage.element.classList.add("pagedjs_page_fullPage");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
this.fullLeftEls.delete(img);
|
||||
}
|
||||
}
|
||||
|
||||
// FULL RIGHT PAGE
|
||||
// if there is an element in the fullRightEls Set
|
||||
for (let img of this.fullRightEls) {
|
||||
|
||||
if (page.element.classList.contains("pagedjs_left_page")) {
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("pagedjs_full-page_content");
|
||||
container.appendChild(img);
|
||||
let fullPage = chunker.addPage();
|
||||
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", container);
|
||||
fullPage.element.classList.add("pagedjs_page_fullPage");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
this.fullRightEls.delete(img);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// SPECIFIC PAGE ------------------------------------
|
||||
let pageNum = pageElement.id.split('page-')[1];
|
||||
pageNum = parseInt(pageNum);
|
||||
|
||||
this.specificPageClone.forEach(entry => {
|
||||
const obj = JSON.parse(entry);
|
||||
let targetedPage = obj.page;
|
||||
let prevPage = parseInt(targetedPage) - 1;
|
||||
|
||||
let elem = obj.elemClone;
|
||||
|
||||
if(prevPage == pageNum){
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("pagedjs_full-page_content");
|
||||
container.innerHTML = elem;
|
||||
let fullPage = chunker.addPage();
|
||||
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", container);
|
||||
fullPage.element.classList.add("pagedjs_page_fullPage");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
1
csspageweaver/plugins/grid/.gitignore
vendored
Normal file
1
csspageweaver/plugins/grid/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
70
csspageweaver/plugins/grid/README.md
Normal file
70
csspageweaver/plugins/grid/README.md
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
---
|
||||
name: grid
|
||||
tags: recommended, stable, boilerplate, gui
|
||||
description: A simple GUI tool to display a square grid with subdivisions.
|
||||
---
|
||||
|
||||
# Grid Plugin
|
||||
|
||||
A visual development helper for CSS Page Weaver that displays
|
||||
customizable grid overlays on pages. Useful for layout debugging and
|
||||
ensuring consistent spacing in print designs.
|
||||
|
||||
- **Squared grid**: Repeating grid with customizable spacing
|
||||
and subdivisions
|
||||
- **Persistent settings**: Grid preferences saved per document in
|
||||
localStorage
|
||||
- **Screen-only**: Grid overlays only appear in screen view, not in
|
||||
print output
|
||||
|
||||
## Installation
|
||||
|
||||
This plugin is part of the CSS Page Weaver plugin ecosystem. It should
|
||||
be included in your `csspageweaver/plugins/` directory.
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Toggle the grid
|
||||
|
||||
Use the toggle switch in the CSS Page Weaver UI panel to show/hide the
|
||||
grid overlay.
|
||||
|
||||
### Customize grid parameters
|
||||
|
||||
Four adjustable parameters are available in the UI panel:
|
||||
|
||||
- **Spacing (px)**: Distance between bold grid lines (default: 56px)
|
||||
- **Steps**: Number of subdivisions between bold lines (default: 5)
|
||||
- **Position X (px)**: Horizontal offset of the grid (default: 28px)
|
||||
- **Position Y (px)**: Vertical offset of the grid (default: 0px)
|
||||
|
||||
### Configure default values
|
||||
|
||||
You can set default grid parameters in your configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"grid": {
|
||||
"parameters": {
|
||||
"spacing": 56,
|
||||
"steps": 5,
|
||||
"positionX": 28,
|
||||
"positionY": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
CSS Custom Properties
|
||||
|
||||
The grid uses CSS custom properties that can be overridden in `grid.css`:
|
||||
|
||||
```
|
||||
:root {
|
||||
--grid-bold: #bfbfbf; /* Bold grid line color */
|
||||
--grid-light: #efefef; /* Light grid line color */
|
||||
--grid-color: magenta; /* Column grid color */
|
||||
--nbr-columns: 8; /* Number of columns (1-12) */
|
||||
}
|
||||
```
|
||||
14
csspageweaver/plugins/grid/config.json
Normal file
14
csspageweaver/plugins/grid/config.json
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"name": "Grid",
|
||||
"description": "",
|
||||
"version": "1.0",
|
||||
"ui": {
|
||||
"title": "Squared grid",
|
||||
"description": "This Toogle a squared grid",
|
||||
"template": "template.html",
|
||||
"toggle": true
|
||||
},
|
||||
"stylesheet": "grid.css",
|
||||
"script": "grid-ui.js",
|
||||
"hook": "grid-hook.js"
|
||||
}
|
||||
17
csspageweaver/plugins/grid/grid-hook.js
Normal file
17
csspageweaver/plugins/grid/grid-hook.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* @name Grid
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/grid/ }
|
||||
*/
|
||||
|
||||
import { Handler } from '/csspageweaver/lib/paged.esm.js';
|
||||
|
||||
export default class GridPage extends Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
115
csspageweaver/plugins/grid/grid-ui.js
Normal file
115
csspageweaver/plugins/grid/grid-ui.js
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
/**
|
||||
* @name Grid
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/grid/ }
|
||||
*/
|
||||
|
||||
|
||||
export default function gridEvents(){
|
||||
let body = cssPageWeaver.ui.body;
|
||||
let fileTitle = cssPageWeaver.docTitle;
|
||||
let parameters = cssPageWeaver.features.grid.parameters || {};
|
||||
let isParametersSet = Object.keys(parameters).length > 0;
|
||||
|
||||
let grid = {};
|
||||
|
||||
// valeur par défaut
|
||||
grid.default = {
|
||||
toggle: 'no-grid',
|
||||
spacing: 56,
|
||||
steps: 5,
|
||||
positionX: 28,
|
||||
positionY: 0
|
||||
};
|
||||
|
||||
grid.toggle = {};
|
||||
grid.toggle.input = cssPageWeaver.ui.grid.toggleInput;
|
||||
grid.toggle.label = cssPageWeaver.ui.grid.toggleLabel;
|
||||
|
||||
grid.spacing = {};
|
||||
grid.spacing.value = parameters.spacing || grid.default.spacing;
|
||||
grid.spacing.input = document.querySelector('#spacing-grid');
|
||||
|
||||
grid.steps = {};
|
||||
grid.steps.value = parameters.steps || grid.default.steps;
|
||||
grid.steps.input = document.querySelector('#steps-grid');
|
||||
|
||||
grid.positionX = {};
|
||||
grid.positionX.value = parameters.positionX || grid.default.positionX;
|
||||
grid.positionX.input = document.querySelector('#position-x-grid');
|
||||
|
||||
grid.positionY = {};
|
||||
grid.positionY.value = parameters.positionY || grid.default.positionY;
|
||||
grid.positionY.input = document.querySelector('#position-y-grid');
|
||||
|
||||
/* Récupération de la session précédente */
|
||||
grid.toggle.value = localStorage.getItem('gridToggle_' + fileTitle) || grid.default.toggle;
|
||||
grid.spacing.value = localStorage.getItem('gridSpacing_' + fileTitle) || grid.spacing.value;
|
||||
grid.steps.value = localStorage.getItem('gridSteps_' + fileTitle) || grid.steps.value;
|
||||
grid.positionX.value = localStorage.getItem('gridPositionX_' + fileTitle) || grid.positionX.value;
|
||||
grid.positionY.value = localStorage.getItem('gridPositionY_' + fileTitle) || grid.positionY.value;
|
||||
|
||||
/* DOM edit */
|
||||
if(grid.toggle.value === "grid"){
|
||||
body.classList.add('grid'); // on indique qu'il y a la grille
|
||||
grid.toggle.input.checked = true;
|
||||
} else {
|
||||
body.classList.remove('grid'); // grille désactivée
|
||||
grid.toggle.input.checked = false;
|
||||
}
|
||||
|
||||
/* Set grid values on load */
|
||||
grid.spacing.input.value = grid.spacing.value;
|
||||
document.documentElement.style.setProperty('--grid-spacing', grid.spacing.value + 'px');
|
||||
|
||||
grid.steps.input.value = grid.steps.value;
|
||||
document.documentElement.style.setProperty('--steps', grid.steps.value);
|
||||
|
||||
grid.positionX.input.value = grid.positionX.value;
|
||||
document.documentElement.style.setProperty('--grid-position-x', grid.positionX.value + 'px');
|
||||
|
||||
grid.positionY.input.value = grid.positionY.value;
|
||||
document.documentElement.style.setProperty('--grid-position-y', grid.positionY.value + 'px');
|
||||
|
||||
/* Event listeners */
|
||||
|
||||
/* Toggle event */
|
||||
grid.toggle.input.addEventListener("input", (e) => {
|
||||
if(e.target.checked){
|
||||
body.classList.add('grid'); // grille activée
|
||||
localStorage.setItem('gridToggle_' + fileTitle, 'grid');
|
||||
} else {
|
||||
body.classList.remove('grid'); // grille désactivée
|
||||
localStorage.setItem('gridToggle_' + fileTitle, 'no-grid');
|
||||
}
|
||||
});
|
||||
|
||||
/* Change grid spacing on input */
|
||||
document.querySelector("#spacing-grid").addEventListener("input", (e) => {
|
||||
grid.spacing.value = e.target.value;
|
||||
document.documentElement.style.setProperty('--grid-spacing', grid.spacing.value + 'px');
|
||||
localStorage.setItem('gridSpacing_' + fileTitle, grid.spacing.value);
|
||||
});
|
||||
|
||||
/* Change grid steps on input */
|
||||
document.querySelector("#steps-grid").addEventListener("input", (e) => {
|
||||
grid.steps.value = e.target.value;
|
||||
document.documentElement.style.setProperty('--steps', grid.steps.value);
|
||||
localStorage.setItem('gridSteps_' + fileTitle, grid.steps.value);
|
||||
});
|
||||
|
||||
/* Change grid position X on input */
|
||||
document.querySelector("#position-x-grid").addEventListener("input", (e) => {
|
||||
grid.positionX.value = e.target.value;
|
||||
document.documentElement.style.setProperty('--grid-position-x', grid.positionX.value + 'px');
|
||||
localStorage.setItem('gridPositionX_' + fileTitle, grid.positionX.value);
|
||||
});
|
||||
|
||||
/* Change grid position Y on input */
|
||||
document.querySelector("#position-y-grid").addEventListener("input", (e) => {
|
||||
grid.positionY.value = e.target.value;
|
||||
document.documentElement.style.setProperty('--grid-position-y', grid.positionY.value + 'px');
|
||||
localStorage.setItem('gridPositionY_' + fileTitle, grid.positionY.value);
|
||||
});
|
||||
}
|
||||
|
||||
124
csspageweaver/plugins/grid/grid.css
Normal file
124
csspageweaver/plugins/grid/grid.css
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
:root {
|
||||
--grid-bold: #bfbfbf;
|
||||
--grid-light: #efefef;
|
||||
|
||||
--grid-spacing: 56px;
|
||||
--steps: 5;
|
||||
--grid-position-x: 28px;
|
||||
--grid-position-y: 0px;
|
||||
|
||||
--grid-subdivisions: calc(var(--grid-spacing)/var(--steps));
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen{
|
||||
|
||||
|
||||
|
||||
body.grid .pagedjs_sheet {
|
||||
|
||||
|
||||
|
||||
z-index: -1;
|
||||
|
||||
|
||||
background-image:
|
||||
/* Traits bold */
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--grid-bold) 0 1px,
|
||||
transparent 1px var(--grid-spacing)
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
var(--grid-bold) 0 1px,
|
||||
transparent 1px var(--grid-spacing)
|
||||
),
|
||||
|
||||
/* Traits fins (3 traits → 4 carrés) */
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--grid-light) 0 1px,
|
||||
transparent 1px var(--grid-subdivisions)
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
var(--grid-light) 0 1px,
|
||||
transparent 1px var(--grid-subdivisions)
|
||||
);
|
||||
|
||||
background-position:
|
||||
var(--grid-position-x) var(--grid-position-y),
|
||||
var(--grid-position-x) var(--grid-position-y),
|
||||
var(--grid-position-x) var(--grid-position-y),
|
||||
var(--grid-position-x) var(--grid-position-y);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.grid-page{
|
||||
--nbr-columns: 8;
|
||||
width: var(--pagedjs-pagebox-width);
|
||||
height: var(--pagedjs-pagebox-height);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--nbr-columns), calc(100%/var(--nbr-columns)));
|
||||
|
||||
box-shadow: 1px 0px 0px 0px var(--grid-color);
|
||||
|
||||
--grid-color: magenta;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .grid-page{
|
||||
padding-left: var(--pagedjs-margin-left);
|
||||
padding-right: var(--pagedjs-margin-right);
|
||||
}
|
||||
|
||||
.pagedjs_left_page .grid-page{
|
||||
padding-left: var(--pagedjs-margin-left);
|
||||
padding-right: var(--pagedjs-margin-right);
|
||||
}
|
||||
|
||||
|
||||
.grid-page .grid-column{
|
||||
box-shadow: 1px 0px 0px 0px var(--grid-color);
|
||||
grid-row: 1/end;
|
||||
width: 100%;
|
||||
justify-self: right;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.grid-column-0{
|
||||
grid-column: 1;
|
||||
box-shadow: -1px 0px 0px 0px var(--grid-color)!important;
|
||||
justify-self: left;
|
||||
}
|
||||
|
||||
.grid-column-1{ grid-column: 1; }
|
||||
.grid-column-2{ grid-column: 2; }
|
||||
.grid-column-3{ grid-column: 3; }
|
||||
.grid-column-4{ grid-column: 4; }
|
||||
.grid-column-5{ grid-column: 5; }
|
||||
.grid-column-6{ grid-column: 6; }
|
||||
.grid-column-7{ grid-column: 7; }
|
||||
.grid-column-8{ grid-column: 8; }
|
||||
.grid-column-9{ grid-column: 9; }
|
||||
.grid-column-10{ grid-column: 10; }
|
||||
.grid-column-11{ grid-column: 11; }
|
||||
.grid-column-12{ grid-column: 12; }
|
||||
}
|
||||
|
||||
.no-grid .grid-page{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
16
csspageweaver/plugins/grid/template.html
Normal file
16
csspageweaver/plugins/grid/template.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<div class="panel-group-values">
|
||||
<label for="spacing-grid">Spacing (px)</label>
|
||||
<input type="number" id="spacing-grid" name="spacing-grid" min="1" max="200" value="56">
|
||||
</div>
|
||||
<div class="panel-group-values">
|
||||
<label for="steps-grid">Steps</label>
|
||||
<input type="number" id="steps-grid" name="steps-grid" min="1" max="20" value="5">
|
||||
</div>
|
||||
<div class="panel-group-values">
|
||||
<label for="position-x-grid">Position X (px)</label>
|
||||
<input type="number" id="position-x-grid" name="position-x-grid" value="28">
|
||||
</div>
|
||||
<div class="panel-group-values">
|
||||
<label for="position-y-grid">Position Y (px)</label>
|
||||
<input type="number" id="position-y-grid" name="position-y-grid" value="0">
|
||||
</div>
|
||||
1
csspageweaver/plugins/imposition/.gitignore
vendored
Normal file
1
csspageweaver/plugins/imposition/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
17
csspageweaver/plugins/imposition/config.json
Normal file
17
csspageweaver/plugins/imposition/config.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "Booklet Imposition",
|
||||
"description": " This script re-arrange the pages of your document in order to make an imposed sheet layouts for printing. ",
|
||||
"author": ["Quentin Juhel", "Julien Taquet", "Julien Bidoret", "Julie Blanc"],
|
||||
"licence": "MIT",
|
||||
"repository": "https://gitlab.coko.foundation/pagedjs/pagedjs-plugins/booklet-imposition",
|
||||
"version": "1.0",
|
||||
"ui": {
|
||||
"title": "Imposition",
|
||||
"description": "Re-arrange the pages in order to make an imposed sheet layouts for printing.",
|
||||
"toggle": false,
|
||||
"template": "template.html"
|
||||
},
|
||||
"hook": "index.js"
|
||||
}
|
||||
|
||||
|
||||
363
csspageweaver/plugins/imposition/index.js
Normal file
363
csspageweaver/plugins/imposition/index.js
Normal file
|
|
@ -0,0 +1,363 @@
|
|||
/**
|
||||
* @file Imposition for booklet(s)
|
||||
* This script re-arrange the pages of your document in order to make an imposed sheet layouts for printing.
|
||||
* Two pages per sheet, double-sided
|
||||
* @author Originally developped by Julien Bidoret,Quentin Juhel and Julien Taquet,
|
||||
* @author adapted for this project by Julie Blanc
|
||||
* @see { @link https://gitlab.coko.foundation/pagedjs/pagedjs-plugins/booklet-imposition }
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/imposition/}
|
||||
*/
|
||||
|
||||
import { Handler } from '/csspageweaver/lib/paged.esm.js';
|
||||
|
||||
export default class booklet extends Handler {
|
||||
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.pagedbooklet;
|
||||
this.pagedspread;
|
||||
this.sourceSize;
|
||||
this.pageStart;
|
||||
this.pageEnd;
|
||||
}
|
||||
|
||||
afterRendered(pages) {
|
||||
|
||||
/* Launch when printing */
|
||||
window.addEventListener("beforeprint", (evenement) => {
|
||||
|
||||
let format = document.querySelector(".pagedjs_page");
|
||||
|
||||
/* Width of page without bleed, extract the first number of calc() function */
|
||||
let width = getCSSCustomProp("--pagedjs-width", format);
|
||||
let numbers = width
|
||||
.match(/[0-9]+/g)
|
||||
.map(function (n) {
|
||||
return + (n);
|
||||
});
|
||||
width = parseInt(numbers[0]);
|
||||
|
||||
/* Height of page with bleed, addition of all the numbers of calc() function*/
|
||||
let height = getCSSCustomProp("--pagedjs-height", format);
|
||||
numbers = height
|
||||
.match(/[0-9]+/g)
|
||||
.map(function (n) {
|
||||
return + (n);
|
||||
});
|
||||
const reducer = (previousValue, currentValue) => previousValue + currentValue;
|
||||
height = numbers.reduce(reducer);
|
||||
|
||||
/* Bleed of the page */
|
||||
let bleed = getCSSCustomProp("--pagedjs-bleed-top", format);
|
||||
let bleedNum = parseInt(bleed);
|
||||
|
||||
/* Spread and half-spread*/
|
||||
let spread = width * 2 + bleedNum * 2;
|
||||
let spreadHalf = width + bleedNum;
|
||||
let onePage = width + bleedNum*2;
|
||||
|
||||
// get values
|
||||
let inputBooklet = document.querySelector("#input-booklet");
|
||||
let inputSpread = document.querySelector("#input-spread");
|
||||
let inputRange = document.querySelector("#imposition-range");
|
||||
let inputBookletStart = document.querySelector("#booklet-start").value;
|
||||
let inputBookletEnd = document.querySelector("#booklet-end").value;
|
||||
|
||||
let containerPages = document.querySelector(".pagedjs_pages");
|
||||
|
||||
|
||||
|
||||
if(inputBooklet.checked){
|
||||
this.pagedbooklet = true;
|
||||
this.pageStart = 1;
|
||||
this.pageEnd = pages.length;
|
||||
|
||||
if(inputRange.checked){
|
||||
this.pageStart = parseInt(inputBookletStart);
|
||||
this.pageEnd = parseInt(inputBookletEnd);
|
||||
}
|
||||
}else if(inputSpread.checked){
|
||||
this.pagedspread = true;
|
||||
this.pageStart = 1;
|
||||
this.pageEnd = pages.length;
|
||||
|
||||
if(inputRange.checked){
|
||||
this.pageStart = parseInt(inputBookletStart);
|
||||
this.pageEnd = parseInt(inputBookletEnd);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Delete pages we don't want*/
|
||||
pages.forEach(page => {
|
||||
let id = parseInt(page.id.replace('page-', ''));
|
||||
if(id < this.pageStart || id > this.pageEnd){
|
||||
let pageSelect = document.querySelector('#'+ page.id);
|
||||
pageSelect.remove();
|
||||
}
|
||||
});
|
||||
|
||||
/* Reset page counter */
|
||||
let reset = parseInt(this.pageStart) - 1;
|
||||
containerPages.style.counterReset = "page " + reset;
|
||||
|
||||
|
||||
|
||||
|
||||
// Add CSS to have pages in spread
|
||||
//
|
||||
// - change size of the page when printing (actually, sheet size)
|
||||
// - flex properties
|
||||
// - delete bleeds inside spread */
|
||||
|
||||
var newSize =
|
||||
`@media print{
|
||||
@page{
|
||||
size: ${spread}mm ${height}mm;
|
||||
}
|
||||
.pagedjs_pages {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media screen{
|
||||
.pagedjs_pages{
|
||||
max-width: calc(var(--pagedjs-width) * 2);
|
||||
}
|
||||
}
|
||||
.pagedjs_pages {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap;
|
||||
transform: none !important;
|
||||
height: 100% !important;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.pagedjs_page {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 100%;
|
||||
min-height: 100%;
|
||||
height: 100% !important;
|
||||
|
||||
}
|
||||
|
||||
.pagedjs_sheet {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 100%;
|
||||
min-height: 100%;
|
||||
height: 100% !important;
|
||||
}
|
||||
body{
|
||||
--pagedjs-bleed-right-left: 0mm;
|
||||
}
|
||||
.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_right_page,
|
||||
.pagedjs_right_page .pagedjs_sheet{
|
||||
width: calc(var(--pagedjs-bleed-right-right) + var(--pagedjs-pagebox-width))!important;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .pagedjs_sheet{
|
||||
grid-template-columns: [bleed-left] var(--pagedjs-bleed-right-left) [sheet-center] 1fr [bleed-right] var(--pagedjs-bleed-right-right);
|
||||
}
|
||||
.pagedjs_right_page .pagedjs_bleed-left{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .pagedjs_bleed-top .pagedjs_marks-crop:nth-child(1),
|
||||
.pagedjs_right_page .pagedjs_bleed-bottom .pagedjs_marks-crop:nth-child(1){
|
||||
width: 0!important;
|
||||
}
|
||||
.pagedjs_first_page {
|
||||
margin-left: 0;
|
||||
}
|
||||
body{
|
||||
margin: 0
|
||||
}
|
||||
.pagedjs_page:nth-of-type(even){
|
||||
break-after: always;
|
||||
}
|
||||
.pagedjs_page,
|
||||
.pagedjs_sheet{
|
||||
width: ${spreadHalf - 0.1}mm!important;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
var twoPageView = `.pagedjs_page:nth-of-type(1){
|
||||
bakground-color: red;
|
||||
margin-left: ${spreadHalf}mm!important;
|
||||
}`;
|
||||
|
||||
// Add style for the arrangement of the pages
|
||||
|
||||
if (this.pagedbooklet == true) {
|
||||
let style = document.createElement("style");
|
||||
style.textContent = newSize;
|
||||
document
|
||||
.head
|
||||
.appendChild(style);
|
||||
|
||||
var number_of_pages = document.getElementsByClassName("pagedjs_page").length;
|
||||
var pages_array = [];
|
||||
|
||||
// If the page count isn't a multiple of 4, we need to pad the array with blank
|
||||
// pages so we have the correct number of pages for a booklet.
|
||||
//
|
||||
// ex. [1, 2, 3, 4, 5, 6, 7, 8, 9, blank, blank, blank]
|
||||
|
||||
let modulo = number_of_pages % 4;
|
||||
let additional_pages = 0;
|
||||
if (modulo != 0) {
|
||||
additional_pages = 4 - modulo;
|
||||
}
|
||||
|
||||
for (i = 0; i < additional_pages; i++) {
|
||||
let added_page = document.createElement("div");
|
||||
added_page
|
||||
.classList
|
||||
.add("pagedjs_page", "added");
|
||||
added_page.id = `page-${this.pageEnd + i + 1}`;
|
||||
document
|
||||
.querySelector(".pagedjs_pages")
|
||||
.appendChild(added_page);
|
||||
}
|
||||
|
||||
// Push each page in the array
|
||||
|
||||
for (var i = number_of_pages + additional_pages; i >= 1; i--) {
|
||||
pages_array.push(i);
|
||||
}
|
||||
|
||||
|
||||
// Split the array in half
|
||||
//
|
||||
// ex. [1, 2, 3, 4, 5, 6], [7, 8, 9, blank, blank, blank]
|
||||
|
||||
var split_start = pages_array.length / 2;
|
||||
|
||||
var split_end = pages_array.length;
|
||||
|
||||
var first_array = pages_array.slice(0, split_start);
|
||||
var second_array = pages_array.slice(split_start, split_end);
|
||||
|
||||
// Reverse the second half of the array. This is the beginning of the back half
|
||||
// of the booklet (from the center fold, back to the outside last page)
|
||||
//
|
||||
// ex. [blank, blank, blank, 9, 8, 7]
|
||||
|
||||
var second_array_reversed = second_array.reverse();
|
||||
|
||||
// Zip the two arrays together in groups of 2 These will end up being each '2-up
|
||||
// side' of the final document So, the sub-array at index zero will be the first
|
||||
// side of physical page one and index 1 will be the back side. However, they
|
||||
// won't yet be in the proper order.
|
||||
//
|
||||
// ex. [[1, blank], [2, blank], [3, blank], [4, 9], [5, 8], [6, 7]]
|
||||
|
||||
var page_groups = [];
|
||||
for (var i = 0; i < first_array.length; i++) {
|
||||
page_groups[i] = [
|
||||
first_array[i], second_array_reversed[i]
|
||||
];
|
||||
}
|
||||
|
||||
// We need to reverse every other sub-array starting with the first side. This
|
||||
// is the final step of aligning our booklet pages in the order with which the
|
||||
// booklet gets printed and bound.
|
||||
//
|
||||
// ex. [[blank, 1], [2, blank], [blank, 3], [4, 9], [8, 5], [6, 7]] final_groups
|
||||
// = page_groups.each_with_index { |group, index| group.reverse! if (index %
|
||||
// 2).zero? }
|
||||
var final_groups = [];
|
||||
for (var i = 0; i < page_groups.length; i++) {
|
||||
var group = page_groups[i];
|
||||
if (i % 2 != 0) {
|
||||
final_groups[i] = page_groups[i].reverse();
|
||||
} else {
|
||||
final_groups[i] = page_groups[i];
|
||||
}
|
||||
}
|
||||
console.log("Final Imposition Order: " + final_groups);
|
||||
|
||||
var allPages = document.querySelectorAll(".pagedjs_page");
|
||||
|
||||
var final_flat = final_groups.flat();
|
||||
|
||||
final_flat.forEach((folio, i) => {
|
||||
folio = folio + reset;
|
||||
document.querySelector(`#page-${folio}`).style.order = i;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (this.pagedspread == true) {
|
||||
console.log("double page view please");
|
||||
let style = document.createElement("style");
|
||||
style.textContent = newSize;
|
||||
document
|
||||
.head
|
||||
.appendChild(style);
|
||||
let styleBis = document.createElement("style");
|
||||
styleBis.textContent = twoPageView;
|
||||
document
|
||||
.head
|
||||
.appendChild(styleBis);
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Pass in an element and its CSS Custom Property that you want the value of.
|
||||
* Optionally, you can determine what datatype you get back.
|
||||
*
|
||||
* @param {String} propKey
|
||||
* @param {HTMLELement} element=document.documentElement
|
||||
* @param {String} castAs='string'
|
||||
* @returns {*}
|
||||
*/
|
||||
const getCSSCustomProp = (
|
||||
propKey,
|
||||
element = document.documentElement,
|
||||
castAs = "string"
|
||||
) => {
|
||||
let response = getComputedStyle(element).getPropertyValue(propKey);
|
||||
|
||||
// Tidy up the string if there's something to work with
|
||||
if (response.length) {
|
||||
response = response
|
||||
.replace(/\'|"/g, "")
|
||||
.trim();
|
||||
}
|
||||
|
||||
// Convert the response into a whatever type we wanted
|
||||
switch (castAs) {
|
||||
case "number":
|
||||
case "int":
|
||||
return parseInt(response, 10);
|
||||
case "float":
|
||||
return parseFloat(response, 10);
|
||||
case "boolean":
|
||||
case "bool":
|
||||
return response === "true" || response === "1";
|
||||
}
|
||||
|
||||
// Return the string response by default
|
||||
return response;
|
||||
};
|
||||
0
csspageweaver/plugins/imposition/stylesheet.css
Normal file
0
csspageweaver/plugins/imposition/stylesheet.css
Normal file
22
csspageweaver/plugins/imposition/template.html
Normal file
22
csspageweaver/plugins/imposition/template.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<input type="radio" id="input-spread" data-open-container="imposition-details" name="radio-imposition">
|
||||
<label for="input-spread" class="label-block">Two-page view</label>
|
||||
|
||||
<input type="radio" id="input-booklet" data-open-container="imposition-details" name="radio-imposition">
|
||||
<label for="input-booklet" class="label-block">Booklet <span></span></label>
|
||||
|
||||
<div id="imposition-details">
|
||||
|
||||
<div id="radio-imposition-pages">
|
||||
<input type="radio" id="imposition-all" name="radio-imposition-pages" value="all" checked />
|
||||
<label for="imposition-all" class="label-block">All pages</label>
|
||||
<input type="radio" id="imposition-range" name="radio-imposition-pages" value="booklet" />
|
||||
<label for="imposition-range" class="label-block">Range</label>
|
||||
</div>
|
||||
|
||||
<div id="booklet-sheets" class="panel-group-values">
|
||||
<p>from</p>
|
||||
<input type="number" id="booklet-start" name="booklet-start" min="1" max="1000" value="1">
|
||||
<p>to</p>
|
||||
<input type="number" id="booklet-end" name="booklet-end" min="1" max="1000" value="16">
|
||||
</div>
|
||||
</div>
|
||||
1
csspageweaver/plugins/inlineNotes/.gitignore
vendored
Normal file
1
csspageweaver/plugins/inlineNotes/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
77
csspageweaver/plugins/inlineNotes/README.md
Normal file
77
csspageweaver/plugins/inlineNotes/README.md
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
name: Inline notes
|
||||
tags: recommended, stable
|
||||
description: This script moves listed notes to inline elements at the place of the call.
|
||||
|
||||
---
|
||||
|
||||
# Inline notes
|
||||
|
||||
To move notes in the correct place in the page, Paged.js needs to have the note element in the flow. But in convert tools like Pandoc, it’s common to have the notes elements presented in a list with link elements in the flow pointing to the correponding note.
|
||||
|
||||
This script moves listed notes to inline elements at the place of the call.
|
||||
|
||||
|
||||
|
||||
## How to use
|
||||
|
||||
Add this folder in `csspageweaver/plugins/`.
|
||||
|
||||
Call the plugin in `csspageweaver/manifest.json`:
|
||||
|
||||
```json
|
||||
"plugins": [
|
||||
"inlineNotes",
|
||||
// other plugins ...
|
||||
],
|
||||
```
|
||||
|
||||
## Config.json
|
||||
|
||||
In `manifest.json`, you can modify/add some parameters:
|
||||
|
||||
```
|
||||
"pluginsParameters": {
|
||||
// parameters of other plugins ...
|
||||
"inlineNotes": {
|
||||
"input": ".footnote-ref",
|
||||
"containerNotes": ".footnotes"
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
- `input` → CSS selector of the original call element (by default: `.footnote-ref`)
|
||||
- `containerNotes` → CSS selector of the original container of the footnote list, this container is deleted after moving notes (by default: `#footnotes`)
|
||||
- `` → Class of the new span created for the note
|
||||
|
||||
|
||||
## Exemple
|
||||
|
||||
Before :
|
||||
|
||||
```HTML
|
||||
<p>Gutenberg in 1439 was the first European to use movable type.
|
||||
Among his many contributions to printing are: the invention of
|
||||
a process for mass-producing movable type; the use of oil-based
|
||||
ink for printing books; <a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a> adjustable molds; mechanical movable type; and the use of a wooden printing press similar to the agricultural screw presses of the period.</p>
|
||||
<aside id="#footnotes">
|
||||
<hr>
|
||||
<ol>
|
||||
<li id="fn1">Soap, Sex, and Cigarettes: A Cultural History of American Advertising By Juliann Sivulka, page 5</li>
|
||||
</ol>
|
||||
</aside>
|
||||
|
||||
```
|
||||
|
||||
|
||||
After (wiht the plugin):
|
||||
|
||||
```HTML
|
||||
<p>Gutenberg in 1439 was the first European to use movable type.
|
||||
Among his many contributions to printing are: the invention of
|
||||
a process for mass-producing movable type; the use of oil-based
|
||||
ink for printing books; <span class="inline-note" data-counter-note="1">Soap, Sex, and Cigarettes: A Cultural History of American Advertising By Juliann Sivulka, page 5</span>
|
||||
adjustable molds; mechanical movable type; and the use
|
||||
of a wooden printing press similar to the agricultural
|
||||
screw presses of the period.</p>
|
||||
```
|
||||
8
csspageweaver/plugins/inlineNotes/config.json
Normal file
8
csspageweaver/plugins/inlineNotes/config.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"name": "Inline notes",
|
||||
"description": "This script moves listed notes to inline elements at the place of the call",
|
||||
"author": ["Julie Blanc"],
|
||||
"license": "MIT License",
|
||||
"version": "1.0",
|
||||
"hook": "inlineNotes.js"
|
||||
}
|
||||
98
csspageweaver/plugins/inlineNotes/inlineNotes.js
Normal file
98
csspageweaver/plugins/inlineNotes/inlineNotes.js
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
/**
|
||||
* @name Inline Notes
|
||||
* @author Julien Bidoret
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/inlineNotes }
|
||||
*/
|
||||
|
||||
import { Handler } from '/csspageweaver/lib/paged.esm.js';
|
||||
|
||||
export default class inlineNotes extends Handler {
|
||||
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.input = cssPageWeaver.features.inlineNotes.parameters?.input || ".footnote-ref"; // ← CSS selector of the call element
|
||||
this.containerNotes = cssPageWeaver.features.inlineNotes.parameters?.containerNotes || "#footnotes"; // ← CSS selector of the container of the footnote
|
||||
this.newClass = cssPageWeaver.features.inlineNotes.parameters?.newClass || "inline-note"; // ← Class of the span create for the note
|
||||
}
|
||||
|
||||
beforeParsed(content) {
|
||||
|
||||
inlineNotesHandler({
|
||||
content: content,
|
||||
input: this.input,
|
||||
containerNotes: this.containerNotes,
|
||||
type: this.newClass
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function inlineNotesHandler(params){
|
||||
|
||||
let content = params.content;
|
||||
let input = params.input;
|
||||
let type = params.type;
|
||||
|
||||
createNotes(content, input, type);
|
||||
|
||||
let noteContainer = content.querySelector(params.containerNotes);
|
||||
if(noteContainer){
|
||||
noteContainer.remove();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function getBlocks(element){
|
||||
return element.querySelectorAll('div,p,blockquote,section,article,h1,h2,h3,h4,h5,h6,figure');
|
||||
}
|
||||
|
||||
// get only inline-level tags
|
||||
function unwrapBlockChildren(element) {
|
||||
let blocks = getBlocks(element);
|
||||
|
||||
blocks.forEach(block => {
|
||||
block.insertAdjacentHTML("beforebegin", block.innerHTML);
|
||||
block.remove();
|
||||
});
|
||||
let remainingblocks = getBlocks(element);
|
||||
if(remainingblocks.length) unwrapBlockChildren(element);
|
||||
return element;
|
||||
}
|
||||
|
||||
|
||||
function createNotes(content, input, type){
|
||||
|
||||
let calls = content.querySelectorAll(input);
|
||||
calls.forEach( (call, index) => {
|
||||
|
||||
let href = call.getAttribute('href');
|
||||
let hashIndex = href.indexOf('#');
|
||||
let selector = href.slice(hashIndex);
|
||||
|
||||
let note = content.querySelector(selector);
|
||||
if (!note) {
|
||||
console.warn('Note non trouvée pour', selector);
|
||||
return;
|
||||
}
|
||||
|
||||
let back = note.querySelector(".footnote-back");
|
||||
if(back){
|
||||
back.remove();
|
||||
}
|
||||
|
||||
let inline_note = document.createElement('span');
|
||||
inline_note.className = type;
|
||||
let num = index + 1;
|
||||
inline_note.dataset.counterNote = num;
|
||||
|
||||
inline_note.innerHTML = unwrapBlockChildren(note).innerHTML;
|
||||
call.after(inline_note);
|
||||
|
||||
call.parentElement.removeChild(call);
|
||||
|
||||
})
|
||||
}
|
||||
1
csspageweaver/plugins/marginBox/.gitignore
vendored
Normal file
1
csspageweaver/plugins/marginBox/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
10
csspageweaver/plugins/marginBox/config.json
Normal file
10
csspageweaver/plugins/marginBox/config.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"version": "1.0",
|
||||
"ui": {
|
||||
"title": "Margin boxes",
|
||||
"description": "This Toogle border around margin box",
|
||||
"toggle": true
|
||||
},
|
||||
"script": "marginBox.js",
|
||||
"stylesheet": "marginBox.css"
|
||||
}
|
||||
7
csspageweaver/plugins/marginBox/marginBox.css
Normal file
7
csspageweaver/plugins/marginBox/marginBox.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
:root {
|
||||
--color-marginBox: purple;
|
||||
}
|
||||
|
||||
.no-marginBoxes{
|
||||
--color-marginBox: transparent;
|
||||
}
|
||||
26
csspageweaver/plugins/marginBox/marginBox.js
Normal file
26
csspageweaver/plugins/marginBox/marginBox.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* @name Margin Box
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/marginBox }
|
||||
*/
|
||||
|
||||
export default function marginBoxEvents(){
|
||||
|
||||
let body = cssPageWeaver.ui.body
|
||||
|
||||
/* MARGIN BOXES ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
let marginButton = document.querySelector('#label-marginBox-toggle');
|
||||
|
||||
body.classList.add('no-marginBoxes');
|
||||
|
||||
cssPageWeaver.ui.marginBox.toggleInput.addEventListener("input", (e) => {
|
||||
if(e.target.checked){
|
||||
/* see baseline */
|
||||
body.classList.remove('no-marginBoxes');
|
||||
}else{
|
||||
/* hide baseline */
|
||||
body.classList.add('no-marginBoxes');
|
||||
}
|
||||
});
|
||||
}
|
||||
1
csspageweaver/plugins/previewPage/.gitignore
vendored
Normal file
1
csspageweaver/plugins/previewPage/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
19
csspageweaver/plugins/previewPage/config.json
Normal file
19
csspageweaver/plugins/previewPage/config.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "Preview",
|
||||
"description": "",
|
||||
"version": "1.0",
|
||||
"ui": {
|
||||
"toggle": false,
|
||||
"template": "template.html",
|
||||
"shortcut": [
|
||||
{
|
||||
"active": true,
|
||||
"tutorial": false,
|
||||
"keys": ["shiftKey", "W"],
|
||||
"description": "Toggle Preview"
|
||||
}
|
||||
]
|
||||
},
|
||||
"stylesheet": "stylesheet.css",
|
||||
"script": "event.js"
|
||||
}
|
||||
52
csspageweaver/plugins/previewPage/event.js
Normal file
52
csspageweaver/plugins/previewPage/event.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
/**
|
||||
* @name Preview page
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/previewPage }
|
||||
*/
|
||||
|
||||
export default function previewEvents(){
|
||||
const body = cssPageWeaver.ui.body
|
||||
|
||||
// set a "unique" filename based on title element, in case several books are opened
|
||||
const fileTitle = document.getElementsByTagName("title")[0].text;
|
||||
|
||||
const previewToggle = document.querySelector("#preview-toggle");
|
||||
const previewButton = document.querySelector("#button-preview");
|
||||
|
||||
// Check localStorage for user's preference and apply it
|
||||
const preference = localStorage.getItem('previewToggle' + fileTitle);
|
||||
if (preference === "preview") {
|
||||
body.classList.add('interface-preview');
|
||||
previewToggle.checked = true;
|
||||
} else {
|
||||
body.classList.remove('interface-preview');
|
||||
previewToggle.checked = false;
|
||||
}
|
||||
|
||||
function preview(){
|
||||
const isPreview = body.classList.contains('interface-preview');
|
||||
body.classList.toggle('interface-preview');
|
||||
previewToggle.checked = !isPreview;
|
||||
localStorage.setItem('previewToggle' + fileTitle, isPreview ? 'no-preview' : 'preview');
|
||||
|
||||
}
|
||||
// Toggle preview mode when the button is clicked
|
||||
previewButton.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
preview()
|
||||
});
|
||||
|
||||
// Add keydown listener based on configuration
|
||||
cssPageWeaver.features.previewPage.ui.shortcut.forEach( shortcut => {
|
||||
// if user do not have disable plugin
|
||||
if(shortcut.active){
|
||||
|
||||
// Get shortcut combinaison from config
|
||||
const keys = shortcut.keys
|
||||
|
||||
// CSS Page Weaver has a simple function to help you register your keyboard shortcut
|
||||
cssPageWeaver.helpers.addKeydownListener(keys, preview)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
39
csspageweaver/plugins/previewPage/stylesheet.css
Normal file
39
csspageweaver/plugins/previewPage/stylesheet.css
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
/* PREVIEW MODE */
|
||||
|
||||
.interface-preview {
|
||||
background-color: var(--color-preview);
|
||||
--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: var(--color-preview);
|
||||
z-index:999999;
|
||||
}
|
||||
|
||||
.interface-preview .pagedjs_marks-crop,
|
||||
.interface-preview .pagedjs_marks-crop{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.interface-preview .pagedjs_pagebox {
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
||||
.button-print{ display: none; }
|
||||
|
||||
.interface-preview{
|
||||
--color-marginBox: transparent;
|
||||
}
|
||||
|
||||
.interface-preview .grid-page{
|
||||
display: none;
|
||||
}
|
||||
31
csspageweaver/plugins/previewPage/template.html
Normal file
31
csspageweaver/plugins/previewPage/template.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<div id="buttons-preview" class="buttons-group align-right">
|
||||
|
||||
<input type="checkbox" id="preview-toggle" name="preview-toggle">
|
||||
<button id="button-preview" title="Preview">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<polyline fill="none" points=" 661,156 653,162 653,156 " stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"></polyline>
|
||||
</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"></path>
|
||||
</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"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
<button title="Print" id="button-print" onclick="window.print()" data-ready="false" data-text="Print">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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;"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
1
csspageweaver/plugins/reloadInPlace/.gitignore
vendored
Normal file
1
csspageweaver/plugins/reloadInPlace/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
17
csspageweaver/plugins/reloadInPlace/Readme.md
Normal file
17
csspageweaver/plugins/reloadInPlace/Readme.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
# Reload In Place
|
||||
|
||||
## Configuration
|
||||
|
||||
In `manifest.json`
|
||||
|
||||
```json
|
||||
"plugins":{
|
||||
"inlineNotes"
|
||||
},
|
||||
"pluginsParameters":{
|
||||
"reloadInPlace": {
|
||||
"blur": false,
|
||||
"behavior": "instant"
|
||||
}
|
||||
},
|
||||
```
|
||||
9
csspageweaver/plugins/reloadInPlace/config.json
Normal file
9
csspageweaver/plugins/reloadInPlace/config.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"name": "Reload In Place",
|
||||
"description": "A simple script to add your CSS Page Weaver project. On reload, it will make the web browser scroll to the place it was before reload. ",
|
||||
"author": ["Nicolas Taffin", "Sameh Chafik"],
|
||||
"licence": "MIT",
|
||||
"version": 2,
|
||||
"repository": "https://gitlab.com/nicolastaf/pagedjs-reload-in-place",
|
||||
"hook": "reloadInPlace.js"
|
||||
}
|
||||
202
csspageweaver/plugins/reloadInPlace/reloadInPlace.js
Normal file
202
csspageweaver/plugins/reloadInPlace/reloadInPlace.js
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
/**
|
||||
* @name Reload-in-place v2.0
|
||||
* @desc A simple script to add to 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.
|
||||
* @author Nicolas Taffin
|
||||
* @author Sameh Chafik
|
||||
* @author (adapted by) Benjamin G. <ecrire@bnjm.eu>
|
||||
* @license MIT
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/reloadInPlace }
|
||||
*/
|
||||
|
||||
|
||||
import { Handler } from '/csspageweaver/lib/paged.esm.js';
|
||||
|
||||
|
||||
export default class reloadInPlace extends Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.parameters = cssPageWeaver.features.reloadInPlace.parameters || {}
|
||||
this.isScrollBlured = this.parameters.blur || true;
|
||||
this.scrollBehavior = this.parameters.scrollBehavior || 'instant';
|
||||
|
||||
// set a "unique" filename based on title element, in case several books are opened
|
||||
this.fileTitle = document.getElementsByTagName("title")[0].text.replace(/ /g, "");
|
||||
}
|
||||
|
||||
beforeParsed() {
|
||||
// separate human / machine scroll
|
||||
this.parameters.machineScroll = false;
|
||||
|
||||
// check pagedJS ended compilation
|
||||
this.parameters.cssPageWeaverEnd = false;
|
||||
|
||||
// Make it blur if needed
|
||||
this.isBlur()
|
||||
|
||||
// Start saving scroll position early (don't wait for render to complete)
|
||||
let _ = this;
|
||||
var slowSave = this.debounce(() => {
|
||||
if(!_.parameters.machineScroll) {
|
||||
_.saveAmountScrolled();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
window.addEventListener('scroll', slowSave);
|
||||
}
|
||||
|
||||
afterParsed() {
|
||||
this.moveFast();
|
||||
}
|
||||
|
||||
afterRendered(pages) {
|
||||
this.parameters.cssPageWeaverEnd = true;
|
||||
}
|
||||
|
||||
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
|
||||
)
|
||||
}
|
||||
|
||||
saveAmountScrolled(){
|
||||
var scrollArray = [];
|
||||
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
|
||||
if (!this.parameters.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['reloadInPlace-' + this.fileTitle] = JSON.stringify(scrollArray);
|
||||
}
|
||||
}
|
||||
|
||||
isBlur(){
|
||||
// Apply a blur effect if scroll blurring is enabled
|
||||
if (this.isScrollBlured) {
|
||||
var styleEl = document.createElement('style');
|
||||
styleEl.setAttribute("data-reload-in-place", true)
|
||||
document.head.appendChild(styleEl);
|
||||
this.styleSheet = styleEl.sheet;
|
||||
this.styleSheet.insertRule('.pagedjs_pages { filter: blur(3px); }', 0);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
retrievePosition(){
|
||||
// Retrieve saved scroll data from localStorage
|
||||
var savedData = localStorage.getItem('reloadInPlace-' + this.fileTitle);
|
||||
|
||||
if (savedData) {
|
||||
// Parse the saved data to get the scroll positions
|
||||
var scrollArray = JSON.parse(savedData);
|
||||
this.scrollTop = scrollArray[0].Y;
|
||||
this.scrollLeft = scrollArray[0].X;
|
||||
} else {
|
||||
// Default scroll positions if no saved data is found
|
||||
this.scrollTop = 0;
|
||||
this.scrollLeft = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Adjusts the scroll position of the window based on saved data.
|
||||
* This function handles scrolling behavior when the document height changes,
|
||||
* ensuring the view returns to a previously saved scroll position or the bottom of the document.
|
||||
*
|
||||
* @param {Object} _ - ReloadInPlace scope
|
||||
*/
|
||||
moveFast() {
|
||||
// Set the machine scroll flag to true
|
||||
this.parameters.machineScroll = true;
|
||||
|
||||
this.retrievePosition()
|
||||
|
||||
// Get the window height
|
||||
var winheight = window.innerHeight || (document.documentElement || document.body).clientHeight;
|
||||
|
||||
let _ = this
|
||||
|
||||
// Track last scroll position to detect user scroll
|
||||
let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
// Detect user manual scroll and stop auto-scroll
|
||||
const userScrollHandler = () => {
|
||||
if (!_.parameters.machineScroll) return;
|
||||
|
||||
const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const expectedScroll = _.scrollTop > _.docheight - winheight ? _.docheight : _.scrollTop;
|
||||
|
||||
// If scroll position differs significantly from expected, user is scrolling
|
||||
if (Math.abs(currentScroll - expectedScroll) > 100 && Math.abs(currentScroll - lastScrollTop) > 50) {
|
||||
_.stopAutoScroll();
|
||||
}
|
||||
lastScrollTop = currentScroll;
|
||||
};
|
||||
|
||||
window.addEventListener('wheel', () => _.stopAutoScroll(), { once: true });
|
||||
window.addEventListener('touchstart', () => _.stopAutoScroll(), { once: true });
|
||||
|
||||
// Set up an interval to adjust the scroll position
|
||||
_.currentInterval = setInterval(() => {
|
||||
// Get the current document height
|
||||
_.docheight = _.getDocHeight();
|
||||
|
||||
// Check if the saved scroll position is beyond the current document height
|
||||
if ( _.scrollTop > 0 && _.scrollTop > _.docheight - winheight && !_.parameters.cssPageWeaverEnd) {
|
||||
// Scroll to the bottom of the document
|
||||
window.scrollTo({ left: _.scrollLeft, top: _.docheight, behavior: _.scrollBehavior });
|
||||
} else {
|
||||
// Scroll to the saved position
|
||||
window.scrollTo({ left: _.scrollLeft, top: _.scrollTop, behavior: _.scrollBehavior });
|
||||
|
||||
// Clear interval
|
||||
clearInterval(_.currentInterval);
|
||||
|
||||
// set a timeout to finalize the scroll position
|
||||
setTimeout(function () {
|
||||
window.scrollTo({ left: _.scrollLeft, top: _.scrollTop, behavior: _.scrollBehavior });
|
||||
|
||||
// Reset the machine scroll flag
|
||||
_.parameters.machineScroll = false;
|
||||
|
||||
// Remove the blur effect if it was applied
|
||||
if (_.isScrollBlured) {
|
||||
_.styleSheet.deleteRule(0);
|
||||
}
|
||||
}, 50); // Delay to start
|
||||
}
|
||||
}, 50); // Refresh frequency
|
||||
}
|
||||
|
||||
stopAutoScroll() {
|
||||
if (this.currentInterval) {
|
||||
clearInterval(this.currentInterval);
|
||||
this.currentInterval = null;
|
||||
}
|
||||
this.parameters.machineScroll = false;
|
||||
|
||||
// Remove blur if applied
|
||||
if (this.isScrollBlured && this.styleSheet && this.styleSheet.cssRules.length > 0) {
|
||||
this.styleSheet.deleteRule(0);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
};
|
||||
};
|
||||
}
|
||||
1
csspageweaver/plugins/spread/.gitignore
vendored
Normal file
1
csspageweaver/plugins/spread/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
15
csspageweaver/plugins/spread/config.json
Normal file
15
csspageweaver/plugins/spread/config.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"name": "Spread",
|
||||
"description": "",
|
||||
"version": "1.0",
|
||||
"ui": {
|
||||
"title": "Screen view",
|
||||
"description": "This Toogle single page or board view",
|
||||
"toggle": false,
|
||||
"template": "spread.html"
|
||||
},
|
||||
"stylesheet": "spread.css",
|
||||
"hook": "spread-hook.js",
|
||||
"script": "spread-ui.js"
|
||||
|
||||
}
|
||||
25
csspageweaver/plugins/spread/spread-hook.js
Normal file
25
csspageweaver/plugins/spread/spread-hook.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { Handler } from '/csspageweaver/lib/paged.esm.js';
|
||||
|
||||
export default class nrbPages extends Handler {
|
||||
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken) {
|
||||
|
||||
let nbrSpan = document.querySelector("#nrb-pages");
|
||||
let pagesDocument = document.querySelectorAll(".pagedjs_page");
|
||||
if (nbrSpan) {
|
||||
nbrSpan.innerHTML = pagesDocument.length;
|
||||
}
|
||||
}
|
||||
|
||||
afterRendered(pages){
|
||||
let nbrSpan = document.querySelector("#nrb-pages");
|
||||
if (nbrSpan) {
|
||||
nbrSpan.innerHTML = pages.length;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
38
csspageweaver/plugins/spread/spread-ui.js
Normal file
38
csspageweaver/plugins/spread/spread-ui.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* @name Spread
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/ }
|
||||
*/
|
||||
|
||||
export default function spreadEvents(){
|
||||
|
||||
const body = cssPageWeaver.ui.body
|
||||
const fileTitle = cssPageWeaver.docTitle;
|
||||
const toggleInput = document.querySelector('#spread-toggle-button')
|
||||
|
||||
/* SPREAD ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
/* Toggle spread or recto-verso */
|
||||
let preference = localStorage.getItem('spreadToggle' + fileTitle);
|
||||
|
||||
|
||||
if(preference == "spread"){
|
||||
body.classList.remove('no-spread');
|
||||
toggleInput.checked = true
|
||||
}else if(preference == "no-spread"){
|
||||
body.classList.add('no-spread');
|
||||
toggleInput.checked = false
|
||||
}
|
||||
document.querySelector("#label-spread-toggle").addEventListener("click", (e) => {
|
||||
//e.preventDefault()
|
||||
|
||||
if(body.classList.contains("no-spread")){
|
||||
body.classList.remove('no-spread');
|
||||
localStorage.setItem('spreadToggle' + fileTitle, 'spread');
|
||||
}else{
|
||||
body.classList.add('no-spread');
|
||||
localStorage.setItem('spreadToggle' + fileTitle, 'no-spread');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
33
csspageweaver/plugins/spread/spread.css
Normal file
33
csspageweaver/plugins/spread/spread.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
|
||||
@media screen, pagedjs-ignore {
|
||||
.no-spread .pagedjs_pages {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-spread .pagedjs_first_page {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.no-spread .pagedjs_page {
|
||||
margin: 0 auto;
|
||||
margin-top: 10mm;
|
||||
}
|
||||
|
||||
.no-spread .pagedjs_left_page{
|
||||
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
|
||||
}
|
||||
|
||||
.no-spread .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
|
||||
border-color: var(--pagedjs-crop-color);
|
||||
}
|
||||
|
||||
.no-spread .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
|
||||
width: var(--pagedjs-cross-size)!important;
|
||||
}
|
||||
|
||||
.no-spread .pagedjs_right_page{
|
||||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
61
csspageweaver/plugins/spread/spread.html
Normal file
61
csspageweaver/plugins/spread/spread.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<input type="checkbox" id="spread-toggle-button" name="spread-toggle">
|
||||
<div class="buttons-group">
|
||||
|
||||
<label for="spread-toggle-button" id="label-spread-toggle">
|
||||
<span id="button-spread" class="button">
|
||||
<svg width="100%" height="100%" viewBox="0 0 480 480" 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;">
|
||||
<g transform="matrix(1,0,0,1,-4,-1084)">
|
||||
<g id="spread-bis" serif:id="spread bis" transform="matrix(0.997921,0,0,1.00209,2.00416,1083)">
|
||||
<rect x="2" y="1" width="481" height="479" style="fill:none;" />
|
||||
<g transform="matrix(0.88709,0,0,0.842432,44.9417,123.556)">
|
||||
<path
|
||||
d="M249.88,336.193L249.88,282.887C249.88,280.925 251.397,279.334 253.269,279.334L275.731,279.334C277.603,279.334 279.12,280.925 279.12,282.887L279.12,336.193L463.88,336.193L463.88,20.807L396.102,20.807C394.23,20.807 392.713,19.216 392.713,17.253L392.713,-5.253C392.713,-7.216 394.23,-8.807 396.102,-8.807L478,-8.807C485.798,-8.807 492.12,-2.178 492.12,6L492.12,351C492.12,359.178 485.798,365.807 478,365.807L265,365.807C264.833,365.807 264.666,365.804 264.501,365.798L264.491,365.798C264.328,365.804 264.164,365.807 264,365.807L51,365.807C43.202,365.807 36.88,359.178 36.88,351L36.88,282.887C36.88,280.925 38.397,279.334 40.269,279.334L61.731,279.334C63.603,279.334 65.12,280.925 65.12,282.887L65.12,336.193L247.905,336.193L249.88,336.193Z" />
|
||||
</g>
|
||||
<g transform="matrix(1.00208,0,0,0.997917,8.0125,46.7815)">
|
||||
<g transform="matrix(0.885246,0,0,0.844191,-38.1475,9.93485)">
|
||||
<path
|
||||
d="M278.12,6L278.12,351C278.12,359.178 271.798,365.807 264,365.807L51,365.807C43.202,365.807 36.88,359.178 36.88,351L36.88,6C36.88,-2.178 43.202,-8.807 51,-8.807L264,-8.807C271.798,-8.807 278.12,-2.178 278.12,6ZM65.12,336.193L249.88,336.193L249.88,20.807L67.095,20.807L65.12,20.807L65.12,330.717L65.12,336.193Z" />
|
||||
</g>
|
||||
<g transform="matrix(0.885246,0,0,0.844191,151.295,9.93485)">
|
||||
<path
|
||||
d="M278.12,6L278.12,351C278.12,359.178 271.798,365.807 264,365.807L51,365.807C43.202,365.807 36.88,359.178 36.88,351L36.88,6C36.88,-2.178 43.202,-8.807 51,-8.807L264,-8.807C271.798,-8.807 278.12,-2.178 278.12,6ZM249.88,336.193L249.88,20.807L67.095,20.807L65.12,20.807L65.12,336.193L247.905,336.193L249.88,336.193Z" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="button-recto" class="button">
|
||||
<svg width="100%" height="100%" viewBox="0 0 480 480" 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;">
|
||||
<g transform="matrix(1,0,0,1,-557,-1103)">
|
||||
<g id="recto-verso-bis" serif:id="recto-verso bis"
|
||||
transform="matrix(0.997921,0,0,1.00209,555.004,1102)">
|
||||
<rect x="2" y="1" width="481" height="479" style="fill:none;" />
|
||||
<g transform="matrix(0.88709,0,0,0.842432,184.453,157.485)">
|
||||
<path
|
||||
d="M249.88,336.193L249.88,20.807L183.231,20.807C181.36,20.807 179.843,19.216 179.843,17.253L179.843,-5.253C179.843,-7.216 181.36,-8.807 183.231,-8.807L264,-8.807C271.798,-8.807 278.12,-2.178 278.12,6L278.12,351C278.12,359.178 271.798,365.807 264,365.807L51,365.807C43.202,365.807 36.88,359.178 36.88,351L36.88,281.703C36.88,279.74 38.397,278.149 40.269,278.149L61.731,278.149C63.603,278.149 65.12,279.74 65.12,281.703L65.12,336.193L247.905,336.193L249.88,336.193Z" />
|
||||
</g>
|
||||
<g transform="matrix(0.88709,0,0,0.842432,103.284,89.6269)">
|
||||
<path
|
||||
d="M249.88,336.193L249.88,20.807L182.102,20.807C180.23,20.807 178.713,19.216 178.713,17.253L178.713,-5.253C178.713,-7.216 180.23,-8.807 182.102,-8.807L264,-8.807C271.798,-8.807 278.12,-2.178 278.12,6L278.12,351C278.12,359.178 271.798,365.807 264,365.807L51,365.807C43.202,365.807 36.88,359.178 36.88,351L36.88,282.887C36.88,280.925 38.397,279.334 40.269,279.334L61.731,279.334C63.603,279.334 65.12,280.925 65.12,282.887L65.12,336.193L247.905,336.193L249.88,336.193Z" />
|
||||
</g>
|
||||
<g transform="matrix(0.88709,0,0,0.842432,21.1135,22.7665)">
|
||||
<path
|
||||
d="M278.12,6L278.12,351C278.12,359.178 271.798,365.807 264,365.807L51,365.807C43.202,365.807 36.88,359.178 36.88,351L36.88,6C36.88,-2.178 43.202,-8.807 51,-8.807L264,-8.807C271.798,-8.807 278.12,-2.178 278.12,6ZM249.88,336.193L249.88,20.807C228.051,20.807 106.85,20.807 65.12,20.807L65.12,336.193L247.905,336.193L249.88,336.193Z" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
|
||||
</label>
|
||||
|
||||
<p class="force-right">
|
||||
<span id="nrb-pages" >xx</span> pages
|
||||
</p>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue