Ajoute un bouton de réinitialisation du champ

css/style.css

@@ -507,7 +507,7 @@ a.btn, a.btn:hover, a.btn:focus {
     font-size: 14px;
     font-weight: 400;
     line-height: 1.42857;
-    outline: 0 none;
+    outline: none;
     padding: 5px 20px;
     position: relative;
     text-decoration: none;
@@ -582,6 +582,9 @@ noscript p {
     margin: 0;
     padding: 0;
 }
+.invisible {
+    visibility: hidden;
+}
 #main {
     margin: 0 auto;
     padding: 0;
@@ -610,15 +613,34 @@ noscript p {
 }
 #filter form {
     overflow: hidden;
+    position: relative;
 }
 #filter input[type="text"] {
+    padding-right: 32px;
     text-align: left;
 }
-#filter input + .btn {
+#filter .btn {
     height: 34px;
     left: -5px;
     position: relative;
 }
+#filter .btn-reset {
+    background: url('../img/close.svg') no-repeat center center;
+    border: 0;
+    font-size: 1em;
+    /*display: none;*/
+    height: 24px;
+    left: -38px;
+    margin: 0 -34px 0 0;
+    outline: none;
+    position: relative;
+    padding: 0;
+    width: 24px;
+    /**/
+    text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+}
 #list ul {
     list-style-type: none;
     margin: 2em 0 0;

img/close.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+    <path d="M 10,10 L 30,30 M 30,10 L 10,30" stroke="#C9C9C9" stroke-width="3" />
+</svg>

js/app/templates/filter.hbs

@@ -1,5 +1,6 @@
 <form action="index.html" method="post">
     <label for="filter">Filtrer les sons</label>
     <input type="text" name="s" value="" id="filter" placeholder="Ex. : Perceval">
+    <input type="reset" value="Réinitialiser" class="btn-reset invisible">
     <input type="submit" name="submit" value="Filtrer" class="btn">
 </form>

js/app/views/filter.js

@@ -10,19 +10,35 @@ define("views/filter", function(require) {
         template: SoundsFilterTemplate,
         ui: {
             searchForm: "form",
-            searchField: "form input[name='s']"
+            searchField: "form input[name='s']",
+            btnReset: ".btn-reset"
         },
         events: {
             "submit @ui.searchForm": "filterSounds",
-            "keyup @ui.searchField": "filterSounds"
+            "keyup @ui.searchField": "filterSounds",
+            "click @ui.btnReset": "resetFilter"
         },
         initialize: function() {
             this.channel    = Radio.channel("Sounds");
         },
         filterSounds: function(e) {
+            var value   = this.$el.find(this.ui.searchField).val();
+
             e.preventDefault();
 
-            this.channel.trigger("sounds:filter", $(this.ui.searchField).val());
+            if( value !== "" ) {
+                this.$el.find(this.ui.btnReset).removeClass('invisible');
+            } else {
+                this.$el.find(this.ui.btnReset).addClass('invisible');
+            }
+
+            this.channel.trigger("sounds:filter", value);
+        },
+        resetFilter: function(e) {
+            e.preventDefault();
+
+            this.$el.find(this.ui.searchField).val('');
+            this.$el.find(this.ui.searchForm).submit();
         }
     });