Commit 184d7ae5 by alexandre

Filtres dans leur propre vues

parent 9845f2bd
......@@ -1261,7 +1261,7 @@ li .icon--tag { color: white } */
.score-list { display: flex; }
.scores { flex: 1; }
.scores { flex: 1; overflow: auto; }
.score-filters {
height: 100vh;
}
......@@ -1285,7 +1285,7 @@ li .icon--tag { color: white } */
.panel__toggle {
box-sizing: border-box;
line-height: 30px;
outline: 1px solid white;
/* outline: 1px solid white; */
padding-right: 30px;
position: absolute;
text-align: right;
......@@ -1319,3 +1319,14 @@ li .icon--tag { color: white } */
.content {
padding: 30px;
}
.score-filters .content {
width: 300px;
transition: all .2s;
}
.score-filters.is-collapsed .content {
margin-right: -360px;
}
......@@ -361,6 +361,23 @@ window.W = window.W || {};
var state = initState();
W.ToggableView = Backbone.Marionette.View.extend({
onShow: function () {
this.$el.removeClass('is-collapsed');
},
onHide: function () {
console.log("hiding");
this.$el.addClass('is-collapsed');
},
onToggle: function () {
this.$el.toggleClass('is-collapsed');
},
});
/**
* Instantiate with at least a label.
*/
......@@ -2095,16 +2112,23 @@ window.W = window.W || {};
});
W.SearchPanelView = W.ToggableView.extend({
template: '#search-panel-template',
W.ScoreListView = Backbone.Marionette.View.extend({
template: '#score-list-template',
attributes: {
class: 'score-filters panel panel--right'
},
attributes: { class: 'score-list' },
ui: {
'toggle': '.panel__toggle',
},
triggers: {
'click @ui.toggle': 'toggle',
},
regions: {
search: '#search',
list: '#list',
pagination: '#pagination',
languageFilter: '#language-filter',
scoreTypeFilter: '#score-type-filter',
tagFilter: '#tag-filter',
......@@ -2112,6 +2136,57 @@ window.W = window.W || {};
},
onRender: function () {
var scoreCollection = this.collection;
var mySearchView = new W.SearchView({
collection: scoreCollection
});
var myAppliedFiltersView = new W.AppliedFiltersView({
collection: scoreCollection
});
var languageCollection = new W.ChoiceCollection([], {action: "language", syncWith: scoreCollection});
var languageChoiceListView = new W.ChoiceListView({collection: languageCollection, syncWith: scoreCollection});
var scoreTypeCollection = new W.ChoiceCollection([], {action: "score_type", syncWith: scoreCollection})
var scoreTypeChoiceListView = new W.ChoiceListView({collection: scoreTypeCollection, syncWith: scoreCollection})
var TagCollection = new W.ChoiceCollection([], {action: "tags", syncWith: scoreCollection})
var TagChoiceListView = new W.ChoiceListView({collection: TagCollection, syncWith: scoreCollection})
var that = this;
that.showChildView('search', mySearchView);
that.showChildView('languageFilter', languageChoiceListView);
that.showChildView('scoreTypeFilter', scoreTypeChoiceListView);
that.showChildView('tagFilter', TagChoiceListView);
that.showChildView('appliedFilters', myAppliedFiltersView);
console.log("render");
},
initialize: function() {
// this.listenTo(this.collection, 'sync', this.render);
// this.render()
}
});
W.ScoreListView = Backbone.Marionette.View.extend({
template: '#score-list-template',
attributes: { class: 'score-list' },
regions: {
list: '#list',
pagination: '#pagination',
panel: {
el: '#search-panel',
replaceElement: true
},
},
onRender: function () {
document.title = 'Notation W';
var scoreCollection = new W.ScoreCollection([], {
......@@ -2131,15 +2206,6 @@ window.W = window.W || {};
collection: scoreCollection
});
var mySearchView = new W.SearchView({
collection: scoreCollection
});
var myAppliedFiltersView = new W.AppliedFiltersView({
collection: scoreCollection
});
var myPaginationView = new Backgrid.Extension.Paginator({
controls : {
rewind: {
......@@ -2176,28 +2242,13 @@ window.W = window.W || {};
collection: scoreCollection
});
var languageCollection = new W.ChoiceCollection([], {action: "language", syncWith: scoreCollection});
var languageChoiceListView = new W.ChoiceListView({collection: languageCollection, syncWith: scoreCollection});
var mySearchPanelView = new W.SearchPanelView({collection: scoreCollection});
var scoreTypeCollection = new W.ChoiceCollection([], {action: "score_type", syncWith: scoreCollection})
var scoreTypeChoiceListView = new W.ChoiceListView({collection: scoreTypeCollection, syncWith: scoreCollection})
this.showChildView('list', myListView);
this.showChildView('pagination', myPaginationView);
this.showChildView('panel', mySearchPanelView);
var TagCollection = new W.ChoiceCollection([], {action: "tags", syncWith: scoreCollection})
var TagChoiceListView = new W.ChoiceListView({collection: TagCollection, syncWith: scoreCollection})
var that = this;
myListView.collection.fetch({
success: function () {
that.showChildView('search', mySearchView);
that.showChildView('languageFilter', languageChoiceListView);
that.showChildView('scoreTypeFilter', scoreTypeChoiceListView);
that.showChildView('tagFilter', TagChoiceListView);
that.showChildView('list', myListView);
that.showChildView('appliedFilters', myAppliedFiltersView);
that.showChildView('pagination', myPaginationView);
}
});
scoreCollection.fetch();
}
});
......@@ -2454,22 +2505,6 @@ window.W = window.W || {};
});
W.ToggableView = Backbone.Marionette.View.extend({
onShow: function () {
this.$el.removeClass('is-collapsed');
},
onHide: function () {
console.log("hiding");
this.$el.addClass('is-collapsed');
},
onToggle: function () {
this.$el.toggleClass('is-collapsed');
},
});
W.helpView = W.ToggableView.extend({
template: '#help-template',
......
......@@ -124,6 +124,10 @@
{% include "playground/underscore/score-vue.mtpl" %}
</script>
<script id="search-panel-template" type="text/template">
{% include "playground/underscore/search-panel.mtpl" %}
</script>
<script id="search-template" type="text/template">
{% include "playground/underscore/search.mtpl" %}
</script>
......
......@@ -4,29 +4,5 @@
<div id="pagination"></div>
</div>
<div class="score-filters panel panel--right">
<div class="panel__toggle js-collapse">filtres</div>
<div class="content">
<div id="applied-filters"></div>
<div id="search"></div>
<div class="filters">
<div class="filters__filter">
<p><%- t('langue') %></p>
<div id="language-filter"></div>
</div>
<div class="filters__filter">
<p><%- t('type de partition') %></p>
<div id="score-type-filter"></div>
</div>
<div class="filters__filter">
<p><%- t('tags') %></p>
<div id="tag-filter"></div>
</div>
</div>
</div>
</div>
<div id="search-panel" class="score-filters panel panel--right"></div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment