avoid JQuery duplication

getnikola · Sep 12, 2015 · 86ad680 · 86ad680
1 parent 90e2e87
commit 86ad680
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 9 deletions.
diff --git a/listings/book.tmpl b/listings/book.tmpl
@@ -6,8 +6,6 @@
 
 <%block name="extra_head">
     ${parent.extra_head()}
-    <script src="/assets/js/jquery.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
     <link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
     <style>
         .smallcaps {
@@ -81,6 +79,10 @@
     </div>
     </div>
 </article>
+</%block>
+
+<%block name="extra_js">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
     <script>
         $('#scrolling-cont').flowtype({
             minimum: 500,

diff --git a/listings/book2.tmpl b/listings/book2.tmpl
@@ -6,8 +6,6 @@
 
 <%block name="extra_head">
     ${parent.extra_head()}
-    <script src="/assets/js/jquery.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
     <link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
     <style>
         .smallcaps {
@@ -81,6 +79,10 @@
     </div>
     </div>
 </article>
+</%block>
+
+<%block name="extra_js">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
     <script>
         $('#scrolling-cont').flowtype({
             minimum: 500,

diff --git a/stories/creating-a-custom-page.rst b/stories/creating-a-custom-page.rst
@@ -114,7 +114,26 @@ per line. We *could* tweak that using CSS font sizes, but let's go crazy and use
 
 Why FlowType.JS? It dynamically adjust the font size so that columns always have the right font size for
 their width. That's just nice. To do that, we need to add JQuery and run a little JS in a ``<script>``
-tag at the end of the template.
+tag at the end of the page.
+
+For that, the template offers the ``extra_js`` block. Since the bootstrap3 theme we are using already
+loads JQuery, there is no need to do that, so it's just a matter of loading FlowType.JS and
+initializing it:
+
+.. code:: javascript+mako
+
+    <%block name="extra_js">
+        <script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
+        <script>
+            $('#scrolling-cont').flowtype({
+                minimum: 500,
+                maximum: 1200,
+                minFont: 20,
+                maxFont: 40,
+                fontRatio: 50
+            });
+        </script>
+    </%block>
 
 Figures: figures and multicolumn layout don't go along very well, they may even get split between columns!
 The easiest solution is to make them fit in a "page", so, some more CSS for that.

diff --git a/templates/book.tmpl b/templates/book.tmpl
@@ -6,8 +6,6 @@
 
 <%block name="extra_head">
     ${parent.extra_head()}
-    <script src="/assets/js/jquery.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
     <link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
     <style>
         .smallcaps {
@@ -81,6 +79,10 @@
     </div>
     </div>
 </article>
+</%block>
+
+<%block name="extra_js">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
     <script>
         $('#scrolling-cont').flowtype({
             minimum: 500,

diff --git a/templates/book2.tmpl b/templates/book2.tmpl
@@ -6,8 +6,6 @@
 
 <%block name="extra_head">
     ${parent.extra_head()}
-    <script src="/assets/js/jquery.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
     <link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
     <style>
         .smallcaps {
@@ -81,6 +79,10 @@
     </div>
     </div>
 </article>
+</%block>
+
+<%block name="extra_js">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
     <script>
         $('#scrolling-cont').flowtype({
             minimum: 500,