});
Filex.File = OfflineModel.extend({
+ defaults: {
+ checked: false
+ },
+
isDir: function() {
return false;
},
isHidden: function() {
return this.get('name')[0] == '.';
+ },
+
+ toggle: function() {
+ this.set('checked', !this.get('checked'));
}
});
tagName: 'tr',
events: {
- 'click .link': 'selected'
+ 'click .link': 'selected',
+ 'click input[type=checkbox]': 'toggle'
},
initialize: function(options) {
this.view = options.view;
+ this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'remove', this.remove);
this.listenTo(this.model, 'hidden', this.toggleHidden);
},
path: this.view.path.full(),
name: this.model.get('name')
});
+ data['cid'] = this.model.cid;
this.$el.html(this.template()(data));
this.toggleHidden();
selected: function(e) {
e.preventDefault();
- this.model.trigger(this.model.isDir() ? 'selected:dir' : 'selected:file', this.model);
+ if (this.model.isDir()) {
+ this.model.trigger('selected:dir', this.model);
+ }
+ else {
+ this.model.trigger('selected:file', this.model);
+ this.toggle();
+ }
+ },
+
+ toggle: function() {
+ this.model.toggle();
}
});
events: {
'change #show-hidden': 'toggleHidden',
- 'click #host-controls .view': 'hostEdit'
+ 'click #host-controls .view': 'hostEdit',
+ 'click #select-all': 'selectAll'
},
initialize: function(options) {
this.$error = $('#error');
this.$showHidden = $('#show-hidden');
this.$host = $('#host-controls');
+ this.$selectAll = $('#select-all');
this.host = options.host;
this.path = new Filex.Path();
this.listenTo(this.files, 'reset', this.resetFiles);
this.listenTo(this.files, 'selected:dir', this.selectedDir);
this.listenTo(this.files, 'selected:file', this.selectedFile);
+ this.listenTo(this.files, 'change:checked', this.updateSelectAll);
// used in selectize callbacks
var view = this,
},
render: function() {
+ this.updateSelectAll();
this.$host.find('.view').text(this.host);
- this.$noItems.toggle((this.showHidden() ? !Boolean(this.files.length) : !Boolean(this.files.visible().length)));
+ this.$noItems.toggle(!Boolean(this.visibleFiles().length));
this.$error.hide();
},
idle: function() {
this.$el.removeClass('busy');
+ },
+
+ visibleFiles: function() {
+ return this.showHidden() ? this.files.models : this.files.visible();
+ },
+
+ selectedFiles: function() {
+ return _.filter(this.visibleFiles(), function(item) {
+ return item.get('checked');
+ });
+ },
+
+ selectAll: function() {
+ var checked = this.$selectAll[0].checked;
+
+ _.each(this.visibleFiles(), function(item) {
+ item.set('checked', checked);
+ })
+ },
+
+ updateSelectAll: function() {
+ this.$selectAll.prop('checked', this.selectedFiles().length == this.visibleFiles().length);
}
});
});
</script>
<script type="text/template" id="dir-template">
+ <td class="text-center">
+ <label for="dir-<%= cid %>" class="sr-only">Zaznacz katalog <%= name %></label>
+ <input id="dir-<%= cid %>" type="checkbox" autocomplete="off" <%= checked ? 'checked="checked"' : '' %>>
+ </td>
<td class="text-center"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span></td>
<td><a class="link" href="#"><%= name %></a></td>
<td class="text-right"><%= size %></td>
</script>
<script type="text/template" id="file-template">
+ <td class="text-center">
+ <label for="file-<%= cid %>" class="sr-only">Zaznacz plik <%= name %></label>
+ <input id="file-<%= cid %>" type="checkbox" autocomplete="off" <%= checked ? 'checked="checked"' : '' %>>
+ </td>
<td class="text-center"><span class="glyphicon glyphicon-file" aria-hidden="true"></span></td>
<td>
<a href="{% url 'filex:download' %}?<%= url_params %>"
class="btn btn-default btn-xs pull-right" title="Pobierz plik">
- <span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>
+ <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
</a>
<a class="link" href="#"><%= name %></a>
</td>