diff --git a/css/style.css b/css/style.css index 1a9cf1c..4ff9b73 100644 --- a/css/style.css +++ b/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; diff --git a/img/close.svg b/img/close.svg new file mode 100644 index 0000000..f11af8d --- /dev/null +++ b/img/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/js/app/templates/filter.hbs b/js/app/templates/filter.hbs index 99a814c..d7a7c86 100644 --- a/js/app/templates/filter.hbs +++ b/js/app/templates/filter.hbs @@ -1,5 +1,6 @@
+
diff --git a/js/app/views/filter.js b/js/app/views/filter.js index e4c01dc..1aac697 100644 --- a/js/app/views/filter.js +++ b/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(); } });