Add some sorting

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>
+                <select id="sortchoice">
-                    <option value="volvo">Volvo</option>
+                    <option value="st"><?php echo localize("bookword.title") ?></option>
-                    <option value="saab">Saab</option>
+                    <option value="sa"><?php echo localize("authors.title") ?></option>
-                    <option value="mercedes">Mercedes</option>
-                    <option value="audi">Audi</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="entryTitle st"><?php echo htmlspecialchars ($entry->title) ?></div>
-                <div class="entryContent"><?php echo localize("authors.title") . " : " . htmlspecialchars ($entry->book->getAuthorsName ()) ?></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 ();

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));
+        });
+        
+    };
+    
+})();

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;
 }