adding

README.md

@@ -0,0 +1,42 @@
+# Tiny One Page
+
+Part of Tiny Components, this is one of many Components for Frontend Development. It used the Framework [RiotJS v4](https://riot.js.org/).
+
+This Component is a One Page Menu.
+
+## Usage
+
+```html
+<tiny-one-page>
+    <nav>
+        <ul>
+            <li><a href="#">Home</a></li>
+            <li><a href="#">Blog</a></li>
+            <li><a href="#">Contact</a></li>
+        </ul>
+    </nav>
+</tiny-one-page>
+```
+
+## Animations
+
+Use the Class TinyOnePageAnimate to create your own Animations. You can inject
+your Animation Class while Mounting the Component.
+
+```js
+riot.mount('tiny-one-page', {
+    'animate': new TinyOnePageHeightAnimate()
+});
+```
+
+## Options
+
+Easy, there is at this moment only one options for ScrollSmooth.
+
+```js
+riot.mount('tiny-one-page', {
+    'options': {
+        'offset': 50
+    }
+});
+```

demo-386.js

@@ -6,5 +6,8 @@ riot.register('tiny-one-page', TinyOnePage);
 
 // adding component with animate object
 riot.mount('tiny-one-page', {
-    'animate': new TinyOnePageHeightAnimate()
+    'animate': new TinyOnePageHeightAnimate(),
+    'options': {
+        'offset': 70
+    }
 });

demo-386.scss

@@ -6,11 +6,14 @@
  */
 
 $text-color: #fff;
+
 $link-color: #fefe5b;
 $link-background-color: #008106;
 $background-color: #000084;
 $background-contrast-color: #bbbbbb;
 
+$color__text: #bbbbbb;
+$color__secondary: #00aaaa;
 
 /**
  * default elements
@@ -23,12 +26,37 @@ body {
     font-family: 'PxPlus IBM VGA8', sans-serif;
     font-style: normal;
     font-size: 1.2rem;
+    line-height: 1.3;
 }
 
 a {
     text-decoration: none;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-size: 18px;
+    font-weight: normal;
+    text-transform: uppercase;
+}
+
+.site-header {
+    padding: 20px 20px;
+    margin: 20px 0 20px;
+    color: #000;
+    background: $color__secondary;
+
+    h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
 }
 
+main {
+    margin: 50px 0;
+}
 
 /**
  * navigation
@@ -90,16 +118,6 @@ a {
     }
 }
 
-
-/**
- *
- *
- */
-main {
-    max-width: 600px;
-    margin: 2em auto 0;
-}
-
 /**
  * footer
  *
@@ -119,22 +137,6 @@ footer {
     }
 }
 
-
-/**
- * section
- *
- *
- */
-
-.section {
-    padding: 50px 0.8em;
-    line-height: 1.5;
-
-    @media (min-width: 768px) {
-        padding: 50px 0;
-    }
-}
-
 /**
  * icons
  *

dist/css/demo-386.css

@@ -1 +1 @@
-@font-face{font-family:PxPlus IBM VGA8;src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f);src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f?#iefix) format("embedded-opentype"),url(/fonts/PxPlus_IBM_VGA8.woff2?28087632ed5e0851a1ec27def2b1e73f) format("woff2"),url(/fonts/PxPlus_IBM_VGA8.woff?5f9b12f2cef3f405002438fafa0e41a6) format("woff"),url(/fonts/PxPlus_IBM_VGA8.ttf?8fa23fdc4e2cff030f42999bc1ede4b2) format("truetype"),url(/fonts/PxPlus_IBM_VGA8.svg?3000c157212c66cf53ad18f0d7b7a12f#PxPlus_IBM_VGA8) format("svg");font-weight:400;font-style:normal}body{color:#fff;background-color:#000084;font-family:PxPlus IBM VGA8,sans-serif;font-style:normal;font-size:1.2rem}a{text-decoration:none}.navbar{padding:10px;background-color:#bbb}@media (min-width:768px){.navbar{padding:0}}.navbar ul{list-style:none;padding:10px;margin:0;border:1px solid #000}@media (min-width:768px){.navbar ul{margin:0 0 0 10px;padding:0;border:none}}.navbar ul li{display:block;line-height:20px}@media (min-width:768px){.navbar ul li{display:inline-block}}.navbar ul li a{display:block;padding:4px 10px;color:#fff}@media (min-width:768px){.navbar ul li a{display:inline-block}}.navbar ul li.current a,.navbar ul li a:hover{color:#fff;background-color:#000}main{max-width:600px;margin:2em auto 0}footer{text-align:center;font-size:3rem;width:100%;background:#000;padding:.8em 0}footer i{color:#fff!important}.section{padding:50px .8em;line-height:1.5}@media (min-width:768px){.section{padding:50px 0}}[class*=" icon-tiny"],[class^=icon-tiny]{font-family:PxPlus IBM VGA8,sans-serif!important;font-style:normal;color:#fefe5b}.icon-tiny-one-page-open:after{content:"\2630"}.icon-tiny-one-page-close:after{content:"\2A2F"}.tiny-one-page__modal{position:fixed;top:0;left:0;width:100%;z-index:99;height:auto;max-height:0;overflow:hidden;transition:max-height .2s}@media (min-width:768px){.tiny-one-page__modal{max-height:none!important}}.tiny-one-page__button{position:fixed;top:0;right:0;font-size:1.8rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:.7em .8em;z-index:100}.tiny-one-page__button:focus,.tiny-one-page__button:hover{outline:none}.tiny-one-page__button:hover{cursor:pointer}@media (min-width:768px){.tiny-one-page__button{display:none}}
+@font-face{font-family:PxPlus IBM VGA8;src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f);src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f?#iefix) format("embedded-opentype"),url(/fonts/PxPlus_IBM_VGA8.woff2?28087632ed5e0851a1ec27def2b1e73f) format("woff2"),url(/fonts/PxPlus_IBM_VGA8.woff?5f9b12f2cef3f405002438fafa0e41a6) format("woff"),url(/fonts/PxPlus_IBM_VGA8.ttf?8fa23fdc4e2cff030f42999bc1ede4b2) format("truetype"),url(/fonts/PxPlus_IBM_VGA8.svg?3000c157212c66cf53ad18f0d7b7a12f#PxPlus_IBM_VGA8) format("svg");font-weight:400;font-style:normal}body{color:#fff;background-color:#000084;font-family:PxPlus IBM VGA8,sans-serif;font-style:normal;font-size:1.2rem;line-height:1.3}a{text-decoration:none}a:focus{outline:none}h1,h2,h3,h4,h5,h6{font-size:18px;font-weight:400;text-transform:uppercase}.site-header{padding:20px;margin:20px 0;color:#000;background:#0aa}.site-header h1,.site-header h2,.site-header h3,.site-header h4,.site-header h5,.site-header h6{margin:0}main{margin:50px 0}.navbar{padding:10px;background-color:#bbb}@media (min-width:768px){.navbar{padding:0}}.navbar ul{list-style:none;padding:10px;margin:0;border:1px solid #000}@media (min-width:768px){.navbar ul{margin:0 0 0 10px;padding:0;border:none}}.navbar ul li{display:block;line-height:20px}@media (min-width:768px){.navbar ul li{display:inline-block}}.navbar ul li a{display:block;padding:4px 10px;color:#fff}@media (min-width:768px){.navbar ul li a{display:inline-block}}.navbar ul li.current a,.navbar ul li a:hover{color:#fff;background-color:#000}footer{text-align:center;font-size:3rem;width:100%;background:#000;padding:.8em 0}footer i{color:#fff!important}[class*=" icon-tiny"],[class^=icon-tiny]{font-family:PxPlus IBM VGA8,sans-serif!important;font-style:normal;color:#fefe5b}.icon-tiny-one-page-open:after{content:"\2630"}.icon-tiny-one-page-close:after{content:"\2A2F"}.tiny-one-page__modal{position:fixed;top:0;left:0;width:100%;z-index:99;height:auto;max-height:0;overflow:hidden;transition:max-height .2s}@media (min-width:768px){.tiny-one-page__modal{max-height:none!important}}.tiny-one-page__button{position:fixed;top:0;right:0;font-size:1.8rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:.7em .8em;z-index:100}.tiny-one-page__button:focus,.tiny-one-page__button:hover{outline:none}.tiny-one-page__button:hover{cursor:pointer}@media (min-width:768px){.tiny-one-page__button{display:none}}

dist/index.html

@@ -8,6 +8,7 @@
     <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="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css" type="text/css" rel="stylesheet" />
     <link href="css/demo-386.css" type="text/css" rel="stylesheet" />
 </head>
 <body>
@@ -19,42 +20,62 @@
         </nav>
     </tiny-one-page>
     <main>
-        <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 class="container">
+            <div class="grid">
+                <div class="col-12">
+                    <section id="one" class="section">
+                        <header class="site-header">
+                            <h2>One</h2>
+                        </header>
+                        <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>
+            </div>
+            <div class="grid">
+                <div class="col-12">
+                    <section id="two" class="section">
+                        <header class="site-header">
+                            <h2>Two</h2>
+                        </header>
+                        <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>
+            </div>
+            <div class="grid">
+                <div class="col-12">
+                    <section id="three" class="section">
+                        <header class="site-header">
+                            <h2>Three</h2>
+                        </header>
+                        <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>
+            </div>
+        </div>
     </main>
     <footer>
         <a target="_blank" href="https://github.com/HerrHase/tiny-one-page">

src/TinyOnePage.riot.js

@@ -42,11 +42,15 @@
             {
                 isOpen: false,
                 animate: null,
-                namespace: 'tiny-one-page'
+                namespace: 'tiny-one-page',
+                options: {
+                    offset: 0
+                }
             },
 
             /**
-             *  getting innerHTML and remove
+             *  getting innerHTML and remove it
+             *  setting up a animate object
              *
              *
              */
@@ -56,6 +60,10 @@
                 this.state.animate = this.props.animate;
                 this.state.animate.setComponent(this);
 
+                if (this.props.options) {
+                    this.state.options = Object.assign(this.state.options, this.props.options);
+                }
+
                 this.content = this.root.innerHTML;
                 this.root.innerHTML = '';
             },
@@ -68,7 +76,7 @@
             onBeforeUnmount()
             {
                 document.addEventListener('click', this.handleClick.bind(this));
-                this.$('.tiny-one-page__inner a').removeEventListener('click', this.handleClose.bind(this));
+                this.$('.' + this.state.namespace + '__inner a').removeEventListener('click', this.handleClose.bind(this));
             },
 
             /**
@@ -79,19 +87,19 @@
             onMounted()
             {
                 // adding content to wrapper
-                const wrapper = this.$('.tiny-one-page__inner');
+                const wrapper = this.$('.' + this.state.namespace + '__inner');
                 wrapper.innerHTML = this.content;
 
                 // adding scroll smooth, get all elements with hash
-                this.scroll = new SmoothScroll('.tiny-one-page__inner a[href*="#"]');
+                this.scroll = new SmoothScroll('.' + this.state.namespace + '__inner a[href*="#"]', this.state.options);
 
                 window.addEventListener('scroll', throttle(300, this.handleScroll.bind(this)), false);
 
                 // if hash is set
                 if (window.location.hash) {
-                    this.$(".tiny-one-page__inner a[href$='" + window.location.hash + "']").click();
+                    this.$("." + this.state.namespace + "__inner a[href$='" + window.location.hash + "']").click();
                 } else {
-                    this.addClass(this.$$(".tiny-one-page__inner a")[0]);
+                    this.addClass(this.$$('.' + this.state.namespace + '__inner a')[0]);
                 }
 
                 // adding for outer click and all a-tags click event to close
@@ -138,29 +146,31 @@
 
             /**
              *
-             *
+             *  @return {string}
              */
             getIconClasses()
             {
                 return this.state.isOpen ?
-                    'icon icon-tiny-one-page-close' :
-                    'icon icon-tiny-one-page-open';
+                    'icon icon-' + this.state.namespace + '-close' :
+                    'icon icon-' + this.state.namespace + '-open';
             },
 
             /**
              *
-             *
+             *  @return {string}
              */
             getModalClasses()
             {
                 return this.state.isOpen ?
-                    'tiny-one-page__modal tiny-one-page__modal--open' :
-                    'tiny-one-page__modal tiny-one-page__modal--closed';
+                    this.state.namespace + '__modal ' + this.state.namespace + '__modal--open' :
+                    this.state.namespace + '__modal ' + this.state.namespace + '__modal--closed';
             },
 
             /**
              *
              *
+             *  @param  {Object} event
+             *
              */
             handleClick(event)
             {
@@ -215,10 +225,10 @@
             handleScroll(event)
             {
                 // get elements
-                const elements = this.$$('.tiny-one-page__inner a');
+                const elements = this.$$('.' + this.state.namespace + '__inner a');
 
                 // @TODO check offset
-                const offset = 25;
+                const offset = this.state.options.offset - 25;
 
                 // if found
                 let hasFound = false;
@@ -231,11 +241,8 @@
                     // getting target
                     let target = document.querySelector(element.hash);
 
-                    // check if there is a next element
                     let next = undefined;
-
-                    // getting offsetTop
-                    let offsetTop = target.offsetTop;
+                    let offsetTop = target.getBoundingClientRect().top + window.pageYOffset;
 
                     // check for next element
                     if (elements[index + 1]) {
@@ -244,8 +251,8 @@
 
                     // check if element is visible
                     if (!result &&
-                        (target.offsetTop - (window.innerHeight / 2)) <= (window.pageYOffset + offset) &&
-                        (target.offsetTop + target.offsetHeight) - (window.innerHeight / 2) > window.pageYOffset) {
+                        ((offsetTop - (window.innerHeight / 2)) <= (window.pageYOffset + offset)) &&
+                        ((offsetTop + target.offsetHeight) - (window.innerHeight / 2) > window.pageYOffset)) {
                         result = target;
                     }
 
@@ -254,7 +261,9 @@
 
                 }.bind(this));
 
-                this.addClass(this.$(".tiny-one-page__inner a[href$='" + result.id + "']"));
+                if (result) {
+                    this.addClass(this.$("." + this.state.namespace + "__inner a[href$='" + result.id + "']"));
+                }
             }
         }
     </script>