pageflow-linkmap-page 0.1.0

data/app/assets/javascript/pageflow/linkmap_page/editor/models/area_file_selection_handler.js

@@ -0,0 +1,12 @@
+pageflow.linkmapPage.AreaFileSelectionHandler = function(options) {
+  var page = pageflow.pages.get(options.id);
+  var area = page.configuration.linkmapAreas(options.areasPropertyName).at(parseInt(options.areaIndex, 10));
+
+  this.call = function(file) {
+    area.setReference(options.attributeName, file);
+  };
+
+  this.getReferer = function() {
+    return '/linkmap_pages/' + options.id + '/areas/' + options.areaIndex;
+  };
+};

data/app/assets/javascript/pageflow/linkmap_page/editor/models/audio_file_area_type.js

@@ -0,0 +1,17 @@
+pageflow.linkmapPage.AudioFileAreaType = Backbone.Model.extend({
+  defaults: function() {
+    return {
+      label: I18n.t('pageflow.linkmap_page.editor.area_types.audio_file')
+    };
+  },
+
+  initialize: function(attributes, options) {
+    this.pageId = options.pageConfiguration.getRoutableId();
+  },
+
+  selected: function() {
+    pageflow.editor.selectFile('audio_files', 'linkmapPage.newArea', {
+      id: this.pageId
+    });
+  }
+});

data/app/assets/javascript/pageflow/linkmap_page/editor/models/external_link_area_type.js

@@ -0,0 +1,19 @@
+pageflow.linkmapPage.ExternalLinkAreaType = Backbone.Model.extend({
+  defaults: function() {
+    return {
+      label: I18n.t('pageflow.linkmap_page.editor.area_types.external_site'),
+    };
+  },
+
+  initialize: function(attributes, options) {
+    this.areas = options.pageConfiguration.linkmapAreas();
+  },
+
+  selected: function() {
+    var areas = this.areas;
+
+    pageflow.externalLinks.selectSite().then(function(site) {
+      areas.addExternalSite(site.get('perma_id'));
+    });
+  }
+});

data/app/assets/javascript/pageflow/linkmap_page/editor/models/new_area_file_selection_handler.js

@@ -0,0 +1,11 @@
+pageflow.linkmapPage.NewAreaFileSelectionHandler = function(options) {
+  var page = pageflow.pages.get(options.id);
+
+  this.call = function(file) {
+    page.configuration.linkmapAreas().addAudioFile(file.id);
+  };
+
+  this.getReferer = function() {
+    return '/pages/' + options.id + '/areas';
+  };
+};

data/app/assets/javascript/pageflow/linkmap_page/editor/models/page_configuration_mixin.js

@@ -0,0 +1,33 @@
+pageflow.linkmapPage.pageConfigurationMixin = {
+  linkmapPageLinks: function() {
+    this._linkmapPageLinks = this._linkmapPageLinks || new pageflow.linkmapPage.PageLinksCollection({
+      areas: this.linkmapAreas()
+    });
+
+    return this._linkmapPageLinks;
+  },
+
+  linkmapAreas: function() {
+    var configuration = this;
+
+    this._linkmapAreas = this._linkmapAreas || create();
+    return this._linkmapAreas;
+
+    function create() {
+      var collection = new pageflow.linkmapPage.AreasCollection(
+        configuration.get('linkmap_areas'),
+        {
+          page: configuration.page
+        }
+      );
+
+      configuration.listenTo(collection, 'add remove change', function() {
+        configuration.set('linkmap_areas', collection.map(function(area) {
+          return _.omit(area.attributes, 'highlighted');
+        }));
+      });
+
+      return collection;
+    }
+  }
+};

data/app/assets/javascript/pageflow/linkmap_page/editor/models/page_link_area_type.js

@@ -0,0 +1,29 @@
+pageflow.linkmapPage.PageLinkAreaType = Backbone.Model.extend({
+  defaults: function() {
+    return {
+      label: I18n.t('pageflow.linkmap_page.editor.area_types.page')
+    };
+  },
+
+  initialize: function(attributes, options) {
+    this.areas = options.pageConfiguration.linkmapAreas();
+
+    this.listenTo(this.areas, 'add remove', function() {
+      this.updateDisabled();
+    });
+
+    this.updateDisabled();
+  },
+
+  updateDisabled: function() {
+    this.set('disabled', !this.areas.canAddLink());
+  },
+
+  selected: function() {
+    var areas = this.areas;
+
+    pageflow.editor.selectPage().then(function(page) {
+      areas.addLink(page.get('perma_id'));
+    });
+  }
+});

data/app/assets/javascript/pageflow/linkmap_page/editor/models/text_only_area_type.js

@@ -0,0 +1,15 @@
+pageflow.linkmapPage.TextOnlyAreaType = Backbone.Model.extend({
+  defaults: function() {
+    return {
+      label: I18n.t('pageflow.linkmap_page.editor.area_types.text_only')
+    };
+  },
+
+  initialize: function(attributes, options) {
+    this.pageConfiguration = options.pageConfiguration;
+  },
+
+  selected: function() {
+    this.pageConfiguration.linkmapAreas().addTextOnly();
+  }
+});

data/app/assets/javascript/pageflow/linkmap_page/editor/routers/side_bar_router.js

@@ -0,0 +1,5 @@
+pageflow.linkmapPage.SideBarRouter = Backbone.Marionette.AppRouter.extend({
+  appRoutes: {
+    'linkmap_pages/:pageId/areas/:index': 'area'
+  }
+});

data/app/assets/javascript/pageflow/linkmap_page/editor/templates/edit_area.jst.ejs

@@ -0,0 +1,3 @@
+<a class="back"><%= I18n.t('pageflow.linkmap_page.editor.templates.edit_area.back') %></a>
+<a class="destroy"><%= I18n.t('pageflow.linkmap_page.editor.templates.edit_area.destroy') %></a>
+<div class="form_container"></div>

data/app/assets/javascript/pageflow/linkmap_page/editor/templates/embedded/area_item.jst.ejs

@@ -0,0 +1,11 @@
+<div class="background_image visited_image" data-style-group="panorama"></div>
+<div class="background_image hover_image" data-style-group="panorama"></div>
+<div class="linkmap_marker"></div>
+<span class="area_type_pictogram"></span>
+<div class="linkmap_description">
+  <div class="link_title"></div>
+  <div class="link_description"></div>
+</div>
+<a class="toggle_marker" href="" title="<%= I18n.t('pageflow.linkmap_page.editor.templates.embedded.area_item.toggle_marker') %>">
+<a class="edit" href="" title="<%= I18n.t('pageflow.linkmap_page.editor.templates.embedded.area_item.edit') %>">
+</a>

data/app/assets/javascript/pageflow/linkmap_page/editor/views/areas_list_view.js

@@ -0,0 +1,44 @@
+pageflow.linkmapPage.AreasListView = Backbone.Marionette.View.extend({
+  className: 'linkmap_page_areas_list',
+
+  render: function() {
+    this.appendSubview(new pageflow.ListView({
+      label: I18n.t('pageflow.linkmap_page.editor.views.areas_list.label'),
+      collection: this.model.linkmapAreas(),
+      highlight: true,
+
+      onEdit: function(model) {
+        pageflow.editor.navigate(model.editPath(), {trigger: true});
+      },
+
+      itemDescription: function(area) {
+        return area.label();
+      },
+
+      itemTypeName: function(area) {
+        return {
+          'audio_file': 'audio',
+          'page': 'internal_links_list',
+          'external_site': 'external_links',
+          'text_only': 'text_only'
+        }[area.get('target_type')];
+      },
+
+      itemTypeDescription: function(area) {
+        return I18n.t('pageflow.linkmap_page.editor.area_types.' + area.get('target_type'));
+      },
+
+      itemIsInvalid: function(area) {
+        return !area.target() && area.get('target_type') !== 'text_only';
+      },
+    }));
+
+    this.appendSubview(new pageflow.DropDownButtonView({
+      sortable: true,
+      label: I18n.t('pageflow.linkmap_page.editor.views.areas_list.add'),
+      items: pageflow.linkmapPage.areaTypesFor(this.model)
+    }));
+
+    return this;
+  }
+});

data/app/assets/javascript/pageflow/linkmap_page/editor/views/configuration_editor_view.js

@@ -0,0 +1,90 @@
+pageflow.linkmapPage.ConfigurationEditorView = pageflow.ConfigurationEditorView.extend({
+  configure: function() {
+    this.tab('general', function() {
+      this.input('title', pageflow.TextInputView, {required: true});
+    });
+
+    this.tab('files', function() {
+      this.input('background_type', pageflow.SelectInputView, {
+        values: ['image', 'video', 'hover_video'],
+        ensureValueDefined: true
+      });
+
+      this.input('panorama_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        positioning: true,
+        visibleBinding: 'background_type',
+        visible: function(backgroundType) {
+          return _(['image', 'hover_video']).contains(backgroundType);
+        }
+      });
+
+      this.input('panorama_video_id', pageflow.FileInputView, {
+        collection: pageflow.videoFiles,
+        positioning: true,
+        visibleBinding: 'background_type',
+        visibleBindingValue: 'video'
+      });
+
+      this.input('panorama_image_id', pageflow.FileInputView, {
+        attributeTranslationKeyPrefixes: ['pageflow.linkmap_page.page_attributes.video_type'],
+        collection: pageflow.imageFiles,
+        positioning: false,
+        visibleBinding: 'background_type',
+        visibleBindingValue: 'video'
+      });
+
+      this.input('hover_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        positioning: false,
+        visibleBinding: 'background_type',
+        visible: function(backgroundType) {
+          return _(['image', 'video']).contains(backgroundType);
+        }
+      });
+
+      this.input('panorama_video_id', pageflow.FileInputView, {
+        attributeTranslationKeyPrefixes: ['pageflow.linkmap_page.page_attributes.hover_video_type'],
+        collection: pageflow.videoFiles,
+        positioning: false,
+        visibleBinding: 'background_type',
+        visibleBindingValue: 'hover_video'
+      });
+
+      this.input('hover_image_id', pageflow.FileInputView, {
+        attributeTranslationKeyPrefixes: ['pageflow.linkmap_page.page_attributes.hover_video_type'],
+        collection: pageflow.imageFiles,
+        positioning: false,
+        visibleBinding: 'background_type',
+        visibleBindingValue: 'hover_video'
+      });
+
+      this.input('visited_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        positioning: false
+      });
+
+      this.input('thumbnail_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        positioning: false
+      });
+    });
+
+    this.tab('areas', function() {
+      this.view(pageflow.linkmapPage.AreasListView, {
+        model: this.model
+      });
+
+      this.view(pageflow.linkmapPage.EditableAreasModeView, {
+        model: this.model.page
+      });
+    });
+
+    this.tab('options', function() {
+      this.group('options', {canPauseAtmo: true});
+      this.input('limit_scrolling', pageflow.CheckBoxInputView);
+      this.input('add_environment', pageflow.CheckBoxInputView);
+      this.input('margin_scrolling_disabled', pageflow.CheckBoxInputView);
+    });
+  }
+});

data/app/assets/javascript/pageflow/linkmap_page/editor/views/edit_area_view.js

@@ -0,0 +1,103 @@
+pageflow.linkmapPage.EditAreaView = Backbone.Marionette.Layout.extend({
+  template: 'pageflow/linkmap_page/editor/templates/edit_area',
+
+  regions: {
+    formContainer: '.form_container'
+  },
+
+  ui: {
+    backButton: 'a.back'
+  },
+
+  events: {
+    'click a.back': 'goBack',
+
+    'click a.destroy': 'destroy'
+  },
+
+  onRender: function() {
+    var view = this;
+    var area = this.model;
+    var areaCollection = this.model.collection;
+    var configurationEditor = new pageflow.ConfigurationEditorView({
+      model: this.model
+    });
+
+    this.configure(configurationEditor);
+
+    this.formContainer.show(configurationEditor);
+    this.model.set('highlighted', true);
+    this.model.collection.page.set('areas_editable', true);
+
+    this.on('close', function() {
+      area.unset('highlighted');
+      areaCollection.page.unset('areas_editable');
+    });
+  },
+
+  configure: function(configurationEditor) {
+    var view = this;
+
+    configurationEditor.tab('general', function() {
+      this.input('name', pageflow.TextInputView);
+
+      this.input('target_type', pageflow.SelectInputView, {
+        values: ['page', 'external_site', 'audio_file', 'text_only'],
+        ensureValueDefined: true
+      });
+
+      this.input('target_id', pageflow.PageLinkInputView, {
+        visibleBinding: 'target_type',
+        visibleBindingValue: 'page'
+      });
+
+      this.input('page_transition', pageflow.SelectInputView, {
+        translationKeyPrefix: 'pageflow.page_transitions',
+        includeBlank: true,
+        blankTranslationKey: 'pageflow.linkmap_page.default_page_transition',
+        values: pageflow.pageTransitions.names(),
+        visibleBinding: 'target_type',
+        visibleBindingValue: 'page'
+      });
+
+      this.input('target_id', pageflow.externalLinks.SiteReferenceInputView, {
+        visibleBinding: 'target_type',
+        visibleBindingValue: 'external_site'
+      });
+
+      this.input('target_id', pageflow.FileInputView, {
+        collection: 'audio_files',
+        fileSelectionHandler: 'linkmapPage.area',
+        fileSelectionHandlerOptions: {
+          areaIndex: view.options.areaIndex,
+        },
+        visibleBinding: 'target_type',
+        visibleBindingValue: 'audio_file'
+      });
+
+      this.input('link_title', pageflow.TextInputView);
+      this.input('link_description', pageflow.TextAreaInputView, {size: 'short'});
+    });
+
+    configurationEditor.tab('appearance', function() {
+      this.input('marker', pageflow.SelectInputView, {values: pageflow.linkmapPage.toggleMarkerOptions});
+      this.input('inverted', pageflow.CheckBoxInputView, {
+        visibleBinding: 'target_type',
+        visible: function(value) {
+          return value !== 'text_only';
+        }
+      });
+    });
+  },
+
+  destroy: function() {
+    if (confirm(I18n.t('pageflow.linkmap_page.editor.views.edit_area_view.confirm_destroy'))) {
+      this.model.remove();
+      this.goBack();
+    }
+  },
+
+  goBack: function() {
+    pageflow.editor.navigate('/pages/' + this.options.page.id + '/areas', {trigger: true});
+  }
+});

data/app/assets/javascript/pageflow/linkmap_page/editor/views/editable_areas_mode_view.js

@@ -0,0 +1,10 @@
+pageflow.linkmapPage.EditableAreasModeView = Backbone.Marionette.View.extend({
+  render: function() {
+    this.model.set('areas_editable', true);
+    return this;
+  },
+
+  onClose: function() {
+    this.model.unset('areas_editable');
+  }
+});

data/app/assets/javascript/pageflow/linkmap_page/editor/views/embedded/area_item_embedded_view.js

@@ -0,0 +1,190 @@
+pageflow.linkmapPage.AreaItemEmbeddedView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/linkmap_page/editor/templates/embedded/area_item',
+
+  className: 'hover_area',
+
+  ui: {
+    hoverImage: '.hover_image',
+    visitedImage: '.visited_image'
+  },
+
+  events: {
+    'click .edit': function() {
+      pageflow.editor.navigate(this.model.editPath(), {trigger: true});
+      return false;
+    },
+
+    'click': function() {
+      if (this.$el.is('.editable .hover_area')) {
+        return false;
+      }
+    },
+
+    'click .toggle_marker': function() {
+      if (this.model.get('marker') === 'dynamic_marker') {
+        this.model.set('marker', 'no_marker');
+      }
+      else {
+        this.model.set('marker', 'dynamic_marker');
+      }
+    }
+  },
+
+  modelEvents: {
+    change: 'update'
+  },
+
+  onRender: function() {
+    this.setupImageViews();
+    this.setupDraggableAndResizable();
+    this.setupAudioPlayer();
+    this.listenToEditable();
+
+    this.update();
+  },
+
+  setupImageViews: function() {
+    var hoverImageView = new pageflow.BackgroundImageEmbeddedView({
+      el: this.ui.hoverImage,
+      model: this.options.pageConfiguration,
+      propertyName: 'hover_image_id'
+    }).render();
+
+    var visitedImageView = new pageflow.BackgroundImageEmbeddedView({
+      el: this.ui.visitedImage,
+      model: this.options.pageConfiguration,
+      propertyName: 'visited_image_id'
+    }).render();
+  },
+
+  setupDraggableAndResizable: function() {
+    var that = this;
+    var scroller = this.options.container.$('.scroller');
+
+    this.$el.resizable({
+      handles: 'n, e, s, w, ne, se, sw, nw',
+
+      start: function() {
+        that.$el.addClass('hover editing');
+        scroller.scroller('disable');
+
+      },
+
+      stop: function(event, ui) {
+        that.$el.removeClass('hover editing');
+        savePositionAndSize();
+        scroller.scroller('enable');
+      }
+    });
+
+    this.$el.draggable({
+      iframeFix: true,
+
+      start: function() {
+        that.$el.addClass('hover editing');
+        scroller.scroller('disable');
+      },
+
+      drag: function(event, ui) {
+        that.$el.linkmapAreaClip(ui.position);
+      },
+
+      stop: function(event, ui) {
+        that.$el.removeClass('hover editing');
+        scroller.scroller('enable');
+        savePositionAndSize();
+      }
+    }).css('position', 'absolute');
+
+    if (!this.options.page.get('areas_editable')) {
+      this.$el.resizable('disable');
+      this.$el.draggable('disable');
+    }
+
+    function savePositionAndSize() {
+      var element = that.$el;
+
+      that.model.set({
+        left: parseInt(element.css('left'), 10) / (element.parent().width() / 100),
+        top: parseInt(element.css('top'), 10) / (element.parent().height() / 100),
+        width: parseInt(element.css('width'), 10) / (element.parent().width() / 100),
+        height: parseInt(element.css('height'), 10) / (element.parent().height() / 100)
+      });
+    }
+  },
+
+  setupAudioPlayer: function() {
+    this.$el.linkmapAudioPlayerControls();
+  },
+
+  listenToEditable: function() {
+    this.listenTo(this.options.page, 'change:areas_editable', function(model, editable) {
+      if (editable) {
+        this.$el.resizable('enable');
+        this.$el.draggable('enable');
+      }
+      else {
+        this.$el.resizable('disable');
+        this.$el.draggable('disable');
+      }
+    });
+  },
+
+  update: function() {
+    var audioFileId = this.model.get('target_id');
+
+    this.$el.attr('data-audio-file', audioFileId ? audioFileId + '.' + this.cid : '');
+    this.$el.attr('data-target-type', this.model.get('target_type'));
+    this.$el.attr('data-target-id', this.model.get('target_id'));
+    this.$el.attr('data-page-transition', this.model.get('page_transition'));
+
+    this.$el.toggleClass('highlighted', !!this.model.get('highlighted'));
+
+    this.$el.attr('data-width', this.model.get('width'));
+    this.$el.attr('data-height', this.model.get('height'));
+
+    this.$el.css('left', this.model.get('left') + '%');
+    this.$el.css('top', this.model.get('top') + '%');
+    this.$el.css('width', this.model.get('width') + '%');
+    this.$el.css('height', this.model.get('height') + '%');
+
+    this.$el.toggleClass('portrait', this.$el.width() <= this.$el.height());
+    this.$el.toggleClass('landscape', this.$el.width() > this.$el.height());
+
+    _(['page', 'audio_file', 'external_site', 'text_only']).each(function(type) {
+      this.$el.toggleClass(type + '_area', this.model.get('target_type') === type);
+    }, this);
+
+    var linkmapMarker = this.$el.find('.linkmap_marker');
+    var margin = 32;
+
+    if (this.$el.width() <= this.$el.height()) {
+      linkmapMarker.css({
+        'width': this.$el.width() - margin,
+        'height': this.$el.width() - margin,
+      });
+    }
+    else {
+      linkmapMarker.css({
+        'width': this.$el.height() - margin,
+        'height': this.$el.height() - margin,
+      });
+    }
+
+    var marker = this.model.get('marker');
+    var element = this.$el;
+    var that = this;
+
+    var linkTitle = this.$el.find('.link_title');
+    var linkDescription = this.$el.find('.link_description');
+
+    linkTitle.html(this.model.get('link_title'));
+    linkDescription.html(this.model.get('link_description'));
+
+    _.forEach(pageflow.linkmapPage.toggleMarkerOptions, function(option) {
+      element.toggleClass(option, that.model.get('marker') === option);
+    });
+
+    element.toggleClass('inverted', !!this.model.get('inverted'));
+  }
+});