bryanpedini/bryanpedini.it_old
Archived
0
0
Fork 0
Code Releases Activity

Improved performance, finished templates, added jquery plugins

Browse Source 
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
This commit is contained in:
Bryan Pedini 2019-01-20 17:51:07 +01:00
parent ec496c7ce1
commit c3bb6278b5
No known key found for this signature in database
GPG Key ID: 688D440AE31B40C2
5 changed files with 195 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG
View File

@ -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...
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...

16
js/onePageApp-sections-control.js
View File

@ -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);

41
templates/contact-form.phtml
View File

@ -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,11 +11,43 @@
<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>
</div>
</div>
</div>
</header>
</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>

139
vendor/jquery.ns-autogrow/jquery.ns-autogrow.js vendored Normal file
View File

@ -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);

7
vendor/jquery.ns-autogrow/jquery.ns-autogrow.min.js vendored Normal file
View File

@ -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);