pageflow-chart 0.1.0

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    ZmViYWVjOGM0OGIwOTFkODk3MzA1NjBiOWQxMDBiMjQ3NDNkNzFjZA==
+  data.tar.gz: !binary |-
+    ZTBhODQ0ZTE2ZGNiYzI4NDQ0YTRhYmFlN2Y1NjZiZTg1NjllODNlMA==
+SHA512:
+  metadata.gz: !binary |-
+    ZTQzNzQxZjczZDBiZDkyY2VmMTg2ZjQ2NGY1ZDAwY2RiZDdmOGRjZGMyYWQx
+    NTYyMDU0YWUyNzYzMDllODQxNTA4NmYyYjc2NTVmNmIyMzVlMDc3NDJiNWY2
+    ODk1Y2M5NDVjNDAwY2IyZWM1ZTljNGMzODIzMjM2YWM0MWMxMTU=
+  data.tar.gz: !binary |-
+    NDk1NDY1YTkzNWQ0ODRiMWZlNjhjZDM2ZDM3ZTNhOTNiYTQ4YWI1MzUzMWQw
+    ZGNkZWRkM2ZiMjcxNjMxMTJmYTc0MmVlYjU3YzcwNDY1OWM5Mjc1NmQ5MWE4
+    MWQwZjIyYTlkMDk2MmFlOWYyYWIzYzk5ZmU2ZDNlM2M1NDE1Y2U=

data/.gitignore

@@ -0,0 +1,21 @@
+*.gem
+*.rbc
+*.sqlite3
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+log
+
+.localeapp

data/CHANGELOG.md

@@ -0,0 +1,7 @@
+# CHANGELOG
+
+### Version 0.1.0
+
+2015-02-03
+
+Initial release.

data/Gemfile

@@ -0,0 +1,10 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in chart.gemspec
+gemspec
+
+gem 'activeadmin', :git => 'https://github.com/codevise/active_admin.git', :branch => 'rails4'
+gem 'ransack'
+gem 'inherited_resources', '1.4.1'
+gem 'formtastic', '2.3.0.rc2'
+

data/README.md

@@ -0,0 +1,91 @@
+# Pageflow Chart
+
+Page type showing scraped svg diagramms from Datawrapper.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    # Gemfile
+    gem 'pagflow-chart'
+
+Mount the engine:
+
+    # config/routes.rb
+    mount Pageflow::Chart::Engine, :at => '/chart'
+
+Register the page type:
+
+    # config/initializers/pageflow.rb
+    config.register_page_type(Pageflow::Chart.page_type)
+
+Include javascript/stylesheets:
+
+    # app/assets/javascripts/pageflow/application.js
+    //= require "pageflow/chart"
+
+    # app/assets/javascripts/pageflow/editor.js
+    //= require pageflow/chart/editor
+
+    # app/assets/stylesheets/pageflow/application.scss.css;
+    @import "pageflow/chart";
+
+
+    # app/assets/stylesheets/pageflow/editor.scss.css;
+    @import "pageflow/chart/editor";
+
+    # Adding basic style to your theme
+    # app/assets/stylesheets/pageflow/themes/default.css.scss
+    @import "pageflow/chart/themes/default";
+
+Install and run migrations:
+
+    rake pageflow_chart:install:migrations
+    rake db:migrate SCOPE=pageflow_chart
+
+## Create Proxy
+
+Create a proxy (via Apache, Nginx, ...) from your domain to your configured
+`S3_HOST_ALIAS` to circumvent the same-domain policy. Configure this
+in your Pageflow Chart initializer `config/initializers/pageflow_chart.rb`.
+
+Example conf snippet for Nginx:
+
+    location /datawrapper/ {
+      proxy_pass http://bucketname.s3-website-eu-west-1.amazonaws.com/;
+      proxy_redirect http://bucketname.s3-website-eu-west-1.amazonaws.com/ $scheme://$host/datawrapper/;
+    }
+
+This is needed so the charts can be servered from the same origin as
+the entry.
+
+## Configuration
+
+Configure Pageflow Chart by creating an initializer in your app
+`config/initializers/pageflow_chart.rb`.
+
+Example:
+
+    Pageflow::Chart.configure do |config|
+      config.scraped_sites_root_url = '/datawrapper'
+    end
+
+Please see `lib/pageflow/chart/configuration.rb` for the possible options.
+
+TODO: Document config options here
+
+## Troubleshooting
+
+If you run into problems while installing the page type, please also
+refer to the
+[Troubleshooting](https://github.com/codevise/pageflow/wiki/Troubleshooting)
+wiki page in the
+[Pageflow repository](https://github.com/codevise/pageflow). If that
+doesn't help, consider
+[filing an issue](https://github.com/codevise/pageflow-chart/issues).
+
+## Contributing Locales
+
+Edit the translations directly on the
+[pageflow-chart](http://www.localeapp.com/projects/public?search=tf/pageflow-chart)
+locale project.

data/Rakefile

@@ -0,0 +1,20 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Pageflow Chart'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+Bundler::GemHelper.install_tasks

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

@@ -0,0 +1,5 @@
+//= require_self
+//= require ./chart/asset_urls
+//= require ./chart/page_type
+
+pageflow.chart = pageflow.chart || {};

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

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

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

@@ -0,0 +1,9 @@
+//= 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 || {};

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

@@ -0,0 +1,23 @@
+pageflow.chart.ScrapedSitesCollection = Backbone.Collection.extend({
+  model: pageflow.chart.ScrapedSite,
+
+  name: 'scraped_sites',
+
+  getOrFetch: function(id, options) {
+    options = options || {};
+    var model = this.get(id);
+
+    if (model) {
+      if (options.success) {
+        options.success(model);
+      }
+    }
+    else {
+      model = new pageflow.chart.ScrapedSite({id: id});
+      this.add(model);
+      model.fetch(options);
+    }
+
+    return model;
+  }
+});

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

@@ -0,0 +1 @@
+pageflow.chart.scrapedSites = new pageflow.chart.ScrapedSitesCollection();

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

@@ -0,0 +1,55 @@
+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;
+    }
+
+    model.pollingInterval = setInterval(poll, 1000);
+
+    function stopPolling() {
+      if (model.pollingInterval) {
+        clearInterval(model.pollingInterval);
+        model.pollingInterval = null;
+      }
+    }
+
+    function poll() {
+      model.fetch({
+        success: function() {
+          if (!model.isProcessing()) {
+            stopPolling();
+          }
+        }
+      });
+    }
+  }
+});

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

@@ -0,0 +1,2 @@
+<p class="processing state validation pending"><%= I18n.t('pageflow.chart.editor.templates.scraped_site_status.pending') %></p>
+<p class="failed state validation failed"><%= I18n.t('pageflow.chart.editor.templates.scraped_site_status.failed') %></p>

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

@@ -0,0 +1,7 @@
+<label>
+  <span class="name"></span>
+  <span class="inline_help"></span>
+</label>
+<input type="text" />
+<div class="validation"></div>
+<div class="status_container"></div>

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

@@ -0,0 +1,26 @@
+pageflow.ConfigurationEditorView.register('chart', {
+  configure: function() {
+    var supportedHosts = this.options.pageType.supportedHosts;
+
+    this.tab('general', function() {
+      this.group('general');
+    });
+
+    this.tab('files', function() {
+      this.input('scraped_site_id', pageflow.chart.ScrapedUrlInputView, {
+        supportedHosts: supportedHosts,
+        displayPropertyName: 'display_scraped_site_url',
+        required: true
+      });
+      this.input('background_image_id', pageflow.FileInputView, {collection: pageflow.imageFiles});
+      this.input('thumbnail_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        imagePositioning: false
+      });
+    });
+
+    this.tab('options', function() {
+      this.group('options');
+    });
+  }
+});

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

@@ -0,0 +1,47 @@
+pageflow.chart.IframeEmbeddedView = Backbone.Marionette.View.extend({
+  modelEvents: {
+    'change': 'update'
+  },
+
+  render: function() {
+    this.updateScrapedSite();
+    return this;
+  },
+
+  update: function() {
+    if (this.model.hasChanged(this.options.propertyName)) {
+      this.updateScrapedSite();
+    }
+  },
+
+  updateScrapedSite: function() {
+    var view = this;
+
+    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.updateSrc(scrapedSite);
+        }
+      });
+
+      this.listenTo(this.scrapedSite, 'change', this.updateSrc);
+    }
+  },
+
+  updateSrc: function(scrapedSite) {
+    scrapedSite = scrapedSite || this.scrapedSite;
+
+    if (scrapedSite && scrapedSite.isProcessed()) {
+      this.$el.attr('src', scrapedSite.get('html_file_url'));
+    }
+    else {
+      this.$el.attr('src', '');
+    }
+  }
+});

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

@@ -0,0 +1,49 @@
+pageflow.chart.ScrapedUrlInputView = pageflow.UrlInputView.extend({
+  template: 'pageflow/chart/editor/templates/url_input',
+
+  regions: {
+    statusContainer: '.status_container'
+  },
+
+  onLoad: function() {
+    this.listenTo(this.model, 'change:' + this.options.propertyName, function() {
+      this.updateScrapingStatus();
+    });
+
+    this.updateScrapingStatus();
+  },
+
+  transformPropertyValue: function(url) {
+    return $.Deferred(function(deferred) {
+      pageflow.chart.scrapedSites.create(
+        {
+          url: url
+        },
+        {
+          success: function(scrapedSite) {
+            deferred.resolve(scrapedSite.id);
+          }
+        }
+      );
+    }).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));
+    }
+  }
+});

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

@@ -0,0 +1,18 @@
+pageflow.chart.ScrapedSiteStatusView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/chart/editor/templates/scraped_site_status',
+  className: 'scraped_site_status',
+
+  modelEvents: {
+    change: 'update'
+  },
+
+  onRender: function() {
+    this.update();
+  },
+
+  update: function() {
+    this.$el.toggleClass('processed', this.model.isProcessed());
+    this.$el.toggleClass('failed', this.model.isFailed());
+    this.$el.toggleClass('processing', this.model.isProcessing());
+  }
+});