pageflow-chart 0.1.1 → 0.2.0

checksums.yaml

@@ -1,15 +1,7 @@
 ---
-!binary "U0hBMQ==":
-  metadata.gz: !binary |-
-    NzRhZTQ1NzAzMGRmYjQwN2ExODk5ZWFjZmYzNzJkNDA1NjBjZTJmYw==
-  data.tar.gz: !binary |-
-    ZDNhYTYzOThiOTk1Njg3ODRiNzM3ZjIzMmI1NGRjNmNjYzEwM2JkMA==
+SHA1:
+  metadata.gz: 6b8214ac8aa74aef666927a7e0885bf08cd11dfb
+  data.tar.gz: f8742d5353918f09393681e95a80b5ab07f60cd4
 SHA512:
-  metadata.gz: !binary |-
-    NWQyMTEzYzhkMzkxZjgxNTdjY2Q4MWYwN2I3ODI4NmMxNjkzNzY3NGZiY2Vk
-    MzNhYmY2ZmQ4ZjcxYWMzZWRmODZmNDJiZjdiM2YxOTRmYjc0NmYyYmNmNTFl
-    OTliYTNiMTIxOGMzMWYyZmQ5N2E4NzkxZDgzN2EzZjc3ODRhYWE=
-  data.tar.gz: !binary |-
-    YzA5MzExNmQ4ZGQ1MTI0M2NmOWMyYWY4ZWUxOGJiMWFkZjMzNmZiMGVmN2Ni
-    ZTE3NjAxYTM2NzFmN2MxY2VlMDliZGU2YzNhNTc1Y2UwZDEwODg2ZDZkY2I1
-    NzM1ZTgyZDRhYTk4NWM5Mzk3MmUwZDdmMmVhOGJiNjg5OTUzNmE=
+  metadata.gz: 55d71e4e9ecd1b741a289c1a5ab0e76527928c69beaf6bbe72b0148ed66633ceb0589f1f21fe55f358aee76d3a9e40b005cd7b57c8d6c5727f2f8fd489852c13
+  data.tar.gz: 6d834f287f3db679deff54c09575b18b4db50a3e4f7dfa1930cde69ca4f0217542b69f3e3c040d0dcdbfbca8b4b90241270ef4b6b9aa6747374816cfc186d8a0

data/.gitignore

@@ -4,6 +4,7 @@
 .bundle
 .config
 .yardoc
+.idea
 Gemfile.lock
 InstalledFiles
 _yardoc

data/.jshintrc

@@ -0,0 +1,22 @@
+{
+  "browser": true,
+  "undef": true,
+  "immed": true,
+  "trailing": true,
+  "globals": {
+    "jQuery": true,
+    "$": true,
+    "Backbone": true,
+    "Cocktail": true,
+    "_": true,
+    "vjs": true,
+    "Audio5js": true,
+    "I18n": true,
+
+    "pageflow": true,
+    "editor": true,
+    
+    "confirm": true,
+    "alert": true
+  }
+}

data/.travis.yml

@@ -0,0 +1,14 @@
+language: ruby
+rvm: 2.1
+
+# User container based travis infrastructure which allows caching
+# features for open source projects.
+sudo: false
+cache: bundler
+
+services:
+  - redis-server
+
+script:
+  - bin/rake app:db:setup app:db:test:load
+  - bin/rspec

data/CHANGELOG.md

@@ -1,7 +1,44 @@
 # CHANGELOG
 
+### Version 0.2.0
+
+2016-06-09
+
+[Compare changes](https://github.com/codevise/pageflow-chart/compare/v0.1.0...v0.2.0)
+
+- Feature full width
+  ([#23](https://github.com/codevise/pageflow-chart/pull/23))
+- Fix toggle button position
+  ([#22](https://github.com/codevise/pageflow-chart/pull/22))
+- Remove padding of iframe container
+  ([#21](https://github.com/codevise/pageflow-chart/pull/21))
+- Bug fix: Improve iframe event propagation on mobile
+  ([#20](https://github.com/codevise/pageflow-chart/pull/20))
+- Allow configuring themes with transparent background
+  ([#19](https://github.com/codevise/pageflow-chart/pull/19))
+- Add 'create chart' button to configuration editor
+  ([#18](https://github.com/codevise/pageflow-chart/pull/18))
+- Add config option to stop using the custom theme
+  ([#17](https://github.com/codevise/pageflow-chart/pull/17))
+- Use configurable page type pictograms
+  ([#16](https://github.com/codevise/pageflow-chart/pull/16))
+- Add datawrapper.dwcdn.net to supported hosts
+  ([#15](https://github.com/codevise/pageflow-chart/pull/15))
+- Add pageflow-public-i18n gem dependency
+  ([#14](https://github.com/codevise/pageflow-chart/pull/14))
+- Extract publicly visible i18n strings from locale
+  ([#11](https://github.com/codevise/pageflow-chart/pull/11))
+- Bug fix: Do not abort js execution on exception in chart
+  ([#25](https://github.com/codevise/pageflow-chart/pull/25))
+- Add .idea entry to .gitignore
+  ([#12](https://github.com/codevise/pageflow-chart/pull/12))
+- Add .jshintrc
+  ([#24](https://github.com/codevise/pageflow-chart/pull/24))
+
 ### Version 0.1.1
 
+2015-07-02
+
 [Compare changes](https://github.com/codevise/pageflow-chart/compare/v0.1.0...v0.1.1)
 
 - Bug fix: Support new datawrapper host name.

data/Gemfile

@@ -8,3 +8,5 @@ gem 'ransack'
 gem 'inherited_resources', '1.4.1'
 gem 'formtastic', '2.3.0.rc2'
 gem 'state_machine', git: 'https://github.com/codevise/state_machine.git'
+
+gem 'pageflow', git: 'https://github.com/codevise/pageflow'

data/README.md

@@ -1,6 +1,7 @@
 # Pageflow Chart
 
 [![Gem Version](https://badge.fury.io/rb/pageflow-chart.svg)](http://badge.fury.io/rb/pageflow-chart)
+[![Build Status](https://travis-ci.org/codevise/pageflow-chart.svg?branch=master)](https://travis-ci.org/codevise/pageflow-chart)
 
 Page type showing scraped svg diagramms from Datawrapper.
 
@@ -73,6 +74,9 @@ Example:
       
       # Allow scraping charts from custom account URLs
       config.supported_hosts << 'http://mycustom.datawrapper.de'
+
+      # Uncomment to inject custom css into iframe.
+      # config.use_custom_theme = true
     end
 
 Also see `lib/pageflow/chart/configuration.rb` for the additional options.

data/Rakefile

@@ -18,3 +18,6 @@ APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
 load 'rails/tasks/engine.rake'
 
 Bundler::GemHelper.install_tasks
+
+require 'semmy'
+Semmy::Tasks.install

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

@@ -1,3 +1,4 @@
 pageflow.chart.assetUrls = {
-  customStylesheet: '<%= asset_path('pageflow/chart/custom.css', :protocol => 'http') %>'
+  customStylesheet: '<%= asset_path('pageflow/chart/custom.css', :protocol => 'http') %>',
+  transparentBackgroundStylesheet: '<%= asset_path('pageflow/chart/transparent_background.css', :protocol => 'http') %>'
 };

data/app/assets/javascripts/pageflow/chart/editor/templates/datawrapper_ad.jst.ejs

@@ -0,0 +1,4 @@
+<form action="https://datawrapper.de/chart/create" method="POST" target="_blank">
+  <input type="hidden" name="theme" value="pageflow" />
+  <input type="submit" value="<%= I18n.t('pageflow.chart.editor.templates.datawrapper_ad.create_chart') %>" />
+</form>

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

@@ -12,6 +12,8 @@ pageflow.ConfigurationEditorView.register('chart', {
         displayPropertyName: 'display_scraped_site_url',
         required: true
       });
+      this.view(pageflow.chart.DatawrapperAdView);
+      this.input('full_width', pageflow.CheckBoxInputView);
       this.input('background_image_id', pageflow.FileInputView, {collection: pageflow.imageFiles});
       this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,

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

@@ -0,0 +1,4 @@
+pageflow.chart.DatawrapperAdView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/chart/editor/templates/datawrapper_ad',
+  className: 'datawrapper_ad'
+});

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

@@ -26,19 +26,20 @@ pageflow.chart.IframeEmbeddedView = Backbone.Marionette.View.extend({
     if (scrapedSiteId) {
       this.scrapedSite = pageflow.chart.scrapedSites.getOrFetch(scrapedSiteId, {
         success: function(scrapedSite) {
-          view.updateSrc(scrapedSite);
+          view.updateAttributes(scrapedSite);
         }
       });
 
-      this.listenTo(this.scrapedSite, 'change', this.updateSrc);
+      this.listenTo(this.scrapedSite, 'change', this.updateAttributes);
     }
   },
 
-  updateSrc: function(scrapedSite) {
+  updateAttributes: function(scrapedSite) {
     scrapedSite = scrapedSite || this.scrapedSite;
 
     if (scrapedSite && scrapedSite.isProcessed()) {
       this.$el.attr('src', scrapedSite.get('html_file_url'));
+      this.$el.attr('data-use-custom-theme', scrapedSite.get('use_custom_theme'));
     }
     else {
       this.$el.attr('src', '');

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

@@ -18,10 +18,14 @@ pageflow.pageType.register('chart', _.extend({
 
   resize: function(pageElement, configuration) {
     var iframeWrapper = pageElement.find('.iframeWrapper'),
-      pageHeader = pageElement.find('.page_header'),
-      scroller = pageElement.find('.scroller');
+        pageHeader = pageElement.find('.page_header'),
+        scroller = pageElement.find('.scroller'),
+        fullWidth = configuration.full_width,
+        widescreened = pageElement.width() > 1430;
 
-    var widescreened = pageElement.width() > 1430;
+    if (fullWidth) {
+      widescreened = false;
+    }
 
     iframeWrapper.toggleClass('widescreened', widescreened);
 
@@ -34,16 +38,18 @@ pageflow.pageType.register('chart', _.extend({
   },
 
   customizeLayout: function(pageElement, configuration) {
-    if(!this.layoutCustomized) {
-      var iframe = pageElement.find('iframe'),
-       scroller = pageElement.find('.scroller'),
-       iframeOverlay = pageElement.find('.iframe_overlay');
+    var that = this;
+    var iframe = pageElement.find('iframe');
+    var scroller = pageElement.find('.scroller');
+    var iframeOverlay = pageElement.find('.iframe_overlay');
 
+    if(!this.layoutCustomized) {
       iframe.load(function() {
         $(this).contents().find('.fs-btn').css('display','none');
-        $(this).contents().find('head').append('<link rel="stylesheet" type="text/css" href="' + pageflow.chart.assetUrls.customStylesheet + '">');
         $(this).contents().find('body').addClass($("[data-theme]").attr('data-theme'));
 
+        that._injectStylesheets($(this));
+
         if(pageflow.features.has('mobile platform')) {
           setTimeout(function() {
             if(iframe) {
@@ -60,21 +66,48 @@ pageflow.pageType.register('chart', _.extend({
     }
   },
 
+  _injectStylesheets: function(iframe) {
+    if (iframe.data('useCustomTheme')) {
+      this._injectStylesheet(iframe, pageflow.chart.assetUrls.customStylesheet);
+    }
+    else {
+      this._injectStylesheet(iframe, pageflow.chart.assetUrls.transparentBackgroundStylesheet);
+    }
+  },
+
+  _injectStylesheet: function(iframe, path) {
+    head = iframe.contents().find('head');
+    head.append('<link rel="stylesheet" type="text/css" href="' + path + '">');
+  },
+
   _initEventSimulation: function(element, iframe, wrapper) {
-    var propagatedEvents = 'click mousemove mouseup mouseover mousedown';
-    var lastElement;
-    element.on(propagatedEvents, function(event) {
+    element.on('click', function(event) {
       var contentElement = iframe.contents()[0];
-      element.css('display','none');
+
+      element.css('display', 'none');
+
       if (contentElement && event) {
-        lastElement = $(contentElement.elementFromPoint(event.pageX-iframe.offset().left, event.pageY-iframe.offset().top));
-        lastElement.simulate("mousedown", event);
-        lastElement.simulate("mousemove", event);
-        lastElement.simulate("click", 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');
+
+      element.css('display', 'block');
+
       event.preventDefault();
       event.stopPropagation();
     });
@@ -124,6 +157,12 @@ pageflow.pageType.register('chart', _.extend({
     pageElement.find('.shadow').css({
       opacity: configuration.get('gradient_opacity') / 100
     });
+
+    if (configuration.hasChanged('full_width')) {
+      $('body').removeClass('bigScreen');
+    }
+
+    this.resize(pageElement, configuration.attributes);
   },
 
   embeddedEditorViews: function() {

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

@@ -1,3 +1,5 @@
+//= require jquery.simulate-events
+
 //= require_self
 //= require ./chart/asset_urls
 //= require ./chart/page_type

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

@@ -14,4 +14,15 @@
       display: block;
     }
   }
-}
+}
+
+.datawrapper_ad {
+  @include clearfix;
+
+  input {
+    @include button('simple', #6AACF7);
+    padding: 3px 10px;
+    width: auto;
+    float: right;
+  }
+}

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

@@ -1,3 +1,5 @@
+@include pageflow-page-type-pictograms("chart");
+
 $chart-background: $basic-background-color;
 
 .chart_page {

data/app/assets/stylesheets/pageflow/chart/transparent_background.css.erb

@@ -0,0 +1,7 @@
+<%=
+  Pageflow::Chart.config.datawrapper_themes_with_transparent_background_support.map do |name|
+    "body.theme-#{name}"
+  end.join(',')
+%> {
+  background-color: rgba(0, 0, 0, 0) !important;
+}

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

@@ -7,6 +7,10 @@
     height: 400px;
     position: relative;
 
+    @media (min-width: 1500px) {
+      height: 800px;
+    }
+
     .hidden &, .hideText & {
       @include transition(0.7s ease);
     }
@@ -33,6 +37,10 @@
         top: 5%;
         margin-top: 0;
       }
+
+      .bigscreen_toggler{
+        visibility: visible;
+      }
     }
 
     .hideText & {
@@ -40,21 +48,17 @@
       opacity: 0;
     }
 
-    &:before {
-      padding: 15px;
+    &::before {
       background-color: #191919;
       background-color: rgba(25,25,25, 0.9);
       box-shadow: rgba(0,0,0,0.5) 0 0 3px 0px;
       content: "";
       position: absolute;
-      top: -15px;
-      left: -15px;
       width: 100%;
       z-index: -1;
       height: 100%;
 
       @include phone {
-        padding: 15px 0;
         left: 0;
       }
     }
@@ -84,13 +88,14 @@
       background-position: 0 0;
       background-repeat: no-repeat;
       position: absolute;
-      top: 3px;
+      top: 18px;
       right: 18px;
       color: transparent;
       text-indent: -4000px;
       opacity: 0;
       cursor: pointer;
       display: none;
+      visibility: hidden;
       @include transition(opacity 0.5s ease);
 
       .has_mobile_platform & {

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

@@ -1,12 +1,28 @@
 module Pageflow
   module Chart
     module ScrapedSitesHelper
-      def scraped_site_url(scraped_site_id)
+      IFRAME_ATTRIBUTES = {
+        style: 'width: 100%; height: 100%',
+        scrolling: 'auto',
+        frameborder: '0',
+        align: 'aus',
+        allowfullscreen: 'true',
+        mozallowfullscreen: 'true',
+        webkitallowfullscreen: 'true'
+      }
+
+      def scraped_site_iframe(scraped_site_id)
         scraped_site = ScrapedSite.find_by_id(scraped_site_id)
+        data_attributes = {}
 
         if scraped_site
-          scraped_site.html_file_url
+          data_attributes = {
+            src: scraped_site.html_file_url,
+            use_custom_theme: scraped_site.use_custom_theme
+          }
         end
+
+        content_tag(:iframe, '', IFRAME_ATTRIBUTES.merge(data: data_attributes))
       end
     end
   end

data/app/jobs/pageflow/chart/scrape_site_job.rb

@@ -19,12 +19,17 @@ module Pageflow
             content_type: 'text/html'
           )
 
-          downloader.load_all(scraper.javascript_urls, extension: '.js', separator: "\n;") do |file|
-            scraped_site.javascript_file = file
+          downloader.load_all(scraper.javascript_urls,
+                              extension: '.js',
+                              before_each: begin_try_catch,
+                              after_each: end_try_catch) do |javascript_file|
+            scraped_site.javascript_file = javascript_file
           end
 
-          downloader.load_all(scraper.stylesheet_urls, extension: '.css', separator: "\n;") do |file|
-            scraped_site.stylesheet_file = file
+          downloader.load_all(scraper.stylesheet_urls,
+                              extension: '.css',
+                              separator: "\n;") do |stylesheet_file|
+            scraped_site.stylesheet_file = stylesheet_file
           end
         end
 
@@ -39,6 +44,14 @@ module Pageflow
         # This is were the downloader passed to `initialize` is created.
         new(Downloader.new(base_url: scraped_site.url)).perform(scraped_site)
       end
+
+      def begin_try_catch
+        ";try {\n"
+      end
+
+      def end_try_catch
+        "\n} catch(e) { console.log('Datawrapper raised: ' + (e.message || e)); }\n"
+      end
     end
 
     class StringIOWithContentType < StringIO

data/app/models/pageflow/chart/scraped_site.rb

@@ -35,6 +35,11 @@ module Pageflow
         end
       end
 
+      before_create do
+        self.use_custom_theme = Chart.config.use_custom_theme
+        true
+      end
+
       def csv_url
         URI.join(url, 'data.csv').to_s
       end

data/app/views/pageflow/chart/page.html

@@ -7,18 +7,9 @@
 
   <div class="content">
     <div class="iframeWrapper">
-      <iframe data-src="<%= scraped_site_url(configuration['scraped_site_id']) %>"
-              style="width: 100%; height: 100%"
-              name="°"
-              scrolling="auto"
-              frameborder="0"
-              align="aus"
-              marginheight="15"
-              marginwidth="15"
-              allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
-      </iframe>
+      <%= scraped_site_iframe(configuration['scraped_site_id']) %>
       <div class="iframe_overlay"></div>
-      <div class="bigscreen_toggler" tabindex="4" title="<%= t('.toggle_title') %>"><%= t('.toggle') %></div>
+      <div class="bigscreen_toggler" tabindex="4" title="<%= t('pageflow.public.chart.toggle') %>"><%= t('pageflow.public.chart.toggle') %></div>
     </div>
     <div class="scroller">
       <div>

data/bin/rake

@@ -0,0 +1,16 @@
+#!/usr/bin/env ruby
+#
+# This file was generated by Bundler.
+#
+# The application 'rake' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require 'pathname'
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require 'rubygems'
+require 'bundler/setup'
+
+load Gem.bin_path('rake', 'rake')

data/bin/rspec

@@ -0,0 +1,16 @@
+#!/usr/bin/env ruby
+#
+# This file was generated by Bundler.
+#
+# The application 'rspec' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require 'pathname'
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require 'rubygems'
+require 'bundler/setup'
+
+load Gem.bin_path('rspec-core', 'rspec')

data/chart.gemspec

@@ -1,8 +1,11 @@
 # coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'pageflow/chart/version'
 
 Gem::Specification.new do |spec|
   spec.name          = "pageflow-chart"
-  spec.version       = "0.1.1"
+  spec.version       = Pageflow::Chart::VERSION
   spec.authors       = ["Tim Fischbach"]
   spec.email         = ["tfischbach@codevise.de"]
   spec.summary       = "Pagetype for Embedded Datawrapper Charts"
@@ -13,12 +16,13 @@ Gem::Specification.new do |spec|
   spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
   spec.require_paths = ["lib"]
 
-  spec.add_runtime_dependency "pageflow", "~> 0.7"
+  spec.add_runtime_dependency "pageflow", "~> 0.10"
   spec.add_runtime_dependency "nokogiri"
   spec.add_runtime_dependency "paperclip", "~> 4.2"
   spec.add_runtime_dependency "state_machine"
   spec.add_runtime_dependency "state_machine_job"
   spec.add_runtime_dependency 'i18n-js'
+  spec.add_runtime_dependency 'pageflow-public-i18n', '~> 1.0'
 
   spec.add_development_dependency "bundler"
   spec.add_development_dependency "rake"
@@ -26,4 +30,7 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency 'factory_girl_rails'
   spec.add_development_dependency "sqlite3"
   spec.add_development_dependency "webmock"
+
+  # Semantic versioning rake tasks
+  spec.add_development_dependency 'semmy', '~> 0.2'
 end

data/config/locales/de.yml

@@ -16,7 +16,7 @@ de:
           text: ! '# Diagramm
 
 
-            Einbindung von DataWrapper-Diagrammen
+            Einbindung von Datawrapper-Diagrammen
 
 
             Hier kannst Du Deinen Pageflow um animierte Infografiken ergänzen. Eingebettet ist das
@@ -31,10 +31,10 @@ de:
             diesen Dienst in Anspruch zu nehmen.
 
 
+            Beachte, dass Datawrapper ein spezielles Design für Diagramme bietet, die in Pageflow eingebettet werden sollen. Klicke dazu im "Visualisieren" Schritt des Diagramm Assistenten auf das Tab "Design" und wähle "Pageflow" aus. Das Farbschema des Diagramms ist dann für die Verwendung in Pageflow optimiert.
+
+
             Typische Anwendungsbeispiele: Statistiken, Diagramme, Zahlen&Fakten'
-      page:
-        toggle: Ansicht vergrößern bzw. verkleinern
-        toggle_title: Ansicht vergrößern bzw. verkleinern
       page_type_category_name: Daten und Diagramme
-      page_type_description: Einbindung von Diagrammen, die mit DataWrapper erstellt wurden
+      page_type_description: Einbindung von Diagrammen, die mit Datawrapper erstellt wurden
       page_type_name: Diagramm

data/config/locales/en.yml

@@ -13,10 +13,7 @@ en:
       help_entries:
         page_type:
           menu_item: Chart
-          text: ! "# Chart\n\nIntegration of a DataWrapper-Diagram\n\nHere you can add animated infographics to your Pageflow. The diagram is embedded into a background-picture and text. To enlarge the graphic you simply have to click on it. \n\nBut first of all you have to create your graphic externally and generate a link. You can find examples and requirements for this under www.datawrapper.de.\n\nExamples of application: statistics, diagrams, numbers & facts"
-      page:
-        toggle: Toggle
-        toggle_title: Toggle
+          text: ! "# Chart\n\nIntegration of a Datawrapper-Diagram\n\nHere you can add animated infographics to your Pageflow. The diagram is embedded into a background-picture and text. To enlarge the graphic you simply have to click on it. \n\nBut first of all you have to create your graphic externally and generate a link. You can find examples and requirements for this under www.datawrapper.de.\n\nNote that Datawrapper offers a special layout option for charts that shall be embedded into a Pageflow: In the \"Visualize\" step of the chart creation wizard, click the \"Design\" tab and select the \"Pageflow\" layout. That way a color scheme is used which complements Pageflow's look.\n\nExamples of application: statistics, diagrams, numbers & facts"
       page_type_category_name: Data and Charts
-      page_type_description: Embedded DataWrapper chart
+      page_type_description: Embedded Datawrapper chart
       page_type_name: Chart

data/config/locales/new/datawrapper_ad.de.yml

@@ -0,0 +1,10 @@
+de:
+  pageflow:
+    chart:
+      editor:
+        templates:
+          datawrapper_ad:
+            create_chart: "Neues Datawrapper Diagramm erstellen"
+      page_attributes:
+        scraped_site_id:
+          inline_help: "URL zu einem bei Datawrapper publiziertem Diagramm. Datawrapper bietet in den Diagramm Optionen ein spezielles 'Pageflow' Design für eine optimale Darstellung innerhalb des Beitrags. "

data/config/locales/new/datawrapper_ad.en.yml

@@ -0,0 +1,10 @@
+en:
+  pageflow:
+    chart:
+      editor:
+        templates:
+          datawrapper_ad:
+            create_chart: "Create new Datawrapper chart"
+      page_attributes:
+        scraped_site_id:
+          inline_help: "URL of a chart published via Datawrapper. Datawrapper offers a special 'Pageflow' layout selectable on the 'Design' tab for optimal display inside Pageflow."

data/config/locales/new/full_width.de.yml

@@ -0,0 +1,7 @@
+de:
+  pageflow:
+    chart:
+      page_attributes:
+        full_width:
+          inline_help: Verbreitert das Diagramm, so dass es die maximal verfügbare Breite nutzt.
+          label: Gesamte Breite nutzen

data/config/locales/new/full_width.en.yml

@@ -0,0 +1,7 @@
+en:
+  pageflow:
+    chart:
+      page_attributes:
+        full_width:
+          inline_help: Extends the chart to use the maximum width available.
+          label: Use full width

data/db/migrate/20160211085234_add_use_custom_theme_to_scraped_sites.rb

@@ -0,0 +1,5 @@
+class AddUseCustomThemeToScrapedSites < ActiveRecord::Migration
+  def change
+    add_column :pageflow_chart_scraped_sites, :use_custom_theme, :boolean, default: true, null: false
+  end
+end

data/lib/generators/pageflow_chart/install/install_generator.rb

@@ -0,0 +1,7 @@
+module PageflowChart
+  class InstallGenerator < Pageflow::PageTypeInstallGenerator
+    def engine
+      Pageflow::Chart::Engine
+    end
+  end
+end

data/lib/pageflow/chart/configuration.rb

@@ -32,6 +32,26 @@ module Pageflow
       # @return [Array<String>]
       attr_reader :supported_hosts
 
+      # If enabled, set `has_custom_theme` to `true` for new scraped
+      # sites. This causes styles from `pageflow/chart/custom.scss` to
+      # be injected into their iframe on page creation.
+      #
+      # This used to be the default, but is disabled in favor of
+      # custom Datawrapper themes now.
+      #
+      # @return [Boolean]
+      attr_accessor :use_custom_theme
+
+      # List of datawrapper theme names for which an additional css
+      # rule shall be injected to make the background
+      # transparent. This is only recommended for themes with dark
+      # backgrounds. By default, this is only done for the `pageflow`
+      # theme.
+      #
+      # @since 0.2
+      # @return [Array<String>]
+      attr_reader :datawrapper_themes_with_transparent_background_support
+
       def initialize
         @scraper_options = {
           head_script_blacklist: [/piwik/],
@@ -41,7 +61,13 @@ module Pageflow
         @paperclip_s3_default_options = {}
         @paperclip_base_path = ':host'
         @scraped_sites_root_url = nil
-        @supported_hosts = ['http://cf.datawrapper.de', 'http://datawrapper.dwcdn.de']
+        @supported_hosts = [
+          'http://cf.datawrapper.de',
+          'http://datawrapper.dwcdn.de',
+          'http://datawrapper.dwcdn.net'
+        ]
+        @use_custom_theme = false
+        @datawrapper_themes_with_transparent_background_support = ['pageflow']
       end
 
       # @api private

data/lib/pageflow/chart/downloader.rb

@@ -26,12 +26,15 @@ module Pageflow
 
         begin
           urls.map do |url|
+            file.write(options[:before_each]) if options.key?(:before_each)
+
             load(url) do |source|
               while data = source.read(16 * 1024)
                 file.write(data)
               end
             end
 
+            file.write(options[:after_each]) if options.key?(:after_each)
             file.write(options.fetch(:separator, "\n"))
           end
 

data/lib/pageflow/chart/engine.rb

@@ -1,10 +1,13 @@
+require 'pageflow-public-i18n'
+
 module Pageflow
   module Chart
     class Engine < Rails::Engine
       isolate_namespace Pageflow::Chart
 
       config.autoload_paths << File.join(config.root, 'lib')
-      config.assets.precompile += ['pageflow/chart/custom.css']
+      config.assets.precompile += ['pageflow/chart/custom.css', 'pageflow/chart/transparent_background.css']
+      config.i18n.load_path += Dir[config.root.join('config', 'locales', '**', '*.yml').to_s]
 
       config.generators do |g|
         g.test_framework :rspec,:fixture => false

data/lib/pageflow/chart/version.rb

@@ -0,0 +1,5 @@
+module Pageflow
+  module Chart
+    VERSION = '0.2.0'.freeze
+  end
+end

data/spec/dummy/db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20140417112724) do
+ActiveRecord::Schema.define(version: 20160211085234) do
 
   create_table "pageflow_chart_scraped_sites", force: true do |t|
     t.string   "url"
@@ -34,6 +34,7 @@ ActiveRecord::Schema.define(version: 20140417112724) do
     t.datetime "csv_file_updated_at"
     t.datetime "created_at"
     t.datetime "updated_at"
+    t.boolean  "use_custom_theme",             default: true, null: false
   end
 
 end

data/spec/models/pageflow/chart/scraped_site_spec.rb

@@ -15,5 +15,16 @@ module Pageflow::Chart
         expect(scraped_site.csv_url).to eq('http://example.com/foo/data.csv')
       end
     end
+
+    it 'copies use_custom_theme flag from config on create' do
+      Pageflow::Chart.config.use_custom_theme = true
+      scraped_site_with_custom_theme = create(:scraped_site)
+
+      Pageflow::Chart.config.use_custom_theme = false
+      scraped_site_without_custom_theme = create(:scraped_site)
+
+      expect(scraped_site_with_custom_theme.use_custom_theme).to eq(true)
+      expect(scraped_site_without_custom_theme.use_custom_theme).to eq(false)
+    end
   end
 end

data/spec/pageflow/chart/downloader_spec.rb

@@ -84,6 +84,22 @@ module Pageflow
 
           expect(result).to eq("aaa;bbb;")
         end
+
+        it 'allows to wrap file contents' do
+          downloader = Downloader.new
+          result = ''
+
+          stub_request(:get, "http://example.com/a").to_return(status: 200, body: 'aaa')
+          stub_request(:get, "http://example.com/b").to_return(status: 200, body: 'bbb')
+
+          downloader.load_all(['http://example.com/a', 'http://example.com/b'],
+                              before_each: 'try {',
+                              after_each: '} catch(e) {}') do |io|
+            result = io.read
+          end
+
+          expect(result).to eq("try {aaa} catch(e) {}\ntry {bbb} catch(e) {}\n")
+        end
       end
     end
   end

metadata

@@ -1,183 +1,211 @@
 --- !ruby/object:Gem::Specification
 name: pageflow-chart
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Tim Fischbach
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-02 00:00:00.000000000 Z
+date: 2016-06-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pageflow
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.7'
+        version: '0.10'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.7'
+        version: '0.10'
 - !ruby/object:Gem::Dependency
   name: nokogiri
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: paperclip
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '4.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '4.2'
 - !ruby/object:Gem::Dependency
   name: state_machine
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: state_machine_job
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: i18n-js
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: pageflow-public-i18n
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '2.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '2.0'
 - !ruby/object:Gem::Dependency
   name: factory_girl_rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: webmock
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: semmy
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
 description: 
 email:
 - tfischbach@codevise.de
@@ -185,12 +213,16 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- .gitignore
+- ".gitignore"
+- ".jshintrc"
+- ".travis.yml"
 - CHANGELOG.md
 - Gemfile
 - README.md
 - Rakefile
 - app/assets/images/pageflow/chart/fs_close_sprite.png
+- app/assets/images/pageflow/chart/themes/default/pictograms/sprite.png
+- app/assets/images/pageflow/chart/themes/default/pictograms/wide.png
 - app/assets/images/pageflow/chart_pictogram.png
 - app/assets/images/pageflow/chart_pictogram_small.png
 - app/assets/images/pageflow/chart_sprite.png
@@ -201,9 +233,11 @@ files:
 - app/assets/javascripts/pageflow/chart/editor/collections/scraped_sites_collection.js
 - app/assets/javascripts/pageflow/chart/editor/initializers/setup_collections.js
 - app/assets/javascripts/pageflow/chart/editor/models/scraped_site.js
+- app/assets/javascripts/pageflow/chart/editor/templates/datawrapper_ad.jst.ejs
 - app/assets/javascripts/pageflow/chart/editor/templates/scraped_site_status.jst.ejs
 - app/assets/javascripts/pageflow/chart/editor/templates/url_input.jst.ejs
 - app/assets/javascripts/pageflow/chart/editor/views/configuration_editor.js
+- app/assets/javascripts/pageflow/chart/editor/views/datawrapper_ad_view.js
 - app/assets/javascripts/pageflow/chart/editor/views/embedded/iframe_embedded_view.js
 - app/assets/javascripts/pageflow/chart/editor/views/inputs/scraped_url_input_view.js
 - app/assets/javascripts/pageflow/chart/editor/views/scraped_site_status_view.js
@@ -212,6 +246,7 @@ files:
 - app/assets/stylesheets/pageflow/chart/custom.css.scss
 - app/assets/stylesheets/pageflow/chart/editor.css.scss
 - app/assets/stylesheets/pageflow/chart/themes/default.css.scss
+- app/assets/stylesheets/pageflow/chart/transparent_background.css.erb
 - app/controllers/pageflow/chart/application_controller.rb
 - app/controllers/pageflow/chart/scraped_sites_controller.rb
 - app/helpers/pageflow/chart/scraped_sites_helper.rb
@@ -220,17 +255,26 @@ files:
 - app/views/pageflow/chart/page.html
 - app/views/pageflow/chart/page_type.json.jbuilder
 - bin/rails
+- bin/rake
+- bin/rspec
 - chart.gemspec
 - config/locales/de.yml
 - config/locales/en.yml
+- config/locales/new/datawrapper_ad.de.yml
+- config/locales/new/datawrapper_ad.en.yml
+- config/locales/new/full_width.de.yml
+- config/locales/new/full_width.en.yml
 - config/routes.rb
 - db/migrate/20140417112724_create_pageflow_chart_scraped_sites.rb
+- db/migrate/20160211085234_add_use_custom_theme_to_scraped_sites.rb
+- lib/generators/pageflow_chart/install/install_generator.rb
 - lib/pageflow/chart.rb
 - lib/pageflow/chart/configuration.rb
 - lib/pageflow/chart/downloader.rb
 - lib/pageflow/chart/engine.rb
 - lib/pageflow/chart/page_type.rb
 - lib/pageflow/chart/scraper.rb
+- lib/pageflow/chart/version.rb
 - spec/controllers/pageflow/chart/scraped_sites_controller_spec.rb
 - spec/dummy/README.rdoc
 - spec/dummy/Rakefile
@@ -294,17 +338,17 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.2
+rubygems_version: 2.2.5
 signing_key: 
 specification_version: 4
 summary: Pagetype for Embedded Datawrapper Charts