From 3e330a40b5b09b49823653eca11000947f09e4da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lucas?= <sebastien@slucas.fr>
Date: Wed, 20 Jun 2012 22:01:19 +0200
Subject: [PATCH] Add some sorting

---
 images/sort32.png         | Bin 0 -> 764 bytes
 index.php                 |  21 +++++++-----
 js/jquery.sortElements.js |  69 ++++++++++++++++++++++++++++++++++++++
 style.css                 |   4 +--
 4 files changed, 84 insertions(+), 10 deletions(-)
 create mode 100644 images/sort32.png
 create mode 100644 js/jquery.sortElements.js

diff --git a/images/sort32.png b/images/sort32.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6fe3b60e6a4c2df257e430051817bc40e694b5c
GIT binary patch
literal 764
zcmV<Y0t5YtP)<h;3K|Lk000e1NJLTq001BW001Be0ssI2{21+{00006bW%=J00000
z003^L2ax~(010qNS#tmYBVPajBVPgTz&51-00NvzL_t(|oZVKvPwG$<KRn;S!bbu@
z!e>Hoa3Q$pM8M!+!bDt1*ce?|7#v(61QH5^A#N<j!NI^r9QhN7nwZeu#9Cz_Mi)Lx
zZ{KjAwXZEL^*xvOTYB%g_nhB3zviACfNzF{eDe8xC=>z!j4`o@q9}?YSqp+d7MiD$
zQGSXszPY)fY5F%oDwXQ>dKQaC!7oKIi@UqKWHLFQ&o{^(A>{FRVzC&;7-K950yYoH
zi|6@VF2}O$r$hi?v)KlNf#2^po3;9WtJSJhDrEhKCj0yQ7Z(?1)lhIeJUkp89?s`;
zvfYs1LkRhNzU}R8vzkcYdA?96JUu;0F_nMSZnyXQ{msqIHS<;A{QSIDtH~`&0su&-
z)9rR!hhP=QXf(=ZvywOj8|r%u!vurDXf$dlh(es><71BF6wx#)005`cd3}BDa=BI|
zt462Op(sji*QfvhX0sW~vIhqT7-RA*^+D5gsZ^34yfFa)Fboq8hr{8pVf5v4Su7US
z;t>4Qsk&aT$K!E_!=ZBr04^^thr{8j)0Gtfz-%@fkH?8bLMMHM(CO)^rZ~m~06^1p
zBoYY(0;|M1IXQWLe%6WbL!STun$70x>+4brS65fJx3~K41{DCnbUK|(CVP8(QsU%6
zJU%{Ft5qFw)+GP{hGC-7sMqTy1fnPkf>17(UtV4eeT^j|I6FIgdwb(Q(Cv2b@9)=f
zT&n^Am`<nf@9#T1I~Ze*<0y(U6vrF^03d|6wzga@SEJDwkH_mfnt<EwJ~}%3me5~@
zb~jaHcXv0F$;d6`a(S^>7&_|pA~~#9E9u^!si|h1zak)wLE6d(uYW@zilRhdYOXO?
u!50R-b$_zmZg;!gatlHTe+;AlHGTmV8-f#sMO8ll0000<MNUMnLSTX;6i_n&

literal 0
HcmV?d00001

diff --git a/index.php b/index.php
index f6d87d4..ce1b5bf 100644
--- a/index.php
+++ b/index.php
@@ -31,6 +31,7 @@
     <title><?php echo $currentPage->title ?></title>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
     <script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>
+    <script type="text/javascript" src="<?php echo getUrlWithVersion("js/jquery.sortElements.js") ?>"></script>
     <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.0.6" media="screen" />
     <link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("style.css") ?>" media="screen" />
     <script type="text/javascript">
@@ -42,6 +43,12 @@
                 return false;
             });
             
+            $("#sort").click(function(){
+                $('.book').sortElements(function(a, b){
+                    return $(a).find ("." + $("#sortchoice").val()).text() > $(b).find ("." + $("#sortchoice").val()).text() ? 1 : -1;
+                });
+            });
+            
             $(".fancycover").fancybox({
                 'type' : 'image',
                 openEffect  : 'none',
@@ -97,13 +104,11 @@
                 <input type="image" src="images/search32.png" alt="Search" />
             </form>
             <form action="index.php?page=9" method="get">
-                <select>
-                    <option value="volvo">Volvo</option>
-                    <option value="saab">Saab</option>
-                    <option value="mercedes">Mercedes</option>
-                    <option value="audi">Audi</option>
+                <select id="sortchoice">
+                    <option value="st"><?php echo localize("bookword.title") ?></option>
+                    <option value="sa"><?php echo localize("authors.title") ?></option>
                 </select> 
-                <input type="image" src="images/search32.png" alt="Search" />
+                <img id="sort" src="images/sort32.png" alt="Sort" />
             </form>
         </div>
     </div>
@@ -152,8 +157,8 @@
             </div>
             <div class="bookdetail">
                 <a class="navigation" href="bookdetail.php?id=<?php echo $entry->book->id ?>" />
-                <div class="entryTitle"><?php echo htmlspecialchars ($entry->title) ?></div>
-                <div class="entryContent"><?php echo localize("authors.title") . " : " . htmlspecialchars ($entry->book->getAuthorsName ()) ?></div>
+                <div class="entryTitle st"><?php echo htmlspecialchars ($entry->title) ?></div>
+                <div class="entryContent sa"><?php echo localize("authors.title") . " : " . htmlspecialchars ($entry->book->getAuthorsName ()) ?></div>
                 <div class="entryContent"><?php echo localize("tags.title") . " : " . htmlspecialchars ($entry->book->getTagsName ()) ?></div>
             <?php
                 $serie = $entry->book->getSerie ();
diff --git a/js/jquery.sortElements.js b/js/jquery.sortElements.js
new file mode 100644
index 0000000..bf1902d
--- /dev/null
+++ b/js/jquery.sortElements.js
@@ -0,0 +1,69 @@
+/**
+ * jQuery.fn.sortElements
+ * --------------
+ * @author James Padolsey (http://james.padolsey.com)
+ * @version 0.11
+ * @updated 18-MAR-2010
+ * --------------
+ * @param Function comparator:
+ *   Exactly the same behaviour as [1,2,3].sort(comparator)
+ *   
+ * @param Function getSortable
+ *   A function that should return the element that is
+ *   to be sorted. The comparator will run on the
+ *   current collection, but you may want the actual
+ *   resulting sort to occur on a parent or another
+ *   associated element.
+ *   
+ *   E.g. $('td').sortElements(comparator, function(){
+ *      return this.parentNode; 
+ *   })
+ *   
+ *   The <td>'s parent (<tr>) will be sorted instead
+ *   of the <td> itself.
+ */
+jQuery.fn.sortElements = (function(){
+    
+    var sort = [].sort;
+    
+    return function(comparator, getSortable) {
+        
+        getSortable = getSortable || function(){return this;};
+        
+        var placements = this.map(function(){
+            
+            var sortElement = getSortable.call(this),
+                parentNode = sortElement.parentNode,
+                
+                // Since the element itself will change position, we have
+                // to have some way of storing it's original position in
+                // the DOM. The easiest way is to have a 'flag' node:
+                nextSibling = parentNode.insertBefore(
+                    document.createTextNode(''),
+                    sortElement.nextSibling
+                );
+            
+            return function() {
+                
+                if (parentNode === this) {
+                    throw new Error(
+                        "You can't sort elements if any one is a descendant of another."
+                    );
+                }
+                
+                // Insert before flag:
+                parentNode.insertBefore(this, nextSibling);
+                // Remove flag:
+                parentNode.removeChild(nextSibling);
+                
+            };
+            
+        });
+       
+        return sort.call(this, comparator).each(function(i){
+            placements[i].call(getSortable.call(this));
+        });
+        
+    };
+    
+})();
\ No newline at end of file
diff --git a/style.css b/style.css
index 12c84ca..455099a 100644
--- a/style.css
+++ b/style.css
@@ -209,13 +209,13 @@ border-radius: 6px;
 display: table;
 }
 
-.search input
+.search input, .search img, .search img
 {
 display: table-cell;
 vertical-align: middle;
 }
 
-.search input[type=text], .search select
+.search input[type=text]
 {
 width: 242px;
 }