pageflow 0.0.1

data/app/assets/javascripts/pageflow/editor/views/file_item_view.js

@@ -0,0 +1,115 @@
+pageflow.FileItemView = Backbone.Marionette.ItemView.extend({
+  tagName: 'li',
+  template: 'templates/file_item',
+
+  mixins: [pageflow.loadable],
+
+  ui: {
+    fileName: '.file_name',
+
+    selectButton: '.select',
+    removeButton: '.remove',
+    cancelButton: '.cancel',
+    retryButton: '.retry',
+
+    thumbnail: '.file_thumbnail',
+    stageItems: '.file_stage_items',
+
+    rights: 'input.rights',
+    metaData: 'tbody.attributes',
+    downloads: 'tbody.downloads',
+    downloadLink: 'a.original'
+  },
+
+  events: {
+    'click .select': function() {
+      this.$el.trigger('file-selected', this.model);
+      return false;
+    },
+
+    'click .cancel': 'cancel',
+
+    'click .remove': 'destroy',
+
+    'click .retry': 'retry',
+
+    'click .file_thumbnail': 'toggleExpanded',
+
+    'change': 'save'
+  },
+
+  modelEvents: {
+    'change': 'update'
+  },
+
+  onRender: function() {
+    this.update();
+
+    this.subview(new pageflow.FileThumbnailView({
+      el: this.ui.thumbnail,
+      model: this.model
+    }));
+
+    this.subview(new pageflow.CollectionView({
+      el: this.ui.stageItems,
+      collection: this.model.stages,
+      itemViewConstructor: pageflow.FileStageItemView
+    }));
+
+    _.each(this.metaDataViews(), function(view) {
+      this.ui.metaData.append(this.subview(view).el);
+    }, this);
+  },
+
+  update: function() {
+    this.$el.attr('data-id', this.model.id);
+    this.ui.fileName.text(this.model.get('file_name') || '(Unbekannt)');
+
+    this.ui.rights.val(this.model.get('rights'));
+    this.ui.rights.attr('placeholder', pageflow.entry.get('default_file_rights'));
+
+    this.ui.downloadLink.attr('href', this.model.get('url'));
+    this.ui.downloads.toggle(this.model.isUploaded());
+
+    this.ui.selectButton.toggle(this.options.selectable);
+
+    this.ui.cancelButton.toggle(this.model.isUploading());
+    this.ui.removeButton.toggle(!this.model.isUploading());
+    this.ui.retryButton.toggle(this.model.isRetryable());
+
+    this.updateToggleTitle();
+  },
+
+  save: function() {
+    this.model.save({
+      rights: this.ui.rights.val()
+    });
+  },
+
+  metaDataViews: function() {
+    return [];
+  },
+
+  toggleExpanded: function() {
+    this.$el.toggleClass('expanded');
+    this.updateToggleTitle();
+  },
+
+  updateToggleTitle: function() {
+    this.ui.thumbnail.attr('title', this.$el.hasClass('expanded') ? 'Details ausblenden' : 'Details einblenden');
+  },
+
+  destroy: function() {
+    if (confirm("Datei wirklich wirklich löschen?")) {
+      this.model.destroyUsage();
+    }
+  },
+
+  cancel: function() {
+    this.model.cancelUpload();
+  },
+
+  retry: function() {
+    this.model.retry();
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/file_meta_data_item_view.js

@@ -0,0 +1,19 @@
+pageflow.FileMetaDataItemView = Backbone.Marionette.ItemView.extend({
+  tagName: 'tr',
+  template: 'templates/file_meta_data_item',
+
+  ui: {
+    label: 'th',
+    value: 'td'
+  },
+
+  onRender: function() {
+    this.update();
+    this.listenTo(this.model, 'change:' + this.options.attribute, this.update);
+  },
+
+  update: function() {
+    this.ui.label.text(I18n.t('activerecord.attributes.' + this.model.modelName + '.' + this.options.attribute));
+    this.ui.value.text(this.model.get(this.options.attribute));
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/file_stage_item_view.js

@@ -0,0 +1,40 @@
+pageflow.FileStageItemView = Backbone.Marionette.ItemView.extend({
+  tagName: 'li',
+  className: 'file_stage_item',
+  template: 'templates/file_stage_item',
+
+  ui: {
+    description: '.description',
+    percent: '.percent',
+    errorMessage: '.error_message'
+  },
+
+  modelEvents: {
+    'change': 'update'
+  },
+
+  onRender: function() {
+    this.update();
+    this.$el.addClass(this.model.get('name'));
+  },
+
+  update: function() {
+    this.ui.description.text(this.model.localizedDescription());
+
+    if (typeof this.model.get('progress') === 'number' &&
+        this.model.get('active')) {
+      this.ui.percent.text(this.model.get('progress') + '%');
+    }
+    else {
+      this.ui.percent.text('');
+    }
+
+    this.ui.errorMessage
+      .toggle(!!this.model.get('error_message'))
+      .text(this.model.get('error_message'));
+
+    this.$el.toggleClass('active', this.model.get('active'));
+    this.$el.toggleClass('finished', this.model.get('finished'));
+    this.$el.toggleClass('failed', this.model.get('failed'));
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/file_thumbnail_view.js

@@ -0,0 +1,54 @@
+pageflow.FileThumbnailView = Backbone.Marionette.ItemView.extend({
+  className: 'file_thumbnail',
+  template: 'templates/file_thumbnail',
+
+  modelEvents: {
+    'change:state': 'update'
+  },
+
+  ui: {
+    pictogram: '.pictogram'
+  },
+
+  onRender: function() {
+    this.update();
+  },
+
+  update: function() {
+    if (this.model) {
+      var stage = this.model.currentStage();
+
+      if (stage) {
+        this.setStageClassName(stage.get('name'));
+        this.ui.pictogram.toggleClass('failed', stage.get('failed'));
+      }
+      else {
+        this.ui.pictogram.removeClass(this.model.stages.pluck('name').join(' '));
+      }
+
+      this.ui.pictogram.addClass(this.model.thumbnailPictogram);
+      this.$el.css('background-image', 'url(' + this._imageUrl() + ')');
+      this.$el
+        .removeClass('empty')
+        .toggleClass('always_picogram', !!this.model.thumbnailPictogram)
+        .toggleClass('ready', this.model.isReady());
+    }
+    else {
+      this.$el.css('background-image', '');
+      this.$el.removeClass('ready');
+      this.ui.pictogram.addClass('empty');
+    }
+  },
+
+  setStageClassName: function(name) {
+    if (!this.$el.hasClass(name)) {
+      this.ui.pictogram.removeClass('empty');
+      this.ui.pictogram.removeClass(this.model.stages.pluck('name').join(' '));
+      this.ui.pictogram.addClass(name);
+    }
+  },
+
+  _imageUrl: function() {
+    return this.model.get(this.options.imageUrlPropertyName || 'thumbnail_url');
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/files_explorer_view.js

@@ -0,0 +1,132 @@
+pageflow.FilesExplorerView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/files_explorer',
+  className: 'files_explorer editor dialog',
+
+  mixins: [pageflow.dialogView],
+
+  ui: {
+    entriesPanel: '.entries_panel',
+    filesPanel: '.files_panel',
+    okButton: '.ok'
+  },
+
+  events: {
+    'click .ok': function() {
+      if (this.options.callback) {
+        this.options.callback(this._selectedFile());
+      }
+      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._selectedFile());
+    });
+  },
+
+  onRender: function() {
+    this.subview(new pageflow.OtherEntriesCollectionView({
+      el: this.ui.entriesPanel,
+      selection: this.selection
+    }));
+
+
+    this.tabsView = new pageflow.TabsView({
+      model: this.model,
+      i18n: 'editor.files.tabs',
+      defaultTab: this.options.tabName
+    });
+
+    this.tab('image_files', {
+      collectionName: 'imageFiles',
+      itemView: pageflow.ExplorerFileItemView
+    });
+
+    this.tab('video_files', {
+      collectionName: 'videoFiles',
+      itemView: pageflow.ExplorerFileItemView
+    });
+
+    this.tab('audio_files', {
+      collectionName: 'audioFiles',
+      itemView: pageflow.ExplorerFileItemView
+    });
+
+    this.ui.filesPanel.append(this.subview(this.tabsView).el);
+
+    this.ui.okButton.prop('disabled', true);
+  },
+
+  tab: function(name, options) {
+    this.tabsView.tab(name, _.bind(function() {
+      var collection = this._collection(options.collectionName),
+      disabledIds = [];
+
+      if (collection.name) { // collection.name indicates *FilesCollection
+        disabledIds = pageflow.entry.getFileCollection(collection.fileType()).pluck('id');
+      }
+
+      return new pageflow.CollectionView({
+        tagName: 'ul',
+        className: 'files_gallery',
+        collection: collection,
+        itemViewConstructor: options.itemView,
+        itemViewOptions: {
+          selection: this.selection,
+          disabledIds: disabledIds
+        },
+        blankSlateViewConstructor: this._blankSlateConstructor()
+      });
+    }, this));
+  },
+
+  _collection: function(collectionName) {
+    var collection,
+        entry = this.selection.get('entry');
+
+    if (entry) {
+      collection = entry[collectionName];
+      collection.fetch();
+    } else {
+      collection = new Backbone.Collection();
+    }
+    return collection;
+  },
+
+  _blankSlateConstructor: function() {
+    return Backbone.Marionette.ItemView.extend({
+      template: this.selection.get('entry') ? 'templates/files_gallery_blank_slate' : 'templates/files_explorer_blank_slate'
+    });
+  },
+
+  _selectedFile: function() {
+    var sel = this.selection,
+        file;
+
+    if ((file = sel.get('image_file'))) {
+      file.set('typeName', 'ImageFile');
+      return file;
+    }
+
+    if ((file = sel.get('audio_file'))) {
+      file.set('typeName', 'AudioFile');
+      return file;
+    }
+
+    if ((file = sel.get('video_file'))) {
+      file.set('typeName', 'VideoFile');
+      return file;
+    }
+  }
+});
+
+pageflow.FilesExplorerView.open = function(options) {
+  pageflow.app.dialogRegion.show(new pageflow.FilesExplorerView(options));
+};

data/app/assets/javascripts/pageflow/editor/views/files_view.js

@@ -0,0 +1,96 @@
+pageflow.FilesView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/files',
+  className: 'manage_files',
+
+  events: {
+    'click a.back': 'goBack',
+
+    'file-selected': 'updatePage'
+  },
+
+  onRender: function() {
+    this.addFileModel = new Backbone.Model({
+      label: 'Hinzufügen',
+      options: [
+        {
+          label: 'Hochladen',
+          handler: this.upload.bind(this)
+        },
+        {
+          label: 'Wiederverwenden',
+          handler: function() {
+            pageflow.FilesExplorerView.open({
+              callback: pageflow.entry.addFileUsage.bind(pageflow.entry)
+            });
+          }
+        }
+      ]
+    });
+
+    this.$el.append(this.subview(new pageflow.SelectButtonView({model: this.addFileModel })).el);
+
+    this.tabsView = new pageflow.TabsView({
+      model: this.model,
+      i18n: 'editor.files.tabs',
+      defaultTab: this.options.tabName
+    });
+
+    this.tab('image_files', {
+      collection: this.model.imageFiles,
+      itemView: pageflow.ImageFileItemView
+    });
+
+    this.tab('video_files', {
+      collection: this.model.videoFiles,
+      itemView: pageflow.VideoFileItemView
+    });
+
+    this.tab('audio_files', {
+      collection: this.model.audioFiles,
+      itemView: pageflow.AudioFileItemView
+    });
+
+    this.$el.append(this.subview(this.tabsView).el);
+  },
+
+  tab: function(name, options) {
+    this.tabsView.tab(name, _.bind(function() {
+      return this.subview(new pageflow.CollectionView({
+        tagName: 'ul',
+        className: 'files expandable',
+        collection: options.collection,
+        itemViewConstructor: options.itemView,
+        itemViewOptions: {
+          selectable: this.options.tabName === name
+        },
+        blankSlateViewConstructor: Backbone.Marionette.ItemView.extend({
+          template: 'templates/files_blank_slate'
+        })
+      }));
+    }, this));
+
+    this.listenTo(this.model, 'change:uploading_' + name +'_count', function(model, value) {
+      this.tabsView.toggleSpinnerOnTab(name, value > 0);
+    });
+  },
+
+  goBack: function() {
+    if (this.options.page) {
+      editor.navigate('/pages/' + this.options.page.id + '/files', {trigger: true});
+    }
+    else {
+      editor.navigate('/', {trigger: true});
+    }
+  },
+
+  upload: function() {
+    pageflow.app.trigger('request-upload');
+  },
+
+  updatePage: function(event, file) {
+    if (this.options.page) {
+      this.options.page.configuration.setReference(this.options.pageAttributeName, file);
+      this.goBack();
+    }
+  }
+});