pageflow 0.0.1

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

@@ -0,0 +1,10 @@
+pageflow.HelpButtonView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/help_button',
+  className: 'help_button',
+
+  events: {
+    'click': function() {
+      pageflow.app.trigger('toggle-help');
+    }
+  }
+});

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

@@ -0,0 +1,70 @@
+pageflow.HelpView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/help',
+  className: 'help',
+
+  defaultSection: 'outline',
+
+  routeSectionMapping: {
+    'pages': 'page',
+    'files': 'files',
+    'publish': 'publish'
+  },
+
+  ui: {
+    breakButton: '.break',
+    message: '.error .message',
+    sections: 'section',
+    menuItems: 'li'
+  },
+
+  events: {
+    'click .close': function() {
+      this.toggle();
+    },
+
+    'click li': function(event) {
+      this.showSection($(event.currentTarget).data('section'));
+    },
+
+    'click .box': function() {
+      return false;
+    },
+
+    'click': function() {
+      this.toggle();
+    }
+  },
+
+  initialize: function() {
+    this.listenTo(pageflow.app, 'toggle-help', function() {
+      this.chooseSectionFromFragment();
+      this.toggle();
+    });
+  },
+
+  toggle: function() {
+    this.$el.toggle();
+  },
+
+  chooseSectionFromFragment: function() {
+    var route = _.chain(this.routeSectionMapping).keys().find(function(route) {
+      if (Backbone.history.fragment.indexOf(route) >= 0) {
+        return true;
+      }
+    }, this).value();
+
+    this.showSection(this.routeSectionMapping[route] || this.defaultSection);
+  },
+
+  showSection: function(name) {
+    this.ui.menuItems.each(function() {
+      var menuItem = $(this);
+      menuItem.toggleClass('active', menuItem.data('section') === name);
+    });
+
+    this.ui.sections.each(function() {
+      var section = $(this);
+      section.toggle(section.data('name') === name);
+    });
+  }
+});

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

@@ -0,0 +1,10 @@
+pageflow.ImageFileItemView = pageflow.FileItemView.extend({
+  metaDataViews: function() {
+    return [
+      new pageflow.FileMetaDataItemView({
+        model: this.model,
+        attribute: 'dimensions'
+      })
+    ];
+  }
+});

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

@@ -0,0 +1,153 @@
+pageflow.ImagePositioningView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/image_positioning',
+  className: 'image_positioning dialog',
+
+  mixins: [pageflow.dialogView],
+
+  ui: {
+    screenList: 'ul.screens',
+    container: '.container',
+
+    maskLeft: '.mask.left',
+    maskRight: '.mask.right',
+    maskTop: '.mask.top',
+    maskBottom: '.mask.bottom',
+
+    sliderHorizontal: '.horizontal.slider',
+    sliderVertical: '.vertical.slider'
+  },
+
+  screenRatios: {
+    ratio16to9: 16 / 9,
+    ratio4to3: 4 / 3
+  },
+
+  events: {
+    'click .save': function() {
+      this.save();
+      this.close();
+    }
+  },
+
+  initialize: function() {
+    this.currentScreen = _.keys(this.screenRatios)[0];
+  },
+
+  onRender: function() {
+    var image = $('<img />').attr('src', this.model.getImageFileUrl(this.options.propertyName));
+    this.ui.container.append(image);
+
+    var view = this;
+
+    this.ui.sliderVertical.slider({
+      orientation: 'vertical',
+      value: 100 - this.model.getImageFilePosition(this.options.propertyName, 'y'),
+
+      slide: function(event, ui) {
+        view.updateMaskPosition({y: 100 - ui.value});
+      },
+
+      start: function() {
+        view.ui.maskLeft.hide();
+        view.ui.maskRight.hide();
+      },
+
+      stop: function() {
+        view.ui.maskLeft.show();
+        view.ui.maskRight.show();
+      },
+    });
+
+    this.ui.sliderHorizontal.slider({
+      orientation: 'horizontal',
+      value: this.model.getImageFilePosition(this.options.propertyName, 'x'),
+
+      slide: function(event, ui) {
+        view.updateMaskPosition({x: ui.value});
+      },
+
+      start: function() {
+        view.ui.maskTop.hide();
+        view.ui.maskBottom.hide();
+      },
+
+      stop: function() {
+        view.ui.maskTop.show();
+        view.ui.maskBottom.show();
+      },
+    });
+
+    this.updateScreens();
+  },
+
+  onShow: function() {
+    this.updateMaskSize();
+  },
+
+  save: function() {
+    this.model.setImageFilePosition(this.options.propertyName, 'x', this.ui.sliderHorizontal.slider('value'));
+    this.model.setImageFilePosition(this.options.propertyName, 'y', 100 - this.ui.sliderVertical.slider('value'));
+  },
+
+  updateScreens: function() {
+    var view = this;
+
+    _.each(_.keys(this.screenRatios), function(name) {
+      var item = $('<li><a href=""></a></li>');
+      item.find('a').text(I18n.t('editor.screens.' + name));
+
+      item.on('click', function() {
+        view.ui.screenList.find('li').removeClass('active');
+        $(this).addClass('active');
+
+        view.currentScreen = name;
+        view.updateMaskSize();
+      });
+
+      view.ui.screenList.append(item);
+    });
+
+    view.ui.screenList.find('li').first().addClass('active');
+  },
+
+  updateMaskPosition: function(options) {
+    options = options || {};
+    var x = 'x' in options ? options.x : this.ui.sliderHorizontal.slider('value');
+    var y = 'y' in options ? options.y : 100 - this.ui.sliderVertical.slider('value');
+
+    this.ui.maskLeft.width((this.ui.container.width() - this.maskWidth()) * x / 100);
+    this.ui.maskRight.width((this.ui.container.width() - this.maskWidth()) * (1 - x / 100));
+    this.ui.maskTop.height((this.ui.container.height() - this.maskHeight()) * y / 100);
+    this.ui.maskBottom.height((this.ui.container.height() - this.maskHeight()) * (1 - y / 100));
+  },
+
+  updateMaskSize: function() {
+    this.ui.sliderHorizontal.css({
+      left: this.maskWidth() / 2,
+      right: this.maskWidth() / 2
+    });
+
+    this.ui.sliderVertical.css({
+      top: this.maskHeight() / 2,
+      bottom: this.maskHeight() / 2
+    });
+
+    this.updateMaskPosition();
+  },
+
+  maskWidth: function() {
+    return this.ui.container.height() / this.maskRatio();
+  },
+
+  maskHeight: function() {
+    return this.ui.container.width() / this.maskRatio();
+  },
+
+  maskRatio: function() {
+    return this.screenRatios[this.currentScreen];
+  }
+});
+
+pageflow.ImagePositioningView.open = function(options) {
+  pageflow.app.dialogRegion.show(new pageflow.ImagePositioningView(options).render());
+};

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

@@ -0,0 +1,25 @@
+pageflow.inputView = {
+  ui: {
+    labelText: 'label .name',
+    inlineHelp: 'label .inline_help'
+  },
+
+  onRender: function() {
+    this.$el.addClass(this.model.modelName + '_' + this.options.propertyName);
+    this.ui.labelText.text(this.localizedAttributeName());
+
+    this.ui.inlineHelp.text(this.inlineHelpText());
+
+    if (!this.inlineHelpText()) {
+      this.ui.inlineHelp.hide();
+    }
+  },
+
+  localizedAttributeName: function() {
+    return I18n.t('activerecord.attributes.' + this.model.modelName + '.' + this.options.propertyName);
+  },
+
+  inlineHelpText: function() {
+    return I18n.t('editor.inline_help.' + this.model.modelName + '.' + this.options.propertyName, {defaultValue: ''});
+  }
+};

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

@@ -0,0 +1,29 @@
+pageflow.CheckBoxInputView = Backbone.Marionette.ItemView.extend({
+  mixins: [pageflow.inputView],
+
+  template: 'templates/inputs/check_box',
+  className: 'check_box_input',
+
+  events: {
+    'change': 'save'
+  },
+
+  ui: {
+    input: 'input',
+    label: 'label'
+  },
+
+  onRender: function() {
+    this.ui.label.attr('for', this.cid);
+    this.ui.input.attr('id', this.cid);
+    this.load();
+  },
+
+  save: function() {
+    this.model.set(this.options.propertyName, this.ui.input.is(':checked'));
+  },
+
+  load: function() {
+    this.ui.input.attr('checked', this.model.get(this.options.propertyName));
+  }
+});

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

@@ -0,0 +1,66 @@
+/*global editor*/
+
+pageflow.FileInputView = Backbone.Marionette.ItemView.extend({
+  mixins: [pageflow.inputView],
+
+  template: 'templates/inputs/file_input',
+  className: 'file_input',
+
+  ui: {
+    fileName: '.file_name',
+    thumbnail: '.file_thumbnail',
+    editPositioningButton: '.edit_positioning',
+    unsetButton: '.unset'
+  },
+
+  events: {
+    'click .choose': function() {
+      editor.navigate(
+        '/files/' + this.options.collection.name +'?page=' + this.model.page.id + '&attribute=' + this.options.propertyName,
+        {trigger: true}
+      );
+      return false;
+    },
+
+    'click .unset': function() {
+      this.model.unsetReference(this.options.propertyName);
+      return false;
+    },
+
+    'click. .edit_positioning': function() {
+      pageflow.ImagePositioningView.open({
+        model: this.model,
+        propertyName: this.options.propertyName
+      });
+      return false;
+    }
+  },
+
+  initialize: function() {
+    this.options = _.extend({
+      imagePositioning: true
+    }, this.options);
+  },
+
+  onRender: function() {
+    this.update();
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this.update);
+  },
+
+  update: function() {
+    var file = this._getFile();
+
+    this.ui.fileName.text(file ? file.get('file_name') : '(Kein)');
+    this.ui.unsetButton.toggle(!!file);
+    this.ui.editPositioningButton.toggle(this.options.imagePositioning && !!file && file.isPositionable());
+
+    this.subview(new pageflow.FileThumbnailView({
+      el: this.ui.thumbnail,
+      model: file
+    }));
+  },
+
+  _getFile: function() {
+    return this.model.getReference(this.options.propertyName, this.options.collection);
+  }
+});

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

@@ -0,0 +1,44 @@
+pageflow.PageReferenceInputView = Backbone.Marionette.ItemView.extend({
+  mixins: [pageflow.inputView],
+
+  template: 'templates/inputs/page_reference',
+  className: 'page_reference_input',
+
+  ui: {
+    chapters: 'ul.chapters'
+  },
+
+  modelEvents: {
+    'change:linked_page_ids': function() {
+      this._highlightUsedPages();
+    }
+  },
+
+  onRender: function() {
+    this.model.page.set('linked_page_ids_editable', true);
+
+    this.subview(new pageflow.CollectionView({
+      el: this.ui.chapters,
+      collection: pageflow.entry.chapters,
+      itemViewConstructor: pageflow.ChapterItemView,
+      itemViewOptions: {
+        pageItemView: pageflow.DraggablePageItemView
+      }
+    }));
+
+    this._highlightUsedPages();
+  },
+
+  onClose: function() {
+    this.model.page.unset('linked_page_ids_editable');
+  },
+
+  _highlightUsedPages: function() {
+    var model = this.model;
+
+    this.$('ul.pages > li').each(function() {
+      var usedPageIds = _.values(model.get('linked_page_ids') || {});
+      $(this).toggleClass('used', _.contains(usedPageIds, $(this).data('permaId')));
+    });
+  }
+});

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

@@ -0,0 +1,39 @@
+//= require ./url_input_view
+
+pageflow.ProxyUrlInputView = pageflow.UrlInputView.extend({
+  /** @override */
+  validateUrl: function(url) {
+    var view = this;
+
+    return $.Deferred(function(deferred) {
+      deferred.notify('Pr<C3><BC>fe Erreichbarkeit der URL...');
+
+      $.ajax({
+        url: view.rewriteUrl(url),
+        dataType: 'html'
+      })
+        .done(deferred.resolve)
+        .fail(function(xhr) {
+          deferred.reject('Die URL konnte nicht erfolgreich abgerufen werden (Der Server antwortete mit HTTP Status Code ' + xhr.status + ')');
+        });
+    }).promise();
+  },
+
+  /** @override */
+  transformPropertyValue: function(url) {
+    return this.rewriteUrl(url);
+  },
+
+  /** @override */
+  supportedHosts: function() {
+    return _.pluck(this.options.proxies, 'url');
+  },
+
+  rewriteUrl: function(url) {
+    _.each(this.options.proxies, function(proxy) {
+      url = url.replace(new RegExp('^' + proxy.url + '/?'), proxy.base_path + '/');
+    });
+
+    return url;
+  }
+});