pageflow 0.1.0 → 0.2.0

data/app/assets/javascripts/pageflow/editor/templates/{quota_decorator.jst.ejs → entry_publication_quota_decorator.jst.ejs}

@@ -2,5 +2,5 @@
 </div>
 <div class="outlet">
 </div>
-<div class="exceeded_message">
+<div class="exhausted_message">
 </div>

data/app/assets/javascripts/pageflow/editor/templates/files_explorer.jst.ejs

@@ -1,10 +1,12 @@
 <div class="box">
   <h2>Dateien Wiederverwenden</h2>
 
-  <ul class="entries_panel">
-  </ul>
+  <div class="panels">
+    <div class="entries_panel">
+    </div>
 
-  <div class="files_panel">
+    <div class="files_panel">
+    </div>
   </div>
 
   <div class="footer">

data/app/assets/javascripts/pageflow/editor/templates/notifications.jst.ejs

@@ -1,4 +1,9 @@
 <li class="uploading"><span class="count">0</span> Dateien werden gerade hochgeladen.</li>
 <li class="failed"><span class="count">0</span> Datensätze konnten nicht gespeichert werden. <a class="retry">Erneut versuchen</a></li>
 <li class="saving">Änderungen werden gespeichert...</li>
-<li class="saved">Alle Änderungen wurden gespeichert.</li>
+<li class="saved">Alle Änderungen wurden gespeichert.</li>
+
+<li class="confirmable_files">
+  <span class="count">0</span> Dateien müssen für die Transcodierung freigeben werden.
+  <a href="#/confirmable_files" class="display_confirmable_files">Anzeigen</a>
+</li>

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

@@ -0,0 +1,76 @@
+pageflow.ConfirmEncodingView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/confirm_encoding',
+
+  ui: {
+    blankSlate: '.blank_slate',
+    videoFilesPanel: '.video_files_panel',
+    audioFilesPanel: '.audio_files_panel',
+
+    summary: '.summary',
+    confirmButton: 'button'
+  },
+
+  events: {
+    'click button': function() {
+      this.model.save();
+    }
+  },
+
+  initialize: function() {
+    this.confirmableVideoFiles = pageflow.videoFiles.confirmable();
+    this.confirmableAudioFiles = pageflow.audioFiles.confirmable();
+  },
+
+  onRender: function() {
+    this.listenTo(this.model, 'change:empty change:exceeding change:checking', this.updateSummary);
+
+    this.listenTo(this.confirmableAudioFiles, 'add remove', this.update);
+    this.listenTo(this.confirmableVideoFiles, 'add remove', this.update);
+
+    this.ui.videoFilesPanel.append(this.subview(new pageflow.CollectionView({
+      tagName: 'ul',
+      className: 'confirmable_files',
+      collection: this.confirmableVideoFiles,
+      itemViewConstructor: pageflow.ConfirmableFileItemView,
+      itemViewOptions: {
+        selectedFiles: this.model.videoFiles
+      }
+    })).el);
+
+    this.ui.audioFilesPanel.append(this.subview(new pageflow.CollectionView({
+      tagName: 'ul',
+      className: 'confirmable_files',
+      collection: this.confirmableAudioFiles,
+      itemViewConstructor: pageflow.ConfirmableFileItemView,
+      itemViewOptions: {
+        selectedFiles: this.model.audioFiles
+      }
+    })).el);
+
+    this.update();
+  },
+
+  update: function() {
+    this.ui.blankSlate.toggle(!this.confirmableVideoFiles.length && !this.confirmableAudioFiles.length);
+    this.ui.videoFilesPanel.toggle(!!this.confirmableVideoFiles.length);
+    this.ui.audioFilesPanel.toggle(!!this.confirmableAudioFiles.length);
+  },
+
+  updateSummary: function(enabled) {
+    this.ui.summary.html(this.model.get('summary_html'));
+    this.ui.confirmButton.toggleClass('checking', !!this.model.get('checking'));
+
+    if (this.model.get('empty') || this.model.get('exceeding') || this.model.get('checking')) {
+      this.ui.confirmButton.attr('disabled', true);
+    }
+    else {
+      this.ui.confirmButton.removeAttr('disabled');
+    }
+  }
+});
+
+pageflow.ConfirmEncodingView.create = function(options) {
+  return new pageflow.BackButtonDecoratorView({
+    view: new pageflow.ConfirmEncodingView(options)
+  });
+};

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

@@ -0,0 +1,42 @@
+pageflow.ConfirmableFileItemView = Backbone.Marionette.ItemView.extend({
+  tagName: 'li',
+  template: 'templates/confirmable_file_item',
+
+  ui: {
+    fileName: '.file_name',
+    duration: '.duration',
+
+    label: 'label',
+    checkBox: 'input',
+    removeButton: '.remove',
+  },
+
+  events: {
+    'click .remove': 'destroy',
+
+    'change input': 'updateSelection'
+  },
+
+  onRender: function() {
+    this.ui.label.attr('for', this.cid);
+    this.ui.checkBox.attr('id', this.cid);
+
+    this.ui.fileName.text(this.model.get('file_name') || '(Unbekannt)');
+    this.ui.duration.text(this.model.get('duration') || '-');
+  },
+
+  destroy: function() {
+    if (confirm("Datei wirklich wirklich löschen?")) {
+      this.model.destroyUsage();
+    }
+  },
+
+  updateSelection: function() {
+    if (this.ui.checkBox.is(':checked')) {
+      this.options.selectedFiles.add(this.model);
+    }
+    else {
+      this.options.selectedFiles.remove(this.model);
+    }
+  },
+});

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

@@ -0,0 +1,49 @@
+pageflow.EntryPublicationQuotaDecoratorView = Backbone.Marionette.Layout.extend({
+  template: 'templates/entry_publication_quota_decorator',
+  className: 'quota_decorator',
+
+  regions: {
+    outlet: '.outlet'
+  },
+
+  ui: {
+    state: '.quota_state',
+    exhaustedMessage: '.exhausted_message'
+  },
+
+  modelEvents: {
+    'change:exceeding change:checking change:quota': 'update'
+  },
+
+  onRender: function() {
+    this.model.check();
+  },
+
+  update: function() {
+    var view = this;
+
+    if (this.model.get('checking')) {
+      view.ui.state.text(I18n.t('editor.quotas.loading'));
+      view.ui.exhaustedMessage.hide().html('');
+      view.outlet.close();
+    }
+    else {
+      if (view.model.get('exceeding')) {
+        view.ui.state.hide();
+        view.ui.exhaustedMessage.show().html(view.model.get('exhausted_html'));
+        view.outlet.close();
+      }
+      else {
+        if (view.model.quota().get('state_description')) {
+          view.ui.state.text(view.model.quota().get('state_description'));
+          view.ui.state.show();
+        }
+        else {
+          view.ui.state.hide();
+        }
+
+        view.outlet.show(view.options.view);
+      }
+    }
+  }
+});

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

@@ -13,7 +13,7 @@ pageflow.FileMetaDataItemView = Backbone.Marionette.ItemView.extend({
   },
 
   update: function() {
-    this.ui.label.text(I18n.t('activerecord.attributes.' + this.model.modelName + '.' + this.options.attribute));
+    this.ui.label.text(I18n.t('activerecord.attributes.' + this.model.i18nKey + '.' + 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

@@ -36,5 +36,6 @@ pageflow.FileStageItemView = Backbone.Marionette.ItemView.extend({
     this.$el.toggleClass('active', this.model.get('active'));
     this.$el.toggleClass('finished', this.model.get('finished'));
     this.$el.toggleClass('failed', this.model.get('failed'));
+    this.$el.toggleClass('action_required', this.model.get('action_required'));
   }
 });

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

@@ -20,6 +20,7 @@ pageflow.FileThumbnailView = Backbone.Marionette.ItemView.extend({
 
       if (stage) {
         this.setStageClassName(stage.get('name'));
+        this.ui.pictogram.toggleClass('action_required', stage.get('action_required'));
         this.ui.pictogram.toggleClass('failed', stage.get('failed'));
       }
       else {
@@ -27,7 +28,7 @@ pageflow.FileThumbnailView = Backbone.Marionette.ItemView.extend({
       }
 
       this.ui.pictogram.addClass(this.model.thumbnailPictogram);
-      this.$el.css('background-image', 'url(' + this._imageUrl() + ')');
+      this.$el.css('background-image', this._imageUrl() ? 'url(' + this._imageUrl() + ')' : '');
       this.$el
         .removeClass('empty')
         .toggleClass('always_picogram', !!this.model.thumbnailPictogram)

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

@@ -111,17 +111,17 @@ pageflow.FilesExplorerView = Backbone.Marionette.ItemView.extend({
         file;
 
     if ((file = sel.get('image_file'))) {
-      file.set('typeName', 'ImageFile');
+      file.set('typeName', 'Pageflow::ImageFile');
       return file;
     }
 
     if ((file = sel.get('audio_file'))) {
-      file.set('typeName', 'AudioFile');
+      file.set('typeName', 'Pageflow::AudioFile');
       return file;
     }
 
     if ((file = sel.get('video_file'))) {
-      file.set('typeName', 'VideoFile');
+      file.set('typeName', 'Pageflow::VideoFile');
       return file;
     }
   }

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

@@ -16,10 +16,10 @@ pageflow.inputView = {
   },
 
   localizedAttributeName: function() {
-    return I18n.t('activerecord.attributes.' + this.model.modelName + '.' + this.options.propertyName);
+    return I18n.t('activerecord.attributes.' + this.model.i18nKey + '.' + this.options.propertyName);
   },
 
   inlineHelpText: function() {
-    return I18n.t('editor.inline_help.' + this.model.modelName + '.' + this.options.propertyName, {defaultValue: ''});
+    return I18n.t('editor.inline_help.' + this.model.i18nKey + '.' + this.options.propertyName, {defaultValue: ''});
   }
 };

data/app/assets/javascripts/pageflow/editor/views/inputs/select_input_view.js

@@ -26,7 +26,7 @@ pageflow.SelectInputView = Backbone.Marionette.ItemView.extend({
     if (!this.options.texts) {
       if (!this.options.translationKeys) {
         this.options.translationKeys = _.map(this.options.values, function(value) {
-          return 'activerecord.values.' + this.model.modelName + '.' + this.options.propertyName + '.' + value;
+          return 'activerecord.values.' + this.model.i18nKey + '.' + this.options.propertyName + '.' + value;
         }, this);
       }
 

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

@@ -5,7 +5,8 @@ pageflow.NotificationsView = Backbone.Marionette.ItemView.extend({
 
   ui: {
     failedCount: '.failed .count',
-    uploadingCount: '.uploading .count'
+    uploadingCount: '.uploading .count',
+    confirmableFilesCount: '.confirmable_files .count',
   },
 
   events: {
@@ -16,12 +17,15 @@ pageflow.NotificationsView = Backbone.Marionette.ItemView.extend({
 
   onRender: function() {
     this.listenTo(pageflow.entry, 'change:uploading_files_count', this.notifyUploadCount);
+    this.listenTo(pageflow.entry, 'change:confirmable_files_count', this.notifyConfirmableFilesCount);
+
     this.listenTo(pageflow.failedRecords, 'add', this.update);
     this.listenTo(pageflow.failedRecords, 'remove', this.update);
     this.listenTo(pageflow.savingRecords, 'add', this.update);
     this.listenTo(pageflow.savingRecords, 'remove', this.update);
 
     this.update();
+    this.notifyConfirmableFilesCount();
   },
 
   update: function() {
@@ -33,5 +37,12 @@ pageflow.NotificationsView = Backbone.Marionette.ItemView.extend({
   notifyUploadCount: function(model, uploadCount) {
     this.$el.toggleClass('uploading', uploadCount > 0);
     this.ui.uploadingCount.text(uploadCount);
+  },
+
+  notifyConfirmableFilesCount: function() {
+    var confirmableFilesCount = pageflow.entry.get('confirmable_files_count');
+
+    this.$el.toggleClass('has_confirmable_files', confirmableFilesCount > 0);
+    this.ui.confirmableFilesCount.text(confirmableFilesCount);
   }
 });

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

@@ -96,12 +96,13 @@ pageflow.PublishEntryView = Backbone.Marionette.ItemView.extend({
 
     var that = this;
 
-    this.model.publish({published_until: publishedUntil})
-      .done()
+    this.options.entryPublication.publish({published_until: publishedUntil})
       .fail(function() {
         alert('Beim Veröffentlichen ist ein Fehler aufgetreten');
       })
       .always(function() {
+        if (that.isClosed) { return; }
+
         that.$el.removeClass('publishing');
         that.$('input').removeAttr('disabled');
         that.enableSave();
@@ -186,8 +187,8 @@ pageflow.PublishEntryView = Backbone.Marionette.ItemView.extend({
 
 pageflow.PublishEntryView.create = function(options) {
   return new pageflow.BackButtonDecoratorView({
-    view: new pageflow.QuotaDecoratorView({
-      model: pageflow.Quota.byName('published_entries'),
+    view: new pageflow.EntryPublicationQuotaDecoratorView({
+      model: options.entryPublication,
       view: new pageflow.PublishEntryView(options)
     })
   });

data/app/assets/javascripts/pageflow/page_types/video.js

@@ -157,7 +157,6 @@ pageflow.pageType.register('video', _.extend({
 
       if (pageflow.features.has('phone platform')) {
         // alternate poster image handling
-        video.attr("style", "visibility:hidden");
         $("<div class='vjs-poster-mobile' style='" +
           poster.attr('style') +
           "display:block; background-size: coverr;'></div>").appendTo(pageElement.find(".videoWrapper"));

data/app/assets/javascripts/pageflow/widgets/player_controls.js

@@ -22,7 +22,7 @@ jQuery.widget('pageflow.playerControls', {
     player.on('timeupdate', function (position, duration) {
       var percent = duration > 0 ? (player.position / player.duration) * 100 : 0;
       if(!isNaN(position)) {
-        if(smallTimestamp) {
+        if(durationDisplay.html().length === 5 && durationDisplay.html().charAt(0) === "0") {
           $(currentTimeDisplay).html(player.formatTime(position).substr(1));
           $(durationDisplay).html(player.formatTime(duration).substr(1));
         }

data/app/assets/stylesheets/pageflow/editor/base.css.scss

@@ -49,6 +49,7 @@
   @import "./menu";
   @import "./manage_files";
   @import "./files";
+  @import "./confirmable_files";
   @import "./files_gallery";
   @import "./file_meta_data";
   @import "./file_stages";

data/app/assets/stylesheets/pageflow/editor/confirmable_files.css.scss

@@ -0,0 +1,67 @@
+ul.confirmable_files {
+  margin-bottom: 15px;
+
+  li {
+    background-color: #eee;
+    margin-bottom: 2px;
+    position: relative;
+    padding: 10px 10px 0 30px;
+    white-space: nowrap;
+    overflow: hidden;
+    height: 23px;
+  }
+
+  input[type=checkbox] {
+    display: block;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: auto;
+    height: auto;
+  }
+
+  .file_name {
+    position: absolute;
+    left: 30px;
+    top: 9px;
+    right: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    font-weight: normal;
+    font-size: 13px;
+  }
+
+  .duration {
+    position: absolute;
+    right: 50px;
+    top: 9px;
+  }
+
+  .actions {
+    position: absolute;
+    right: 10px;
+    top: 3px;
+    text-align: right;
+
+    a {
+      float: left;
+      margin-left: 5px;
+    }
+  }
+
+  a.remove {
+    @include icon-only-button(#aaa);
+    @include trash-icon;
+  }
+}
+
+button.confirm_encoding {
+  @include icon-button;
+  @include check-icon;
+
+  &.checking {
+    @include arrows-ccw-icon;
+    @include background-icon-animation(blink);
+  }
+}