Basic JS usage¶
It’s an adaptation of following example:
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetoggle
from yawrap import Yawrap, ExternalJs, EmbedCss, EmbedJs, BODY_END
class MyPageTemplate(Yawrap):
resources = [
ExternalJs("https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"),
EmbedCss("""\
body {
padding: 12px;
font-family: helvetica, sans-serif;
font-size: 14px;
}
.box {
display: inline-block;
height: 80px;
margin: 8px;
padding: 8px;
width: 80px;
}"""),
EmbedJs("""\
$("button").click(function(){
$("#red-box").fadeToggle();
$("#green-box").fadeToggle("slow");
$("#blue-box").fadeToggle(3000);
});""", placement=BODY_END),
]
def _create_box(self, name, color):
style = "background-color:{};".format(color)
with self.tag('div', id=name, klass="box", style=style):
self.text(name)
def fill_with_content(self):
with self.tag("h2"):
self.text("Demonstrate a simple JavaScript.")
with self.tag('p'):
self.text("fadeToggle() operating with different speed parameters.")
with self.tag('button'):
self.text("Click to fade in/out boxes")
with self.tag("div"):
self._create_box('red-box', "red")
self._create_box('green-box', "#0f0")
self._create_box('blue-box', "#0a1cf0")
def create_page(output_file_path):
doc = MyPageTemplate(output_file_path, "Name of the page")
doc.fill_with_content()
doc.render()
# that's it
Will create a page as below. Note that the placement=BODY_END
in EmbedJs
call caused the script to
be placed at the end. Withouth that argument it would get into head
section.
That looks like this: