├── .npmignore
├── .travis.yml
├── static
    ├── images
    │   ├── avatar.jpg
    │   ├── iphone.png
    │   ├── setup.png
    │   ├── android.png
    │   ├── davinci.png
    │   ├── bt-appstore.png
    │   ├── iphone-hand.png
    │   ├── bt-playstore.png
    │   ├── favicons
    │   │   ├── favicon.png
    │   │   ├── favicon-120.png
    │   │   ├── favicon-152.png
    │   │   ├── favicon-180.png
    │   │   ├── favicon-192.png
    │   │   ├── favicon-32.png
    │   │   └── favicon-76.png
    │   ├── share-webslides.jpg
    │   ├── logos
    │   │   ├── logo.svg
    │   │   ├── netflix.svg
    │   │   ├── facebook.svg
    │   │   ├── microsoft.svg
    │   │   ├── apple.svg
    │   │   ├── instagram.svg
    │   │   ├── nyt.svg
    │   │   └── airbnb.svg
    │   └── swipe.svg
    └── js
    │   └── svg-icons.js
├── src
    ├── scss
    │   ├── utils
    │   │   ├── _mixins.scss
    │   │   ├── _clear.scss
    │   │   ├── _bugs.scss
    │   │   ├── _animations.scss
    │   │   └── _reset.scss
    │   ├── modules
    │   │   ├── _button.scss
    │   │   ├── _logo.scss
    │   │   ├── _avatars.scss
    │   │   ├── _tables.scss
    │   │   ├── _flexblock-metrics.scss
    │   │   ├── _flexblock-steps.scss
    │   │   ├── _browser.scss
    │   │   ├── _flexblock-clients.scss
    │   │   ├── _badges.scss
    │   │   ├── _flexblock-specs.scss
    │   │   ├── _flexblock-reasons.scss
    │   │   ├── _flexblock-activity.scss
    │   │   ├── _print.scss
    │   │   ├── _grid.scss
    │   │   ├── _header-footer.scss
    │   │   ├── _slides-navigation.scss
    │   │   ├── _media.scss
    │   │   ├── _longform.scss
    │   │   ├── _quotes.scss
    │   │   ├── _flexblock-features.scss
    │   │   ├── _toc.scss
    │   │   ├── _navigation.scss
    │   │   ├── _flexblock-plans.scss
    │   │   ├── _promos.scss
    │   │   ├── _flexblock.scss
    │   │   ├── _work.scss
    │   │   ├── _slides.scss
    │   │   ├── _slides-bg.scss
    │   │   ├── _flexblock-gallery.scss
    │   │   ├── _form.scss
    │   │   ├── _cards.scss
    │   │   └── _zoom.scss
    │   ├── _vars.scss
    │   ├── full.scss
    │   └── _base.scss
    └── js
    │   ├── full.js
    │   ├── utils
    │       ├── easing.js
    │       ├── keys.js
    │       ├── custom-event.js
    │       ├── scroll-to.js
    │       ├── mobile-detector.js
    │       └── dom.js
    │   ├── plugins
    │       ├── plugins.js
    │       ├── click-nav.js
    │       ├── grid.js
    │       ├── video.js
    │       ├── autoslide.js
    │       ├── hash.js
    │       ├── keyboard.js
    │       ├── scroll.js
    │       ├── navigation.js
    │       ├── zoom.js
    │       ├── touch.js
    │       └── youtube.js
    │   └── modules
    │       └── slide.js
├── postcss.config.js
├── .babelrc
├── .gitignore
├── .editorconfig
├── test
    ├── utils
    │   ├── keys.test.js
    │   ├── scroll-to.test.js
    │   └── hash.test.js
    ├── plugins
    │   ├── click-nav.test.js
    │   ├── autoslide.test.js
    │   ├── video.test.js
    │   ├── scroll.test.js
    │   ├── navigation.test.js
    │   ├── zoom.test.js
    │   ├── touch.test.js
    │   ├── youtube.test.js
    │   └── keyboard.test.js
    └── modules
    │   └── slide.test.js
├── zip-release.js
├── LICENSE
├── webpack.config.js
├── .sass-lint.yml
├── package.json
├── error.html
├── .eslintrc
└── README.md


/.npmignore:
--------------------------------------------------------------------------------
1 | .babelrc
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "10"
4 | 


--------------------------------------------------------------------------------
/static/images/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/avatar.jpg


--------------------------------------------------------------------------------
/static/images/iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/iphone.png


--------------------------------------------------------------------------------
/static/images/setup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/setup.png


--------------------------------------------------------------------------------
/src/scss/utils/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin square($width) {
2 |   height: $width;
3 |   width: $width;
4 | }
5 | 


--------------------------------------------------------------------------------
/static/images/android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/android.png


--------------------------------------------------------------------------------
/static/images/davinci.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/davinci.png


--------------------------------------------------------------------------------
/static/images/bt-appstore.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/bt-appstore.png


--------------------------------------------------------------------------------
/static/images/iphone-hand.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/iphone-hand.png


--------------------------------------------------------------------------------
/static/images/bt-playstore.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/bt-playstore.png


--------------------------------------------------------------------------------
/static/images/favicons/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/favicons/favicon.png


--------------------------------------------------------------------------------
/static/images/share-webslides.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/share-webslides.jpg


--------------------------------------------------------------------------------
/static/images/favicons/favicon-120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/favicons/favicon-120.png


--------------------------------------------------------------------------------
/static/images/favicons/favicon-152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/favicons/favicon-152.png


--------------------------------------------------------------------------------
/static/images/favicons/favicon-180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/favicons/favicon-180.png


--------------------------------------------------------------------------------
/static/images/favicons/favicon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/favicons/favicon-192.png


--------------------------------------------------------------------------------
/static/images/favicons/favicon-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/favicons/favicon-32.png


--------------------------------------------------------------------------------
/static/images/favicons/favicon-76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webslides/WebSlides/HEAD/static/images/favicons/favicon-76.png


--------------------------------------------------------------------------------
/src/js/full.js:
--------------------------------------------------------------------------------
1 | import WebSlides from './modules/webslides';
2 | require('../scss/full.scss');
3 | 
4 | window.WebSlides = WebSlides;
5 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: [
3 |         require('autoprefixer')({
4 |             browsers: ['last 2 versions'],
5 |         })
6 |     ]
7 | };


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["es2015", {"modules": false}]
 4 |   ],
 5 | 
 6 |   "env": {
 7 |     "test": {
 8 |       "plugins": ["transform-es2015-modules-commonjs"]
 9 |     }
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/js/utils/easing.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Swing easing function.
 3 |  * @param {number} p The percentage of time that has passed.
 4 |  * @return {number}
 5 |  */
 6 | function swing(p) {
 7 |   return 0.5 - Math.cos(p * Math.PI) / 2;
 8 | }
 9 | 
10 | export default {swing};
11 | 


--------------------------------------------------------------------------------
/src/scss/modules/_button.scss:
--------------------------------------------------------------------------------
 1 | /* Buttons/Badges */
 2 | [class*='button'] {
 3 |   @media (min-width: 500px) {
 4 |     & + & {
 5 |       margin-left: 1.8rem;
 6 |     }
 7 |   }
 8 | 
 9 |   @media (max-width: 499px) {
10 |     & + & {
11 |       margin-top: .8rem;
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/scss/utils/_clear.scss:
--------------------------------------------------------------------------------
 1 | /*=== Clearing === */
 2 | 
 3 | header,
 4 | main,
 5 | section,
 6 | aside,
 7 | footer,
 8 | .clear,
 9 | .wrap {
10 |   &:before,
11 |   &:after {
12 |     content: '';
13 |     display: table;
14 |   }
15 | 
16 |   &:after {
17 |     clear: both;
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # IDE files #
 2 | #############
 3 | .idea/
 4 | 
 5 | # Third Party #
 6 | ###############
 7 | node_modules/
 8 | coverage
 9 | .eslintcache
10 | 
11 | # OS generated files #
12 | ######################
13 | .DS_Store
14 | .DS_Store?
15 | ._*
16 | .Spotlight-V100
17 | .Trashes
18 | ehthumbs.db
19 | Thumbs.db
20 | webslides.zip
21 | 


--------------------------------------------------------------------------------
/src/js/utils/keys.js:
--------------------------------------------------------------------------------
 1 | const Keys = {
 2 |   ENTER: 13,
 3 |   SPACE: 32,
 4 |   RE_PAGE: 33,
 5 |   AV_PAGE: 34,
 6 |   END: 35,
 7 |   HOME: 36,
 8 |   LEFT: 37,
 9 |   UP: 38,
10 |   RIGHT: 39,
11 |   DOWN: 40,
12 |   PLUS: [107, 171, 187],
13 |   MINUS: [109, 173, 189],
14 |   ESCAPE: 27,
15 |   F: 70
16 | };
17 | 
18 | export default Keys;
19 | 


--------------------------------------------------------------------------------
/src/scss/utils/_bugs.scss:
--------------------------------------------------------------------------------
 1 | /*=========================================
 2 | 16. SAFARI BUGS (flex-wrap)
 3 | Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
 4 | =========================================== */
 5 | 
 6 | .flexblock:before,
 7 | .flexblock:after,
 8 | .grid:before,
 9 | .grid:after,
10 | .cta:before,
11 | .cta:after {
12 |   width: 0;
13 | }
14 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | max_line_length = 233
10 | end_of_line = lf
11 | 
12 | [*.json]
13 | indent_style = space
14 | indent_size = 2
15 | 
16 | [*.yml]
17 | indent_style = space
18 | indent_size = 2
19 | 
20 | [*.md]
21 | trim_trailing_whitespace = false
22 | 


--------------------------------------------------------------------------------
/src/scss/modules/_logo.scss:
--------------------------------------------------------------------------------
 1 | /*=== 3.1. Logo === */
 2 | 
 3 | .logo {
 4 |   text-transform: lowercase;
 5 | 
 6 |   a {
 7 |     background: url('../images/logos/logo.svg') no-repeat 0 0;
 8 |     background-size: 4.8rem;
 9 |     float: left;
10 |     height: 4.8rem;
11 |     text-indent: -4000px;
12 |     /*If you remove text-indent and add: */
13 |     /*padding-left: 6rem;*/
14 |     vertical-align: middle;
15 |     width: 4.8rem;
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/test/utils/keys.test.js:
--------------------------------------------------------------------------------
 1 | import Keys from '../../src/js/utils/keys';
 2 | 
 3 | test('Keys are present', () => {
 4 |   expect(Keys.ENTER).toBe(13);
 5 |   expect(Keys.SPACE).toBe(32);
 6 |   expect(Keys.RE_PAGE).toBe(33);
 7 |   expect(Keys.AV_PAGE).toBe(34);
 8 |   expect(Keys.END).toBe(35);
 9 |   expect(Keys.HOME).toBe(36);
10 |   expect(Keys.LEFT).toBe(37);
11 |   expect(Keys.UP).toBe(38);
12 |   expect(Keys.RIGHT).toBe(39);
13 |   expect(Keys.DOWN).toBe(40);
14 | });
15 | 


--------------------------------------------------------------------------------
/src/scss/modules/_avatars.scss:
--------------------------------------------------------------------------------
 1 | /*=========================================
 2 | 12. Avatars - uifaces.com
 3 | =========================================== */
 4 | 
 5 | cite img,
 6 | img[class*='avatar-'] {
 7 |   display: inline-block;
 8 |   margin-right: 6px;
 9 |   vertical-align: middle;
10 | }
11 | 
12 | img[class*='avatar-'] {
13 |   border-radius: 50%;
14 | }
15 | 
16 | $avatar-sizes: 40, 48, 56, 64, 72, 80;
17 | 
18 | @each $size in $avatar-sizes {
19 |   img.avatar-#{$size} {
20 |     @include square(#{$size}px);
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/zip-release.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | const fs = require('fs');
 3 | const archiver = require('archiver');
 4 | const pck = require('./package.json');
 5 | 
 6 | const output = fs.createWriteStream(`${__dirname}/${pck.name}.zip`);
 7 | const archive = archiver('zip', { zlib: { level: 9 } });
 8 | 
 9 | output.on('close', () => {
10 |   console.log(`${archive.pointer()} total bytes`);
11 | });
12 | 
13 | archive.on('error', err => {
14 |   throw err;
15 | });
16 | 
17 | archive.pipe(output);
18 | 
19 | pck.release.files.forEach(f => archive.glob(f));
20 | 
21 | archive.finalize();
22 | 


--------------------------------------------------------------------------------
/src/js/plugins/plugins.js:
--------------------------------------------------------------------------------
 1 | import AutoSlide from './autoslide';
 2 | import ClickNav from './click-nav';
 3 | import Grid from './grid';
 4 | import Hash from './hash';
 5 | import Keyboard from './keyboard';
 6 | import Navigation from './navigation';
 7 | import Scroll from './scroll';
 8 | import Touch from './touch';
 9 | import Video from './video';
10 | import YouTube from './youtube';
11 | import Zoom from './zoom';
12 | 
13 | export default {
14 |   AutoSlide,
15 |   ClickNav,
16 |   Grid,
17 |   Hash,
18 |   Keyboard,
19 |   Navigation,
20 |   Scroll,
21 |   Touch,
22 |   Video,
23 |   YouTube,
24 |   Zoom
25 | };
26 | 


--------------------------------------------------------------------------------
/src/scss/modules/_tables.scss:
--------------------------------------------------------------------------------
 1 | /*=========================================
 2 | 13. Tables
 3 | =========================================== */
 4 | 
 5 | table {
 6 |   margin-bottom: 3.2rem;
 7 |   margin-top: 3.2rem;
 8 | }
 9 | 
10 | td,
11 | th,
12 | thead {
13 |   border-spacing: 0;
14 |   padding: .7rem 2.4rem;
15 | }
16 | 
17 | thead th,
18 | th {
19 |   cursor: default;
20 |   font-weight: 600;
21 |   text-align: left;
22 |   text-transform: uppercase;
23 |   white-space: nowrap;
24 | }
25 | 
26 | thead,
27 | td.goals {
28 |   font-weight: 600;
29 |   text-shadow: none;
30 | }
31 | 
32 | tr > td {
33 |   font-weight: 400;
34 | }
35 | 


--------------------------------------------------------------------------------
/src/scss/modules/_flexblock-metrics.scss:
--------------------------------------------------------------------------------
 1 | /*=================================================
 2 | 6.4 Block Numbers - <ul class="flexblock metrics">
 3 | =================================================== */
 4 | 
 5 | .metrics li {
 6 |   text-align: center;
 7 |   width: 100%;
 8 | 
 9 |   @media (min-width: 568px) {
10 |     width: 50%;
11 |   }
12 | 
13 |   @media (min-width: 1024px) {
14 |     width: 25%;
15 |   }
16 | }
17 | 
18 | .metrics li strong {
19 |   display: block;
20 | }
21 | 
22 | .metrics li span,
23 | .metrics li svg {
24 |   display: block;
25 |   font-size: 6.4rem;
26 |   line-height: 7.2rem;
27 |   margin: 0 auto;
28 | }
29 | 
30 | .card-50 .metrics li {
31 |   width: 50%;
32 | }
33 | 


--------------------------------------------------------------------------------
/test/plugins/click-nav.test.js:
--------------------------------------------------------------------------------
 1 | import DOM from '../../src/js/utils/dom';
 2 | import ClickNav from '../../src/js/plugins/click-nav';
 3 | 
 4 | beforeAll(() => {
 5 |   document.body.innerHTML =
 6 |       `<div id="webslides" data-test="test"><p>Text</p></div>`;
 7 | });
 8 | 
 9 | test('Click nav plugin', () => {
10 |   const next = jest.fn();
11 |   const ws = document.getElementById('webslides');
12 | 
13 |   const webslides = {
14 |     options: {
15 |       changeOnClick: true
16 |     },
17 |     goNext: next,
18 |     el: ws
19 |   };
20 | 
21 |   expect(next).not.toBeCalled();
22 | 
23 |   new ClickNav(webslides);
24 |   DOM.fireEvent(ws, 'click');
25 |   expect(next.mock.calls.length).toBe(1);
26 | });
27 | 


--------------------------------------------------------------------------------
/src/scss/modules/_flexblock-steps.scss:
--------------------------------------------------------------------------------
 1 | /*==================================================
 2 | 6.3 flexblock.steps <ul class="flexblock steps">
 3 | About, Philosophy...
 4 | =================================================== */
 5 | 
 6 | .steps li {
 7 |   width: 100%;
 8 | 
 9 |   img,
10 |   span {
11 |     display: block;
12 |     margin: 0 auto .8rem;
13 |   }
14 | 
15 |   span {
16 |     font-size: 6.4rem;
17 |   }
18 | 
19 |   @media (min-width: 768px) {
20 |     width: 50%;
21 |   }
22 | }
23 | 
24 | @media (min-width: 1024px) {
25 |   .steps li {
26 |     width: 25%;
27 |   }
28 | 
29 |   .process {
30 |     border-left-style: solid;
31 |     border-left-width: 15px;
32 |     height: 0;
33 |     left: 0;
34 |     position: absolute;
35 |     top: 60px;
36 |     width: 0;
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/scss/modules/_browser.scss:
--------------------------------------------------------------------------------
 1 | /*=== HTML Browser (Screenshots) ================ */
 2 | /* <figure class="browser"> img </figure> */
 3 | 
 4 | .browser {
 5 |   border-radius: .3rem;
 6 |   margin: 0 auto 3.2rem;
 7 |   max-width: 1024px;
 8 |   overflow: hidden;
 9 | 
10 |   li & {
11 |     margin-bottom: 0;
12 |   }
13 | 
14 |   h1 + &,
15 |   h2 + &,
16 |   p + & {
17 |     margin-top: 4.8rem;
18 |   }
19 | 
20 |   figcaption {
21 |     padding: 2.4rem;
22 |   }
23 | 
24 |   &:before {
25 |     content: '● ● ●';
26 |     font-size: .8rem;
27 |     left: 0;
28 |     line-height: 0;
29 |     padding: 1.6rem;
30 |     position: absolute;
31 |     text-align: left;
32 |     top: 0;
33 |     width: 100%;
34 | 
35 |     @media (min-width: 768px) {
36 |       font-size: 1.6rem;
37 |     }
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/scss/modules/_flexblock-clients.scss:
--------------------------------------------------------------------------------
 1 | /*=====================================================================
 2 | 6.2 Clients Logos <ul class="flexblock clients">
 3 | ======================================================================= */
 4 | 
 5 | .flexblock.clients.blink li > a,
 6 | .flexblock.clients li {
 7 |   padding: 0;
 8 | }
 9 | 
10 | .flexblock.clients li figcaption {
11 |   padding: 0 2.4rem 2.4rem;
12 | }
13 | 
14 | .flexblock.clients.border li figcaption {
15 |   padding-top: 2.4rem;
16 | }
17 | 
18 | .clients.blink li>a,
19 | .clients li {
20 |   justify-content: inherit;
21 | }
22 | 
23 | .clients li img,
24 | .clients li svg {
25 |   display: block;
26 |   padding: 2.4rem;
27 | }
28 | 
29 | .clients.border li img,
30 | .clients.border li svg {
31 |   display: block;
32 |   margin-left: auto;
33 |   margin-right: auto;
34 | }
35 | 
36 | .clients li:hover {
37 |   z-index: 1;
38 | }
39 | 


--------------------------------------------------------------------------------
/src/scss/modules/_badges.scss:
--------------------------------------------------------------------------------
 1 | /*=== App Store Badges === */
 2 | /* Change width and height: 216x64px, 162x48px, 135x40... */
 3 | 
 4 | [class*='badge-'] {
 5 |   background-repeat: no-repeat;
 6 |   background-size: cover;
 7 |   border-radius: .6rem;
 8 |   display: inline-block;
 9 |   height: 40px;
10 |   line-height: 4rem;
11 |   text-indent: -4000px;
12 |   width: 135px;
13 | 
14 |   &:hover {
15 |     opacity: .7;
16 |   }
17 | 
18 |   @media (min-width: 1024px) {
19 |     height: 48px;
20 |     line-height: 4.8rem;
21 |     width: 162px;
22 |   }
23 | 
24 |   @media (min-width: 500px) {
25 |     & + & {
26 |       margin-left: 1.8rem;
27 |     }
28 |   }
29 | 
30 |   @media (max-width: 499px) {
31 |     & + & {
32 |       margin-top: .8rem;
33 |     }
34 |   }
35 | }
36 | 
37 | .badge-ios {
38 |   background-image: url('../images/bt-appstore.png');
39 | }
40 | 
41 | .badge-android {
42 |   background-image: url('../images/bt-playstore.png');
43 | }
44 | 


--------------------------------------------------------------------------------
/src/scss/modules/_flexblock-specs.scss:
--------------------------------------------------------------------------------
 1 | /*=====================================================
 2 | 6.5 Specs/Items: <ul class="flexblock specs">
 3 | ======================================================= */
 4 | 
 5 | .specs li {
 6 |   text-align: left;
 7 |   width: 100%;
 8 | 
 9 |   &:after {
10 |     bottom: -2.4rem;
11 |     content: '';
12 |     display: block;
13 |     height: 1px;
14 |     position: relative;
15 |   }
16 | 
17 |   &:hover {
18 |     transform: translateX(.2rem);
19 |   }
20 | 
21 |   span,
22 |   svg {
23 |     display: block;
24 |     font-size: 6.4rem;
25 |     line-height: 1;
26 |     margin: 0;
27 |   }
28 | 
29 |   img {
30 |     width: 6.4rem;
31 |   }
32 | 
33 |   span {
34 |     font-weight: 300;
35 | 
36 |     sup {
37 |       font-size: 3rem;
38 |     }
39 |   }
40 | 
41 |   @media (min-width: 1024px) {
42 |     span,
43 |     svg,
44 |     img {
45 |       float: left;
46 |       margin-right: 2.4rem;
47 |     }
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/scss/modules/_flexblock-reasons.scss:
--------------------------------------------------------------------------------
 1 | /*=================================================
 2 | 6.6 Reasons/Why/Numbers (counter-increment)
 3 | <ul class="flexblock reasons">
 4 | =================================================== */
 5 | .flexblock.reasons {
 6 |   li {
 7 |     counter-increment: list;
 8 |     text-align: left;
 9 |     width: 100%;
10 | 
11 |     &:hover {
12 |       transform: translateY(-.2rem);
13 |     }
14 | 
15 |     &:after {
16 |       bottom: -2.4rem;
17 |       content: '';
18 |       display: block;
19 |       height: 1px;
20 |       position: relative;
21 |     }
22 | 
23 |     &:before {
24 |       content: counter(list)'.';
25 |       font-size: 6.4rem;
26 |       line-height: 1;
27 |     }
28 | 
29 |     @media (min-width: 768px) {
30 |       padding-left: 8.8rem;
31 |       /* You need two digits? (1-10)*/
32 |       /*padding-left: 12rem; */
33 | 
34 |       &:before {
35 |         left: 2.4rem;
36 |         position: absolute;
37 |       }
38 |     }
39 |   }
40 | }
41 | 
42 | 


--------------------------------------------------------------------------------
/src/scss/modules/_flexblock-activity.scss:
--------------------------------------------------------------------------------
 1 | /*===========================================
 2 | 6.9 Block Activity <ul class="activity">
 3 | CV / News
 4 | ============================================= */
 5 | 
 6 | .flexblock.activity {
 7 |   flex-direction: column;
 8 | 
 9 |   li {
10 |     flex: 1;
11 |     position: relative;
12 |     width: auto;
13 |   }
14 | 
15 |   p {
16 |     margin-bottom: 0;
17 |     vertical-align: top;
18 |   }
19 | 
20 |   img {
21 |     display: block;
22 |   }
23 | 
24 |   .year,
25 |   .title {
26 |     display: inline;
27 |     font-weight: 600;
28 |   }
29 | 
30 |   .summary {
31 |     width: 100%;
32 |   }
33 | 
34 |   .title {
35 |     margin-left: 1rem;
36 |   }
37 | 
38 | 
39 |   @media (min-width: 768px) {
40 |     p {
41 |       float: left;
42 |     }
43 | 
44 |     .year {
45 |       width: 15%;
46 |     }
47 | 
48 |     .title {
49 |       margin-left: 4%;
50 |       margin-right: 4%;
51 |       width: 27%;
52 |     }
53 | 
54 |     .summary {
55 |       width: 50%;
56 |     }
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/scss/modules/_print.scss:
--------------------------------------------------------------------------------
 1 | /*=========================================
 2 | 17. PRINT
 3 | =========================================== */
 4 | 
 5 | // sass-lint:disable no-important
 6 | @media print {
 7 |   @page {
 8 |     margin: .5cm;
 9 |     size: A4 landscape;
10 |   }
11 | 
12 |   // Black prints faster
13 |   * {
14 |     background: transparent !important;
15 |     color: $black !important;
16 |     filter: none !important;
17 |     text-shadow: none !important;
18 |   }
19 | 
20 |   html,
21 |   body,
22 |   #webslides {
23 |     height: auto !important;
24 |     overflow: auto !important;
25 |     width: auto !important;
26 |   }
27 | 
28 |   #webslides {
29 |     overflow-x: auto !important;
30 |     overflow-y: auto !important;
31 |   }
32 | 
33 |   section,
34 |   .slide {
35 |     display: flex !important;
36 |     height: auto !important;
37 |   }
38 | 
39 |   section * {
40 |     animation: none;
41 |   }
42 | 
43 |   table,
44 |   figure {
45 |     page-break-inside: avoid;
46 |   }
47 | 
48 |   #counter,
49 |   #navigation {
50 |     display: none;
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/test/plugins/autoslide.test.js:
--------------------------------------------------------------------------------
 1 | import DOM from '../../src/js/utils/dom';
 2 | import AutoSlide from '../../src/js/plugins/autoslide';
 3 | 
 4 | jest.useFakeTimers();
 5 | 
 6 | beforeAll(() => {
 7 |   document.body.innerHTML =
 8 |       `<div id="webslides"></div><input id="focusable" />`;
 9 | });
10 | 
11 | test('AutoSlide plugin', () => {
12 |   const next = jest.fn();
13 |   const ws = document.getElementById('webslides');
14 |   const webslides = {
15 |     options: {
16 |       autoslide: 100
17 |     },
18 |     goNext: next,
19 |     el: ws
20 |   };
21 | 
22 |   expect(next).not.toBeCalled();
23 | 
24 |   new AutoSlide(webslides);
25 |   DOM.fireEvent(ws, 'ws:init');
26 | 
27 |   // Wait until next execution
28 |   jest.runTimersToTime(101);
29 | 
30 |   expect(next.mock.calls.length).toBe(1);
31 | 
32 |   // Wait until next execution
33 |   jest.runTimersToTime(101);
34 | 
35 |   expect(next.mock.calls.length).toBe(2);
36 | 
37 |   // Pause on focus
38 |   document.getElementById('focusable').focus();
39 |   DOM.fireEvent(document.body, 'focus');
40 |   jest.runTimersToTime(101);
41 | 
42 |   expect(next.mock.calls.length).toBe(2);
43 | });
44 | 


--------------------------------------------------------------------------------
/src/scss/modules/_grid.scss:
--------------------------------------------------------------------------------
 1 | /*=== 1.4. Basic Grid (Flexible blocks)
 2 | Auto-fill & Equal height === */
 3 | 
 4 | .grid {
 5 |   clear: both;
 6 |   display: flex;
 7 |   flex-wrap: wrap;
 8 |   margin-left: auto;
 9 |   margin-right: auto;
10 | 
11 |   &:after {
12 |     clear: both;
13 |   }
14 | 
15 |   &:before {
16 |     content: '';
17 |     display: table;
18 |   }
19 | 
20 |   & > .column {
21 |     display: flex;
22 |     flex: auto;
23 |     flex-direction: column;
24 |     padding: 2.4rem;
25 |     position: relative;
26 |     transition: .3s;
27 |     width: 100%;
28 |   }
29 | 
30 |   &.vertical-align .column {
31 |     justify-content: center;
32 |   }
33 | 
34 |   @media (min-width: 768px) {
35 |     & > .column {
36 |       width: 25%;
37 |     }
38 | 
39 |     &.sm .column:nth-child(1) {
40 |       width: 30%;
41 |     }
42 | 
43 |     &.sm .column:nth-child(2) {
44 |       width: 70%;
45 |     }
46 | 
47 |     &.ms .column:nth-child(1) {
48 |       width: 70%;
49 |     }
50 | 
51 |     &.ms .column:nth-child(2) {
52 |       width: 30%;
53 |     }
54 | 
55 |     &.sms .column:nth-child(2) {
56 |       width: 50%;
57 |     }
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 José Luis Antúnez
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/js/plugins/click-nav.js:
--------------------------------------------------------------------------------
 1 | const CLICKABLE_ELS = [
 2 |   'INPUT',
 3 |   'SELECT',
 4 |   'OPTION',
 5 |   'BUTTON',
 6 |   'A',
 7 |   'TEXTAREA'
 8 | ];
 9 | 
10 | /**
11 |  * ClickNav plugin that allows to click on the page to get to the next slide.
12 |  */
13 | export default class ClickNav {
14 |   /**
15 |    * @param {WebSlides} wsInstance The WebSlides instance
16 |    * @constructor
17 |    */
18 |   constructor(wsInstance) {
19 |     /**
20 |      * @type {WebSlides}
21 |      * @private
22 |      */
23 |     this.ws_ = wsInstance;
24 | 
25 |     if (wsInstance.options.changeOnClick) {
26 |       this.ws_.el.addEventListener('click', this.onClick_.bind(this));
27 |     }
28 |   }
29 | 
30 |   /**
31 |    * Reacts to the click event. It will go to the next slide unless the element
32 |    * has a data-prevent-nav attribute or is on the list of CLICKABLE_ELS.
33 |    * @param {MouseEvent} event The click event.
34 |    * @private
35 |    */
36 |   onClick_(event) {
37 |     if (CLICKABLE_ELS.indexOf(event.target.tagName) < 0 &&
38 |       typeof event.target.dataset.preventNav === 'undefined') {
39 |       this.ws_.goNext();
40 |     }
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/static/js/svg-icons.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Thanks fontastic.me (Font Awesome 4.4 as SVG Icons).
 3 |  * Do you want to use other icons?
 4 |  * Go to https://fontastic.me > Create account > Select icons > Customize > Publish (SVG Sprite) > Paste .js here
 5 |  */
 6 | 
 7 | /*
 8 | Important!
 9 | /css/svg-icons.css is required. 
10 | */
11 | 
12 | (function(a,b,c,d){function e(b,c){if(c){var d=c.getAttribute('viewBox'),e=a.createDocumentFragment(),f=c.cloneNode(true);if(d)b.setAttribute('viewBox',d);while(f.childNodes.length)e.appendChild(f.childNodes[0]);b.appendChild(e);}}function f(){var b=this,c=a.createElement('x'),d=b.s;c.innerHTML=b.responseText;b.onload=function(){d.splice(0).map(function(a){e(a[0],c.querySelector('#'+a[1].replace(/(\W)/g,'\\$1')));});};b.onload();}function g(){var a;while((a=b[0])){var e=a.parentNode,h=a.getAttribute('xlink:href').split('#')[1],i='https://file.myfontastic.com/bLfXNBF36ByeujCbT5PohZ/sprites/1477146123.svg';e.removeChild(a);var j=d[i]=d[i]||new XMLHttpRequest();if(!j.s){j.s=[];j.open('GET',i);j.onload=f;j.send();}j.s.push([e,h]);if(j.readyState===4)j.onload();}c(g);}g();})(document,document.getElementsByTagName('use'),window.requestAnimationFrame||window.setTimeout,{});


--------------------------------------------------------------------------------
/src/scss/modules/_header-footer.scss:
--------------------------------------------------------------------------------
 1 | /*=========================================
 2 | 3. Header & Footer
 3 | =========================================== */
 4 | 
 5 | /* -- If you want an unique, global header/footer,read this:
 6 | https://github.com/webslides/webslides/issues/57 -- */
 7 | 
 8 | header,
 9 | footer,
10 | #navigation {
11 |   padding: 2.4rem;
12 |   transition: all .4s ease-in-out;
13 |   width: 100%;
14 | }
15 | 
16 | header p,
17 | footer p {
18 |   line-height: 4.8rem;
19 |   margin-bottom: 0;
20 | }
21 | 
22 | header[role='banner'] img,
23 | footer img {
24 |   height: 4rem;
25 |   vertical-align: middle;
26 | }
27 | 
28 | footer {
29 |   position: relative;
30 | }
31 | 
32 | header,
33 | footer {
34 |   z-index: 3;
35 | }
36 | 
37 | header,
38 | .ws-ready footer {
39 |   left: 0;
40 |   position: absolute;
41 |   top: 0;
42 | }
43 | 
44 | .ws-ready footer {
45 |   bottom: 0;
46 |   top: auto;
47 | }
48 | 
49 | // Remove "opacity=0" if you want an unique, visible header on each slide
50 | header[role='banner'] {
51 |   opacity: 0;
52 | 
53 |   &:hover {
54 |     opacity: 1;
55 |   }
56 | }
57 | 
58 | @media (max-width: 767px) {
59 |   footer .alignleft,
60 |   footer .alignright {
61 |     display: block;
62 |     float: none;
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/test/plugins/video.test.js:
--------------------------------------------------------------------------------
 1 | import Video from '../../src/js/plugins/video';
 2 | import DOM from '../../src/js/utils/dom';
 3 | 
 4 | beforeAll(() => {
 5 |   const slides = '12345'.replace(/(\d)/g,
 6 |       '<div id="section-$1" class="slide"><video autoplay="true" /></div>');
 7 |   document.body.innerHTML = `<div id="webslides">${slides}</div>`;
 8 | });
 9 | 
10 | test('Video utility', () => {
11 |   const ws = document.getElementById('webslides');
12 |   const slides = ws.querySelectorAll('.slide');
13 |   const videos = ws.querySelectorAll('video');
14 |   const play = jest.fn();
15 |   const pause = jest.fn();
16 |   videos.forEach(video => {
17 |     video.play = play;
18 |     video.pause = pause;
19 |   });
20 | 
21 |   const webslides = {
22 |     el: ws,
23 |     slides: []
24 |   };
25 |   slides.forEach(slide => webslides.slides.push({el: slide}));
26 | 
27 |   expect(ws.querySelectorAll('video[autoplay]').length).toBe(5);
28 | 
29 |   new Video(webslides);
30 | 
31 |   expect(ws.querySelectorAll('video[autoplay]').length).toBe(0);
32 |   expect(pause.mock.calls.length).toBe(5);
33 | 
34 |   webslides.slides.forEach(slide => {
35 |     DOM.fireEvent(slide.el, 'slide:enable', {slide: slide});
36 |     DOM.fireEvent(slide.el, 'slide:disable', {slide: slide});
37 |   });
38 | 
39 |   expect(pause.mock.calls.length).toBe(10);
40 | });
41 | 


--------------------------------------------------------------------------------
/src/scss/modules/_slides-navigation.scss:
--------------------------------------------------------------------------------
 1 | /* === 5.2 Counter / Navigation Slides  === */
 2 | 
 3 | #navigation {
 4 |   animation: fadeIn 8s;
 5 |   bottom: 0;
 6 |   left: 0;
 7 |   margin-left: auto;
 8 |   margin-right: auto;
 9 |   opacity: 0;
10 |   position: fixed;
11 |   right: 0;
12 |   width: 24.4rem;
13 |   /* hover/visibility */
14 |   z-index: 4;
15 | 
16 |   &:hover {
17 |     opacity: 1;
18 |   }
19 | 
20 |   p {
21 |     margin-bottom: 0;
22 |   }
23 | }
24 | 
25 | #counter {
26 |   display: block;
27 |   line-height: 4.8rem;
28 |   margin-left: auto;
29 |   margin-right: auto;
30 |   position: relative;
31 |   text-align: center;
32 |   width: 10rem;
33 | 
34 |   a:hover {
35 |     padding: .8rem;
36 |   }
37 | }
38 | 
39 | a#next,
40 | a#previous {
41 |   border-radius: .4rem;
42 |   cursor: pointer;
43 |   font-size: 2.4rem;
44 |   height: 4rem;
45 |   padding: .8rem;
46 |   position: absolute;
47 |   text-align: center;
48 |   width: 4rem;
49 | }
50 | 
51 | a#next {
52 |   right: 3.2rem;
53 | }
54 | 
55 | a#previous {
56 |   left: 3.2rem;
57 | }
58 | 
59 | @media (max-width: 1024px) {
60 |   #navigation {
61 |     animation: fadeIn 6s;
62 |     background: url('../images/swipe.svg') no-repeat center top;
63 |     background-size: 4.8rem;
64 |   }
65 | 
66 |   #navigation a,
67 |   #counter {
68 |     display: none;
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/src/scss/modules/_media.scss:
--------------------------------------------------------------------------------
 1 | /*=== 1.3 Responsive Media (videos, iframe...) === */
 2 | 
 3 | .embed {
 4 |   height: 0;
 5 |   overflow: hidden;
 6 |   /*aspect ratio:16:9*/
 7 |   padding-bottom: 56.6%;
 8 |   /*aspect ratio: 4:3*/
 9 |   /*padding-bottom: 75%;*/
10 |   position: relative;
11 | 
12 |   iframe,
13 |   object,
14 |   embed,
15 |   video {
16 |     height: 100%;
17 |     left: 0;
18 |     margin: 0;
19 |     position: absolute;
20 |     top: 0;
21 |     width: 100%;
22 |   }
23 | 
24 |   /* -- Responsive background video
25 |   https://fvsch.com/code/video-background/ -- */
26 | 
27 |   .fullscreen > & {
28 |     bottom: 0;
29 |     height: auto;
30 |     left: 0;
31 |     padding-bottom: 0;
32 |     position: fixed;
33 |     right: 0;
34 |     top: 0;
35 | 
36 |     /* 1. No object-fit support: */
37 |     & > iframe,
38 |     & > object,
39 |     & > embed,
40 |     & > video {
41 |       @media (min-aspect-ratio: 16 / 9) {
42 |         height: 300%;
43 |         top: -100%;
44 |       }
45 | 
46 |       @media (max-aspect-ratio: 16 / 9) {
47 |         left: -100%;
48 |         width: 300%;
49 |       }
50 | 
51 |       /* 2. If supporting object-fit, overriding (1): */
52 |       @supports (object-fit: cover) {
53 |         height: 100%;
54 |         left: 0;
55 |         object-fit: cover;
56 |         top: 0;
57 |         width: 100%;
58 |       }
59 |     }
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/scss/modules/_longform.scss:
--------------------------------------------------------------------------------
 1 | /*=========================================
 2 | 15. Longform
 3 | =========================================== */
 4 | /* -- Posts = .wrap.longform -- */
 5 | 
 6 | .longform {
 7 |   width: 72rem;
 8 |   /* Why 72rem=720px?
 9 |   90-95 characters per line = better reading speed */
10 | 
11 |   & .alignleft,
12 |   & .alignright {
13 |     max-width: 40%;
14 |   }
15 | 
16 |   img.aligncenter,
17 |   figure.aligncenter {
18 |     margin-bottom: 3.2rem;
19 |     margin-top: 3.2rem;
20 |   }
21 | 
22 |   ul,
23 |   ol {
24 |     margin-bottom: 3.2rem;
25 |   }
26 | 
27 |   ul ol,
28 |   ol ul,
29 |   ul ul,
30 |   ol ol {
31 |     margin-bottom: 0;
32 |   }
33 | 
34 |   figcaption p,
35 |   [class*='text-pull-'] p {
36 |     font-size: 1.6rem;
37 |     line-height: 2.4rem;
38 |   }
39 | 
40 |   /* Mobile: video full width */
41 |   .text-pull.embed {
42 |     margin-left: -2.4rem;
43 |     margin-right: -2.4rem;
44 |     padding-bottom: 60.6%;
45 |   }
46 | 
47 |   @media (min-width: 1280px) {
48 |     [class*='text-pull-'] {
49 |       max-width: 32%;
50 |     }
51 | 
52 |     .text-pull-right {
53 |       margin-right: -256px;
54 |     }
55 | 
56 |     .text-pull-left {
57 |       margin-left: -256px;
58 |     }
59 |   }
60 | 
61 |   @media (min-width: 1024px) {
62 |     .text-quote {
63 |       margin-left: -4.8rem;
64 |       margin-right: -4.8rem;
65 |     }
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/js/utils/custom-event.js:
--------------------------------------------------------------------------------
 1 | const NativeCustomEvent = window.CustomEvent;
 2 | 
 3 | /**
 4 |  * Check for the usage of native support for CustomEvents which is lacking
 5 |  * completely on IE.
 6 |  * @return {boolean} Whether it can be used or not.
 7 |  */
 8 | function canIuseNativeCustom() {
 9 |   try {
10 |     const p = new NativeCustomEvent('t', {
11 |       detail: {
12 |         a: 'b'
13 |       }
14 |     });
15 |     return 't' === p.type && 'b' === p.detail.a;
16 |   } catch (e) { }
17 | 
18 |   /* istanbul ignore next: hard to reproduce on test environment  */
19 |   return false;
20 | }
21 | 
22 | /**
23 |  * Lousy polyfill for the Custom Event constructor for IE.
24 |  * @param {!string} type The type of the event.
25 |  * @param {?Object} params Additional information for the event.
26 |  * @return {Event}
27 |  * @constructor
28 |  */
29 | /* istanbul ignore next: hard to reproduce on test environment  */
30 | const IECustomEvent = function CustomEvent(type, params) {
31 |   const e = document.createEvent('CustomEvent');
32 | 
33 |   if (params) {
34 |     e.initCustomEvent(type, params.bubbles, params.cancelable, params.detail);
35 |   } else {
36 |     e.initCustomEvent(type, false, false, undefined);
37 |   }
38 | 
39 |   return e;
40 | };
41 | 
42 | /* istanbul ignore next: hard to reproduce on test environment  */
43 | const WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent;
44 | 
45 | export default WSCustomEvent;
46 | 


--------------------------------------------------------------------------------
/src/scss/modules/_quotes.scss:
--------------------------------------------------------------------------------
 1 | /*=========================================
 2 | 11. Quotes
 3 | =========================================== */
 4 | 
 5 | blockquote {
 6 |   display: inline-block;
 7 |   position: relative;
 8 | 
 9 |   p {
10 |     font-size: 2.4rem;
11 |     line-height: 4rem;
12 | 
13 |     &:last-child {
14 |       margin-bottom: 3.2rem;
15 |     }
16 |   }
17 | }
18 | 
19 | /* -- Interviews dl.text-interview -- */
20 | dd blockquote p:last-child {
21 |   margin-bottom: 0;
22 | }
23 | 
24 | cite {
25 |   display: block;
26 |   text-align: center;
27 | 
28 |   &:before {
29 |     content: '\2014 \2009';
30 |     margin-right: 6px;
31 |   }
32 | }
33 | 
34 | cite span {
35 |   display: block;
36 | }
37 | 
38 | /* -- A big Blockquote -- */
39 | /* .wall will be deprecated soon. Use .text-quote ;) */
40 | .text-quote,
41 | .wall {
42 |   /* Versatility: blockquote, p, h2... */
43 |   position: relative;
44 | 
45 |   &:before {
46 |     content: '\201C';
47 |     font-family: arial, sans-serif;
48 |     font-size: 12rem;
49 |     height: 5.6rem;
50 |     left: -.8rem;
51 |     line-height: 1;
52 |     position: absolute;
53 |     text-align: center;
54 |     top: -4rem;
55 |     width: 5.6rem;
56 |   }
57 | 
58 |   @media (min-width: 768px) {
59 |     padding-left: 6.4rem;
60 | 
61 |     p {
62 |       font-size: 3.2rem;
63 |       line-height: 4.8rem;
64 |     }
65 | 
66 |     &:before {
67 |       left: .8rem;
68 |       top: -1.6rem;
69 |     }
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const SmartBannerPlugin = require('smart-banner-webpack-plugin');
 2 | const path = require('path');
 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | 
 5 | const src = path.join(__dirname, 'src');
 6 | const pkg = require('./package.json');
 7 | 
 8 | module.exports = {
 9 |   context: src,
10 |   entry: {
11 |     webslides: './js/full.js'
12 |   },
13 |   output: {
14 |     filename: '[name].js',
15 |     path: path.join(__dirname, 'static/js'),
16 |     publicPath: '/static/js/'
17 |   },
18 |   devServer: {
19 |     contentBase: __dirname,
20 |     host: '0.0.0.0'
21 |   },
22 |   module: {
23 |     rules: [
24 |       {
25 |         test: /\.js$/,
26 |         use: [
27 |           'babel-loader',
28 |           'eslint-loader'
29 |         ],
30 |         include: src
31 |       },
32 |       {
33 |         test: /\.scss$/,
34 |         use: ExtractTextPlugin.extract({
35 |           fallback: 'style-loader',
36 |           use: 'css-loader?url=false!postcss-loader!sass-loader'
37 |         }),
38 |         include: src
39 |       }
40 |     ]
41 |   },
42 |   plugins: [
43 |     new ExtractTextPlugin('../css/webslides.css'),
44 |     new SmartBannerPlugin({
45 |       banner: `Name: WebSlides\nVersion: ${pkg.version}\nDate: ${new Date().toISOString().slice(0,10)}\nDescription: ${pkg.description}\nURL: ${pkg.homepage}\nCredits: @jlantunez, @LuisSacristan, @Belelros`,
46 |       raw: false,
47 |       entryOnly: true
48 |     })
49 |   ],
50 | };
51 | 


--------------------------------------------------------------------------------
/test/utils/scroll-to.test.js:
--------------------------------------------------------------------------------
 1 | import scrollTo from '../../src/js/utils/scroll-to';
 2 | 
 3 | jest.useFakeTimers();
 4 | 
 5 | beforeAll(() => {
 6 |   const brs = '<br />'.repeat(20);
 7 |   document.body.innerHTML = `<div id="webslides">${brs}</div>`;
 8 | });
 9 | 
10 | afterAll(() => {
11 |   jest.clearAllTimers();
12 | });
13 | 
14 | test('ScrollTo with defaults', () => {
15 |   const ws = document.getElementById('webslides');
16 | 
17 |   scrollTo(100);
18 | 
19 |   expect(ws.scrollTop).toBe(0);
20 | 
21 |   jest.runTimersToTime(400);
22 | 
23 |   expect(ws.scrollTop).toBeLessThan(100);
24 | 
25 |   jest.runAllTimers();
26 | 
27 |   expect(ws.scrollTop).toBe(100);
28 | });
29 | 
30 | test('ScrollTo with custom duration', () => {
31 |   const ws = document.getElementById('webslides');
32 |   ws.scrollTop = 0;
33 |   scrollTo(100, 2000);
34 | 
35 |   expect(ws.scrollTop).toBe(0);
36 |   jest.runTimersToTime(500);
37 |   expect(ws.scrollTop).toBeLessThan(100);
38 |   jest.runTimersToTime(700);
39 |   expect(ws.scrollTop).toBeLessThan(100);
40 |   jest.runAllTimers();
41 | 
42 |   expect(ws.scrollTop).toBe(100);
43 | });
44 | 
45 | test('ScrollTo with custom callback', () => {
46 |   const ws = document.getElementById('webslides');
47 |   ws.scrollTop = 0;
48 |   const cb = jest.fn();
49 | 
50 |   scrollTo(100, 500, cb);
51 |   expect(ws.scrollTop).toBe(0);
52 |   expect(cb).not.toBeCalled();
53 | 
54 |   jest.runAllTimers();
55 | 
56 |   expect(ws.scrollTop).toBe(100);
57 |   expect(cb).toBeCalled();
58 | });
59 | 


--------------------------------------------------------------------------------
/src/scss/modules/_flexblock-features.scss:
--------------------------------------------------------------------------------
 1 | /*====================================================================
 2 | 6.1 Features <ul class="flexblock features">
 3 | ====================================================================== */
 4 | 
 5 | .flexblock.features {
 6 |   > li {
 7 |     border-radius: .4rem;
 8 |     margin-bottom: 4.8rem;
 9 |     width: 100%;
10 |   }
11 | 
12 |   li h2 {
13 |     text-transform: uppercase;
14 |   }
15 | 
16 |   li span {
17 |     font-weight: 300;
18 |   }
19 | 
20 |   li p {
21 |     margin: 0;
22 |   }
23 | 
24 |   li p em {
25 |     display: block;
26 |   }
27 | 
28 |   li span,
29 |   li svg {
30 |     display: block;
31 |     font-size: 6.4rem;
32 |     line-height: 1;
33 |     margin: 0;
34 |   }
35 | 
36 |   li img {
37 |     width: 6.4rem;
38 |   }
39 | 
40 |   li span sup {
41 |     font-size: 3rem;
42 |   }
43 | 
44 |   @media (min-width: 1200px) {
45 |     li span,
46 |     li svg,
47 |     li img {
48 |       float: left;
49 |       margin-right: .8rem;
50 |     }
51 |   }
52 | }
53 | 
54 | @media (min-width: 768px) {
55 |   .flexblock.features {
56 |     margin-left: -2%;
57 |     margin-right: -2%;
58 |   }
59 | 
60 |   .flexblock.features > li {
61 |     margin-left: 2%;
62 |     margin-right: 2%;
63 |     width: 29%;
64 |   }
65 | 
66 |   .size-50 .flexblock.features > li {
67 |     width: 46%;
68 |   }
69 | 
70 |   .column .flexblock.features > li {
71 |     width: 100%;
72 |   }
73 | 
74 |   footer .flexblock.features>li {
75 |     margin-bottom: 0;
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/scss/modules/_toc.scss:
--------------------------------------------------------------------------------
 1 | /*===========================================
 2 | 9. Table of contents
 3 | ============================================= */
 4 | 
 5 | .toc,
 6 | .toc ol > li:before,
 7 | .chapter {
 8 |   position: relative;
 9 |   z-index: 2;
10 | }
11 | 
12 | .toc {
13 |   ol {
14 |     counter-reset: item;
15 |     position: relative;
16 | 
17 |     & > li:before {
18 |       content: counters(item, '.') '. ';
19 |       display: table-cell;
20 |       padding-right: .8rem;
21 |       width: 2.4rem;
22 |     }
23 | 
24 |     li li:before {
25 |       content: counters(item, '.') ' ';
26 |     }
27 |   }
28 | 
29 |   li {
30 |     counter-increment: item;
31 |     display: table;
32 |     font-weight: 400;
33 |     margin-bottom: .8rem;
34 |     margin-left: 0;
35 |     transition: .3s;
36 |     width: 100%;
37 | 
38 |     li {
39 |       font-weight: 300;
40 |       margin-bottom: 0;
41 |       margin-left: 0;
42 |     }
43 | 
44 |     .toc-page:before {
45 |       content: '';
46 |       display: block;
47 |       left: 0;
48 |       margin-top: 1.8rem;
49 |       position: absolute;
50 |       right: 4rem;
51 |     }
52 | 
53 |     & > a {
54 |       display: inline-block;
55 |       width: 100%;
56 |     }
57 | 
58 |     a:hover span {
59 |       font-weight: 600;
60 |     }
61 | 
62 |     a:hover .toc-page:before {
63 |       border-bottom-width: 2px;
64 |     }
65 |   }
66 | }
67 | 
68 | .chapter {
69 |   display: inline-block;
70 |   font-size: 1.8rem;
71 |   line-height: 3.2rem;
72 |   padding-right: .8rem;
73 | }
74 | 
75 | .toc-page {
76 |   float: right;
77 | }
78 | 


--------------------------------------------------------------------------------
/src/js/utils/scroll-to.js:
--------------------------------------------------------------------------------
 1 | import Easings from './easing';
 2 | 
 3 | let SCROLLABLE_CONTAINER = document.getElementById('webslides');
 4 | 
 5 | /**
 6 |  * Smoothly scrolls to a given Y position using Easing.Swing. It'll run a
 7 |  * callback upon finishing.
 8 |  * @param {number} y Offset of the page to scroll to.
 9 |  * @param {number} duration Duration of the animation. 500ms by default.
10 |  * @param {function} cb Callback function to call upon completion.
11 |  * @param {HTMLElement} container The HTML element where to scroll
12 |  */
13 | export default function scrollTo(
14 |     y, duration = 500, cb = () => {}, container = null) {
15 |   SCROLLABLE_CONTAINER = container ?
16 |       container : document.getElementById('webslides');
17 | 
18 |   const delta = y - SCROLLABLE_CONTAINER.scrollTop;
19 |   const startLocation = SCROLLABLE_CONTAINER.scrollTop;
20 |   const increment = 16;
21 | 
22 |   if (!duration) {
23 |     SCROLLABLE_CONTAINER.scrollTop = y;
24 |     cb();
25 |     return;
26 |   }
27 | 
28 |   const animateScroll = elapsedTime => {
29 |     elapsedTime += increment;
30 |     const percent = Math.min(1, elapsedTime / duration);
31 |     const easingP = Easings.swing(
32 |       percent,
33 |       elapsedTime * percent,
34 |       y,
35 |       delta,
36 |       duration);
37 | 
38 |     SCROLLABLE_CONTAINER.scrollTop = Math.floor(startLocation +
39 |         (easingP * delta));
40 | 
41 |     if (elapsedTime < duration) {
42 |       setTimeout(() => animateScroll(elapsedTime), increment);
43 |     } else {
44 |       cb();
45 |     }
46 |   };
47 | 
48 |   animateScroll(0);
49 | }
50 | 


--------------------------------------------------------------------------------
/src/js/plugins/grid.js:
--------------------------------------------------------------------------------
 1 | import Keys from '../utils/keys';
 2 | 
 3 | const GRID_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAg' +
 4 |   'MAAACdGdVrAAAACVBMVEUAAAAtXsUtXcPDDPUWAAAAA3RSTlMAZmHzZFkxAAAAFklEQVQI12M' +
 5 |   'AA9bBR3ExhAJB1iooBQBGwgVEs/QtuAAAAABJRU5ErkJggg==';
 6 | 
 7 | /**
 8 |  * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
 9 |  */
10 | export default class Grid {
11 |   /**
12 |    * @param {WebSlides} wsInstance The WebSlides instance
13 |    * @constructor
14 |    */
15 |   constructor(wsInstance) {
16 |     /**
17 |      * @type {WebSlides}
18 |      * @private
19 |      */
20 |     this.ws_ = wsInstance;
21 | 
22 |     const CSS = `body.baseline {
23 |                   background: url(${GRID_IMAGE}) left top .8rem/.8rem;
24 |                 }`;
25 |     const head = document.head || document.getElementsByTagName('head')[0];
26 |     const style = document.createElement('style');
27 | 
28 |     style.type = 'text/css';
29 | 
30 |     if (style.styleSheet) {
31 |       style.styleSheet.cssText = CSS;
32 |     } else {
33 |       style.appendChild(document.createTextNode(CSS));
34 |     }
35 | 
36 |     head.appendChild(style);
37 | 
38 |     document.addEventListener('keydown', this.onKeyPress_.bind(this), false);
39 |   }
40 | 
41 |   /**
42 |    * Reacts to the keydown event. It reacts to ENTER key to toggle the class.
43 |    * @param {KeyboardEvent} event The key event.
44 |    * @private
45 |    */
46 |   onKeyPress_(event) {
47 |     if (event.which === Keys.ENTER) {
48 |       document.body.classList.toggle('baseline');
49 |     }
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/scss/modules/_navigation.scss:
--------------------------------------------------------------------------------
 1 | /*=========================================
 2 | 4. Navigation
 3 | =========================================== */
 4 | 
 5 | /*=== 4.1. Navbars === */
 6 | 
 7 | nav ul {
 8 |   display: flex;
 9 |   flex-wrap: wrap;
10 |   /*====align left====*/
11 |   justify-content: flex-start;
12 |   /* ==== align center ====*/
13 |   /*justify-content: center; */
14 |   /*====align right====*/
15 |   /* justify-content: flex-end; */
16 |   /*====separated columns li a====*/
17 |   /* justify-content: space-between; */
18 |   /*====separated columns centered li a====*/
19 |   /*justify-content: space-around;*/
20 | 
21 |   li {
22 |     float: left;
23 |     list-style: none;
24 |     position: relative;
25 |   }
26 | }
27 | 
28 | nav ul li:first-child,
29 | nav[role='navigation'] ul li {
30 |   margin-left: 0;
31 | }
32 | 
33 | nav[role='navigation'] li a {
34 |   display: flex;
35 |   justify-content: center;
36 |   line-height: 4.8rem;
37 |   max-width: 100%;
38 |   padding: 0 1.6rem;
39 |   position: relative;
40 |   text-decoration: none;
41 | 
42 |   svg {
43 |     margin: 1.5rem .4rem 1.5rem 0;
44 |   }
45 | }
46 | 
47 | header nav ul {
48 |   justify-content: flex-end;
49 |   margin: 0;
50 | }
51 | 
52 | nav.aligncenter ul,
53 | .aligncenter nav ul {
54 |   /* ==== align center ====*/
55 |   justify-content: center;
56 | }
57 | 
58 | nav.navbar ul li {
59 |   /*====full float li a ====*/
60 |   flex: 1 1 auto;
61 | }
62 | 
63 | @media (max-width: 568px) {
64 |   nav.navbar ul {
65 |     flex-flow: column wrap;
66 |     padding: 0;
67 |   }
68 | 
69 |   nav.navbar li a {
70 |     justify-content: flex-start;
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/js/plugins/video.js:
--------------------------------------------------------------------------------
 1 | import DOM from '../utils/dom';
 2 | import {default as Slide, Events as SlideEvents} from '../modules/slide';
 3 | 
 4 | /**
 5 |  * Video plugin. Video plugin that allows to autoplay videos once the slide gets
 6 |  * active.
 7 |  */
 8 | export default class Video {
 9 |   /**
10 |    * @param {WebSlides} wsInstance The WebSlides instance.
11 |    * @constructor
12 |    */
13 |   constructor(wsInstance) {
14 |     /**
15 |      * @type {WebSlides}
16 |      * @private
17 |      */
18 |     this.ws_ = wsInstance;
19 | 
20 |     const videos = DOM.toArray(this.ws_.el.querySelectorAll('video'));
21 | 
22 |     if (videos.length) {
23 |       videos.forEach(video => {
24 |         if (!video.hasAttribute('autoplay')) {
25 |           return;
26 |         }
27 | 
28 |         video.removeAttribute('autoplay');
29 |         video.pause();
30 |         video.currentTime = 0;
31 |         const {i} = Slide.getSectionFromEl(video);
32 |         const slide = wsInstance.slides[i - 1];
33 | 
34 |         slide.video = video;
35 | 
36 |         slide.el.addEventListener(SlideEvents.ENABLE, Video.onSectionEnabled);
37 |         slide.el.addEventListener(SlideEvents.DISABLE, Video.onSectionDisabled);
38 |       });
39 |     }
40 |   }
41 | 
42 |   /**
43 |    * On Section enable hook. Will play the video.
44 |    * @param {CustomEvent} event
45 |    */
46 |   static onSectionEnabled(event) {
47 |     event.detail.slide.video.play();
48 |   }
49 | 
50 |   /**
51 |    * On Section enable hook. Will pause the video.
52 |    * @param {CustomEvent} event
53 |    */
54 |   static onSectionDisabled(event) {
55 |     event.detail.slide.video.pause();
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/js/utils/mobile-detector.js:
--------------------------------------------------------------------------------
 1 | const UA = window.navigator.userAgent;
 2 | 
 3 | /**
 4 |  * Mobile detector helper class. Tests the User Agent to see if we're, likely,
 5 |  * on a mobile device.
 6 |  */
 7 | export default class MobileDetector {
 8 |   /**
 9 |    * Whether the device is Android or not.
10 |    * @return {Boolean}
11 |    */
12 |   static isAndroid() {
13 |     return !!UA.match(/Android/i);
14 |   }
15 | 
16 |   /**
17 |    * Whether the device is BlackBerry or not.
18 |    * @return {Boolean}
19 |    */
20 |   static isBlackBerry() {
21 |     return !!UA.match(/BlackBerry/i);
22 |   }
23 | 
24 |   /**
25 |    * Whether the device is iOS or not.
26 |    * @return {Boolean}
27 |    */
28 |   static isiOS() {
29 |     return !!UA.match(/iPad|iPhone|iPod/i);
30 |   }
31 | 
32 |   /**
33 |    * Whether the device is Opera or not.
34 |    * @return {Boolean}
35 |    */
36 |   static isOpera() {
37 |     return !!UA.match(/Opera Mini/i);
38 |   }
39 | 
40 |   /**
41 |    * Whether the device is Windows or not.
42 |    * @return {Boolean}
43 |    */
44 |   static isWindows() {
45 |     return !!UA.match(/IEMobile/i);
46 |   }
47 | 
48 |   /**
49 |    * Whether the device is Windows Phone or not.
50 |    * @return {Boolean}
51 |    */
52 |   static isWindowsPhone() {
53 |     return !!UA.match(/Windows Phone/i);
54 |   }
55 | 
56 |   /**
57 |    * Whether the device is any mobile device or not.
58 |    * @return {Boolean}
59 |    */
60 |   static isAny() {
61 |     return MobileDetector.isAndroid() ||
62 |     MobileDetector.isBlackBerry() ||
63 |     MobileDetector.isiOS() ||
64 |     MobileDetector.isOpera() ||
65 |     MobileDetector.isWindows() ||
66 |     MobileDetector.isWindowsPhone();
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/scss/modules/_flexblock-plans.scss:
--------------------------------------------------------------------------------
 1 | /*===============================================
 2 | 6.8 Plans / Pricing <ul class="flexblock plans">
 3 | ================================================= */
 4 | 
 5 | .flexblock.plans {
 6 |   > li {
 7 |     border-radius: 3px;
 8 |     margin-bottom: 4.8rem;
 9 |     text-align: center;
10 |     z-index: 1;
11 |   }
12 | 
13 |   li,
14 |   &.blink li>a {
15 |     padding: 0;
16 |   }
17 | 
18 |   &.blink li > a div,
19 |   li div {
20 |     padding-bottom: 3.2rem;
21 |   }
22 | 
23 |   li p,
24 |   li h2 {
25 |     padding: .8rem 3.2rem;
26 |   }
27 | 
28 |   li h2 {
29 |     float: left;
30 |     font-weight: 400;
31 |     letter-spacing: .1rem;
32 |     text-transform: uppercase;
33 |     width: 100%;
34 |   }
35 | 
36 |   .price {
37 |     clear: both;
38 |     display: block;
39 |     font-size: 4.8rem;
40 |     font-weight: 400;
41 |     line-height: 6.2rem;
42 |     padding: 2.4rem;
43 | 
44 |     sup {
45 |       font-size: 1.8rem;
46 |       margin-right: .4rem;
47 |     }
48 | 
49 |     li ul {
50 |       margin-bottom: 2.4rem;
51 |     }
52 |   }
53 | 
54 |   li ul li {
55 |     display: block;
56 |     padding: .8rem 3.2rem;
57 |     text-align: left;
58 |     width: 100%;
59 |   }
60 | 
61 | 
62 |   @media (min-width: 1024px) {
63 |     margin-left: -2%;
64 |     margin-right: -2%;
65 | 
66 |     >li {
67 |       margin-left: 2%;
68 |       margin-right: 2%;
69 |       width: 29%;
70 |     }
71 | 
72 |     >li:hover,
73 |     >li:nth-child(2) {
74 |       position: relative;
75 |       transform: scale(1.08);
76 |       z-index: 2;
77 |     }
78 | 
79 |     &:hover li:nth-child(2):not(:hover) {
80 |       position: relative;
81 |       transform: scale(1);
82 |       z-index: 1;
83 |     }
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/scss/modules/_promos.scss:
--------------------------------------------------------------------------------
 1 | /*=============================================
 2 | 7. Promos/Offers (pricing, tagline, CTA...)
 3 | =============================================== */
 4 | 
 5 | .cta {
 6 |   display: flex;
 7 |   flex-wrap: wrap;
 8 |   justify-content: center;
 9 | }
10 | 
11 | .number,
12 | .cta .benefit {
13 |   display: flex;
14 |   flex-direction: column;
15 |   justify-content: center;
16 |   max-width: 100%;
17 |   padding: .8rem;
18 | }
19 | 
20 | .number {
21 |   text-align: center;
22 | }
23 | 
24 | .cta .benefit {
25 |   max-width: 100%;
26 |   text-align: center;
27 | }
28 | 
29 | .number span {
30 |   display: block;
31 |   font-size: 8rem;
32 |   line-height: 8rem;
33 | }
34 | 
35 | .number span sup {
36 |   font-size: 4rem;
37 | }
38 | 
39 | .cta p {
40 |   margin-bottom: 0;
41 | }
42 | 
43 | @media (min-width: 768px) {
44 |   .number,
45 |   .cta .benefit {
46 |     max-width: 50%;
47 |     padding: 4.8rem;
48 |   }
49 | 
50 |   .cta .benefit {
51 |     text-align: left;
52 |   }
53 | 
54 |   .number span {
55 |     font-size: 16rem;
56 |     line-height: 16rem;
57 | 
58 |     sup {
59 |       font-size: 6rem;
60 |       vertical-align: middle;
61 |     }
62 |   }
63 | }
64 | 
65 | /* --- Header CTA --- */
66 | .cta-cover {
67 |   display: table;
68 |   width: 100%;
69 | 
70 |   h1 strong {
71 |     font-weight: 400;
72 |   }
73 | 
74 |   @media (min-width: 1024px) {
75 |     h1 {
76 |       float: left;
77 |       max-width: 80%;
78 |     }
79 | 
80 |     h1 strong {
81 |       display: block;
82 |     }
83 | 
84 |     .button {
85 |       margin-top: 1.2rem;
86 |     }
87 | 
88 |     .try {
89 |       text-align: center;
90 |     }
91 |   }
92 | 
93 |   @media (max-width: 1023px) {
94 |     .alignright {
95 |       float: none;
96 |     }
97 |   }
98 | }
99 | 


--------------------------------------------------------------------------------
/src/scss/_vars.scss:
--------------------------------------------------------------------------------
 1 | // sass-lint:disable no-color-literals
 2 | 
 3 | // =========
 4 | // Colors. Names from http://chir.ag/projects/name-that-color/
 5 | // =========
 6 | $black: #000;
 7 | $white: #fff;
 8 | $mine-shaft: #333;
 9 | $royal-blue: #44d;
10 | $havelock-blue: #67d;
11 | $catskill-white: #f7f9fb;
12 | $cod-gray: #111;
13 | $big-stone: #123;
14 | $rhino: #346;
15 | $athens-gray: #f8f8f9;
16 | $mischka: #d5d9e2;
17 | $pine-green: #077;
18 | $purple-heart: #62b;
19 | $cardinal: #c23;
20 | $mirage: #1a2028;
21 | $pickled-bluewood: #293845;
22 | $facebook: #3b5998;
23 | $spindle: #bce;
24 | $dodger-blue: #3af;
25 | $pattens-blue: #def;
26 | $stratos: #001450;
27 | $gray-brown: #f9f8f2;
28 | 
29 | $bg-colors: (
30 |   'primary': $royal-blue,
31 |   'secondary': $havelock-blue,
32 |   'light': $catskill-white,
33 |   'black': $cod-gray,
34 |   'black-blue': $big-stone,
35 |   'blue': $rhino,
36 |   'brown': $gray-brown,
37 |   'gray': $mischka,
38 |   'green': $pine-green,
39 |   'purple': $purple-heart,
40 |   'red': $cardinal,
41 |   'white': $white,
42 |   // Branding
43 |   'facebook': $facebook
44 | ) !default;
45 | 
46 | $social-nav: (
47 |   'twitter': #1da1f3,
48 |   'facebook': $facebook,
49 |   'linkedin': #1683bb,
50 |   'dribbble': #ea4c89,
51 |   'github': #60b044,
52 |   'email': #dd4b39
53 | ) !default;
54 | 
55 | $body-color: $mine-shaft !default;
56 | $body-bg: $catskill-white !default;
57 | $focus-box-shadow: 0 0 2px rgba(150, 187, 238, 1) !default;
58 | $link-color: $royal-blue !default;
59 | $link-color-secondary: $cardinal !default;
60 | $link-hover: $dodger-blue !default;
61 | $hr-bg: radial-gradient(ellipse at center, rgba(0, 20, 80, .2) 0, rgba(255, 255, 255, 0) 75%) !default;
62 | $current-zoomed-slide-shadow: 0 0 7px rgba(0, 187, 255, .5);
63 | $index-overlay: rgba(0, 10, 40, .8);
64 | 


--------------------------------------------------------------------------------
/test/utils/hash.test.js:
--------------------------------------------------------------------------------
 1 | import DOM from '../../src/js/utils/dom';
 2 | import Hash from '../../src/js/plugins/hash';
 3 | 
 4 | describe('Hash utility', () => {
 5 |   document.body.innerHTML =
 6 |       `<div id="webslides" data-test="test"><p>Text</p></div>`;
 7 | 
 8 |   document.location.hash = '#slide=1';
 9 |   const goto = jest.fn();
10 |   const ws = document.getElementById('webslides');
11 | 
12 | 
13 |   const webslides = {
14 |     options: {
15 |       changeOnClick: true
16 |     },
17 |     goToSlide: goto,
18 |     el: ws
19 |   };
20 | 
21 |   test('Make sure it has not changed the slide', () => {
22 |     expect(goto).not.toBeCalled();
23 |   });
24 | 
25 |   new Hash(webslides);
26 | 
27 |   test('Move to slide 1', () => {
28 |     expect(Hash.getSlideNumber()).toBe(0);
29 |     DOM.fireEvent(ws, 'ws:slide-change', {
30 |       slides: 3,
31 |       currentSlide0: 1,
32 |       currentSlide: 2
33 |     });
34 |     expect(Hash.getSlideNumber()).toBe(1);
35 |     expect(document.location.hash).toBe('#slide=2');
36 | 
37 |     DOM.fireEvent(window, 'hashchange');
38 |     expect(goto.mock.calls.length).toBe(1);
39 |   });
40 | 
41 |   test('Forces slide change', () => {
42 |     Hash.setSlideNumber(5);
43 |     const state = history.state;
44 |     expect(state.slideI).toBe(4);
45 |   });
46 | 
47 |   test('Wrong hash', () => {
48 |     document.location.hash = 'slide=NaN';
49 |     DOM.fireEvent(window, 'hashchange');
50 |     // It shouldn't be call.
51 |     expect(goto.mock.calls.length).toBe(1);
52 |     expect(Hash.getSlideNumber()).toBe(null);
53 |   });
54 | 
55 |   test('Repeat slide change', () => {
56 |     Hash.setSlideNumber(5);
57 |     let state = history.state;
58 |     expect(state.slideI).toBe(4);
59 |     Hash.setSlideNumber(5);
60 |     state = history.state;
61 |     expect(state.slideI).toBe(4);
62 |   });
63 | });
64 | 


--------------------------------------------------------------------------------
/test/plugins/scroll.test.js:
--------------------------------------------------------------------------------
 1 | import Scroll from '../../src/js/plugins/scroll';
 2 | 
 3 | jest.useFakeTimers();
 4 | 
 5 | // Copy of DOM.fireEvent, but using wheel deltas
 6 | const fireEvent = (target, eventType, deltaX, deltaY) => {
 7 |   const event = new CustomEvent(eventType);
 8 |   event.deltaX = deltaX;
 9 |   event.deltaY = deltaY;
10 |   event.deltaMode = 0;
11 | 
12 |   target.dispatchEvent(event);
13 | };
14 | 
15 | beforeAll(() => {
16 |   const brs = '<br />'.repeat(20);
17 |   document.body.innerHTML = `<div id="webslides">${brs}</div>`;
18 | });
19 | 
20 | test('Scroll utility', () => {
21 |   // Forces mobile detection
22 |   window.navigator = {
23 |     userAgent: 'Android'
24 |   };
25 |   const ws = document.getElementById('webslides');
26 |   const next = jest.fn();
27 |   const prev = jest.fn();
28 | 
29 |   let disabled = true;
30 |   const webslides = {
31 |     el: ws,
32 |     isDisabled: () => disabled,
33 |     isMoving: false,
34 |     isVertical: false,
35 |     goNext: next,
36 |     goPrev: prev,
37 |     options: {
38 |       navigateOnScroll: true,
39 |       scrollWait: 200,
40 |       minWheelDelta: 50
41 |     }
42 |   };
43 | 
44 |   new Scroll(webslides);
45 |   fireEvent(ws, 'wheel', 300, 200);
46 | 
47 |   expect(next).not.toBeCalled();
48 |   expect(prev).not.toBeCalled();
49 | 
50 |   // Wait until next execution
51 |   jest.runTimersToTime(201);
52 |   expect(next.mock.calls.length).toBe(0);
53 |   expect(prev.mock.calls.length).toBe(0);
54 | 
55 |   disabled = false;
56 |   fireEvent(ws, 'wheel', 300, 200);
57 | 
58 |   jest.runTimersToTime(201);
59 |   expect(next.mock.calls.length).toBe(1);
60 |   expect(prev.mock.calls.length).toBe(0);
61 | 
62 |   fireEvent(ws, 'wheel', -200, -300);
63 | 
64 |   jest.runTimersToTime(201);
65 |   expect(next.mock.calls.length).toBe(1);
66 |   expect(prev.mock.calls.length).toBe(1);
67 | });
68 | 


--------------------------------------------------------------------------------
/src/js/plugins/autoslide.js:
--------------------------------------------------------------------------------
 1 | import DOM from '../utils/dom';
 2 | 
 3 | /**
 4 |  * Autoslide plugin.
 5 |  */
 6 | export default class AutoSlide {
 7 |   /**
 8 |    * @param {WebSlides} wsInstance The WebSlides instance
 9 |    * @constructor
10 |    */
11 |   constructor(wsInstance) {
12 |     /**
13 |      * @type {WebSlides}
14 |      * @private
15 |      */
16 |     this.ws_ = wsInstance;
17 |     /**
18 |      * Interval ID reference for the autoslide.
19 |      * @type {?number}
20 |      * @private
21 |      */
22 |     this.interval_ = null;
23 |     /**
24 |      * Internal stored time.
25 |      * @type {?number}
26 |      */
27 |     this.time = this.ws_.options.autoslide;
28 | 
29 |     if (this.time) {
30 |       DOM.once(wsInstance.el, 'ws:init', this.play.bind(this));
31 |       document.body.addEventListener('focus', this.onFocus.bind(this));
32 |     }
33 |   }
34 | 
35 |   /**
36 |    * On focus handler. Will decide if stops/play depending on the focused
37 |    * element if autoslide is active.
38 |    */
39 |   onFocus() {
40 |     if (DOM.isFocusableElement()) {
41 |       this.stop();
42 |     } else if (this.interval_ === null) {
43 |       this.play();
44 |     }
45 |   }
46 | 
47 |   /**
48 |    * Starts autosliding all the slides if it's not currently doing it and the
49 |    * autoslide option was a number greater than 0.
50 |    * @param {?number=} time Amount of milliseconds to wait to go to next slide
51 |    * automatically.
52 |    */
53 |   play(time) {
54 |     if (typeof time !== 'number') {
55 |       time = this.time;
56 |     }
57 | 
58 |     this.time = time;
59 | 
60 |     if (!this.interval_ && typeof time === 'number' && time > 0) {
61 |       this.interval_ = setInterval(this.ws_.goNext.bind(this.ws_), time);
62 |     }
63 |   }
64 | 
65 |   /**
66 |    * Stops autosliding all the slides.
67 |    */
68 |   stop() {
69 |     if (this.interval_) {
70 |       clearInterval(this.interval_);
71 |       this.interval_ = null;
72 |     }
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/src/scss/utils/_animations.scss:
--------------------------------------------------------------------------------
  1 | /* === 1.2 Animations ================
  2 | Just 5 basic animations:
  3 | .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight
  4 | https://github.com/daneden/animate.css */
  5 | 
  6 | /*-- fadeIn -- */
  7 | 
  8 | @keyframes fadeIn {
  9 |   from {
 10 |     opacity: 0;
 11 |   }
 12 | 
 13 |   to {
 14 |     opacity: 1;
 15 |   }
 16 | }
 17 | 
 18 | .fadeIn {
 19 |   animation: fadeIn 1s;
 20 | }
 21 | 
 22 | /*-- fadeInUp -- */
 23 | @keyframes fadeInUp {
 24 |   from {
 25 |     opacity: 0;
 26 |     transform: translate3d(0, 100%, 0);
 27 |   }
 28 | 
 29 |   to {
 30 |     opacity: 1;
 31 |     transform: none;
 32 |   }
 33 | }
 34 | 
 35 | .fadeInUp {
 36 |   animation: fadeInUp 1s;
 37 | }
 38 | 
 39 | /*-- zoomIn -- */
 40 | @keyframes zoomIn {
 41 |   from {
 42 |     transform: scale3d(.3, .3, .3);
 43 |   }
 44 | 
 45 |   50% {
 46 |     opacity: 1;
 47 |   }
 48 | }
 49 | 
 50 | .zoomIn {
 51 |   animation: zoomIn 1s;
 52 | }
 53 | 
 54 | /*-- slideInLeft -- */
 55 | @keyframes slideInLeft {
 56 |   from {
 57 |     transform: translate3d(-100%, 0, 0);
 58 |     visibility: visible;
 59 |   }
 60 | 
 61 |   to {
 62 |     transform: translate3d(0, 0, 0);
 63 |   }
 64 | }
 65 | 
 66 | .slideInLeft {
 67 |   animation: slideInLeft 1s;
 68 |   animation-fill-mode: both;
 69 | }
 70 | 
 71 | /*-- slideInRight -- */
 72 | @keyframes slideInRight {
 73 |   from {
 74 |     transform: translate3d(100%, 0, 0);
 75 |     visibility: visible;
 76 |   }
 77 | 
 78 |   to {
 79 |     transform: translate3d(0, 0, 0);
 80 |   }
 81 | }
 82 | 
 83 | .slideInRight {
 84 |   animation: slideInRight 1s;
 85 |   animation-fill-mode: both;
 86 | }
 87 | 
 88 | /* Animated Background (Matrix) */
 89 | @keyframes anim {
 90 |   0% {
 91 |     transform: translateY(0);
 92 |   }
 93 | 
 94 |   100% {
 95 |     transform: translateY(-1200px);
 96 |   }
 97 | }
 98 | 
 99 | /* Duration */
100 | .slow {
101 |   animation-duration: 4s;
102 | 
103 |   & + & {
104 |     animation-duration: 5s;
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------
/src/scss/modules/_flexblock.scss:
--------------------------------------------------------------------------------
  1 | /*===============================================================
  2 | 6. Magic blocks with flexbox (Auto-fill & Equal Height)
  3 | Blocks Links li>a = .flexblock.blink (.blink required)
  4 | ================================================================= */
  5 | 
  6 | .flexblock {
  7 |   clear: both;
  8 |   display: flex;
  9 |   flex-wrap: wrap;
 10 |   margin-left: auto;
 11 |   margin-right: auto;
 12 |   padding: 0;
 13 | 
 14 |   &:after {
 15 |     clear: both;
 16 |   }
 17 | 
 18 |   &:before {
 19 |     content: '';
 20 |     display: table;
 21 |   }
 22 | 
 23 |   li,
 24 |   &.blink li > a {
 25 |     display: flex;
 26 |     flex-direction: column;
 27 |     margin: 0;
 28 |     padding: 2.4rem;
 29 |     position: relative;
 30 |   }
 31 | 
 32 |   li {
 33 |     flex: auto;
 34 |     text-align: left;
 35 |     transition: .3s;
 36 |     width: 100%;
 37 | 
 38 |     &:hover {
 39 |       transform: translateY(-.2rem);
 40 |     }
 41 | 
 42 |     @media (min-width: 600px) {
 43 |       width: 50%;
 44 |     }
 45 | 
 46 |     @media (min-width: 1024px) {
 47 |       width: 25%;
 48 |     }
 49 |   }
 50 | 
 51 |   &.aligncenter li {
 52 |     text-align: center;
 53 |   }
 54 | 
 55 |   &.vertical-align li {
 56 |     justify-content: center;
 57 |   }
 58 | 
 59 |   &.blink li {
 60 |     padding: 0;
 61 |   }
 62 | 
 63 |   li h2 svg,
 64 |   li h3 svg {
 65 |     margin-top: 0;
 66 |   }
 67 | }
 68 | 
 69 | h1 + .flexblock,
 70 | h2 + .flexblock,
 71 | h3 + .flexblock,
 72 | div + ul,
 73 | div + ol {
 74 |   margin-top: 3.2rem;
 75 | }
 76 | 
 77 | .flexblock li h2,
 78 | .flexblock li h3,
 79 | footer .column h2,
 80 | footer .column h3 {
 81 |   font-size: 1.8rem;
 82 |   font-weight: 600;
 83 |   line-height: 3.2rem;
 84 |   margin-bottom: 0;
 85 | }
 86 | 
 87 | .flexblock li li,
 88 | .flexblock.blink li li {
 89 |   padding: 0;
 90 |   width: 100%;
 91 | }
 92 | 
 93 | [class*='content-'] .flexblock li p {
 94 |   font-size: 1.8rem;
 95 |   line-height: 3.2rem;
 96 | }
 97 | 
 98 | .content-right .flexblock.features li,
 99 | .content-left .flexblock.features li {
100 |   width: 46%;
101 | }
102 | 


--------------------------------------------------------------------------------
/src/scss/modules/_work.scss:
--------------------------------------------------------------------------------
  1 | /*=========================================
  2 | 8. Work/Resumé/CV <ul class="work">
  3 | =========================================== */
  4 | .work {
  5 |   clear: both;
  6 |   display: flex;
  7 |   flex-direction: column;
  8 |   text-align: left;
  9 | 
 10 |   h1 + &,
 11 |   h2 + &,
 12 |   h3 + &,
 13 |   p + & {
 14 |     margin-top: 4.8rem;
 15 |   }
 16 | 
 17 |   li {
 18 |     flex: 1;
 19 |     list-style: none;
 20 |     margin: 0;
 21 |     position: relative;
 22 |   }
 23 | 
 24 |   p {
 25 |     margin-bottom: 0;
 26 |     transition: .3s;
 27 |   }
 28 | 
 29 |   li a {
 30 |     display: block;
 31 |     float: left;
 32 |     height: 100%;
 33 |     padding: 2.4rem 0;
 34 |     width: 100%;
 35 |   }
 36 | 
 37 |   li p {
 38 |     padding-left: 1.2rem;
 39 |   }
 40 | 
 41 |   li.work-label p {
 42 |     padding-left: 0;
 43 |   }
 44 | 
 45 |   li a:hover p:first-child {
 46 |     padding-left: 1.6rem;
 47 |   }
 48 | 
 49 |   li p:last-child {
 50 |     position: absolute;
 51 |     right: 1.2rem;
 52 |     top: 2.4rem;
 53 |   }
 54 | 
 55 |   li.work-label p:last-child {
 56 |     right: 0;
 57 |     top: 0;
 58 |   }
 59 | 
 60 |   &-label {
 61 |     float: left;
 62 |     font-weight: 600;
 63 |     padding: 0 0 2.4rem;
 64 |     width: 100%;
 65 |   }
 66 | 
 67 |   &-title {
 68 |     display: block;
 69 |     padding-right: 1.2rem;
 70 |     width: 75%;
 71 |   }
 72 | }
 73 | 
 74 | @media (min-width: 768px) {
 75 |   .work-label p,
 76 |   .work li p {
 77 |     float: left;
 78 |     margin-right: 2%;
 79 |     width: 25%;
 80 |   }
 81 | 
 82 |   .work li.work-label p:last-child,
 83 |   .work li p:last-child {
 84 |     float: right;
 85 |     margin-right: 0;
 86 |     padding-right: 1.2rem;
 87 |     position: relative;
 88 |     right: auto;
 89 |     text-align: right;
 90 |     top: auto;
 91 |   }
 92 | 
 93 |   .work li p.work-date {
 94 |     width: 120px;
 95 |   }
 96 | }
 97 | 
 98 | @media (max-width: 768px) {
 99 |   .work-client,
100 |   .work-label .work-services {
101 |     clip: rect(1px, 1px, 1px, 1px);
102 |     height: 1px;
103 |     overflow: hidden;
104 |     position: absolute;
105 |     width: 1px;
106 |   }
107 | }
108 | 


--------------------------------------------------------------------------------
/test/plugins/navigation.test.js:
--------------------------------------------------------------------------------
 1 | import DOM from '../../src/js/utils/dom';
 2 | import Navigation from '../../src/js/plugins/navigation';
 3 | 
 4 | beforeAll(() => {
 5 |   document.body.innerHTML = `<div id="webslides"></div>`;
 6 | });
 7 | 
 8 | test('Navigation plugin', () => {
 9 |   const ws = document.getElementById('webslides');
10 | 
11 |   const zoom = jest.fn();
12 |   const next = jest.fn();
13 |   const prev = jest.fn();
14 |   const webslides = {
15 |     el: ws,
16 |     goNext: next,
17 |     goPrev: prev,
18 |     toggleZoom: zoom,
19 |     options: {showIndex: true}
20 |   };
21 | 
22 |   const fakeArrow = Navigation.createArrow('arrow', 'Test');
23 |   expect(fakeArrow.tagName).toBe('A');
24 |   expect(fakeArrow.title).toBe('Arrow Keys');
25 |   expect(fakeArrow.id).toBe('arrow');
26 |   expect(fakeArrow.textContent).toBe('Test');
27 | 
28 |   const fakeCounter = Navigation.createCounter('counter', webslides);
29 |   expect(fakeCounter.tagName).toBe('SPAN');
30 |   expect(fakeCounter.childNodes.length).toBe(1);
31 |   expect(fakeCounter.childNodes[0].tagName).toBe('A');
32 |   expect(fakeCounter.childNodes[0].href).toBe('http://localhost/#');
33 |   expect(fakeCounter.childNodes[0].title).toBe('View all slides');
34 | 
35 |   new Navigation(webslides);
36 | 
37 |   const navElem = ws.querySelector('#navigation');
38 |   const counter = navElem.querySelector('#counter');
39 |   const nextElem = navElem.querySelector('#next');
40 |   const prevElem = navElem.querySelector('#previous');
41 |   expect(navElem).not.toBe(null);
42 |   expect(counter).not.toBe(null);
43 |   expect(nextElem).not.toBe(null);
44 |   expect(prevElem).not.toBe(null);
45 | 
46 |   DOM.fireEvent(ws, 'ws:slide-change', {
47 |     slides: 3,
48 |     currentSlide0: 1,
49 |     currentSlide: 2
50 |   });
51 |   expect(counter.textContent).toBe('2 / 3');
52 | 
53 |   expect(next.mock.calls.length).toBe(0);
54 |   expect(prev.mock.calls.length).toBe(0);
55 |   expect(zoom.mock.calls.length).toBe(0);
56 | 
57 |   DOM.fireEvent(nextElem, 'click');
58 |   expect(next.mock.calls.length).toBe(1);
59 | 
60 |   DOM.fireEvent(prevElem, 'click');
61 |   expect(prev.mock.calls.length).toBe(1);
62 | 
63 |   DOM.fireEvent(counter, 'click');
64 |   expect(zoom.mock.calls.length).toBe(1);
65 | });
66 | 


--------------------------------------------------------------------------------
/src/js/plugins/hash.js:
--------------------------------------------------------------------------------
 1 | const HASH = '#slide';
 2 | const slideRegex = /#slide=(\d+)/;
 3 | 
 4 | /**
 5 |  * Static class with methods to manipulate and extract info from the hash of
 6 |  * the URL.
 7 |  */
 8 | export default class Hash {
 9 |   /**
10 |    * @param {WebSlides} wsInstance
11 |    * @constructor
12 |    */
13 |   constructor(wsInstance) {
14 |     this.ws_ = wsInstance;
15 | 
16 |     wsInstance.el.addEventListener('ws:slide-change', Hash.onSlideChange_);
17 |     window.addEventListener('hashchange', this.onHashChange_.bind(this), false);
18 |   }
19 | 
20 |   /**
21 |    * hashchange event handler, makes the WebSlide instance navigate to the
22 |    * needed slide.
23 |    */
24 |   onHashChange_() {
25 |     const newSlideIndex = Hash.getSlideNumber();
26 | 
27 |     if (newSlideIndex !== null) {
28 |       this.ws_.goToSlide(newSlideIndex);
29 |     }
30 |   }
31 | 
32 |   /**
33 |    * Handler for the slide change event which updates the slide on the hash.
34 |    * @param {Event} event
35 |    * @private
36 |    */
37 |   static onSlideChange_(event) {
38 |     Hash.setSlideNumber(event.detail.currentSlide);
39 |   }
40 | 
41 |   /**
42 |    * Gets the slide number from the hash by a regex matching `#slide=` and gets
43 |    * the number after it. If the number is invalid or less than 0, it will
44 |    * return null as an invalid value.
45 |    * @return {?number}
46 |    */
47 |   static getSlideNumber() {
48 |     const results = document.location.hash.match(slideRegex);
49 |     let slide = 0;
50 | 
51 |     if (Array.isArray(results)) {
52 |       slide = parseInt(results[1], 10);
53 |     }
54 | 
55 |     if (typeof slide !== 'number' || slide < 0 || !Array.isArray(results)) {
56 |       slide = null;
57 |     } else {
58 |       slide--; // Convert to 0 index
59 |     }
60 | 
61 |     return slide;
62 |   }
63 | 
64 |   /**
65 |    * It will update the hash (if it's different) so it reflects the slide
66 |    * number being visible.
67 |    * @param {number} number The number of the slide we're transitioning to.
68 |    */
69 |   static setSlideNumber(number) {
70 |     if (Hash.getSlideNumber() !== (number - 1)) {
71 |       history.pushState({
72 |         slideI: number - 1
73 |       }, `Slide ${number}`, `${HASH}=${number}`);
74 |     }
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/.sass-lint.yml:
--------------------------------------------------------------------------------
 1 | files:
 2 |   include: 'src/scss/**/*.scss'
 3 | options:
 4 |   formatter: stylish
 5 |   merge-default-rules: false
 6 | rules:
 7 |   # Extends
 8 |   extends-before-mixins: 2
 9 |   extends-before-declarations: 2
10 |   placeholder-in-extend: 2
11 | 
12 |   # Mixins
13 |   mixins-before-declarations: 2
14 | 
15 |   # Line Spacing
16 |   one-declaration-per-line: 2
17 |   empty-line-between-blocks: 2
18 |   single-line-per-selector: 2
19 | 
20 |   # Disallows
21 |   no-attribute-selectors: 0
22 |   no-color-hex: 0
23 |   no-color-keywords: 2
24 |   no-color-literals: 2
25 |   no-combinators: 0
26 |   no-debug: 2
27 |   no-disallowed-properties: 0
28 |   no-duplicate-properties: 2
29 |   no-empty-rulesets: 2
30 |   no-extends: 0
31 |   no-ids: 0
32 |   no-important: 2
33 |   no-invalid-hex: 2
34 |   no-mergeable-selectors: 2
35 |   no-misspelled-properties: 2
36 |   no-qualifying-elements: 0
37 |   no-trailing-whitespace: 2
38 |   no-trailing-zero: 2
39 |   no-transition-all: 0
40 |   no-universal-selectors: 0
41 |   no-url-domains: 0
42 |   no-url-protocols: 0
43 |   no-vendor-prefixes: 2
44 |   no-warn: 2
45 |   property-units: 0
46 | 
47 |   # Nesting
48 |   declarations-before-nesting: 2
49 |   force-attribute-nesting: 0
50 |   force-element-nesting: 0
51 |   force-pseudo-nesting: 0
52 | 
53 |   # Name Formats
54 |   class-name-format: 0
55 |   function-name-format: 2
56 |   id-name-format: 0
57 |   mixin-name-format: 2
58 |   placeholder-name-format: 2
59 |   variable-name-format: 2
60 | 
61 |   # Style Guide
62 |   attribute-quotes: 2
63 |   bem-depth: 0
64 |   border-zero: 2
65 |   brace-style: 2
66 |   clean-import-paths: 2
67 |   empty-args: 2
68 |   hex-length: 2
69 |   hex-notation: 2
70 |   indentation: 2
71 |   leading-zero: 2
72 |   max-line-length: 0
73 |   max-file-line-count: 0
74 |   nesting-depth: 2
75 |   property-sort-order: 2
76 |   pseudo-element: 0
77 |   quotes: 2
78 |   shorthand-values: 2
79 |   url-quotes: 2
80 |   variable-for-property: 0
81 |   zero-unit: 2
82 | 
83 |   # Inner Spacing
84 |   space-after-comma: 2
85 |   space-before-colon: 2
86 |   space-after-colon: 2
87 |   space-before-brace: 2
88 |   space-before-bang: 2
89 |   space-after-bang: 2
90 |   space-between-parens: 2
91 |   space-around-operator: 2
92 | 
93 |   # Final Items
94 |   trailing-semicolon: 2
95 |   final-newline: 2
96 | 


--------------------------------------------------------------------------------
/test/plugins/zoom.test.js:
--------------------------------------------------------------------------------
 1 | import Zoom from '../../src/js/plugins/zoom';
 2 | import DOM from '../../src/js/utils/dom';
 3 | 
 4 | jest.useFakeTimers();
 5 | 
 6 | // Copy of DOM.fireEvent, but using keydown
 7 | const simulateKeyEvent = (el, code) => {
 8 |   const evt = new KeyboardEvent('keydown', {
 9 |     bubbles: true,
10 |     cancelableCode: true,
11 |     which: code,
12 |     shiftKey: true});
13 |   el.dispatchEvent(evt);
14 | };
15 | 
16 | beforeAll(() => {
17 |   const slides = '12345'.replace(/(\d)/g,
18 |       '<div id="section-$1" class="slide"><div>Slide $1</div></div>')
19 |       .replace('section-1" class="', 'section-1" class="current ');
20 |   document.body.innerHTML = `<div id="webslides">${slides}</div>`;
21 | });
22 | 
23 | test('Zoom utility', () => {
24 |   const ws = document.getElementById('webslides');
25 |   const slides = ws.querySelectorAll('.slide');
26 |   const goto = jest.fn();
27 |   const enable = jest.fn();
28 |   const disable = jest.fn();
29 | 
30 |   const webslides = {
31 |     el: ws,
32 |     slides: [],
33 |     goToSlide: goto,
34 |     enable: enable,
35 |     disable: disable,
36 |     options: {showIndex: true}
37 |   };
38 |   slides.forEach(slide => webslides.slides.push({el: slide}));
39 |   webslides.currentSlide_ = webslides.slides[0];
40 | 
41 |   new Zoom(webslides);
42 | 
43 |   const zws = document.querySelector('#webslides-zoomed');
44 |   const zoomSlides = zws.querySelectorAll('.slide');
45 | 
46 |   expect(zws).not.toBe(null);
47 |   expect(zws.className).toMatch('disable');
48 |   expect(slides.length).toBe(zoomSlides.length);
49 |   expect(zws.childNodes[0].className).toBe('wrap');
50 |   expect(zws.childNodes[0].childNodes[0].className).toBe('grid');
51 | 
52 |   simulateKeyEvent(document.body, 109);
53 | 
54 |   expect(zws.className).not.toMatch('disable');
55 | 
56 | 
57 |   // Wait until next execution
58 |   jest.runTimersToTime(600);
59 |   expect(disable.mock.calls.length).toBe(1);
60 |   expect(enable.mock.calls.length).toBe(0);
61 |   expect(goto.mock.calls.length).toBe(0);
62 | 
63 |   DOM.fireEvent(zws.querySelector('.zoom-layer'), 'click');
64 | 
65 |   // Wait until next execution
66 |   jest.runTimersToTime(401);
67 |   expect(disable.mock.calls.length).toBe(1);
68 |   expect(enable.mock.calls.length).toBe(1);
69 |   expect(goto.mock.calls.length).toBe(1);
70 | });
71 | 


--------------------------------------------------------------------------------
/src/js/plugins/keyboard.js:
--------------------------------------------------------------------------------
 1 | import Keys from '../utils/keys';
 2 | import DOM from '../utils/dom';
 3 | 
 4 | /**
 5 |  * Keyboard interaction plugin.
 6 |  */
 7 | export default class Keyboard {
 8 |   /**
 9 |    * @param {WebSlides} wsInstance The WebSlides instance
10 |    * @constructor
11 |    */
12 |   constructor(wsInstance) {
13 |     /**
14 |      * @type {WebSlides}
15 |      * @private
16 |      */
17 |     this.ws_ = wsInstance;
18 | 
19 |     document.addEventListener('keydown', this.onKeyPress_.bind(this), false);
20 |   }
21 | 
22 |   /**
23 |    * Reacts to the keydown event. It reacts to the arrows and space key
24 |    * depending on the layout of the page.
25 |    * @param {KeyboardEvent} event The key event.
26 |    * @private
27 |    */
28 |   onKeyPress_(event) {
29 |     let method;
30 |     let argument;
31 | 
32 |     if (DOM.isFocusableElement() || this.ws_.isDisabled()) {
33 |       return;
34 |     }
35 | 
36 |     switch (event.which) {
37 |       case Keys.AV_PAGE:
38 |         method = this.ws_.goNext;
39 |         break;
40 |       case Keys.SPACE:
41 |         if (event.shiftKey) {
42 |           method = this.ws_.goPrev;
43 |         } else {
44 |           method = this.ws_.goNext;
45 |         }
46 |         break;
47 |       case Keys.RE_PAGE:
48 |         method = this.ws_.goPrev;
49 |         break;
50 |       case Keys.HOME:
51 |         method = this.ws_.goToSlide;
52 |         argument = 0;
53 |         break;
54 |       case Keys.END:
55 |         method = this.ws_.goToSlide;
56 |         argument = this.ws_.maxSlide_ - 1;
57 |         break;
58 |       case Keys.DOWN:
59 |         method = this.ws_.isVertical ? this.ws_.goNext : null;
60 |         break;
61 |       case Keys.UP:
62 |         method = this.ws_.isVertical ? this.ws_.goPrev : null;
63 |         break;
64 |       case Keys.LEFT:
65 |         method = !this.ws_.isVertical ? this.ws_.goPrev : null;
66 |         break;
67 |       case Keys.RIGHT:
68 |         method = !this.ws_.isVertical ? this.ws_.goNext : null;
69 |         break;
70 |       case Keys.F:
71 |         if (!event.metaKey && ! event.ctrlKey) {
72 |           method = this.ws_.fullscreen;
73 |         }
74 | 
75 |         break;
76 |     }
77 | 
78 |     if (method) {
79 |       method.call(this.ws_, argument);
80 |       // Prevents Firefox key events.
81 |       event.preventDefault();
82 |     }
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/static/images/logos/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="76px" height="76px" viewBox="0 0 76 76" enable-background="new 0 0 76 76" xml:space="preserve">  <image id="image0" width="76" height="76" x="0" y="0"
 4 |     xlink:href="data:image/png;base64,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
30 | ZTwAAAAASUVORK5CYII=" />
31 | </svg>
32 | 


--------------------------------------------------------------------------------
/src/scss/modules/_slides.scss:
--------------------------------------------------------------------------------
  1 | /*============================================
  2 | 5. SLIDES (Full Screen)
  3 | Vertically and horizontally centered
  4 | ============================================== */
  5 | 
  6 | /* Fade transition to all slides.
  7 | * = All HTML elements will have those styles.*/
  8 | 
  9 | section * {
 10 |   animation: fadeIn .6s ease-in-out;
 11 | }
 12 | 
 13 | section .background,
 14 | section .light,
 15 | section .dark {
 16 |   animation-duration: 0s;
 17 | }
 18 | 
 19 | /*=== Section = Slide === */
 20 | section,
 21 | .slide {
 22 |   display: flex;
 23 |   flex-direction: column;
 24 |   justify-content: center;
 25 |   min-height: 100vh; /*Fullscreen*/
 26 |   /* Prototyping? min-height: 720px (Baseline: 8px = .8rem)*/
 27 |   padding: 2.4rem;
 28 |   /*Fixed/Visible header? padding-top: 12rem; */
 29 |   page-break-after: always;
 30 |   position: relative;
 31 |   word-wrap: break-word;
 32 | 
 33 |   @media (min-width: 1024px) {
 34 |     padding-bottom: 12rem;
 35 |     padding-top: 12rem;
 36 |   }
 37 | }
 38 | 
 39 | /*slide with no padding (full card, .embed youtube video...) */
 40 | .fullscreen {
 41 |   padding: 0;
 42 |   /* Fixed/Visible header?
 43 |   padding:8.2rem 0 0 0;
 44 |   */
 45 | }
 46 | 
 47 | /* slide alignment - top */
 48 | .slide-top {
 49 |   justify-content: flex-start;
 50 | }
 51 | 
 52 | /* slide alignment - bottom */
 53 | .slide-bottom {
 54 |   justify-content: flex-end;
 55 | }
 56 | 
 57 | /*== 5.1. Mini container width:50%
 58 | Aligned items [class*="content-"]=== */
 59 | [class*='content-'] {
 60 |   position: relative;
 61 |   text-align: left;
 62 | }
 63 | 
 64 | .wrap[class*='bg-'],
 65 | .wrap.frame,
 66 | [class*='content-'][class*='bg-'],
 67 | [class*='content-'].frame,
 68 | [class*='align'][class*='bg-'] {
 69 |   padding: 4.8rem;
 70 | }
 71 | 
 72 | form[class*='bg-'] {
 73 |   padding: 2.4rem;
 74 | }
 75 | 
 76 | [class*='content-'] > [class*='content-'] p {
 77 |   font-size: 1.8rem;
 78 |   line-height: 3.2rem;
 79 | }
 80 | 
 81 | .content-center {
 82 |   margin: 0 auto;
 83 |   text-align: center;
 84 | }
 85 | 
 86 | @media (min-width: 768px) {
 87 |   [class*='content-'] {
 88 |     width: 50%;
 89 | 
 90 |     &:after,
 91 |     &:before {
 92 |       content: '';
 93 |       display: table;
 94 |     }
 95 | 
 96 |     &:after {
 97 |       clear: both;
 98 |     }
 99 |   }
100 | 
101 |   .content-left {
102 |     float: left;
103 |   }
104 | 
105 |   .content-right {
106 |     float: right;
107 |   }
108 | 
109 |   [class*='content-'] + [class*='content-'] {
110 |     margin-bottom: 4.8rem;
111 |     padding-left: 2.4rem;
112 |   }
113 | 
114 |   [class*='content-'] + [class*='size-'] {
115 |     clear: both;
116 |     margin-top: 6.4rem;
117 |   }
118 | }
119 | 


--------------------------------------------------------------------------------
/src/scss/full.scss:
--------------------------------------------------------------------------------
 1 | /*-----------------------------------------------------------------------------------
 2 | 	0. CSS Reset & Normalize
 3 | 	1. Base
 4 | 		1.1 Wrap/Container
 5 | 		1.2 Animations
 6 | 		1.3 Responsive Media (videos, iframe, screenshots...)
 7 | 		1.4 Basic Grid (2,3,4 columns)
 8 | 	2. Typography & Lists
 9 | 		2.1 Headings with background
10 | 		2.2 Classes: .text-
11 | 		2.3 San Francisco Font (Apple)
12 | 	3. Header & Footer
13 | 		3.1 Logo
14 | 	4. Navigation
15 | 		4.1 Navbars
16 | 	5. SLIDES (vertically and horizontally centered)
17 | 		5.1 Mini container & Alignment
18 | 		5.2 Counter / Navigation Slides
19 | 		5.3 Background Images/Video
20 | 	6. Magic blocks = .flexblock (Flexible blocks with auto-fill and equal height).
21 | 		6.1 .flexblock.features
22 | 		6.2 .flexblock.clients
23 | 		6.3 .flexblock.steps
24 | 		6.4 .flexblock.metrics
25 | 		6.5 .flexblock.specs
26 | 		6.6 .flexblock.reasons
27 | 		6.7 .flexblock.gallery
28 | 		6.8 .flexblock.plans
29 | 		6.9. flexblock.activity
30 | 	7. Promos/Offers (pricing, tagline, CTA...)
31 | 	8. Work / Resume / CV
32 | 	9. Table of contents
33 | 	10. Cards
34 | 	11. Quotes
35 | 	12. Avatars
36 | 	13. Tables
37 | 	14. Forms
38 |   15. Longform Elements
39 | 	16. Safari Bug (flex-wrap)
40 | 	17. Slidex index (aka zoom)
41 |   18. Print
42 |   19. Colors
43 | ----------------------------------------------------------------------------------- */
44 | 
45 | @import 'vars';
46 | @import 'utils/mixins';
47 | @import 'utils/reset';
48 | @import 'utils/clear';
49 | 
50 | @import 'base';
51 | @import 'utils/animations';
52 | @import 'modules/media';
53 | @import 'modules/browser';
54 | @import 'modules/grid';
55 | 
56 | @import 'typography';
57 | 
58 | @import 'modules/header-footer';
59 | @import 'modules/logo';
60 | @import 'modules/navigation';
61 | 
62 | @import 'modules/slides';
63 | @import 'modules/slides-bg';
64 | @import 'modules/slides-navigation';
65 | 
66 | @import 'modules/flexblock';
67 | @import 'modules/flexblock-features';
68 | @import 'modules/flexblock-clients';
69 | @import 'modules/flexblock-steps';
70 | @import 'modules/flexblock-metrics';
71 | @import 'modules/flexblock-specs';
72 | @import 'modules/flexblock-reasons';
73 | @import 'modules/flexblock-gallery';
74 | @import 'modules/flexblock-plans';
75 | @import 'modules/flexblock-activity';
76 | @import 'modules/promos';
77 | @import 'modules/work';
78 | @import 'modules/toc';
79 | 
80 | @import 'modules/cards';
81 | 
82 | @import 'modules/quotes';
83 | @import 'modules/avatars';
84 | 
85 | @import 'modules/tables';
86 | 
87 | @import 'modules/form';
88 | @import 'modules/button';
89 | @import 'modules/badges';
90 | 
91 | @import 'modules/longform';
92 | 
93 | @import 'utils/bugs';
94 | @import 'modules/zoom';
95 | 
96 | @import 'modules/print';
97 | 
98 | @import 'color';
99 | 


--------------------------------------------------------------------------------
/src/scss/modules/_slides-bg.scss:
--------------------------------------------------------------------------------
  1 | /*=== 5.3 Slides - Background Images/Videos === */
  2 | 
  3 | .background,
  4 | [class*='background-'] {
  5 |   background-repeat: no-repeat;
  6 |   bottom: 0;
  7 |   left: 0;
  8 |   position: absolute;
  9 |   right: 0;
 10 |   top: 0;
 11 | }
 12 | 
 13 | /*=== BG Positions === */
 14 | 
 15 | .background {
 16 |   background-position: center;
 17 |   background-size: cover;
 18 | 
 19 |   &-top {
 20 |     background-position: top;
 21 |     background-size: cover;
 22 |   }
 23 | 
 24 |   &-bottom {
 25 |     background-position: bottom;
 26 |     background-size: cover;
 27 |   }
 28 | 
 29 |   &-center {
 30 |     background-position: center;
 31 |   }
 32 | 
 33 |   &-center-top {
 34 |     background-position: center top;
 35 |   }
 36 | 
 37 |   &-right-top {
 38 |     background-position: right top;
 39 |   }
 40 | 
 41 |   &-left-top {
 42 |     background-position: left top;
 43 |   }
 44 | 
 45 |   &-center-bottom,
 46 |   &-left-bottom,
 47 |   &-right-bottom,
 48 |   &-left,
 49 |   &-right {
 50 |     background-position: center bottom;
 51 |   }
 52 | 
 53 |   @media (min-width: 1024px) {
 54 |     &-left-bottom {
 55 |       background-position: left bottom;
 56 |     }
 57 | 
 58 |     &-right-bottom {
 59 |       background-position: right bottom;
 60 |     }
 61 | 
 62 |     &-right {
 63 |       background-position: right;
 64 |     }
 65 | 
 66 |     &-left {
 67 |       background-position: left;
 68 |     }
 69 |   }
 70 | 
 71 |   /*fullscreen video
 72 |     <video class="background-video">
 73 |   */
 74 | 
 75 |   &-video {
 76 |     height: 100%;
 77 |     object-fit: fill;
 78 |     width: 100%;
 79 |   }
 80 | }
 81 | /*=== bg image/video overlay === */
 82 | /*-- [class*="bg-"] .background.dark, [class*="bg-"] .embed.dark...  -- */
 83 | 
 84 | [class*='bg-'] .light,
 85 | [class*='bg-'] .light {
 86 |   opacity: .8;
 87 | }
 88 | 
 89 | [class*='bg-'] .dark,
 90 | [class*='bg-'] .dark {
 91 |   opacity: .2;
 92 | }
 93 | 
 94 | [class*='bg-'] .background-video.dark {
 95 |   opacity: .5;
 96 | }
 97 | 
 98 | @media (max-width: 1023px) {
 99 |   [class*='background-'] {
100 |     animation: fadeIn ease-in .2;
101 |     opacity: .2;
102 |   }
103 | 
104 |   .background-video {
105 |     opacity: .8;
106 |   }
107 | }
108 | 
109 | /*=== Animated Background Image === */
110 | 
111 | .background.anim {
112 |   animation: anim 80s linear infinite;
113 |   background-position: center top;
114 |   background-repeat: repeat;
115 |   background-size: 100%;
116 |   height: 200%;
117 | 
118 | }
119 | 
120 | /*=== Background with a frame === */
121 | /*<span class="background" style="background-image:url('image.jpg')"></span>
122 | <span class="background frame"></span>*/
123 | 
124 | [class*='background'].frame {
125 |   margin: 2.4rem;
126 | }
127 | 


--------------------------------------------------------------------------------
/test/plugins/touch.test.js:
--------------------------------------------------------------------------------
 1 | import Touch from '../../src/js/plugins/touch';
 2 | 
 3 | // Copy of DOM.fireEvent, but using touch offets
 4 | const getEvent = (eventType, offsetX, offsetY, touches) => {
 5 |   const event = new CustomEvent(eventType);
 6 | 
 7 |   event.offsetX = offsetX;
 8 |   event.offsetY = offsetY;
 9 |   event.touches = touches;
10 | 
11 |   return event;
12 | };
13 | 
14 | beforeAll(() => {
15 |   const brs = '<br />'.repeat(20);
16 |   document.body.innerHTML = `<div id="webslides">${brs}</div>`;
17 | });
18 | 
19 | test('Touch utility', () => {
20 |   // Overrides userAgent to force mobile detection
21 |   Object.getOwnPropertyDescriptor(window.navigator.__proto__, 'userAgent');
22 |   Object.defineProperty(window.navigator, 'userAgent', {get: () => 'Android'});
23 | 
24 |   const ws = document.getElementById('webslides');
25 |   const next = jest.fn();
26 |   const prev = jest.fn();
27 |   const zoom = jest.fn();
28 | 
29 |   let disabled = true;
30 |   const webslides = {
31 |     el: ws,
32 |     isDisabled: () => disabled,
33 |     isMoving: false,
34 |     isVertical: false,
35 |     goNext: next,
36 |     goPrev: prev,
37 |     toggleZoom: zoom,
38 |     options: {
39 |       slideOffset: 100
40 |     }
41 |   };
42 | 
43 |   const touch = new Touch(webslides);
44 |   touch.onStart_(getEvent('touchstart', 200, 200, [1]));
45 |   touch.onMove_(getEvent('touchstart', 200, 400, [1]));
46 |   touch.onStop_(getEvent('touchstart', 200, 200, [1]));
47 | 
48 |   expect(next).not.toBeCalled();
49 |   expect(prev).not.toBeCalled();
50 |   expect(zoom).not.toBeCalled();
51 | 
52 |   disabled = false;
53 | 
54 |   touch.onStart_(getEvent('touchstart', 800, 200, [1]));
55 |   touch.onMove_(getEvent('touchstart', 400, 400, [1]));
56 |   touch.onStop_(getEvent('touchstart', 400, 200, [1]));
57 | 
58 |   expect(next.mock.calls.length).toBe(1);
59 |   expect(prev.mock.calls.length).toBe(0);
60 |   expect(zoom.mock.calls.length).toBe(0);
61 | 
62 |   touch.onStart_(getEvent('touchstart', 200, 200, [1]));
63 |   touch.onMove_(getEvent('touchstart', 400, 200, [1]));
64 |   touch.onStop_(getEvent('touchstart', 400, 200, [1]));
65 | 
66 |   expect(next.mock.calls.length).toBe(1);
67 |   expect(prev.mock.calls.length).toBe(1);
68 |   expect(zoom.mock.calls.length).toBe(0);
69 | 
70 |   touch.onStart_(getEvent('touchstart', 200, 200,
71 |     [{clientX: 100, clientY: 100}, {clientX: 400, clientY: 400}]));
72 |   touch.onMove_(getEvent('touchstart', 400, 200,
73 |     [{clientX: 200, clientY: 200}, {clientX: 300, clientY: 300}]));
74 |   touch.onStop_(getEvent('touchstart', 400, 200,
75 |     [{clientX: 200, clientY: 200}, {clientX: 300, clientY: 300}]));
76 | 
77 |   expect(next.mock.calls.length).toBe(1);
78 |   expect(prev.mock.calls.length).toBe(1);
79 |   expect(zoom.mock.calls.length).toBe(1);
80 | });
81 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webslides",
 3 |   "version": "1.5.0",
 4 |   "description": "Making HTML presentations easy",
 5 |   "main": "static/js/webslides.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/webslides/webslides.git"
 9 |   },
10 |   "keywords": [
11 |     "webslides",
12 |     "presentation",
13 |     "css"
14 |   ],
15 |   "author": "Jose Luís Antúnez <jlantunez@gmail.com>",
16 |   "contributors": [
17 |     {
18 |       "name": "Luís Sacristán"
19 |     },
20 |     {
21 |       "name": "Antonio Laguna",
22 |       "email": "anlagmat@gmail.com"
23 |     }
24 |   ],
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/webslides/webslides/issues"
28 |   },
29 |   "homepage": "https://github.com/webslides/webslides#readme",
30 |   "devDependencies": {
31 |     "archiver": "^2.0.3",
32 |     "autoprefixer": "^7.1.4",
33 |     "babel-cli": "^6.26.0",
34 |     "babel-core": "^6.26.0",
35 |     "babel-jest": "^22.0.4",
36 |     "babel-loader": "^7.1.2",
37 |     "babel-preset-env": "^1.6.0",
38 |     "babel-preset-es2015": "^6.24.1",
39 |     "codecov": "^3.0.0",
40 |     "css-loader": "^0.28.7",
41 |     "eslint": "^4.7.0",
42 |     "eslint-loader": "^1.9.0",
43 |     "eslint-plugin-jest": "^21.1.0",
44 |     "extract-text-webpack-plugin": "^3.0.0",
45 |     "jest": "^22.0.4",
46 |     "node-sass": "4.13.1",
47 |     "npm-run-all": "^4.1.1",
48 |     "postcss-loader": "^2.0.6",
49 |     "pre-commit": "^1.2.2",
50 |     "rimraf": "^2.6.2",
51 |     "sass-lint": "^1.11.1",
52 |     "sass-loader": "^6.0.6",
53 |     "simulant": "^0.2.2",
54 |     "smart-banner-webpack-plugin": "^3.0.1",
55 |     "style-loader": "^0.19.1",
56 |     "webpack": "^3.6.0",
57 |     "webpack-dev-server": "^2.8.2"
58 |   },
59 |   "scripts": {
60 |     "prebuild": "rimraf static/js/webslide*",
61 |     "build": "npm-run-all -s lint build:*",
62 |     "build:min": "webpack --output-filename [name].min.js -p",
63 |     "build:normal": "webpack",
64 |     "lint": "npm-run-all -p lint:*",
65 |     "lint:js": "eslint ./src/js --cache --ignore-pattern .gitignore",
66 |     "lint:tests": "eslint ./test --cache --ignore-pattern .gitignore",
67 |     "lint:css": "sass-lint -v -f stylish",
68 |     "dev": "webpack-dev-server",
69 |     "test": "jest && codecov",
70 |     "preversion": "npm jest",
71 |     "postversion": "npm run build && git add -A static && node ./zip-release.js && git push && git push --tags"
72 |   },
73 |   "release": {
74 |     "files": [
75 |       "demos/**/**",
76 |       "static/**/**",
77 |       "*.html",
78 |       "LICENSE",
79 |       "README.md"
80 |     ]
81 |   },
82 |   "jest": {
83 |     "collectCoverage": true,
84 |     "testURL": "http://localhost/"
85 |   },
86 |   "pre-commit": [
87 |     "lint"
88 |   ],
89 |   "dependencies": {
90 |     "request": "^2.83.0"
91 |   }
92 | }
93 | 


--------------------------------------------------------------------------------
/src/scss/modules/_flexblock-gallery.scss:
--------------------------------------------------------------------------------
  1 | /*=================================================
  2 | 6.7 Gallery - <ul class="flexblock gallery">
  3 | Block Thumbnails li+.overlay+image
  4 | img size recommended:800x600px
  5 | =================================================== */
  6 | 
  7 | .flexblock.gallery {
  8 |   li {
  9 |     margin-bottom: 4.8rem;
 10 | 
 11 |     &:nth-child(n+4) {
 12 |       flex: inherit;
 13 |     }
 14 | 
 15 |     figcaption {
 16 |       padding: 1.6rem;
 17 |       position: relative;
 18 | 
 19 |       &:before {
 20 |         content: '';
 21 |         height: 0;
 22 |         left: 20%;
 23 |         margin-left: -.5em;
 24 |         position: absolute;
 25 |         top: .4rem;
 26 |         transform: rotate(135deg);
 27 |         transform-origin: 0 0;
 28 |         transition: .1s;
 29 |         width: 0;
 30 |       }
 31 |     }
 32 | 
 33 |     &:hover figcaption:before {
 34 |       top: .3rem;
 35 |     }
 36 |   }
 37 | 
 38 |   .aligncenter & li figcaption:before {
 39 |     left: 55%;
 40 |     margin-left: 0;
 41 |   }
 42 | 
 43 |   li,
 44 |   &.blink li > a {
 45 |     padding: 0;
 46 |   }
 47 | 
 48 |   h2 {
 49 |     text-transform: uppercase;
 50 |   }
 51 | 
 52 |   h2 + p,
 53 |   h3 + p {
 54 |     margin-top: .8rem;
 55 |   }
 56 | 
 57 |   p {
 58 |     font-size: 1.6rem;
 59 |     line-height: 2.4rem;
 60 |     margin-bottom: 0;
 61 |   }
 62 | 
 63 |   li footer {
 64 |     margin-top: .8rem;
 65 |     padding: 1.2rem 0 0;
 66 |     position: relative;
 67 |   }
 68 | 
 69 |   li img {
 70 |     display: block;
 71 |     margin-left: auto;
 72 |     margin-right: auto;
 73 |   }
 74 | 
 75 |   @media (min-width: 600px) {
 76 |     margin-left: -2%;
 77 |     margin-right: -2%;
 78 | 
 79 |     li {
 80 |       margin-left: 2%;
 81 |       margin-right: 2%;
 82 |       width: 46%;
 83 |     }
 84 |   }
 85 | }
 86 | 
 87 | 
 88 | 
 89 | @media (min-width: 1024px) {
 90 |   .flexblock.gallery li {
 91 |     width: 21%;
 92 |   }
 93 | 
 94 |   .grid.sm .flexblock.gallery li,
 95 |   .grid.ms .flexblock.gallery li {
 96 |     width: 29%;
 97 |   }
 98 | 
 99 |   .grid.sms .flexblock.gallery li {
100 |     width: 46%;
101 |   }
102 | }
103 | 
104 | .overlay {
105 |   bottom: 0;
106 |   cursor: pointer;
107 |   display: flex;
108 |   flex-direction: column;
109 |   height: 100%;
110 |   justify-content: center;
111 |   left: 0;
112 |   opacity: 1;
113 |   position: absolute;
114 |   right: 0;
115 |   top: 0;
116 |   transition: all .3s linear;
117 |   width: 100%;
118 |   z-index: 2;
119 | }
120 | 
121 | li .overlay {
122 |   align-items: center;
123 | }
124 | 
125 | li .overlay h2 {
126 |   letter-spacing: .2rem;
127 |   margin: 0;
128 |   padding: 0 2.4rem;
129 |   text-align: center;
130 |   text-transform: uppercase;
131 |   width: 100%;
132 | }
133 | 
134 | .overlay p,
135 | .overlay time {
136 |   margin-bottom: 0;
137 | }
138 | 
139 | li:hover .overlay {
140 |   cursor: pointer;
141 | }
142 | 


--------------------------------------------------------------------------------
/src/scss/modules/_form.scss:
--------------------------------------------------------------------------------
  1 | /*=========================================
  2 | 14. Forms
  3 | =========================================== */
  4 | 
  5 | form {
  6 |   text-align: left;
  7 | 
  8 |   & + p,
  9 |   input + p,
 10 |   textarea + p {
 11 |     margin-top: .8rem;
 12 |   }
 13 | }
 14 | 
 15 | 
 16 | input[type='text'],
 17 | input[type='email'],
 18 | input[type='tel'],
 19 | input[type='url'],
 20 | input[type='search'],
 21 | input[type='password'] {
 22 |   appearance: none;
 23 |   border-radius: 0;
 24 | }
 25 | 
 26 | input,
 27 | button,
 28 | select {
 29 |   display: inline-block;
 30 |   font-size: 1.6rem;
 31 |   font-weight: 400;
 32 |   height: 4.8rem;
 33 |   margin: 0;
 34 |   padding: .7rem;
 35 |   position: relative;
 36 |   width: 100%;
 37 | 
 38 | }
 39 | 
 40 | input[type='radio'],
 41 | input[type='checkbox'] {
 42 |   height: auto;
 43 |   padding: 4px;
 44 |   width: auto;
 45 | }
 46 | 
 47 | button[type='submit'],
 48 | textarea {
 49 |   width: 100%;
 50 | }
 51 | 
 52 | textarea {
 53 |   padding: .7rem;
 54 | }
 55 | 
 56 | button {
 57 |   cursor: pointer;
 58 |   text-align: center;
 59 |   width: auto;
 60 | }
 61 | 
 62 | .button {
 63 |   cursor: pointer;
 64 |   display: inline-block;
 65 |   font-size: 1.8rem;
 66 |   font-weight: 400;
 67 |   line-height: 4.8rem;
 68 |   min-width: 16rem;
 69 |   padding: 0 1.6rem;
 70 |   text-align: center;
 71 | 
 72 |   svg {
 73 |     font-size: 2.4rem;
 74 |   }
 75 | }
 76 | 
 77 | .button.radius,
 78 | input.radius {
 79 |   border-radius: 2.4rem;
 80 | }
 81 | 
 82 | button,
 83 | input[type='submit'] {
 84 |   font-weight: 400;
 85 |   letter-spacing: .1rem;
 86 |   text-transform: uppercase;
 87 | }
 88 | 
 89 | 
 90 | .plans .button {
 91 |   margin-left: auto;
 92 |   margin-right: auto;
 93 |   width: 50%;
 94 | }
 95 | 
 96 | .try {
 97 |   display: block;
 98 |   font-size: 1.6rem;
 99 |   margin-top: 1.6rem;
100 | }
101 | 
102 | fieldset {
103 |   padding: 2.4rem;
104 | }
105 | 
106 | legend {
107 |   border: 0;
108 |   font-weight: 400;
109 |   letter-spacing: .1rem;
110 |   padding: 1.6rem 2.4rem;
111 |   text-align: center;
112 |   text-transform: uppercase;
113 |   width: 100%;
114 | }
115 | 
116 | input:focus,
117 | textarea:focus,
118 | select:focus {
119 |   border-width: 1px;
120 | }
121 | 
122 | a.button:hover,
123 | button[type='submit']:hover,
124 | input[type='submit']:hover {
125 |   transform: scale(1.01);
126 | }
127 | 
128 | :disabled,
129 | button:disabled:hover {
130 |   cursor: not-allowed;
131 | }
132 | 
133 | .user {
134 |   input {
135 |     margin-bottom: 0;
136 | 
137 |     &[type='email'],
138 |     &[type='search'],
139 |     &[type='text'] {
140 |       width: 100%;
141 | 
142 |       @media (min-width: 500px) {
143 |         float: left;
144 |         width: 70%;
145 |       }
146 |     }
147 |   }
148 | 
149 |   button,
150 |   input[type='submit'] {
151 |     left: 0;
152 |     width: 100%;
153 | 
154 |     @media (min-width: 500px) {
155 |       cursor: pointer;
156 |       width: 30%;
157 |     }
158 |   }
159 | }
160 | 


--------------------------------------------------------------------------------
/test/plugins/youtube.test.js:
--------------------------------------------------------------------------------
 1 | import YouTube from '../../src/js/plugins/youtube';
 2 | import DOM from '../../src/js/utils/dom';
 3 | 
 4 | beforeAll(() => {
 5 |   const video = '<div id="section-1" class="slide"><div class="embed">' +
 6 |     '<div data-youtube="video" ' +
 7 |     '     data-youtube-id="CQY3KUR3VzM" ' +
 8 |     '     data-autoplay data-loop></div></div></div>';
 9 |   document.body.innerHTML =
10 |     `<script></script><div id="webslides">${video}</div>`;
11 | });
12 | 
13 | test('YouTube utility', () => {
14 |   const ws = document.getElementById('webslides');
15 |   const slides = ws.querySelectorAll('.slide');
16 |   const play = jest.fn();
17 |   const pause = jest.fn();
18 |   const destroy = jest.fn();
19 |   const create = jest.fn();
20 | 
21 |   const webslides = {
22 |     el: ws,
23 |     slides: []
24 |   };
25 |   slides.forEach(slide => webslides.slides.push({el: slide}));
26 | 
27 |   window.YT = {
28 |     Player: function(a, b) {
29 |       return {
30 |         getIframe: () => {
31 |           const div = DOM.createNode('div');
32 |           div.innerHTML =
33 |             `<iframe id="widget8" 
34 |                      src="https://www.youtube.com/embed/_m67JbGjWnc" 
35 |                      data-youtube-id="_m67JbGjWnc" 
36 |                      frameborder="0" height="360" width="640"></iframe>`;
37 |           webslides.slides[0].el.appendChild(div);
38 |           return div.querySelector('iframe');
39 |         }
40 |       };
41 |     }
42 |   };
43 | 
44 |   new YouTube(webslides);
45 | 
46 |   expect(typeof window.onYouTubeIframeAPIReady).toBe('function');
47 |   const el = webslides.el.querySelector('[data-youtube]');
48 | 
49 |   el.dataset.autoplay = true;
50 |   el.dataset.youtubeId = 'CQY3KUR3VzM';
51 | 
52 |   window.onYouTubeIframeAPIReady();
53 | 
54 |   const slide = {
55 |     slide: {
56 |       player: {
57 |         autoplay: true,
58 |         play: play,
59 |         pause: pause,
60 |         destroy: destroy,
61 |         create: create
62 |       }
63 |     }
64 |   };
65 | 
66 |   DOM.fireEvent(webslides.slides[0].el, 'dom:enter', slide);
67 |   expect(play.mock.calls.length).toBe(0);
68 |   expect(pause.mock.calls.length).toBe(0);
69 |   expect(destroy.mock.calls.length).toBe(0);
70 |   expect(create.mock.calls.length).toBe(1);
71 | 
72 |   DOM.fireEvent(webslides.slides[0].el, 'dom:leave', slide);
73 |   expect(play.mock.calls.length).toBe(0);
74 |   expect(pause.mock.calls.length).toBe(0);
75 |   expect(destroy.mock.calls.length).toBe(1);
76 |   expect(create.mock.calls.length).toBe(1);
77 | 
78 |   DOM.fireEvent(webslides.slides[0].el, 'slide:enable', slide);
79 |   expect(play.mock.calls.length).toBe(1);
80 |   expect(pause.mock.calls.length).toBe(0);
81 |   expect(destroy.mock.calls.length).toBe(1);
82 |   expect(create.mock.calls.length).toBe(1);
83 | 
84 |   DOM.fireEvent(webslides.slides[0].el, 'slide:disable', slide);
85 |   expect(play.mock.calls.length).toBe(1);
86 |   expect(pause.mock.calls.length).toBe(1);
87 |   expect(destroy.mock.calls.length).toBe(1);
88 |   expect(create.mock.calls.length).toBe(1);
89 | });
90 | 


--------------------------------------------------------------------------------
/src/scss/modules/_cards.scss:
--------------------------------------------------------------------------------
  1 | /*===========================================
  2 | 10. Cards
  3 | ============================================= */
  4 | 
  5 | [class*='card-'] {
  6 |   &,
  7 |   & > a {
  8 |     clear: both;
  9 |     display: flex;
 10 |     flex-direction: row;
 11 |     position: relative;
 12 |   }
 13 | 
 14 |   .fullscreen &,
 15 |   .fullscreen & > a {
 16 |     min-height: 100vh;
 17 |   }
 18 | 
 19 |   figure img,
 20 |   figure iframe {
 21 |     display: block;
 22 |     margin: 0 auto;
 23 |   }
 24 | 
 25 |   figure figcaption {
 26 |     bottom: 0;
 27 |     font-size: 1.4rem;
 28 |     left: 0;
 29 |     line-height: 2.4rem;
 30 |     padding: .8rem 2.4rem;
 31 |     position: absolute;
 32 |     z-index: 2;
 33 | 
 34 |     svg {
 35 |       font-size: 1rem;
 36 |     }
 37 |   }
 38 | }
 39 | 
 40 | @media (min-width: 768px) {
 41 |   [class*='card'][class*='bg-'] figure,
 42 |   .fullscreen [class*='card'] figure {
 43 |     max-height: 100%;
 44 |     min-width: 380px;
 45 |     text-align: center;
 46 |     vertical-align: middle;
 47 |   }
 48 | 
 49 |   [class*='card-'][class*='bg-'] figure img,
 50 |   [class*='card-'][class*='bg-'] figure iframe,
 51 |   .fullscreen [class*='card-'] figure img,
 52 |   .fullscreen [class*='card-'] figure iframe {
 53 |     height: 100%;
 54 |     left: 0;
 55 |     object-fit: cover;
 56 |     position: absolute;
 57 |     top: 0;
 58 |     width: 100%;
 59 |     z-index: 1;
 60 |   }
 61 | }
 62 | 
 63 | .flex-content,
 64 | [class*='card'] blockquote {
 65 |   padding: 2.4rem;
 66 |   position: relative;
 67 | }
 68 | 
 69 | [class*='card-'] .flex-content,
 70 | [class*='card-'] blockquote {
 71 |   display: flex;
 72 |   flex-direction: column;
 73 |   justify-content: center;
 74 | }
 75 | 
 76 | .flex-content p {
 77 |   position: relative;
 78 | }
 79 | 
 80 | @media (min-width: 768px) {
 81 |   .card-50 figure,
 82 |   .card-50 blockquote,
 83 |   .card-50 .flex-content {
 84 |     width: 50%;
 85 |   }
 86 | 
 87 |   .card-30 figure,
 88 |   .card-70 .flex-content,
 89 |   .card-70 blockquote {
 90 |     width: 30%;
 91 |   }
 92 | 
 93 |   .card-40 figure,
 94 |   .card-60 .flex-content,
 95 |   .card-60 blockquote {
 96 |     width: 40%;
 97 |   }
 98 | 
 99 |   .card-60 figure,
100 |   .card-40 .flex-content,
101 |   .card-40 blockquote {
102 |     width: 60%;
103 |   }
104 | 
105 |   .card-70 figure,
106 |   .card-30 .flex-content,
107 |   .card-30 blockquote {
108 |     width: 70%;
109 |   }
110 | 
111 |   [class*='card']:nth-child(odd) figure {
112 |     order: 0;
113 |   }
114 | 
115 |   [class*='card']:nth-child(even) figure {
116 |     order: 1;
117 |   }
118 | 
119 |   .flex-content,
120 |   [class*='card'] blockquote {
121 |     padding: 4.8rem;
122 |   }
123 | 
124 |   .fullscreen [class*='card'] .flex-content,
125 |   .fullscreen [class*='card'] blockquote {
126 |     padding: 6.4rem;
127 |   }
128 | }
129 | 
130 | @media (max-width: 767px) {
131 |   [class*='card-'],
132 |   [class*='card-'] > a {
133 |     flex-flow: column;
134 |   }
135 | 
136 |   .card figure,
137 |   .card header {
138 |     width: 100%;
139 |   }
140 | }
141 | 


--------------------------------------------------------------------------------
/test/plugins/keyboard.test.js:
--------------------------------------------------------------------------------
 1 | import Keyboard from '../../src/js/plugins/keyboard';
 2 | import Keys from '../../src/js/utils/keys';
 3 | 
 4 | // @TODO: Check to do this with simulant
 5 | const simulateKeyEvent = (el, code, extra) => {
 6 |   const config = Object.assign({
 7 |     bubbles: true,
 8 |     cancelableCode: true,
 9 |     which: code,
10 |     shiftKey: false}, extra);
11 | 
12 |   const evt = new KeyboardEvent('keydown', config);
13 |   el.dispatchEvent(evt);
14 | };
15 | 
16 | beforeAll(() => {
17 |   document.body.innerHTML = `<div id="webslides" data-test="test">
18 |                               <p>Text</p>
19 |                              </div>
20 |                              <input id="focusable" />`;
21 | });
22 | 
23 | test('Keyboard plugin', () => {
24 |   const goto = jest.fn();
25 |   const next = jest.fn();
26 |   const prev = jest.fn();
27 |   const fullscreen = jest.fn();
28 |   const ws = document.getElementById('webslides');
29 | 
30 |   let disabled = true;
31 | 
32 |   const webslides = {
33 |     goToSlide: goto,
34 |     goNext: next,
35 |     goPrev: prev,
36 |     isVertical: false,
37 |     fullscreen: fullscreen,
38 |     isDisabled: () => disabled,
39 |     el: ws
40 |   };
41 | 
42 |   const key = new Keyboard(webslides);
43 | 
44 |   expect(goto).not.toBeCalled();
45 |   expect(next).not.toBeCalled();
46 |   expect(prev).not.toBeCalled();
47 | 
48 |   simulateKeyEvent(document, Keys.AV_PAGE);
49 |   expect(next.mock.calls.length).toBe(0);
50 | 
51 |   disabled = false;
52 |   simulateKeyEvent(document, Keys.AV_PAGE);
53 |   expect(next.mock.calls.length).toBe(1);
54 |   simulateKeyEvent(document, Keys.SPACE);
55 |   expect(next.mock.calls.length).toBe(2);
56 |   // Shift + Space
57 |   simulateKeyEvent(document, Keys.SPACE, {shiftKey: true});
58 |   expect(next.mock.calls.length).toBe(2);
59 |   expect(prev.mock.calls.length).toBe(1);
60 |   simulateKeyEvent(document, Keys.RE_PAGE);
61 |   expect(prev.mock.calls.length).toBe(2);
62 | 
63 |   // Home - End
64 |   simulateKeyEvent(document, Keys.HOME);
65 |   expect(goto.mock.calls.length).toBe(1);
66 |   simulateKeyEvent(document, Keys.END);
67 |   expect(goto.mock.calls.length).toBe(2);
68 | 
69 |   // Arrow keys, only left right should increase
70 |   simulateKeyEvent(document, Keys.DOWN);
71 |   simulateKeyEvent(document, Keys.UP);
72 |   simulateKeyEvent(document, Keys.LEFT);
73 |   simulateKeyEvent(document, Keys.RIGHT);
74 |   expect(prev.mock.calls.length).toBe(3);
75 |   expect(next.mock.calls.length).toBe(3);
76 | 
77 |   // Arrow keys, only up down should increase
78 |   key.ws_.isVertical = true;
79 |   simulateKeyEvent(document, Keys.DOWN);
80 |   simulateKeyEvent(document, Keys.UP);
81 |   simulateKeyEvent(document, Keys.LEFT);
82 |   simulateKeyEvent(document, Keys.RIGHT);
83 |   expect(prev.mock.calls.length).toBe(4);
84 |   expect(next.mock.calls.length).toBe(4);
85 | 
86 |   // F, only trigger on when alone
87 |   simulateKeyEvent(document, Keys.F);
88 |   simulateKeyEvent(document, Keys.F, {ctrlKey: true});
89 |   simulateKeyEvent(document, Keys.F, {metaKey: true});
90 |   expect(fullscreen.mock.calls.length).toBe(1);
91 | });
92 | 


--------------------------------------------------------------------------------
/error.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US" prefix="og: http://ogp.me/ns#">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 |     <!-- CLEAN MARKUP = GOOD KARMA.
 8 |       Hi source code lover,
 9 | 
10 |       you're a curious person and a fast learner ;)
11 |       Let's make something beautiful together. Contribute on Github:
12 |       https://github.com/webslides/webslides
13 | 
14 |       Thanks,
15 |       @jlantunez.
16 |     -->
17 | 
18 |     <!-- SEO -->
19 |     <title>Page not found (404) - WebSlides</title>
20 |     <meta name="description" content="Unfortunately, this page does not exist.">
21 | 
22 |     <!-- Google Fonts -->
23 |     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
24 | 
25 |     <!-- CSS Base -->
26 |     <link rel="stylesheet" type='text/css' media='all' href="static/css/base.css">
27 | 
28 |     <!-- CSS Colors -->
29 |     <link rel="stylesheet" type='text/css' media='all' href="static/css/colors.css">
30 | 
31 |     <!-- Optional - CSS SVG Icons (Font Awesome) -->
32 |     <link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
33 | 
34 | 
35 |     <!-- FAVICONS -->
36 |     <link rel="shortcut icon" sizes="16x16" href="static/images/favicons/favicon.png">
37 |     <link rel="shortcut icon" sizes="32x32" href="static/images/favicons/favicon-32.png">
38 | 
39 |     <!-- Android -->
40 |     <meta name="mobile-web-app-capable" content="yes">
41 |     <meta name="theme-color" content="#333333">
42 |   </head>
43 |   <body>
44 |     <header role="banner">
45 |       <nav role="navigation">
46 |         <p class="logo"><a href="index.html" title="WebSlides">WebSlides</a></p>
47 |         <ul>
48 |           <li class="github">
49 |             <a rel="external" href="https://github.com/webslides/webslides" title="Github">
50 |               <svg class="fa-github">
51 |                 <use xlink:href="#fa-github"></use>
52 |               </svg>
53 |               <em>WebSlides</em>
54 |             </a>
55 |           </li>
56 |           <li class="twitter">
57 |             <a rel="external" href="https://twitter.com/webslides" title="Twitter">
58 |               <svg class="fa-twitter">
59 |                 <use xlink:href="#fa-twitter"></use>
60 |               </svg>
61 |               <em>@WebSlides</em>
62 |             </a>
63 |           </li>
64 |           <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
65 |         </ul>
66 |       </nav>
67 |     </header>
68 | 
69 |     <main role="main">
70 |       <section class="aligncenter">
71 |         <div class="wrap">
72 |           <h1>Page not found!</h1>
73 |           <p class="text-symbols">* * *</p>
74 |           <p>Please check your URL or <a href="index.html">return to the Home Page</a>.</p>
75 |         </div>
76 |         <!-- end .wrap -->
77 |       </section>
78 |       <!-- end section -->
79 |     </main>
80 |     <!-- end main -->
81 | 
82 |     <!-- svg-icons.js is optional (fontastic.me - Font Awesome as svg icons) -->
83 |     <script defer src="static/js/svg-icons.js"></script>
84 | 
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/static/images/logos/netflix.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="177px" height="48px" viewBox="0 0 177 48" enable-background="new 0 0 177 48" xml:space="preserve">  <image id="image0" width="177" height="48" x="0" y="0"
 4 |     xlink:href="data:image/png;base64,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
41 | AElFTkSuQmCC" />
42 | </svg>
43 | 


--------------------------------------------------------------------------------
/src/js/plugins/scroll.js:
--------------------------------------------------------------------------------
  1 | import MobileDetector from '../utils/mobile-detector';
  2 | 
  3 | 
  4 | /**
  5 |  * Scroll plugin.
  6 |  */
  7 | export default class Scroll {
  8 |   /**
  9 |    * @param {WebSlides} wsInstance The WebSlides instance
 10 |    * @constructor
 11 |    */
 12 |   constructor(wsInstance) {
 13 |     /**
 14 |      * @type {WebSlides}
 15 |      * @private
 16 |      */
 17 |     this.ws_ = wsInstance;
 18 |     /**
 19 |      * Where the scroll is going to happen. The WebSlides element.
 20 |      * @type {Element}
 21 |      * @private
 22 |      */
 23 |     this.scrollContainer_ = wsInstance.el;
 24 |     /**
 25 |      * Whether movement is happening up or down.
 26 |      * @type {boolean}
 27 |      * @private
 28 |      */
 29 |     this.isGoingUp_ = false;
 30 |     /**
 31 |      * Whether movement is happening left or right.
 32 |      * @type {boolean}
 33 |      * @private
 34 |      */
 35 |     this.isGoingLeft_ = false;
 36 |     /**
 37 |      * Timeout id holder.
 38 |      * @type {?number}
 39 |      * @private
 40 |      */
 41 |     this.timeout_ = null;
 42 | 
 43 |     // Disabling from option
 44 |     if (!this.ws_.options.navigateOnScroll) {
 45 |       return;
 46 |     }
 47 | 
 48 |     if (!MobileDetector.isAny()) {
 49 |         this.scrollContainer_.addEventListener(
 50 |             'wheel', this.onMouseWheel_.bind(this));
 51 | 
 52 |         if (!wsInstance.isVertical) {
 53 |           wsInstance.el.addEventListener(
 54 |               'ws:slide-change', this.onSlideChange_.bind(this));
 55 |         }
 56 |     }
 57 |   }
 58 | 
 59 |   /**
 60 |    * When the slides change, set an inner timeout to avoid prematurely
 61 |    * changing to the next slide again.
 62 |    * @private
 63 |    */
 64 |   onSlideChange_() {
 65 |     this.timeout_ = setTimeout(
 66 |         () => {
 67 |           this.timeout_ = null;
 68 |         },
 69 |         this.ws_.options.scrollWait);
 70 |   }
 71 | 
 72 |   /**
 73 |    * Reacts to the wheel event. Detects whether is going up or down and decides
 74 |    * if it needs to move the slide based on the amount of delta.
 75 |    * @param {WheelEvent} event The Wheel Event.
 76 |    * @private
 77 |    */
 78 |   onMouseWheel_(event) {
 79 |     if (this.ws_.isDisabled()) {
 80 |       return;
 81 |     }
 82 | 
 83 |     if (this.ws_.isMoving || this.timeout_) {
 84 |       event.preventDefault();
 85 |       return;
 86 |     }
 87 | 
 88 |     // Firefox uses lines instead of pixels for delta
 89 |     const linesToPx = event.deltaMode * this.ws_.options.minWheelDelta;
 90 |     const {deltaY: wheelDeltaY, deltaX: wheelDeltaX} = event;
 91 |     const isVertical = this.ws_.isVertical;
 92 |     const isHorizontalMovement = Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY);
 93 |     this.isGoingUp_ = wheelDeltaY < 0;
 94 |     this.isGoingLeft_ = wheelDeltaX < 0;
 95 | 
 96 | 
 97 |     // If we're mainly moving horizontally, prevent default
 98 |     if (isHorizontalMovement) {
 99 |       if (!isVertical) {
100 |         event.preventDefault();
101 |       } else {
102 |         // If we're moving horizontally but this is vertical, return to avoid
103 |         // unwanted navigation.
104 |         return;
105 |       }
106 |     }
107 | 
108 |     if (Math.abs(wheelDeltaY + linesToPx) >= this.ws_.options.minWheelDelta ||
109 |         Math.abs(wheelDeltaX + linesToPx) >= this.ws_.options.minWheelDelta) {
110 |       if ((isHorizontalMovement && this.isGoingLeft_) ||
111 |           (!isHorizontalMovement && this.isGoingUp_)) {
112 |         this.ws_.goPrev();
113 |       } else {
114 |         this.ws_.goNext();
115 |       }
116 | 
117 |       event.preventDefault();
118 |     }
119 |   }
120 | }
121 | 


--------------------------------------------------------------------------------
/static/images/swipe.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">  <image id="image0" width="96" height="96" x="0" y="0"
 4 |     xlink:href="data:image/png;base64,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" />
45 | </svg>
46 | 


--------------------------------------------------------------------------------
/static/images/logos/facebook.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="245px" height="48px" viewBox="0 0 245 48" enable-background="new 0 0 245 48" xml:space="preserve">  <image id="image0" width="245" height="48" x="0" y="0"
 4 |     xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPUAAAAwCAMAAAD+SsxQAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
 5 | AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAilBMVEUAAABIaKtIaKtIaKtI
 6 | aKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtI
 7 | aKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtI
 8 | aKtIaKtIaKv///+RH1H9AAAALHRSTlMAFWGSu9Xq2sinVgkfOU1phJ215SwlP26i4A+M7jLzsfis
 9 | eMHPGX6Y6EZbchNowKkAAAABYktHRC3N2kE9AAAAB3RJTUUH4AoIAxIe1SlyhQAAB3VJREFUaN7l
10 | muu2ojoMgLmJIIIIgoKoKOCV93++Q7kkaSl65qxx1py182sLoenXpmmabkUhomq6MTNNc27ZC+V7
11 | 4ixdb+Wvg1m4+aKRKF5s/Z2R2O/1Ut2sQYIvUu+zwcrhazai5NjbMN7qeUlNZPdF6tNgJP/eXLtA
12 | cnqntqjrP0W9+wPUh39Fvcx/IvW5/oHUGwG6tv+9gf8v9eVHUhsEuLh4rvfFnfTvoS5BKde+yPt3
13 | UTszUNp+HfrvoYa5PlY/hzqdDzrm8udQbzKgjn4k9Q+a6yWctkxVfKe6cex+GIsqYkqbcUxwlhET
14 | 5y119M6Aw5qOD6oyKctWQWjgA7VtBMHZgCw8N85BEJyKa29TO4fscWZc0ubXfrdmstvF2EDq3Yyw
15 | Pdbld+Pmke4d/HNp5sdjfizPF7JykLo5aaq+xYxn1u0hAVrZZde15OS7kt6ri53V+alZ3DwyuBLq
16 | SHt2omlKLZdO18N9vE6eigODA/ubekn4D0M/7d48Le55bsNhGqjrpbK6k/TI45Fc+8g1UTzFQdmH
17 | nMLslU5Tp9jRs3KvpbJnilf+2UqBbX1IZbzZ+NPWD6rz6PlxK1JnqpAJ+9S19XHTARdrtXCkUMaT
18 | 1Nhcpk5RXxq9/eghTF9PvZV8mTAf3ySyRn2B2jREjT0uHEvWQkbcXJcpNFMjp8YyQ924zAR182ZV
19 | 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
45 | OjMwLTA3OjAwxTM2RwAAAABJRU5ErkJggg==" />
46 | </svg>
47 | 


--------------------------------------------------------------------------------
/src/scss/modules/_zoom.scss:
--------------------------------------------------------------------------------
  1 | /*==============================================
  2 | 18. Slides Index: Thumbnails navigation gallery
  3 | ================================================ */
  4 | 
  5 | #webslides-zoomed {
  6 |   align-content: flex-start;
  7 |   align-items: flex-start;
  8 |   flex-direction: row;
  9 |   justify-content: flex-start;
 10 |   min-height: 100vh;
 11 |   position: relative;
 12 |   z-index: 2;
 13 | 
 14 |   &.disabled {
 15 |     left: -100000px;
 16 |     position: absolute;
 17 |   }
 18 | 
 19 |   .slide {
 20 |     height: 400%;
 21 |     width: 400%;
 22 | 
 23 |     @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
 24 |       height: 200%;
 25 |       width: 200%;
 26 |     }
 27 | 
 28 |     @media (max-aspect-ratio: 2 / 3) {
 29 |       height: 200%;
 30 |       width: 200%;
 31 |     }
 32 |   }
 33 | 
 34 |   > .wrap {
 35 |     @media (min-width: 1024px) {
 36 |       padding-bottom: 12rem;
 37 |       padding-top: 12rem;
 38 |     }
 39 |   }
 40 | 
 41 |   > .wrap > .grid > .column {
 42 |     align-self: auto;
 43 |     flex: 0 1 auto;
 44 |     order: 0;
 45 |     position: relative;
 46 |     width: 25%;
 47 | 
 48 |     @media screen and (max-width: 567px) {
 49 |       width: 100%;
 50 |     }
 51 | 
 52 |     @media screen and (min-width: 568px) and (max-width: 1024px) {
 53 |       width: 50%;
 54 |     }
 55 | 
 56 |     @media screen and (max-width: 567px) and (orientation: portrait) {
 57 |       width: 100%;
 58 |     }
 59 | 
 60 |     > .wrap-zoom {
 61 |       border-radius: .3rem;
 62 |       display: inline-block;
 63 |       height: 25vh;
 64 |       overflow: hidden;
 65 |       position: relative;
 66 |       transition: .3s;
 67 | 
 68 |       @media screen and (max-width: 567px) {
 69 |         height: 50vh;
 70 |       }
 71 | 
 72 |       @media screen and (min-width: 568px) and (max-width: 1023px) {
 73 |         height: 33vh;
 74 |       }
 75 | 
 76 |       @media screen and (orientation: portrait) {
 77 |         height: 50vw;
 78 |       }
 79 | 
 80 |       &:hover {
 81 |         transform: scale(1.02);
 82 |         z-index: 2;
 83 |       }
 84 | 
 85 |       &.current {
 86 |         transform: scale(1.08);
 87 |       }
 88 |     }
 89 | 
 90 |     > .wrap-zoom > .zoom-layer {
 91 |       background: transparent;
 92 |       cursor: pointer;
 93 |       height: 100%;
 94 |       position: absolute;
 95 |       width: 100%;
 96 |     }
 97 |   }
 98 | 
 99 |   .column > .wrap-zoom > .slide {
100 |     clip: rect(0 auto auto 0);
101 |     display: flex !important; //  sass-lint:disable-line no-important
102 |     left: 0;
103 |     position: absolute;
104 |     top: 0;
105 |     transform: scale(.25) translate(-150%, -150vh);
106 | 
107 |     @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
108 |       transform: scale(.5) translate(-50%, -50%);
109 |     }
110 | 
111 |     @media (max-aspect-ratio: 2 / 3) {
112 |       transform: scale(.5) translate(-50%, -50%);
113 |     }
114 |   }
115 | 
116 |   & .column {
117 |     opacity: 0;
118 |     transform: scale(1.2);
119 |     transition: opacity .4s, transform .4s;
120 |     transition-delay: .2s;
121 |   }
122 | 
123 |   &.in {
124 |     .column {
125 |       opacity: 1;
126 |       transform: scale(1);
127 |     }
128 |   }
129 | }
130 | 
131 | .text-slide-number {
132 |   display: inline-block;
133 |   margin: .8rem auto;
134 |   text-align: center;
135 | }
136 | 
137 | #webslides {
138 |   transition: filter .3s;
139 | 
140 |   &.disabled,
141 |   &.zooming {
142 |     position: fixed;
143 |     width: 100%;
144 |     z-index: 0;
145 |   }
146 | 
147 |   &.disabled {
148 |     /*
149 |     filter: blur(10px);
150 |     transform: scale(1.1);
151 |     */
152 |     /* Blur makes scroll no accesible */
153 |     width: calc(100% - 10px);
154 |   }
155 | }
156 | 


--------------------------------------------------------------------------------
/src/scss/_base.scss:
--------------------------------------------------------------------------------
  1 | // sass-lint:disable no-vendor-prefixes
  2 | 
  3 | /*=========================================
  4 | 1. Base --> Baseline: 8px = .8rem
  5 | =========================================== */
  6 | 
  7 | /* -- Disable elastic scrolling/bounce:
  8 | webslides.js will add .ws-ready automatically. Don't worry :) -- */
  9 | 
 10 | .ws-ready {
 11 |   &,
 12 |   body {
 13 |     height: 100%;
 14 |     overflow: hidden;
 15 |     width: 100%;
 16 |   }
 17 | 
 18 |   &.ws-ready-zoom {
 19 |     overflow: visible;
 20 | 
 21 |     body {
 22 |       overflow: auto;
 23 |     }
 24 |   }
 25 | }
 26 | 
 27 | #webslides {
 28 |   -ms-overflow-style: none;
 29 |   -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-misspelled-properties
 30 |   height: 100vh;
 31 |   overflow-x: hidden;
 32 |   overflow-y: scroll;
 33 | 
 34 |   &::-webkit-scrollbar {
 35 |     display: none;
 36 |   }
 37 | }
 38 | 
 39 | li li {
 40 |   margin-left: 1.6rem;
 41 | }
 42 | 
 43 | a,
 44 | a:active,
 45 | a:focus,
 46 | a:visited,
 47 | input:focus,
 48 | textarea:focus,
 49 | button {
 50 |   text-decoration: none;
 51 |   transition: all .3s ease-out;
 52 | }
 53 | 
 54 | p a:active {
 55 |   position: relative;
 56 |   top: 2px;
 57 | }
 58 | 
 59 | nav a[rel='external'] em,
 60 | .hidden {
 61 |   clip: rect(1px, 1px, 1px, 1px);
 62 |   height: 1px;
 63 |   overflow: hidden;
 64 |   position: absolute;
 65 |   width: 1px;
 66 | }
 67 | 
 68 | .shadow {
 69 |   position: relative;
 70 | 
 71 |   &:before,
 72 |   &:after {
 73 |     bottom: 1.6rem;
 74 |     content: '';
 75 |     max-width: 300px;
 76 |     position: absolute;
 77 |     top: 80%;
 78 |     width: 50%;
 79 |     z-index: -1;
 80 |   }
 81 | 
 82 |   &:after {
 83 |     right: 2.4rem;
 84 |     transform: rotate(3deg);
 85 |   }
 86 | 
 87 |   &:before {
 88 |     left: 2.4rem;
 89 |     transform: rotate(-3deg);
 90 |   }
 91 | }
 92 | 
 93 | /*=== 1.1 WRAP/CONTAINER === */
 94 | .wrap,
 95 | header nav,
 96 | footer nav {
 97 |   margin-left: auto;
 98 |   margin-right: auto;
 99 |   max-width: 100%;
100 |   position: relative;
101 |   width: 100%;
102 |   z-index: 2;
103 | 
104 |   @media (min-width: 1024px) {
105 |     width: 90%;
106 |   }
107 | }
108 | 
109 | .frame,
110 | .shadow {
111 |   padding: 2.4rem;
112 | }
113 | 
114 | .radius {
115 |   border-radius: .4rem;
116 | }
117 | 
118 | .alignright {
119 |   float: right;
120 | }
121 | 
122 | .alignleft {
123 |   float: left;
124 | }
125 | 
126 | .aligncenter {
127 |   margin-left: auto;
128 |   margin-right: auto;
129 |   text-align: center;
130 | }
131 | 
132 | img.aligncenter,
133 | figure.aligncenter {
134 |   display: block;
135 |   margin-bottom: .8rem;
136 |   margin-top: .8rem;
137 | }
138 | 
139 | img.alignleft,
140 | figure.alignleft,
141 | img.alignright,
142 | figure.alignright,
143 | img.aligncenter,
144 | figure.aligncenter {
145 |   margin-bottom: 3.2rem;
146 |   margin-top: 3.2rem;
147 | }
148 | 
149 | img.alignright,
150 | svg.alignright,
151 | figure.alignright {
152 |   margin: .8rem 0 .8rem 2.4rem;
153 | }
154 | 
155 | img.alignleft,
156 | svg.alignleft,
157 | figure.alignleft {
158 |   margin: .8rem 2.4rem .8rem 0;
159 | }
160 | 
161 | $sizes: 80, 70, 60, 50, 40, 30, 20;
162 | 
163 | /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */
164 | @media (min-width: 1024px) {
165 |   @each $size in $sizes {
166 |     .size-#{$size} {
167 |       width: $size * 1%;
168 |     }
169 |   }
170 | }
171 | 
172 | pre,
173 | code {
174 |   font-family: 'Cousine', monospace;
175 | }
176 | 
177 | pre {
178 |   font-size: 1.6rem;
179 |   line-height: 2.4rem;
180 |   overflow: auto;
181 |   padding: 2.4rem;
182 |   text-align: left;
183 |   white-space: pre-wrap;
184 |   width: 100%;
185 |   word-wrap: break-word;
186 | 
187 |   & + p {
188 |     margin-top: 3.2rem;
189 |   }
190 | 
191 |   code {
192 |     padding: 0;
193 |   }
194 | }
195 | 
196 | code {
197 |   padding: .4rem;
198 | }
199 | 


--------------------------------------------------------------------------------
/src/js/modules/slide.js:
--------------------------------------------------------------------------------
  1 | import DOM from '../utils/dom';
  2 | 
  3 | const CLASSES = {
  4 |   SLIDE: 'slide',
  5 |   CURRENT: 'current'
  6 | };
  7 | 
  8 | const Events = {
  9 |   ENTER: 'dom:enter',
 10 |   LEAVE: 'dom:leave',
 11 |   DISABLE: 'slide:disable',
 12 |   ENABLE: 'slide:enable',
 13 |   SHOW: 'slide:show'
 14 | };
 15 | 
 16 | /**
 17 |  * Wrapper for the Slide section.
 18 |  */
 19 | class Slide {
 20 |   /**
 21 |    * Bootstraps the slide by saving some data, adding a class and hiding it.
 22 |    * @param {Element} el Section element.
 23 |    * @param {number} i Zero based index of the slide.
 24 |    */
 25 |   constructor(el, i) {
 26 |     /**
 27 |      * @type {Element}
 28 |      */
 29 |     this.el = el;
 30 |     /**
 31 |      * The section's parent.
 32 |      * @type {Node}
 33 |      */
 34 |     this.parent = el.parentNode;
 35 |     /**
 36 |      * @type {number}
 37 |      */
 38 |     this.i = i;
 39 | 
 40 |     this.el.id = this.el.id ? this.el.id : `section-${(i + 1)}`;
 41 |     this.el.classList.add(CLASSES.SLIDE);
 42 | 
 43 |     // Hide slides by default
 44 |     this.hide();
 45 |   }
 46 | 
 47 |   /**
 48 |    * Hides the node and removes the class that makes it "active".
 49 |    */
 50 |   hide() {
 51 |     DOM.hide(this.el);
 52 |     this.el.classList.remove(CLASSES.CURRENT);
 53 |   }
 54 | 
 55 |   /**
 56 |    * Shows the node and adds the class that makes it "active".
 57 |    */
 58 |   show() {
 59 |     DOM.show(this.el);
 60 |     this.el.classList.add(CLASSES.CURRENT);
 61 |     this.fire_(Events.SHOW);
 62 |   }
 63 | 
 64 |   /**
 65 |    * Moves the section to the bottom of the section's list.
 66 |    * @fires Slide#dom:leave
 67 |    * @fires Slide#dom:enter
 68 |    */
 69 |   moveAfterLast() {
 70 |     const last = this.parent.childNodes[this.parent.childElementCount - 1];
 71 | 
 72 |     this.fire_(Events.LEAVE);
 73 |     this.parent.insertBefore(this.el, last.nextSibling);
 74 |     this.fire_(Events.ENTER);
 75 |   }
 76 | 
 77 |   /**
 78 |    * Moves the section to the top of the section's list.
 79 |    * @fires Slide#dom:leave
 80 |    * @fires Slide#dom:enter
 81 |    */
 82 |   moveBeforeFirst() {
 83 |     const first = this.parent.childNodes[0];
 84 | 
 85 |     this.fire_(Events.LEAVE);
 86 |     this.parent.insertBefore(this.el, first);
 87 |     this.fire_(Events.ENTER);
 88 |   }
 89 | 
 90 |   /**
 91 |    * Fires an enable event.
 92 |    * @fires Slide#slide:enable
 93 |    */
 94 |   enable() {
 95 |     this.fire_(Events.ENABLE);
 96 |   }
 97 | 
 98 |   /**
 99 |    * Fires a disable event.
100 |    * @fires Slide#slide:disable
101 |    */
102 |   disable() {
103 |     this.fire_(Events.DISABLE);
104 |   }
105 | 
106 |   /**
107 |    * Fires an event passing the slide instance on the detail.
108 |    * @param {String} name Name of the event to fire.
109 |    * @private
110 |    */
111 |   fire_(name) {
112 |     DOM.fireEvent(this.el, name, {
113 |       slide: this
114 |     });
115 |   }
116 | 
117 |   /**
118 |    * Checks whether an element is a valid candidate to be a slide by ensuring
119 |    * it's a "section" element.
120 |    * @param {Element} el Element to be checked.
121 |    * @return {boolean} Whether is candidate or not.
122 |    */
123 |   static isCandidate(el) {
124 |     return el.nodeType === 1 && el.tagName === 'SECTION';
125 |   }
126 | 
127 |   /**
128 |    * Gets the section element from an inner element.
129 |    * @param {Node} el
130 |    * @return {{section: ?Node, i: ?number}} A map with the section and the
131 |    * position of the section.
132 |    */
133 |   static getSectionFromEl(el) {
134 |     let parent = el;
135 |     let section = null;
136 |     let i = null;
137 | 
138 |     while (parent.parentElement &&
139 |           !parent.classList.contains(CLASSES.SLIDE)) {
140 |       parent = parent.parentElement;
141 |     }
142 | 
143 |     if (parent.classList.contains(CLASSES.SLIDE)) {
144 |       section = parent;
145 |       i = parseInt(section.id.replace('section-', ''), 10);
146 |     }
147 | 
148 |     return {section, i};
149 |   }
150 | }
151 | 
152 | export {
153 |   Slide as default,
154 |   Events
155 | };
156 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
  1 | {
  2 |   "env": {
  3 |     "jest/globals": true,
  4 |     "browser": true
  5 |   },
  6 |   "parserOptions": {
  7 |     "ecmaVersion": 6,
  8 |     "sourceType": "module"
  9 |   },
 10 |   "plugins": [
 11 |     "jest"
 12 |   ],
 13 |   "rules": {
 14 |     "no-cond-assign": 0,
 15 |     "no-console": 2,
 16 |     "no-constant-condition": 2,
 17 |     "no-control-regex": 2,
 18 |     "no-debugger": 2,
 19 |     "no-dupe-args": 2,
 20 |     "no-dupe-keys": 2,
 21 |     "no-duplicate-case": 2,
 22 |     "no-empty-character-class": 2,
 23 |     "no-empty": [2, {
 24 |       "allowEmptyCatch": true
 25 |     }],
 26 |     "no-ex-assign": 2,
 27 |     "no-extra-boolean-cast": 2,
 28 |     "no-extra-semi": 2,
 29 |     "no-func-assign": 2,
 30 |     "no-inner-declarations": 2,
 31 |     "no-invalid-regexp": 2,
 32 |     "no-irregular-whitespace": 2,
 33 |     "no-obj-calls": 2,
 34 |     "no-regex-spaces": 2,
 35 |     "no-sparse-arrays": 2,
 36 |     "no-unexpected-multiline": 2,
 37 |     "no-unreachable": 2,
 38 |     "no-unsafe-finally": 2,
 39 |     "use-isnan": 2,
 40 |     "valid-jsdoc": [2, {
 41 |       "requireParamDescription": false,
 42 |       "requireReturnDescription": false,
 43 |       "requireReturn": false,
 44 |       "prefer": {"returns": "return"}
 45 |     }],
 46 |     "valid-typeof": 2,
 47 |     "max-len": [1, 80, 2],
 48 | 
 49 |     // Best Practices
 50 |     "eqeqeq": 0,
 51 |     "guard-for-in": 2,
 52 |     "no-alert": 0,
 53 |     "no-caller": 2,
 54 |     "no-case-declarations": 2,
 55 |     "no-empty-pattern": 2,
 56 |     "no-extend-native": 2,
 57 |     "no-extra-bind": 2,
 58 |     "no-fallthrough": 2,
 59 |     "no-invalid-this": 2,
 60 |     "no-multi-spaces": 2,
 61 |     "no-multi-str": 2,
 62 |     "no-new-wrappers": 2,
 63 |     "no-octal": 2,
 64 |     "no-redeclare": 2,
 65 |     "no-self-assign": 2,
 66 |     "no-throw-literal": 2,
 67 |     "no-unused-labels": 2,
 68 |     "no-with": 2,
 69 |     "no-delete-var": 2,
 70 |     "no-undef": 2,
 71 |     "no-unused-vars": [2, {"args": "none"}],
 72 |     // Stylistic Issues
 73 |     // ----------------------------------------------
 74 |     "array-bracket-spacing": [2, "never"],
 75 |     "brace-style": 2,
 76 |     "camelcase": [2, {"properties": "never"}],
 77 |     "comma-dangle": [2, "never"],
 78 |     "comma-spacing": 2,
 79 |     "comma-style": 2,
 80 |     "computed-property-spacing": 2,
 81 |     "eol-last": 2,
 82 |     "func-call-spacing": 2,
 83 |     "key-spacing": 2,
 84 |     "keyword-spacing": 0,
 85 |     "linebreak-style": 2,
 86 |     "new-cap": 2,
 87 |     "no-array-constructor": 2,
 88 |     "no-mixed-spaces-and-tabs": 2,
 89 |     "no-multiple-empty-lines": [2, {"max": 2}],
 90 |     "no-new-object": 2,
 91 |     "no-trailing-spaces": 2,
 92 |     "object-curly-spacing": 2,
 93 |     "one-var": [2, {
 94 |       "var": "never",
 95 |       "let": "never",
 96 |       "const": "never"
 97 |     }],
 98 |     "padded-blocks": [2, "never"],
 99 |     "quote-props": [2, "consistent"],
100 |     "quotes": [2, "single", {"allowTemplateLiterals": true}],
101 |     "require-jsdoc": [2, {
102 |       "require": {
103 |         "FunctionDeclaration": true,
104 |         "MethodDefinition": true,
105 |         "ClassDeclaration": true
106 |       }
107 |     }],
108 |     "semi-spacing": 2,
109 |     "semi": 2,
110 |     "space-before-blocks": 2,
111 |     "space-before-function-paren": [2, "never"],
112 |     "spaced-comment": [2, "always"],
113 |     "space-in-parens": [2, "never"],
114 | 
115 |     // ECMAScript 6
116 |     // http://eslint.org/docs/rules/#ecmascript-6
117 |     // ------------------------------------------
118 |     "arrow-parens": [2, "as-needed"],
119 |     "constructor-super": 2,
120 |     "generator-star-spacing": [2, "after"],
121 |     "no-const-assign": 0,
122 |     "no-dupe-class-members": 0,
123 |     "no-new-symbol": 2,
124 |     "no-this-before-super": 2,
125 |     "no-var": 2,
126 |     "prefer-rest-params": 2,
127 |     "prefer-spread": 2,
128 |     "prefer-const": 2,
129 |     "prefer-arrow-callback": 2,
130 |     "prefer-template": 2,
131 |     "require-yield": 2,
132 |     "rest-spread-spacing": 2,
133 |     "yield-star-spacing": [2, "after"]
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/static/images/logos/microsoft.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="224px" height="48px" viewBox="0 0 224 48" enable-background="new 0 0 224 48" xml:space="preserve">  <image id="image0" width="224" height="48" x="0" y="0"
 4 |     xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAAAwCAMAAAA/zYb8AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
 5 | AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB8lBMVEUAAADyUCLyUCLzUCLs
 6 | ViB4wQCAugGAugGAugF8ugHyUCLsViB4wQCAugHyUCLsViB4wQCAugF6enp3d3d3d3d3d3d3d3d3
 7 | d3d3d3d3d3d5eXl2dnZ3d3d3d3d3d3d3d3d3d3d2dnZ3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3
 8 | d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3
 9 | d3eJh2l3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d6enp3d3d3d3d2dnZ4eHh3d3d3d3d3
10 | d3d3d3d3d3d6enp4wQB3d3eDg4OTk5O6urq3t7eYmJiEhISWlpaXl5eOjo7/Sxb/Shb/Sxb4URRw
11 | wQB5ugF5ugF3d3e8vLyEhIR0dHSMjIzmVC2HugGRkZGTk5N9fX2AgIAOoOX3uQLAwMAAqfsAqfwA
12 | qfsNqu3/ugD/uQL/uQL/uQL/uQJ9fX23t7d5eXkCpO8QpeH/ugD/uQKCgoICpO//ugCZmZmJiYmG
13 | hoaoqKhubm59fX0CpO8CpO8CpO8BpPYQpeH/ugD/uQL/uQL/uQLyUCL4SiSAugF3d3d2dnZzc3N1
14 | dXVxcXFubm54eHj/SxZsbGwAo/wCpO//uQL///+m9xGSAAAAlnRSTlMAb93LLIHey9A7kT2sSYw3
15 | okYjYmlobz4OGAYmqfbuLUZrX2o0XWTX5cBCu88cVeoWObZKr5mdw/uzyqdR4wKyuHOUTKShx1mI
16 | CpF4fYRPMIzx3fur1MBdMiBm1C8dL37m8TKS9ecSB6f2TAcHrRTPdAcHPn7m8TKS/ObsO9UN6ZE3
17 | rEbhjKKXZYUn6PFv5MvRLIHey9DELPzNAAAAAWJLR0SlLrlKLwAAAAd0SU1FB+AKCAMTO4c2l4MA
18 | AAcFSURBVGje7Zn3fxs1FMBFy2iBMuwMj9i5xHFiOx6x48R27Hhl2E6cZpF0UspyBzQto6ySsAoU
19 | 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" />
52 | </svg>
53 | 


--------------------------------------------------------------------------------
/src/scss/utils/_reset.scss:
--------------------------------------------------------------------------------
  1 | // sass-lint:disable no-vendor-prefixes
  2 | /*
  3 | =========================================
  4 | 0. CSS Reset & Normalize
  5 | =========================================
  6 | */
  7 | html,
  8 | body,
  9 | div,
 10 | span,
 11 | applet,
 12 | object,
 13 | iframe,
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4,
 18 | h5,
 19 | h6,
 20 | p,
 21 | blockquote,
 22 | pre,
 23 | a,
 24 | abbr,
 25 | acronym,
 26 | address,
 27 | big,
 28 | cite,
 29 | code,
 30 | del,
 31 | dfn,
 32 | em,
 33 | img,
 34 | ins,
 35 | kbd,
 36 | q,
 37 | s,
 38 | samp,
 39 | small,
 40 | strike,
 41 | strong,
 42 | sub,
 43 | sup,
 44 | tt,
 45 | var,
 46 | b,
 47 | u,
 48 | i,
 49 | center,
 50 | dl,
 51 | dt,
 52 | dd,
 53 | ol,
 54 | ul,
 55 | li,
 56 | fieldset,
 57 | form,
 58 | label,
 59 | legend,
 60 | table,
 61 | caption,
 62 | tbody,
 63 | tfoot,
 64 | thead,
 65 | tr,
 66 | th,
 67 | td,
 68 | article,
 69 | aside,
 70 | canvas,
 71 | details,
 72 | embed,
 73 | figure,
 74 | figcaption,
 75 | footer,
 76 | header,
 77 | menu,
 78 | nav,
 79 | output,
 80 | ruby,
 81 | section,
 82 | summary,
 83 | time,
 84 | mark,
 85 | audio,
 86 | video {
 87 |   border: 0;
 88 |   font: inherit;
 89 |   font-size: 100%;
 90 |   margin: 0;
 91 |   padding: 0;
 92 |   vertical-align: baseline;
 93 | }
 94 | 
 95 | article,
 96 | aside,
 97 | details,
 98 | figcaption,
 99 | figure,
100 | footer,
101 | header,
102 | main,
103 | menu,
104 | nav,
105 | section,
106 | summary {
107 |   display: block;
108 | }
109 | 
110 | body {
111 |   line-height: 1;
112 | }
113 | 
114 | blockquote,
115 | q {
116 |   quotes: '' '';
117 | }
118 | 
119 | blockquote:before,
120 | blockquote:after,
121 | q:before,
122 | q:after {
123 |   content: '';
124 | }
125 | 
126 | table {
127 |   border-collapse: collapse;
128 |   border-spacing: 0;
129 |   margin-bottom: 24px;
130 |   width: 100%;
131 | }
132 | 
133 | html {
134 |   -ms-text-size-adjust: 100%;
135 |   -webkit-text-size-adjust: 100%;
136 |   box-sizing: border-box;
137 | }
138 | 
139 | *,
140 | *::before,
141 | *::after {
142 |   box-sizing: inherit;
143 | }
144 | 
145 | audio,
146 | canvas,
147 | progress,
148 | video {
149 |   display: inline-block;
150 |   vertical-align: baseline;
151 | }
152 | 
153 | embed,
154 | iframe,
155 | object {
156 |   max-width: 100%;
157 | }
158 | 
159 | audio:not([controls]) {
160 |   display: none;
161 |   height: 0;
162 | }
163 | 
164 | [hidden],
165 | template {
166 |   display: none;
167 | }
168 | 
169 | ul {
170 |   list-style: square;
171 |   text-indent: inherit;
172 | }
173 | 
174 | ol {
175 |   list-style: decimal;
176 | }
177 | 
178 | b,
179 | strong {
180 |   font-weight: 600;
181 | }
182 | 
183 | a {
184 |   background-color: transparent;
185 | }
186 | 
187 | a:active,
188 | a:hover {
189 |   outline: 0;
190 | }
191 | 
192 | sup,
193 | sub {
194 |   font-size: .75em;
195 |   height: 0;
196 |   line-height: 2.2em;
197 |   position: relative;
198 |   vertical-align: baseline;
199 | }
200 | 
201 | sup {
202 |   bottom: 1ex;
203 | }
204 | 
205 | sub {
206 |   top: .5ex;
207 | }
208 | 
209 | small {
210 |   font-size: .75em;
211 |   line-height: 1.72;
212 | }
213 | 
214 | big {
215 |   font-size: 1.25em;
216 | }
217 | 
218 | hr {
219 |   border: 0;
220 |   clear: both;
221 |   display: block;
222 |   height: 1px;
223 |   margin: 3.2rem auto;
224 |   text-align: center;
225 |   width: 100%;
226 | }
227 | 
228 | h2 + hr,
229 | h3 + hr {
230 |   margin-bottom: 4.8rem;
231 | }
232 | 
233 | p + hr {
234 |   margin-bottom: 4rem;
235 | }
236 | 
237 | dfn,
238 | cite,
239 | em,
240 | i {
241 |   font-style: italic;
242 | }
243 | 
244 | abbr,
245 | acronym {
246 |   cursor: help;
247 | }
248 | 
249 | mark,
250 | ins {
251 |   padding: 0 4px;
252 |   text-decoration: none;
253 |   text-shadow: none;
254 | 
255 | }
256 | 
257 | ::-moz-selection {
258 |   text-shadow: none;
259 | }
260 | 
261 | ::selection {
262 |   text-shadow: none;
263 | }
264 | 
265 | img {
266 |   border: 0;
267 |   height: auto;
268 |   max-width: 100%;
269 | }
270 | 
271 | img:hover {
272 |   opacity: .9;
273 | }
274 | 
275 | svg:not(:root) {
276 |   overflow: hidden;
277 | }
278 | 
279 | figure {
280 |   line-height: 0;
281 |   margin: 0;
282 |   position: relative;
283 | }
284 | 
285 | optgroup {
286 |   font-weight: bold;
287 | }
288 | 
289 | td,
290 | th {
291 |   padding: 0;
292 | }
293 | 
294 | dt {
295 |   font-weight: bold;
296 | }
297 | 
298 | dd {
299 |   margin: 0;
300 | }
301 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # WebSlides = Create stories with Karma
  2 | 
  3 | [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)
  4 | [![Release](https://img.shields.io/github/release/webslides/webslides.svg)](https://github.com/webslides/webslides/releases/latest)
  5 | [![codecov](https://codecov.io/gh/webslides/WebSlides/branch/master/graph/badge.svg)](https://codecov.io/gh/webslides/WebSlides)
  6 | [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/jlantunez/8)
  7 | [![Twitter](https://img.shields.io/twitter/url/https/github.com/webslides/webslides.svg?style=social)](https://twitter.com/webslides)
  8 | 
  9 | Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — [https://webslides.tv/demos](https://webslides.tv/demos).
 10 | 
 11 | * * *
 12 | ### Download
 13 | Simply choose a demo and customize it in seconds. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).
 14 | * * *
 15 | 
 16 | 
 17 | ### What's in the download?
 18 | 
 19 | The download includes demos and images (devices and logos). 
 20 | All content is for demo purposes only. Images are property of their respective owners.
 21 | 
 22 | ```
 23 | webslides/
 24 | ├── index.html
 25 | ├── css/
 26 | │   ├── base.css
 27 | │   └── colors.css
 28 | │   └── svg-icons.css (optional)
 29 | ├── js/
 30 | │   ├── webslides.js
 31 | │   └── svg-icons.js (optional)
 32 | └── demos/
 33 | └── images/
 34 | ```
 35 | 
 36 | ## Features
 37 | 
 38 | - Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
 39 | - Slide counter.
 40 | - Permalinks: go to a specific slide.
 41 | - Autoslide.
 42 | - Click to nav.
 43 | - Simple CSS alignments. Put content wherever you want (vertical centering...)
 44 | - 40+ components: background images/videos, quotes, cards, covers...
 45 | - Flexible blocks with auto-fill and equal height.
 46 | - Fonts: Roboto, Maitree (Serif), and San Francisco.
 47 | - Vertical rhythm (use multiples of 8).
 48 | 
 49 | ## Markup
 50 | 
 51 | - Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
 52 | - Each parent `<section>` in the `#webslides` element is an individual slide.
 53 | 
 54 | ```html
 55 | <article id="webslides">
 56 |     <section>
 57 |         <h1>Slide 1</h1>
 58 |     </section>
 59 |     <section class="bg-black aligncenter">
 60 |     <!-- .wrap = container 1200px -->
 61 |         <div class="wrap">
 62 |             <h1>Slide 2</h1>
 63 |         </div>
 64 |     </section>
 65 | </article>
 66 | ```
 67 | 
 68 | ### Vertical Sliding
 69 | 
 70 | ```html
 71 | <article id="webslides" class="vertical">
 72 | ```
 73 | 
 74 | ### CSS Syntax (classes)
 75 | 
 76 | - Typography: `.text-landing`, `.text-data`, `.text-intro`...
 77 | - Background Colors: `.bg-primary`, `.bg-apple`, `.bg-blue`...
 78 | - Background Images: `.background`,`.background-center-bottom`...
 79 | - Cards: `.card-50`, `.card-40`...
 80 | - Flexible Blocks: `.flexblock.clients`, `.flexblock.metrics`...
 81 | 
 82 | ### Extensions
 83 | 
 84 | You can add:
 85 | 
 86 | - [Unsplash](https://unsplash.com) photos
 87 | - [animate.css](https://daneden.github.io/animate.css)
 88 | - [particles.js](https://github.com/VincentGarreau/particles.js)
 89 | - [Animate on scroll](http://michalsnik.github.io/aos/) (Useful for longform articles)
 90 | - [pt](http://williamngan.github.io/pt/)
 91 | 
 92 | ### Dive In!
 93 | 
 94 | - Do not miss [our demos](https://webslides.tv/). 
 95 | - Want to get techie? Read [our wiki](https://github.com/webslides/WebSlides/wiki):
 96 |   - [FAQ](https://github.com/webslides/WebSlides/wiki)
 97 |   - [Core API](https://github.com/webslides/WebSlides/wiki/Core-API)
 98 |   - [Plugin Docs](https://github.com/webslides/WebSlides/wiki/Plugin-docs)
 99 |   - [Plugin Development](https://github.com/webslides/WebSlides/wiki/Plugin-development)
100 |  
101 | ### Credits
102 | 
103 | - WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).
104 | - Javascript: [@Belelros](https://twitter.com/Belelros) and [@LuisSacristan](https://twitter.com/luissacristan).
105 | - Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).
106 | 


--------------------------------------------------------------------------------
/src/js/plugins/navigation.js:
--------------------------------------------------------------------------------
  1 | import DOM from '../utils/dom';
  2 | 
  3 | const ELEMENT_ID = {
  4 |   NAV: 'navigation',
  5 |   NEXT: 'next',
  6 |   PREV: 'previous',
  7 |   COUNTER: 'counter'
  8 | };
  9 | 
 10 | const LABELS = {
 11 |   VERTICAL: {
 12 |     NEXT: '↓',
 13 |     PREV: '↑'
 14 |   },
 15 |   HORIZONTAL: {
 16 |     NEXT: '→',
 17 |     PREV: '←'
 18 |   }
 19 | };
 20 | 
 21 | /**
 22 |  * Navigation plugin.
 23 |  */
 24 | export default class Navigation {
 25 |   /**
 26 |    * @param {WebSlides} wsInstance The WebSlides instance
 27 |    * @constructor
 28 |    */
 29 |   constructor(wsInstance) {
 30 |     const arrowLabels = wsInstance.isVertical ?
 31 |         LABELS.VERTICAL : LABELS.HORIZONTAL;
 32 |     /**
 33 |      * Navigation element.
 34 |      * @type {Element}
 35 |      */
 36 |     this.el = DOM.createNode('div', 'navigation');
 37 |     /**
 38 |      * Next button.
 39 |      * @type {Element}
 40 |      */
 41 |     this.next = Navigation.createArrow(ELEMENT_ID.NEXT, arrowLabels.NEXT);
 42 |     /**
 43 |      * Prev button.
 44 |      * @type {Element}
 45 |      */
 46 |     this.prev = Navigation.createArrow(ELEMENT_ID.PREV, arrowLabels.PREV);
 47 |     /**
 48 |      * Counter Element.
 49 |      * @type {Element}
 50 |      */
 51 |     this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER, wsInstance);
 52 |     /**
 53 |      * @type {WebSlides}
 54 |      * @private
 55 |      */
 56 |     this.ws_ = wsInstance;
 57 | 
 58 |     this.el.appendChild(this.next);
 59 |     this.el.appendChild(this.prev);
 60 |     this.el.appendChild(this.counter);
 61 | 
 62 |     this.ws_.el.appendChild(this.el);
 63 |     this.slides = Array.prototype.slice.call(
 64 |       document.querySelectorAll('#webslides section')).map(s => s.id);
 65 | 
 66 |     this.bindEvents_();
 67 |   }
 68 | 
 69 |   /**
 70 |    * Bind all events for the navigation.
 71 |    * @private
 72 |    */
 73 |   bindEvents_() {
 74 |     this.ws_.el.addEventListener(
 75 |       'ws:slide-change', this.onSlideChanged_.bind(this));
 76 |     this.next.addEventListener('click', this.onButtonClicked_.bind(this));
 77 |     this.prev.addEventListener('click', this.onButtonClicked_.bind(this));
 78 |     this.counter.addEventListener('click', this.onButtonClicked_.bind(this));
 79 |     document.body.addEventListener('click', this.onBodyClicked_.bind(this));
 80 |   }
 81 | 
 82 |   /**
 83 |    * Whenever the body is clicked, check if the element has [data-slide] attr
 84 |    * and if so, navigate to it.
 85 |    * @param {MouseEvent} event Click event
 86 |    */
 87 |   onBodyClicked_(event) {
 88 |     const matches = document.body.matches || document.body.msMatchesSelector;
 89 |     let el;
 90 | 
 91 |     if (matches.call(event.target, '[data-slide]')) {
 92 |       el = event.target;
 93 |     } else if (matches.call(event.target, '[data-slide] *')) {
 94 |       el = event.target.querySelector('[data-slide]');
 95 |     }
 96 | 
 97 |     if (el) {
 98 |       event.preventDefault();
 99 |       const i = this.slides.indexOf(el.dataset.slide);
100 |       this.ws_.goToSlide(i);
101 |     }
102 |   }
103 | 
104 |   /**
105 |    * Updates the counter inside the navigation.
106 |    * @param {string|number} current Current slide number.
107 |    * @param {string|number} max Max slide number.
108 |    */
109 |   updateCounter(current, max) {
110 |     if (this.ws_.options.showIndex) {
111 |       this.counter.childNodes[0].textContent = `${current} / ${max}`;
112 |     } else {
113 |       this.counter.textContent = `${current} / ${max}`;
114 |     }
115 |   }
116 | 
117 |   /**
118 |    * Creates an arrow to navigate.
119 |    * @param {!String} id Desired ID for the arrow.
120 |    * @param {!String} text Desired text for the arrow.
121 |    * @return {Element} The arrow element.
122 |    */
123 |   static createArrow(id, text) {
124 |     const arrow = DOM.createNode('a', id, text);
125 |     arrow.href = '#';
126 |     arrow.title = 'Arrow Keys';
127 | 
128 |     return arrow;
129 |   }
130 | 
131 |   /**
132 |    * Creates the navigation counter.
133 |    * @param {!String} id Desired ID for the counter.
134 |    * @param {WebSlides} ws_ WebSlides object.
135 |    * @return {Element} The arrow element.
136 |    */
137 |   static createCounter(id, ws_) {
138 |     const counter = DOM.createNode('span', id);
139 |     if (ws_.options.showIndex) {
140 |       const link = document.createElement('a');
141 |       link.href = '#';
142 |       link.title = 'View all slides';
143 |       counter.appendChild(link);
144 |     }
145 | 
146 |     return counter;
147 |   }
148 | 
149 |   /**
150 |    * Slide Change event handler. Will update the text on the navigation.
151 |    * @param {CustomEvent} event
152 |    * @private
153 |    */
154 |   onSlideChanged_(event) {
155 |     this.updateCounter(event.detail.currentSlide, event.detail.slides);
156 |   }
157 | 
158 |   /**
159 |    * Handles clicks on the next/prev buttons.
160 |    * @param {MouseEvent} event
161 |    * @private
162 |    */
163 |   onButtonClicked_(event) {
164 |     event.preventDefault();
165 |     if (event.target === this.next) {
166 |       this.ws_.goNext();
167 |     } else if (event.target === this.prev) {
168 |       this.ws_.goPrev();
169 |     } else {
170 |       this.ws_.toggleZoom();
171 |     }
172 |   }
173 | }
174 | 


--------------------------------------------------------------------------------
/test/modules/slide.test.js:
--------------------------------------------------------------------------------
  1 | import Slide from '../../src/js/modules/slide';
  2 | 
  3 | describe('Slide module', () => {
  4 |   test('Candidate', () => {
  5 |     const valid = document.createElement('section');
  6 |     const invalid = document.createElement('p');
  7 | 
  8 |     expect(Slide.isCandidate(valid)).toBe(true);
  9 |     expect(Slide.isCandidate(invalid)).toBe(false);
 10 |   });
 11 | 
 12 |   describe('Instance behaviour', () => {
 13 |     let ws;
 14 |     let slides;
 15 | 
 16 |     beforeEach(() => {
 17 |       const template =
 18 |         '<section><div class="content">Content</div></section>'
 19 |         .repeat(5);
 20 |       document.body.innerHTML = `<div id="webslides">${template}</div>`;
 21 | 
 22 |       const el = document.getElementById('webslides');
 23 |       slides = [];
 24 | 
 25 |       el.querySelectorAll('section').forEach((el, i) => {
 26 |         slides.push(new Slide(el, i));
 27 |       });
 28 | 
 29 |       ws = {
 30 |         el,
 31 |         slides
 32 |       };
 33 |     });
 34 | 
 35 |     afterEach(() => {
 36 |       document.body.innerHTML = '';
 37 |     });
 38 | 
 39 |     test('Slides should have some properties', () => {
 40 |       const slide = ws.slides[0];
 41 | 
 42 |       expect(slide.el).toBeInstanceOf(Element);
 43 |       expect(slide.el.id).toBe('section-1');
 44 |       expect(slide.parent).toBeInstanceOf(Element);
 45 |       expect(slide.parent.id).toBe('webslides');
 46 |       expect(slide.i).toBe(0);
 47 |     });
 48 | 
 49 |     test('Slides should get a slide class and be hidden', () => {
 50 |       const slide = ws.slides[0];
 51 | 
 52 |       expect(slide.el.classList.contains('slide')).toBe(true);
 53 |       expect(slide.el.style.display).toBe('none');
 54 |     });
 55 | 
 56 |     test('Show/hide', () => {
 57 |       const slide = ws.slides[0];
 58 | 
 59 |       slide.show();
 60 |       expect(slide.el.style.display).not.toBe('none');
 61 |       expect(slide.el.classList.contains('current')).toBe(true);
 62 | 
 63 |       slide.hide();
 64 |       expect(slide.el.style.display).toBe('none');
 65 |       expect(slide.el.classList.contains('current')).not.toBe(true);
 66 |     });
 67 | 
 68 |     test('Events', () => {
 69 |       const slide = ws.slides[0];
 70 |       const leave = jest.fn();
 71 |       const enter = jest.fn();
 72 |       const enable = jest.fn();
 73 |       const disable = jest.fn();
 74 |       const show = jest.fn();
 75 | 
 76 |       slide.el.addEventListener('dom:leave', leave);
 77 |       slide.el.addEventListener('dom:enter', enter);
 78 |       slide.el.addEventListener('slide:enable', enable);
 79 |       slide.el.addEventListener('slide:disable', disable);
 80 |       slide.el.addEventListener('slide:show', show);
 81 | 
 82 |       expect(enter).not.toHaveBeenCalled();
 83 |       expect(leave).not.toHaveBeenCalled();
 84 |       expect(enable).not.toHaveBeenCalled();
 85 |       expect(disable).not.toHaveBeenCalled();
 86 |       expect(show).not.toHaveBeenCalled();
 87 | 
 88 |       slide.enable();
 89 |       expect(enter).not.toHaveBeenCalled();
 90 |       expect(leave).not.toHaveBeenCalled();
 91 |       expect(enable).toHaveBeenCalledTimes(1);
 92 |       expect(disable).not.toHaveBeenCalled();
 93 |       expect(show).not.toHaveBeenCalled();
 94 |       enable.mockClear();
 95 | 
 96 |       slide.disable();
 97 |       expect(enter).not.toHaveBeenCalled();
 98 |       expect(leave).not.toHaveBeenCalled();
 99 |       expect(enable).not.toHaveBeenCalled();
100 |       expect(disable).toHaveBeenCalledTimes(1);
101 |       expect(show).not.toHaveBeenCalled();
102 |       disable.mockClear();
103 | 
104 |       slide.moveAfterLast();
105 |       expect(enter).toHaveBeenCalledTimes(1);
106 |       expect(leave).toHaveBeenCalledTimes(1);
107 |       expect(enable).not.toHaveBeenCalled();
108 |       expect(disable).not.toHaveBeenCalled();
109 |       expect(show).not.toHaveBeenCalled();
110 |       enter.mockClear();
111 |       leave.mockClear();
112 | 
113 |       slide.moveBeforeFirst();
114 |       expect(enter).toHaveBeenCalledTimes(1);
115 |       expect(leave).toHaveBeenCalledTimes(1);
116 |       expect(enable).not.toHaveBeenCalled();
117 |       expect(disable).not.toHaveBeenCalled();
118 |       expect(show).not.toHaveBeenCalled();
119 |       enter.mockClear();
120 |       leave.mockClear();
121 | 
122 |       slide.show();
123 |       expect(show).toHaveBeenCalled();
124 |     });
125 | 
126 |     test('Move', () => {
127 |       const wsEl = document.getElementById('webslides');
128 |       const slide = ws.slides[0];
129 | 
130 |       expect(wsEl.lastChild).not.toBe(slide.el);
131 |       slide.moveAfterLast();
132 |       expect(wsEl.lastChild).toBe(slide.el);
133 | 
134 |       expect(wsEl.firstChild).not.toBe(slide.el);
135 |       slide.moveBeforeFirst();
136 |       expect(wsEl.firstChild).toBe(slide.el);
137 |     });
138 | 
139 |     test('Get section from el', () => {
140 |       const wsEl = document.getElementById('webslides');
141 |       const el = ws.slides[3].el.firstChild;
142 |       const found = Slide.getSectionFromEl(el);
143 | 
144 |       expect(found.section.id).toBe('section-4');
145 |       expect(found.i).toBe(4);
146 | 
147 |       const notFound = Slide.getSectionFromEl(wsEl);
148 |       expect(notFound.section).toBeNull();
149 |       expect(notFound.i).toBeNull();
150 |     });
151 |   });
152 | });
153 | 


--------------------------------------------------------------------------------
/static/images/logos/apple.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="240px" height="240px" viewBox="0 0 240 240" enable-background="new 0 0 240 240" xml:space="preserve">  <image id="image0" width="240" height="240" x="0" y="0"
 4 |     xlink:href="data:image/png;base64,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" />
68 | </svg>
69 | 


--------------------------------------------------------------------------------
/src/js/plugins/zoom.js:
--------------------------------------------------------------------------------
  1 | import DOM from '../utils/dom';
  2 | import Keys from '../utils/keys';
  3 | import scrollTo from '../utils/scroll-to';
  4 | import Slide from '../modules/slide';
  5 | 
  6 | const CLASSES = {
  7 |   ZOOM: 'grid',
  8 |   DIV: 'column',
  9 |   WRAP: 'wrap-zoom',
 10 |   WRAP_CONTAINER: 'wrap',
 11 |   CURRENT: 'current',
 12 |   SLIDE: 'slide',
 13 |   ZOOM_ENABLED: 'ws-ready-zoom'
 14 | };
 15 | 
 16 | const ID = 'webslides-zoomed';
 17 | 
 18 | /**
 19 |  * Zoom plugin.
 20 |  */
 21 | export default class Zoom {
 22 |   /**
 23 |    * @param {WebSlides} wsInstance The WebSlides instance
 24 |    * @constructor
 25 |    */
 26 |   constructor(wsInstance) {
 27 |     /**
 28 |      * @type {WebSlides}
 29 |      * @private
 30 |      */
 31 |     this.ws_ = wsInstance;
 32 | 
 33 |     /**
 34 |      * @type {WebSlides}
 35 |      * @private
 36 |      */
 37 |     this.zws_ = {};
 38 | 
 39 |     /**
 40 |      * @type {boolean}
 41 |      * @private
 42 |      */
 43 |     this.isZoomed_ = false;
 44 | 
 45 |     this.preBuildZoom_();
 46 |     document.body.addEventListener('keydown', this.onKeyDown.bind(this));
 47 |   }
 48 | 
 49 |   /**
 50 |    * On key down handler. Will decide if Zoom in or out
 51 |    * @param {Event} event Key down event.
 52 |    */
 53 |   onKeyDown(event) {
 54 |     if (!this.isZoomed_ && Keys.MINUS.some(key => key === event.which)) {
 55 |       this.zoomIn();
 56 |     } else if (this.isZoomed_ &&
 57 |       (Keys.PLUS.some(key => key === event.which) ||
 58 |         event.which === Keys.ESCAPE)) {
 59 |       this.zoomOut();
 60 |     }
 61 |   }
 62 | 
 63 |   /**
 64 |    * Prepare zoom structure, scales the slides and uses a grid layout
 65 |    * to show them.
 66 |    */
 67 |   preBuildZoom_() {
 68 |     // Clone #webslides element
 69 |     this.zws_.el = this.ws_.el.cloneNode();
 70 |     this.zws_.el.id = ID;
 71 |     this.zws_.wrap = DOM.createNode('div');
 72 |     this.zws_.wrap.className = CLASSES.WRAP_CONTAINER;
 73 |     this.zws_.el.appendChild(this.zws_.wrap);
 74 |     this.zws_.grid = DOM.createNode('div');
 75 |     this.zws_.grid.className = CLASSES.ZOOM;
 76 |     this.zws_.wrap.appendChild(this.zws_.grid);
 77 | 
 78 |     this.zws_.el.addEventListener('click', () => this.toggleZoom());
 79 | 
 80 |     // Clone the slides
 81 |     this.zws_.slides = [].map.call(this.ws_.slides,
 82 |         (slide, i) => {
 83 |           const s_ = slide.el.cloneNode(true);
 84 |           this.zws_.grid.appendChild(s_);
 85 |           return new Slide(s_, i);
 86 |         });
 87 | 
 88 |     this.disable();
 89 |     DOM.after(this.zws_.el, this.ws_.el);
 90 | 
 91 |     // Creates the container for each slide
 92 |     this.zws_.slides.forEach(elem => this.createSlideBlock_(elem));
 93 |   }
 94 | 
 95 |   /**
 96 |    * Creates a block structure around the slide.
 97 |    * @param {Element} elem slide element.
 98 |    */
 99 |   createSlideBlock_(elem) {
100 |     // Wraps the slide around a container
101 |     const wrap = DOM.wrap(elem.el, 'div');
102 |     wrap.className = CLASSES.WRAP;
103 |     wrap.setAttribute('id', `zoomed-${elem.el.getAttribute('id')}`);
104 | 
105 |     // Slide container, need due to flexbox styles
106 |     const div = DOM.wrap(wrap, 'div');
107 |     div.className = CLASSES.DIV;
108 | 
109 |     // Adding some layer for controlling click events
110 |     const divLayer = DOM.createNode('div');
111 |     divLayer.className = 'zoom-layer';
112 |     divLayer.addEventListener('click', e => {
113 |       e.stopPropagation();
114 |       this.zoomOut();
115 |       this.ws_.goToSlide(elem.i);
116 |     });
117 |     wrap.appendChild(divLayer);
118 | 
119 |     // Slide number
120 |     const slideNumber = DOM.createNode('p', '', `${elem.i + 1}`);
121 |     slideNumber.className = 'text-slide-number';
122 |     div.appendChild(slideNumber);
123 |   }
124 | 
125 |   /**
126 |    * Toggles zoom.
127 |    */
128 |   toggleZoom() {
129 |     if (this.isZoomed_) {
130 |       this.zoomOut();
131 |     } else {
132 |       this.zoomIn();
133 |     }
134 |   }
135 | 
136 |   /**
137 |    * Zoom In the slider, scales the slides and uses a grid layout to show them.
138 |    */
139 |   zoomIn() {
140 |     if (!this.ws_.options.showIndex) return;
141 |     this.enable();
142 |     const currentId = this.ws_.currentSlide_.el.id;
143 |     const zoomedCurrent = this.zws_.el
144 |       .querySelector(`.${CLASSES.WRAP}.${CLASSES.CURRENT}`);
145 | 
146 |     if (zoomedCurrent) {
147 |       zoomedCurrent.classList.remove(CLASSES.CURRENT);
148 |     }
149 | 
150 |     const actualCurrent = this.zws_.el
151 |       .querySelector(`#zoomed-${currentId}`);
152 |     actualCurrent.classList.add(CLASSES.CURRENT);
153 | 
154 |     this.isZoomed_ = true;
155 |     document.documentElement.classList.add(CLASSES.ZOOM_ENABLED);
156 | 
157 |     setTimeout(() => {
158 |       this.ws_.disable();
159 |       this.zws_.el.classList.add('in');
160 |       const wrapCSS = window.getComputedStyle(this.zws_.grid);
161 |       const scrollingElement = document.body;
162 | 
163 |       scrollTo(actualCurrent.parentNode.offsetTop
164 |         + DOM.parseSize(wrapCSS.paddingTop), 50, () => {}, scrollingElement);
165 |     }, 50);
166 |   }
167 | 
168 |   /**
169 |    * Zoom Out the slider, remove scale from the slides.
170 |    */
171 |   zoomOut() {
172 |     if (!this.ws_.options.showIndex) return;
173 |     this.zws_.el.classList.remove('in');
174 | 
175 |     setTimeout(() => {
176 |       this.ws_.enable();
177 |       this.disable();
178 |       this.isZoomed_ = false;
179 |       document.documentElement.classList.remove(CLASSES.ZOOM_ENABLED);
180 |     }, 400);
181 |   }
182 | 
183 |   /**
184 |    * Hides the zoom container
185 |    */
186 |   disable() {
187 |     this.zws_.el.classList.add('disabled');
188 |   }
189 | 
190 |   /**
191 |    * Shows the zoom container
192 |    */
193 |   enable() {
194 |     this.zws_.el.classList.remove('disabled');
195 |   }
196 | }
197 | 


--------------------------------------------------------------------------------
/src/js/plugins/touch.js:
--------------------------------------------------------------------------------
  1 | import MobileDetector from '../utils/mobile-detector';
  2 | 
  3 | const EVENTS = {
  4 |   touch: {
  5 |     START: 'touchstart',
  6 |     MOVE: 'touchmove',
  7 |     END: 'touchend'
  8 |   },
  9 |   pointer: {
 10 |     START: 'pointerdown',
 11 |     MOVE: 'pointermove',
 12 |     END: 'pointerup'
 13 |   }
 14 | };
 15 | 
 16 | /**
 17 |  * Touch plugin.
 18 |  */
 19 | export default class Touch {
 20 |   /**
 21 |    * @param {WebSlides} wsInstance The WebSlides instance
 22 |    * @constructor
 23 |    */
 24 |   constructor(wsInstance) {
 25 |     /**
 26 |      * @type {WebSlides}
 27 |      * @private
 28 |      */
 29 |     this.ws_ = wsInstance;
 30 | 
 31 |     /**
 32 |      * Start position for the X coordinate.
 33 |      * @type {number}
 34 |      * @private
 35 |      */
 36 |     this.startX_ = 0;
 37 | 
 38 |     /**
 39 |      * Start position for the Y coordinate.
 40 |      * @type {number}
 41 |      * @private
 42 |      */
 43 |     this.startY_ = 0;
 44 | 
 45 |     /**
 46 |      * Start position for the X coord.
 47 |      * @type {number}
 48 |      * @private
 49 |      */
 50 |     this.endX_ = 0;
 51 | 
 52 |     /**
 53 |      * Start position for the Y coord.
 54 |      * @type {number}
 55 |      * @private
 56 |      */
 57 |     this.endY_ = 0;
 58 | 
 59 |     /**
 60 |      * Whether is enabled or not. Only enabled for touch devices.
 61 |      * @type {boolean}
 62 |      * @private
 63 |      */
 64 |     this.isEnabled = false;
 65 | 
 66 |     /**
 67 |      * Whether is a gesture or not.
 68 |      * @type {boolean}
 69 |      * @private
 70 |      */
 71 |     this.isGesture = false;
 72 | 
 73 |     /**
 74 |      * Stores start touch event (x, y).
 75 |      * @type {array}
 76 |      * @private
 77 |      */
 78 |     this.startTouches = [];
 79 | 
 80 |     /**
 81 |      * Stores end touch event (x, y).
 82 |      * @type {array}
 83 |      * @private
 84 |      */
 85 |     this.endTouches = [];
 86 | 
 87 |     let events;
 88 | 
 89 |     if (MobileDetector.isAny()) {
 90 |       // Likely IE
 91 |       if (window.PointerEvent && (
 92 |           MobileDetector.isWindows() || MobileDetector.isWindowsPhone())) {
 93 |         events = EVENTS.pointer;
 94 |       } else {
 95 |         events = EVENTS.touch;
 96 |       }
 97 | 
 98 |       this.isEnabled = true;
 99 |       document.addEventListener(events.START, this.onStart_.bind(this), false);
100 |       document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
101 |       document.addEventListener(events.END, this.onStop_.bind(this), false);
102 |     }
103 |   }
104 | 
105 |   /**
106 |    * Start touch handler. Saves starting points.
107 |    * @param {Event} event The Touch event.
108 |    * @private
109 |    */
110 |   onStart_(event) {
111 |     if (this.ws_.isDisabled()) {
112 |       return;
113 |     }
114 | 
115 |     const info = Touch.normalizeEventInfo(event);
116 | 
117 |     if (event.touches.length === 1) {
118 |       this.startX_ = info.x;
119 |       this.startY_ = info.y;
120 |       this.endX_ = info.x;
121 |       this.endY_ = info.y;
122 |     } else if (event.touches.length > 1) {
123 |       this.startTouches = Touch.getTouchCoordinates(event);
124 |       this.endTouches = this.startTouches;
125 |       this.isGesture = true;
126 |     }
127 |   }
128 | 
129 |   /**
130 |    * Move touch handler. Saves end points.
131 |    * @param {Event} event The Touch event.
132 |    * @private
133 |    */
134 |   onMove_(event) {
135 |     if (this.ws_.isDisabled()) {
136 |       return;
137 |     }
138 | 
139 |     const info = Touch.normalizeEventInfo(event);
140 | 
141 |     if (this.isGesture) {
142 |       this.endTouches = Touch.getTouchCoordinates(event);
143 |     } else {
144 |       this.endX_ = info.x;
145 |       this.endY_ = info.y;
146 |     }
147 |   }
148 | 
149 |   /**
150 |    * Stop touch handler. Checks if it needs to make any actions.
151 |    * @private
152 |    */
153 |   onStop_() {
154 |     if (this.ws_.isDisabled()) {
155 |       return;
156 |     }
157 | 
158 |     if (this.isGesture) {
159 |       const startDistance = Math.sqrt(
160 |         Math.pow(this.startTouches[0].x - this.startTouches[1].x, 2) +
161 |         Math.pow(this.startTouches[0].y - this.startTouches[1].y, 2)
162 |       );
163 |       const endDistance = Math.sqrt(
164 |         Math.pow(this.endTouches[0].x - this.endTouches[1].x, 2) +
165 |         Math.pow(this.endTouches[0].y - this.endTouches[1].y, 2)
166 |       );
167 |       if (startDistance > endDistance) {
168 |         // Pinch gesture
169 |         this.ws_.toggleZoom();
170 |       }
171 |       this.isGesture = false;
172 |     } else {
173 |       const diffX = this.startX_ - this.endX_;
174 |       const diffY = this.startY_ - this.endY_;
175 | 
176 |       // It's an horizontal drag
177 |       if (Math.abs(diffX) > Math.abs(diffY)) {
178 |         if (diffX < -this.ws_.options.slideOffset) {
179 |           this.ws_.goPrev();
180 |         } else if(diffX > this.ws_.options.slideOffset) {
181 |           this.ws_.goNext();
182 |         }
183 |       }
184 |     }
185 |   }
186 | 
187 |   /**
188 |    * Get X,Y coordinates from touch pointers.
189 |    * @param {Event} event
190 |    * @return {Object}
191 |    */
192 |   static getTouchCoordinates(event) {
193 |     return [
194 |       {
195 |         x: event.touches[0].clientX,
196 |         y: event.touches[0].clientY
197 |       },
198 |       {
199 |         x: event.touches[1].clientX,
200 |         y: event.touches[1].clientY
201 |       }
202 |     ];
203 |   }
204 | 
205 |   /**
206 |    * Normalizes an event to deal with differences between PointerEvent and
207 |    * TouchEvent.
208 |    * @param {Event} event
209 |    * @return {Object} Normalised touch points.
210 |    */
211 |   static normalizeEventInfo(event) {
212 |     let touchEvent = {pageX: 0, pageY: 0};
213 | 
214 |     if (typeof event.changedTouches !== 'undefined') {
215 |       touchEvent = event.changedTouches[0];
216 |     } else if (typeof event.originalEvent !== 'undefined' &&
217 |         typeof event.originalEvent.changedTouches !== 'undefined') {
218 |       touchEvent = event.originalEvent.changedTouches[0];
219 |     }
220 | 
221 |     const x = event.offsetX || event.layerX || touchEvent.pageX;
222 |     const y = event.offsetY || event.layerY || touchEvent.pageY;
223 | 
224 |     return {x, y};
225 |   }
226 | }
227 | 


--------------------------------------------------------------------------------
/static/images/logos/instagram.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="169px" height="48px" viewBox="0 0 169 48" enable-background="new 0 0 169 48" xml:space="preserve">  <image id="image0" width="169" height="48" x="0" y="0"
 4 |     xlink:href="data:image/png;base64,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" />
82 | </svg>
83 | 


--------------------------------------------------------------------------------
/src/js/utils/dom.js:
--------------------------------------------------------------------------------
  1 | import WSCustomEvent from './custom-event';
  2 | 
  3 | let transitionEvent = '';
  4 | let animationEvent = '';
  5 | 
  6 | /**
  7 |  * Static class for DOM helper.
  8 |  */
  9 | export default class DOM {
 10 |   /**
 11 |    * Creates a node with optional parameters.
 12 |    * @param {string} tag The name of the tag of the needed element.
 13 |    * @param {string} id The desired id for the element. It defaults to an
 14 |    * empty string.
 15 |    * @param {string} text The desired text to go inside of the element. It
 16 |    * defaults to an empty string.
 17 |    * @return {Element}
 18 |    */
 19 |   static createNode(tag, id = '', text = '') {
 20 |     const node = document.createElement(tag);
 21 |     if (id) {
 22 |       node.id = id;
 23 |     }
 24 | 
 25 |     if (text) {
 26 |       node.textContent = text;
 27 |     }
 28 | 
 29 |     return node;
 30 |   }
 31 | 
 32 |   /**
 33 |    * Listens for an event once.
 34 |    * @param {Element} el Element to listen to.
 35 |    * @param {string} event Event Type.
 36 |    * @param {Function} callback Function to execute once the event fires.
 37 |    */
 38 |   static once(el, event, callback) {
 39 |     const cb = e => {
 40 |       if (e.target === el) {
 41 |         el.removeEventListener(event, cb);
 42 |         callback(e);
 43 |       }
 44 |     };
 45 | 
 46 |     el.addEventListener(event, cb, false);
 47 |   }
 48 | 
 49 |   /**
 50 |    * Gets the prefixed transitionend event.
 51 |    * @param {?Element} optEl Element to check
 52 |    * @return {string}
 53 |    */
 54 |   static getTransitionEvent(optEl) {
 55 |     if (transitionEvent && !optEl) {
 56 |       return transitionEvent;
 57 |     }
 58 | 
 59 |     transitionEvent = '';
 60 | 
 61 |     const el = optEl || document.createElement('ws');
 62 |     const transitions = {
 63 |       'transition': 'transitionend',
 64 |       'OTransition': 'oTransitionEnd',
 65 |       'MozTransition': 'transitionend',
 66 |       'WebkitTransition': 'webkitTransitionEnd'
 67 |     };
 68 |     const transitionNames = Object.keys(transitions);
 69 | 
 70 |     for (let i = 0, length = transitionNames.length;
 71 |           i < length && !transitionEvent; i++) {
 72 |       const transitionName = transitionNames[i];
 73 | 
 74 |       if (typeof el.style[transitionName] !== 'undefined') {
 75 |         transitionEvent = transitions[transitionName];
 76 |       }
 77 |     }
 78 | 
 79 |     return transitionEvent;
 80 |   }
 81 | 
 82 |   /**
 83 |    * Gets the prefixed animation end event.
 84 |    * @param {?Element} optEl Element to check
 85 |    * @return {string}
 86 |    */
 87 |   static getAnimationEvent(optEl) {
 88 |     if (animationEvent && !optEl) {
 89 |       return animationEvent;
 90 |     }
 91 | 
 92 |     animationEvent = 'animationend';
 93 | 
 94 |     const el = optEl || document.createElement('ws');
 95 |     const animations = {
 96 |       'animation': 'animationend',
 97 |       'OAnimation': 'oAnimationEnd',
 98 |       'MozAnimation': 'animationend',
 99 |       'WebkitAnimation': 'webkitAnimationEnd'
100 |     };
101 |     const animationNames = Object.keys(animations);
102 | 
103 |     for (let i = 0, length = animationNames.length;
104 |           i < length; i++) {
105 |       const animationName = animationNames[i];
106 | 
107 |       if (typeof el.style[animationName] !== 'undefined') {
108 |         animationEvent = animations[animationName];
109 |         break;
110 |       }
111 |     }
112 | 
113 |     return animationEvent;
114 |   }
115 | 
116 |   /**
117 |    * Hides an element setting the display to none.
118 |    * @param {Element} el Element to be hidden.
119 |    */
120 |   static hide(el) {
121 |     el.style.display = 'none';
122 |   }
123 | 
124 |   /**
125 |    * Shows an element by removing the display property. This is only intended
126 |    * to be used in conjunction with DOM.hide.
127 |    * @param {Element} el Element to be shown.
128 |    */
129 |   static show(el) {
130 |     el.style.display = '';
131 |   }
132 | 
133 |   /**
134 |    * Checks if the element is visible.
135 |    * @param {Element} el Element to check.
136 |    * @return {boolean}
137 |    */
138 |   static isVisible(el) {
139 |     return (el.offsetParent !== null);
140 |   }
141 | 
142 |   /**
143 |    * Fires a custom event on the given target.
144 |    * @param {Element} target The target of the event.
145 |    * @param {string} eventType The event type.
146 |    * @param {Object} eventInfo Optional parameter to provide additional data
147 |    * to the event.
148 |    */
149 |   static fireEvent(target, eventType, eventInfo = {}) {
150 |     const event = new WSCustomEvent(eventType, {
151 |       detail: eventInfo,
152 |       bubbles: true
153 |     });
154 | 
155 |     target.dispatchEvent(event);
156 |   }
157 | 
158 |   /**
159 |    * Converts an iterable to an array.
160 |    * @param {*} iterable Element to convert to array
161 |    * @return {Array} the element casted to an array.
162 |    */
163 |   static toArray(iterable) {
164 |     return [].slice.call(iterable);
165 |   }
166 | 
167 |   /**
168 |    * Checks whether the document has focus on an input or contenteditable
169 |    * element.
170 |    * @return {boolean} Whether the focused element is an input or content
171 |    * editable.
172 |    */
173 |   static isFocusableElement() {
174 |     let result = false;
175 | 
176 |     if (document.activeElement) {
177 |       const isContentEditable =
178 |           document.activeElement.contentEditable !== 'inherit' &&
179 |           document.activeElement.contentEditable !== undefined;
180 |       const isInput = ['INPUT', 'SELECT', 'OPTION', 'TEXTAREA']
181 |           .indexOf(document.activeElement.tagName) > -1;
182 |       result = isInput || isContentEditable;
183 |     }
184 | 
185 |     return result;
186 |   }
187 | 
188 |   /**
189 |    * Gets the integer value of a style property.
190 |    * @param {string} prop CSS property value.
191 |    * @return {Number} The property without the units.
192 |    */
193 |   static parseSize(prop) {
194 |     return Number(prop.replace(/[^\d\.]/g, ''));
195 |   }
196 | 
197 |   /**
198 |    * Wraps a HTML structure around an element.
199 |    * @param {Element} elem the element to be wrapped.
200 |    * @param {string} tag the new element tag.
201 |    * @return {Element} the new element.
202 |    */
203 |   static wrap(elem, tag) {
204 |     const wrap = document.createElement(tag);
205 |     elem.parentElement.insertBefore(wrap, elem);
206 |     wrap.appendChild(elem);
207 | 
208 |     return wrap;
209 |   }
210 | 
211 |   /**
212 |    * Inserts and element after another element.
213 |    * @param {Element} elem the element to be inserted.
214 |    * @param {Element} target the element to be inserted after.
215 |    */
216 |   static after(elem, target) {
217 |     const parent = target.parentNode;
218 | 
219 |     if (parent.lastChild === target) {
220 |       parent.appendChild(elem);
221 |     } else {
222 |       parent.insertBefore(elem, target.nextSibling);
223 |     }
224 |   }
225 | }
226 | 


--------------------------------------------------------------------------------
/static/images/logos/nyt.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="338px" height="48px" viewBox="0 0 338 48" enable-background="new 0 0 338 48" xml:space="preserve">  <image id="image0" width="338" height="48" x="0" y="0"
 4 |     xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVIAAAAwCAMAAAB0QAI4AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
 5 | AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABMlBMVEUAAAAxMzQyMzUyMzYy
 6 | MzUxMzQxMzQyMjQwMzQwMDEyMzUyMzUxMTQwMjMxMjQzNDYwMjMvMTQxMjQxMzQyMzUzMzUxMTMx
 7 | MjQwMDIyMzUyMzUxMjUxNDUzNDYzNDYxMzUwMjQxMzQwMzUyNDUzNDYyMzUzNDYzNDYxMzUxMzQz
 8 | NDYyMzU0NDYzNDYyMzUwMTMxMzMyMzUzNDYyNDU0NDcyMzUyNDYyMjUyMzUzNDYyMzUxMjUyNDUy
 9 | NDYyMzUxMzQyMzUwMzMyMTU0MzcyMzYxMzQzMzYyNDYyMzYzNDYwMjMyMzYyMzYxMjQkKSsxMzQx
10 | MjQyMzQyMjUxMTUyLTMzNDY5NDk7Pj0rMS8nKDBOIVAzNDY3ODozNTY1Njc0NDc0NDYzNDc4Mzsz
11 | Njg1NDf///81BZtlAAAAW3RSTlMAH3Ksa0eVoCsRZGghAl7zJgo4gJmFTAYEso0VnfzYbhg2MWDp
12 | eve1iknape76vA5DkdK41sbJUMHkfVPw3nZZqT4b52I8KLDO6y5c3DRsI4dWvkHS4auormNqSalF
13 | MwAAAAFiS0dEZbXdiJ8AAAAHdElNRQfgCggDFC6lquWvAAAP4UlEQVRo3u2b+V8iuRLAAyLncIkc
14 | ggpeeKEgKCB4Kyioq8g6O/tik+6B//9veKlK+kDRQce3+/azkx+g6SOdfFNVqaoEQl4Wm33CQf4t
15 | ZdLpcv8v6vV4nU7fF+OnP0CDob+7rz9Xwp5XL01FpqOxuP4r4Zl5Sn7661Ozc4pCKZ2fTWfkKZ9C
16 | F+RhYGrMWuzTyUXLb08Yzy79L8G9WjLLK69cic3THqM0u7q2rp/aoJuf/HpbTqWysK1tbx7OJSnb
17 | FleTWmGsWmI9RaN0xzxRLMGnc/dDbfJE9spOGx5OwdBUqp73PF7ZUn2jr0S+633t9/edKC2ZIOvH
18 | PhfpJjUL69G5aq3u4nSyGbg4QQ1xfbPYDkDOqWbo0DRjh0fHJ8r2R5p0Oser0miaH/q9HkDEynA+
19 | 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
87 | YII=" />
88 | </svg>
89 | 


--------------------------------------------------------------------------------
/static/images/logos/airbnb.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="156px" height="48px" viewBox="0 0 156 48" enable-background="new 0 0 156 48" xml:space="preserve">  <image id="image0" width="156" height="48" x="0" y="0"
 4 |     xlink:href="data:image/png;base64,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" />
89 | </svg>
90 | 


--------------------------------------------------------------------------------
/src/js/plugins/youtube.js:
--------------------------------------------------------------------------------
  1 | /* global YT */
  2 | import DOM from '../utils/dom';
  3 | import {default as Slide, Events as SlideEvents} from '../modules/slide';
  4 | 
  5 | /**
  6 |  * Player wrapper around the YT player. This is mostly to get around the event
  7 |  * in which we need to play a video which player isn't ready yet.
  8 |  */
  9 | class Player {
 10 |   /**
 11 |    * @param {Element} el
 12 |    */
 13 |   constructor(el) {
 14 |     /**
 15 |      * Whether the Player is ready or not.
 16 |      * @type {boolean}
 17 |      */
 18 |     this.ready = false;
 19 |     /**
 20 |      * Ready callback.
 21 |      * @type {?function}
 22 |      */
 23 |     this.onReadyCb = null;
 24 |     /**
 25 |      * Slide element in which the video is located.
 26 |      * @type {Node}
 27 |      */
 28 |     this.slide = Slide.getSectionFromEl(el).section;
 29 |     /**
 30 |      * Whether it should autoplay on load or not.
 31 |      * @type {boolean}
 32 |      */
 33 |     this.autoplay = typeof el.dataset.autoplay !== 'undefined';
 34 |     /**
 35 |      * Whether the video should be muted or not.
 36 |      * @type {boolean}
 37 |      */
 38 |     this.isMuted = typeof el.dataset.mute !== 'undefined';
 39 | 
 40 |     /**
 41 |      * Options with which the player is created.
 42 |      * @type {Object}
 43 |      */
 44 |     this.options = {
 45 |       videoId: el.dataset.youtubeId,
 46 |       playerVars: this.getPlayerVars(el),
 47 |       events: {
 48 |         onReady: this.onPlayerReady.bind(this)
 49 |       }
 50 |     };
 51 | 
 52 |     /**
 53 |      * The iframe in which the video is loaded.
 54 |      * @type {Element}
 55 |      */
 56 |     this.el = el;
 57 |     /**
 58 |      * Timeout id.
 59 |      * @type {?number}
 60 |      */
 61 |     this.timeout = null;
 62 | 
 63 |     this.create();
 64 |   }
 65 | 
 66 |   /**
 67 |    * Destroys the iframe. Saves the current time in case it gets restored.
 68 |    */
 69 |   destroy() {
 70 |     this.currentTime = this.player.getCurrentTime();
 71 |     this.player.destroy();
 72 |     this.player = null;
 73 |     this.el = this.slide.querySelector('[data-youtube]');
 74 |     this.ready = false;
 75 |   }
 76 | 
 77 |   /**
 78 |    * Creates the player.
 79 |    */
 80 |   create() {
 81 |     this.player = new YT.Player(this.el, this.options);
 82 |     this.el = this.player.getIframe();
 83 |   }
 84 | 
 85 |   /**
 86 |    * Player ready callback. Will play the video if it was intended to be played
 87 |    * and will also call any pending callbacks.
 88 |    */
 89 |   onPlayerReady() {
 90 |     this.ready = true;
 91 | 
 92 |     // Restoring the current time if saved
 93 |     if (this.currentTime) {
 94 |       this.player.seekTo(this.currentTime, true);
 95 |       this.player.pauseVideo();
 96 |       this.currentTime = null;
 97 |     }
 98 | 
 99 |     if (this.timeout && this.player.getPlayerState() !== 1) {
100 |       this.play();
101 |     }
102 | 
103 |     if (this.onReadyCb) {
104 |       this.onReadyCb();
105 |       this.onReadyCb = null;
106 |     }
107 |   }
108 | 
109 |   /**
110 |    * Plays the video.
111 |    */
112 |   play() {
113 |     if (this.ready) {
114 |       this.timeout = setTimeout(() => {
115 |         this.timeout = null;
116 |       }, 1000);
117 | 
118 |       if (this.isMuted) {
119 |         this.player.mute();
120 |       } else {
121 |         this.player.unMute();
122 |       }
123 | 
124 |       this.player.playVideo();
125 |     } else {
126 |       this.onReadyCb = this.play;
127 |     }
128 |   }
129 | 
130 |   /**
131 |    * Pause playing the video if it's already playing.
132 |    */
133 |   pause() {
134 |     if (this.player &&
135 |         this.player.pauseVideo &&
136 |         this.player.getPlayerState() === 1) {
137 |       this.player.pauseVideo();
138 |     }
139 |   }
140 | 
141 |   /**
142 |    * Parses the element to have the proper variables.
143 |    * @param {Element} element
144 |    * @return {Object} Player variables.
145 |    */
146 |   getPlayerVars(element) {
147 |     const vars = {
148 |       modestbranding: 1,
149 |       rel: 0,
150 |       origin: window.location.origin
151 |     };
152 | 
153 |     if (this.slide.classList.contains('fullscreen')) {
154 |       // Disabling keyboard interaction for fullscreenvideos
155 |       vars.disablekb = 1;
156 |     }
157 | 
158 |     if (typeof element.dataset.noControls !== 'undefined') {
159 |       vars.controls = 0;
160 |       vars.showinfo = 0;
161 |     }
162 | 
163 |     if (typeof element.dataset.loop !== 'undefined') {
164 |       vars.loop = 1;
165 |       vars.playlist = element.dataset.youtubeId;
166 |     }
167 | 
168 |     return vars;
169 |   }
170 | }
171 | 
172 | /**
173 |  * Video plugin.
174 |  */
175 | export default class YouTube {
176 |   /**
177 |    * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
178 |    * @param {WebSlides} wsInstance The WebSlides instance
179 |    */
180 |   constructor(wsInstance) {
181 |     /**
182 |      * @type {WebSlides}
183 |      * @private
184 |      */
185 |     this.ws_ = wsInstance;
186 | 
187 |     this.videos = DOM.toArray(this.ws_.el.querySelectorAll('[data-youtube]'));
188 | 
189 |     if (this.videos.length) {
190 |       this.inject();
191 |     }
192 |   }
193 | 
194 |   /**
195 |    * Once the YouTube API is ready this gets called so we can start the videos.
196 |    */
197 |   onYTReady() {
198 |     this.videos.forEach(video => {
199 |       const player = new Player(video);
200 | 
201 |       if (typeof video.dataset.autoplay !== 'undefined') {
202 |         const {i} = Slide.getSectionFromEl(player.el);
203 |         const slide = this.ws_.slides[i - 1];
204 | 
205 |         slide.player = player;
206 | 
207 |         slide.el.addEventListener(SlideEvents.ENABLE, YouTube.onSlideEvent);
208 |         slide.el.addEventListener(SlideEvents.DISABLE, YouTube.onSlideEvent);
209 |         slide.el.addEventListener(SlideEvents.ENTER, YouTube.onSlideEvent);
210 |         slide.el.addEventListener(SlideEvents.LEAVE, YouTube.onSlideEvent);
211 | 
212 |         if (this.ws_.currentSlide_ === slide) {
213 |           YouTube.onSectionEnabled(slide);
214 |         }
215 |       }
216 |     });
217 |   }
218 | 
219 |   /**
220 |    * Injects the YouTube iFrame API into the page.
221 |    */
222 |   inject() {
223 |     window.onYouTubeIframeAPIReady = this.onYTReady.bind(this);
224 |     const tag = document.createElement('script');
225 |     tag.src = `https://www.youtube.com/iframe_api`;
226 |     const firstScriptTag = document.getElementsByTagName('script')[0];
227 |     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
228 |   }
229 | 
230 |   /**
231 |    * Reacts to any event on the slide.
232 |    * @param {CustomEvent} event
233 |    */
234 |   static onSlideEvent(event) {
235 |     const slide = event.detail.slide;
236 | 
237 |     switch (event.type) {
238 |       case SlideEvents.ENABLE:
239 |         YouTube.onSectionEnabled(slide);
240 |         break;
241 |       case SlideEvents.DISABLE:
242 |         YouTube.onSectionDisabled(slide);
243 |         break;
244 |       case SlideEvents.LEAVE:
245 |         slide.player.destroy();
246 |         break;
247 |       case SlideEvents.ENTER:
248 |         slide.player.create();
249 |         break;
250 |     }
251 |   }
252 | 
253 |   /**
254 |    * On Section enable hook. Will play the video.
255 |    * @param {Slide} slide
256 |    */
257 |   static onSectionEnabled(slide) {
258 |     if (slide.player.autoplay) {
259 |       slide.player.play();
260 |     }
261 |   }
262 | 
263 |   /**
264 |    * On Section enable hook. Will pause the video.
265 |    * @param {Slide} slide
266 |    */
267 |   static onSectionDisabled(slide) {
268 |     slide.player.pause();
269 |   }
270 | }
271 | 


--------------------------------------------------------------------------------