Merge aa0ccd8 into 6725e01

buildout.cfg

@@ -16,6 +16,7 @@ parts +=
     node
     rebuild_i18n-sh
     rebuild_npm
+    npm_dev
     npm_build
     npm_watch
     run_rebuild_npm
@@ -72,6 +73,16 @@ input = inline:
 output = ${buildout:bin-directory}/rebuild_npm
 mode = 755
 
+[npm_dev]
+recipe = collective.recipe.template
+input = inline:
+    #!/bin/sh
+    PATH=${buildout:bin-directory}:$PATH
+    cd webpack
+    npm run dev
+output = ${buildout:bin-directory}/npm_dev
+mode = 755
+
 [npm_build]
 recipe = collective.recipe.template
 input = inline:

webpack/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["es2015"]
+}

webpack/.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 yarn.lock
+npm-debug.log

webpack/app/main.js

@@ -1,2 +1,10 @@
 import './main.css';
 import './images/featuredimage-icon.png';
+
+import AppView from './scripts/behaviorform.js';
+
+$(() => {
+  if ($('#fieldset-featured-image').length > 0) {
+    new AppView();
+  }
+});

webpack/app/scripts/behaviorform.js

@@ -0,0 +1,54 @@
+class BehaviorformView {
+  constructor() {
+    this.render();
+    this.$el = $('#featuredimage-preview');
+    this.$iframe = $('iframe');
+    this.$quote = $('#form-widgets-IFeaturedImage-featuredimage_quote');
+    this.$author = $('#form-widgets-IFeaturedImage-featuredimage_author');
+    this.$iframe.on('load', $.proxy(this.iframeready, this));
+    this.$quote.on('input', $.proxy(this.updateFeaturedImage, this));
+    this.$author.on('input', $.proxy(this.updateFeaturedImage, this));
+  }
+
+  render() {
+    var template = `
+      <div id="featuredimage-preview">
+        <iframe src="${portal_url}/@@featuredimage"
+                        frameborder="0"
+                        scrolling="no"></iframe>
+      </div>
+    `
+    $('#fieldset-featured-image').append(template);
+  }
+
+  iframeready(e) {
+    e.preventDefault();
+    let screenImage, theImage;
+    this.$featuredimage = $('#featuredimage', this.$iframe[0].contentWindow.document.body);
+    screenImage = $('img', this.$featuredimage);
+    theImage = new Image();
+    theImage.src = screenImage.attr('src');
+    theImage.onload = function(that) {
+      return function() {
+        that.$el.width(this.width / 2 + 10);
+        that.$el.height(this.height / 2 + 10);
+        that.$iframe.width(this.width + 10);
+        that.$iframe.height(this.height + 10);
+        that.updateFeaturedImage();
+      }
+    }(this)
+  }
+
+  updateFeaturedImage(e) {
+    if (e !== undefined) {
+      e.preventDefault();
+    }
+    let $iframeAuthor, $iframeQuote;
+    $iframeQuote = $('.quote .text', this.$featuredimage);
+    $iframeAuthor = $('.quote .author', this.$featuredimage);
+    $iframeQuote.html(this.$quote.val());
+    $iframeAuthor.html(this.$author.val());
+  }
+}
+
+module.exports = BehaviorformView;

webpack/package.json

@@ -3,12 +3,16 @@
   "version": "0.0.1",
   "main": "app/main.js",
   "scripts": {
+    "dev": "./node_modules/.bin/webpack",
     "build": "./node_modules/.bin/webpack -p",
     "watch": "./node_modules/.bin/webpack --watch"
   },
   "repository": {},
   "license": "GPLv2",
   "devDependencies": {
+    "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.22.0",
     "css-loader": "^0.26.1",
     "extract-text-webpack-plugin": "^2.0.0-beta",
     "file-loader": "^0.9.0",

webpack/webpack.config.js

@@ -7,6 +7,9 @@ module.exports = {
   },
   module: {
     rules: [{
+      test: /\.js$/,
+      loader: 'babel-loader',
+    }, {
       test: /\.css$/,
       exclude: /node_modules/,
       loader: ExtractTextPlugin.extract({