Skip to content

pagedjs
pagedjs
Commit 96285274 authored by Julie Blanc's avatar Julie Blanc
Browse files
Options

replace flex by grid for margin top/bottom

parent 60616244
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 72 deletions
src/modules/paged-media/atpage.js
View file @ 96285274
......@@ -813,28 +813,15 @@ class AtPage extends Handler {
// check center
["top", "bottom"].forEach((loc) => {
let marginGroup = page.element.querySelector(".pagedjs_margin-" + loc);
let center = page.element.querySelector(".pagedjs_margin-" + loc + "-center.hasContent");
if (center) {
let left = page.element.querySelector(".pagedjs_margin-" + loc + "-left");
let right = page.element.querySelector(".pagedjs_margin-" + loc + "-right");
let left = page.element.querySelector(".pagedjs_margin-" + loc + "-left");
let right = page.element.querySelector(".pagedjs_margin-" + loc + "-right");
let leftContent = left.classList.contains("hasContent");
let rightContent = right.classList.contains("hasContent");
let centerWidth, leftWidth, rightWidth;
if (leftContent && !rightContent) {
right.classList.add("emptyBalance");
}
if (!leftContent && rightContent) {
left.classList.add("emptyBalance");
}
if (leftContent && rightContent) {
center.classList.add("balanceMargins");
}
// Balance Sizes
if (leftContent) {
leftWidth = window.getComputedStyle(left)["max-width"];
}
......@@ -843,42 +830,103 @@ class AtPage extends Handler {
rightWidth = window.getComputedStyle(right)["max-width"];
}
centerWidth = window.getComputedStyle(center)["max-width"];
// Over-contrained
if (centerWidth !== "none" && centerWidth !== "auto") {
right.style["width"] = "auto";
right.style["max-width"] = "none";
left.style["width"] = "auto";
left.style["max-width"] = "none";
} else if ((centerWidth === "none" || centerWidth === "auto") &&
leftContent && leftWidth !== "none" && leftWidth !== "auto" &&
rightContent && rightWidth !== "none" && rightWidth !== "auto") {
if (center) {
// TODO: convert units before comparing
let newWidth = Math.max(parseFloat(leftWidth), parseFloat(rightWidth));
console.log(marginGroup);
//marginGroup.style["grid-template-columns"] = "1fr 300px 1fr";
// Add units back
newWidth += leftWidth.replace(parseFloat(leftWidth), "");
right.style["width"] = newWidth;
right.style["max-width"] = newWidth;
// right.style["min-width"] = newWidth;
left.style["width"] = newWidth;
left.style["max-width"] = newWidth;
// left.style["min-width"] = newWidth;
centerWidth = window.getComputedStyle(center)["max-width"];
center.style["flex-basis"] = 0;
} else {
if (leftWidth !== "none" && leftWidth !== "auto") {
right.style["max-width"] = leftWidth;
if(centerWidth === "none" || centerWidth === "auto") {
/* center computed auto */
console.log("Center auto");
if(!leftContent && !rightContent){
console.log("center only");
marginGroup.style["grid-template-columns"] = "0 1fr 0";
}else if(leftContent){{}
if(!rightContent){
console.log("left + center");
if(leftWidth !== "none" && leftWidth !== "auto"){
console.log("left size + center auto");
marginGroup.style["grid-template-columns"] = leftWidth + " 1fr " + leftWidth;
}
}else{
console.log("left + center auto + right");
if(leftWidth !== "none" && leftWidth !== "auto"){
if(rightWidth !== "none" && rightWidth !== "auto"){
console.log("left size + center auto + right size");
marginGroup.style["grid-template-columns"] = leftWidth + " 1fr " + rightWidth;
}else{
console.log("left size + center auto + right auto");
marginGroup.style["grid-template-columns"] = leftWidth + " 1fr " + leftWidth;
}
}else{
console.log("left auto + center auto + right");
if(rightWidth !== "none" && rightWidth !== "auto"){
marginGroup.style["grid-template-columns"] = rightWidth + " 1fr " + rightWidth;
}
}
}
}else{
if(rightWidth !== "none" && rightWidth !== "auto"){
console.log("none + center auto + right size");
marginGroup.style["grid-template-columns"] = rightWidth + " 1fr " + rightWidth;
}
}
}else if(centerWidth !== "none" && centerWidth !== "auto"){
/* center computed size */
console.log("Center size");
if(leftContent && leftWidth !== "none" && leftWidth !== "auto"){
console.log("left size + center size");
marginGroup.style["grid-template-columns"] = leftWidth + " " + centerWidth + " 1fr";
}else if(rightContent && rightWidth !== "none" && rightWidth !== "auto"){
console.log("left size + right size");
marginGroup.style["grid-template-columns"] = "1fr " + centerWidth + " " + rightWidth;
}else{
marginGroup.style["grid-template-columns"] = "1fr " + centerWidth + " 1fr";
}
}
if (rightWidth !== "none" && rightWidth !== "auto") {
left.style["max-width"] = rightWidth;
}else{
if(leftContent){
if(!rightContent){
marginGroup.style["grid-template-columns"] = "1fr 0 0";
}else{
if(leftWidth !== "none" && leftWidth !== "auto"){
if(rightWidth !== "none" && rightWidth !== "auto"){
marginGroup.style["grid-template-columns"] = leftWidth + " 1fr " + rightWidth;
}else{
marginGroup.style["grid-template-columns"] = leftWidth + " 0 1fr";
}
}else{
if(rightWidth !== "none" && rightWidth !== "auto"){
marginGroup.style["grid-template-columns"] = "1fr 0 " + rightWidth;
}else{
marginGroup.style["grid-template-columns"] = "1fr 0 1fr";
}
}
}
}else{
if(rightWidth !== "none" && rightWidth !== "auto"){
marginGroup.style["grid-template-columns"] = "1fr 0 " + rightWidth;
}else{
marginGroup.style["grid-template-columns"] = "0 0 1fr";
}
}
}
// }
});
// check middle
......
src/polisher/base.js
View file @ 96285274
......@@ -32,10 +32,12 @@ export default `
.pagedjs_margin-top {
width: calc(var(--width) - var(--margin-left) - var(--margin-right));
height: var(--margin-top);
display: flex;
grid-column: center;
grid-row: header;
flex-wrap: nowrap;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100%;
}
.pagedjs_margin-top-left-corner-holder {
......@@ -62,33 +64,28 @@ export default `
width: var(--margin-right);
}
.pagedjs_margin-top > div {
flex-grow: 1;
position: relative;
}
.pagedjs_margin-right {
height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
width: var(--margin-right);
display: flex;
flex-direction: column;
right: 0;
grid-column: right;
grid-row: page;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 100%;
}
.pagedjs_margin-right > div {
flex-grow: 1;
position: relative;
}
.pagedjs_margin-bottom {
width: calc(var(--width) - var(--margin-left) - var(--margin-right));
height: var(--margin-bottom);
display: flex;
grid-column: center;
grid-row: footer;
flex-wrap: nowrap;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100%;
}
.pagedjs_margin-bottom-left-corner-holder {
......@@ -123,29 +120,20 @@ export default `
.pagedjs_margin-left {
height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
width: var(--margin-left);
display: flex;
flex-direction: column;
grid-column: left;
grid-row: page;
}
.pagedjs_margin-left > div {
flex-grow: 1;
position: relative;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 100%;
}
.pagedjs_page .pagedjs_margin.hasContent {
display: flex;
}
.pagedjs_page .pagedjs_margin.emptyBalance {
display: flex;
visibility: hidden;
/*display: flex;*/
width: 100%;
height: 100%;
overflow: hidden
}
.pagedjs_page .pagedjs_margin.balanceMargins {
flex: 1 0;
}
.pagedjs_page > .pagedjs_area {
grid-column: center;
......@@ -169,6 +157,7 @@ export default `
counter-reset: pages var(--page-count);
}
/*
.pagedjs_page .pagedjs_margin-top-left,
.pagedjs_page .pagedjs_margin-top-right,
.pagedjs_page .pagedjs_margin-bottom-left,
......@@ -213,6 +202,7 @@ export default `
display: none;
align-items: flex-end;
}
*/
.pagedjs_page .pagedjs_margin-top-left,
.pagedjs_page .pagedjs_margin-top-right-corner,
......
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