Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
P
pagedjs
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
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
julien
pagedjs
Commits
91719097
Commit
91719097
authored
Apr 24, 2018
by
Fred Chasen
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add support for running / element
parent
5e94943a
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
280 additions
and
25 deletions
+280
-25
chunker.js
src/chunker/chunker.js
+7
-1
section.js
src/chunker/section.js
+2
-0
base.js
src/polisher/base.js
+7
-2
polisher.js
src/polisher/polisher.js
+66
-20
sheet.js
src/polisher/sheet.js
+198
-2
No files found.
src/chunker/chunker.js
View file @
91719097
...
...
@@ -74,7 +74,7 @@ class Chunker {
this
.
styles
=
polisher
;
this
.
breaks
=
this
.
styles
&&
this
.
styles
.
breaks
;
this
.
styles
&&
this
.
styles
.
contents
(
parsed
);
this
.
styles
&&
this
.
styles
.
targetText
(
parsed
);
let
sections
;
if
(
this
.
breaks
)
{
...
...
@@ -198,6 +198,12 @@ class Chunker {
section
.
on
(
"
page
"
,
(
page
)
=>
{
this
.
styles
&&
this
.
styles
.
counters
(
this
.
pagesArea
);
this
.
emit
(
"
page
"
,
page
);
});
section
.
on
(
"
renderedPage
"
,
(
page
)
=>
{
this
.
styles
&&
this
.
styles
.
contents
(
page
.
element
);
this
.
styles
&&
this
.
styles
.
headers
(
page
.
element
);
this
.
emit
(
"
renderedPage
"
,
page
);
})
return
section
.
render
(
sectionContent
);
...
...
src/chunker/section.js
View file @
91719097
...
...
@@ -93,6 +93,8 @@ class Section {
// Layout content in the page, starting from the breakToken
breakToken
=
page
.
layout
(
content
,
breakToken
);
this
.
emit
(
"
renderedPage
"
,
page
);
yield
breakToken
;
// Stop if we get undefined, showing we have reached the end of the content
...
...
src/polisher/base.js
View file @
91719097
...
...
@@ -118,7 +118,6 @@ export default `
.page .bottom > div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
...
...
@@ -126,10 +125,16 @@ export default `
.page .right > div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.pages .left .content::after,
.pages .top .content::after,
.pages .right .content::after,
.pages .bottom .content::after {
display: block;
}
@media print {
body {
width: var(--width);
...
...
src/polisher/polisher.js
View file @
91719097
...
...
@@ -45,6 +45,8 @@ class Polisher {
let
stringSets
=
{};
let
textTargets
=
{};
let
counterTargets
=
{};
let
running
=
{};
let
elements
=
{};
originals
.
forEach
((
original
,
index
)
=>
{
let
href
=
urls
[
index
];
...
...
@@ -68,6 +70,8 @@ class Polisher {
stringSets
=
Object
.
assign
(
stringSets
,
sheet
.
stringSets
);
textTargets
=
Object
.
assign
(
textTargets
,
sheet
.
textTargets
);
counterTargets
=
Object
.
assign
(
counterTargets
,
sheet
.
counterTargets
);
running
=
Object
.
assign
(
running
,
sheet
.
running
);
elements
=
Object
.
assign
(
elements
,
sheet
.
elements
);
text
+=
sheet
.
toString
();
})
...
...
@@ -82,6 +86,9 @@ class Polisher {
this
.
textTargets
=
textTargets
;
this
.
counterTargets
=
counterTargets
;
this
.
running
=
running
;
this
.
elements
=
elements
;
return
text
;
});
}
...
...
@@ -113,22 +120,7 @@ class Polisher {
return
style
;
}
contents
(
fragment
)
{
for
(
let
name
of
Object
.
keys
(
this
.
stringSets
))
{
let
set
=
this
.
stringSets
[
name
];
let
selected
=
fragment
.
querySelector
(
set
.
selector
);
if
(
selected
)
{
let
cssVar
;
if
(
set
.
value
===
"
content
"
||
set
.
value
===
"
content(text)
"
)
{
cssVar
=
selected
.
textContent
.
replace
(
/
\\([\s\S])
|
([
"|'
])
/g
,
"
\\
$1$2
"
);
this
.
styleSheet
.
insertRule
(
`:root { --string-
${
name
}
: "
${
cssVar
}
"; }`
,
this
.
styleSheet
.
cssRules
.
length
);
}
else
{
console
.
log
(
set
.
value
+
"
needs css replacement
"
);
}
}
}
targetText
(
fragment
)
{
Object
.
keys
(
this
.
textTargets
).
forEach
((
name
)
=>
{
let
target
=
this
.
textTargets
[
name
];
let
split
=
target
.
selector
.
split
(
"
::
"
);
...
...
@@ -158,6 +150,64 @@ class Polisher {
});
}
headers
(
fragment
)
{
for
(
let
name
of
Object
.
keys
(
this
.
running
))
{
let
set
=
this
.
running
[
name
];
let
selected
=
fragment
.
querySelector
(
set
.
selector
);
if
(
selected
)
{
let
cssVar
;
if
(
set
.
identifier
===
"
running
"
)
{
// cssVar = selected.textContent.replace(/\\([\s\S])|(["|'])/g,"\\$1$2");
// this.styleSheet.insertRule(`:root { --string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
// fragment.style.setProperty(`--string-${name}`, `"${cssVar}"`);
set
.
first
=
selected
;
selected
.
style
.
display
=
"
none
"
;
}
else
{
console
.
log
(
set
.
value
+
"
needs css replacement
"
);
}
}
}
// move elements
for
(
let
selector
of
Object
.
keys
(
this
.
elements
))
{
if
(
selector
)
{
let
el
=
this
.
elements
[
selector
];
let
selected
=
fragment
.
querySelector
(
selector
);
if
(
selected
)
{
let
running
=
this
.
running
[
el
.
args
[
0
]];
if
(
running
.
first
)
{
let
clone
=
running
.
first
.
cloneNode
(
true
);
clone
.
style
.
display
=
null
;
selected
.
appendChild
(
clone
);
}
}
}
}
}
contents
(
fragment
)
{
for
(
let
name
of
Object
.
keys
(
this
.
stringSets
))
{
let
set
=
this
.
stringSets
[
name
];
let
selected
=
fragment
.
querySelector
(
set
.
selector
);
if
(
selected
)
{
let
cssVar
;
if
(
set
.
value
===
"
content
"
||
set
.
value
===
"
content(text)
"
)
{
cssVar
=
selected
.
textContent
.
replace
(
/
\\([\s\S])
|
([
"|'
])
/g
,
"
\\
$1$2
"
);
// this.styleSheet.insertRule(`:root { --string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
// fragment.style.setProperty(`--string-${name}`, `"${cssVar}"`);
set
.
first
=
cssVar
;
}
else
{
console
.
log
(
set
.
value
+
"
needs css replacement
"
);
}
}
else
{
// Use the previous values
if
(
set
.
first
)
{
fragment
.
style
.
setProperty
(
`--string-
${
name
}
`
,
`"
${
set
.
first
}
"`
);
}
}
}
}
counters
(
root
)
{
Object
.
keys
(
this
.
counterTargets
).
forEach
((
name
)
=>
{
let
target
=
this
.
counterTargets
[
name
];
...
...
@@ -200,10 +250,6 @@ class Polisher {
});
}
targetText
(
element
)
{
}
attr
(
element
,
attributes
)
{
for
(
var
i
=
0
;
i
<
attributes
.
length
;
i
++
)
{
if
(
element
.
hasAttribute
(
attributes
[
i
]))
{
...
...
src/polisher/sheet.js
View file @
91719097
...
...
@@ -39,6 +39,9 @@ class Sheet {
this
.
stringSets
=
this
.
getStringSets
(
this
.
ast
);
this
.
running
=
this
.
getRunning
(
this
.
ast
);
this
.
elements
=
this
.
getElements
(
this
.
ast
);
let
targets
=
this
.
getTargets
(
this
.
ast
);
this
.
counterTargets
=
targets
.
counterTargets
;
this
.
textTargets
=
targets
.
textTargets
;
...
...
@@ -487,7 +490,99 @@ class Sheet {
addMarginalia
(
page
,
list
,
item
)
{
for
(
let
loc
in
page
.
marginalia
)
{
let
item
=
page
.
marginalia
[
loc
];
let
item
=
csstree
.
clone
(
page
.
marginalia
[
loc
]);
csstree
.
walk
(
item
,
{
visit
:
"
Declaration
"
,
enter
:
(
node
,
item
,
list
)
=>
{
if
(
node
.
property
===
"
content
"
)
{
list
.
remove
(
item
);
}
}
});
let
selectorList
=
new
csstree
.
List
();
let
selectors
=
new
csstree
.
List
();
let
selector
=
selectorList
.
createItem
({
type
:
'
Selector
'
,
children
:
selectors
});
selectorList
.
insert
(
selector
);
selectors
.
insert
(
selectors
.
createItem
({
type
:
'
ClassSelector
'
,
name
:
'
page
'
}));
// Named page
if
(
page
.
name
)
{
name
=
page
.
name
+
"
_page
"
;
selectors
.
insert
(
selectors
.
createItem
({
type
:
'
ClassSelector
'
,
name
:
page
.
name
+
"
_page
"
}));
}
// PsuedoSelector
if
(
page
.
psuedo
)
{
selectors
.
insert
(
selectors
.
createItem
({
type
:
'
ClassSelector
'
,
name
:
page
.
psuedo
+
"
_page
"
}));
}
selectors
.
insert
(
selectors
.
createItem
({
type
:
'
Combinator
'
,
name
:
"
"
}));
selectors
.
insert
(
selectors
.
createItem
({
type
:
'
ClassSelector
'
,
name
:
loc
}));
selectors
.
insert
(
selectors
.
createItem
({
type
:
'
Combinator
'
,
name
:
"
>
"
}));
selectors
.
insert
(
selectors
.
createItem
({
type
:
'
ClassSelector
'
,
name
:
"
content
"
}));
// selectors.insert(selectors.createItem({
// type: 'PseudoElementSelector',
// name: "after",
// children: null
// }));
let
rule
=
list
.
createItem
({
type
:
'
Rule
'
,
prelude
:
{
type
:
'
SelectorList
'
,
children
:
selectorList
},
block
:
item
});
list
.
append
(
rule
);
}
// Just content
for
(
let
loc
in
page
.
marginalia
)
{
let
content
=
csstree
.
clone
(
page
.
marginalia
[
loc
]);
csstree
.
walk
(
content
,
{
visit
:
"
Declaration
"
,
enter
:
(
node
,
item
,
list
)
=>
{
if
(
node
.
property
!==
"
content
"
)
{
list
.
remove
(
item
);
}
}
});
let
selectorList
=
new
csstree
.
List
();
let
selectors
=
new
csstree
.
List
();
...
...
@@ -552,7 +647,7 @@ class Sheet {
type
:
'
SelectorList
'
,
children
:
selectorList
},
block
:
item
block
:
content
});
list
.
append
(
rule
);
...
...
@@ -594,6 +689,103 @@ class Sheet {
return
stringSetSelectors
;
}
getRunning
(
ast
)
{
let
runningSelectors
=
{};
csstree
.
walk
(
ast
,
{
visit
:
'
Rule
'
,
enter
:
(
node
,
item
,
list
)
=>
{
csstree
.
walk
(
node
,
{
visit
:
'
Declaration
'
,
enter
:
(
declaration
,
dItem
,
dList
)
=>
{
if
(
declaration
.
property
===
"
position
"
)
{
let
selector
=
csstree
.
generate
(
node
.
prelude
);
let
identifier
=
declaration
.
value
.
children
.
first
().
name
if
(
identifier
===
"
running
"
)
{
let
value
;
csstree
.
walk
(
declaration
,
{
visit
:
'
Function
'
,
enter
:
(
node
,
item
,
list
)
=>
{
value
=
node
.
children
.
first
().
name
;
}
});
runningSelectors
[
value
]
=
{
identifier
:
identifier
,
value
:
value
,
selector
:
selector
}
}
}
}
});
}
});
return
runningSelectors
;
}
getElements
(
ast
)
{
let
elements
=
{};
csstree
.
walk
(
ast
,
{
visit
:
'
Rule
'
,
enter
:
(
node
,
item
,
list
)
=>
{
csstree
.
walk
(
node
,
{
visit
:
'
Declaration
'
,
enter
:
(
declaration
,
dItem
,
dList
)
=>
{
if
(
declaration
.
property
===
"
content
"
)
{
// Handle Raw
// element(x) is not parsed
csstree
.
walk
(
declaration
,
{
visit
:
'
Raw
'
,
enter
:
(
funcNode
,
fItem
,
fList
)
=>
{
if
(
funcNode
.
value
.
indexOf
(
"
element
"
)
>
-
1
)
{
let
selector
=
csstree
.
generate
(
node
.
prelude
);
let
parsed
=
funcNode
.
value
.
match
(
/
([^
(
]
+
)\(([^
)
]
+
)\)
/
);
let
func
=
parsed
[
1
];
let
value
=
funcNode
.
value
;
let
args
=
[];
if
(
parsed
.
length
>=
3
)
{
args
.
push
(
parsed
[
2
]);
}
// we only handle first for now
let
style
=
"
first
"
;
selector
.
split
(
"
,
"
).
forEach
((
s
)
=>
{
// remove before / after
s
=
s
.
replace
(
/::after|::before/
,
""
);
elements
[
s
]
=
{
func
:
func
,
args
:
args
,
value
:
value
,
style
:
style
||
"
first
"
,
selector
:
s
,
fullSelector
:
selector
}
});
}
}
});
}
}
})
}
});
return
elements
;
}
getTargets
(
ast
)
{
let
textTargets
=
{};
let
counterTargets
=
{};
...
...
@@ -721,6 +913,10 @@ class Sheet {
if
(
func
.
name
===
"
target-counter
"
)
{
// console.log(func);
}
if
(
func
.
name
===
"
element
"
)
{
console
.
log
(
"
element
"
,
func
);
}
}
});
}
...
...
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