Commit 1bfe1dff authored by gijs's avatar gijs
Browse files

Editor

parent f47980bc
(function () {
var templates = [
];
function generateGridRowsDeclaration (rows, pages) {
var declaration = '';
class GridEditor {
constructor (root, pageCount) {
this.root = root;
this.gridRowCount = parseInt(getComputedStyle(this.root).getPropertyValue('--rows'));
this.gridColumnCount = parseInt(getComputedStyle(this.root).getPropertyValue('--columns'));
this.pageCount = pageCount;
this.draw();
}
for (var p = 1; p <= pages; p++) {
if (p == 1) {
declaration = '[page-1-sheet-start page-1-padding-top start] var(--padding-top)\n';
templates = [
function (page) {
var textBlock = document.createElement('section');
textBlock.classList.add('textblock');
textBlock.dataset.flowFrom = 'text-flow-1';
textBlock.style.gridRow = 'page-' + page + '-start / page-' + page + '-end';
textBlock.style.gridColumn = 'span 2 / right';
return [ textBlock ];
}
for (var r = 1; r <= rows; r++) {
var rowLineName = 'page-' + p + '-' + r;
]
addElement (element) {
this.root.appendChild(element);
}
generateGridRowsDeclaration () {
var declaration = '';
for (let p = 1; p <= this.pageCount; p++) {
if (p == 1) {
declaration = '[page-1-sheet-start page-1-padding-top start] var(--padding-top)\n';
}
if (r == 1) {
rowLineName += ' page-' + p + '-start'
for (let r = 1; r <= this.gridRowCount; r++) {
let rowLineName = 'page-' + p + '-' + r;
if (r == 1) {
rowLineName += ' page-' + p + '-start'
}
declaration += '[' + rowLineName + '] calc((var(--sheet-height) - var(--padding-top) - var(--padding-bottom)) / var(--rows))\n';
}
declaration += '[' + rowLineName + '] var(--row-height)\n';
}
declaration += '[page-' + p + '-end page-' + p + '-padding-bottom] var(--padding-bottom)\n';
if (p == pages) {
// Last page. Add 'final' line
declaration += '[page-' + p + '-sheet-end end]'
} else {
// Add line for end of current page and start of the next one
declaration += '[page-' + p + '-sheet-end page-' + (p + 1) + '-sheet-start page-' + (p + 1) + '-padding-top] var(--padding-top)\n';
declaration += '[page-' + p + '-end page-' + p + '-padding-bottom] var(--padding-bottom)\n';
if (p == this.pageCount) {
// Last page. Add 'final' line
declaration += '[page-' + p + '-sheet-end end]'
} else {
// Add line for end of current page and start of the next one
declaration += '[page-' + p + '-sheet-end page-' + (p + 1) + '-sheet-start page-' + (p + 1) + '-padding-top] var(--padding-top)\n';
}
}
return declaration;
}
return declaration;
}
function setPages () {
var pageCount = 3,
container = document.querySelector('.grid--container'),
rowsDeclaration = generateGridRowsDeclaration(8, pageCount),
pageSeparators = document.querySelectorAll('.page-separator'),
textBlocks = document.querySelectorAll('.textblock');
setGridRowCount (rowCount) {
this.gridRowCount = rowCount;
this.root.style.setProperty('--rows', rowCount)
}
for (var s = (pageSeparators.length - 1); s > -1 ; s--) {
pageSeparators[s].remove();
setGridColumnCount (columnCount) {
this.gridColumnCount = columnCount;
this.root.style.setProperty('--columns', columnCount);
}
for (var t = (textBlocks.length - 1); t > -1; t--) {
textBlocks[t].remove();
setPageCount (pageCount) {
this.pageCount = pageCount;
}
container.style.gridTemplateRows = rowsDeclaration;
for (var p = 1; p <= pageCount; p++) {
var textBlock = document.createElement('section');
textBlock.classList.add('textblock');
textBlock.dataset.flowFrom = 'text-flow-1';
textBlock.style.gridRow = 'page-' + p + '-start / page-' + p + '-end';
textBlock.style.gridColumn = 'span 2 / right';
container.appendChild(textBlock);
var separatorStart = document.createElement('div');
separatorStart.classList.add('page-separator');
separatorStart.style.gridRow = 'page-' + p + '-sheet-start'
container.appendChild(separatorStart);
var separatorStart = document.createElement('div');
separatorStart.classList.add('page-separator');
separatorStart.style.gridRow = 'span 1 / page-' + p + '-sheet-end'
container.appendChild(separatorStart);
draw () {
let rowsDeclaration = this.generateGridRowsDeclaration(),
pageSeparators = this.root.querySelectorAll('.page-separator'),
textBlocks = this.root.querySelectorAll('.textblock');
for (let s = (pageSeparators.length - 1); s > -1 ; s--) {
pageSeparators[s].remove();
}
for (let t = (textBlocks.length - 1); t > -1; t--) {
textBlocks[t].remove();
}
this.root.style.gridTemplateRows = rowsDeclaration;
for (let p = 1; p <= this.pageCount; p++) {
const pageElements = this.templates[0](p);
pageElements.forEach((e) => { this.addElement(e) });
const separatorStart = document.createElement('div');
separatorStart.classList.add('page-separator');
separatorStart.style.gridRow = 'page-' + p + '-sheet-start'
this.addElement(separatorStart);
const separatorEnd = document.createElement('div');
separatorEnd.classList.add('page-separator');
separatorEnd.style.gridRow = 'span 1 / page-' + p + '-sheet-end'
this.addElement(separatorEnd);
}
}
}
window.setPages = setPages;
window.GridEditor = GridEditor
})();
\ No newline at end of file
......@@ -188,6 +188,10 @@
</style>
</head>
<body>
<label>Pages: <input type="number" id="input--page-count" min="1" /></label>
<label>Columns: <input type="number" id="input--column-count" min="1" /></label>
<label>Rows: <input type="number" id="input--row-count" min="1" /></label>
<section class="grid--container">
<figure><img src="../../losseau/photos/Losseau-000.jpg" /></figure>
<figure><img src="../../losseau/photos/Losseau-001.jpg" /></figure>
......@@ -284,7 +288,29 @@
</script> -->
<script src="generateCSS.js"></script>
<script>
setPages();
// setPages(8, 3);
editor = new GridEditor(document.querySelector('.grid--container'), 3);
inputColumnCount = document.getElementById('input--column-count');
inputColumnCount.value = editor.gridColumnCount;
inputColumnCount.addEventListener('change', function () {
editor.setGridColumnCount(this.value);
editor.draw();
});
inputRowCount = document.getElementById('input--row-count');
inputRowCount.value = editor.gridRowCount;
inputRowCount.addEventListener('change', function () {
editor.setGridRowCount(this.value);
editor.draw();
});
inputPageCount = document.getElementById('input--page-count');
inputPageCount.value = editor.pageCount;
inputPageCount.addEventListener('change', function () {
editor.setPageCount(this.value);
editor.draw();
});
</script>
<script src="css-regions-polyfill.min.js"></script>
<script src="grid.js"></script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment