adding

demo-386.js

@@ -1,7 +1,10 @@
 import * as riot from 'riot';
 import TinyOnePage from './src/TinyOnePage.riot';
+import TinyOnePageHeightAnimate from './src/TinyOnePageHeightAnimate.js';
 
 riot.register('tiny-one-page', TinyOnePage);
 
 // adding component with animate object
-riot.mount('tiny-one-page');
+riot.mount('tiny-one-page', {
+    'animate': new TinyOnePageHeightAnimate()
+});

demo-386.scss

@@ -1,9 +1,11 @@
+@import 'src/fonts/stylesheet.css';
+
 /**
  * variables
  *
  */
 
-$text-color: #000;
+$text-color: #fff;
 $link-color: #fefe5b;
 $link-background-color: #008106;
 $background-color: #000084;
@@ -23,12 +25,7 @@ body {
     font-size: 1.2rem;
 }
 
-*:first-letter {
-    color: $link-color;
-}
-
 a {
-    color: $text-color;
     text-decoration: none;
 }
 
@@ -40,33 +37,53 @@ a {
  */
 
 .navbar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    text-align: center;
+    padding: 10px;
     background-color: $background-contrast-color;
 
+    @media (min-width: 768px) {
+        padding: 0;
+    }
+
     ul {
         list-style: none;
+
+        padding: 10px;
         margin: 0;
-        padding: 0.6em 0.8em;
+        border: 1px solid #000;
+
+        @media (min-width: 768px) {
+            margin: 0 0 0 10px;
+            padding: 0;
+            border: none;
+        }
 
         li {
-            display: inline-block;
+            display: block;
+            line-height: 20px;
 
-            a {
+            @media (min-width: 768px) {
                 display: inline-block;
-                padding: 0.1em;
+            }
+
+            a {
+                display: block;
+                padding: 4px 10px;
+                color: #fff;
+
+                @media (min-width: 768px) {
+                    display: inline-block;
+                }
 
                 &:hover {
-                    background-color: $link-background-color;
+                    color: #fff;
+                    background-color: #000;
                 }
             }
 
             &.current {
                 a {
-                    background-color: $link-background-color;
+                    color: #fff;
+                    background-color: #000;
                 }
             }
         }
@@ -79,7 +96,7 @@ a {
  *
  */
 main {
-    max-width: 960px;
+    max-width: 600px;
     margin: 2em auto 0;
 }
 
@@ -110,12 +127,13 @@ footer {
  */
 
 .section {
-    padding: 4em;
-    margin: 1em 0;
-    line-height: 1.8;
-    background-color: $background-contrast-color;
-}
+    padding: 50px 0.8em;
+    line-height: 1.5;
 
+    @media (min-width: 768px) {
+        padding: 50px 0;
+    }
+}
 
 /**
  * icons
@@ -129,6 +147,18 @@ footer {
     color: $link-color;
 }
 
+.icon-tiny-one-page-open {
+    &:after {
+        content: '\2630';
+    }
+}
+
+.icon-tiny-one-page-close {
+    &:after {
+        content: '\2A2F';
+    }
+}
+
 
 /**
  * tiny-tiny-hamburger
@@ -137,32 +167,50 @@ footer {
  */
 
 .tiny-one-page {
-    &__inner {
-        padding: 4px 8px 5px;
-    }
 
     // modal with animation
     &__modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+
+        z-index: 99;
+
         height: auto;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.2s;
+
+        @media (min-width: 768px) {
+            max-height: none !important;
+        }
     }
 
     &__button {
+        position: fixed;
+        top: 0;
+        right: 0;
+
+        font-size: 1.8rem;
+
         appearance: none;
         border: none;
         background: transparent;
-        padding: 0.3em 0.5em;
+        padding: 0.7em 0.8em;
+
+        z-index: 100;
+
+        &:hover, &:focus {
+            outline: none;
+        }
 
         &:hover {
             cursor: pointer;
-            outline: none;
-            background-color: $background-contrast-color;
         }
 
-        &:focus {
-            outline: none;
+        @media (min-width: 768px) {
+            display: none;
         }
     }
 }

dist/css/demo-386.css

@@ -1,155 +1 @@
-/**
- * variables
- *
- */
-
-/**
- * default elements
- *
- */
-
-body {
-  color: #000;
-  background-color: #000084;
-  font-family: "PxPlus IBM VGA8", sans-serif;
-  font-style: normal;
-  font-size: 1.2rem;
-}
-
-*:first-letter {
-  color: #fefe5b;
-}
-
-a {
-  color: #000;
-  text-decoration: none;
-}
-
-/**
- * navigation
- *
- *
- */
-
-.navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  text-align: center;
-  background-color: #bbbbbb;
-}
-
-.navbar ul {
-  list-style: none;
-  margin: 0;
-  padding: 0.6em 0.8em;
-}
-
-.navbar ul li {
-  display: inline-block;
-}
-
-.navbar ul li a {
-  display: inline-block;
-  padding: 0.1em;
-}
-
-.navbar ul li a:hover {
-  background-color: #008106;
-}
-
-.navbar ul li.current a {
-  background-color: #008106;
-}
-
-/**
- *
- *
- */
-
-main {
-  max-width: 960px;
-  margin: 2em auto 0;
-}
-
-/**
- * footer
- *
- *
- */
-
-footer {
-  text-align: center;
-  font-size: 3rem;
-  width: 100%;
-  background: #000;
-  padding: 0.8em 0;
-}
-
-footer i {
-  color: #fff !important;
-}
-
-/**
- * section
- *
- *
- */
-
-.section {
-  padding: 4em;
-  margin: 1em 0;
-  line-height: 1.8;
-  background-color: #bbbbbb;
-}
-
-/**
- * icons
- *
- *
- */
-
-[class^=icon-tiny],
-[class*=" icon-tiny"] {
-  font-family: "PxPlus IBM VGA8", sans-serif !important;
-  font-style: normal;
-  color: #fefe5b;
-}
-
-/**
- * tiny-tiny-hamburger
- *
- *
- */
-
-.tiny-one-page__inner {
-  padding: 4px 8px 5px;
-}
-
-.tiny-one-page__modal {
-  height: auto;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.2s;
-}
-
-.tiny-one-page__button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  background: transparent;
-  padding: 0.3em 0.5em;
-}
-
-.tiny-one-page__button:hover {
-  cursor: pointer;
-  outline: none;
-  background-color: #bbbbbb;
-}
-
-.tiny-one-page__button:focus {
-  outline: 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}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}}

dist/css/demo.css

@@ -1,30 +0,0 @@
-.navbar {
-  position: fixed;
-  width: 100%;
-  text-align: center;
-  background-color: white;
-}
-
-.navbar li {
-  display: inline-block;
-  margin: 0 0.3em;
-}
-
-.navbar li a {
-  display: block;
-  transition: all 0.1s ease-in-out;
-}
-
-.navbar li a:hover {
-  transform: scale(1.3);
-}
-
-.navbar li.current a {
-  transform: scale(1.3);
-}
-
-.section {
-  padding: 6em;
-  line-height: 1.8;
-}
-

dist/fonts/stylesheet.css

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: 'PxPlus IBM VGA8';
+    src: url('PxPlus_IBM_VGA8.eot');
+    src: url('PxPlus_IBM_VGA8.eot?#iefix') format('embedded-opentype'),
+        url('PxPlus_IBM_VGA8.woff2') format('woff2'),
+        url('PxPlus_IBM_VGA8.woff') format('woff'),
+        url('PxPlus_IBM_VGA8.ttf') format('truetype'),
+        url('PxPlus_IBM_VGA8.svg#PxPlus_IBM_VGA8') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}

dist/index.html

@@ -14,9 +14,7 @@
     <tiny-one-page>
         <nav class="navbar">
             <ul>
-                <li><a href="#one">One</a></li>
-                <li><a href="#two">Two</a></li>
-                <li><a href="#three">Three</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-one-page>

package-lock.json

@@ -8793,6 +8793,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
+      "integrity": "sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

package.json

@@ -20,7 +20,8 @@
     "license": "MIT",
     "dependencies": {
         "riot": "^4.5.0",
-        "smooth-scroll": "^16.1.0"
+        "smooth-scroll": "^16.1.0",
+        "throttle-debounce": "^2.1.0"
     },
     "devDependencies": {
         "@riotjs/compiler": "^4.2.0",

src/TinyOnePage.riot → src/TinyOnePage.riot.js

@@ -1,14 +1,17 @@
 <tiny-one-page>
     <div class="tiny-one-page">
-        <div class="tiny-one-page__inner"></div>
-        <button class="tiny-one-page__button">
-            <i class="icon icon-menu"></i>
+        <div style="{ getStyles() }" class={ getModalClasses() }>
+            <div class="tiny-one-page__inner"></div>
+        </div>
+        <button class="tiny-one-page__button button button--tiny-one-page" onclick={ handleToggle }>
+            <i class={ getIconClasses() } />
         </button>
     </div>
 
     <script>
 
         import SmoothScroll from 'smooth-scroll';
+        import { throttle, debounce } from 'throttle-debounce';
 
         /**
          *  tiny-one-page.riot
@@ -29,8 +32,19 @@
          *
          */
 
-        export default
-        {
+        export default {
+
+            /**
+             *
+             *
+             */
+            state:
+            {
+                isOpen: false,
+                animate: null,
+                namespace: 'tiny-one-page'
+            },
+
             /**
              *  getting innerHTML and remove
              *
@@ -38,8 +52,23 @@
              */
             onBeforeMount()
             {
-                this.content = this.root.innerHTML
-                this.root.innerHTML = ''
+                // getting helper and add component
+                this.state.animate = this.props.animate;
+                this.state.animate.setComponent(this);
+
+                this.content = this.root.innerHTML;
+                this.root.innerHTML = '';
+            },
+
+            /**
+             *  getting innerHTML and remove
+             *
+             *
+             */
+            onBeforeUnmount()
+            {
+                document.addEventListener('click', this.handleClick.bind(this));
+                this.$('.tiny-one-page__inner a').removeEventListener('click', this.handleClose.bind(this));
             },
 
             /**
@@ -56,14 +85,20 @@
                 // adding scroll smooth, get all elements with hash
                 this.scroll = new SmoothScroll('.tiny-one-page__inner a[href*="#"]');
 
-                window.addEventListener('scroll', this.handleScroll.bind(this), false);
+                window.addEventListener('scroll', throttle(300, this.handleScroll.bind(this)), false);
 
-                // if hash is set,
+                // if hash is set
                 if (window.location.hash) {
                     this.$(".tiny-one-page__inner a[href$='" + window.location.hash + "']").click();
                 } else {
                     this.addClass(this.$$(".tiny-one-page__inner a")[0]);
                 }
+
+                // adding for outer click and all a-tags click event to close
+                document.addEventListener('click', this.handleClick.bind(this))
+                this.$$('.tiny-one-page__inner a').forEach((a) => {
+                    a.addEventListener('click', this.handleClose.bind(this));
+                });
             },
 
             /**
@@ -92,6 +127,86 @@
                     .remove('current');
             },
 
+            /**
+             *
+             *  @return {string}
+             */
+            getStyles()
+            {
+                return this.state.animate.getStyles();
+            },
+
+            /**
+             *
+             *
+             */
+            getIconClasses()
+            {
+                return this.state.isOpen ?
+                    'icon icon-tiny-one-page-close' :
+                    'icon icon-tiny-one-page-open';
+            },
+
+            /**
+             *
+             *
+             */
+            getModalClasses()
+            {
+                return this.state.isOpen ?
+                    'tiny-one-page__modal tiny-one-page__modal--open' :
+                    'tiny-one-page__modal tiny-one-page__modal--closed';
+            },
+
+            /**
+             *
+             *
+             */
+            handleClick(event)
+            {
+                if (!this.root.contains(event.target)) {
+                    this.handleClose();
+                }
+            },
+
+            /**
+             *
+             *
+             */
+            handleOpen()
+            {
+                this.state.animate.prepareOpen();
+                this.state.isOpen = true;
+
+                this.update();
+            },
+
+            /**
+             *
+             *
+             */
+            handleClose()
+            {
+                this.state.animate.prepareClose();
+                this.state.isOpen = false;
+
+                this.update();
+            },
+
+            /**
+             *  toggle modal
+             *
+             *
+             */
+            handleToggle()
+            {
+                if (this.state.isOpen === true) {
+                    this.handleClose();
+                } else {
+                    this.handleOpen();
+                }
+            },
+
             /**
              *  handle scrolling and check visibility of elements from navigation
              *
@@ -129,8 +244,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) {
+                        (target.offsetTop - (window.innerHeight / 2)) <= (window.pageYOffset + offset) &&
+                        (target.offsetTop + target.offsetHeight) - (window.innerHeight / 2) > window.pageYOffset) {
                         result = target;
                     }
 
@@ -142,6 +257,5 @@
                 this.addClass(this.$(".tiny-one-page__inner a[href$='" + result.id + "']"));
             }
         }
-
     </script>
 </tiny-one-page>

src/TinyOnePageAnimate.js

@@ -0,0 +1,69 @@
+/**
+ * TinyHamburgerAnimate
+ *
+ * Class for new Animation Classes for TinyHamburger. Prepare-Functions will be called
+ * to change styles. All Prepare-Functions are called in the same function from
+ * TinyHamburger.riot
+ *
+ * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/tiny-components/tiny-hamburger GitLab Repository
+ */
+export default class TinyOnePageAnimate
+{
+    /**
+     *
+     *
+     */
+    constructor()
+    {
+
+    }
+
+    /**
+     *  setting component to interact with
+     *
+     *  @param {object} component
+     */
+    setComponent(component)
+    {
+        this.component = component;
+    }
+
+    /**
+     *  get Styles
+     *
+     *  @return {string}
+     */
+    getStyles()
+    {
+        return null;
+    }
+
+    /**
+     *
+     *
+     */
+    prepareMounted()
+    {
+
+    }
+
+    /**
+     *
+     *
+     */
+    prepareOpen()
+    {
+
+    }
+
+    /**
+     *
+     *
+     */
+    prepareClose()
+    {
+
+    }
+}

src/TinyOnePageHeightAnimate.js

@@ -0,0 +1,52 @@
+import TinyOnePageAnimate from './TinyOnePageAnimate';
+
+/**
+ * TinyHamburgerLeftAnimate
+ *
+ * Animation for a Panel that slides left in Screen
+ *
+ * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/tiny-components/tiny-hamburger GitLab Repository
+ */
+export default class TinyOnePageHeightAnimate extends TinyOnePageAnimate
+{
+    /**
+     *
+     *
+     */
+    constructor()
+    {
+        super();
+        this.maxHeight = 0;
+    }
+
+    /**
+     * set max-height
+     *
+     * @return {string}
+     */
+    getStyles()
+    {
+        return 'max-height:' + this.maxHeight + 'px';
+    }
+
+    /**
+     * set height of content
+     *
+     */
+    prepareOpen()
+    {
+        this.maxHeight = this.component.$('.tiny-one-page__inner')
+            .getBoundingClientRect().height;
+    }
+
+    /**
+     * set height to 0
+     *
+     */
+    prepareClose()
+    {
+        this.maxHeight = 0;
+    }
+}

src/fonts/stylesheet.css

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: 'PxPlus IBM VGA8';
+    src: url('PxPlus_IBM_VGA8.eot');
+    src: url('PxPlus_IBM_VGA8.eot?#iefix') format('embedded-opentype'),
+        url('PxPlus_IBM_VGA8.woff2') format('woff2'),
+        url('PxPlus_IBM_VGA8.woff') format('woff'),
+        url('PxPlus_IBM_VGA8.ttf') format('truetype'),
+        url('PxPlus_IBM_VGA8.svg#PxPlus_IBM_VGA8') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}

webpack.mix.js

@@ -1,3 +1,4 @@
+const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
 const mix = require('laravel-mix');
 
 /*
@@ -14,7 +15,7 @@ const mix = require('laravel-mix');
 mix.webpackConfig({
     module: {
 		rules: [{
-			test: /\.riot$/,
+			test: /\.riot.js$/,
 			exclude: /node_modules/,
 			use: [{
 				loader: '@riotjs/webpack-loader',
@@ -26,5 +27,6 @@ mix.webpackConfig({
     ]}
 });
 
-mix.js('demo-386.js', 'dist/js')
+mix.js('demo-386.js', 'dist/js');
 mix.sass('demo-386.scss', 'dist/css');
+mix.copy('src/fonts', 'dist/fonts');