pageflow-chart 2.1.0 → 2.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69e58dc4cf527ebcc87f4fb761209cbc4c943f851dbbf317c34b1dc386b98b30
-  data.tar.gz: d7e671cc45b645abe390dc01ba7db1a59b117dffc9ff873284d5864a9ec2cad7
+  metadata.gz: 5eaf6b87c76738d2e7efa81a3732a96ef09820bc1b2ca74e9a6e79c71532862c
+  data.tar.gz: 8ad985582dbd2205427546becca4aaa6033394f6c5b6b91e6be69f248bf7f9e4
 SHA512:
-  metadata.gz: fe79c1727ae70e0184a93c568fc042edcbaddf86ab5d51fda3040dec8a037a57493233271cae64208735c9b3bbc9ece1d72dc5fe07a9e0feddf1d63dd421347d
-  data.tar.gz: 29f7ecd19a0dbd9ed7c0f21db3be6bd1cb7a47d71282ea74e6b7077ce7fe28b16fc1453af7a6af3bb7dc78c53aa77c2cfc8be1c2b024b96eac9f94fc79403e68
+  metadata.gz: f95634d293e9fe2c59600172e89e07ca177166ae1da0224bdbb96c8331a4406e68d7650fcc89c360f8ddbdeca5f81deaa66fe030a97470d7dd5f4c49f5baacb6
+  data.tar.gz: 5127f6494bd7819de6f6203b96f4cf5a6074db0953ee5d06fff2c5b0337f699bd5794fc0070267a9cfbb8c86c314e94707a235f81fc8e6fd9c199b6a2100f032

data/.travis.yml

@@ -8,6 +8,7 @@ cache: bundler
 
 services:
   - redis-server
+  - mysql
 
 script:
   - bin/rspec

data/CHANGELOG.md

@@ -1,16 +1,20 @@
 # CHANGELOG
 
-### Version 2.1.0
+### Version 2.4.0
 
-2019-04-08
+2022-07-18
 
-[Compare changes](https://github.com/codevise/pageflow-chart/compare/2-0-stable...v2.1.0)
+[Compare changes](https://github.com/codevise/pageflow-chart/compare/2-3-stable...v2.4.0)
 
-- Adapt page dom for pageflow 14
-  ([#51](https://github.com/codevise/pageflow-chart/pull/51))
-- Setup page type lint specs
-  ([#50](https://github.com/codevise/pageflow-chart/pull/50))
+- Use rebrushed button style in editor
+  ([#61](https://github.com/codevise/pageflow-chart/pull/61))
+- Make chart urls protocol relative
+  ([#60](https://github.com/codevise/pageflow-chart/pull/60))
+- Display original chart instead of scraped site
+  ([#59](https://github.com/codevise/pageflow-chart/pull/59))
+- Embed opt-in
+  ([#58](https://github.com/codevise/pageflow-chart/pull/58))
 
 See
-[2-0-stable branch](https://github.com/codevise/pageflow-chart/blob/2-0-stable/CHANGELOG.md)
+[2-3-stable branch](https://github.com/codevise/pageflow-chart/blob/2-3-stable/CHANGELOG.md)
 for previous changes.

data/README.md

@@ -17,10 +17,10 @@ Mount the engine:
     # config/routes.rb
     mount Pageflow::Chart::Engine, at: '/chart'
 
-Register the page type:
+Register the plugin:
 
     # config/initializers/pageflow.rb
-    config.page_types.register(Pageflow::Chart.page_type)
+    config.plugin(Pageflow::Chart.plugin)
 
 Include javascript/stylesheets:
 

data/app/assets/javascripts/pageflow/chart/consent.js

@@ -0,0 +1,16 @@
+pageflow.chart.consent = {
+  ensureVendorRegistered: function(options) {
+    if (this.registered) {
+      return;
+    }
+
+    this.registered = true;
+    options = options || {}
+
+    pageflow.consent.registerVendor('datawrapper', {
+      paradigm: options.skip ? 'skip' : 'lazy opt-in',
+      displayName: I18n.t('pageflow.public.chart.consent_vendor_name'),
+      description: I18n.t('pageflow.public.chart.consent_vendor_description')
+    });
+  }
+};

data/app/assets/javascripts/pageflow/chart/editor/config.js

@@ -0,0 +1,7 @@
+pageflow.editor.fileTypes.register('pageflow_chart_scraped_sites', {
+  model: pageflow.chart.ScrapedSite,
+
+  matchUpload: function(upload) {
+    return false;
+  }
+});

data/app/assets/javascripts/pageflow/chart/editor/models/scraped_site.js

@@ -1,55 +1,16 @@
-pageflow.chart.ScrapedSite = Backbone.Model.extend({
-  modelName: 'scraped_site',
-  paramRoot: 'scraped_site',
-
-  initialize: function() {
-    this.listenTo(this, 'sync', function() {
-      if (this.isProcessing() && !this.pollingInterval) {
-        this.pollUntilScraped();
-      }
-    });
-  },
-
-  urlRoot: function() {
-    return '/chart/scraped_sites';
-  },
-
-  isProcessed: function() {
-    return this.get('state') === 'processed';
-  },
-
-  isProcessing: function() {
-    return this.get('state') === 'processing';
-  },
-
-  isFailed: function() {
-    return this.get('state') === 'processing_failed';
-  },
-
-  pollUntilScraped: function() {
-    var model = this;
-
-    if (model.isProcessed()) {
-      return;
+pageflow.chart.ScrapedSite = pageflow.ReusableFile.extend({
+  stages: [
+    {
+      name: 'processing',
+      activeStates: ['processing'],
+      finishedStates: ['processed'],
+      failedStates: ['processing_failed']
     }
+  ],
 
-    model.pollingInterval = setInterval(poll, 1000);
+  readyState: 'processed',
 
-    function stopPolling() {
-      if (model.pollingInterval) {
-        clearInterval(model.pollingInterval);
-        model.pollingInterval = null;
-      }
-    }
-
-    function poll() {
-      model.fetch({
-        success: function() {
-          if (!model.isProcessing()) {
-            stopPolling();
-          }
-        }
-      });
-    }
+  toJSON: function() {
+    return _.pick(this.attributes, 'url');
   }
 });

data/app/assets/javascripts/pageflow/chart/editor/views/configuration_editor.js

@@ -7,11 +7,13 @@ pageflow.ConfigurationEditorView.register('chart', {
     });
 
     this.tab('files', function() {
-      this.input('scraped_site_id', pageflow.chart.ScrapedUrlInputView, {
-        supportedHosts: supportedHosts,
+      this.input('chart_url', pageflow.UrlInputView, {
         displayPropertyName: 'display_scraped_site_url',
-        required: true
+        supportedHosts: supportedHosts,
+        required: true,
+        permitHttps: true
       });
+
       this.view(pageflow.chart.DatawrapperAdView);
       this.input('full_width', pageflow.CheckBoxInputView);
       this.group('background');
@@ -25,4 +27,4 @@ pageflow.ConfigurationEditorView.register('chart', {
       this.group('options');
     });
   }
-});
+});

data/app/assets/javascripts/pageflow/chart/editor/views/embedded/iframe_embedded_view.js

@@ -4,41 +4,57 @@ pageflow.chart.IframeEmbeddedView = Backbone.Marionette.View.extend({
   },
 
   render: function() {
-    this.updateScrapedSite();
+    if (this.model.has('chart_url')) {
+      this.updateChartUrl();
+    }
+    else if (this.model.has('scraped_site_id')) {
+      this.updateScrapedSite();
+    }
+
     return this;
   },
 
   update: function() {
-    if (this.model.hasChanged(this.options.propertyName)) {
+    if (this.model.hasChanged('chart_url')) {
+      this.updateChartUrl();
+    }
+    else if (this.model.hasChanged('scraped_site_id')) {
       this.updateScrapedSite();
     }
   },
 
-  updateScrapedSite: function() {
-    var view = this;
+  updateChartUrl: function() {
+    var url = this.model.get('chart_url');
 
+    if (url) {
+      url = url.replace(/^https?:/, '');
+    }
+
+    this.$el.attr('src', url);
+    this.$el.removeAttr('data-use-custom-theme');
+    this.$el.removeAttr('data-customize-layout');
+  },
+
+  updateScrapedSite: function() {
     if (this.scrapedSite) {
       this.stopListening(this.scrapedSite);
     }
 
-    var scrapedSiteId = this.model.get(this.options.propertyName);
-
-    if (scrapedSiteId) {
-      this.scrapedSite = pageflow.chart.scrapedSites.getOrFetch(scrapedSiteId, {
-        success: function(scrapedSite) {
-          view.updateAttributes(scrapedSite);
-        }
-      });
+    this.scrapedSite = this.model.getReference('scraped_site_id',
+                                               'pageflow_chart_scraped_sites');
+    this.updateAttributes();
 
+    if (this.scrapedSite) {
       this.listenTo(this.scrapedSite, 'change', this.updateAttributes);
     }
   },
 
-  updateAttributes: function(scrapedSite) {
-    scrapedSite = scrapedSite || this.scrapedSite;
+  updateAttributes: function() {
+    var scrapedSite = this.scrapedSite;
 
-    if (scrapedSite && scrapedSite.isProcessed()) {
+    if (scrapedSite && scrapedSite.isReady()) {
       this.$el.attr('src', scrapedSite.get('html_file_url'));
+      this.$el.attr('data-customize-layout', 'true');
 
       if (scrapedSite.get('use_custom_theme')) {
         this.$el.attr('data-use-custom-theme', 'true');
@@ -51,4 +67,4 @@ pageflow.chart.IframeEmbeddedView = Backbone.Marionette.View.extend({
       this.$el.attr('src', '');
     }
   }
-});
+});

data/app/assets/javascripts/pageflow/chart/editor/views/inputs/scraped_url_input_view.js

@@ -1,49 +1,28 @@
 pageflow.chart.ScrapedUrlInputView = pageflow.UrlInputView.extend({
-  template: 'pageflow/chart/editor/templates/url_input',
+  className: 'chart_scraped_site_url_input_view',
 
-  regions: {
-    statusContainer: '.status_container'
-  },
+  save: function() {
+    var url = this.ui.input.val();
 
-  onLoad: function() {
-    this.listenTo(this.model, 'change:' + this.options.propertyName, function() {
-      this.updateScrapingStatus();
-    });
+    if (url) {
+      var scrapedSite = pageflow
+        .entry
+        .getFileCollection('pageflow_chart_scraped_sites')
+        .findOrCreateBy({url: url});
 
-    this.updateScrapingStatus();
-  },
+      if (scrapedSite.isRetryable()) {
+        scrapedSite.retry();
+      }
 
-  transformPropertyValue: function(url) {
-    return $.Deferred(function(deferred) {
-      pageflow.chart.scrapedSites.create(
-        {
-          url: url
-        },
-        {
-          success: function(scrapedSite) {
-            deferred.resolve(scrapedSite.id);
-          }
-        }
+      this.model.setReference(
+        this.options.propertyName,
+        scrapedSite
       );
-    }).promise();
-  },
-
-  updateScrapingStatus: function() {
-    var scrapedSite = this.getScrapedSite();
-
-    if (scrapedSite) {
-      this.statusContainer.show(new pageflow.chart.ScrapedSiteStatusView({
-        model: scrapedSite
-      }));
     }
     else {
-      this.statusContainer.close();
-    }
-  },
-
-  getScrapedSite: function() {
-    if (this.model.has(this.options.propertyName)) {
-      return pageflow.chart.scrapedSites.getOrFetch(this.model.get(this.options.propertyName));
+      this.model.unsetReference(
+        this.options.propertyName
+      );
     }
   }
-});
+});

data/app/assets/javascripts/pageflow/chart/editor.js

@@ -1,9 +1,10 @@
 //= require_self
+
 //= require_tree ./editor/models
-//= require_tree ./editor/collections
 //= require_tree ./editor/views/inputs
 //= require_tree ./editor/templates
 //= require_tree ./editor/views
-//= require_tree ./editor/initializers
 
-pageflow.chart = pageflow.chart || {};
+//= require ./editor/config
+
+pageflow.chart = pageflow.chart || {};

data/app/assets/javascripts/pageflow/chart/page_type.js

@@ -1,8 +1,19 @@
-pageflow.react.registerPageTypeWithDefaultBackground('chart', _.extend({
+pageflow.pageType.registerInitializer('chart', function() {
+  pageflow.chart.consent.ensureVendorRegistered({
+    skip: !pageflow.features.isEnabled('chart_embed_opt_in')
+  });
+});
 
+pageflow.react.registerPageTypeWithDefaultBackground('chart', _.extend({
   prepareNextPageTimeout: 0,
 
   enhance: function(pageElement, configuration) {
+    pageElement.thirdPartyEmbedConsent();
+
+    if (!pageflow.features.isEnabled('chart_embed_opt_in')) {
+      pageElement.find('.opt_out_wrapper').hide();
+    }
+
     var scroller = pageElement.find('.scroller');
 
     pageElement.find('.bigscreen_toggler').on('click', function() {
@@ -41,9 +52,11 @@ pageflow.react.registerPageTypeWithDefaultBackground('chart', _.extend({
     var that = this;
     var iframe = pageElement.find('iframe');
     var scroller = pageElement.find('.scroller');
-    var iframeOverlay = pageElement.find('.iframe_overlay');
 
-    if(!this.layoutCustomized) {
+    if (!iframe.data('customizeLayout')) {
+      pageElement.find('.iframeWrapper').addClass('active');
+    }
+    else if(!this.layoutCustomized) {
       iframe.load(function() {
         $(this).contents().find('.fs-btn').css('display','none');
         $(this).contents().find('body').addClass($("[data-theme]").attr('data-theme'));
@@ -80,63 +93,21 @@ pageflow.react.registerPageTypeWithDefaultBackground('chart', _.extend({
     head.append('<link rel="stylesheet" type="text/css" href="' + path + '">');
   },
 
-  _initEventSimulation: function(element, iframe, wrapper) {
-    element.on('click', function(event) {
-      var contentElement = iframe.contents()[0];
-
-      element.css('display', 'none');
-
-      if (contentElement && event) {
-        var offset = iframe.offset();
-        var options = $.extend({}, event, {
-          screenX: event.screenX - offset.left,
-          screenY: event.screenY - offset.top,
-          clientX: event.clientX - offset.left,
-          clientY: event.clientY - offset.top,
-        });
-
-        var lastElement = $(contentElement.elementFromPoint(event.pageX - offset.left,
-                                                            event.pageY - offset.top));
-
-        lastElement.simulate('mousedown', options);
-        lastElement.simulate('mousemove', options);
-        lastElement.simulate('click', options);
-        lastElement.simulate('mouseup', options);
-
-        element.css('cursor', lastElement.css('cursor'));
-      }
-
-      element.css('display', 'block');
-
-      event.preventDefault();
-      event.stopPropagation();
-    });
-
-    iframe.load(function() {
-      iframe.contents().find('*').on('mousemove', function() {
-        wrapper.addClass('hovering');
-      });
-
-      iframe.contents().on('mouseout', function() {
-        wrapper.removeClass('hovering');
-      });
-    });
-  },
-
   prepare: function(pageElement, configuration) {
     this._loadIframe(pageElement);
   },
 
   activating: function(pageElement, configuration) {
+    this._listenToHeightMessage(pageElement);
     this._loadIframe(pageElement);
     this.resize(pageElement, configuration);
     this.customizeLayout(pageElement, configuration);
-    this._initEventSimulation(pageElement.find('.iframe_overlay'), pageElement.find('iframe'), pageElement.find('.iframeWrapper'));
   },
 
   activated: function(pageElement, configuration) {},
 
   deactivating: function(pageElement, configuration) {
+    this._stopListeningToHeightMessages();
     $('body').removeClass('bigScreen');
   },
 
@@ -159,19 +130,56 @@ pageflow.react.registerPageTypeWithDefaultBackground('chart', _.extend({
   embeddedEditorViews: function() {
     return {
       'iframe': {
-        view: pageflow.chart.IframeEmbeddedView,
-        options: {propertyName: 'scraped_site_id'}
+        view: pageflow.chart.IframeEmbeddedView
       }
     };
   },
 
   _loadIframe: function(pageElement) {
-    pageElement.find('iframe[data-src]').each(function() {
-      var iframe = $(this);
+    if (this.loadIframeCalled) {
+      return;
+    }
+
+    this.loadIframeCalled = true;
 
-      if (!iframe.attr('src')) {
-        iframe.attr('src', iframe.data('src'));
+    pageflow.consent.requireAccepted('datawrapper').then(function(result) {
+      if (result === 'fulfilled') {
+        pageElement.find('iframe[data-src]').each(function() {
+          var iframe = $(this);
+
+          if (!iframe.attr('src')) {
+            iframe.attr('src', iframe.data('src'));
+          }
+        });
       }
     });
+  },
+
+  _listenToHeightMessage: function(pageElement) {
+    this._messageListener = this._messageListener || function(event) {
+      if (typeof event.data['datawrapper-height'] !== 'undefined') {
+        var iframe = pageElement.find('iframe')
+
+        for (var chartId in event.data['datawrapper-height']) {
+          if (iframe.attr('src').indexOf(chartId) > -1) {
+            var iframeWrapper = pageElement.find('.iframeWrapper')
+            var height = event.data['datawrapper-height'][chartId] + 'px';
+
+            if (iframeWrapper.css('height') !== height) {
+              var scroller = pageElement.find('.scroller');
+
+              iframeWrapper.css('height', height);
+              scroller.scroller('refresh');
+            }
+          }
+        }
+      }
+    }
+
+    window.addEventListener('message', this._messageListener);
+  },
+
+  _stopListeningToHeightMessages: function() {
+    window.removeEventListener('message', this._messageListener);
   }
 }, pageflow.defaultPageContent));

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

@@ -1,7 +1,6 @@
-//= require jquery.simulate-events
-
 //= require_self
 //= require ./chart/asset_urls
+//= require ./chart/consent
 //= require ./chart/page_type
 
-pageflow.chart = pageflow.chart || {};
+pageflow.chart = pageflow.chart || {};

data/app/assets/stylesheets/pageflow/chart/editor.scss

@@ -1,28 +1,11 @@
-.scraped_site_status {
-  .state {
-    display: none;
-  }
-
-  &.failed {
-    .failed.state {
-      display: block;
-    }
-  }
-
-  &.processing {
-    .processing.state {
-      display: block;
-    }
-  }
+.chart_scraped_site_url_input_view {
+  margin-bottom: 6px;
 }
 
 .datawrapper_ad {
   @include clearfix;
 
   input {
-    @include button('simple', #6AACF7);
-    padding: 3px 10px;
-    width: auto;
-    float: right;
+    @include simple-button("primary");
   }
 }

data/app/assets/stylesheets/pageflow/chart/themes/default.scss

@@ -1,6 +1,7 @@
 @include pageflow-page-type-pictograms("chart");
 
 $chart-background: $basic-background-color;
+$chart-iframe-base-height: 400px !default;
 
 .chart_page {
   .iframeWrapper {
@@ -8,5 +9,7 @@ $chart-background: $basic-background-color;
       opacity: 0.95;
       background-color: $chart-background;
     }
+
+    height: $chart-iframe-base-height;
   }
 }

data/app/assets/stylesheets/pageflow/chart.scss

@@ -4,7 +4,6 @@
   .iframeWrapper {
     margin-bottom: 40px;
     pointer-events: all;
-    height: 400px;
     position: relative;
 
     @media (min-width: 1500px) {
@@ -63,18 +62,6 @@
       }
     }
 
-    .iframe_overlay {
-      .has_mobile_platform & {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: all;
-        background-color: transparent;
-      }
-    }
-
     .text_position_right &.widescreened {
       @include position-end(auto);
       @include position-start(8%);
@@ -103,19 +90,18 @@
       }
     }
 
-    &:hover .bigscreen_toggler, &.hovering .bigscreen_toggler {
+    &:hover .bigscreen_toggler {
       opacity: 1;
     }
 
     .bigScreen & {
       position: absolute;
       width: 86% !important;
-      height: 87%;
       top: 10%;
       left: 5% !important;
       z-index: 201;
       margin-top: 0 !important;
-      max-height: none !important;
+      max-height: 84% !important;
 
       .bigscreen_toggler {
         background-position: -25px 0;
@@ -132,4 +118,11 @@
       }
     }
   }
+
+  .opt_out_wrapper {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    left: 0;
+  }
 }

data/app/helpers/pageflow/chart/scraped_sites_helper.rb

@@ -1,6 +1,8 @@
 module Pageflow
   module Chart
     module ScrapedSitesHelper
+      include RevisionFileHelper
+
       IFRAME_ATTRIBUTES = {
         style: 'width: 100%; height: 100%',
         scrolling: 'auto',
@@ -11,22 +13,29 @@ module Pageflow
         webkitallowfullscreen: 'true'
       }
 
-      def scraped_site_iframe(scraped_site_id)
-        scraped_site = ScrapedSite.find_by_id(scraped_site_id)
+      def scraped_site_iframe(configuration)
         data_attributes = {}
 
-        if scraped_site
+        if configuration['chart_url']
           data_attributes = {
-            src: scraped_site.html_file_url
+            src: configuration['chart_url'].gsub(/^https?:/, '')
+          }
+        elsif (scraped_site = find_scraped_site(configuration))
+          data_attributes = {
+            src: scraped_site.html_file_url,
+            customize_layout: true,
+            use_custom_theme: scraped_site.use_custom_theme ? true : nil
           }
-
-          if scraped_site.use_custom_theme
-            data_attributes[:use_custom_theme] = true
-          end
         end
 
         content_tag(:iframe, '', IFRAME_ATTRIBUTES.merge(data: data_attributes))
       end
+
+      private
+
+      def find_scraped_site(configuration)
+        find_file_in_entry(ScrapedSite, configuration['scraped_site_id'])
+      end
     end
   end
 end