From 70bde2f4aedd01466b98e40c9301dfef4f512879 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Wed, 25 Jan 2017 22:48:35 +0100 Subject: [PATCH] Entry point --- .editorconfig | 20 ++++++++++++++++ package.json | 29 ++++++++++++++++++++++- src/full.js | 3 +++ src/lite.js | 3 +++ src/modules/navigation.js | 48 +++++++++++++++++++++++++++++++++++++++ src/modules/webslides.js | 33 +++++++++++++++++++++++++++ src/utils/dom.js | 12 ++++++++++ webpack.config.babel.js | 27 ++++++++++++++++++++++ 8 files changed, 174 insertions(+), 1 deletion(-) create mode 100644 .editorconfig create mode 100644 src/full.js create mode 100644 src/lite.js create mode 100644 src/modules/navigation.js create mode 100644 src/modules/webslides.js create mode 100644 src/utils/dom.js create mode 100644 webpack.config.babel.js diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..7e6c763 --- /dev/null +++ b/.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 diff --git a/package.json b/package.json index fdbc19b..81d7443 100644 --- a/package.json +++ b/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 + } + ] + ] + } } diff --git a/src/full.js b/src/full.js new file mode 100644 index 0000000..ad71d64 --- /dev/null +++ b/src/full.js @@ -0,0 +1,3 @@ +import WebSlides from './modules/webslides'; + +window.WebSlides = WebSlides; diff --git a/src/lite.js b/src/lite.js new file mode 100644 index 0000000..ad71d64 --- /dev/null +++ b/src/lite.js @@ -0,0 +1,3 @@ +import WebSlides from './modules/webslides'; + +window.WebSlides = WebSlides; diff --git a/src/modules/navigation.js b/src/modules/navigation.js new file mode 100644 index 0000000..79e3501 --- /dev/null +++ b/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; + } +} diff --git a/src/modules/webslides.js b/src/modules/webslides.js new file mode 100644 index 0000000..33125d2 --- /dev/null +++ b/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'); + } + } +} diff --git a/src/utils/dom.js b/src/utils/dom.js new file mode 100644 index 0000000..11cd14e --- /dev/null +++ b/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; + } +} diff --git a/webpack.config.babel.js b/webpack.config.babel.js new file mode 100644 index 0000000..922ad66 --- /dev/null +++ b/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 + } + ] + } +};