pageflow 0.5.0 → 0.6.0

data/app/assets/javascripts/pageflow/editor/models/mixins/widget_subject.js

@@ -0,0 +1,37 @@
+pageflow.widgetSubject = {
+  initialize: function() {
+    this.widgets = pageflow.WidgetsCollection.createForSubject(this);
+
+    if (this.autoSaveWidgets) {
+      this.listenTo(this.widgets, 'change:type_name', function() {
+        this.saveWidgets();
+      });
+    }
+  },
+
+  widgetsUrlRoot: function() {
+    return '/editor/subjects/' + this.collectionName + '/' + this.id;
+  },
+
+  fetchWidgets: function() {
+    this.widgets.fetch();
+  },
+
+  saveWidgets: function(options) {
+    var model = this;
+
+    return Backbone.sync('patch', model, _.extend(options || {}, {
+      url: this.widgetsUrlRoot() + '/widgets/batch',
+
+      attrs: {
+        widgets: model.widgets.map(function(widget) {
+          return widget.toJSON();
+        })
+      },
+
+      success: function(response) {
+        model.trigger('sync:widgets', model, response, {});
+      }
+    }));
+  }
+};

data/app/assets/javascripts/pageflow/editor/models/page.js

@@ -16,7 +16,7 @@ pageflow.Page = Backbone.Model.extend({
 
   initialize: function() {
     this.configuration = new pageflow.Configuration(this.get('configuration') || {});
-    this.configuration.page = this;
+    this.configuration.parent = this.configuration.page = this;
 
     this.listenTo(this.configuration, 'change', function() {
       this.trigger('change:configuration');

data/app/assets/javascripts/pageflow/editor/models/page_configuration_file_selection_handler.js

@@ -1,28 +1,4 @@
-
 pageflow.PageConfigurationFileSelectionHandler = function(options) {
-  pageflow.ConfigurationEditorView.register('audio_loop', {
-    configure: function() {
-      this.tab('general', function() {
-        this.group('general');
-
-        this.input('additional_title', pageflow.TextInputView);
-        this.input('additional_description', pageflow.TextAreaInputView, {size: 'short'});
-      });
-
-      this.tab('files', function() {
-        this.input('audio_file_id', pageflow.FileInputView, {collection: pageflow.audioFiles});
-        this.input('background_image_id', pageflow.FileInputView, {collection: pageflow.imageFiles});
-        this.input('thumbnail_image_id', pageflow.FileInputView, {
-          collection: pageflow.imageFiles,
-          imagePositioning: false
-        });
-      });
-
-      this.tab('options', function() {
-        this.group('options');
-      });
-    }
-  });
   var page = pageflow.pages.get(options.id);
 
   this.call = function(file) {
@@ -30,7 +6,7 @@ pageflow.PageConfigurationFileSelectionHandler = function(options) {
   };
 
   this.getReferer = function() {
-    return '/pages/' + page.id + '/files';
+    return '/pages/' + page.id + '/' + (options.returnToTab || 'files');
   };
 };
 

data/app/assets/javascripts/pageflow/editor/models/theming.js

@@ -1,6 +1,9 @@
 pageflow.Theming = Backbone.Model.extend({
   modelName: 'theming',
   i18nKey: 'pageflow/theming',
+  collectionName: 'themings',
+
+  mixins: [pageflow.widgetSubject],
 
   hasHomeButton: function() {
     return this.get('home_button');

data/app/assets/javascripts/pageflow/editor/models/video_file.js

@@ -1,2 +1,9 @@
 pageflow.VideoFile = pageflow.EncodedFile.extend({
+  getBackgroundPositioningImageUrl: function() {
+    return this.get('poster_url');
+  },
+
+  isPositionable: function() {
+    return this.isReady();
+  }
 });

data/app/assets/javascripts/pageflow/editor/models/widget.js

@@ -0,0 +1,19 @@
+pageflow.Widget = Backbone.Model.extend({
+  paramRoot: 'widget',
+  i18nKey: 'pageflow/widget',
+
+  role: function() {
+    return this.id;
+  },
+
+  urlRoot: function() {
+    return this.collection.url();
+  },
+
+  toJSON: function() {
+    return {
+      role: this.role(),
+      type_name: this.get('type_name')
+    };
+  },
+});

data/app/assets/javascripts/pageflow/editor/routers/sidebar_router.js

@@ -12,6 +12,7 @@ pageflow.SidebarRouter = Backbone.Marionette.AppRouter.extend({
     'confirmable_files': 'confirmableFiles',
 
     'meta_data': 'metaData',
+    'meta_data/:tab': 'metaData',
     'publish': 'publish',
 
     '.*': 'index'

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

@@ -0,0 +1,18 @@
+<div class="box">
+  <h2><%= I18n.t('pageflow.editor.background_positioning.title') %></h2>
+  <p><%= I18n.t('pageflow.editor.background_positioning.help') %></p>
+
+  <div class="wrapper">
+  </div>
+
+  <h3><%= I18n.t('pageflow.editor.background_positioning.preview_title') %></h3>
+  <div class="previews">
+    <div>
+    </div>
+  </div>
+
+  <div class="footer">
+    <a href="" class="save">Speichern</a>
+    <a href="" class="close">Abbrechen</a>
+  </div>
+</div>

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

@@ -0,0 +1,2 @@
+<div class="image"></div>
+<div class="label"></div>

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

@@ -0,0 +1,6 @@
+<div class="container">
+  <div class="slider horizontal">
+  </div>
+  <div class="slider vertical">
+  </div>
+</div>

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

@@ -6,4 +6,4 @@
   <a class="retry" href="">Erneut versuchen</a>
 </div>
 
-<div class="form_fields"></div>
+<div class="form_fields"></div>

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

@@ -0,0 +1,2 @@
+<div class="widget_type">
+</div>

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

@@ -0,0 +1,2 @@
+<ol class="widgets">
+</ol>

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

@@ -1,6 +1,4 @@
 <div class="header"></div>
-<div class="navigation"></div>
-<div class="navigation_mobile"></div>
 <div class="overview"></div>
 
-<div class="entry"></div>
+<div class="entry"></div>

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

@@ -0,0 +1,39 @@
+pageflow.BackgroundPositioningPreviewView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/background_positioning_preview',
+  className: 'preview',
+
+  modelEvents: {
+    change: 'update'
+  },
+
+  ui: {
+    image: '.image',
+    label: '.label'
+  },
+
+  onRender: function() {
+    this.update();
+  },
+
+  update: function() {
+    var ratio = this.options.ratio;
+    var max = this.options.maxSize;
+    var width = ratio > 1 ? max : max * ratio;
+    var height = ratio > 1 ? max / ratio : max;
+
+    this.ui.image.css({
+      width: width + 'px',
+      height: height + 'px',
+      backgroundImage: this.imageValue(),
+      backgroundPosition: this.model.getFilePosition(this.options.propertyName, 'x') + '% ' +
+        this.model.getFilePosition(this.options.propertyName, 'y') + '%'
+    });
+
+    this.ui.label.text(this.options.label);
+  },
+
+  imageValue: function() {
+    var file = this.model.getReference(this.options.propertyName, this.options.filesCollection);
+    return file ? 'url("' + file.getBackgroundPositioningImageUrl()  + '")' : 'none';
+  }
+});

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

@@ -0,0 +1,94 @@
+pageflow.BackgroundPositioningSlidersView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/background_positioning_sliders',
+  className: '',
+
+  ui: {
+    container: '.container',
+
+    sliderHorizontal: '.horizontal.slider',
+    sliderVertical: '.vertical.slider'
+  },
+
+  events: {
+    'mousedown img': function(event) {
+      var view = this;
+      view.saveFromEvent(event);
+
+      function onMove(event) {
+        view.saveFromEvent(event);
+      }
+
+      function onUp() {
+        $('.background_positioning.dialog')
+          .off('mousemove', onMove)
+          .off('mouseup', onUp);
+      }
+
+      $('.background_positioning.dialog')
+        .on('mousemove', onMove)
+        .on('mouseup', onUp);
+    },
+
+    'dragstart img': function(event) {
+      event.preventDefault();
+    }
+  },
+
+  onRender: function() {
+    var view = this;
+    var file = this.model.getReference(this.options.propertyName, this.options.filesCollection),
+        image = $('<img />').attr('src', file.getBackgroundPositioningImageUrl());
+
+    this.ui.container.append(image);
+
+    this.ui.sliderVertical.slider({
+      orientation: 'vertical',
+      step: 0.01,
+      value: 100 - this.model.getFilePosition(this.options.propertyName, 'y'),
+
+      change: function() {
+        view.save();
+      },
+
+      slide: function(event, ui) {
+        view.save({y: ui.value});
+      }
+    });
+
+    this.ui.sliderHorizontal.slider({
+      orientation: 'horizontal',
+      step: 0.01,
+      value: this.model.getFilePosition(this.options.propertyName, 'x'),
+
+      change: function() {
+        view.save();
+      },
+
+      slide: function(event, ui) {
+        view.save({y: ui.value});
+      }
+    });
+  },
+
+  onShow: function() {
+  },
+
+  saveFromEvent: function(event) {
+    var x = event.pageX - this.ui.container.offset().left;
+    var y = event.pageY - this.ui.container.offset().top;
+
+    this.ui.sliderHorizontal.slider('value', x / this.ui.container.width() * 100);
+    this.ui.sliderVertical.slider('value', (1 - y / this.ui.container.height()) * 100);
+    this.save();
+  },
+
+  save: 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.model.setFilePosition(this.options.propertyName, 'x', x);
+    this.model.setFilePosition(this.options.propertyName, 'y', y);
+  }
+});

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

@@ -0,0 +1,67 @@
+pageflow.BackgroundPositioningView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/background_positioning',
+  className: 'background_positioning dialog',
+
+  mixins: [pageflow.dialogView],
+
+  ui: {
+    previews: '.previews > div',
+    wrapper: '.wrapper',
+  },
+
+  previews: {
+    ratio16to9: 16 / 9,
+    ratio16to9Portrait: 9 / 16,
+    ratio4to3: 4 / 3,
+    ratio4to3Portrait: 3 / 4,
+    banner: 5 / 1
+  },
+
+  events: {
+    'click .save': function() {
+      this.save();
+      this.close();
+    }
+  },
+
+  initialize: function() {
+    this.transientModel = this.model.clone();
+  },
+
+  onRender: function() {
+    this.ui.wrapper.append(this.subview(new pageflow.BackgroundPositioningSlidersView({
+      model: this.transientModel,
+      propertyName: this.options.propertyName,
+      filesCollection: this.options.filesCollection
+    })).el);
+
+    this.createPreviews();
+  },
+
+  save: function() {
+    this.model.setFilePositions(
+      this.options.propertyName,
+      this.transientModel.getFilePosition(this.options.propertyName, 'x'),
+      this.transientModel.getFilePosition(this.options.propertyName, 'y')
+    );
+  },
+
+  createPreviews: function() {
+    var view = this;
+
+    _.each(view.previews, function(ratio, name) {
+      view.ui.previews.append(view.subview(new pageflow.BackgroundPositioningPreviewView({
+        model: view.transientModel,
+        propertyName: view.options.propertyName,
+        filesCollection: view.options.filesCollection,
+        ratio: ratio,
+        maxSize: 200,
+        label: I18n.t('pageflow.editor.background_positioning.previews.' + name)
+      })).el);
+    });
+  }
+});
+
+pageflow.BackgroundPositioningView.open = function(options) {
+  pageflow.app.dialogRegion.show(new pageflow.BackgroundPositioningView(options).render());
+};

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/audio.js

@@ -12,7 +12,7 @@ pageflow.ConfigurationEditorView.register('audio', {
       this.input('background_image_id', pageflow.FileInputView, {collection: pageflow.imageFiles});
       this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
-        imagePositioning: false
+        positioning: false
       });
     });
 

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/audio_loop.js

@@ -12,7 +12,7 @@ pageflow.ConfigurationEditorView.register('audio_loop', {
       this.input('background_image_id', pageflow.FileInputView, {collection: pageflow.imageFiles});
       this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
-        imagePositioning: false
+        positioning: false
       });
     });
 

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/background_image.js

@@ -8,7 +8,7 @@ pageflow.ConfigurationEditorView.register('background_image', {
       this.input('background_image_id', pageflow.FileInputView, {collection: pageflow.imageFiles});
       this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
-        imagePositioning: false
+        positioning: false
       });
     });
 

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/background_video.js

@@ -6,11 +6,12 @@ pageflow.ConfigurationEditorView.register('background_video', {
 
     this.tab('files', function() {
       this.input('video_file_id', pageflow.FileInputView, {collection: pageflow.videoFiles});
-      this.input('poster_image_id', pageflow.FileInputView, {
+      this.input('poster_image_id', pageflow.FileInputView, {collection: pageflow.imageFiles});
+      this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
-        imagePositioning: false
+        positioning: false
       });
-      this.input('thumbnail_image_id', pageflow.FileInputView, {
+      this.input('mobile_poster_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
         imagePositioning: false
       });

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/internal_links.js

@@ -8,7 +8,7 @@ pageflow.ConfigurationEditorView.register('internal_links', {
       this.input('background_image_id', pageflow.FileInputView, {collection: pageflow.imageFiles});
       this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
-        imagePositioning: false
+        positioning: false
       });
     });