pageflow-localfocus 0.1.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6a7dd9a5f87f2f9508451d84662fa2a878193f26
-  data.tar.gz: 5544a4aaff0c0d8bd14ccc50efd641f8d2d4ae7e
+  metadata.gz: 669a2ff3409e820dc66cd1c716c7930fa26cf035
+  data.tar.gz: a3bb15be212d688eb5934be3e4e84574552f7f9a
 SHA512:
-  metadata.gz: 7ee6ac8bb5cbfc63a7e5366d9be12dd86bbb4cfb8b33e814af4fb4b1b0b99bbf1d431e98ff0dd3ffdde3ed36961d24cb331d9f6e95f27e522c4e172151c9e945
-  data.tar.gz: ab3528a42ce55e87edcd9850b1b94c136e9ef03b4128eb8d66b8dc54829e781b0ba8f86ee87556e1aaf75f824f546633bd01f7da434fc22609508a96f62c54ea
+  metadata.gz: 123025b2b708f4086f5335b6bd5b5a0dd842a10bc43748cd1ca498b72ddb18bd981c9d52520ea3378e49aa769f873166a93fcf3441533d5ac2602484b4bc4e70
+  data.tar.gz: 42405d5a3d1608cb6561037f59aea3a0d10c128c1f4318c13a4e1be87072178c6204f68fef2acb4a39ebd7b2be5641c6ef710d56b2996f6177c8fc10efee97e2

data/.rspec

@@ -1,3 +1 @@
---format documentation
---color
 --require spec_helper

data/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.0.0] - 2017-06-20
+### Added
+- Embed LocalFocus graphs using their _Direct Link_
+- The Page Type is in React, per Pageflow 12 standards
+- Custom pane in the editor
+- Helpful README and [blog made during coding](https://www.spacebabies.nl/portfolio/lets-build-something-new/)
+
+### Changed
+
+### Removed
+
+
+
+[Unreleased]: https://github.com/olivierlacan/keep-a-changelog/compare/v1.0.0...HEAD
+[1.0.0]: https://github.com/olivierlacan/keep-a-changelog/compare/init...v1.0.0

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+education, socio-economic status, nationality, personal appearance, race,
+religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at team@scrollytelling.io. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+

data/Gemfile.lock

@@ -283,10 +283,6 @@ GEM
     resque_mailer (2.4.3)
       actionmailer (>= 3.0)
       activesupport (>= 3.0)
-    rspec (3.7.0)
-      rspec-core (~> 3.7.0)
-      rspec-expectations (~> 3.7.0)
-      rspec-mocks (~> 3.7.0)
     rspec-core (3.7.0)
       rspec-support (~> 3.7.0)
     rspec-expectations (3.7.0)
@@ -295,6 +291,14 @@ GEM
     rspec-mocks (3.7.0)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.7.0)
+    rspec-rails (3.7.2)
+      actionpack (>= 3.0)
+      activesupport (>= 3.0)
+      railties (>= 3.0)
+      rspec-core (~> 3.7.0)
+      rspec-expectations (~> 3.7.0)
+      rspec-mocks (~> 3.7.0)
+      rspec-support (~> 3.7.0)
     rspec-support (3.7.0)
     rufus-scheduler (2.0.24)
       tzinfo (>= 0.3.22)
@@ -350,7 +354,7 @@ DEPENDENCIES
   bundler (~> 1.16)
   pageflow-localfocus!
   rake (~> 10.0)
-  rspec (~> 3.0)
+  rspec-rails (~> 3.0)
 
 BUNDLED WITH
    1.16.0

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Scrollytelling
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -1,8 +1,29 @@
-# Localfocus integration for Pageflow
+# 📊 LocalFocus integration for Pageflow
+
+[LocalFocus](https://www.localfocus.nl/en/) lets you create and share
+animated illustrations for a wide range of datasets. [Example](https://localfocus2.appspot.com/551a9626918b3)
+
+What you are reading now
+is a custom integration with Open Source storytelling tool [Pageflow](https://pageflow.io). And it's brought to you by [☢Scrollytelling☣](https://www.scrollytelling.io):
+two Amsterdammers❌❌❌ in pyjama with their unstoppable storytelling tank. You're welcome!
+
+### Includes LocalFocus API
+
+The official [LocalFocus JavaScript Widget SDK](https://developers.localfocus.nl/widgets/) is bundled with this plugin.
+
+```
+Version: 1.1
+Date: 09-01-2017
+```
+
+We use it to show a spinner while the chart is loading in the background. When
+everything is ready, the chart appears in place. Smooth operator!
 
 
 ## Installation
 
+_(Assuming you know your way around a Rails application and a Unix terminal.)_
+
 Add this line to your application's Gemfile:
 
 ```ruby
@@ -13,11 +34,42 @@ And then execute:
 
     $ bundle
 
+Register the plugin:
+
+``` ruby
+# config/initializers/pageflow.rb
+Pageflow.configure do |config|
+  config.plugin(Pageflow::Localfocus.plugin)
+end
+```
+
+Include javascripts and stylesheets:
+
+# app/assets/javascripts/components.js
+//= require "pageflow/localfocus/components"
+
+# app/assets/javascripts/pageflow/application.js
+//= require "pageflow/localfocus"
+
+# app/assets/javascripts/pageflow/editor.js
+//= require pageflow/localfocus/editor
+
+# app/assets/stylesheets/pageflow/application.scss
+@import "pageflow/localfocus";
+
+Now you can enable the page type in your feature settings.
+
 ## Usage
 
-TODO: Write usage instructions here
+1. Login as an editor and open any story in the editor
+2. Add a new page and choose type **LocalFocus**
+3. In the *Widget* tab, enter the graph URL you want to show
+
+The graph should appear right away. Happy graphing!
 
-## Development
+## Want to help developing this plugin?
+
+That's cool and help is always needed!
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
 
@@ -26,3 +78,6 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/scrollytelling/pageflow-localfocus.
+
+Photo by Billy Huynh on Unsplash
+https://unsplash.com/photos/W8KTS-mhFUE

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

@@ -1,5 +1,5 @@
 //= require_self
-
+//= require localfocusapi
 //= require ./localfocus/components
 
 pageflow.localfocus = pageflow.localfocus || {};

data/app/assets/javascripts/pageflow/localfocus/components.js

@@ -1,5 +1,5 @@
 //= require_self
-//= require ./components/localfocus_iframe
+//= require ./components/frame
 //= require ./components/page
 
 pageflow.localfocus = pageflow.localfocus || {};

data/app/assets/javascripts/pageflow/localfocus/components/frame.jsx

@@ -0,0 +1,26 @@
+(function() {
+  class Frame extends React.Component {
+    render() {
+      return (
+        <div className="lf-frame">
+          <div className="lf-loading"></div>
+          <iframe
+            src={this.props.page.localfocusUrl}
+            className={this.props.className}
+            ref={iframe => this.iframe = iframe}
+          >
+          </iframe>
+        </div>
+      )
+    }
+  }
+
+  Frame.defaultProps = {
+    className: 'localfocusvisual lf-iframe'
+  }
+
+  const {connectInPage, combine} = pageflow.react;
+
+  pageflow.localfocus.Frame = connectInPage(combine({
+  }))(Frame);
+}());

data/app/assets/javascripts/pageflow/localfocus/components/page.jsx

@@ -1,26 +1,30 @@
 (function() {
   const {
     PageWrapper,
-    PageBackground, PageBackgroundImage, PageShadow,
+    MediaPageBackground, PageBackgroundImage, PageShadow,
     PageContent, PageHeader, PageText
   } = pageflow.react.components;
 
   const {
-    LocalfocusIframe
+    Frame
   } = pageflow.localfocus;
 
   class Page extends React.Component {
+    constructor(props) {
+      super(props);
+    }
+
     render() {
       return (
         <PageWrapper>
-          <PageBackground>
-          </PageBackground>
+          <MediaPageBackground page={this.props.page} />
 
           <PageContent>
-            <LocalfocusIframe/>
+            <Frame page={this.props.page}/>
+            <PageText page={this.props.page} />
           </PageContent>
         </PageWrapper>
-      )
+      );
     }
   }
 
@@ -32,6 +36,11 @@
       combine({
         page: pageAttributes()
       })
-    )(Page)
+    )(Page),
+
+    // Enable page state reducers and sagas to handle playback
+    reduxModules: [
+      pageflow.react.mediaPageBackgroundReduxModule
+    ]
   });
 }());

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

@@ -1,12 +1,9 @@
 <label>
   <span class="name"></span>
   <span class="inline_help"></span>
-  <input
-    type="url"
-    required pattern="https://localfocus2.appspot.com/.*"
-    title="Only localfocus URLs are allowed"
-    placeholder="https://localfocus2.appspot.com/551a9626918b3"
-  />
 </label>
-<div class="validation"></div>
-<div class="status_container"></div>
+<input
+  type="url"
+  required pattern="https://localfocus2.appspot.com/.*"
+  placeholder="https://localfocus2.appspot.com/551a9626918b3"
+/>

data/app/assets/javascripts/pageflow/localfocus/editor/views/configuration_editor_view.js

@@ -1,18 +1,26 @@
 pageflow.localfocus.ConfigurationEditorView = pageflow.ConfigurationEditorView.extend({
   configure: function() {
     this.tab('general', function() {
-      this.group('general');
+      this.input('text', pageflow.TextAreaInputView);
+      this.input('text_position', pageflow.SelectInputView, {values: pageflow.Page.textPositions});
     });
 
-    this.tab('files', function() {
-      this.input('link', pageflow.localfocus.UrlInputView, {
-        required: true,
-        pattern: "https://localfocus2.appspot.com/.*", // I18n.t('pageflow.localfocus.placeholder', {locale: pageflow.entry.configuration.get('locale')})
-        title: "Only localfocus URLs are allowed",
-        placeholder: "https://localfocus2.appspot.com/551a9626918b3"
+    this.tab('widget', function() {
+      this.input('chart', pageflow.localfocus.UrlInputView, {
+        propertyName: 'localfocus_url'
       })
     });
 
+    this.tab('files', function() {
+      // Renders background type select box and file input views
+      this.group('background');
+
+      this.input('thumbnail_image_id', pageflow.FileInputView, {
+        collection: 'image_files',
+        positioning: false
+      });
+    });
+
     this.tab('options', function() {
       this.group('options');
     });

data/app/assets/javascripts/pageflow/localfocus/editor/views/inputs/url_input_view.js

@@ -1,53 +1,51 @@
 /**
- * Input view for an URL.
+ * Input view for a single line of text.
+ *
+ * @param {boolean} [options.required=false]
+ *   Display an error if the input is blank.
+ *
+ * @see
+ * {@link module:pageflow/ui.pageflow.inputWithPlaceholderText pageflow.inputWithPlaceholderText}
+ * for placeholder related further options
  *
  * @see {@link module:pageflow/ui.pageflow.inputView pageflow.inputView} for further options
  * @class
- * @memberof module:pageflow/localfocus
+ * @memberof module:pageflow/ui
  */
 pageflow.localfocus.UrlInputView = Backbone.Marionette.ItemView.extend({
-  mixins: [pageflow.inputView],
+  mixins: [pageflow.inputView, pageflow.inputWithPlaceholderText],
 
-  template: 'pageflow/chart/editor/templates/url_input',
+  template: 'pageflow/localfocus/editor/templates/url_input',
 
   ui: {
     input: 'input'
   },
 
+  events: {
+    'blur input': 'validate'
+  },
+
   onRender: function() {
-    load();
+    this.ui.input.attr('title', I18n.t('pageflow.ui.views.inputs.text_input_view.required_field'));
+    this.load();
   },
 
-  onChange: function() {
-    save();
-    validate();
+  save: function() {
+    this.model.set(this.options.propertyName, this.ui.input.val());
   },
 
   load: function() {
     this.ui.input.val(this.model.get(this.options.propertyName));
-    this.listenTo(this.ui.input, 'input', this.onChange);
-  },
-
-  save: function() {
-    this.model.set(this.options.propertyName, this.ui.input.val());
   },
 
   validate: function() {
-    if (this.ui.input.validity.valid) {
-      this.resetValidationError();
+    input = this.ui.input[0];
+    if (input.checkValidity()) {
+      this.$el.removeClass('invalid');
+      this.save();
     }
     else {
-      this.displayValidationError(I18n.t('pageflow.localfocus.views.inputs.text_input_view.required_field'));
+      this.$el.addClass('invalid');
     }
-  },
-
-  displayValidationError: function(message) {
-    this.$el.addClass('invalid');
-    this.ui.input.attr('title', message);
-  },
-
-  resetValidationError: function(message) {
-    this.$el.removeClass('invalid');
-    this.ui.input.attr('title', '');
   }
 });

data/app/assets/javascripts/pageflow/localfocus/widgets.js

@@ -0,0 +1,2 @@
+//= require_self
+//= require ./widgets/loading_spinner

data/app/assets/javascripts/pageflow/localfocus/widgets/loading_spinner.js

@@ -0,0 +1,27 @@
+// #example-spinner {
+//         width: 100%;
+//         height: 450px;
+//         position:absolute;
+//         background-image: url('spinner.svg');
+//         background-position: center center;
+//         background-repeat: no-repeat;
+//         background-size: 4em;
+//       }
+//
+//       #example {
+//         opacity:0;
+//         width:100%;
+//         height:450px;
+//         overflow:hidden;
+//       }
+
+
+LocalFocusAPI.selectAll('.localfocusvisual', function() {
+  this.on('loaded', function() {
+    console.log('loaded');
+  });
+
+  this.on('ready', function() {
+    console.log('ready');
+  });
+}

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

@@ -0,0 +1,7 @@
+@include pageflow-page-type(localfocus);
+
+.lf-iframe {
+  width: 100%;
+  height: 70vh;
+  overflow: hidden;
+}

data/bin/rails

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails gems
+# installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/pageflow/localfocus/engine', __FILE__)
+APP_PATH = File.expand_path('../../test/dummy/config/application', __FILE__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+
+require 'rails/all'
+require 'rails/engine/commands'

data/config/locales/en.yml

@@ -1,10 +1,45 @@
 en:
   pageflow:
     localfocus:
-      page_type_name: Localfocus
-      page_type_description: Embed a Localfocus chart
+      page_attributes:
+        localfocus_url:
+          label: Graph URL
+          inline_help: Paste the direct link to the graph here. In LocalFocus, see the “Create” tab, click _Widget_, then copy the _Direct Link_.
+      page_type_feature:
+        name: LocalFocus page type
+      page_type_name: LocalFocus
+      page_type_description: Embed a LocalFocus chart
       page_type_category_name: Data and Charts
       help_entries:
         page_type:
-          menu_item: Localfocus
-          text: Paste the localfocus URL in the field.
+          menu_item: LocalFocus
+          text: |-
+            Select this Page Type to embed a [LocalFocus](https://www.localfocus.nl/en/) graph.
+
+            LocalFocus lets you create and share animated illustrations for a
+            wide range of datasets. [Example](https://localfocus2.appspot.com/551a9626918b3)
+
+            ### In LocalFocus
+
+            To embed one in a story, first login to LocalFocus and find the
+            chart in question. Around half-way on the page you'll see two tabs.
+            One labelled _Explore_ and the other _Create_. Choose Create.
+
+            The sharing options are displayed as red buttons. Choose for
+            **Widget** here. Then copy the value of _Direct Link_. You don't
+            need to use the complete Embed code; we take care of that for you.
+
+            ### In Pageflow
+
+            Now onto your story and the Pageflow editor. Login to Pageflow and
+            add a new page. For Page Type, choose _LocalFocus_. Then click the
+            _Widget_ tab. Paste the _Direct Link_ into the box. The graph
+            should render in the preview pane on the right.
+    ui:
+      configuration_editor:
+        tabs:
+          widget: Widget
+      views:
+        inputs:
+          url_input_view:
+            title: Alleen URLs van LocalFocus worden ondersteund

data/lib/pageflow/localfocus.rb

@@ -3,7 +3,7 @@ require 'pageflow/localfocus/engine'
 module Pageflow
   module Localfocus
     def self.plugin
-      Plugin.new
+      Localfocus::Plugin.new
     end
 
     def self.page_type

data/lib/pageflow/localfocus/engine.rb

@@ -5,6 +5,10 @@ module Pageflow
 
       config.autoload_paths << File.join(config.root, 'lib')
 
+      config.generators do |g|
+        g.test_framework :rspec
+      end
+
       # This has been fixed in newer versions of react-rails.
       initializer "pageflow-localfocus.add_watchable_files", group: :all do |app|
         app.config.watchable_files.concat Dir["#{config.root}/app/assets/javascripts/**/*.jsx*"]

data/lib/pageflow/localfocus/plugin.rb

@@ -2,7 +2,9 @@ module Pageflow
   module Localfocus
     class Plugin < Pageflow::Plugin
       def configure(config)
-        config.page_types.register(Pageflow::Localfocus.page_type)
+        config.features.register(PageTypeFeature.new(Localfocus.page_type))
+
+        config.help_entries.register('pageflow.localfocus.help_entries.page_type', priority: 49)
       end
     end
   end

data/lib/pageflow/localfocus/version.rb

@@ -1,5 +1,5 @@
 module Pageflow
   module Localfocus
-    VERSION = "0.1.0"
+    VERSION = "1.0.0"
   end
 end

data/pageflow-localfocus.gemspec

@@ -12,6 +12,7 @@ Gem::Specification.new do |spec|
   spec.summary       = "Localfocus charts integration for Pageflow"
   spec.description   = "Localfocus charts integration for Pageflow"
   spec.homepage      = "https://github.com/scrollytelling/pageflow-localfocus"
+  spec.license       = "MIT"
 
   spec.files         = `git ls-files -z`.split("\x0").reject do |f|
     f.match(%r{^(test|spec|features)/})

data/vendor/assets/javascripts/localfocusapi.js

@@ -0,0 +1,220 @@
+/* LocalFocus API
+    Version: 1.1
+    Date: 09-01-2017
+    By Erik Willems (twitter: @ehwillems)
+*/
+
+var LocalFocusAPI = (function(){
+    var oldBrowser = ((!window.SVGAngle && !document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.1")) || !document.addEventListener || !document.querySelectorAll);
+
+    var allowedOrigins = [];
+
+    function widgetObject(e){
+        var element = e, onFunctions = {}, w = this, listener = null;
+
+        var listen = function(){
+            if(!listener){
+                listener = function(e) {
+                    // Check source
+                    if(e.source !== element.contentWindow){
+                        return;
+                    }
+                    // Check origin
+                    if(allowedOrigins.length && allowedOrigins.indexOf(e.origin) === -1){
+                        return;
+                    }
+                    
+                    var message;
+                    try {
+                        message = JSON.parse(e.data);
+                    } catch (e) {
+                        return;
+                    }
+
+                    if(typeof message !== 'object' || message.type !== 'LocalFocusAPI'){
+                        return;
+                    }
+                    var request = message.request;
+                    
+                    // Listen to loaded and ready events
+                    if((request.action === 'loaded' || request.action === 'ready') && typeof onFunctions[request.action] === 'function'){
+                        onFunctions[request.action].call(w);
+                        //delete onFunctions[request.action];
+                    }
+
+                    // Listen to click events
+                    if(request.action === 'click' && typeof onFunctions[request.action] === 'function'){
+                        onFunctions[request.action].call(w, request.item);
+                    }
+
+                    // Listen to interact events
+                    if(request.action === 'interact' && typeof onFunctions[request.action] === 'function'){
+                        onFunctions[request.action].call(w, request.type, request.subType);
+                    }
+
+                    if(request.action === 'setDataStore' && typeof onFunctions.special === 'function'){
+                        var d = request.dataStore;
+                        var respond = {
+                            'groups':d.groups,
+                            'items':d.items,
+                            'styling':d.styling,
+                            'settings':d.settings
+                        }
+                        if(d.records){
+                            respond.records = d.records;
+                        }
+                        onFunctions.special.call(w, respond);
+                        delete onFunctions.special;
+                    }
+
+                    if(request.action === 'getDownload' && typeof onFunctions['getDownload'] === 'function'){
+                        var url = (request.id)? e.origin + '/download/get/' + request.id: null;
+                        onFunctions['getDownload'].call(w, {'url': url});
+                        delete onFunctions['getDownload'];
+                    }
+                };
+                window.addEventListener("message",listener,false);
+            }
+        }
+
+        var send = function(request){
+            var message = {
+                type: 'LocalFocusAPI',
+                request: request
+            };
+            element.contentWindow.postMessage(JSON.stringify(message),"*");
+        }
+
+        var noop = function(){
+            return this;
+        }
+
+        if(element){
+            this.on = function(action, func){
+                try {
+                    // .on() supports the following actions: loaded, ready or click, interact
+                    var validActions = ['loaded', 'ready', 'click', 'interact'];
+                    if(validActions.indexOf(action) === -1){
+                        throw('Not a valid action:', action);
+                    }
+                    if(typeof func !== 'function'){
+                        throw('Not a valid function:', func);
+                    }
+                    onFunctions[action] = func;
+                    listen();
+                } catch(e){
+                    window.console && window.console.error(e);
+                }
+                return this;
+            };
+            this.activate = function(target){
+                send({action:'activate', target:target});
+                return this;
+            };
+            this.wait = function(){
+                send({action:'wait'});
+                return this;
+            };
+            this.resume = function(){
+                send({action:'resume'});
+                return this;
+            };
+            this.element = function(){
+                return element;
+            };
+            this.getDataStore = function(){
+                var callback, settings;
+                if(arguments.length === 2){
+                    callback = arguments[1];
+                    settings = arguments[0];
+                } else {
+                    callback = arguments[0];
+                    settings = {'records': false};
+                }
+                onFunctions['special'] = callback;
+                send({action:'getDataStore', settings: settings});
+                listen();
+                return this;
+            };
+            this.setDataStore = function(dataStore){
+                send({action:'setDataStore',dataStore: dataStore});
+                return this;
+            };
+            this.getDownload = function(format, callback){
+                onFunctions['getDownload'] = callback;
+                send({action:'getDownload', format: format});
+                listen();
+                return this;
+            };
+        } else {
+            this.on = noop;
+            this.activate = noop;
+            this.resume = noop;
+            this.element = noop;
+            this.getDataStore = noop;
+            this.getDownload = noop;
+            this.setDataStore = noop;
+        }        
+    };
+
+    var forEach = function(items, callback){
+        if(!items || !callback){
+            return;
+        }
+        for (var i = 0; i < items.length; i++) {
+            var item = items[i];
+            callback.call(item, item, i);
+        };
+    };
+
+    var checkOrigin = function(elem){
+        var allow = false;
+        if(allowedOrigins.length){
+            // Allowed origin is set
+            forEach(allowedOrigins, function(origin){
+                if(elem && typeof elem.src === 'string' && elem.src.indexOf(origin) === 0){
+                    // Allow
+                    allow = true;
+                }
+            });
+        } else {
+            // Allowed origin is not set
+            allow = true;
+        }
+        return allow;
+    };
+
+    return {
+        oldBrowser: function(){
+            return oldBrowser;
+        },
+        select: function(d){
+            if(oldBrowser){
+                var elem = null;
+            } else {
+                var elem = (typeof d === 'string')?document.querySelector(d):d;
+            }
+            // Check origin
+            if(elem && checkOrigin(elem)){
+                return new widgetObject(elem);
+            } else {
+                return new widgetObject(null);
+            }
+        },
+        selectAll: function(d, loop){
+            if(!oldBrowser){
+                var elems = document.querySelectorAll(d);
+                forEach(elems, function(elem){
+                    loop.call(new widgetObject(elem));
+                });
+            }
+            return null;
+        },
+        allowOrigin: function(origin){
+            if(typeof origin === 'string'){
+                allowedOrigins.push(origin);
+            }
+            return this;
+        }
+    }
+})();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pageflow-localfocus
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Joost Baaij
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-12-11 00:00:00.000000000 Z
+date: 2017-12-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pageflow
@@ -104,19 +104,29 @@ files:
 - ".gitignore"
 - ".rspec"
 - ".travis.yml"
+- CHANGELOG.md
+- CODE_OF_CONDUCT.md
 - Gemfile
 - Gemfile.lock
+- LICENSE
 - README.md
 - Rakefile
+- app/assets/images/pageflow/localfocus/themes/default/page_type_pictograms/background_image/sprite.png
+- app/assets/images/pageflow/localfocus/themes/default/page_type_pictograms/background_image/wide.png
+- app/assets/images/pageflow/localfocus_pictogram_small.png
 - app/assets/javascripts/pageflow/localfocus.js
 - app/assets/javascripts/pageflow/localfocus/components.js
-- app/assets/javascripts/pageflow/localfocus/components/localfocus_iframe.jsx
+- app/assets/javascripts/pageflow/localfocus/components/frame.jsx
 - app/assets/javascripts/pageflow/localfocus/components/page.jsx
 - app/assets/javascripts/pageflow/localfocus/editor.js
 - app/assets/javascripts/pageflow/localfocus/editor/templates/url_input.jst.ejs
 - app/assets/javascripts/pageflow/localfocus/editor/views/configuration_editor_view.js
 - app/assets/javascripts/pageflow/localfocus/editor/views/inputs/url_input_view.js
+- app/assets/javascripts/pageflow/localfocus/widgets.js
+- app/assets/javascripts/pageflow/localfocus/widgets/loading_spinner.js
+- app/assets/stylesheets/pageflow/localfocus.scss
 - bin/console
+- bin/rails
 - bin/setup
 - config/locales/en.yml
 - lib/pageflow/localfocus.rb
@@ -124,8 +134,10 @@ files:
 - lib/pageflow/localfocus/plugin.rb
 - lib/pageflow/localfocus/version.rb
 - pageflow-localfocus.gemspec
+- vendor/assets/javascripts/localfocusapi.js
 homepage: https://github.com/scrollytelling/pageflow-localfocus
-licenses: []
+licenses:
+- MIT
 metadata: {}
 post_install_message: 
 rdoc_options: []

data/app/assets/javascripts/pageflow/localfocus/components/localfocus_iframe.jsx

@@ -1,22 +0,0 @@
-(function() {
-  class LocalfocusIframe extends React.Component {
-    render() {
-      return (
-        <iframe
-          className="localfocusvisual"
-          scrolling="no"
-          frameborder="0"
-          style="width:100%;height:550px;overflow:hidden"
-          ref={iframe => this.iframe = iframe}
-          src="https://localfocus2.appspot.com/551a9626918b3?api=1">
-        </iframe>
-      )
-    }
-  }
-
-  const {connectInPage, combine} = pageflow.react;
-
-  pageflow.localfocus.LocalfocusIframe = connectInPage(combine({
-
-  }))(LocalfocusIframe);
-}());