https://github.com/shannonhochkins/basic-webpack-bundler
https://github.com/shannonhochkins/basic-webpack-bundler
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shannonhochkins/basic-webpack-bundler
- Owner: shannonhochkins
- Created: 2017-06-29T02:27:21.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-29T02:40:18.000Z (almost 8 years ago)
- Last Synced: 2025-01-04T06:25:39.596Z (4 months ago)
- Language: JavaScript
- Size: 50.8 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Environment setup
```sh
$ npm install
```
## Development
Start the Webpack server (includes live reloading when you change files):
```sh
$ npm start
```
## Create new states
Literally just create a new folder under src/states, the only thing that's required is a template.
```html
/src
/states
/some-state
_some-state.template.html
```
The template file must have the .template.html extension to register.
The new state is accessible under /some-state.
You can nest states which will also work the same way.
```html
/src
/states
/some-state-a
_some-state-a.template.html
/some-state-b
_some-state-b.template.html
```
The new state is accessible under /some-state-a.
The new nested state is accessible under /some-state-a/some-state-b.
## Adding controller for a state.
To create javascript logic for a state, add a controll.js file, export a function which is your controller.
This state will automatically show the view, because there's no video data present, to add a video & captions, see below reference.
```html
/src
/states
/some-state
_some-state.template.html
_some-state.controller.js
```
Under _some-state.controller.js
```js
module.exports = controller;
function controller() {
this.title = 'texxxxtttt';
this.$onInit = function() {
// methods for main application available under $ctrl.$atc.methods
// $ctrl.$atc has a huge amount of options available.
}
}
```
## Adding a video & captions to your state
By default, the actual template and .controller files, are a view, they're not the video element.
You can add additional data like captions and video to your state by including a _exports.js file inside the same directory.
Now that you've added the videoId inside your template, your video will play first, and then the post view is called.
There's a few hooks available in your template:
```html
Always visible
Only shown during a video
Only shown after the video
```
```html
/src
/states
/some-state
_some-state.template.html
_some-state.controller.js
_exports.js
```
Inside _exports.js, make sure you export an object.
```js
module.exports = {
// video id or youtube url.
videoId : 'lAnN6FxQBWk',
captions : [
{
text : 'This is a caption',
start : 2, // start this caption when video is 2 seconds in
duration: 2, // stop it 2 seconds later
},
{
text : 'This is a caption too!',
start : 3, // start this caption 3 seconds in,
// this will overwrite the parent caption a second earlier as they overlap and it will
// always choose the latest caption.
duration: 9, // stop this caption 9 seconds in.
}
]
}
```
## Debugger mode
Add ?debug to your query string, and it will pull in some debug data overlayed on the page."# basic-webpack-bundler"