add filter by level

Author: jeremejazz

css/pythonbooks.css

@@ -1233,12 +1233,32 @@ a.jsbookslinks {
 }
 .pythonbooks {
   background-color: transparent;
-  margin: 0 0 30px;
+  margin: 25px 0 5px;
 }
 .pythonbooks > * {
   display: inline;
   margin-right: 10px;
 }
+#filterBy {
+  float: left;
+  overflow: hidden;
+  margin: 0 0 30px;
+}
+#filterBy li {
+  float: left;
+  margin: 0 0 0 10px;
+  list-style: none;
+}
+#filterBy li:first-child {
+  margin-left: 0;
+}
+#filterBy a {
+  color: #0b4d84;
+}
+ #filterBy .active {
+  color: #2f99f1;
+}
+
 .booksection {
   margin-bottom: 30px;
 }
@@ -1325,19 +1345,19 @@ hr {
   border-top: 1px solid #dfdddd;
   border-bottom: 1px solid white;
 }
-ul {
+ul#social_buttons {
   list-style-type: none;
   position: absolute;
   top: 50%;
   margin-top: -10px;
   right: 40px;
   height: 20px;
 }
-ul li {
+ul#social_buttons li {
   display: inline;
   height: 20px;
 }
-ul li a {
+ul#social_buttons li a {
   vertical-align: top;
   color: grey;
   text-shadow: 1px 0 0 rgba(255, 255, 255, 0.4);
@@ -1348,7 +1368,7 @@ ul li a {
   -ms-transition: all .2s linear;
   transition: all .2s linear;
 }
-ul li a:hover {
+ul#social_buttons li a:hover {
   text-decoration: none;
   color: black;
   text-shadow:none;

index.html

@@ -31,7 +31,7 @@
         <img src="./img/logo_pythonbooks.png" alt="python tutorials" width="300" height="50">
         <h1>The best free Python resources</h1>
         <a href="http://www.revolunet.com" target="_blank" title="revolunet" id="headerlink">by revolunet - rich web apps for desktop and mobile</a>
-        <ul>
+        <ul id="social_buttons">
             <li>
                 <a href="https://twitter.com/share" class="twitter-share-button" data-text="Here are the best Python ressources to learn #python for free ! #webdevelopment #python" data-via="revolunet"></a>
                 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
@@ -54,7 +54,24 @@ <h1>The best free Python resources</h1>
             </div>
         </div>
         -->
-        <p>&nbsp;</p>
+        <div class="row">
+            <div class="pythonbooks span12">
+                <p>See also :</p>
+                <a href="http://jsbooks.revolunet.com/" target="_blank">
+                    <img src="./img/logo_jsbooks.png" alt="JS Books" title="Learn JS for free !" width="" height="16">
+                </a>
+            </div>
+
+            <div class="span12 row-fluid">
+                <p class="span1">Filter by :</p>
+                <ul id="filterBy">
+                    <li><a href="#" data-level="any" class="active" title="filter books by All">All</a></li>
+                    <li><a href="#" data-level="Beginner" title="filter books by Beginner">Beginner</a></li>
+                    <li><a href="#" data-level="Intermediate" title="filter books by Intermediate">Intermediate</a></li>
+                    <li><a href="#" data-level="Advanced" title="filter books by Advanced">Advanced</a></li>
+                </ul>
+            </div>
+        </div>
 
         <!-- ///////// BOOKS -->
         <div class="row" id="issueswrap"></div>
@@ -85,12 +102,37 @@ <h1>The best free Python resources</h1>
       return (Math.round(Math.random())-0.5);
     }
 
+    function filterBy() {
+        var // var's sort by
+            active = 'active',
+            btFilterBy = $('#filterBy').find('a'),
+            booksection = $('.booksection');
+
+        // interaction filter by level
+        btFilterBy.on('click', function(e) {
+            e.preventDefault();
+            var level = $(this).data('level');
+            if (level==='any') {
+                // restore all books
+                booksection.show();
+            } else {
+                booksection.not('.' + level).fadeOut('fast');
+                booksection.filter('.' + level).fadeIn('fast');
+            }
+
+            btFilterBy.removeClass(active);
+            $(this).addClass(active);
+        });
+    }
+
+
     $(document).ready(function() {
       $.getJSON('./issues.json?' + Math.random(), function(data) {
         var template = $('#booktpl').html();
         data.books.sort(randOrd);
         var html = Mustache.to_html(template, data);
         $('#issueswrap').html(html);
+                    filterBy();
       });
       $('#mod_infos').hide();
       $('a.#infos').on('click', function(){
@@ -101,7 +143,7 @@ <h1>The best free Python resources</h1>
 
     <script id="booktpl" type="text/template">
         {{#books}}
-         <div class="span4 booksection">
+         <div class="span4 booksection {{ level }}">
           <a target="_blank" href="{{url}}">
             <div class="view"></div>
             <div title="{{ title }}" id="cover" style="background:black url('{{cover}}') no-repeat center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;">