avoid JQuery duplication

ralsina · ralsina · commit 86ad680790ad · 2015-09-12T20:59:43.000-03:00
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,
