adding

5 years ago · 4a792c79f2
--- a/demo.js
+++ b/demo.js
@ -0,0 +1,7 @@
 import * as riot from 'riot';
 import TinyOnePage from './src/TinyOnePage.riot';
 riot.register('tiny-one-page', TinyOnePage);
 // adding component with animate object
 riot.mount('tiny-one-page');
--- a/dist/css/demo.css
+++ b/dist/css/demo.css
@ -0,0 +1 @@
 .navbar{position:fixed;width:100%;text-align:center;background-color:#fff}.navbar li{display:inline-block;margin:0 .3em}.navbar li a{display:block;transition:all .1s ease-in-out}.navbar li.current a,.navbar li a:hover{transform:scale(1.3)}.section{padding:6em;line-height:1.8}
--- a/dist/index.html
+++ b/dist/index.html
@ -3,32 +3,66 @@
 <head lang="en">
    <meta charset="utf-8">
    <title>Tiny Hamburger | Demo 386 Top</title>
    <title>Tiny One Page | Demo</title>
    <link rel="shortcut icon" href="#" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" type="text/css" rel="stylesheet" />
    <link href="css/icomoon.css" type="text/css" rel="stylesheet" />
    <link href="css/fonts.css" type="text/css" rel="stylesheet" />
    <link href="css/demo-386-top.css" type="text/css" rel="stylesheet" />
    <link href="css/demo.css" type="text/css" rel="stylesheet" />
 </head>
 <body>
    <div class="panel">
        <tiny-hamburger>
            <nav>
        <tiny-one-page>
            <nav class="navbar">
                <ul>
                    <li><a class="current" href="index.html">Demo: 386 / Top</a></li>
                    <li><a href="demo-386-left.html">Demo: 386 / Left</a></li>
                    <li><a href="demo-flat-left.html">Demo: Flat / Left</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                </ul>
            </nav>
        </tiny-hamburger>
        </tiny-one-page>
        <section id="one" class="section">
            <h2>One</h2>
            <p>
                Lorem ipsum dolor amet tattooed prism activated charcoal, XOXO street art tacos small batch farm-to-table put a bird on it four loko vexillologist gluten-free. Direct trade mumblecore occupy fashion axe lo-fi. Plaid single-origin coffee asymmetrical typewriter fingerstache selvage try-hard. Offal glossier tacos man braid, readymade squid truffaut vexillologist thundercats franzen succulents portland photo booth. Trust fund raw denim heirloom, schlitz af pug succulents banh mi skateboard green juice fingerstache pop-up biodiesel +1 kombucha. Slow-carb wolf hexagon godard.
            </p>
            <p>
                Humblebrag chia yuccie trust fund lyft. La croix viral subway tile cronut messenger bag. Letterpress godard affogato ugh. Narwhal neutra dreamcatcher thundercats brunch normcore selfies.
            </p>
            <p>
                DIY neutra kinfolk cold-pressed. Taxidermy cold-pressed meh glossier disrupt, synth wayfarers portland kogi paleo organic squid. Put a bird on it bicycle rights banh mi biodiesel bitters cornhole gochujang chicharrones umami hell of quinoa kogi tousled cardigan poutine. Jianbing 90's kogi poke, af edison bulb cray hella everyday carry chicharrones bitters tote bag ennui asymmetrical. Salvia listicle etsy taxidermy mlkshk, dreamcatcher humblebrag banjo chambray fanny pack before they sold out ethical. Hot chicken cronut tilde, kale chips fixie ethical waistcoat small batch succulents hella.
            </p>
        </section>
        <section id="two" class="section">
            <h2>Two</h2>
            <p>
                Lorem ipsum dolor amet tattooed prism activated charcoal, XOXO street art tacos small batch farm-to-table put a bird on it four loko vexillologist gluten-free. Direct trade mumblecore occupy fashion axe lo-fi. Plaid single-origin coffee asymmetrical typewriter fingerstache selvage try-hard. Offal glossier tacos man braid, readymade squid truffaut vexillologist thundercats franzen succulents portland photo booth. Trust fund raw denim heirloom, schlitz af pug succulents banh mi skateboard green juice fingerstache pop-up biodiesel +1 kombucha. Slow-carb wolf hexagon godard.
            </p>
            <p>
                Humblebrag chia yuccie trust fund lyft. La croix viral subway tile cronut messenger bag. Letterpress godard affogato ugh. Narwhal neutra dreamcatcher thundercats brunch normcore selfies.
            </p>
            <p>
                DIY neutra kinfolk cold-pressed. Taxidermy cold-pressed meh glossier disrupt, synth wayfarers portland kogi paleo organic squid. Put a bird on it bicycle rights banh mi biodiesel bitters cornhole gochujang chicharrones umami hell of quinoa kogi tousled cardigan poutine. Jianbing 90's kogi poke, af edison bulb cray hella everyday carry chicharrones bitters tote bag ennui asymmetrical. Salvia listicle etsy taxidermy mlkshk, dreamcatcher humblebrag banjo chambray fanny pack before they sold out ethical. Hot chicken cronut tilde, kale chips fixie ethical waistcoat small batch succulents hella.
            </p>
        </section>
        <section id="three" class="section">
            <h2>Three</h2>
            <p>
                Lorem ipsum dolor amet tattooed prism activated charcoal, XOXO street art tacos small batch farm-to-table put a bird on it four loko vexillologist gluten-free. Direct trade mumblecore occupy fashion axe lo-fi. Plaid single-origin coffee asymmetrical typewriter fingerstache selvage try-hard. Offal glossier tacos man braid, readymade squid truffaut vexillologist thundercats franzen succulents portland photo booth. Trust fund raw denim heirloom, schlitz af pug succulents banh mi skateboard green juice fingerstache pop-up biodiesel +1 kombucha. Slow-carb wolf hexagon godard.
            </p>
            <p>
                Humblebrag chia yuccie trust fund lyft. La croix viral subway tile cronut messenger bag. Letterpress godard affogato ugh. Narwhal neutra dreamcatcher thundercats brunch normcore selfies.
            </p>
            <p>
                DIY neutra kinfolk cold-pressed. Taxidermy cold-pressed meh glossier disrupt, synth wayfarers portland kogi paleo organic squid. Put a bird on it bicycle rights banh mi biodiesel bitters cornhole gochujang chicharrones umami hell of quinoa kogi tousled cardigan poutine. Jianbing 90's kogi poke, af edison bulb cray hella everyday carry chicharrones bitters tote bag ennui asymmetrical. Salvia listicle etsy taxidermy mlkshk, dreamcatcher humblebrag banjo chambray fanny pack before they sold out ethical. Hot chicken cronut tilde, kale chips fixie ethical waistcoat small batch succulents hella.
            </p>
        </section>
    </div>
    <footer>
        <a target="_blank" href="https://github.com/HerrHase/tiny-hamburger">
            <i class="icon icon-github"></i>
        </a>
    </footer>
    <script src="js/demo-386-top.js"></script>
    <script src="js/demo.js"></script>
 </body>
 </html>
--- a/dist/js/demo.js
+++ b/dist/js/demo.js
--- a/mix-manifest.json
+++ b/mix-manifest.json
@ -0,0 +1,4 @@
 {
    "/dist/js/demo.js": "/dist/js/demo.js",
    "/dist/css/demo.css": "/dist/css/demo.css"
 }
--- a/src/TinyOnePage.riot
+++ b/src/TinyOnePage.riot
@ -1,8 +1,6 @@
 <tiny-one-page>
    <div class="tiny-one-page">
        <div>
            <div class="tiny-one-page__inner"></div>
        </div>
        <div class="tiny-one-page__inner"></div>
    </div>
    <script>
@ -21,6 +19,17 @@
            },
            /**
             *  getting innerHTML and remove
             *
             *
             */
            onBeforeMount()
            {
                this.content = this.root.innerHTML
                this.root.innerHTML = ''
            },
            /**
             *  setting innerHTML
             *
@ -38,22 +47,49 @@
                    }
                });
                document.addEventListener('scrollStart', this.handleScrollStart, false);
                document.addEventListener('scrollStop', this.handleScrollStop, false);
                window.addEventListener('scroll', this.handleScroll.bind(this), false);
                if (window.location.hash) {
                    this.$(".tiny-one-page__inner a[href$='/" + window.location.hash + "']").parent().addClass('current_page_item');
                    this.$(".tiny-one-page__inner a[href$='" + window.location.hash + "']")
                        .parentElement
                        .classList
                        .add('current');
                }
            },
            handleScrollStart(event) {
                this.$('.navigation li a').not("[href$='" + window.location.hash + "']").parent().removeClass('current_page_item');
            isVisible(element)
            {
                return (
                    ((element.offsetHeight + element.offsetTop) - this.options.offset) > window.pageYOffset
                );
            },
            handleScrollStop(event) {
                this.$('.navigation li a[href$='" + window.location.hash + "']").parent().addClass('current_page_item');
            }
            /**
             *
             *  @param  {[type]} event [description]
             *  @return {[type]}       [description]
             */
            handleScroll(event) {
                // get elements
                const elements = this.$$('.tiny-one-page__inner a');
                // if found
                let hasFound = false;
                elements.forEach(function(index, target) {
                    // get element by hash
                    const hash = target.hash;
                    if (this.isVisible(element, hash) && hasFound === false) {
                        target.add('current');
                        hasFound = true;
                    } else {
                        target.classList.remove('current');
                    }
                }.bind(this));
            }
        }
    </script>
--- a/src/demo.scss
+++ b/src/demo.scss
@ -0,0 +1,31 @@
 .navbar {
    position: fixed;
    width: 100%;
    text-align: center;
    background-color: white;
    li {
        display: inline-block;
        margin: 0 0.3em;
        a {
            display: block;
            transition: all .1s ease-in-out;
            &:hover {
                transform: scale(1.3);
            }
        }
        &.current {
            a {
                transform: scale(1.3);
            }
        }
    }
 }
 .section {
    padding: 6em;
    line-height: 1.8;
 }
--- a/webpack.mix.js
+++ b/webpack.mix.js
@ -0,0 +1,30 @@
 const mix = require('laravel-mix');
 /*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
 mix.webpackConfig({
    module: {
 		rules: [{
 			test: /\.riot$/,
 			exclude: /node_modules/,
 			use: [{
 				loader: '@riotjs/webpack-loader',
 				query: {
 					hot: false
 				}
 			}]
 		}
    ]}
 });
 mix.js('demo.js', 'dist/js')
 mix.sass('src/demo.scss', 'dist/css');