Improved performance, finished templates, added jquery plugins

Completed the templates, added a cool javascript effect on textarea (added jquery.ns-autogrow plugin), modified the click functions from .on to .click for improved performance

CHANGELOG

@@ -3,3 +3,4 @@
 20190117/01 - Added templating to the one page app, added and configured sessions to remember the last position and stored sessions for one day, even after browser close. | Nothing to say, I learned how to describe my commits.. (maybe)..
 20190117/02 - Edited templates location, removed unnecessary CSS and JS files, moved the onePageApp style and scripts into respective files, modified variable names for better comprehension. TODO next: add comments to the code. | I seriously didn't think to work so much, PS: comments are still to come.
 20190119/01 - Moved the entire title from the javascript to the PHP section, finished almost all templates, moved the footer on the main "template holder" page, extended the session to three days instead of just one for no technical reasons, added CHANGELOG, added three background images. | Did you seriously thought that this changelog was to keep track of any sort of change? OF COURSE NOT: it's for myself, when I commit only once after three days of work, to remember what the hell I did in the three days before, like sidenotes, but inside the own repository I will commit to...
+20190120/01 - Completed the templates, added a cool javascript effect on textarea (added jquery.ns-autogrow plugin), modified the click functions from .on to .click for improved performance | All tho the commit of "yesterday" was of "this morning" at 4 minutes passed midnight... my life is a *****, guess why...

js/onePageApp-sections-control.js

@@ -22,12 +22,12 @@
         });
     }
     $(function() {
-        $('#navbar-home').on('click', function () { getPageContent (1) } );
+        $('#navbar-home').click(function () { getPageContent (1) } );
-        $('#navbar-description').on('click', function () { getPageContent (2) });
+        $('#navbar-description').click(function () { getPageContent (2) });
-        $('#navbar-work').on('click', function () { getPageContent (3) });
+        $('#navbar-work').click(function () { getPageContent (3) });
-        $('#navbar-ideas').on('click', function () { getPageContent (4) });
+        $('#navbar-ideas').click(function () { getPageContent (4) });
-        $('#navbar-contact-form').on('click', function () { getPageContent (5) });
+        $('#navbar-contact-form').click(function () { getPageContent (5) });
-        $('#navbar-contact-email').on('click', function () { window.location.href = "mailto:bryanpedini@bryanpedini.it"; });
+        $('#navbar-contact-email').click(function () { window.location.href = "mailto:bryanpedini@bryanpedini.it"; });
         $('ul.nav li.dropdown').hover(function () {
             $(this).find('.dropdown-menu').stop(true, true).fadeIn(500);
         }, function () {

templates/contact-form.phtml

@@ -1,3 +1,8 @@
+<style>
+    #contact-form {
+        font-family: 'Roboto Condensed', sans-serif;
+    }
+</style>
 <header class="masthead" style="background-image: url(img/bg-5.jpg)">
     <div class="overlay"></div>
     <div class="container">
@@ -6,7 +11,7 @@
                 <div class="page-heading">
                     <h1>Why keeping all your questions for you?</h1>
                     <span class="subheading">Just ask them here!</span>
-                    <a href="#contact-form" id="scolldown-button">
+                    <a href="#contact-form" id="scrolldown-button">
                         <i class="fas fa-chevron-circle-down fa-3x fa-inverse" style="line-height: 2;"></i>
                     </a>
                 </div>
@@ -14,3 +19,35 @@
         </div>
     </div>
 </header>
+<div class="container">
+    <div class="row">
+        <div class="col-lg-8 col-md-10 mx-auto">
+            <form class="form-horizontal" id="contact-form">
+                <div class="form-group">
+                    <label for="contact-form-name">Name</label>
+                    <input type="text" class="form-control" id="contact-form-name" placeholder="John Doe">
+                </div>
+                <div class="form-group">
+                    <label for="contact-form-email">Email</label>
+                    <input type="email" class="form-control" id="contact-form-email" placeholder="john.doe@example.com">
+                </div>
+                <div class="form-group">
+                    <label for="contact-form-message">Your Message:</label>
+                    <textarea class="form-control" id="contact-form-message" rows="3"></textarea> 
+                </div>
+                <button type="submit" class="btn btn-default btn-outline-secondary">Get in touch with me</button>
+            </form>
+        </div>
+    </div>
+</div>
+<script src="vendor/jquery.ns-autogrow/jquery.ns-autogrow.min.js"></script>
+<script>
+    $(function () {
+        $("#scrolldown-button").click(function() {
+            $('html,body').animate({
+                scrollTop: $("#contact-form").offset().top},
+                'slow');
+        });
+        $("#contact-form-message").css('overflow', 'hidden').autogrow({vertical: true, horizontal: false, flickering: false});
+    });
+</script>

vendor/jquery.ns-autogrow/jquery.ns-autogrow.js

@@ -0,0 +1,139 @@
+/*!
+  Non-Sucking Autogrow 1.1.6
+  license: MIT
+  author: Roman Pushkin
+  https://github.com/ro31337/jquery.ns-autogrow
+*/
+(function() {
+  var getVerticalScrollbarWidth;
+
+  (function($, window) {
+    return $.fn.autogrow = function(options) {
+      if (options == null) {
+        options = {};
+      }
+      if (options.horizontal == null) {
+        options.horizontal = true;
+      }
+      if (options.vertical == null) {
+        options.vertical = true;
+      }
+      if (options.debugx == null) {
+        options.debugx = -10000;
+      }
+      if (options.debugy == null) {
+        options.debugy = -10000;
+      }
+      if (options.debugcolor == null) {
+        options.debugcolor = 'yellow';
+      }
+      if (options.flickering == null) {
+        options.flickering = true;
+      }
+      if (options.postGrowCallback == null) {
+        options.postGrowCallback = function() {};
+      }
+      if (options.verticalScrollbarWidth == null) {
+        options.verticalScrollbarWidth = getVerticalScrollbarWidth();
+      }
+      if (options.horizontal === false && options.vertical === false) {
+        return;
+      }
+      return this.filter('textarea').each(function() {
+        var $e, $shadow, fontSize, heightPadding, minHeight, minWidth, update;
+        $e = $(this);
+        if ($e.data('autogrow-enabled')) {
+          return;
+        }
+        $e.data('autogrow-enabled');
+        minHeight = $e.height();
+        minWidth = $e.width();
+        heightPadding = $e.css('lineHeight') * 1 || 0;
+        $e.hasVerticalScrollBar = function() {
+          return $e[0].clientHeight < $e[0].scrollHeight;
+        };
+        $shadow = $('<div class="autogrow-shadow"></div>').css({
+          position: 'absolute',
+          display: 'inline-block',
+          'background-color': options.debugcolor,
+          top: options.debugy,
+          left: options.debugx,
+          'max-width': $e.css('max-width'),
+          'padding': $e.css('padding'),
+          fontSize: $e.css('fontSize'),
+          fontFamily: $e.css('fontFamily'),
+          fontWeight: $e.css('fontWeight'),
+          lineHeight: $e.css('lineHeight'),
+          resize: 'none',
+          'word-wrap': 'break-word'
+        }).appendTo(document.body);
+        if (options.horizontal === false) {
+          $shadow.css({
+            'width': $e.width()
+          });
+        } else {
+          fontSize = $e.css('font-size');
+          $shadow.css('padding-right', '+=' + fontSize);
+          $shadow.normalPaddingRight = $shadow.css('padding-right');
+        }
+        update = (function(_this) {
+          return function(event) {
+            var height, val, width;
+            val = _this.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n /g, '<br/>&nbsp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\n$/, '<br/>&nbsp;').replace(/\n/g, '<br/>').replace(/ {2,}/g, function(space) {
+              return Array(space.length - 1).join('&nbsp;') + ' ';
+            });
+            if (/(\n|\r)/.test(_this.value)) {
+              val += '<br />';
+              if (options.flickering === false) {
+                val += '<br />';
+              }
+            }
+            $shadow.html(val);
+            if (options.vertical === true) {
+              height = Math.max($shadow.height() + heightPadding, minHeight);
+              $e.height(height);
+            }
+            if (options.horizontal === true) {
+              $shadow.css('padding-right', $shadow.normalPaddingRight);
+              if (options.vertical === false && $e.hasVerticalScrollBar()) {
+                $shadow.css('padding-right', "+=" + options.verticalScrollbarWidth + "px");
+              }
+              width = Math.max($shadow.outerWidth(), minWidth);
+              $e.width(width);
+            }
+            return options.postGrowCallback($e);
+          };
+        })(this);
+        $e.change(update).keyup(update).keydown(update);
+        $(window).resize(update);
+        return update();
+      });
+    };
+  })(window.jQuery, window);
+
+  getVerticalScrollbarWidth = function() {
+    var inner, outer, w1, w2;
+    inner = document.createElement('p');
+    inner.style.width = "100%";
+    inner.style.height = "200px";
+    outer = document.createElement('div');
+    outer.style.position = "absolute";
+    outer.style.top = "0px";
+    outer.style.left = "0px";
+    outer.style.visibility = "hidden";
+    outer.style.width = "200px";
+    outer.style.height = "150px";
+    outer.style.overflow = "hidden";
+    outer.appendChild(inner);
+    document.body.appendChild(outer);
+    w1 = inner.offsetWidth;
+    outer.style.overflow = 'scroll';
+    w2 = inner.offsetWidth;
+    if (w1 === w2) {
+      w2 = outer.clientWidth;
+    }
+    document.body.removeChild(outer);
+    return w1 - w2;
+  };
+
+}).call(this);

vendor/jquery.ns-autogrow/jquery.ns-autogrow.min.js

@@ -0,0 +1,7 @@
+/*!
+  Non-Sucking Autogrow 1.1.6
+  license: MIT
+  author: Roman Pushkin
+  https://github.com/ro31337/jquery.ns-autogrow
+*/
+(function(){var e;!function(t,l){return t.fn.autogrow=function(i){if(null==i&&(i={}),null==i.horizontal&&(i.horizontal=!0),null==i.vertical&&(i.vertical=!0),null==i.debugx&&(i.debugx=-1e4),null==i.debugy&&(i.debugy=-1e4),null==i.debugcolor&&(i.debugcolor="yellow"),null==i.flickering&&(i.flickering=!0),null==i.postGrowCallback&&(i.postGrowCallback=function(){}),null==i.verticalScrollbarWidth&&(i.verticalScrollbarWidth=e()),i.horizontal!==!1||i.vertical!==!1)return this.filter("textarea").each(function(){var e,n,r,o,a,c,d;if(e=t(this),!e.data("autogrow-enabled"))return e.data("autogrow-enabled"),a=e.height(),c=e.width(),o=1*e.css("lineHeight")||0,e.hasVerticalScrollBar=function(){return e[0].clientHeight<e[0].scrollHeight},n=t('<div class="autogrow-shadow"></div>').css({position:"absolute",display:"inline-block","background-color":i.debugcolor,top:i.debugy,left:i.debugx,"max-width":e.css("max-width"),padding:e.css("padding"),fontSize:e.css("fontSize"),fontFamily:e.css("fontFamily"),fontWeight:e.css("fontWeight"),lineHeight:e.css("lineHeight"),resize:"none","word-wrap":"break-word"}).appendTo(document.body),i.horizontal===!1?n.css({width:e.width()}):(r=e.css("font-size"),n.css("padding-right","+="+r),n.normalPaddingRight=n.css("padding-right")),d=function(t){return function(l){var r,d,s;return d=t.value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\n /g,"<br/>&nbsp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/\n$/,"<br/>&nbsp;").replace(/\n/g,"<br/>").replace(/ {2,}/g,function(e){return Array(e.length-1).join("&nbsp;")+" "}),/(\n|\r)/.test(t.value)&&(d+="<br />",i.flickering===!1&&(d+="<br />")),n.html(d),i.vertical===!0&&(r=Math.max(n.height()+o,a),e.height(r)),i.horizontal===!0&&(n.css("padding-right",n.normalPaddingRight),i.vertical===!1&&e.hasVerticalScrollBar()&&n.css("padding-right","+="+i.verticalScrollbarWidth+"px"),s=Math.max(n.outerWidth(),c),e.width(s)),i.postGrowCallback(e)}}(this),e.change(d).keyup(d).keydown(d),t(l).resize(d),d()})}}(window.jQuery,window),e=function(){var e,t,l,i;return e=document.createElement("p"),e.style.width="100%",e.style.height="200px",t=document.createElement("div"),t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.visibility="hidden",t.style.width="200px",t.style.height="150px",t.style.overflow="hidden",t.appendChild(e),document.body.appendChild(t),l=e.offsetWidth,t.style.overflow="scroll",i=e.offsetWidth,l===i&&(i=t.clientWidth),document.body.removeChild(t),l-i}}).call(this);