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

Re-updating docs

Browse Source
This commit is contained in:
Antonio Laguna
2017-01-31 08:39:21 +01:00
parent 3782a40a8a
commit 3251b1b7d8
2 changed files with 108 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
README.md
View File

@@ -8,15 +8,6 @@ Finally, everything you need to make HTML presentations in a beautiful way. Just
### Why WebSlides? ### 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. Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content.
## Project Setup
This project assumes you have NodeJS. You should also have npm installed as well (this usually comes packaged with Node). Once you have it cloned, you should run `npm install` to get all the dependencies.
Finally, run one of the following commands in the cloned directory:
- `npm run dev`: This starts a dev server with autoreload on the port `8080`.
- `npm run build`: This creates the `dist` files.
### Features ### Features
Version 0.1 (Jan 8, 2017): Version 0.1 (Jan 8, 2017):
@@ -52,93 +43,6 @@ Version 0.1 (Jan 8, 2017):
`<article id="webslides" class="vertical">` `<article id="webslides" class="vertical">`
## JavaScript
In order to bootstrap the WebSlides you'll need to create a instance of it:
`const ws = new WebSlides();`
That'll make everything run without any hassle.
Do you want to get your hands dirty? This is the API for the WebSlides module:
<dl>
<dt><a href="#goToSlide">goToSlide(slideIndex, opt_forward)</a></dt>
<dd><p>Goes to a given slide.</p>
</dd>
<dt><a href="#goNext">goNext()</a></dt>
<dd><p>Goes to the next slide.</p>
</dd>
<dt><a href="#goPrev">goPrev()</a></dt>
<dd><p>Goes to the previous slide.</p>
</dd>
<dt><a href="#registerPlugin">registerPlugin(key, cto)</a></dt>
<dd><p>Registers a plugin to be loaded when the instance is created. It allows
(on purpose) to replace default plugins.
Those being:</p>
<ul>
<li>Navigation</li>
<li>Hash</li>
<li>Keyboard</li>
</ul>
</dd>
</dl>
<a name="goToSlide"></a>
### `goToSlide(slideI, forward)`
Goes to a given slide.
| Param | Type | Description |
| --- | --- | --- | --- |
| slideIndex | <code>number</code> | The slide index. |
| forward | <code>boolean</code> | Whether we're forcing moving forward/backwards. This parameter is used only from the `goNext`, `goPrev` functions to adjust the scroll animations. |
<a name="goNext"></a>
### `goNext()`
Goes to the next slide. If the page is vertical, it will animate the scroll down.
<a name="goPrev"></a>
### `goPrev()`
Goes to the previous slide. If the page is vertical, it will animate the scroll up
<a name="registerPlugin"></a>
### `registerPlugin(key, cto)`
Registers a plugin to be loaded when the instance is created. It allows
(on purpose) to replace default plugins.
Those being:
- Navigation
- Hash
- Keyboard
| Param | Type | Description |
| --- | --- | --- |
| key | <code>string</code> | They key under which it'll be stored inside of the instance, inside the plugins dict. |
| cto | <code>function</code> | Plugin constructor. |
### Plugin development
Almost every single feature of WebSlides is a plugin that can be overwritten and you are able to create your custom plugins. Just call `registerPlugin` (as seen above) **before creating** the instance:
```
// Adding the constructor to WebSlides
WebSlides.registerPlugin('MyPlugin', MyPlugin);
// Starting WebSlides
// Your plugin will be constructed at this time and it will receive the webslides instance as the only parameter.
const ws = new WebSlides();
// You can also access ws.plugins.MyPlugin now
```
This allows you to rewrite the navigation to use a menu (for example) or add that missing piece of functionality you'd like to see.
Make sure to let us know so it could get added to the repo!
### What's in the download? ### What's in the download?
The download includes demos and images (devices and logos). The download includes demos and images (devices and logos).
@@ -181,14 +85,15 @@ You can add:
WebSlides is licensed under the [MIT License](https://opensource.org/licenses/MIT). WebSlides is licensed under the [MIT License](https://opensource.org/licenses/MIT).
Use it to make something cool. Use it to make something cool.
### Dive In!
Please check out:
- Want to get techie? Read [our technical docs](docs/technical.md)
- Do not miss [our demos](https://webslides.tv/)
### Credits ### Credits
- WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus). - WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).
- Thanks [@LuisSacristan](https://twitter.com/luissacristan) for the javascript code :) - Thanks [@LuisSacristan](https://twitter.com/luissacristan) for the javascript code :)
- Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer). - Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).
### Roadmap
* Fix crossbrowser issues. Safari mostly.
* Make a stable release.
* Write tests

101
docs/technical.md Normal file
View File

@@ -0,0 +1,101 @@
## Project Setup
This project assumes you have NodeJS. You should also have npm installed as well (this usually comes packaged with Node). Once you have it cloned, you should run `npm install` to get all the dependencies.
Finally, run one of the following commands in the cloned directory:
- `npm run dev`: This starts a dev server with autoreload on the port `8080`.
- `npm run build`: This creates the `dist` files.
## JavaScript
In order to bootstrap the WebSlides you'll need to create a instance of it:
`const ws = new WebSlides();`
That'll make everything run without any hassle.
Do you want to get your hands dirty? This is the API for the WebSlides module:
<dl>
<dt><a href="#goToSlide">goToSlide(slideIndex, opt_forward)</a></dt>
<dd><p>Goes to a given slide.</p>
</dd>
<dt><a href="#goNext">goNext()</a></dt>
<dd><p>Goes to the next slide.</p>
</dd>
<dt><a href="#goPrev">goPrev()</a></dt>
<dd><p>Goes to the previous slide.</p>
</dd>
<dt><a href="#registerPlugin">registerPlugin(key, cto)</a></dt>
<dd><p>Registers a plugin to be loaded when the instance is created. It allows
(on purpose) to replace default plugins.
Those being:</p>
<ul>
<li>Navigation</li>
<li>Hash</li>
<li>Keyboard</li>
</ul>
</dd>
</dl>
<a name="goToSlide"></a>
### `goToSlide(slideI, forward)`
Goes to a given slide.
| Param | Type | Description |
| --- | --- | --- | --- |
| slideIndex | <code>number</code> | The slide index. |
| forward | <code>boolean</code> | Whether we're forcing moving forward/backwards. This parameter is used only from the `goNext`, `goPrev` functions to adjust the scroll animations. |
<a name="goNext"></a>
### `goNext()`
Goes to the next slide. If the page is vertical, it will animate the scroll down.
<a name="goPrev"></a>
### `goPrev()`
Goes to the previous slide. If the page is vertical, it will animate the scroll up
<a name="registerPlugin"></a>
### `registerPlugin(key, cto)`
Registers a plugin to be loaded when the instance is created. It allows
(on purpose) to replace default plugins.
Those being:
- Navigation
- Hash
- Keyboard
| Param | Type | Description |
| --- | --- | --- |
| key | <code>string</code> | They key under which it'll be stored inside of the instance, inside the plugins dict. |
| cto | <code>function</code> | Plugin constructor. |
### Plugin development
Almost every single feature of WebSlides is a plugin that can be overwritten and you are able to create your custom plugins. Just call `registerPlugin` (as seen above) **before creating** the instance:
```
// Adding the constructor to WebSlides
WebSlides.registerPlugin('MyPlugin', MyPlugin);
// Starting WebSlides
// Your plugin will be constructed at this time and it will receive the webslides instance as the only parameter.
const ws = new WebSlides();
// You can also access ws.plugins.MyPlugin now
```
This allows you to rewrite the navigation to use a menu (for example) or add that missing piece of functionality you'd like to see.
Make sure to let us know so it could get added to the repo!
### Roadmap
* Fix crossbrowser issues. Safari mostly.
* Make a stable release.
* Write tests