package/src/editor/views/FilesExplorerView.js
import Backbone from 'backbone';
import Marionette from 'backbone.marionette';
import _ from 'underscore';
import {CollectionView, TabsView} from 'pageflow/ui';
import {app} from '../app';
import {editor} from '../base';
import {ExplorerFileItemView} from './ExplorerFileItemView';
import {OtherEntriesCollectionView} from './OtherEntriesCollectionView';
import {dialogView} from './mixins/dialogView';
import {state} from '$state';
import template from '../templates/filesExplorer.jst';
import filesGalleryBlankSlateTemplate from '../templates/filesGalleryBlankSlate.jst';
import filesExplorerBlankSlateTemplate from '../templates/filesExplorerBlankSlate.jst';
export const FilesExplorerView = Marionette.ItemView.extend({
template,
className: 'files_explorer editor dialog',
mixins: [dialogView],
ui: {
entriesPanel: '.entries_panel',
filesPanel: '.files_panel',
okButton: '.ok'
},
events: {
'click .ok': function() {
if (this.options.callback) {
this.options.callback(this.selection.get('entry'),
this.selection.get('file'));
}
this.close();
}
},
initialize: function() {
this.selection = new Backbone.Model();
this.listenTo(this.selection, 'change:entry', function() {
this.tabsView.refresh();
});
// check if the OK button should be enabled.
this.listenTo(this.selection, 'change', function(selection, options) {
this.ui.okButton.prop('disabled', !this.selection.get('file'));
});
},
onRender: function() {
this.subview(new OtherEntriesCollectionView({
el: this.ui.entriesPanel,
selection: this.selection
}));
this.tabsView = new TabsView({
model: this.model,
i18n: 'pageflow.editor.files.tabs',
defaultTab: this.options.tabName
});
editor.fileTypes.each(function(fileType) {
if (fileType.topLevelType) {
this.tab(fileType);
}
}, this);
this.ui.filesPanel.append(this.subview(this.tabsView).el);
this.ui.okButton.prop('disabled', true);
},
tab: function(fileType) {
this.tabsView.tab(fileType.collectionName, _.bind(function() {
var collection = this._collection(fileType);
var disabledIds = state.entry.getFileCollection(fileType).pluck('id');
return new CollectionView({
tagName: 'ul',
className: 'files_gallery',
collection: collection,
itemViewConstructor: ExplorerFileItemView,
itemViewOptions: {
selection: this.selection,
disabledIds: disabledIds
},
blankSlateViewConstructor: this._blankSlateConstructor()
});
}, this));
},
_collection: function(fileType) {
var collection,
entry = this.selection.get('entry');
if (entry) {
collection = entry.getFileCollection(fileType);
collection.fetch();
} else {
collection = new Backbone.Collection();
}
return collection;
},
_blankSlateConstructor: function() {
return Marionette.ItemView.extend({
template: this.selection.get('entry') ? filesGalleryBlankSlateTemplate : filesExplorerBlankSlateTemplate
});
}
});
FilesExplorerView.open = function(options) {
app.dialogRegion.show(new FilesExplorerView(options));
};