Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
pagedjs
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
160
Issues
160
List
Boards
Labels
Milestones
Merge Requests
12
Merge Requests
12
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Tools
pagedjs
Commits
96285274
Commit
96285274
authored
Aug 03, 2018
by
Julie Blanc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
replace flex by grid for margin top/bottom
parent
60616244
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
110 additions
and
72 deletions
+110
-72
atpage.js
src/modules/paged-media/atpage.js
+91
-43
base.js
src/polisher/base.js
+19
-29
No files found.
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,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment