diff --git a/README.md b/README.md index 8c40f6c..cd6b9af 100644 --- a/README.md +++ b/README.md @@ -8,15 +8,6 @@ Finally, everything you need to make HTML presentations in a beautiful way. Just ### 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. -## 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 Version 0.1 (Jan 8, 2017): @@ -52,93 +43,6 @@ Version 0.1 (Jan 8, 2017): `
` -## 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: - -
-
goToSlide(slideIndex, opt_forward)
-

Goes to a given slide.

-
-
goNext()
-

Goes to the next slide.

-
-
goPrev()
-

Goes to the previous slide.

-
-
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
    • -
-
-
- - - -### `goToSlide(slideI, forward)` -Goes to a given slide. - -| Param | Type | Description | -| --- | --- | --- | --- | -| slideIndex | number | The slide index. | -| forward | boolean | Whether we're forcing moving forward/backwards. This parameter is used only from the `goNext`, `goPrev` functions to adjust the scroll animations. | - - - -### `goNext()` -Goes to the next slide. If the page is vertical, it will animate the scroll down. - - - -### `goPrev()` -Goes to the previous slide. If the page is vertical, it will animate the scroll up - - - -### `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 | string | They key under which it'll be stored inside of the instance, inside the plugins dict. | -| cto | function | 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? 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). 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 - 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 :) - 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 \ No newline at end of file diff --git a/docs/technical.md b/docs/technical.md new file mode 100644 index 0000000..4961073 --- /dev/null +++ b/docs/technical.md @@ -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: + +
+
goToSlide(slideIndex, opt_forward)
+

Goes to a given slide.

+
+
goNext()
+

Goes to the next slide.

+
+
goPrev()
+

Goes to the previous slide.

+
+
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
    • +
+
+
+ + + +### `goToSlide(slideI, forward)` +Goes to a given slide. + +| Param | Type | Description | +| --- | --- | --- | --- | +| slideIndex | number | The slide index. | +| forward | boolean | Whether we're forcing moving forward/backwards. This parameter is used only from the `goNext`, `goPrev` functions to adjust the scroll animations. | + + + +### `goNext()` +Goes to the next slide. If the page is vertical, it will animate the scroll down. + + + +### `goPrev()` +Goes to the previous slide. If the page is vertical, it will animate the scroll up + + + +### `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 | string | They key under which it'll be stored inside of the instance, inside the plugins dict. | +| cto | function | 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