pageflow 0.8.2 → 0.9.0

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

@@ -1,5 +1,6 @@
 pageflow.NavigatablePageItemView = pageflow.PageItemView.extend({
   mixins: [pageflow.loadable, pageflow.failureIndicatingView],
+  className: 'draggable',
 
   events: {
     'click': function() {

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

@@ -18,11 +18,11 @@ pageflow.OtherEntriesCollectionView = Backbone.Marionette.View.extend({
         selection: this.options.selection
       },
       blankSlateViewConstructor: Backbone.Marionette.ItemView.extend({
-        template: 'templates/other_entries_blank_slate'
+        template: 'templates/other_entries_blank_slate',
+        tagName: 'li',
+        className: 'blank_slate'
       }),
-      loadingViewConstructor: Backbone.Marionette.ItemView.extend({
-        template: 'templates/loading'
-      })
+      loadingViewConstructor: pageflow.LoadingView
     }));
 
     this.otherEntries.fetch();

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

@@ -1,6 +1,7 @@
 pageflow.OtherEntryItemView = Backbone.Marionette.ItemView.extend({
   template: 'templates/other_entry_item',
   className: 'other_entry_item',
+  tagName: 'li',
 
   mixins: [pageflow.selectableView],
 
@@ -9,7 +10,7 @@ pageflow.OtherEntryItemView = Backbone.Marionette.ItemView.extend({
   },
 
   events: {
-   'click': 'select'
+    'click': 'select'
   },
 
   onRender: function() {

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

@@ -29,7 +29,7 @@ pageflow.PageItemView = Backbone.Marionette.ItemView.extend({
     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(' '))
+      .removeClass(pageflow.editor.pageTypes.pluck('name').join(' '))
       .addClass(this.model.get('template'));
 
     this.ui.pictogram.attr('title', this._getPictogramTitle());
@@ -37,7 +37,7 @@ pageflow.PageItemView = Backbone.Marionette.ItemView.extend({
   },
 
   _getPictogramTitle: function() {
-    var result = I18n.t(this.model.pageType().translation_key);
+    var result = I18n.t(this.model.pageType().translationKey());
     result += ' Seite';
 
     if (this.options.displayInNavigationHint && !this.model.configuration.get('display_in_navigation')) {

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

@@ -0,0 +1,51 @@
+pageflow.PageLinkItemView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/editor/templates/page_link_item',
+
+  tagName: 'li',
+  className: 'page_link',
+
+  ui: {
+    thumbnail: '.page_thumbnail',
+    title: '.title',
+    label: '.label',
+    editButton: '.edit'
+  },
+
+  events: {
+    'click .edit': function() {
+      pageflow.editor.navigate(this.model.editPath(), {trigger: true});
+      return false;
+    },
+
+    'mouseenter': function() {
+      this.model.highlight(true);
+    },
+
+    'mouseleave': function() {
+      this.model.resetHighlight(false);
+    }
+  },
+
+  onRender: function() {
+    var page = this.model.targetPage();
+
+    if (page) {
+      this.subview(new pageflow.PageThumbnailView({
+        el: this.ui.thumbnail,
+        model: page
+      }));
+
+      this.$el.addClass(page.get('template'));
+      this.ui.title.text(page.title() || I18n.t('pageflow.editor.views.page_link_item_view.unnamed'));
+    }
+    else {
+      this.ui.title.text(I18n.t('pageflow.editor.views.page_link_item_view.no_page'));
+    }
+
+    this.ui.label.text(this.model.label());
+    this.ui.label.toggle(!!this.model.label());
+    this.ui.editButton.toggle(!!this.model.editPath());
+
+    this.$el.toggleClass('dangling', !page);
+  },
+});

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

@@ -0,0 +1,45 @@
+pageflow.PageLinksView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/editor/templates/page_links',
+  className: 'page_links',
+
+  ui: {
+    links: 'ul.links',
+    addButton: '.add_link'
+  },
+
+  events: {
+    'click .add_link': function() {
+      var view = this;
+
+      pageflow.editor.selectPage().then(function(page) {
+        view.model.pageLinks().addLink(page.get('perma_id'));
+      });
+
+      return false;
+    }
+  },
+
+  onRender: function() {
+    var pageLinks = this.model.pageLinks();
+    var collectionViewConstructor = pageLinks.saveOrder ? pageflow.SortableCollectionView : pageflow.CollectionView;
+
+    this.subview(new collectionViewConstructor({
+      el: this.ui.links,
+      collection: pageLinks,
+      itemViewConstructor: pageflow.PageLinkItemView,
+      itemViewOptions: {
+        pageLinks: pageLinks
+      }
+    }));
+
+    this.listenTo(pageLinks, 'add remove', function() {
+      this.updateAddButton(pageLinks);
+    });
+
+    this.updateAddButton(pageLinks);
+  },
+
+  updateAddButton: function(pageLinks) {
+    this.ui.addButton.css('display', pageLinks.canAddLink() ? 'inline-block' : 'none');
+  }
+});

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

@@ -12,6 +12,7 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
     'sync': function() {
       this.$el.attr('data-id', this.model.id);
       this.$el.attr('data-perma-id', this.model.get('perma_id'));
+      this.$el.attr('id', this.model.get('perma_id'));
     }
   },
 
@@ -27,17 +28,21 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
 
   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.attr('id', this.model.get('perma_id'));
+    this.$el.attr('data-chapter-id', this.model.get('chapter_id'));
+
     this.$el.data('template', this.model.get('template'));
     this.$el.data('configuration', this.model.get('configuration'));
 
-    this.$el.page();
-    this.updateChapterBeginningClass();
-    this.update();
-    this.$el.page('reactivate');
+    this.$el.on('pageenhanced', _.bind(function() {
+      this.update();
+      this.initEmbeddedViews();
 
-    this.initEmbeddedViews();
+      this.$el.page('reactivate');
+    }, this));
 
     return this;
   },
@@ -49,21 +54,16 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
     this.$el.data('template', this.model.get('template'));
 
     this.$el.page('reinit');
-    this.updateChapterBeginningClass();
-    this.update();
-    this.$el.page('reactivate');
-
-    this.initEmbeddedViews();
   },
 
   update: function() {
-    this.$el.removeClass(pageflow.Page.transitions.join(' ')).addClass(this.model.configuration.get('transition'));
+    this.$el.page('update', this.model.configuration);
 
-    this.pageType().update(this.$el, this.model.configuration);
-    _.extend(this.$el.data('configuration'), this.model.configuration.attributes);
+    pageflow.events.trigger('page:update', this.model);
 
     this.refreshScroller();
     this.ensureTargetBlankForContentLinks();
+    this.updateChapterBeginningClass();
   },
 
   updateChapterBeginningClass: function() {
@@ -71,8 +71,8 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
     this.$el.toggleClass('chapter_beginning', chapterBeginning);
   },
 
-  pageType: function() {
-    return this.$el.data('pageType');
+  pageTypeHooks: function() {
+    return pageflow.pageType.get(this.model.get('template'));
   },
 
   pageTemplate: function() {
@@ -96,7 +96,7 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
 
     view.embeddedViews = new Backbone.ChildViewContainer();
 
-    _.each(view.pageType().embeddedEditorViews(), function(item, selector) {
+    _.each(view.embeddedViewDefinitions(), function(item, selector) {
       view.$(selector).each(function() {
         view.embeddedViews.add(new item.view(_.extend(item.options || {}, {
           el: this,
@@ -107,6 +107,14 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
     });
   },
 
+  embeddedViewDefinitions: function() {
+    return _.extend(
+      {},
+      this.pageTypeHooks().embeddedEditorViews() || {},
+      this.model.pageType().embeddedViews()
+    );
+  },
+
   _unescape: function(text) {
     return $('<div/>').html(text).text();
   }

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

@@ -0,0 +1,46 @@
+pageflow.PageSelectionView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/page_selection',
+  className: 'page_selection dialog',
+
+  mixins: [pageflow.dialogView],
+
+  ui: {
+    chapters: 'ul.chapters',
+  },
+
+  events: {
+    'click ul.pages li': function(event) {
+      this.options.onSelect(pageflow.pages.get($(event.currentTarget).data('id')));
+      this.close();
+    }
+  },
+
+  onRender: function() {
+    var onSelect = this.onSelect;
+
+    this.subview(new pageflow.CollectionView({
+      el: this.ui.chapters,
+      collection: this.model.chapters,
+      itemViewConstructor: pageflow.ChapterItemView,
+      itemViewOptions: {
+        pageItemView: pageflow.PageItemView,
+        sortable: false
+      }
+    }));
+  }
+});
+
+pageflow.PageSelectionView.selectPage = function() {
+  return $.Deferred(function(deferred) {
+    var view = new pageflow.PageSelectionView({
+      model: pageflow.entry,
+      onSelect: deferred.resolve
+    });
+
+    view.on('close', function() {
+      deferred.reject();
+    });
+
+    pageflow.app.dialogRegion.show(view.render());
+  }).promise();
+};

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

@@ -1,30 +1,3 @@
-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);
-  }
+pageflow.PageThumbnailView = pageflow.ModelThumbnailView.extend({
+  className: 'model_thumbnail page_thumbnail'
 });

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

@@ -8,6 +8,13 @@ pageflow.PublishEntryView = Backbone.Marionette.ItemView.extend({
     publishUntilTimeField: 'input[name=publish_until_time]',
     publishUntilRadioBox: '#publish_entry_until',
     publishForeverRadioBox: 'input[value=publish_forever]',
+    passwordProtectedCheckBox: 'input[name=password_protected]',
+    passwordFields: '.password_fields',
+    userNameField: 'input[name=user_name]',
+    passwordField: 'input[name=password]',
+    alreadyPublishedWithPassword: '.already_published_with_password',
+    previouslyPublishedWithPassword: '.previously_published_with_password',
+    alreadyPublishedWithoutPassword: '.already_published_without_password',
     revisionsLink: '.published.notice a',
     publishedNotice: '.published.notice',
     saveButton: 'button.save',
@@ -24,7 +31,13 @@ pageflow.PublishEntryView = Backbone.Marionette.ItemView.extend({
 
     'focus .publish_until_fields input':  'enablePublishUntilFields',
 
-    'change .publish_until_fields input':  'checkPublishUntil'
+    'change .publish_until_fields input':  'checkForm',
+
+    'click input#publish_password_protected': 'togglePasswordFields',
+
+    'keyup input[name=password]': 'checkForm',
+
+    'change input[name=password]': 'checkForm'
   },
 
   modelEvents: {
@@ -63,6 +76,23 @@ pageflow.PublishEntryView = Backbone.Marionette.ItemView.extend({
       this.ui.publishUntilField.datepicker('setDate', publishedUntil);
       this.ui.publishUntilTimeField.val(timeStr(publishedUntil));
     }
+    else {
+      this.ui.publishUntilField.datepicker('setDate', oneYearFromNow());
+    }
+
+    this.ui.userNameField.val(pageflow.account.get('name'));
+
+    if (this.model.get('password_protected')) {
+      this.ui.passwordProtectedCheckBox.prop('checked', true);
+      this.togglePasswordFields();
+    }
+    else {
+      this.ui.passwordField.val(this.randomPassword());
+    }
+
+    this.ui.alreadyPublishedWithPassword.toggle(this.model.get('published') && this.model.get('password_protected'));
+    this.ui.previouslyPublishedWithPassword.toggle(!this.model.get('published') && this.model.get('password_protected'));
+    this.ui.alreadyPublishedWithoutPassword.toggle(this.model.get('published') && !this.model.get('password_protected'));
 
     // Helpers
     function timeStr(date) {
@@ -72,6 +102,12 @@ pageflow.PublishEntryView = Backbone.Marionette.ItemView.extend({
         return ("0" + val).slice(-2);
       }
     }
+
+    function oneYearFromNow() {
+      var date = new Date();
+      date.setFullYear(date.getFullYear() + 1);
+      return date;
+    }
   },
 
   save: function() {
@@ -100,7 +136,11 @@ pageflow.PublishEntryView = Backbone.Marionette.ItemView.extend({
 
     var that = this;
 
-    this.options.entryPublication.publish({published_until: publishedUntil})
+    this.options.entryPublication.publish({
+      published_until: publishedUntil,
+      password_protected: this.ui.passwordProtectedCheckBox.is(':checked'),
+      password: this.ui.passwordField.val()
+    })
       .fail(function() {
         alert('Beim Veröffentlichen ist ein Fehler aufgetreten');
       })
@@ -156,17 +196,20 @@ pageflow.PublishEntryView = Backbone.Marionette.ItemView.extend({
     this.ui.publishUntilRadioBox[0].checked = true;
 
     this.ui.publishUntilFields.removeClass('disabled');
-    this.checkPublishUntil();
+    this.checkForm();
   },
 
   disablePublishUntilFields: function() {
     this.ui.publishUntilRadioBox[0].checked = false;
     this.ui.publishUntilFields.addClass('disabled');
+    this.checkForm();
 
     if (!this.checkPublishUntilTime()) {
       this.ui.publishUntilTimeField.val('00:00');
-      this.ui.publishUntilTimeField.removeClass('invalid');
     }
+
+    this.ui.publishUntilTimeField.removeClass('invalid');
+    this.ui.publishUntilField.removeClass('invalid');
   },
 
   enablePublishForever: function() {
@@ -175,15 +218,31 @@ pageflow.PublishEntryView = Backbone.Marionette.ItemView.extend({
     this.enableSave();
   },
 
+  checkForm: function() {
+    if (_.all([this.checkPublishUntil(), this.checkPassword()])) {
+      this.enableSave();
+    }
+    else{
+      this.disableSave();
+    }
+  },
+
   checkPublishUntil: function() {
-      var publishedUntil = this.ui.publishUntilField.datepicker('getDate');
+    return (this.ui.publishForeverRadioBox.is(':checked') ||
+      (this.ui.publishUntilRadioBox.is(':checked') &&
+       _.all([this.checkPublishUntilDate(),
+              this.checkPublishUntilTime()])));
+  },
 
-      if (!publishedUntil || !this.checkPublishUntilTime()) {
-        this.disableSave();
-        return false;
-      }
-      this.enableSave();
+  checkPublishUntilDate: function() {
+    if (this.ui.publishUntilField.datepicker('getDate')) {
+      this.ui.publishUntilField.removeClass('invalid');
       return true;
+    }
+    else {
+      this.ui.publishUntilField.addClass('invalid');
+      return false;
+    }
   },
 
   checkPublishUntilTime: function() {
@@ -193,6 +252,32 @@ pageflow.PublishEntryView = Backbone.Marionette.ItemView.extend({
     }
     this.ui.publishUntilTimeField.removeClass('invalid');
     return true;
+  },
+
+  togglePasswordFields: function() {
+    this.ui.passwordFields.toggleClass('disabled', !this.ui.passwordProtectedCheckBox.is(':checked'));
+    this.checkForm();
+  },
+
+  checkPassword: function() {
+    if (this.ui.passwordField.val().length === 0 &&
+        !this.model.get('password_protected') &&
+        this.ui.passwordProtectedCheckBox.is(':checked')) {
+      this.ui.passwordField.addClass('invalid');
+      return false;
+    }
+    else {
+      this.ui.passwordField.removeClass('invalid');
+      return true;
+    }
+  },
+
+  randomPassword: function() {
+    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+    return _(10).times(function() {
+      return possible.charAt(Math.floor(Math.random() * possible.length));
+    }).join('');
   }
 });