pageflow 0.0.1

data/app/assets/javascripts/pageflow/editor/views/mixins/selectable_view.js

@@ -0,0 +1,19 @@
+pageflow.selectableView = {
+  initialize: function() {
+    this.listenTo(this.options.selection, 'change:' + this.model.modelName, function(selection, selectedModel) {
+      this.$el.toggleClass('active', selectedModel === this.model);
+    });
+
+    this.$el.toggleClass('active', this.options.selection.get(this.model.modelName) === this.model);
+  },
+
+  select: function() {
+    this.options.selection.set(this.model.modelName, this.model);
+  },
+
+  onClose: function() {
+    if (this.options.selection.get(this.model.modelName) === this.model) {
+      this.options.selection.set(this.model.modelName, null);
+    }
+  }
+};

data/app/assets/javascripts/pageflow/editor/views/mixins/subview_container.js

@@ -0,0 +1,15 @@
+pageflow.subviewContainer = {
+  subview: function(view) {
+    this.subviews = this.subviews || new Backbone.ChildViewContainer();
+    this.subviews.add(view.render());
+    return view;
+  },
+
+  onClose: function() {
+    if (this.subviews) {
+      this.subviews.call('close');
+    }
+  }
+};
+
+Cocktail.mixin(Backbone.Marionette.View, pageflow.subviewContainer);

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

@@ -0,0 +1,16 @@
+pageflow.NavigatableChapterItemView = pageflow.ChapterItemView.extend({
+  mixins: [pageflow.loadable, pageflow.failureIndicatingView],
+
+  events: {
+    'click a.add_page': function() {
+      this.model.addPage();
+    },
+
+    'click a.edit_chapter': function() {
+      if (!this.model.isNew() && !this.model.isDestroying()) {
+        editor.navigate('/chapters/' + this.model.get('id'), {trigger: true});
+      }
+      return false;
+    }
+  }
+});

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

@@ -0,0 +1,12 @@
+pageflow.NavigatablePageItemView = pageflow.PageItemView.extend({
+  mixins: [pageflow.loadable, pageflow.failureIndicatingView],
+
+  events: {
+    'click': function() {
+      if (!this.model.isNew() && !this.model.isDestroying()) {
+        editor.navigate('/pages/' + this.model.get('id'), {trigger: true});
+      }
+      return false;
+    }
+  }
+});

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

@@ -0,0 +1,37 @@
+pageflow.NotificationsView = Backbone.Marionette.ItemView.extend({
+  className: 'notifications',
+  tagName: 'ul',
+  template: 'templates/notifications',
+
+  ui: {
+    failedCount: '.failed .count',
+    uploadingCount: '.uploading .count'
+  },
+
+  events: {
+    'click .retry': function() {
+      pageflow.failedRecords.retry();
+    }
+  },
+
+  onRender: function() {
+    this.listenTo(pageflow.entry, 'change:uploading_files_count', this.notifyUploadCount);
+    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();
+  },
+
+  update: function() {
+    this.$el.toggleClass('failed', !pageflow.failedRecords.isEmpty());
+    this.$el.toggleClass('saving', !pageflow.savingRecords.isEmpty());
+    this.ui.failedCount.text(pageflow.failedRecords.length);
+  },
+
+  notifyUploadCount: function(model, uploadCount) {
+    this.$el.toggleClass('uploading', uploadCount > 0);
+    this.ui.uploadingCount.text(uploadCount);
+  }
+});

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

@@ -0,0 +1,32 @@
+pageflow.OtherEntriesCollectionView = Backbone.Marionette.View.extend({
+  initialize: function() {
+    this.otherEntries = new pageflow.OtherEntriesCollection();
+
+    this.listenTo(this.otherEntries, 'sync', function() {
+      if (this.otherEntries.length === 1) {
+        this.options.selection.set('entry', this.otherEntries.first());
+      }
+    });
+  },
+
+  render: function() {
+    this.subview(new pageflow.CollectionView({
+      el: this.el,
+      collection: this.otherEntries,
+      itemViewConstructor: pageflow.OtherEntryItemView,
+      itemViewOptions: {
+        selection: this.options.selection
+      },
+      blankSlateViewConstructor: Backbone.Marionette.ItemView.extend({
+        template: 'templates/other_entries_blank_slate'
+      }),
+      loadingViewConstructor: Backbone.Marionette.ItemView.extend({
+        template: 'templates/loading'
+      })
+    }));
+
+    this.otherEntries.fetch();
+
+    return this;
+  }
+});

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

@@ -0,0 +1,18 @@
+pageflow.OtherEntryItemView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/other_entry_item',
+  className: 'other_entry_item',
+
+  mixins: [pageflow.selectableView],
+
+  ui: {
+    title: '.title'
+  },
+
+  events: {
+   'click': 'select'
+  },
+
+  onRender: function() {
+    this.ui.title.text(this.model.titleOrSlug());
+  }
+});

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

@@ -0,0 +1,49 @@
+pageflow.PageItemView = Backbone.Marionette.ItemView.extend({
+  tagName: 'li',
+  template: 'templates/page_item',
+
+  ui: {
+    title: '.title',
+    pictogram: '.type_pictogram',
+    pageThumbnail: '.page_thumbnail'
+  },
+
+  modelEvents: {
+    'change:title': 'update',
+    'change:active': 'update'
+  },
+
+  onRender: function() {
+    this.subview(new pageflow.PageThumbnailView({
+      el: this.ui.pageThumbnail,
+      model: this.model
+    }));
+
+    this.update();
+  },
+
+  update: function() {
+    this.$el.attr('data-id', this.model.id);
+    this.$el.attr('data-perma-id', this.model.get('perma_id'));
+
+    this.$el.toggleClass('active', this.model.get('active'));
+    this.$el.toggleClass('display_in_navigation', !!this.model.configuration.get('display_in_navigation'));
+    this.$el
+      .removeClass(_.pluck(pageflow.Page.types, 'name').join(' '))
+      .addClass(this.model.get('template'));
+
+    this.ui.pictogram.attr('title', this._getPictogramTitle());
+    this.ui.title.text(this.model.title() || '(Unbenannt)');
+  },
+
+  _getPictogramTitle: function() {
+    var result = I18n.t('activerecord.values.page.template.' + this.model.get('template'));
+    result += ' Seite';
+
+    if (this.options.displayInNavigationHint && !this.model.configuration.get('display_in_navigation')) {
+      result += ' (nicht in Navigationsleiste)';
+    }
+
+    return result;
+  }
+});

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

@@ -0,0 +1,97 @@
+pageflow.PagePreviewView = Backbone.Marionette.View.extend({
+  tagName: 'section',
+  className: 'page',
+
+  modelEvents: {
+    'change:template': 'updateTemplate',
+
+    'change:configuration': 'update',
+
+    'sync': function() {
+      this.$el.attr('data-id', this.model.id);
+      this.$el.attr('data-perma-id', this.model.get('perma_id'));
+    }
+  },
+
+  events: {
+    pageactivate: function() {
+      this.model.set('active', true);
+    },
+
+    pagedeactivate: function() {
+      this.model.set('active', false);
+    }
+  },
+
+  render: function() {
+    this.$el.html(this.pageTemplate());
+    this.$el.attr('data-id', this.model.id);
+    this.$el.attr('data-perma-id', this.model.get('perma_id'));
+    this.$el.data('template', this.model.get('template'));
+    this.$el.data('configuration', this.model.get('configuration'));
+
+    this.$el.page();
+    this.update();
+    this.$el.page('reactivate');
+
+    this.initEmbeddedViews();
+
+    return this;
+  },
+
+  updateTemplate: function() {
+    this.$el.html(this.pageTemplate());
+    this.$el.attr('data-id', this.model.id);
+    this.$el.attr('data-perma-id', this.model.get('perma_id'));
+    this.$el.data('template', this.model.get('template'));
+    this.$el.data('configuration', this.model.get('configuration'));
+
+    this.$el.page('reinit');
+    this.update();
+    this.$el.page('reactivate');
+
+    this.initEmbeddedViews();
+  },
+
+  update: function() {
+    this.$el.removeClass(pageflow.Page.transitions.join(' ')).addClass(this.model.configuration.get('transition'));
+    this.pageType().update(this.$el, this.model.configuration);
+    this.refreshScroller();
+  },
+
+  pageType: function() {
+    return this.$el.data('pageType');
+  },
+
+  pageTemplate: function() {
+    return this._unescape($('script[data-template="' + this.model.get('template') + '_page"]').html());
+  },
+
+  refreshScroller: function() {
+    this.$el.page('refreshScroller');
+  },
+
+  initEmbeddedViews: function() {
+    var view = this;
+
+    if (view.embeddedViews) {
+      view.embeddedViews.call('close');
+    }
+
+    view.embeddedViews = new Backbone.ChildViewContainer();
+
+    _.each(view.pageType().embeddedEditorViews(), function(item, selector) {
+      view.$(selector).each(function() {
+        view.embeddedViews.add(new item.view(_.extend(item.options || {}, {
+          el: this,
+          model: view.model.configuration,
+          container: view
+        })).render());
+      });
+    });
+  },
+
+  _unescape: function(text) {
+    return $('<div/>').html(text).text();
+  }
+});

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

@@ -0,0 +1,30 @@
+pageflow.PageThumbnailView = Backbone.Marionette.View.extend({
+  modelEvents: {
+    'change:configuration': 'update'
+  },
+
+  render: function() {
+    this.update();
+    return this;
+  },
+
+  update: function() {
+    if (this.fileThumbnailView && this.currentFileThumbnail == this.model.thumbnailFile()) {
+      return;
+    }
+
+    this.currentFileThumbnail = this.model.thumbnailFile();
+
+    if (this.fileThumbnailView) {
+      this.fileThumbnailView.close();
+    }
+
+    this.fileThumbnailView = this.subview(new pageflow.FileThumbnailView({
+      model: this.model.thumbnailFile(),
+      className: 'thumbnail file_thumbnail',
+      imageUrlPropertyName: this.options.imageUrlPropertyName
+    }));
+
+    this.$el.append(this.fileThumbnailView.el);
+  }
+});

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

@@ -0,0 +1,191 @@
+pageflow.PublishEntryView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/publish_entry',
+  className: 'publish_entry',
+
+  ui: {
+    publishUntilFields: '.publish_until_fields',
+    publishUntilField: 'input[name=publish_until]',
+    publishUntilTimeField: 'input[name=publish_until_time]',
+    publishUntilRadioBox: '#publish_entry_until',
+    publishForeverRadioBox: 'input[value=publish_forever]',
+    revisionsLink: '.published.notice a',
+    publishedNotice: '.published.notice',
+    saveButton: 'button.save'
+  },
+
+  events: {
+    'click a.back': 'goBack',
+
+    'click button.save': 'save',
+
+    'click input#publish_entry_forever': 'enablePublishForever',
+
+    'click input#publish_entry_until': 'enablePublishUntilFields',
+
+    'focus .publish_until_fields input':  'enablePublishUntilFields',
+
+    'change .publish_until_fields input':  'checkPublishUntil'
+  },
+
+  modelEvents: {
+    'change': 'update',
+
+    'change:published': function(model, value) {
+      if (value) {
+        this.ui.publishedNotice.effect('highlight', {
+          duration: 'slow'
+        });
+      }
+    }
+  },
+
+  onRender: function() {
+    this.ui.publishUntilField.datepicker({
+      dateFormat: 'dd.mm.yy',
+      constrainInput: true,
+      defaultDate: new Date(),
+      minDate: new Date()
+    });
+
+    this.update();
+  },
+
+  update: function() {
+    this.$el.toggleClass('files_pending', this.model.get('uploading_files_count') > 0 || this.model.get('pending_files_count') > 0);
+    this.$el.toggleClass('published', this.model.get('published'));
+
+    this.ui.revisionsLink.attr('href', '/admin/entries/' + this.model.id);
+
+    var publishedUntil = new Date(this.model.get('published_until'));
+    if (publishedUntil > new Date()) {
+      this.ui.publishUntilField.datepicker('setDate', publishedUntil);
+      this.ui.publishUntilTimeField.val(timeStr(publishedUntil));
+    }
+
+    // Helpers
+    function timeStr(date) {
+      return twoDigits(date.getHours()) + ':' + twoDigits(date.getMinutes());
+
+      function twoDigits(val) {
+        return ("0" + val).slice(-2);
+      }
+    }
+  },
+
+  goBack: function() {
+    editor.navigate('/', {trigger: true});
+  },
+
+  save: function() {
+    var publishedUntil = null;
+
+    if (this.$el.hasClass('publishing')) {
+      return;
+    }
+
+    if (this.ui.publishUntilRadioBox.is(':checked')) {
+      publishedUntil = this.ui.publishUntilField.datepicker('getDate');
+      setTime(publishedUntil, this.ui.publishUntilTimeField.val());
+
+      if (!this.checkPublishUntilTime()) {
+        alert('Bitte legen Sie einen gültigen Depublikationszeitpunkt fest.');
+        this.ui.publishUntilTimeField.focus();
+        return;
+      }
+
+      if (!publishedUntil || !checkDate(publishedUntil)) {
+        alert('Bitte legen Sie ein Depublikationsdatum fest.');
+        this.ui.publishUntilField.focus();
+        return;
+      }
+    }
+
+    var that = this;
+
+    this.model.publish({published_until: publishedUntil})
+      .done()
+      .fail(function() {
+        alert('Beim Veröffentlichen ist ein Fehler aufgetreten');
+      })
+      .always(function() {
+        that.$el.removeClass('publishing');
+        that.$('input').removeAttr('disabled');
+        that.enableSave();
+      });
+
+    this.$el.addClass('publishing');
+    this.$('input').attr('disabled', '1');
+    this.disableSave();
+
+    // Helpers
+    function setTime(date, time) {
+      date.setHours.apply(date, parseTime(time));
+    }
+
+    function parseTime(str) {
+      return str.split(':').map(function(number) { return parseInt(number, 10); });
+    }
+
+    function checkDate(date) {
+      if ( Object.prototype.toString.call(date) === "[object Date]" ) {
+        if ( isNaN( date.getTime() ) ) {
+          return false;
+        }
+        return true;
+      }
+      return false;
+    }
+  },
+
+  enableSave: function() {
+    this.ui.saveButton.removeAttr('disabled');
+  },
+
+  disableSave: function() {
+    this.ui.saveButton.attr('disabled', true);
+  },
+
+  enablePublishUntilFields: function() {
+    this.ui.publishForeverRadioBox[0].checked = false;
+    this.ui.publishUntilRadioBox[0].checked = true;
+
+    this.ui.publishUntilFields.removeClass('disabled');
+    this.checkPublishUntil();
+  },
+
+  disablePublishUntilFields: function() {
+    this.ui.publishUntilRadioBox[0].checked = false;
+    this.ui.publishUntilFields.addClass('disabled');
+
+    if (!this.checkPublishUntilTime()) {
+      this.ui.publishUntilTimeField.val('00:00');
+      this.ui.publishUntilTimeField.removeClass('invalid');
+    }
+  },
+
+  enablePublishForever: function() {
+    this.disablePublishUntilFields();
+    this.ui.publishForeverRadioBox[0].checked = true;
+    this.enableSave();
+  },
+
+  checkPublishUntil: function() {
+      var publishedUntil = this.ui.publishUntilField.datepicker('getDate');
+
+      if (!publishedUntil || !this.checkPublishUntilTime()) {
+        this.disableSave();
+        return false;
+      }
+      this.enableSave();
+      return true;
+  },
+
+  checkPublishUntilTime: function() {
+    if (!this.ui.publishUntilTimeField.val().match(/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/)) {
+      this.ui.publishUntilTimeField.addClass('invalid');
+      return false;
+    }
+    this.ui.publishUntilTimeField.removeClass('invalid');
+    return true;
+  }
+});