Baseline to plugin

src/dev.js

@@ -0,0 +1,10 @@
+import WebSlides from './modules/webslides';
+import Scroll from './plugins/scroll';
+import Touch from './plugins/touch';
+import Grid from './plugins/grid';
+
+WebSlides.registerPlugin('Scroll', Scroll);
+WebSlides.registerPlugin('Touch', Touch);
+WebSlides.registerPlugin('Grid', Grid);
+
+window.WebSlides = WebSlides;

src/plugins/grid.js

@@ -0,0 +1,44 @@
+import Keys from '../utils/keys';
+
+export default class Keyboard {
+  /**
+   * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
+   * @param {WebSlides} wsInstance The WebSlides instance
+   */
+  constructor(wsInstance) {
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
+
+    const CSS = `body.baseline {
+                  background: url(../images/baseline.png) left top .8rem/.8rem;
+                }`;
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+
+    style.type = 'text/css';
+
+    if (style.styleSheet){
+      style.styleSheet.cssText = CSS;
+    } else {
+      style.appendChild(document.createTextNode(CSS));
+    }
+
+    head.appendChild(style);
+
+    document.addEventListener('keydown', this.onKeyPress_.bind(this), false);
+  }
+
+  /**
+   * Reacts to the keydown event. It reacts to ENTER key to toggle the class.
+   * @param {KeyboardEvent} event The key event.
+   * @private
+   */
+  onKeyPress_(event) {
+    if (event.which === Keys.ENTER) {
+      document.body.toggleClass('baseline');
+    }
+  }
+}

static/css/base.css

@@ -303,12 +303,6 @@ body {
   overflow-x: hidden;
 }
 
-/* == Prototype faster - Vertical rhythm 
-To show the grid/baseline.png, press ENTER key on keyboard == */ 
-
-body.baseline {
-  background: url(../images/baseline.png) left top .8rem/.8rem;
-}
 /*
 #webslides.vertical {cursor: s-resize; }
 */

webpack.config.babel.js

@@ -6,7 +6,8 @@ module.exports = {
   context: src,
   entry: {
     webslides: './full.js',
-    "webslides-lite": './lite.js'
+    "webslides-lite": './lite.js',
+    "webslides-dev": './dev.js',
   },
   output: {
     filename: '[name].js',