refactor modal code - improve resizing - move hero out of sections

master
David Kebler 2017-04-08 14:24:15 -07:00
parent 328149ed51
commit 052bbf5708
8 changed files with 90 additions and 58 deletions

View File

@ -5,10 +5,10 @@
{{ if ne .Site.Params.navbar.hidden true }}
{{ partial "navbar.html" . }}
{{ end }}
<main id="page">
{{ if ne .Site.Params.hero.custom_hero true }}
{{ partial "hero.html" . }}
{{ end }}
<main class="sections">
{{ partial "sections.html" . }}
{{ partial "modals.html" . }}
</main>

View File

@ -3,4 +3,5 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Cache-Control" content="max-age= {{ .Params.cache_timeout | default "3600"}}" />
<base href="{{ .Site.BaseURL }}">

View File

@ -19,7 +19,7 @@ body {
font-family: 'Roboto', sans-serif;
font-size: 1.4rem;
flex-direction: column;
width: 100%;
width: 100vw;
/* 14px default before jquery scalling */
}
@ -29,6 +29,7 @@ body {
padding-bottom: 1em;
align-items: center;
flex-direction: column;
width: 100vw;
}
/* mobile first column */

View File

@ -7,7 +7,7 @@
top: 0;
left: 0;
z-index: 10000;
width: 100%;
width: 100vw;
color: black;
background-color: white;
border-bottom: 1px solid grey;

View File

@ -85,7 +85,7 @@
/* modal */
.section--modal {
display: flex;
display: none;
color: white;
justify-content: center;
position: fixed;
@ -131,7 +131,7 @@
overflow-y: auto;
position: relative;
align-items: flex-start;
font-size: .9em;
font-size: 0.9em;
padding: 1em;
}
@ -144,6 +144,7 @@
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
}
#hero .section-content--hero {

View File

@ -1,23 +1,22 @@
// requires jquery
$(document).ready(function () {
// initialize
(function initialze() {
navbarSpacer();
// $('#page').css("width", $(window).width());
heroResize();
itemResize('iframe');
typeResize(); // for section content
hljs.initHighlightingOnLoad();
$('.section__content--modal').perfectScrollbar();
})();
// resize elements on change
$(window).resize(function () {
// $('#page').css("width", $(window).width());
// requires jquery
$(document).ready(function () {
});
// resize elements on change
$(window).resize(function () {
navbarSpacer();
heroResize();
itemResize('iframe');
typeResize();
$('.section__content--modal').perfectScrollbar('update');
});
});;
});

View File

@ -3,7 +3,6 @@
* Copyright 2013-2014, Simple Focus http://simplefocus.com/
*
*/
$.fn.flowtype = function (options) {
// Establish default settings/variables

View File

@ -36,7 +36,7 @@ function navbarSpacer() {
}
// hero resizer
function heroResize(bfr = 15) {
function heroResize(bfr = 30) {
var h = $(window).height() - $(".nav-bar__header").outerHeight(true),
w = $(window).width(),
fr = bfr * h / w
@ -44,7 +44,7 @@ function heroResize(bfr = 15) {
// minimum base font ratio
fr = (fr > bfr) ? bfr : fr
// adjust for short viewport height
fr = (w / h > 1 && h < 600) ? 15 * w / h : fr
fr = (w / h > 1 && h < 700) ? 30 * w / h : fr
//console.log('fr after', fr)
$('#hero').css({
@ -52,14 +52,17 @@ function heroResize(bfr = 15) {
height: h / w > 1.5 ? w * 1.5 : h,
});
var mf = w / h > 1 ? 0 : 12
$('#hero').flowtype({
maxFont: 50,
minFont: 18,
maxFont: 30,
minFont: mf,
fontRatio: fr
});
}
// child item resize based on parent container (i.e. flexbox)
// Especially good for iframes
function itemResize(item, maxWidth = 450, widthPadding = 30) {
let windowWidth = $(window).width()
let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
@ -73,12 +76,12 @@ function itemResize(item, maxWidth = 450, widthPadding = 30) {
})
}
function typeResize() {
$('.section').flowtype({
function typeResize(fr = 20) {
$('main:not(#hero)').flowtype({
// maximum: 1000,
minFont: 12,
maxFont: 25,
fontRatio: 20
fontRatio: fr
})
}
@ -107,39 +110,67 @@ function lightgallery(id) {
}
// Modal
// hide all the modals before displaying
$('.section--modal').each(function () {
$(this).hide();
});
// Modal tool. Must use modal template for content
(function ($) {
// all but inside the modal box
$(document).on('click', function (event) {
// extend jquery so remove handlers can be added and removed at the right time in a group
$.fn.modalHandlers = function (state = 'on') {
if (state === 'on') {
$(document).on('click', modalClickOutside);
$(document).keypress(modalEsc);
this.find('a[modal-close]').on('click', modalClickCloser);
return this
}
if (state === 'off') {
$(document).off('click', modalClickOutside);
$(document).off('keypress', modalEsc);
this.find('a[modal-close]').off('click', modalClickCloser);
return this
}
return false;
};
// modal event handlers - add more if you want - add them to extension above
function modalEsc(event) {
if (event.key === "Escape") { modalHide() }
}
function modalClickOutside(event) {
var container = $(".section__container--modal");
if (!container.is(event.target) && // If the target of the click isn't the container...
container.has(event.target).length === 0) // ... nor a descendant of the container
{
$('.section--modal.current').hide().removeClass("current");
{ modalHide(); }
}
});
$('.section__container--modal').click(function () {
$('.section--modal.current').hide().removeClass("current");
$('a[modal-close]').remove();
});
function modalClickCloser(event) {
modalHide();
}
// register click for modal link
$("a[modal]").click(function () {
// modal show and hide
function modalShow(modal_hash) {
var closer = "<a modal-close class='fa-stack fa-2x' ><i class='fa fa-circle-thin fa-stack-2x'></i><i class='fa fa-close fa-stack-1x'></i></a>"
$(modal_hash).find('.section__headline').append(closer).end().modalHandlers().addClass("current").css('display', 'flex');
}
function modalHide() {
$('.section--modal.current').hide().modalHandlers("off").removeClass("current").find('a[modal-close]').remove;
}
// Register click event for all modal links on page
$("a[modal]").click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = this.hash;
$(target).addClass("current").show()
target = target + " > .section__container > .section__headline"
var closer = "<a modal-close class='fa-stack fa-2x' ><i class='fa fa-circle-thin fa-stack-2x'></i><i class='fa fa-close fa-stack-1x'></i></a>"
$(target).append(closer);
modalShow(target);
} else {
var target = this;
alert(`modal display of off page content not supported`);
}
// alert(`I clicked on modal link ${target}`);
return false;
});
});
}(jQuery));
// end modal