evnbr/bindery

Creating a custom ruleset for pages does not seem to apply the rule

Closed this issue · 6 comments

acgillette commented

Hello! Really enjoy the concept of this library. I can't quite seem to get this functionality working, there's not much documentation on createRules so I'm not sure if I'm doing something incorrectly.

Describe the bug
Following the example here, I attempted to make my own custom ruleset to modify the background of the title page to a gradient. However I can't seem to get it to work.

To Reproduce
Here is my js file at the moment:
`let breakRule = Bindery.PageBreak({
selector: '.page',
position: 'before',
});

let fullBleedRule = Bindery.FullBleedPage({
selector: '.big-figure',
continue: 'same',
});

let spreadRule = Bindery.FullBleedSpread({
selector: '.full-spread',
});

let pageBackgroundRules = Bindery.createRule({
eachPage: function(page, book) {
if(page.number === 1) {
page.background.style.backgroundColor = "linear-gradient(to bottom, #6A82FB, #FC5C7D)";
}
}
});

Bindery.makeBook({
content: {
selector: '#content',
url: 'book_content.html',
rules: [ breakRule, spreadRule, fullBleedRule, pageBackgroundRules ],
}
});`

Expected behavior
For background to be modified. I also tried directly copying and pasting the original rainbowRules example and that also did not work.

Desktop (please complete the following information):

  • OS & Browser: Firefox 76.0.1, macOS 10.15.7
  • bindery.js version: latest min.js downloaded from site.
    Additional context
    Add any other context about the problem here.
evnbr commented

Hi @acgillette ! Yeah createRule is very poorly documented because in all honesty it is badly designed code and doesn't work very well :( . I am planning to replace with a different api that hopefully makes this scenario easier.

I don't see anything that looks obviously wrong with the code you shared. I think my 2 guesses are either some of the rules are conflicting with each other (does it repro if you use just use the one rule itself?) or that there's something in your book's book_content.html that bindery isn't handling correctly (does it repro with any trivial content?). If the rainbowRules example also doesn't work, suspect it is the latter.

Either way it sounds like a bug, hopefully we can narrow down. If you are able to share the full working example with the content you're using, i'm happy to take a look too.

acgillette commented

Thank you for responding! I don't have my code uploaded but here is my index html, book_content and main.js

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="../bindery.min.js"></script>
    <link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
</head>
<body>

<script src='main.js'></script>
</body>
</html>

book_content.html

<div id="content">
    <div class="big-figure title-page">
        <h1>ROOT ANGEL</h1>
        <img src="assets/anangel1.gif" width="154" height="244" />
        <h3>Issue One</h3>
    </div>
</div>

main.js

let breakRule = Bindery.PageBreak({
    selector: '.page',
    position: 'before',
});

let fullBleedRule = Bindery.FullBleedPage({
    selector: '.big-figure',
    continue: 'same',
});
  
let spreadRule = Bindery.FullBleedSpread({
    selector: '.full-spread',
});

let pageBackgroundRules = Bindery.createRule({
     eachPage: function(page, book) {
         if(page.number === 1) {
             page.background.style.backgroundColor = "linear-gradient(to bottom, #6A82FB, #FC5C7D)";
         } 
     }
});

Bindery.makeBook({
    content: {
      selector: '#content',
      url: 'book_content.html',
      rules: [ breakRule, spreadRule, fullBleedRule, pageBackgroundRules ],
    }
});

I also noticed when placing a console log inside the eachPage callback it never seemed to fire. Not sure if that's due to how Bindery works or a sign of the rule not taking. Looking at the source code I didn't see a console error about the rule failing.

evnbr commented

Thanks! Ah didn't realize before without the indentation in your post above, but I do see one typo in your code right off the bat.

You have the rules inside the content value:

Bindery.makeBook({
    content: {
      selector: '#content',
      url: 'book_content.html',
      rules: [ breakRule, spreadRule, fullBleedRule, pageBackgroundRules ], // <-- ❌
    }
});

But rules is a top-level option, and content is just the selector and url. So it should look like this instead:

Bindery.makeBook({
    content: {
      selector: '#content',
      url: 'book_content.html',
   },
   rules: [ breakRule, spreadRule, fullBleedRule, pageBackgroundRules ], // <-- ✅
});
evnbr commented

One other note: I believe if you're using a gradient, you need to use background rather than backgroundColor

// This doesn't work
page.background.style.backgroundColor = "linear-gradient(to bottom, #6A82FB, #FC5C7D)";

// This does work
page.background.style.background = "linear-gradient(to bottom, #6A82FB, #FC5C7D)";

with those two changes, it looks like the everything in the rule was set up correctly:
image

acgillette commented

Thank you so much! This worked! Gosh what a silly mistake I didn't catch. Thanks for the clarification :) For future reference, is RuleSet.ts where the interface for making a custom rule is? Wasn't quite sure from poking at the source code.

evnbr commented

Sure thing, glad that helped! Will look into throwing an error or warning.

No great documentation for creating a custom rule just yet, as custom rule system is a bit in flux, but I am happy to talk through if you have something specific in mind— mind creating a separate issue for that?