pageflow 0.6.0 → 0.7.0

data/app/assets/javascripts/pageflow/ui/templates/inputs/page_reference.jst.ejs

@@ -2,5 +2,5 @@
   <span class="name"></span>
   <span class="inline_help"></span>
 </label>
-<p>Ziehen Sie Seiten per Drag &amp; Drop in die Seite um Verweise zu erstellen.</p>
+<p><%= I18n.t('pageflow.ui.templates.inputs.page_reference.drag_hint') %></p>
 <ul class="chapters outline"></ul>

data/app/assets/javascripts/pageflow/ui/templates/inputs/text_area_input.jst.ejs

@@ -7,17 +7,17 @@
 <textarea style="width: 100%;"></textarea>
 
 <div class="toolbar">
-  <a data-wysihtml5-command="bold" title="Fett">bold</a>
-  <a data-wysihtml5-command="italic" title="Kursiv">italic</a>
-  <a data-wysihtml5-command="underline" title="Unterstrichen">underline</a>
-  <a data-wysihtml5-command="createLink" title="Link einfügen"></a>
+  <a data-wysihtml5-command="bold" title="<%= I18n.t('pageflow.ui.templates.inputs.text_area_input.bold') %>"></a>
+  <a data-wysihtml5-command="italic" title="<%= I18n.t('pageflow.ui.templates.inputs.text_area_input.italic') %>"></a>
+  <a data-wysihtml5-command="underline" title="<%= I18n.t('pageflow.ui.templates.inputs.text_area_input.underline') %>"></a>
+  <a data-wysihtml5-command="createLink" title="<%= I18n.t('pageflow.ui.templates.inputs.text_area_input.create_link') %>"></a>
 
   <div data-wysihtml5-dialog="createLink" class="dialog" style="display: none;">
     <label>
-      URL:
+        <%= I18n.t('pageflow.ui.templates.inputs.text_area_input.url') %>:
       <input data-wysihtml5-dialog-field="href" value="http://">
     </label>
-    <a data-wysihtml5-dialog-action="save">OK</a>
-    <a data-wysihtml5-dialog-action="cancel">Abbrechen</a>
+    <a data-wysihtml5-dialog-action="save"><%= I18n.t('pageflow.ui.templates.inputs.text_area_input.ok') %></a>
+    <a data-wysihtml5-dialog-action="cancel"><%= I18n.t('pageflow.ui.templates.inputs.text_area_input.cancel') %></a>
   </div>
 </div>

data/app/assets/javascripts/pageflow/ui/views/collection_view.js

@@ -43,7 +43,7 @@ pageflow.CollectionView = Backbone.Marionette.View.extend({
   addItem: function(item) {
     var view = new this.options.itemViewConstructor(_.extend({
       model: item
-    }, this.options.itemViewOptions || {}));
+    }, this.getItemViewOptions(item)));
 
     this.itemViews.add(view);
 
@@ -92,6 +92,15 @@ pageflow.CollectionView = Backbone.Marionette.View.extend({
     }, this);
   },
 
+  getItemViewOptions: function(item) {
+    if (typeof this.options.itemViewOptions === 'function') {
+      return this.options.itemViewOptions(item);
+    }
+    else {
+      return this.options.itemViewOptions || {};
+    }
+  },
+
   closePlaceHolderView: function() {
     if (this.placeHolderView) {
       this.placeHolderView.close();

data/app/assets/javascripts/pageflow/ui/views/configuration_editor_view.js

@@ -3,7 +3,7 @@ pageflow.ConfigurationEditorView = Backbone.Marionette.View.extend({
 
   initialize: function() {
     this.tabsView = new pageflow.TabsView({
-      i18n: 'editor.configuration_editor.tabs',
+      i18n: 'pageflow.ui.configuration_editor.tabs',
       defaultTab: this.options.tab
     });
     this.configure();

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

@@ -16,7 +16,9 @@ pageflow.CheckBoxInputView = Backbone.Marionette.ItemView.extend({
   onRender: function() {
     this.ui.label.attr('for', this.cid);
     this.ui.input.attr('id', this.cid);
+
     this.load();
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
   },
 
   save: function() {
@@ -26,7 +28,9 @@ pageflow.CheckBoxInputView = Backbone.Marionette.ItemView.extend({
   },
 
   load: function() {
-    this.ui.input.attr('checked', this.displayValue());
+    if (!this.isClosed) {
+      this.ui.input.prop('checked', this.displayValue());
+    }
   },
 
   displayValue: function() {

data/app/assets/javascripts/pageflow/ui/views/inputs/extended_select_input_view.js

@@ -0,0 +1,106 @@
+pageflow.ExtendedSelectInputView = pageflow.SelectInputView.extend({
+  className: 'extended_select_input',
+
+  initialize: function() {
+    pageflow.SelectInputView.prototype.initialize.apply(this, arguments);
+
+    if (this.options.collection) {
+      if (this.options.descriptionProperty) {
+        this.options.descriptions = _.pluck(this.options.collection, this.options.descriptionProperty);
+      }
+      else if (this.options.descriptionTranslationKeyProperty) {
+        this.options.descriptionTanslationKeys = _.pluck(this.options.collection, this.options.descriptionTranslationKeyProperty);
+      }
+    }
+
+    if (!this.options.descriptions) {
+      this.options.descriptions = _.map(this.options.descriptionTanslationKeys, function(key) {
+        return I18n.t(key);
+      });
+    }
+  },
+
+  onRender: function() {
+    var view = this,
+        options = this.options;
+
+    pageflow.SelectInputView.prototype.onRender.apply(this, arguments);
+
+    $.widget("custom.extendedselectmenu", $.ui.selectmenu, {
+      _renderItem: function(ul, item) {
+        var widget = this;
+        var li = $('<li>', { class: item.value });
+        var container = $('<div>', { class: 'text-container' }).appendTo(li);
+        var index = options.values.indexOf(item.value);
+
+        if (item.disabled) {
+          li.addClass('ui-state-disabled');
+        }
+
+        if (options.pictogramClass) {
+          $('<span>', {
+            class: options.pictogramClass
+          }).prependTo(li);
+        }
+
+        $('<p>', {
+          text: item.label,
+          class: 'item-text'
+        }).appendTo(container);
+
+        $('<p>', {
+          text: options.descriptions[index],
+          class: 'item-description'
+        }).appendTo(container);
+
+        if (options.helpLinkClicked) {
+          $('<a>', {
+            href: '#',
+            title: I18n.t('pageflow.ui.views.extended_select_input_view.display_help'),
+          })
+            .on('click', function() {
+              widget.close();
+              options.helpLinkClicked(item.value);
+              return false;
+            })
+            .appendTo(li);
+        }
+
+        return li.appendTo(ul);
+      },
+
+      _resizeMenu: function() {
+        this.menuWrap.addClass('extended_select_input_menu');
+
+        var menuHeight = this.menu.height(),
+            menuOffset = this.button.offset().top + this.button.outerHeight(),
+            bodyHeight = $('body').height();
+
+        if (menuHeight + menuOffset > bodyHeight) {
+          this.menuWrap.outerHeight(bodyHeight - menuOffset - 5).css({ 'overflow-y': 'scroll' });
+        }
+        else {
+          this.menuWrap.css({
+            height: 'initial',
+            'overflow-y': 'initial'
+          });
+        }
+      }
+    });
+
+    this.ui.select.extendedselectmenu({
+      select: view.select.bind(view),
+      width: '100%',
+      position: {
+        my: 'right top',
+        at: 'right bottom'
+      }
+    });
+  },
+
+  select: function(event, ui) {
+    this.ui.select.val(ui.item.value);
+    this.save();
+  }
+
+});

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

@@ -63,7 +63,7 @@ pageflow.FileInputView = Backbone.Marionette.ItemView.extend({
   update: function() {
     var file = this._getFile();
 
-    this.ui.fileName.text(file ? file.get('file_name') : '(Kein)');
+    this.ui.fileName.text(file ? file.get('file_name') : I18n.t('pageflow.ui.views.inputs.file_input_view.none'));
     this.ui.unsetButton.toggle(!!file);
     this.ui.editPositioningButton.toggle(this.options.positioning && !!file && file.isPositionable());
 

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

@@ -6,7 +6,7 @@ pageflow.ProxyUrlInputView = pageflow.UrlInputView.extend({
     var view = this;
 
     return $.Deferred(function(deferred) {
-      deferred.notify('Pr<C3><BC>fe Erreichbarkeit der URL...');
+      deferred.notify(I18n.t('pageflow.ui.views.inputs.proxy_url_input_view.url_validation'));
 
       $.ajax({
         url: view.rewriteUrl(url),
@@ -14,7 +14,7 @@ pageflow.ProxyUrlInputView = pageflow.UrlInputView.extend({
       })
         .done(deferred.resolve)
         .fail(function(xhr) {
-          deferred.reject('Die URL konnte nicht erfolgreich abgerufen werden (Der Server antwortete mit HTTP Status Code ' + xhr.status + ')');
+          deferred.reject(I18n.t('pageflow.ui.views.inputs.proxy_url_input_view.http_error', { status: xhr.status}));
         });
     }).promise();
   },

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

@@ -8,7 +8,8 @@ pageflow.SelectInputView = Backbone.Marionette.ItemView.extend({
   },
 
   ui: {
-    select: 'select'
+    select: 'select',
+    input: 'select'
   },
 
   initialize: function() {
@@ -21,6 +22,13 @@ pageflow.SelectInputView = Backbone.Marionette.ItemView.extend({
       else if (this.options.translationKeyProperty) {
         this.options.translationKeys = _.pluck(this.options.collection, this.options.translationKeyProperty);
       }
+
+      if (this.options.groupProperty) {
+        this.options.groups = _.pluck(this.options.collection, this.options.groupProperty);
+      }
+      else if (this.options.groupTranslationKeyProperty) {
+        this.options.groupTanslationKeys = _.pluck(this.options.collection, this.options.groupTranslationKeyProperty);
+      }
     }
 
     if (!this.options.texts) {
@@ -35,23 +43,22 @@ pageflow.SelectInputView = Backbone.Marionette.ItemView.extend({
       });
     }
 
-    this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+    if (!this.options.groups) {
+      this.options.groups = _.map(this.options.groupTanslationKeys, function(key) {
+        return I18n.t(key);
+      });
+    }
+
+    this.optGroups = {};
   },
 
   onRender: function() {
     this.appendBlank();
     this.appendPlaceholder();
-
-    _.each(this.options.values, function(value, index) {
-      var option = document.createElement('option');
-
-      option.value = value;
-      option.text = this.options.texts[index];
-
-      this.ui.select.append(option);
-    }, this);
+    this.appendOptions();
 
     this.load();
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
 
     if (this.options.ensureValueDefined && !this.ui.select.val()) {
       this.ui.select.val(this.options.values[0]);
@@ -71,7 +78,7 @@ pageflow.SelectInputView = Backbone.Marionette.ItemView.extend({
     var option = document.createElement('option');
 
     option.value = '';
-    option.text = this.options.blankText || I18n.t('pageflow.ui.select_input_view.blank');
+    option.text = this.options.blankText || I18n.t('pageflow.ui.views.inputs.select_input_view.none');
 
     this.ui.select.append(option);
   },
@@ -88,17 +95,46 @@ pageflow.SelectInputView = Backbone.Marionette.ItemView.extend({
       var option = document.createElement('option');
 
       option.value = '';
-      option.text = I18n.t('pageflow.ui.select_input_view.placeholder', {text: this.options.texts[placeholderIndex]});
+      option.text = I18n.t('pageflow.ui.views.inputs.select_input_view.placeholder', {text: this.options.texts[placeholderIndex]});
 
       this.ui.select.append(option);
     }
   },
 
+  appendOptions: function() {
+    _.each(this.options.values, function(value, index) {
+      var option = document.createElement('option');
+      var group = this.options.groups[index];
+
+      option.value = value;
+      option.text = this.options.texts[index];
+
+      if (group) {
+        option.setAttribute('data-group', group);
+        this.findOrCreateOptGroup(group).append(option);
+      }
+      else {
+        this.ui.select.append(option);
+      }
+    }, this);
+  },
+
+  findOrCreateOptGroup: function(label) {
+    if (!this.optGroups[label]) {
+      this.optGroups[label] = $('<optgroup />', {label: label})
+        .appendTo(this.ui.select);
+    }
+
+    return this.optGroups[label];
+  },
+
   save: function() {
     this.model.set(this.options.propertyName, this.ui.select.val());
   },
 
   load: function() {
-    this.ui.select.val(this.model.get(this.options.propertyName));
+    if (!this.isClosed) {
+      this.ui.select.val(this.model.get(this.options.propertyName));
+    }
   }
 });

data/app/assets/javascripts/pageflow/ui/views/inputs/text_area_input_view.js

@@ -28,7 +28,7 @@ pageflow.TextAreaInputView = Backbone.Marionette.ItemView.extend({
           br: {},
           a: {
             check_attributes: {
-              href: "url"
+              href: "href"
             },
             set_attributes: {
               rel: "nofollow",

data/app/assets/javascripts/pageflow/ui/views/inputs/text_input_view.js

@@ -34,7 +34,7 @@ pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
 
   validate: function() {
     if (this.options.required && !this.ui.input.val()) {
-      this.displayValidationError('Muss ausgefüllt werden');
+      this.displayValidationError(I18n.t('pageflow.ui.views.inputs.text_input_view.required_field'));
     }
     else {
       this.resetValidationError();

data/app/assets/javascripts/pageflow/ui/views/inputs/url_input_view.js

@@ -84,19 +84,19 @@ pageflow.UrlInputView = Backbone.Marionette.Layout.extend({
     var value = this.ui.input.val();
 
     if (options.required && !value) {
-      displayValidationError('Muss ausgefüllt werden.');
+      displayValidationError(I18n.t('pageflow.ui.views.inputs.url_input_view.required_field'));
     }
     else if (value && !isValidUrl(value)) {
-      var errorMessage = 'URL muss mit http:// beginnen.';
+      var errorMessage = I18n.t('pageflow.ui.views.inputs.url_input_view.url_hint');
 
       if (options.permitHttps) {
-        errorMessage = 'URL muss mit http:// oder https:// beginnen.';
+        errorMessage = I18n.t('pageflow.ui.views.inputs.url_input_view.url_hint_https');
       }
 
       displayValidationError(errorMessage);
     }
     else if (value && !hasSupportedHost(value)) {
-      displayValidationError('Es werden nur die folgenden Anbieter unterstützt:' +
+      displayValidationError(I18n.t('pageflow.ui.views.inputs.url_input_view.supported_vendors') +
                              _.map(view.supportedHosts(), function(url) {
                                return '<li>' + url +'</li>';
                              }).join(''));

data/app/assets/javascripts/pageflow/ui/views/mixins/input_view.js

@@ -27,7 +27,7 @@ pageflow.inputView = {
   },
 
   inlineHelpText: function() {
-    var key = 'editor.inline_help.' + this.model.i18nKey + '.' + this.options.propertyName;
+    var key = 'pageflow.ui.inline_help.' + this.model.i18nKey + '.' + this.options.propertyName;
     var text = I18n.t(key, {defaultValue: ''});
 
     if (this.options.disabled) {

data/app/assets/javascripts/pageflow/video_player.js

@@ -1,4 +1,5 @@
 //= require_self
+//= require ./video_player/media_events
 //= require ./video_player/prebuffering
 //= require ./video_player/buffer_underrun_waiting
 //= require ./video_player/src_from_options_method
@@ -16,6 +17,10 @@ pageflow.VideoPlayer = function(element, options) {
   pageflow.VideoPlayer.prebuffering(player);
   pageflow.VideoPlayer.srcFromOptionsMethod(player);
 
+  if (options.mediaEvents) {
+    pageflow.VideoPlayer.mediaEvents(player);
+  }
+
   if (options.bufferUnderrunWaiting) {
     pageflow.VideoPlayer.bufferUnderrunWaiting(player);
   }

data/app/assets/javascripts/pageflow/video_player/media_events.js

@@ -0,0 +1,27 @@
+pageflow.VideoPlayer.mediaEvents = function(player) {
+  function triggerMediaEvent(name) {
+    pageflow.events.trigger('media:' + name, {
+      fileName: player.currentSrc(),
+      currentTime: player.currentTime(),
+      duration: player.duration(),
+      volume: player.volume(),
+      bitrate: pageflow.features.has('high bandwidth') ? 3500000 : 2000000
+    });
+  }
+
+  player.on('play', function() {
+    triggerMediaEvent('play');
+  });
+
+  player.on('timeupdate', function() {
+    triggerMediaEvent('timeupdate');
+  });
+
+  player.on('pause', function() {
+    triggerMediaEvent('pause');
+  });
+
+  player.on('ended', function() {
+    triggerMediaEvent('ended');
+  });
+};

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

@@ -120,6 +120,10 @@ main > .container {
   height: 100%;
 }
 
+#help_entries_seed {
+  display: none;
+}
+
 form#upload {
   visibility: hidden;
 }