From c3bb6278b50e8aaf5c463fb2d766ab3afcb14810 Mon Sep 17 00:00:00 2001 From: Bryan Pedini Date: Sun, 20 Jan 2019 17:51:07 +0100 Subject: [PATCH] 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 +- js/onePageApp-sections-control.js | 16 +- templates/contact-form.phtml | 41 +++++- .../jquery.ns-autogrow/jquery.ns-autogrow.js | 139 ++++++++++++++++++ .../jquery.ns-autogrow.min.js | 7 + 5 files changed, 195 insertions(+), 11 deletions(-) create mode 100644 vendor/jquery.ns-autogrow/jquery.ns-autogrow.js create mode 100644 vendor/jquery.ns-autogrow/jquery.ns-autogrow.min.js diff --git a/CHANGELOG b/CHANGELOG index 93131d9..b0d35f0 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -2,4 +2,5 @@ 20190113/02 - First version of the code - finished PHP program and JS scripts. | I seriously never tought I would have needed a slash code because I would have made two commits the same day... I'm not THAT kind of productive, in writing code... 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... \ No newline at end of file +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... \ No newline at end of file diff --git a/js/onePageApp-sections-control.js b/js/onePageApp-sections-control.js index c39c9b0..63509fc 100644 --- a/js/onePageApp-sections-control.js +++ b/js/onePageApp-sections-control.js @@ -22,15 +22,15 @@ }); } $(function() { - $('#navbar-home').on('click', function () { getPageContent (1) } ); - $('#navbar-description').on('click', function () { getPageContent (2) }); - $('#navbar-work').on('click', function () { getPageContent (3) }); - $('#navbar-ideas').on('click', function () { getPageContent (4) }); - $('#navbar-contact-form').on('click', function () { getPageContent (5) }); - $('#navbar-contact-email').on('click', function () { window.location.href = "mailto:bryanpedini@bryanpedini.it"; }); - $('ul.nav li.dropdown').hover(function() { + $('#navbar-home').click(function () { getPageContent (1) } ); + $('#navbar-description').click(function () { getPageContent (2) }); + $('#navbar-work').click(function () { getPageContent (3) }); + $('#navbar-ideas').click(function () { getPageContent (4) }); + $('#navbar-contact-form').click(function () { getPageContent (5) }); + $('#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() { + }, function () { $(this).find('.dropdown-menu').stop(true, true).fadeOut(500); }); getPageContent(0); diff --git a/templates/contact-form.phtml b/templates/contact-form.phtml index e29d48a..903ac5a 100644 --- a/templates/contact-form.phtml +++ b/templates/contact-form.phtml @@ -1,3 +1,8 @@ +
@@ -6,11 +11,43 @@

Why keeping all your questions for you?

Just ask them here! - +
-
\ No newline at end of file + +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ + \ No newline at end of file diff --git a/vendor/jquery.ns-autogrow/jquery.ns-autogrow.js b/vendor/jquery.ns-autogrow/jquery.ns-autogrow.js new file mode 100644 index 0000000..3bd0629 --- /dev/null +++ b/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 = $('
').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, '&').replace(//g, '>').replace(/\n /g, '
 ').replace(/"/g, '"').replace(/'/g, ''').replace(/\n$/, '
 ').replace(/\n/g, '
').replace(/ {2,}/g, function(space) { + return Array(space.length - 1).join(' ') + ' '; + }); + if (/(\n|\r)/.test(_this.value)) { + val += '
'; + if (options.flickering === false) { + val += '
'; + } + } + $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); diff --git a/vendor/jquery.ns-autogrow/jquery.ns-autogrow.min.js b/vendor/jquery.ns-autogrow/jquery.ns-autogrow.min.js new file mode 100644 index 0000000..71f668a --- /dev/null +++ b/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').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,"&").replace(//g,">").replace(/\n /g,"
 ").replace(/"/g,""").replace(/'/g,"'").replace(/\n$/,"
 ").replace(/\n/g,"
").replace(/ {2,}/g,function(e){return Array(e.length-1).join(" ")+" "}),/(\n|\r)/.test(t.value)&&(d+="
",i.flickering===!1&&(d+="
")),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); \ No newline at end of file