mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-19 11:21:20 +02:00
Entry point
This commit is contained in:
20
.editorconfig
Normal file
20
.editorconfig
Normal file
@@ -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
|
29
package.json
29
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
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
3
src/full.js
Normal file
3
src/full.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import WebSlides from './modules/webslides';
|
||||
|
||||
window.WebSlides = WebSlides;
|
3
src/lite.js
Normal file
3
src/lite.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import WebSlides from './modules/webslides';
|
||||
|
||||
window.WebSlides = WebSlides;
|
48
src/modules/navigation.js
Normal file
48
src/modules/navigation.js
Normal file
@@ -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;
|
||||
}
|
||||
}
|
33
src/modules/webslides.js
Normal file
33
src/modules/webslides.js
Normal file
@@ -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');
|
||||
}
|
||||
}
|
||||
}
|
12
src/utils/dom.js
Normal file
12
src/utils/dom.js
Normal file
@@ -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;
|
||||
}
|
||||
}
|
27
webpack.config.babel.js
Normal file
27
webpack.config.babel.js
Normal file
@@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
Reference in New Issue
Block a user