improve resize element processing - refactor js

master
David Kebler 2017-03-21 08:32:26 -07:00
parent 53895254aa
commit 3cc1fe51d2
8 changed files with 113 additions and 151 deletions

View File

@ -20,13 +20,13 @@
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-content: center; align-content: center;
padding-top: 1em; padding-top: 0.9em;
padding-bottom: 1em; padding-bottom: 0.9em;
} }
.nav-bar__logo, .nav-bar__logo,
.nav-bar__menu-button { .nav-bar__menu-button {
font-size: 1.5em; font-size: 1.8em;
padding-left: 1em; padding-left: 1em;
} }
@ -53,8 +53,8 @@
justify-content: center; justify-content: center;
transition: 200ms; transition: 200ms;
border-top: 2px solid; border-top: 2px solid;
font-size: 2em; font-size: 1.8em;
padding: 1em; padding: .5em;
} }
.nav-bar__menu-item > a { .nav-bar__menu-item > a {

View File

@ -17,6 +17,8 @@
max-width: 80%; max-width: 80%;
padding-top: 0.3em; padding-top: 0.3em;
padding-bottom: 1em; padding-bottom: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
} }
.section__content li { .section__content li {
@ -27,11 +29,11 @@
font-family: FontAwesome; font-family: FontAwesome;
content: "\f18e"; content: "\f18e";
padding-right: 0.5em; padding-right: 0.5em;
padding-left: 1em; padding-left: 0;
} }
.section__content ul li { .section__content ul li {
text-indent: -3rem; text-indent: -1.2rem;
} }
.section--even { .section--even {

View File

@ -2,6 +2,9 @@
/* small tablets */ /* small tablets */
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
.section__content ul li {
text-indent: -2rem;
}
} }
@media only screen and (min-device-width: 600px) and (max-device-width: 799px) { @media only screen and (min-device-width: 600px) and (max-device-width: 799px) {

View File

@ -1,45 +1,17 @@
// requires jquery // requires jquery
$(document).ready(function () { $(document).ready(function () {
// Intialize all the media i.e. photos with "media" id
// TODO use Hugo params to initialize multiple galleries/albums
var lg = $("#4005").lightGallery({
thumbnail: true,
thumbWidth: 80,
controls: true,
loop: false,
download: false,
counter: true,
// videojs: true
});
lg.on('onBeforeOpen.lg', function (event) { // initialize
$('.nav-bar').css("display", "none")
});
lg.on('onCloseAfter.lg', function (event) {
$('.nav-bar').css("display", "flex")
});
// initialize hero size
heroResize(); heroResize();
itemResize('iframe'); itemResize('iframe');
typeResize(); // for section content
$('section').flowtype({ lightbox('#4005') // TODO put this in template instead of hard coding using parameter
// maximum: 1000,
minFont: 12,
maxFont: 25,
fontRatio: 20
});
$('#hero').flowtype({
maxFont: 60,
fontRatio: 15
});
// resize elements on change // resize elements on change
$(window).resize(function () { $(window).resize(function () {
heroResize(); heroResize();
itemResize('iframe'); itemResize('iframe');
typeResize();
}); });
}); });

View File

@ -37,7 +37,7 @@ jQuery.fn.fitToParent = function (options) {
var parentWidth = settings.boxWidth - settings.widthOffset; var parentWidth = settings.boxWidth - settings.widthOffset;
var parentHeight = settings.boxHeight - settings.heightOffset; var parentHeight = settings.boxHeight - settings.heightOffset;
console.log(`settings.boxWidth, parentWidth ${settings.boxWidth} ${parentWidth}`); // console.log(`settings.boxWidth, parentWidth ${settings.boxWidth} ${parentWidth}`);
// Maintain aspect ratio // Maintain aspect ratio
var aspect = $el.data('aspect'); var aspect = $el.data('aspect');
@ -45,6 +45,8 @@ jQuery.fn.fitToParent = function (options) {
aspect = width / height; aspect = width / height;
$el.data('aspect', aspect); $el.data('aspect', aspect);
} }
// removed for flexbox parent with dynamic height
// var parentAspect = parentWidth / parentHeight; // var parentAspect = parentWidth / parentHeight;
// // Resize to fit box // // Resize to fit box
// if (aspect > parentAspect) { // if (aspect > parentAspect) {
@ -61,7 +63,7 @@ jQuery.fn.fitToParent = function (options) {
newWidth = parentWidth; newWidth = parentWidth;
newHeight = (newWidth / aspect); newHeight = (newWidth / aspect);
console.log(`width before setting ${newWidth}`) // console.log(`width before setting ${newWidth}`)
// Set new size of element // Set new size of element
$el.width(newWidth); $el.width(newWidth);

37
assets/js/flowType.js Normal file
View File

@ -0,0 +1,37 @@
/*
* Adapted from FlowType.JS v1.1
* Copyright 2013-2014, Simple Focus http://simplefocus.com/
*
*/
$.fn.flowtype = function (options) {
// Establish default settings/variables
// ====================================
var settings = $.extend({
maximum: 9999,
minimum: 1,
maxFont: 9999,
minFont: 1,
fontRatio: 35
}, options),
// the magic math
// =================
resize = function (el) {
var $el = $(el),
elw = $el.width(),
width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
fontBase = width / settings.fontRatio,
fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
$el.css('font-size', fontSize + 'px');
};
// Make the magic visible
// ======================
this.each(function () {
// resize text in each element
resize(this);
});
};

View File

@ -1,11 +1,3 @@
// hero resizer
function heroResize() {
$('#hero').css({
width: $(window).width(),
height: $(window).height()
});
}
// Smooth Scroll Init - Register click handler for ID anchors // Smooth Scroll Init - Register click handler for ID anchors
$('a[href*="#"]:not([href="#"])').click(function () { $('a[href*="#"]:not([href="#"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
@ -33,6 +25,19 @@ $('a[href*="#"]:not([href="#"])').click(function () {
}()); }());
// hero resizer
function heroResize() {
$('#hero').css({
width: $(window).width() + 10,
height: $(window).height() + 10
});
$('#hero').flowtype({
maxFont: 60,
fontRatio: 15
});
}
// child item resize based on parent container (i.e. flexbox)
function itemResize(item, maxWidth = 450, widthPadding = 30) { function itemResize(item, maxWidth = 450, widthPadding = 30) {
let windowWidth = $(window).width() let windowWidth = $(window).width()
let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
@ -42,97 +47,40 @@ function itemResize(item, maxWidth = 450, widthPadding = 30) {
// widthOffset: 5, // (int) Put some space around the element // widthOffset: 5, // (int) Put some space around the element
// boxHeight: , // (int) Will look for .size-parent, or fallback to parent size // boxHeight: , // (int) Will look for .size-parent, or fallback to parent size
boxWidth: width // (int) Will look for .size-parent, or fallback to parent size boxWidth: width // (int) Will look for .size-parent, or fallback to parent size
// callback: function (newWidth, newHeight) { // callback: function (newWidth, newHeight) {}
// // alert(`after w h ${newWidth} ${newHeight}`)
// // Fires after fitting is complete
// }
}) })
} }
// /* function typeResize() {
// * throttledresize: special jQuery event that happens at a reduced rate compared to "resize" $('.section').flowtype({
// * // maximum: 1000,
// * latest version and complete README available on Github: minFont: 12,
// * https://github.com/louisremi/jquery-smartresize maxFont: 25,
// * fontRatio: 20
// * Copyright 2012 @louis_remi })
// * Licensed under the MIT license. }
// *
// * This saved you an hour of work? // Lightbox for Gallery
// * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
// */ function lightbox(id) {
// (function ($) { // Intialize all the media i.e. photos with "media" id
// // TODO use Hugo params to initialize multiple galleries/albums
// var $event = $.event, var lg = $(id).lightGallery({
// $special, thumbnail: true,
// dummy = { _: 0 }, thumbWidth: 80,
// frame = 0, controls: true,
// wasResized, animRunning; loop: false,
// download: false,
// $special = $event.special.throttledresize = { counter: true,
// setup: function () { // videojs: true
// $(this).on("resize", $special.handler); });
// },
// teardown: function () { lg.on('onBeforeOpen.lg', function (event) {
// $(this).off("resize", $special.handler); $('.nav-bar').css("display", "none")
// }, });
// handler: function (event, execAsap) {
// // Save the context lg.on('onCloseAfter.lg', function (event) {
// var context = this, $('.nav-bar').css("display", "flex")
// args = arguments; });
//
// wasResized = true; }
//
// if (!animRunning) {
// setInterval(function () {
// frame++;
//
// if (frame > $special.threshold && wasResized || execAsap) {
// // set correct event type
// event.type = "throttledresize";
// $event.dispatch.apply(context, args);
// wasResized = false;
// frame = 0;
// }
// if (frame > 9) {
// $(dummy).stop();
// animRunning = false;
// frame = 0;
// }
// }, 30);
// animRunning = true;
// }
// },
// threshold: 0
// };
//
// })(jQuery, 'throttledResize');
//
// // debouncing function for window resize from John Hann
// // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
// (function ($, sr) {
// var debounce = function (func, threshold, execAsap) {
// var timeout;
//
// return function debounced() {
// var obj = this,
// args = arguments;
//
// function delayed() {
// if (!execAsap)
// func.apply(obj, args);
// timeout = null;
// };
//
// if (timeout)
// clearTimeout(timeout);
// else if (execAsap)
// func.apply(obj, args);
//
// timeout = setTimeout(delayed, threshold || 100);
// };
// }
// // smartresize
// jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn, 50)) : this.trigger(sr); };
//
// })(jQuery, 'debounceResize');

View File

@ -5,22 +5,20 @@
<!-- light gallery and modules/plugins --> <!-- light gallery and modules/plugins -->
<script src="https://cdn.jsdelivr.net/g/lightgallery,lg-autoplay,lg-pager,lg-thumbnail,lg-video"></script> <script src="https://cdn.jsdelivr.net/g/lightgallery,lg-autoplay,lg-pager,lg-thumbnail,lg-video"></script>
<!-- flowtype for font sizing -->
<script src="https://cdn.jsdelivr.net/flowtype.js/1.1/flowtype.min.js"></script>
<!-- LOCAL --> <!-- LOCAL -->
<!-- All functions for page use -->
<script src="js/page.js"></script>
<!-- Function Library -->
<!-- sizing tools -->
<script src="js/fitToParent.js"></script>
<script src="js/flowType.js"></script>
<!-- development tools -->
<script src="js/lorem.js"></script>
{{ if isset .Site.Params "googleAnalytics" }} {{ if isset .Site.Params "googleAnalytics" }}
<script src="js/analytics.js"></script> <script src="js/analytics.js"></script>
{{ end }} {{ end }}
<!-- sizing tools --> <!-- site specific functions for page use -->
<script src="js/fitToParent.js"></script> <script src="js/page.js"></script>
<!-- development tools --> <!-- Document Ready - Initialize - Window resize calls -->
<script src="js/lorem.js"></script>
<!-- Document Ready - Start -->
<script src="js/docready.js"></script> <script src="js/docready.js"></script>