mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-23 21:33:09 +02:00
Code Issues Releases Wiki Activity

Merge branch 'master' into dev

Browse Source
This commit is contained in:
Antonio Laguna
2017-03-11 22:27:15 +01:00
parent 886b01de7b 85db8868a1
commit 46a7ef4f80
15 changed files with 168 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
CHANGELOG.md
View File

@@ -1,3 +1,18 @@
# 1.2.1 (2017-03-02)
## Bugfixes
- Scrollbar showing in Firefox
# 1.2.0 (2017-03-02)
## New Features
- [[#48](https://github.com/jlantunez/webslides/issues/48)] Allows to navigate with AvPag & RePag to allow presentation devices to work.
- [[#49](https://github.com/jlantunez/webslides/issues/49)] Allowing to go to first and last slides by using home and end keys respectively.
- [[#50](https://github.com/jlantunez/webslides/issues/50)] Using the keyboard on inputs and editable content won't trigger any events that might cause navigation.
- [[#47](https://github.com/jlantunez/webslides/issues/47)] Allowing options to be configured. [Read More](/docs/technical.md#options).
# 1.1.0 (2017-02-28)
## Bugfixes

18
README.md
View File

@@ -14,9 +14,9 @@ Simply choose a demo and customize it in minutes. Latest version: [webslides.tv/
### Why WebSlides?
Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content.
### Features
## Features
- Navigation (horizontal and vertical sliding): touchpad, keyboard shortcuts, and swipe.
- Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
- Slide counter.
- Permalinks: go to a specific slide.
- Autoslide.
@@ -27,6 +27,20 @@ Good karma and productivity. Just a basic knowledge of HTML and CSS is required.
- Fonts: Roboto, Maitree (Serif), and San Francisco.
- Vertical rhythm (use multiples of 8).
### Key Navigation
There's a handful of keys that can be used to achieve navigation within WebSlides. Here's the list:
* `←`: If WebSlides is not vertical, it will go to the previous slide.
* `→`: If WebSlides is not vertical, it will go to the next slide.
* `↑`: If WebSlides is vertical, it will go to the previous slide.
* `↓`: If WebSlides is vertical, it will go to the next slide.
* `Page Up`: Go to the previous slide.
* `Page Down`: Go to the next slide.
* `Space`: Go to the next slide.
* `Home`: Go to the first slide.
* `End`: Go to the last slide.
## Markup
- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.

2
demos/classes.html
View File

@@ -1910,7 +1910,7 @@
<h2><strong>Start in seconds</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
<p>
<a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
<a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>

4
demos/components.html
View File

@@ -1733,7 +1733,7 @@
<div class="cta-cover">
<h1><strong>HTML Presentations</strong> Made Easy</h1>
<p class="alignright">
<a class="button" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides">
<a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>
@@ -3103,7 +3103,7 @@
<h2><strong>Start in Seconds</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
<p>
<a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
<a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>

2
demos/index.html
View File

@@ -199,7 +199,7 @@
<h2><strong>Start in seconds</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
<p>
<a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
<a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>

2
demos/keynote.html
View File

@@ -815,7 +815,7 @@
<h2><strong>Start in seconds</strong></h2>
<p class="text-intro">120+ prebuilt slides ready to use.</p>
<p>
<a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
<a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>

2
demos/landings.html
View File

@@ -236,7 +236,7 @@
<div class="cta-cover">
<h1><strong>HTML Presentations</strong> Made Easy</h1>
<p class="alignright">
<a class="button" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides">
<a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>

4
demos/portfolios.html
View File

@@ -105,7 +105,7 @@
<div class="wrap aligncenter">
<h1 class="text-landing">Portfolios</h1>
<p class="text-symbols">* * * </p>
<p><a class="button ghost" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides for free"><svg class="fa-cloud-download">
<p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free"><svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg> WebSlides</a>
</p>
@@ -333,7 +333,7 @@
</div>
</section>
<section class="bg-black-blue">
<span class="background dark" style="background-image:url('https://source.unsplash.com/nw6xREmkXkg/')"></span>
<span class="background dark" style="background-image:url('https://source.unsplash.com/LW3FskrgQ9M/')"></span>
<div class="wrap size-50">
<p class="text-subtitle">Mercedes-Benz</p>
<h2>Defining a new platform for the connected car</h2>

19
docs/technical.md
View File

@@ -25,11 +25,18 @@ WebSlides constructor accepts an object with options.
|-----------|----------------|-----------|-------------------------------------------------------------------------------|
| `autoslide` | `number` or `boolean` | `false` | Amount of milliseconds to wait to go to next slide automatically. |
| `changeOnClick` | `boolean` | `false` | If true, clicking on the page will go to the next slide unless it's a clickable element. See [ClickToNav docs](./click-to-nav.md) for more info. |
| `minWheelDelta` | `number` | `40` | Controls the amount of scroll needed to trigger a navigation. Lower this number to decrease the scroll resistance. |
| `scrollWait` | `number` | `450` | Controls the amount of time needed to wait for a scroll transition to happen again. |
| `slideOffset` | `number` | `50` | Amount of sliding needed to trigger a new navigation. |
```javascript
const ws = new WebSlides({
autoslide: false
autoslide = false,
changeOnClick = false,
minWheelDelta = 40,
scrollWait = 450,
slideOffset = 50
});
```
@@ -103,9 +110,13 @@ Registers a plugin to be loaded when the instance is created. It allows
Those being:
- Navigation
- Hash
- Keyboard
- ClickNav
- Grid
- Hash
- Keyboard
- Navigation
- Scroll
- Touch
| Param | Type | Description |
| --- | --- | --- |

4
index.html
View File

@@ -109,7 +109,7 @@
Just the essentials and using lovely CSS.
</p>
<p>
<a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button zoomIn" title="Download WebSlides for free">
<a href="https://webslides.tv/webslides-latest.zip" class="button zoomIn" title="Download WebSlides for free">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>
@@ -329,7 +329,7 @@
<h2><strong>Ready to Start?</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
<p>
<a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
<a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>

4
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "webslides",
"version": "1.1.0",
"version": "1.2.1",
"description": "Making HTML presentations easy",
"main": "index.js",
"repository": {
@@ -31,9 +31,11 @@
"babel-cli": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-env": "^1.1.11",
"babel-preset-es2015": "^6.22.0",
"npm-run-all": "^4.0.2",
"rimraf": "^2.6.0",
"smart-banner-webpack-plugin": "^3.0.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},

2
src/js/modules/webslides.js
View File

@@ -208,7 +208,7 @@ export default class WebSlides {
* @see scrollTo
*/
scrollTransitionToSlide_(isMovingForward, nextSlide, callback) {
this.el.style.overflow = 'none';
this.el.style.overflow = 'hidden';
if (!isMovingForward) {
nextSlide.moveBeforeFirst();

124
static/js/webslides.js
View File

@@ -1,3 +1,11 @@
/*!
* Name: WebSlides
* Version: 1.2.1
* Date: 2017-03-02
* Description: Making HTML presentations easy
* URL: https://github.com/jlantunez/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros
*/
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@@ -182,6 +190,10 @@ var DOM = function () {
var Keys = {
ENTER: 13,
SPACE: 32,
RE_PAGE: 33,
AV_PAGE: 34,
END: 35,
HOME: 36,
LEFT: 37,
UP: 38,
RIGHT: 39,
@@ -325,16 +337,29 @@ var PLUGINS = {
var WebSlides = function () {
/**
* Options for WebSlides
* @param {number|boolean} autoslide Is false by default. If a number is
* @param {boolean} changeOnClick Is false by default. If true, it will allow
* @param {number|boolean} autoslide If a number is provided, it will allow
* autosliding by said amount of miliseconds.
* @param {boolean} changeOnClick If true, it will allow
* clicking on any place to change the slide.
* @param {number} minWheelDelta Controls the amount of needed scroll to
* trigger navigation.
* @param {number} scrollWait Controls the amount of time to wait till
* navigation can occur again with scroll.
* @param {number} slideOffset Controls the amount of needed touch delta to
* trigger navigation.
*/
function WebSlides() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$autoslide = _ref.autoslide,
autoslide = _ref$autoslide === undefined ? false : _ref$autoslide,
_ref$changeOnClick = _ref.changeOnClick,
changeOnClick = _ref$changeOnClick === undefined ? false : _ref$changeOnClick;
changeOnClick = _ref$changeOnClick === undefined ? false : _ref$changeOnClick,
_ref$minWheelDelta = _ref.minWheelDelta,
minWheelDelta = _ref$minWheelDelta === undefined ? 40 : _ref$minWheelDelta,
_ref$scrollWait = _ref.scrollWait,
scrollWait = _ref$scrollWait === undefined ? 450 : _ref$scrollWait,
_ref$slideOffset = _ref.slideOffset,
slideOffset = _ref$slideOffset === undefined ? 50 : _ref$slideOffset;
_classCallCheck(this, WebSlides);
@@ -388,18 +413,16 @@ var WebSlides = function () {
*/
this.interval_ = null;
/**
* Amount of time to wait to go to next slide automatically or false to
* disable the feature.
* @type {boolean|number}
* @private
* Options dictionary.
* @type {Object}
*/
this.autoslide_ = autoslide;
/**
* Whether navigation should initiate on click or not.
* @type {boolean}
* @private
*/
this.changeOnClick_ = changeOnClick;
this.options = {
autoslide: autoslide,
changeOnClick: changeOnClick,
minWheelDelta: minWheelDelta,
scrollWait: scrollWait,
slideOffset: slideOffset
};
if (!this.el) {
throw new Error('Couldn\'t find the webslides container!');
@@ -494,7 +517,7 @@ var WebSlides = function () {
value: function goToSlide(slideI) {
var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
if (this.isValidIndexSlide_(slideI) && !this.isMoving) {
if (this.isValidIndexSlide_(slideI) && !this.isMoving && this.currentSlideI_ !== slideI) {
this.isMoving = true;
var isMovingForward = false;
@@ -530,7 +553,7 @@ var WebSlides = function () {
value: function scrollTransitionToSlide_(isMovingForward, nextSlide, callback) {
var _this2 = this;
this.el.style.overflow = 'none';
this.el.style.overflow = 'hidden';
if (!isMovingForward) {
nextSlide.moveBeforeFirst();
@@ -704,7 +727,7 @@ var WebSlides = function () {
* automatically.
*/
value: function play(time) {
time = time || this.autoslide_;
time = time || this.options.autoslide;
if (!this.interval_ && typeof time === 'number' && time > 0) {
this.interval_ = setInterval(this.goNext.bind(this), time);
@@ -877,7 +900,7 @@ var ClickNav = function () {
*/
this.ws_ = wsInstance;
if (wsInstance.changeOnClick_) {
if (wsInstance.options.changeOnClick) {
this.ws_.el.addEventListener('click', this.onClick_.bind(this));
}
}
@@ -1109,27 +1132,50 @@ var Keyboard = function () {
key: 'onKeyPress_',
value: function onKeyPress_(event) {
var method = void 0;
var argument = void 0;
if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].SPACE) {
// Check if there's a focused element that might use the keyboard.
if (document.activeElement) {
var isContentEditable = document.activeElement.contentEditable !== 'inherit';
var isInput = ['INPUT', 'SELECT', 'OPTION', 'TEXTAREA'].indexOf(document.activeElement.tagName) > -1;
if (isInput || isContentEditable) {
return;
}
}
switch (event.which) {
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].AV_PAGE:
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].SPACE:
method = this.ws_.goNext;
} else {
if (this.ws_.isVertical) {
if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].DOWN) {
method = this.ws_.goNext;
} else if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].UP) {
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RE_PAGE:
method = this.ws_.goPrev;
}
} else {
if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RIGHT) {
method = this.ws_.goNext;
} else if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].LEFT) {
method = this.ws_.goPrev;
}
}
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].HOME:
method = this.ws_.goToSlide;
argument = 0;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].END:
method = this.ws_.goToSlide;
argument = this.ws_.maxSlide_ - 1;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].DOWN:
method = this.ws_.isVertical ? this.ws_.goNext : null;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].UP:
method = this.ws_.isVertical ? this.ws_.goPrev : null;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].LEFT:
method = !this.ws_.isVertical ? this.ws_.goPrev : null;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RIGHT:
method = !this.ws_.isVertical ? this.ws_.goNext : null;
break;
}
if (method) {
method.call(this.ws_);
method.call(this.ws_, argument);
}
}
}]);
@@ -1333,8 +1379,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
var MIN_WHEEL_DELTA = 40;
var Scroll = function () {
/**
* Scroll handler for the WebSlides.
@@ -1396,7 +1440,7 @@ var Scroll = function () {
this.timeout_ = setTimeout(function () {
_this.timeout_ = null;
}, 450);
}, this.ws_.options.scrollWait);
}
/**
@@ -1433,7 +1477,7 @@ var Scroll = function () {
}
}
if (Math.abs(wheelDeltaY) >= MIN_WHEEL_DELTA || Math.abs(wheelDeltaX) >= MIN_WHEEL_DELTA) {
if (Math.abs(wheelDeltaY) >= this.ws_.options.minWheelDelta || Math.abs(wheelDeltaX) >= this.ws_.options.minWheelDelta) {
if (isHorizontalMovement && this.isGoingLeft_ || !isHorizontalMovement && this.isGoingUp_) {
this.ws_.goPrev();
} else {
@@ -1476,8 +1520,6 @@ var EVENTS = {
}
};
var SLIDE_OFFSET = 50;
var Touch = function () {
/**
* @param {WebSlides} wsInstance The WebSlides instance
@@ -1590,9 +1632,9 @@ var Touch = function () {
// It's an horizontal drag
if (Math.abs(diffX) > Math.abs(diffY)) {
if (diffX < -SLIDE_OFFSET) {
if (diffX < -this.ws_.options.slideOffset) {
this.ws_.goPrev();
} else if (diffX > SLIDE_OFFSET) {
} else if (diffX > this.ws_.options.slideOffset) {
this.ws_.goNext();
}
}

10
static/js/webslides.min.js vendored
View File

File diff suppressed because one or more lines are too long

11
webpack.config.babel.js
View File

@@ -1,6 +1,8 @@
const SmartBannerPlugin = require('smart-banner-webpack-plugin');
const path = require('path');
const src = path.join(__dirname, 'src');
const pkg = require('./package.json');
module.exports = {
context: src,
@@ -24,5 +26,12 @@ module.exports = {
include: src
}
]
}
},
plugins: [
new SmartBannerPlugin({
banner: `Name: WebSlides\nVersion: ${pkg.version}\nDate: ${new Date().toISOString().slice(0,10)}\nDescription: ${pkg.description}\nURL: ${pkg.homepage}\nCredits: @jlantunez, @LuisSacristan, @Belelros`,
raw: false,
entryOnly: true
})
],
};