pageflow 0.5.0 → 0.6.0

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

@@ -0,0 +1,16 @@
+//= require_self
+
+//= require wysihtml5
+//= require parser_rules/simple
+
+//= require i18n
+//= require i18n/translations
+
+//= require ./ui/renderer
+//= require ./ui/object
+
+//= require_tree ./ui/views/mixins
+//= require_tree ./ui/views
+//= require_tree ./ui/templates
+
+window.pageflow = window.pageflow || {};

data/app/assets/javascripts/pageflow/{editor → ui}/views/configuration_editor_tab_view.js

@@ -6,10 +6,17 @@ pageflow.ConfigurationEditorTabView = Backbone.Marionette.View.extend({
   },
 
   input: function(propertyName, view, options) {
+    this.view(view, _.extend({
+      placeholderModel: this.options.placeholderModel,
+      propertyName: propertyName
+    }, options || {}));
+  },
+
+  view: function(view, options) {
     this.inputs = this.inputs || new Backbone.ChildViewContainer();
     this.inputs.add(new view(_.extend({
       model: this.model,
-      propertyName: propertyName
+      parentTab: this.options.tab
     }, options || {})));
   },
 

data/app/assets/javascripts/pageflow/{editor → ui}/views/configuration_editor_view.js

@@ -14,7 +14,9 @@ pageflow.ConfigurationEditorView = Backbone.Marionette.View.extend({
   tab: function(name, callback) {
     this.tabsView.tab(name, _.bind(function() {
       var tabView = new pageflow.ConfigurationEditorTabView({
-        model: this.model
+        model: this.model,
+        placeholderModel: this.options.placeholderModel,
+        tab: name
       });
 
       callback.call(tabView);

data/app/assets/javascripts/pageflow/{editor → ui}/views/inputs/check_box_input_view.js

@@ -1,7 +1,7 @@
 pageflow.CheckBoxInputView = Backbone.Marionette.ItemView.extend({
   mixins: [pageflow.inputView],
 
-  template: 'templates/inputs/check_box',
+  template: 'pageflow/ui/templates/inputs/check_box',
   className: 'check_box_input',
 
   events: {

data/app/assets/javascripts/pageflow/{editor → ui}/views/inputs/file_input_view.js

@@ -3,7 +3,7 @@
 pageflow.FileInputView = Backbone.Marionette.ItemView.extend({
   mixins: [pageflow.inputView],
 
-  template: 'templates/inputs/file_input',
+  template: 'pageflow/ui/templates/inputs/file_input',
   className: 'file_input',
 
   ui: {
@@ -18,10 +18,11 @@ pageflow.FileInputView = Backbone.Marionette.ItemView.extend({
       pageflow.editor.selectFile(
         this.options.collection.name,
         this.options.fileSelectionHandler || 'pageConfiguration',
-        {
+        _.extend({
           id: this.model.getRoutableId ? this.model.getRoutableId() : this.model.id,
-          attributeName: this.options.propertyName
-        }
+          attributeName: this.options.propertyName,
+          returnToTab: this.options.parentTab
+        }, this.options.fileSelectionHandlerOptions || {})
       );
 
       return false;
@@ -33,9 +34,10 @@ pageflow.FileInputView = Backbone.Marionette.ItemView.extend({
     },
 
     'click. .edit_positioning': function() {
-      pageflow.ImagePositioningView.open({
+      pageflow.BackgroundPositioningView.open({
         model: this.model,
-        propertyName: this.options.propertyName
+        propertyName: this.options.propertyName,
+        filesCollection: this.options.collection
       });
       return false;
     }
@@ -43,7 +45,7 @@ pageflow.FileInputView = Backbone.Marionette.ItemView.extend({
 
   initialize: function() {
     this.options = _.extend({
-      imagePositioning: true
+      positioning: true
     }, this.options);
 
     if (typeof this.options.collection === 'string') {
@@ -63,7 +65,7 @@ pageflow.FileInputView = Backbone.Marionette.ItemView.extend({
 
     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.ui.editPositioningButton.toggle(this.options.positioning && !!file && file.isPositionable());
 
     this.subview(new pageflow.FileThumbnailView({
       el: this.ui.thumbnail,

data/app/assets/javascripts/pageflow/{editor → ui}/views/inputs/page_reference_input_view.js

@@ -1,7 +1,7 @@
 pageflow.PageReferenceInputView = Backbone.Marionette.ItemView.extend({
   mixins: [pageflow.inputView],
 
-  template: 'templates/inputs/page_reference',
+  template: 'pageflow/ui/templates/inputs/page_reference',
   className: 'page_reference_input',
 
   ui: {

data/app/assets/javascripts/pageflow/{editor → ui}/views/inputs/select_input_view.js

@@ -1,7 +1,7 @@
 pageflow.SelectInputView = Backbone.Marionette.ItemView.extend({
   mixins: [pageflow.inputView],
 
-  template: 'templates/inputs/select_input',
+  template: 'pageflow/ui/templates/inputs/select_input',
 
   events: {
     'change': 'save'
@@ -34,9 +34,14 @@ pageflow.SelectInputView = Backbone.Marionette.ItemView.extend({
         return I18n.t(key);
       });
     }
+
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
   },
 
   onRender: function() {
+    this.appendBlank();
+    this.appendPlaceholder();
+
     _.each(this.options.values, function(value, index) {
       var option = document.createElement('option');
 
@@ -54,6 +59,41 @@ pageflow.SelectInputView = Backbone.Marionette.ItemView.extend({
     }
   },
 
+  appendBlank: function() {
+    if (!this.options.includeBlank) {
+      return;
+    }
+
+    if (this.options.blankTranslationKey) {
+      this.options.blankText = I18n.t(this.options.blankTranslationKey);
+    }
+
+    var option = document.createElement('option');
+
+    option.value = '';
+    option.text = this.options.blankText || I18n.t('pageflow.ui.select_input_view.blank');
+
+    this.ui.select.append(option);
+  },
+
+  appendPlaceholder: function() {
+    if (!this.options.placeholderModel && !this.options.placeholderValue) {
+      return;
+    }
+
+    var placeholderValue = this.options.placeholderValue || this.options.placeholderModel.get(this.options.propertyName);
+    var placeholderIndex = this.options.values.indexOf(placeholderValue);
+
+    if (placeholderIndex >= 0) {
+      var option = document.createElement('option');
+
+      option.value = '';
+      option.text = I18n.t('pageflow.ui.select_input_view.placeholder', {text: this.options.texts[placeholderIndex]});
+
+      this.ui.select.append(option);
+    }
+  },
+
   save: function() {
     this.model.set(this.options.propertyName, this.ui.select.val());
   },

data/app/assets/javascripts/pageflow/{editor → ui}/views/inputs/slider_input_view.js

@@ -2,7 +2,7 @@ pageflow.SliderInputView = Backbone.Marionette.ItemView.extend({
   mixins: [pageflow.inputView],
 
   className: 'slider_input',
-  template: 'templates/inputs/slider_input',
+  template: 'pageflow/ui/templates/inputs/slider_input',
 
   ui: {
     widget: '.slider',

data/app/assets/javascripts/pageflow/{editor → ui}/views/inputs/text_area_input_view.js

@@ -3,7 +3,7 @@
 pageflow.TextAreaInputView = Backbone.Marionette.ItemView.extend({
   mixins: [pageflow.inputView],
 
-  template: 'templates/inputs/text_area_input',
+  template: 'pageflow/ui/templates/inputs/text_area_input',
 
   ui: {
     textarea: 'textarea',

data/app/assets/javascripts/pageflow/{editor → ui}/views/inputs/text_input_view.js

@@ -1,7 +1,7 @@
 pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
   mixins: [pageflow.inputView],
 
-  template: 'templates/inputs/text_input',
+  template: 'pageflow/ui/templates/inputs/text_input',
 
   ui: {
     input: 'input'
@@ -15,6 +15,8 @@ pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
     this.updatePlaceholder();
     this.load();
     this.validate();
+
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
   },
 
   onChange: function() {
@@ -55,7 +57,11 @@ pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
 
   placeholderText: function() {
     if (!this.options.disabled || !this.options.hidePlaceholderIfDisabled) {
-      return this.options.placeholder;
+      return this.options.placeholder || this.placholderModelValue();
     }
+  },
+
+  placholderModelValue: function() {
+    return this.options.placeholderModel && this.options.placeholderModel.get(this.options.propertyName);
   }
 });

data/app/assets/javascripts/pageflow/{editor → ui}/views/inputs/url_input_view.js

@@ -1,7 +1,7 @@
 pageflow.UrlInputView = Backbone.Marionette.Layout.extend({
   mixins: [pageflow.inputView],
 
-  template: 'templates/inputs/url_input',
+  template: 'pageflow/ui/templates/inputs/url_input',
 
   ui: {
     input: 'input',
@@ -87,7 +87,13 @@ pageflow.UrlInputView = Backbone.Marionette.Layout.extend({
       displayValidationError('Muss ausgefüllt werden.');
     }
     else if (value && !isValidUrl(value)) {
-      displayValidationError('URL muss mit http:// beginnen.');
+      var errorMessage = 'URL muss mit http:// beginnen.';
+
+      if (options.permitHttps) {
+        errorMessage = 'URL muss mit http:// oder https:// beginnen.';
+      }
+
+      displayValidationError(errorMessage);
     }
     else if (value && !hasSupportedHost(value)) {
       displayValidationError('Es werden nur die folgenden Anbieter unterstützt:' +
@@ -111,7 +117,7 @@ pageflow.UrlInputView = Backbone.Marionette.Layout.extend({
     return $.Deferred().reject().promise();
 
     function isValidUrl(url) {
-      return url.match(/^http:\/\//i);
+      return options.permitHttps ? url.match(/^https?:\/\//i) : url.match(/^http:\/\//i);
     }
 
     function hasSupportedHost(url) {

data/app/assets/javascripts/pageflow/{editor/views → ui/views/mixins}/input_view.js

@@ -6,7 +6,7 @@ pageflow.inputView = {
 
   onRender: function() {
     this.$el.addClass(this.model.modelName + '_' + this.options.propertyName);
-    this.ui.labelText.text(this.localizedAttributeName());
+    this.ui.labelText.text(this.labelText());
 
     this.ui.inlineHelp.text(this.inlineHelpText());
 
@@ -18,6 +18,10 @@ pageflow.inputView = {
     this.setupVisibleBinding();
   },
 
+  labelText: function() {
+    return this.options.label || this.localizedAttributeName();
+  },
+
   localizedAttributeName: function() {
     return I18n.t('activerecord.attributes.' + this.model.i18nKey + '.' + this.options.propertyName);
   },

data/app/assets/javascripts/pageflow/{editor → ui}/views/tabs_view.js

@@ -1,5 +1,5 @@
 pageflow.TabsView = Backbone.Marionette.Layout.extend({
-  template: 'templates/tabs_view',
+  template: 'pageflow/ui/templates/tabs_view',
   className: 'tabs_view',
 
   ui: {
@@ -36,7 +36,7 @@ pageflow.TabsView = Backbone.Marionette.Layout.extend({
       );
     }, this);
 
-    this.changeTab(this.options.defaultTab || _.first(this.tabNames));
+    this.changeTab(this.defaultTab());
   },
 
   changeTab: function(name) {
@@ -45,6 +45,15 @@ pageflow.TabsView = Backbone.Marionette.Layout.extend({
     this.currentTabName = name;
   },
 
+  defaultTab: function() {
+    if (_.include(this.tabNames, this.options.defaultTab)) {
+      return this.options.defaultTab;
+    }
+    else {
+      return _.first(this.tabNames);
+    }
+  },
+
   refresh: function() {
     this.changeTab(this.currentTabName);
   },

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

@@ -109,7 +109,10 @@ pageflow.VideoPlayer.Lazy = function(template, options) {
 
     var element = $(htmlWithPreload);
 
-    if (pageflow.features.has('high bandwidth') && !pageflow.features.has('mobile platform')) {
+    if (pageflow.features.has('mobile platform') && element.attr('data-mobile-poster')) {
+      element.attr('poster', element.attr('data-mobile-poster'));
+    }
+    else if (pageflow.features.has('high bandwidth') && !pageflow.features.has('mobile platform')) {
       element.attr('poster', element.attr('data-large-poster'));
 
       element.find('source').each(function() {

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

@@ -0,0 +1,56 @@
+pageflow.visited = (function() {
+
+  var name, cookies = pageflow.cookies;
+
+  $(function() {
+    name = '_pageflow_' + pageflow.entryId + '_visited';
+
+    if (pageflow.visited.enabled) {
+      init();
+    }
+  });
+
+  function init() {
+    if (!cookies.hasItem(name)) {
+      cookies.setItem(name, _getAllIds(), Infinity);
+    }
+
+    pageflow.ready.then(function() {
+      pageflow.slides.on('pageactivate', function (e) {
+        var id = e.target.getAttribute('id');
+        var ids = _getCookieIds();
+
+        if (ids.indexOf(id) < 0) {
+          ids.push(id);
+        }
+
+        cookies.setItem(name, ids, Infinity);
+      });
+    });
+  }
+
+  function _getCookieIds() {
+    if (cookies.hasItem(name) && !!cookies.getItem(name)) {
+      return cookies.getItem(name).split(',').map(function(id) {
+        return parseInt(id, 10);
+      });
+    }
+    return [];
+  }
+
+  function _getAllIds() {
+    return pageflow.pages.map(function(page) {
+      return page.perma_id;
+    });
+  }
+
+  return {
+    getUnvisitedPages: function() {
+      if (pageflow.visited.enabled) {
+        var visitedIds = _getCookieIds();
+        return visitedIds.length ? _.difference(_getAllIds(), visitedIds) : visitedIds;
+      }
+      return [];
+    }
+  };
+}());

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

@@ -0,0 +1,27 @@
+pageflow.widgetTypes = (function() {
+  var registry = {};
+
+  var base = {
+    enhance: function(element) {}
+  };
+
+  return {
+    register: function(name, widgetType) {
+      registry[name] = _.extend({}, base, widgetType);
+    },
+
+    enhance: function(container) {
+      function enhance(element) {
+        var typeName = $(element).data('widget');
+
+        if (registry[typeName]) {
+          registry[typeName].enhance(element);
+        }
+      }
+
+      container.find('[data-widget]').each(function() {
+        enhance($(this));
+      });
+    }
+  };
+}());