Entry point

.editorconfig

@@ -0,0 +1,20 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 233
+
+[*.json]
+indent_style = space
+indent_size = 2
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

package.json

@@ -17,5 +17,32 @@
   "bugs": {
     "url": "https://github.com/jlantunez/webslides/issues"
   },
-  "homepage": "https://github.com/jlantunez/webslides#readme"
+  "homepage": "https://github.com/jlantunez/webslides#readme",
+  "devDependencies": {
+    "babel-cli": "^6.22.2",
+    "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.22.0",
+    "npm-run-all": "^4.0.1",
+    "rimraf": "^2.5.4",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
+  },
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build:": "npm-run-all --parallel build:*",
+    "build:main": "webpack",
+    "build:main.min": "webpack --output-filename [name].min.js -p",
+    "dev": "webpack-dev-server"
+  },
+  "babel": {
+    "presets": [
+      [
+        "es2015",
+        {
+          "modules": false
+        }
+      ]
+    ]
+  }
 }

src/full.js

@@ -0,0 +1,3 @@
+import WebSlides from './modules/webslides';
+
+window.WebSlides = WebSlides;

src/lite.js

@@ -0,0 +1,3 @@
+import WebSlides from './modules/webslides';
+
+window.WebSlides = WebSlides;

src/modules/navigation.js

@@ -0,0 +1,48 @@
+import DOM from '../utils/dom';
+
+const ELEMENT_ID = {
+  NAV: 'navigation',
+  NEXT: 'next',
+  PREV: 'previous',
+  COUNTER: 'counter'
+};
+
+const LABELS = {
+  VERTICAL: {
+    NEXT: '↓',
+    PREV: '→'
+  },
+  HORIZONTAL: {
+    NEXT: '↑',
+    PREV: '←'
+  }
+};
+
+
+export default class Navigation {
+  constructor({ isVertical }) {
+    const arrowLabels = isVertical ? LABELS.VERTICAL : LABELS.HORIZONTAL;
+
+    this.el = DOM.createNode('div', 'navigation');
+    this.next = Navigation.createArrow(ELEMENT_ID.NEXT, arrowLabels.NEXT);
+    this.prev = Navigation.createArrow(ELEMENT_ID.PREV, arrowLabels.PREV);
+    this.counter = DOM.createNode('span', ELEMENT_ID.COUNTER);
+
+    this.el.appendChild(this.next);
+    this.el.appendChild(this.prev);
+    this.el.appendChild(this.counter);
+    console.log(this);
+  }
+
+  updateCounter(current, max) {
+    this.counter.textContent = `${current} / ${max}`;
+  }
+
+  static createArrow(id, text) {
+    const arrow = DOM.createNode('a', id, text);
+    arrow.href = '#';
+    arrow.title = 'Arrow Keys';
+
+    return arrow;
+  }
+}

src/modules/webslides.js

@@ -0,0 +1,33 @@
+import Navigation from './navigation';
+
+export default class WebSlides {
+  constructor() {
+    this.el = document.getElementById('webslides');
+    this.moving = false;
+    this.currentSlide = 0;
+
+    if (!this.el) {
+      throw new Error('Couldn\'t find the webslides container!');
+    }
+
+    this.createNav_();
+    this.navigation.updateCounter(this.currentSlide + 1, this.slides.length);
+  }
+
+  createNav_() {
+    this.navigation = new Navigation({
+      isVertical: true
+    });
+    this.el.appendChild(this.navigation.el);
+  }
+
+  grabSlides_() {
+    this.slides = Array.from(this.el.getElementsByClassName('slide'));
+  }
+
+  goToSlide(slide) {
+    if (slide >= 0 && slide < this.slides.length) {
+      console.log('Foo');
+    }
+  }
+}

src/utils/dom.js

@@ -0,0 +1,12 @@
+export default class DOM {
+  static createNode(tag, id = '', text = null) {
+    const node = document.createElement(tag);
+    node.id = id;
+
+    if (text) {
+      node.textContent = text;
+    }
+
+    return node;
+  }
+}

webpack.config.babel.js

@@ -0,0 +1,27 @@
+const path = require('path');
+
+const src = path.join(__dirname, 'src');
+
+module.exports = {
+  context: src,
+  entry: {
+    webslides: './full.js',
+    "webslides-lite": './lite.js'
+  },
+  output: {
+    filename: '[name].js',
+    path: path.join(__dirname, 'dist')
+  },
+  devServer: {
+    contentBase: __dirname,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: src
+      }
+    ]
+  }
+};