JS Widgets

Dusty Candland | Thu Dec 13 2018 | javascript, webpack4

Basic Webpack setup for creating a JS widget w/ a loading script.

Package.json

Include Webpack & Webpack CLI

{
  "name": "widget",
  "version": "1.0.0",
  "description": "Widget widget",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack && cp dist/*.js ../public/js/",
    "watch": "webpack --watch"
  },
  "author": "",
  "license": "None",
  "devDependencies": {
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  }
}

Webpack

Basic config for Webpack 4. We need to output two files, one for the loader, which shouldn't change much and one for the actual widget.

const debug = process.env.NODE_ENV !== 'production';
const Webpack = require('webpack');
const path = require('path');

const commonPlugins = [
  new Webpack.DefinePlugin({
    WIDGET_HOST: debug ?
      JSON.stringify("http://widget.test") :
      JSON.stringify("https:/widget.io")
  })
];

module.exports = {
  entry: {
    widget: './src/widget.js',
    viewer: './src/viewer.js',
  },
  devtool: debug ? 'inline-sourcemap' : false,
  mode: process.env.NODE_ENV || 'development',
  plugins: debug ? commonPlugins : [
    ...commonPlugins,
    // Add production plugins here!
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }
};

Loader

The loaders main job is to load the actual widget script. It's other job is to pass config info to the widget. This can be done with data-X attributes or a JS object.

'use strict';

(function() {
  function load_widget(script) {
    if (!script.attributes["data-id"]) {
      console && console.log("Please put a data-id");
      return;
    }
    const id = script.attributes["data-id"].value;
    const pid = script.attributes["data-pid"].value;

    const js = document.createElement('script');
    js.src = WIDGET_HOST + '/js/viewer.js';
    js.onload = function() {
      widget.inject(id, pid);
    };
    script.parentNode.insertBefore(js, script);
  }

  if (document.currentScript) {
    var script = document.currentScript;
  } else {
    const scripts = document.getElementsByTagName('script');
    const index = scripts.length - 1;
    var script = scripts[index];
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", () => { load_widget(script); });
  } else {
    load_widget(script);
  }
})()

Widget

This is the functional part of the widget. This one loads an iframe, but it could manipulate the DOM directly.

'use strict';

window.widget = (function() {

  let rmr = {
    init: function(id, pid) {
      this.id = id;
      this.pid = pid;
      this.widget = document.getElementById('widget');
      if ( !this.widget) {
        console && console.log("widget div not found.");
        return false;
      }
      return true;
    },

    createButton: function() {
      var button = document.createElement('button');
      button.setAttribute('id', 'btn-widget');
      button.innerHTML = "Widget Has It";
      button.addEventListener('click', (e) => {
        e.preventDefault();
        this.createFrame();
      });
      this.widget.appendChild(button);
    },

    createFrame: function() {
      if ( document.getElementById("widget-view") ) {
        return false;
      }

      var iframe = document.createElement('iframe');
      iframe.setAttribute('src', WIDGET_HOST + '/sch/' + this.pid + '/locate');
      iframe.setAttribute('class', 'widget-iframe');
      iframe.setAttribute('data-id', this.id);
      iframe.setAttribute('data-pid', this.pid);
      iframe.setAttribute('width', '100%');
      iframe.setAttribute('frameborder', '0');
      iframe.setAttribute('scrolling', 'auto');
      iframe.style.border = 'none';
      iframe.style.width = '100%';
      iframe.style.height = '375px';
      iframe.style.position = 'relative';
      iframe.style.overflow = 'scroll';

      let view = document.createElement("div");
      view.setAttribute("id", "widget-view");

      let header = document.createElement("div");
      header.setAttribute("id", "widget-header");
      header.innerHTML = "Widget";

      let close = document.createElement("span");
      close.setAttribute("id", "widget-close");

      let closeA = document.createElement("a");
      closeA.setAttribute("href", "#");
      closeA.innerHTML = "CLOSE";
      closeA.addEventListener('click', (e) => {
        e.preventDefault();
        let view = document.getElementById("widget-view");
        document.getElementsByTagName("body")[0].removeChild(view);
        return false;
      });

      close.appendChild(closeA);
      header.appendChild(close);
      view.appendChild(header);
      view.appendChild(iframe);

      document.getElementsByTagName("body")[0].appendChild(view);
    },

    injectStyles: function() {
      let styles = `
        #widget-view {
          font-family: sans-serif;
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 640px;
          height: 400px;
          border: solid 5px black;
          z-index: 5000;
        }
        #widget-close a {
          color: white;
          text-decoration: none;
          font-size: 12px;
        }
        #widget-header {
          font-size: 18px;
          line-height: 22px;
          color: white;
          border-bottom: solid 5px black;
          height: 20px;
          padding: 0 10px;
          background-color: #353535;
        }
        #btn-widget {
          border: solid 2px #353535;
          background: #ddd;
          color: #353535;
          font-weight: bold;
          font-size: 14px;
          border-radius: 4px;
          padding: 2px 10px;
          cursor: pointer;
        }
        #widget-close {
          float: right;
          border-left: solid 5px black;
          height: 20px;
          padding: 0 10px;
        }`;
      let style = document.createElement("style");
      style.innerHTML = styles;
      document.getElementsByTagName("body")[0].appendChild(style);
    }
  };

  return {
    inject: function(id, pid) {
      if (rmr.init(id, pid)) {
        rmr.injectStyles();
        rmr.createButton();
      }
    }
  };

})();

References

Webmentions

These are webmentions via the IndieWeb and webmention.io. Mention this post from your site: