Mirroring/kaamelott-soundboard
1
0
Fork 0
mirror of https://github.com/2ec0b4/kaamelott-soundboard.git synced 2025-12-08 15:43:24 +00:00
Code Releases Activity

Ajoute un bouton de réinitialisation du champ

Browse Source
This commit is contained in:
Antoine
2016-08-05 12:38:37 +02:00
parent f8c64f41be
commit 6490efeee1
4 changed files with 48 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
css/style.css
View File

@@ -507,7 +507,7 @@ a.btn, a.btn:hover, a.btn:focus {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 1.42857; line-height: 1.42857;
outline: 0 none; outline: none;
padding: 5px 20px; padding: 5px 20px;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
@@ -582,6 +582,9 @@ noscript p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.invisible {
visibility: hidden;
}
#main { #main {
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
@@ -610,15 +613,34 @@ noscript p {
} }
#filter form { #filter form {
overflow: hidden; overflow: hidden;
position: relative;
} }
#filter input[type="text"] { #filter input[type="text"] {
padding-right: 32px;
text-align: left; text-align: left;
} }
#filter input + .btn { #filter .btn {
height: 34px; height: 34px;
left: -5px; left: -5px;
position: relative; 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 ul {
list-style-type: none; list-style-type: none;
margin: 2em 0 0; margin: 2em 0 0;

4
img/close.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 206 B

1
js/app/templates/filter.hbs
View File

@@ -1,5 +1,6 @@
<form action="index.html" method="post"> <form action="index.html" method="post">
<label for="filter">Filtrer les sons</label> <label for="filter">Filtrer les sons</label>
<input type="text" name="s" value="" id="filter" placeholder="Ex. : Perceval"> <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"> <input type="submit" name="submit" value="Filtrer" class="btn">
</form> </form>

22
js/app/views/filter.js
View File

@@ -10,19 +10,35 @@ define("views/filter", function(require) {
template: SoundsFilterTemplate, template: SoundsFilterTemplate,
ui: { ui: {
searchForm: "form", searchForm: "form",
searchField: "form input[name='s']" searchField: "form input[name='s']",
btnReset: ".btn-reset"
}, },
events: { events: {
"submit @ui.searchForm": "filterSounds", "submit @ui.searchForm": "filterSounds",
"keyup @ui.searchField": "filterSounds" "keyup @ui.searchField": "filterSounds",
"click @ui.btnReset": "resetFilter"
}, },
initialize: function() { initialize: function() {
this.channel = Radio.channel("Sounds"); this.channel = Radio.channel("Sounds");
}, },
filterSounds: function(e) { filterSounds: function(e) {
var value = this.$el.find(this.ui.searchField).val();
e.preventDefault(); 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();
} }
}); });