pageflow-external-links 0.0.1

data/app/assets/javascript/pageflow/external_links/editor/views/embedded/list_embedded_view.js

@@ -0,0 +1,22 @@
+pageflow.externalLinks.ListEmbeddedView = Backbone.Marionette.View.extend({
+  render: function() {
+    this.subview(new pageflow.CollectionView({
+      el: this.$el.find('div'),
+      collection: this.model.externalSiteReferences(),
+      itemViewConstructor: pageflow.externalLinks.ListItemEmbeddedView
+    }));
+
+    this.listenTo(this.model.externalSiteReferences(), 'add remove', function() {
+      this.refreshScroller();
+    });
+
+    this.refreshScroller();
+
+    return this;
+  },
+
+  refreshScroller: function() {
+    this.$el.data('scroller').refresh();
+    this.$el.data('scroller').checkDisable();
+  }
+});

data/app/assets/javascript/pageflow/external_links/editor/views/embedded/list_item_embedded_view.js

@@ -0,0 +1,56 @@
+pageflow.externalLinks.ListItemEmbeddedView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/external_links/editor/templates/embedded/list_item',
+
+  tagName: 'a',
+  className: 'link-item',
+
+  ui: {
+    title: '.link-title',
+    description: '.link-description',
+    thumbnail: '.link-thumbnail'
+  },
+
+  onRender: function() {
+    this.listenTo(this.model.get('site'), 'change', this.update);
+    this.update();
+  },
+
+  update: function() {
+    var site = this.model.get('site');
+
+    this.ui.title.text(site.get('title'));
+    this.ui.description.html(site.get('description'));
+
+    this.$el.toggleClass('no_text', blank(site.get('title')) && blank(site.get('description')));
+
+    this.$el.attr('href', site.get('url'));
+    this.$el.attr('blank', site.get('open_in_new_tab') ? '_blank' : null);
+
+    this.updateThumbnailView(site);
+
+    function blank(text) {
+      return !text || text.replace(/\s+/g, '').replace(/ /g, '') === '';
+    }
+  },
+
+  updateThumbnailView: function(site) {
+    var thumbnail = site.getThumbnail();
+
+    if (this.currentThumbnail !== thumbnail) {
+      this.currentThumbnail = thumbnail;
+
+      if (this.thumbnailView) {
+        this.thumbnailView.close();
+      }
+
+      if (thumbnail) {
+        this.thumbnailView = this.subview(new pageflow.FileThumbnailView({
+          model: thumbnail,
+          imageUrlPropertyName: 'link_thumbnail_url'
+        }));
+
+        this.ui.thumbnail.append(this.thumbnailView.el);
+      }
+    }
+  },
+});

data/app/assets/javascript/pageflow/external_links/editor/views/inputs/site_reference_input_view.js

@@ -0,0 +1,31 @@
+pageflow.externalLinks.SiteReferenceInputView = Backbone.Marionette.ItemView.extend({
+  mixins: [pageflow.inputView],
+
+  template: 'pageflow/external_links/editor/templates/inputs/site_reference',
+  className: 'external_links_site_reference_input',
+
+  ui: {
+    sites: 'ul.sites'
+  },
+
+  events: {
+    'click .add_reference': function() {
+      pageflow.editor.navigate(
+        '/external_links/sites?page=' + this.model.page.id,
+        {trigger: true}
+      );
+      return false;
+    }
+  },
+
+  onRender: function() {
+    this.subview(new pageflow.SortableCollectionView({
+      el: this.ui.sites,
+      collection: this.model.externalSiteReferences(),
+      itemViewConstructor: pageflow.externalLinks.SiteReferenceItemView,
+      itemViewOptions: {
+        page: this.model.page
+      }
+    }));
+  }
+});

data/app/assets/javascript/pageflow/external_links/editor/views/site_item_view.js

@@ -0,0 +1,44 @@
+pageflow.externalLinks.SiteItemView = Backbone.Marionette.ItemView.extend({
+  tagName: 'li',
+  template: 'pageflow/external_links/editor/templates/site_item',
+
+  mixins: [pageflow.loadable],
+
+  ui: {
+    title: '.title',
+    selectButton: '.select',
+    thumbnail: '.thumbnail'
+  },
+
+  events: {
+    'click': function() {
+      if (!this.model.isNew()) {
+        var query = this.options.page ? '/?page=' + this.options.page.id + '&return_to=sites' : '';
+        pageflow.editor.navigate('/external_links/sites/' + this.model.get('id') + query, {trigger: true});
+      }
+      return false;
+    },
+
+    'click .select': function() {
+      if (this.options.selectionHandler) {
+        this.options.selectionHandler.call(this.model);
+        pageflow.editor.navigate(this.options.referer, {trigger: true});
+      }
+      return false;
+    }
+  },
+
+  onRender: function() {
+    this.update();
+
+    this.subview(new pageflow.FileThumbnailView({
+      el: this.ui.thumbnail,
+      model: this.model.getReference('thumbnail', pageflow.imageFiles)
+    }));
+  },
+
+  update: function() {
+    this.ui.title.text(this.model.get('title') || '(Unbenannt)');
+    this.ui.selectButton.toggle(!!this.options.selectionHandler);
+  }
+});

data/app/assets/javascript/pageflow/external_links/editor/views/site_reference_item_view.js

@@ -0,0 +1,32 @@
+pageflow.externalLinks.SiteReferenceItemView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/external_links/editor/templates/site_reference_item',
+
+  tagName: 'li',
+  className: 'external_links_site_reference',
+
+  ui: {
+    thumbnail: '.thumbnail',
+    title: '.title'
+  },
+
+  events: {
+    'click .remove': function() {
+      this.model.destroy();
+      return false;
+    },
+
+    'click .edit': function() {
+      pageflow.editor.navigate('/external_links/sites/' + this.model.get('site').id + '/?page=' + this.options.page.id + '&return_to=page', {trigger: true});
+      return false;
+    }
+  },
+
+  onRender: function() {
+    this.subview(new pageflow.FileThumbnailView({
+      el: this.ui.thumbnail,
+      model: this.model.get('site').getThumbnail()
+    }));
+
+    this.ui.title.text(this.model.get('site').get('title') || '(Unbenannt)');
+  },
+});

data/app/assets/javascript/pageflow/external_links/editor/views/sites_view.js

@@ -0,0 +1,35 @@
+pageflow.externalLinks.SitesView = Backbone.Marionette.ItemView.extend({
+  className: 'manage_external_sites',
+  template: 'pageflow/external_links/editor/templates/sites',
+
+  events: {
+    'click .add': function() {
+      var site = pageflow.externalLinks.sites.create({title: ''});
+      var options = this.options;
+
+      site.once('sync', function() {
+        var query = options.page ? '/?page=' + options.page.id + '&return_to=sites' : '';
+        pageflow.editor.navigate('external_links/sites/' + site.id + query, {trigger: true});
+      });
+    }
+  },
+
+  onRender: function() {
+    pageflow.externalLinks.sites.ensureFetched();
+
+    this.$el.append(this.subview(new pageflow.CollectionView({
+      tagName: 'ul',
+      className: 'sites',
+      collection: pageflow.externalLinks.sites,
+      itemViewConstructor: pageflow.externalLinks.SiteItemView,
+      itemViewOptions: {
+        selectionHandler: this.options.selectionHandler,
+        referer: this.options.referer,
+        page: this.options.page
+      },
+      blankSlateViewConstructor: Backbone.Marionette.ItemView.extend({
+        template: 'pageflow/external_links/editor/templates/sites_blank_slate'
+      })
+    })).el);
+  }
+});

data/app/assets/javascript/pageflow/external_links/page_type.js

@@ -0,0 +1,141 @@
+/*global IScroll*/
+
+pageflow.pageType.register('external_links', _.extend({
+  prepareNextPageTimeout: 0,
+
+  enhance: function(pageElement, configuration) {
+    var scrollerElement = pageElement.find('.ext-links'),
+    that = this,
+    innerScroller = pageElement.find('#horizontal_scroller'),
+    contentWrapper = pageElement.find('.contentWrapper');
+
+    this.scroller = new IScroll(scrollerElement[0], {
+      mouseWheel: true,
+      bounce: false,
+      keyBindings: true,
+      scrollX: true,
+      scrollY: false,
+      probeType: 2,
+      eventPassthrough: true
+    });
+
+    this.scroller.checkDisable = function() {
+      that._checkForIScroll(scrollerElement, innerScroller, pageElement.find('.arrow-forward'), pageElement.find('.arrow-back'), pageElement);
+    };
+    scrollerElement.data('scroller', this.scroller);
+
+    that.scroller.on('scroll', function() {
+      that.scroller.checkDisable();
+    });
+
+
+    /* Arrows for Gallery */
+
+    pageElement.find('.arrow-back').on('click', function(e) {
+      var nextElement = Math.round((that.scroller.x / - 260) - (scrollerElement.width() / 260 / 2), 10);
+      if(nextElement <= 1 ) {
+        that.scroller.scrollTo(0, 0, 500, IScroll.ease.quadratic);
+      }
+      else {
+        that.scroller.scrollToElement($(".page.active #horizontal_scroller a")[nextElement], 500, 0, 0, IScroll.ease.quadratic);
+      }
+      that.scroller.checkDisable();
+      e.stopPropagation();
+      return false;
+    });
+
+    pageElement.find('.arrow-forward').on('click', function(e) {
+      var nextElement = Math.round((that.scroller.x / - 260) + (scrollerElement.width() / 260 / 2), 10);
+      if(nextElement == innerScroller.find('a').length -1 ) {
+        that.scroller.scrollTo(that.scroller.maxScrollX, 0, 500, IScroll.ease.quadratic);
+      }
+      else {
+        that.scroller.scrollToElement($(".page.active #horizontal_scroller a")[nextElement]);
+      }
+      that.scroller.checkDisable();
+      e.stopPropagation();
+      return false;
+    });
+  },
+
+  resize: function(pageElement, configuration) {
+    this.scroller.refresh();
+    this.scroller.checkDisable();
+  },
+
+  _checkForIScroll: function(outerElement, innerElement, arrowForward, arrowBack, pageElement) {
+    if(pageElement.width() <= 700) {
+      this.scroller.disable();
+    }
+    else {
+      if(innerElement.width() <= outerElement.width()) {
+        this.scroller.disable();
+        arrowForward.css('display','none');
+        arrowBack.css('display','none');
+      }
+      else {
+        this.scroller.enable();
+        if(this.scroller.x == this.scroller.maxScrollX) {
+          arrowForward.css('display','none');
+        }
+        else {
+          arrowForward.css('display','block');
+        }
+        if(this.scroller.x === 0) {
+          arrowBack.css('display','none');
+        }
+        else {
+          arrowBack.css('display','block');
+        }
+      }
+    }
+  },
+
+  prepare: function(pageElement, configuration) {
+  },
+
+  preload: function(pageElement, configuration) {
+    return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
+  },
+
+  activating: function(pageElement, configuration) {
+    this.scroller.refresh();
+    this.scroller.checkDisable();
+  },
+
+  activated: function(pageElement, configuration) {
+  },
+
+  deactivating: function(pageElement, configuration) {},
+
+  deactivated: function(pageElement, configuration) {},
+
+  update: function(pageElement, configuration) {
+    pageElement.find('h2 .tagline').text(configuration.get('tagline') || '');
+    pageElement.find('h2 .title').text(configuration.get('title') || '');
+    pageElement.find('h2 .subtitle').text(configuration.get('subtitle') || '');
+    pageElement.find('.contentText p').html(configuration.get('text') || '');
+
+    this.updateCommonPageCssClasses(pageElement, configuration);
+
+    pageElement.find('.shadow').css({
+      opacity: configuration.get('gradient_opacity') / 100
+    });
+    this.scroller.refresh();
+    this.scroller.checkDisable();
+  },
+
+  embeddedEditorViews: function() {
+    return {
+      '.background_image': {
+        view: pageflow.BackgroundImageEmbeddedView,
+        options: {propertyName: 'background_image_id'}
+      },
+
+      '.ext-links': {
+        view: pageflow.externalLinks.ListEmbeddedView,
+        options: {propertyName: 'linked_external_site_perma_ids'}
+      }
+    };
+  }
+}, pageflow.commonPageCssClasses));

data/app/assets/stylesheets/pageflow/external_links.css.scss

@@ -0,0 +1,175 @@
+@include pageflow-page-type(external_links);
+
+.external-links-page {
+
+  .ext-links {
+    height: 400px;
+    pointer-events: all;
+    position: relative;
+    @include transition(opacity 0.5s);
+
+    .hideText & {
+      @include transform(translate(-100%,0));
+    }
+
+    @include phone {
+      height: auto;
+    }
+  }
+
+  .arrow-forward, .arrow-back {
+    position: relative;
+    top: 100%;
+    width: 80px;
+    height: 80px;
+    text-decoration: none;
+    pointer-events: all;
+
+    &:before {
+      content: "\f105";
+      font-family: "FontAwesome";
+      color: white;
+      width: 100%;
+      position: absolute;
+      height: 100%;
+      text-align: center;
+      line-height: 80px;
+      font-size: 80px;
+      opacity: 0.9;
+      text-shadow: 2px 2px 7px black, -1px -1px 7px black;
+      @include transition(opacity 0.3s);
+    }
+
+    &:hover {
+      &:before {
+        opacity: 1;
+      }
+    }
+
+    .invert & {
+      &:before {
+        color: black;
+        text-shadow: 2px 2px 7px black, -1px -1px 7px white;
+      }
+    }
+
+
+    @include phone {
+      display: none !important;
+    }
+  }
+
+  .arrow-back {
+
+    &:before {
+      content: "\f104";
+    }
+  }
+  .arrow-forward {
+    float: right;
+  }
+
+  #horizontal_scroller {
+    position: absolute;
+    text-align: center;
+
+    .js & {
+      white-space: nowrap;
+
+      @include phone {
+        white-space: normal;
+        position: relative;
+      }
+    }
+
+    @include phone {
+      white-space: normal;
+      position: relative;
+    }
+  }
+
+  .link-item {
+    display: inline-block;
+    width: 24%;
+    width: 250px;
+    background-color: rgb(20,20,20);
+    background-color: rgba(20,20,20, 0.8);
+    vertical-align: top;
+    max-height: 400px;
+    height: 400px;
+    overflow: hidden;
+    text-align: left;
+    margin-right: 10px;
+    text-decoration: none;
+    color: white;
+    @include transition(0.3s);
+
+    &.no_text {
+      height: auto;
+
+      .link-details {
+        display: none;
+      }
+    }
+
+    &:hover {
+      text-decoration: underline;
+      background-color: rgba(20,20,20, 1);
+      @include transform(scale(1.05));
+
+      @include phone {
+        @include transform(scale(1));
+      }
+    }
+    @include phone {
+      width: 230px;
+      margin-right: 0;
+      margin-bottom: 10px;
+      height: 290px;
+      max-height: 290px;
+      margin-right: 5px;
+      margin-left: 5px;
+    }
+
+    &:last-child {
+    }
+
+    .link-thumbnail {
+      background-repeat: no-repeat;
+      background-size: cover;
+      width: 100%;
+      padding-top: 56.25%;
+      position: relative;
+
+      .file_thumbnail {
+        background-size: cover;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+      }
+    }
+
+    .link-details {
+      margin: 20px;
+      text-decoration: none;
+      color: #fff;
+
+      p {
+        width: 100%;
+        white-space: normal;
+        line-height: 1.3em;
+      }
+
+      .link-title {
+        font-size: 1.2em;
+        font-weight: bold;
+        text-overflow: ellipsis;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+  }
+}