UCOMmandIt
/
uci-hugo-landingpage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/css/navbar.css
View File

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

6
assets/css/page.css
View File

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

3
assets/css/responsive.css
View File

@ -2,6 +2,9 @@
/* small tablets */
@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) {

36
assets/js/docready.js
View File

@ -1,45 +1,17 @@
// requires jquery
$(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) {
$('.nav-bar').css("display", "none")
});
lg.on('onCloseAfter.lg', function (event) {
$('.nav-bar').css("display", "flex")
});
// initialize hero size
// initialize
heroResize();
itemResize('iframe');
$('section').flowtype({
// maximum: 1000,
minFont: 12,
maxFont: 25,
fontRatio: 20
});
$('#hero').flowtype({
maxFont: 60,
fontRatio: 15
});
typeResize(); // for section content
lightbox('#4005') // TODO put this in template instead of hard coding using parameter
// resize elements on change
$(window).resize(function () {
heroResize();
itemResize('iframe');
typeResize();
});
});

6
assets/js/fitToParent.js
View File

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

146
assets/js/page.js
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
$('a[href*="#"]:not([href="#"])').click(function () {
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) {
let windowWidth = $(window).width()
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
// 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
// callback: function (newWidth, newHeight) {
// // alert(`after w h ${newWidth} ${newHeight}`)
// // Fires after fitting is complete
// }
// callback: function (newWidth, newHeight) {}
})
}
// /*
// * throttledresize: special jQuery event that happens at a reduced rate compared to "resize"
// *
// * latest version and complete README available on Github:
// * https://github.com/louisremi/jquery-smartresize
// *
// * Copyright 2012 @louis_remi
// * Licensed under the MIT license.
// *
// * This saved you an hour of work?
// * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
// */
// (function ($) {
//
// var $event = $.event,
// $special,
// dummy = { _: 0 },
// frame = 0,
// wasResized, animRunning;
//
// $special = $event.special.throttledresize = {
// setup: function () {
// $(this).on("resize", $special.handler);
// },
// teardown: function () {
// $(this).off("resize", $special.handler);
// },
// handler: function (event, execAsap) {
// // Save the context
// var context = this,
// 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');
function typeResize() {
$('.section').flowtype({
// maximum: 1000,
minFont: 12,
maxFont: 25,
fontRatio: 20
})
}
// Lightbox for Gallery
function lightbox(id) {
// Intialize all the media i.e. photos with "media" id
// TODO use Hugo params to initialize multiple galleries/albums
var lg = $(id).lightGallery({
thumbnail: true,
thumbWidth: 80,
controls: true,
loop: false,
download: false,
counter: true,
// videojs: true
});
lg.on('onBeforeOpen.lg', function (event) {
$('.nav-bar').css("display", "none")
});
lg.on('onCloseAfter.lg', function (event) {
$('.nav-bar').css("display", "flex")
});
}

20
layouts/partials/js.html
View File

@ -5,22 +5,20 @@
<!-- light gallery and modules/plugins -->
<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 -->
<!-- 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" }}
<script src="js/analytics.js"></script>
{{ end }}
<!-- sizing tools -->
<script src="js/fitToParent.js"></script>
<!-- site specific functions for page use -->
<script src="js/page.js"></script>
<!-- development tools -->
<script src="js/lorem.js"></script>
<!-- Document Ready - Start -->
<!-- Document Ready - Initialize - Window resize calls -->
<script src="js/docready.js"></script>