diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js index 462921b..2e80761 100644 --- a/source/code/hippie/functions.js +++ b/source/code/hippie/functions.js @@ -1,149 +1,149 @@ // This is called everytime -function setup () { - 'use strict'; +function setup() { + 'use strict'; - console.group('Document information'); - console.info('\n', hippie.brand, '\n\n'); - console.info('HTML:', hippie.screen, '\nBODY:', hippie.body); - console.groupEnd(); - if (debugOn) { - console.group('Debug information'); - console.dir(hippie); - console.groupEnd(); - } + console.group('Document information'); + console.info('\n', hippie.brand, '\n\n'); + console.info('HTML:', hippie.screen, '\nBODY:', hippie.body); + console.groupEnd(); + if (debugOn) { + console.group('Debug information'); + console.dir(hippie); + console.groupEnd(); + } - // WANNABE MODULE Mouse over effect - // With CSS only - if ($('#js_mob').length && viewHover) { - $('#js_mob').addClass('mouse_over'); - } - // if (viewHover) { - // $('body').prepend('
'); - // } - // With JS + // WANNABE MODULE Mouse over effect + // With CSS only + if ($('#js_mob').length && viewHover) { + $('#js_mob').addClass('mouse_over'); + } + // if (viewHover) { + // $('body').prepend('
'); + // } + // With JS } // MODULE Scroll navigation // Using constructor function -function HippieScroll ($tp, $dn) { - 'use strict'; +function HippieScroll($tp, $dn) { + 'use strict'; - // this.$tp = $tp; - // Define initial situation - let initLeft = false; - const initY = hippie.screen.vh; + // this.$tp = $tp; + // Define initial situation + let initLeft = false; + const initY = hippie.screen.vh; - $tp.addClass('hide'); + $tp.addClass('hide'); - // Check scroll position and toggle element - this.check = function () { - hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop); - if (hippie.screen.y > initY) { - if (!initLeft) { - $tp.removeClass('hide'); - console.info('Initial viewport left'); - } - initLeft = true; - } else { - if (initLeft) { - $tp.addClass('hide'); - console.info('Initial viewport entered'); - } - initLeft = false; - } - }; + // Check scroll position and toggle element + this.check = function () { + hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop); + if (hippie.screen.y > initY) { + if (!initLeft) { + $tp.removeClass('hide'); + console.info('Initial viewport left'); + } + initLeft = true; + } else { + if (initLeft) { + $tp.addClass('hide'); + console.info('Initial viewport entered'); + } + initLeft = false; + } + }; - // Add events to navigation elements - $tp.click(function (event) { - event.preventDefault(); - $('html, body').stop().animate({ - scrollTop: 0 - }, basicEase); - // console.log('Scrolled to top'); - }); - $dn.click(function (event) { - event.preventDefault(); - var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh; - $('html').scrollTop(pos); - // document.documentElement.scrollTop = pos; - console.info('Scrolled down to', pos); - }); + // Add events to navigation elements + $tp.click(function (event) { + event.preventDefault(); + $('html, body').stop().animate({ + scrollTop: 0 + }, basicEase); + // console.log('Scrolled to top'); + }); + $dn.click(function (event) { + event.preventDefault(); + var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh; + $('html').scrollTop(pos); + // document.documentElement.scrollTop = pos; + console.info('Scrolled down to', pos); + }); } // MODULE Meta elements -function HippieMeta ($ma, $pp) { - 'use strict'; +function HippieMeta($ma, $pp) { + 'use strict'; - let metaOn = false; + let metaOn = false; - $ma.click(function () { - var $wrap, $pop; + $ma.click(function () { + var $wrap, $pop; - // if (metaOn !== true) { - if (!metaOn) { - metaOn = true; + // if (metaOn !== true) { + if (!metaOn) { + metaOn = true; - $pp.each(function () { - // if ($(this).css('position') === 'static') { - // $(this).addClass('js_changed_pos'); - // $(this).css('position', 'relative'); - // } - // $pop = $(this).next('.exp_pop').detach(); - // $wrap = $(this).wrap('').parent().prepend('').prepend(''); - // $wrap.after($pop); + $pp.each(function () { + // if ($(this).css('position') === 'static') { + // $(this).addClass('js_changed_pos'); + // $(this).css('position', 'relative'); + // } + // $pop = $(this).next('.exp_pop').detach(); + // $wrap = $(this).wrap('').parent().prepend('').prepend(''); + // $wrap.after($pop); - $('
').addClass('exp_overlay').css({ - position: 'absolute', - width: '100%', - height: '100%', - top: 0, - left: 0 - }).appendTo($(this).addClass('exp_wrap')); + $('
').addClass('exp_overlay').css({ + position: 'absolute', + width: '100%', + height: '100%', + top: 0, + left: 0 + }).appendTo($(this).addClass('exp_wrap')); - // Displays explanation popup following the mouse - $(this).on({ - mouseenter: function () { - // if ($(this).attr('emmet')) { - // - // } - $(this).next('.exp_pop').show(); - }, - mouseleave: function () { - $(this).next('.exp_pop').hide(); - }, - mousemove: function (event) { - $(this).next('.exp_pop').css({ - 'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4, - 'left': event.pageX + 8 - // 'left': event.pageX - $(this).offset().left + 8 - }); - } - }); - }); + // Displays explanation popup following the mouse + $(this).on({ + mouseenter: function () { + // if ($(this).attr('emmet')) { + // + // } + $(this).next('.exp_pop').show(); + }, + mouseleave: function () { + $(this).next('.exp_pop').hide(); + }, + mousemove: function (event) { + $(this).next('.exp_pop').css({ + 'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4, + 'left': event.pageX + 8 + // 'left': event.pageX - $(this).offset().left + 8 + }); + } + }); + }); - } else { - $pp.each(function () { - $(this).off('mouseenter mouseleave mousemove'); + } else { + $pp.each(function () { + $(this).off('mouseenter mouseleave mousemove'); - $(this).removeClass('exp_wrap').find('.exp_overlay').remove(); - // $wrap = $(this).parent('.exp_wrap'); - // $pop = $wrap.next('.exp_pop').detach(); - // $wrap.find('.exp_marker_pop').remove(); - // $(this).unwrap('.exp_wrap'); - // $(this).after($pop); - // if ($(this).hasClass('js_changed_pos')) { - // $(this).css('position', ''); - // if ($(this).attr('style') === '') { - // $(this).removeAttr('style'); - // } - // $(this).removeClass('js_changed_pos'); - // } - }); + $(this).removeClass('exp_wrap').find('.exp_overlay').remove(); + // $wrap = $(this).parent('.exp_wrap'); + // $pop = $wrap.next('.exp_pop').detach(); + // $wrap.find('.exp_marker_pop').remove(); + // $(this).unwrap('.exp_wrap'); + // $(this).after($pop); + // if ($(this).hasClass('js_changed_pos')) { + // $(this).css('position', ''); + // if ($(this).attr('style') === '') { + // $(this).removeAttr('style'); + // } + // $(this).removeClass('js_changed_pos'); + // } + }); - metaOn = false; - } - console.log('Explanation mode', metaOn); - }); + metaOn = false; + } + console.log('Explanation mode', metaOn); + }); } // get document coordinates of the element diff --git a/source/code/hippie/global.js b/source/code/hippie/global.js index f1f941f..0b05906 100644 --- a/source/code/hippie/global.js +++ b/source/code/hippie/global.js @@ -1,11 +1,3 @@ // Setup // ----------------------------------------------------------------------------- setup(); - -// DOM ready -// ----------------------------------------------------------------------------- -$(document).ready(function () { - 'use strict'; - - // logPerf('DOM ready.'); -}); diff --git a/source/code/hippie/variables.js b/source/code/hippie/variables.js index 8ca57a6..bf6f4bc 100644 --- a/source/code/hippie/variables.js +++ b/source/code/hippie/variables.js @@ -1,16 +1,16 @@ var hippie = { - brand: "|-| | |^ |^ | [- ", - screen: { - w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0), - vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0), - dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0), - y: Math.min($(document).scrollTop(), document.documentElement.scrollTop) - // hippie.screen.y: document.documentElement.scrollTop - }, - body: { - w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0), - h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0), - } + brand: "|-| | |^ |^ | [- ", + screen: { + w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0), + vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0), + dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0), + y: Math.min($(document).scrollTop(), document.documentElement.scrollTop) + // hippie.screen.y: document.documentElement.scrollTop + }, + body: { + w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0), + h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0), + } }; var viewHover = true; diff --git a/source/screens/demo.njk b/source/screens/demo.njk index 14c2e74..3a11bf9 100644 --- a/source/screens/demo.njk +++ b/source/screens/demo.njk @@ -7,51 +7,68 @@ {% block title %}Index{% endblock %} {% block head %} -{{ super() }} + {{ super() }} {% endblock %} {% block body %} -
-
-

This is {{ hippie.brand | upper }}

-

You can start using it by replacing this file with your own index page.

-

To do this you need to create a file /index.njk inside the source/screens folder. You can also create a data.json file inside the source/templates folder as a data source for your nunjucks files.

-

For a very basic start you can make a copy of the demo page blank.njk. You can find it at /source/screens/demo.

-

The source/demo folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.
Follow the white rabbit.

-
- 
  ()()
  (..)
C(")(")
-

Overview

-
- -

Demo Pages

- -
-
+
+
+

This is + {{ hippie.brand | upper }}

+

You can start using it by replacing this file with your own index page.

+

To do this you need to create a file + /index.njk + inside the + source/screens + folder. You can also create a + data.json + file inside the + source/templates + folder as a data source for your nunjucks files.

+

For a very basic start you can make a copy of the demo page + blank.njk. You can find it at + /source/screens/demo.

+

The + source/demo + folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.
Follow the white rabbit.

+
+ 
  ()()
  (..)
c(")(")
+

Overview

+
+ +

Demo Pages

+ +
+
{% endblock %} {% block script %} -{{ super() }} - - -{% endblock %} + {{ super() }} + + +{% endblock %} \ No newline at end of file diff --git a/source/templates/demo/_default.njk b/source/templates/demo/_default.njk index 6c71e49..d9c7692 100644 --- a/source/templates/demo/_default.njk +++ b/source/templates/demo/_default.njk @@ -1,46 +1,52 @@ - - + + - {% block head %} - {% block title %}{% endblock %}{{ hippie.titlePrefix }} + {% block head %} + + {% block title %}{% endblock %}{{ hippie.titlePrefix }} - {% include "demo/partials/_meta.njk" %} - {# #} - {% block meta %}{% endblock %} + {% include "demo/partials/_meta.njk" %} + {# #} + {% block meta %}{% endblock %} - {% include "hippie/partials/_head_script.njk" %} - + {% include "hippie/partials/_head_script.njk" %} + - {% include "demo/partials/_links.njk" %} - {% block links %} - {# #} - {# #} - - {% endblock %} - {% endblock %} - + {% include "demo/partials/_links.njk" %} + {% block links %} + {# #} + {# #} + + {% endblock %} + + {% endblock %} + - - {% block body %}{% endblock %} + + + {% block body %}{% endblock %} - {% block script %} - - - {% endblock %} - - + {% block script %} + + + {% endblock %} + + + \ No newline at end of file diff --git a/source/templates/demo/_extended.njk b/source/templates/demo/_extended.njk index afbb558..39fdcb4 100644 --- a/source/templates/demo/_extended.njk +++ b/source/templates/demo/_extended.njk @@ -1,64 +1,67 @@ - - + + - {% block head %} - {% block title %}{% endblock %} - HIPPIE + {% block head %} + + {% block title %}{% endblock %} + - HIPPIE - {% include "demo/partials/_meta.njk" %} - {% block meta %}{% endblock %} + {% include "demo/partials/_meta.njk" %} + {% block meta %}{% endblock %} - {% include "hippie/partials/_head_script.njk" %} - + {% include "hippie/partials/_head_script.njk" %} + - {% include "demo/partials/_links.njk" %} - {% block links %} - - - - + {% include "demo/partials/_links.njk" %} + {% block links %} + + + + - - - - {% endblock %} - {% endblock %} - + + + + {% endblock %} + + {% endblock %} + - - {% include "hippie/partials/_body_hover.njk" %} -
- {% include "hippie/partials/_header.njk" %} + + + {% include "hippie/partials/_body_hover.njk" %} +
+ {% include "hippie/partials/_header.njk" %} -
- {% block main %}{% endblock %} -
+
+ {% block main %}{% endblock %} +
- {% include "hippie/partials/_footer.njk" %} -
+ {% include "hippie/partials/_footer.njk" %} +
- {% block script %} - - - {# #} - {% endblock %} - - + {% block script %} + + + {# #} + {% endblock %} + + + \ No newline at end of file diff --git a/source/templates/demo/_maintenance.njk b/source/templates/demo/_maintenance.njk index 832f00c..af00cb7 100644 --- a/source/templates/demo/_maintenance.njk +++ b/source/templates/demo/_maintenance.njk @@ -1,28 +1,30 @@ - - + + - {% block head %} - {% block title %}{% endblock %} - HIPPIE + {% block head %} + + {% block title %}{% endblock %} + - HIPPIE - {% include "demo/partials/_meta.njk" %} - {% block meta %}{% endblock %} + {% include "demo/partials/_meta.njk" %} + {% block meta %}{% endblock %} - {% block links %} - + {% block links %} + - - {% endblock %} - {% endblock %} - + + {% endblock %} + {% endblock %} + - - {% block main %} + + {% block main %} - {% import "hippie/macros/footer-status.njk" as status %} - {{ status.footer() }} - {% endblock %} - - + {% import "hippie/macros/footer-status.njk" as status %} + {{ status.footer() }} + {% endblock %} + + \ No newline at end of file diff --git a/source/templates/hippie/partials/_body_hover.njk b/source/templates/hippie/partials/_body_hover.njk index 61fb3ec..b76167d 100644 --- a/source/templates/hippie/partials/_body_hover.njk +++ b/source/templates/hippie/partials/_body_hover.njk @@ -1,2 +1,2 @@ -
+
\ No newline at end of file diff --git a/source/templates/hippie/partials/_body_nav.njk b/source/templates/hippie/partials/_body_nav.njk index 3bd982c..7d500b3 100644 --- a/source/templates/hippie/partials/_body_nav.njk +++ b/source/templates/hippie/partials/_body_nav.njk @@ -1,28 +1,28 @@
- +
{#
? -
#} + #} \ No newline at end of file diff --git a/source/templates/hippie/partials/_footer.njk b/source/templates/hippie/partials/_footer.njk index c646022..30fb517 100644 --- a/source/templates/hippie/partials/_footer.njk +++ b/source/templates/hippie/partials/_footer.njk @@ -1,4 +1,4 @@ + \ No newline at end of file diff --git a/source/templates/hippie/partials/_head_script.njk b/source/templates/hippie/partials/_head_script.njk index 7b0db18..76743d9 100644 --- a/source/templates/hippie/partials/_head_script.njk +++ b/source/templates/hippie/partials/_head_script.njk @@ -1,54 +1,65 @@ + function pad(n, width, z) { + z = z || '0'; + n = n + ''; + return n.length >= width + ? n + : new Array(width - n.length + 1).join(z) + n; + } + + // log message to console and add + // performance measuring information + function logPerf(msg, arg) { + if (debugOn) { + if (debugOnScreen && assetsLoaded) { + if (!$('#jsLogPerf').length) { + $('
') + .css('position', 'relative') + .find('div') + .attr('id', 'jsLogPerf') + .css({ + position: 'fixed', + bottom: '16px', + right: '40px', + zIndex: '1000', + padding: '0 8px', + background: 'rgba(255,255,255,.6)', + color: 'rgb(128)', + fontSize: '1rem' + }) + .end() + .prependTo('body'); + // $('body').prepend('
'); + // $('div').first().prepend('
'); + } + $('#jsLogPerf').append('

' + pad(getTimeDiff(), 5) + 'ms :: ' + msg + '

'); + // Alternative short-circuit evaluation + // needs element in document but prevents error if not + // $log = $log || $('#jslogPerf'); + // $log.append('

' + getTimeDiff() + 'ms :: ' + msg); + } + if (window.console) { + console.debug(pad(getTimeDiff(), 5) + 'ms :: ' + msg, ( + arg + ? arg + : '')); + // NOTE Non standard feature. Not available on IE + if (console.timeStamp) { + console.timeStamp(msg); + } + } + } + } + \ No newline at end of file diff --git a/source/templates/hippie/partials/_header.njk b/source/templates/hippie/partials/_header.njk index c04d2df..d21c54c 100644 --- a/source/templates/hippie/partials/_header.njk +++ b/source/templates/hippie/partials/_header.njk @@ -1,3 +1,2 @@ -

-
+
\ No newline at end of file