Luke Murphy 4 years ago
parent
commit
8cb8eb599a
No known key found for this signature in database GPG Key ID: 5E2EF5A63E3718CC
  1. 8
      .editorconfig
  2. 10
      src/_includes/banner.html
  3. 20
      src/_includes/cta.html
  4. 28
      src/_includes/footer.html
  5. 14
      src/_includes/head.html
  6. 54
      src/_includes/header.html
  7. 42
      src/_includes/section-one.html
  8. 64
      src/_includes/section-three.html
  9. 36
      src/_includes/section-two.html
  10. 6
      src/_layouts/default.html
  11. 6
      src/_layouts/post.html
  12. BIN
      src/assets/fonts/FontAwesome.otf
  13. BIN
      src/assets/fonts/fontawesome-webfont.eot
  14. BIN
      src/assets/fonts/fontawesome-webfont.ttf
  15. BIN
      src/assets/fonts/fontawesome-webfont.woff
  16. BIN
      src/assets/fonts/fontawesome-webfont.woff2
  17. BIN
      src/assets/images/banner.jpg
  18. BIN
      src/assets/images/favicon.ico
  19. BIN
      src/assets/images/pic01.jpg
  20. BIN
      src/assets/images/pic02.jpg
  21. BIN
      src/assets/images/pic03.jpg
  22. BIN
      src/assets/images/pic04.jpg
  23. BIN
      src/assets/images/pic05.jpg
  24. 200
      src/assets/js/main.js
  25. 798
      src/assets/js/util.js
  26. 138
      src/assets/styles/components/_banner.scss
  27. 294
      src/assets/styles/components/_basic.scss
  28. 104
      src/assets/styles/components/_box.scss
  29. 126
      src/assets/styles/components/_button.scss
  30. 84
      src/assets/styles/components/_cta.scss
  31. 116
      src/assets/styles/components/_features.scss
  32. 228
      src/assets/styles/components/_form.scss
  33. 200
      src/assets/styles/components/_header.scss
  34. 80
      src/assets/styles/components/_image.scss
  35. 414
      src/assets/styles/components/_list.scss
  36. 164
      src/assets/styles/components/_menu.scss
  37. 6
      src/assets/styles/components/_section.scss
  38. 108
      src/assets/styles/components/_spotlight.scss
  39. 112
      src/assets/styles/components/_table.scss
  40. 470
      src/assets/styles/components/_wrapper.scss
  41. 154
      src/assets/styles/ie8.scss
  42. 202
      src/assets/styles/ie9.scss
  43. 6
      src/assets/styles/images/arrow.svg
  44. 6
      src/assets/styles/images/bars.svg
  45. 4
      src/assets/styles/images/close.svg
  46. 10
      src/assets/styles/libs/_functions.scss
  47. 50
      src/assets/styles/libs/_mixins.scss
  48. 966
      src/assets/styles/libs/_skel.scss
  49. 150
      src/assets/styles/libs/_vars.scss
  50. 314
      src/assets/styles/main.scss
  51. 562
      src/stylesheet.md

8
.editorconfig

@ -0,0 +1,8 @@
root=true
[*]
charset=utf-8
indent_style=space
[Makefile]
indent_style=tab

10
src/_includes/banner.html

@ -1,8 +1,8 @@
<!-- Banner -->
<div class="particle">
<section id="banner">
<div class="inner content">
<h2>/Auto|nomic\</h2>
</div>
</section>
<section id="banner">
<div class="inner content">
<h2>/Auto|nomic\</h2>
</div>
</section>
</div>

20
src/_includes/cta.html

@ -1,13 +1,13 @@
<!-- CTA -->
<section id="cta" class="wrapper style4">
<div class="inner">
<header>
<h2>Get in Touch</h2>
<p>Aliquam ut ex ut augue consectetur interdum endrerit imperdiet amet eleifend fringilla.</p>
</header>
<ul class="actions vertical">
<li><a href="#" class="button fit special">Lorem ipsum</a></li>
<li><a href="#" class="button fit">Lorem ispum</a></li>
</ul>
</div>
<div class="inner">
<header>
<h2>Get in Touch</h2>
<p>Aliquam ut ex ut augue consectetur interdum endrerit imperdiet amet eleifend fringilla.</p>
</header>
<ul class="actions vertical">
<li><a href="#" class="button fit special">Lorem ipsum</a></li>
<li><a href="#" class="button fit">Lorem ispum</a></li>
</ul>
</div>
</section>

28
src/_includes/footer.html

@ -1,19 +1,19 @@
<!-- Footer -->
<footer id="footer">
<ul class="icons">
{% if site.twitter_url %}
<li><a href="{{ site.twitter_url }}" class="icon fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
{% endif %} {% if site.500px_url %}
<li><a href="{{ site.500px_url }}" class="icon fa-500px" target="_blank"><span class="label">500px</span></a></li>
{% endif %} {% if site.gitlab_url %}
<li><a href="{{ site.gitlab_url }}" class="icon fa-gitlab" target="_blank"><span class="label">GitLab</span></a></li>
{% endif %} {% if site.github_url %}
<li><a href="{{ site.github_url }}" class="icon fa-github" target="_blank"><span class="label">GitHub</span></a></li>
{% endif %}
</ul>
<ul class="copyright">
<li class="icon fa-creative-commons">&nbsp;{{ site.title }}</li>
</ul>
<ul class="icons">
{% if site.twitter_url %}
<li><a href="{{ site.twitter_url }}" class="icon fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
{% endif %} {% if site.500px_url %}
<li><a href="{{ site.500px_url }}" class="icon fa-500px" target="_blank"><span class="label">500px</span></a></li>
{% endif %} {% if site.gitlab_url %}
<li><a href="{{ site.gitlab_url }}" class="icon fa-gitlab" target="_blank"><span class="label">GitLab</span></a></li>
{% endif %} {% if site.github_url %}
<li><a href="{{ site.github_url }}" class="icon fa-github" target="_blank"><span class="label">GitHub</span></a></li>
{% endif %}
</ul>
<ul class="copyright">
<li class="icon fa-creative-commons">&nbsp;{{ site.title }}</li>
</ul>
</footer>
</div>

14
src/_includes/head.html

@ -1,10 +1,10 @@
<head>
<title>{{ site.title }}</title>
<meta charset="utf-8" />
<title>{{ site.title }}</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="{{ "/assets/images/favicon.ico" | relative_url }}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="{{ "/assets/js/ie/html5shiv.js" | relative_url }}"></script><![endif]-->
<link rel="stylesheet" href="{{ "/assets/styles/main.css" | relative_url }}" />
<!--[if lte IE 8]><link rel="stylesheet" href="{{ "/assets/css/ie8.css" | relative_url }}" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="{{ "/assets/css/ie9.css" | relative_url }}" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="{{ "/assets/js/ie/html5shiv.js" | relative_url }}"></script><![endif]-->
<link rel="stylesheet" href="{{ "/assets/styles/main.css" | relative_url }}" />
<!--[if lte IE 8]><link rel="stylesheet" href="{{ "/assets/css/ie8.css" | relative_url }}" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="{{ "/assets/css/ie9.css" | relative_url }}" /><![endif]-->
</head>

54
src/_includes/header.html

@ -1,30 +1,30 @@
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header" {% if page.layout == 'default' %} class="alt" {% endif %}>
<h1><a href="{{ "/" | absolute_url }}">Autonomic</a></h1>
<nav id="nav">
<ul>
<li class="special">
<a href="#menu" class="menuToggle"><span>Menu</span></a>
<div id="menu">
<ul>
{% for page in site.pages %}
{% if page.layout == "default" %}
<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
{% for page in site.pages %}
{% if page.layout == "page" or page.layout == "spotlight" %}
{% unless page.hidden %}
<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
{% endunless %}
{% endif %}
{% endfor %}
</ul>
</div>
</li>
</ul>
</nav>
</header>
<!-- Header -->
<header id="header" {% if page.layout == 'default' %} class="alt" {% endif %}>
<h1><a href="{{ "/" | absolute_url }}">Autonomic</a></h1>
<nav id="nav">
<ul>
<li class="special">
<a href="#menu" class="menuToggle"><span>Menu</span></a>
<div id="menu">
<ul>
{% for page in site.pages %}
{% if page.layout == "default" %}
<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
{% for page in site.pages %}
{% if page.layout == "page" or page.layout == "spotlight" %}
{% unless page.hidden %}
<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
{% endunless %}
{% endif %}
{% endfor %}
</ul>
</div>
</li>
</ul>
</nav>
</header>

42
src/_includes/section-one.html

@ -1,25 +1,25 @@
<!-- One -->
<section id="one" class="wrapper style5 special">
<div class="inner">
<header class="major">
<h2>Autonomic is a co-operative<br />
that is owned and run by its workers</h2>
<p>We are committed to a set of core values to build progressive technologies<br /> and
<div class="inner">
<header class="major">
<h2>Autonomic is a co-operative<br />
that is owned and run by its workers</h2>
<p>We are committed to a set of core values to build progressive technologies<br /> and
infrastructure that empower users to make a positive impact on the world</p>
</header>
<ul class="icons major icons--flex">
<li>
<span class="icon fa-leaf major style1"></span>
<span class="icons__title">Sustainability</span>
</li>
<li>
<span class="icon fa-eye major style1"></span>
<span class="icons__title">Transparency</span>
</li>
<li>
<span class="icon fa-lock major style1"></span>
<span class="icons__title">Privacy</span>
</li>
</ul>
</div>
</header>
<ul class="icons major icons--flex">
<li>
<span class="icon fa-leaf major style1"></span>
<span class="icons__title">Sustainability</span>
</li>
<li>
<span class="icon fa-eye major style1"></span>
<span class="icons__title">Transparency</span>
</li>
<li>
<span class="icon fa-lock major style1"></span>
<span class="icons__title">Privacy</span>
</li>
</ul>
</div>
</section>

64
src/_includes/section-three.html

@ -1,37 +1,37 @@
<!-- Three -->
<section id="three" class="wrapper style6 special">
<div class="inner">
<header class="major">
<h2>Services we offer</h2>
<p>We design intergrated infrastructure tailored to your needs utilising technologies from<br />the
<div class="inner">
<header class="major">
<h2>Services we offer</h2>
<p>We design intergrated infrastructure tailored to your needs utilising technologies from<br />the
best free and open source software projects available. Your data under your control. <br />Here are some examples of the
applications we have deployed for our clients (insert link to clients page).</p>
</header>
<ul class="features">
<li class="icon fa-paper-plane-o">
<h3>Encrypted Email Server</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
<li class="icon fa-laptop">
<h3>Rocket.Chat</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
<li class="icon fa-code">
<h3>Visual Data</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
<li class="icon fa-headphones">
<h3>Mumble Voice Chat</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
<li class="icon fa-heart-o">
<h3>Discourse Forum</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
<li class="icon fa-flag-o">
<h3>Interactive Mapping</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
</ul>
</div>
</header>
<ul class="features">
<li class="icon fa-paper-plane-o">
<h3>Encrypted Email Server</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
<li class="icon fa-laptop">
<h3>Rocket.Chat</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
<li class="icon fa-code">
<h3>Visual Data</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
<li class="icon fa-headphones">
<h3>Mumble Voice Chat</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
<li class="icon fa-heart-o">
<h3>Discourse Forum</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
<li class="icon fa-flag-o">
<h3>Interactive Mapping</h3>
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
</li>
</ul>
</div>
</section>

36
src/_includes/section-two.html

@ -1,26 +1,26 @@
<section id="two" class="wrapper alt style2">
{% for post in site.posts limit:site.tiles-count %}{% if site.tiles-source == 'posts' %}
{% for post in site.posts limit:site.tiles-count %}{% if site.tiles-source == 'posts' %}
<section class="spotlight">
<div class="image">{% if post.image %}<img src="{% if site.featured-image-source %}{{ post.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ post.image }}{% endif %}" alt="" />{% endif %}</div>
<div class="content">
<h2><a href="{{ post.url | relative_url }}" class="link">{{ post.title }}</a></h2>
<p>{{ post.description }}</p>
</div>
</section>
<section class="spotlight">
<div class="image">{% if post.image %}<img src="{% if site.featured-image-source %}{{ post.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ post.image }}{% endif %}" alt="" />{% endif %}</div>
<div class="content">
<h2><a href="{{ post.url | relative_url }}" class="link">{{ post.title }}</a></h2>
<p>{{ post.description }}</p>
</div>
</section>
{% endif %}{% endfor %}
{% for page in site.pages limit:site.tiles-count %}{% if site.tiles-source == 'pages' %}{% if page.layout == 'default' %}{% continue %}{% endif %}
{% endif %}{% endfor %}
{% for page in site.pages limit:site.tiles-count %}{% if site.tiles-source == 'pages' %}{% if page.layout == 'default' %}{% continue %}{% endif %}
<section class="spotlight">
<div class="image">{% if page.image %}<img src="{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}" alt="" />{% endif %}</div>
<div class="content">
<h2><a href="{{ page.url | relative_url }}" class="link">{{ page.title }}</a></h2>
<p>{{ page.description }}</p>
</div>
</section>
<section class="spotlight">
<div class="image">{% if page.image %}<img src="{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}" alt="" />{% endif %}</div>
<div class="content">
<h2><a href="{{ page.url | relative_url }}" class="link">{{ page.title }}</a></h2>
<p>{{ page.description }}</p>
</div>
</section>
{% endif %}{% endfor %}
{% endif %}{% endfor %}
</section>

6
src/_layouts/default.html

@ -1,8 +1,8 @@
<!DOCTYPE HTML>
<!--
Spectral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Spectral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
{% include head.html %}

6
src/_layouts/post.html

@ -1,8 +1,8 @@
<!DOCTYPE HTML>
<!--
Spectral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Spectral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>

BIN
src/assets/fonts/FontAwesome.otf

BIN
src/assets/fonts/fontawesome-webfont.eot

BIN
src/assets/fonts/fontawesome-webfont.ttf

BIN
src/assets/fonts/fontawesome-webfont.woff

BIN
src/assets/fonts/fontawesome-webfont.woff2

BIN
src/assets/images/banner.jpg

Before

Width: 2000  |  Height: 1333  |  Size: 324 KiB

After

Width: 2000  |  Height: 1333  |  Size: 325 KiB

BIN
src/assets/images/favicon.ico

Before

Width: 17  |  Height: 16  |  Size: 1.1 KiB

After

Width: 17  |  Height: 16  |  Size: 1.1 KiB

BIN
src/assets/images/pic01.jpg

Before

Width: 748  |  Height: 529  |  Size: 88 KiB

After

Width: 748  |  Height: 529  |  Size: 88 KiB

BIN
src/assets/images/pic02.jpg

Before

Width: 748  |  Height: 529  |  Size: 75 KiB

After

Width: 748  |  Height: 529  |  Size: 75 KiB

BIN
src/assets/images/pic03.jpg

Before

Width: 748  |  Height: 529  |  Size: 67 KiB

After

Width: 748  |  Height: 529  |  Size: 68 KiB

BIN
src/assets/images/pic04.jpg

Before

Width: 180  |  Height: 180  |  Size: 9.2 KiB

After

Width: 180  |  Height: 180  |  Size: 9.2 KiB

BIN
src/assets/images/pic05.jpg

Before

Width: 180  |  Height: 180  |  Size: 9.8 KiB

After

Width: 180  |  Height: 180  |  Size: 9.8 KiB

200
src/assets/js/main.js

@ -1,106 +1,106 @@
/*
Spectral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Spectral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
(function($) {
skel
.breakpoints({
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 980px)',
small: '(max-width: 736px)',
xsmall: '(max-width: 480px)'
});
$(function() {
var $window = $(window),
$body = $('body'),
$wrapper = $('#page-wrapper'),
$banner = $('#banner'),
$header = $('#header');
// Disable animations/transitions until the page has loaded.
$body.addClass('is-loading');
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-loading');
}, 100);
});
// Mobile?
if (skel.vars.mobile)
$body.addClass('is-mobile');
else
skel
.on('-medium !medium', function() {
$body.removeClass('is-mobile');
})
.on('+medium', function() {
$body.addClass('is-mobile');
});
// Fix: Placeholder polyfill.
$('form').placeholder();
// Prioritize "important" elements on medium.
skel.on('+medium -medium', function() {
$.prioritize(
'.important\\28 medium\\29',
skel.breakpoint('medium').active
);
});
// Scrolly.
$('.scrolly')
.scrolly({
speed: 1500,
offset: $header.outerHeight()
});
// Menu.
$('#menu')
.append('<a href="#menu" class="close"></a>')
.appendTo($body)
.panel({
delay: 500,
hideOnClick: true,
hideOnSwipe: true,
resetScroll: true,
resetForms: true,
side: 'right',
target: $body,
visibleClass: 'is-menu-visible'
});
// Header.
if (skel.vars.IEVersion < 9)
$header.removeClass('alt');
if ($banner.length > 0 &&
$header.hasClass('alt')) {
$window.on('resize', function() {
$window.trigger('scroll');
});
$banner.scrollex({
bottom: $header.outerHeight() + 1,
terminate: function() {
$header.removeClass('alt');
},
enter: function() {
$header.addClass('alt');
},
leave: function() {
$header.removeClass('alt');
}
});
}
});
skel
.breakpoints({
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 980px)',
small: '(max-width: 736px)',
xsmall: '(max-width: 480px)'
});
$(function() {
var $window = $(window),
$body = $('body'),
$wrapper = $('#page-wrapper'),
$banner = $('#banner'),
$header = $('#header');
// Disable animations/transitions until the page has loaded.
$body.addClass('is-loading');
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-loading');
}, 100);
});
// Mobile?
if (skel.vars.mobile)
$body.addClass('is-mobile');
else
skel
.on('-medium !medium', function() {
$body.removeClass('is-mobile');
})
.on('+medium', function() {
$body.addClass('is-mobile');
});
// Fix: Placeholder polyfill.
$('form').placeholder();
// Prioritize "important" elements on medium.
skel.on('+medium -medium', function() {
$.prioritize(
'.important\\28 medium\\29',
skel.breakpoint('medium').active
);
});
// Scrolly.
$('.scrolly')
.scrolly({
speed: 1500,
offset: $header.outerHeight()
});
// Menu.
$('#menu')
.append('<a href="#menu" class="close"></a>')
.appendTo($body)
.panel({
delay: 500,
hideOnClick: true,
hideOnSwipe: true,
resetScroll: true,
resetForms: true,
side: 'right',
target: $body,
visibleClass: 'is-menu-visible'
});
// Header.
if (skel.vars.IEVersion < 9)
$header.removeClass('alt');
if ($banner.length > 0 &&
$header.hasClass('alt')) {
$window.on('resize', function() {
$window.trigger('scroll');
});
$banner.scrollex({
bottom: $header.outerHeight() + 1,
terminate: function() {
$header.removeClass('alt');
},
enter: function() {
$header.addClass('alt');
},
leave: function() {
$header.removeClass('alt');
}
});
}
});
})(jQuery);

798
src/assets/js/util.js

@ -1,587 +1,587 @@
(function($) {
/**
* Generate an indented list of links from a nav. Meant for use with panel().
* @return {jQuery} jQuery object.
*/
$.fn.navList = function() {
/**
* Generate an indented list of links from a nav. Meant for use with panel().
* @return {jQuery} jQuery object.
*/
$.fn.navList = function() {
var $this = $(this);
$a = $this.find('a'),
b = [];
var $this = $(this);
$a = $this.find('a'),
b = [];
$a.each(function() {
$a.each(function() {
var $this = $(this),
indent = Math.max(0, $this.parents('li').length - 1),
href = $this.attr('href'),
target = $this.attr('target');
var $this = $(this),
indent = Math.max(0, $this.parents('li').length - 1),
href = $this.attr('href'),
target = $this.attr('target');
b.push(
'<a ' +
'class="link depth-' + indent + '"' +
( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
'>' +
'<span class="indent-' + indent + '"></span>' +
$this.text() +
'</a>'
);
b.push(
'<a ' +
'class="link depth-' + indent + '"' +
( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
'>' +
'<span class="indent-' + indent + '"></span>' +
$this.text() +
'</a>'
);
});
});
return b.join('');
return b.join('');
};
};
/**
* Panel-ify an element.
* @param {object} userConfig User config.
* @return {jQuery} jQuery object.
*/
$.fn.panel = function(userConfig) {
/**
* Panel-ify an element.
* @param {object} userConfig User config.
* @return {jQuery} jQuery object.
*/
$.fn.panel = function(userConfig) {
// No elements?
if (this.length == 0)
return $this;
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).panel(userConfig);
for (var i=0; i < this.length; i++)
$(this[i]).panel(userConfig);
return $this;
return $this;
}
}
// Vars.
var $this = $(this),
$body = $('body'),
$window = $(window),
id = $this.attr('id'),
config;
// Vars.
var $this = $(this),
$body = $('body'),
$window = $(window),
id = $this.attr('id'),
config;
// Config.
config = $.extend({
// Config.
config = $.extend({
// Delay.
delay: 0,
// Delay.
delay: 0,
// Hide panel on link click.
hideOnClick: false,
// Hide panel on link click.
hideOnClick: false,
// Hide panel on escape keypress.
hideOnEscape: false,
// Hide panel on escape keypress.
hideOnEscape: false,
// Hide panel on swipe.
hideOnSwipe: false,
// Hide panel on swipe.
hideOnSwipe: false,
// Reset scroll position on hide.
resetScroll: false,
// Reset scroll position on hide.
resetScroll: false,
// Reset forms on hide.
resetForms: false,
// Reset forms on hide.
resetForms: false,
// Side of viewport the panel will appear.
side: null,
// Side of viewport the panel will appear.
side: null,
// Target element for "class".
target: $this,
// Target element for "class".
target: $this,
// Class to toggle.
visibleClass: 'visible'
// Class to toggle.
visibleClass: 'visible'
}, userConfig);
}, userConfig);
// Expand "target" if it's not a jQuery object already.
if (typeof config.target != 'jQuery')
config.target = $(config.target);
// Expand "target" if it's not a jQuery object already.
if (typeof config.target != 'jQuery')
config.target = $(config.target);
// Panel.
// Panel.
// Methods.
$this._hide = function(event) {
// Methods.
$this._hide = function(event) {
// Already hidden? Bail.
if (!config.target.hasClass(config.visibleClass))
return;
// Already hidden? Bail.
if (!config.target.hasClass(config.visibleClass))
return;
// If an event was provided, cancel it.
if (event) {
// If an event was provided, cancel it.
if (event) {
event.preventDefault();
event.stopPropagation();
event.preventDefault();
event.stopPropagation();
}
}
// Hide.
config.target.removeClass(config.visibleClass);
// Hide.
config.target.removeClass(config.visibleClass);
// Post-hide stuff.
window.setTimeout(function() {
// Post-hide stuff.
window.setTimeout(function() {
// Reset scroll position.
if (config.resetScroll)
$this.scrollTop(0);
// Reset scroll position.
if (config.resetScroll)
$this.scrollTop(0);
// Reset forms.
if (config.resetForms)
$this.find('form').each(function() {
this.reset();
});
// Reset forms.
if (config.resetForms)
$this.find('form').each(function() {
this.reset();
});
}, config.delay);
}, config.delay);
};
};
// Vendor fixes.
$this
.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
.css('-webkit-overflow-scrolling', 'touch');
// Vendor fixes.
$this
.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
.css('-webkit-overflow-scrolling', 'touch');
// Hide on click.
if (config.hideOnClick) {
// Hide on click.
if (config.hideOnClick) {
$this.find('a')
.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
$this.find('a')
.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
$this
.on('click', 'a', function(event) {
$this
.on('click', 'a', function(event) {
var $a = $(this),
href = $a.attr('href'),
target = $a.attr('target');
var $a = $(this),
href = $a.attr('href'),
target = $a.attr('target');
if (!href || href == '#' || href == '' || href == '#' + id)
return;
if (!href || href == '#' || href == '' || href == '#' + id)
return;
// Cancel original event.
event.preventDefault();
event.stopPropagation();
// Cancel original event.
event.preventDefault();
event.stopPropagation();
// Hide panel.
$this._hide();
// Hide panel.
$this._hide();
// Redirect to href.
window.setTimeout(function() {
// Redirect to href.
window.setTimeout(function() {
if (target == '_blank')
window.open(href);
else
window.location.href = href;
if (target == '_blank')
window.open(href);
else
window.location.href = href;
}, config.delay + 10);
}, config.delay + 10);
});
});
}
}
// Event: Touch stuff.
$this.on('touchstart', function(event) {
// Event: Touch stuff.
$this.on('touchstart', function(event) {
$this.touchPosX = event.originalEvent.touches[0].pageX;
$this.touchPosY = event.originalEvent.touches[0].pageY;
$this.touchPosX = event.originalEvent.touches[0].pageX;
$this.touchPosY = event.originalEvent.touches[0].pageY;
})
})
$this.on('touchmove', function(event) {
$this.on('touchmove', function(event) {
if ($this.touchPosX === null
|| $this.touchPosY === null)
return;
if ($this.touchPosX === null
|| $this.touchPosY === null)
return;
var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
th = $this.outerHeight(),
ts = ($this.get(0).scrollHeight - $this.scrollTop());
var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
th = $this.outerHeight(),
ts = ($this.get(0).scrollHeight - $this.scrollTop());
// Hide on swipe?
if (config.hideOnSwipe) {
// Hide on swipe?
if (config.hideOnSwipe) {
var result = false,
boundary = 20,
delta = 50;
var result = false,
boundary = 20,
delta = 50;
switch (config.side) {
switch (config.side) {
case 'left':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
break;
case 'left':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
break;
case 'right':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
break;
case 'right':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
break;
case 'top':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
break;
case 'top':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
break;
case 'bottom':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
break;
case 'bottom':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
break;
default:
break;
default:
break;
}
}
if (result) {
if (result) {
$this.touchPosX = null;
$this.touchPosY = null;
$this._hide();
$this.touchPosX = null;
$this.touchPosY = null;
$this._hide();
return false;
return false;
}
}
}
}
// Prevent vertical scrolling past the top or bottom.
if (($this.scrollTop() < 0 && diffY < 0)
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
// Prevent vertical scrolling past the top or bottom.
if (($this.scrollTop() < 0 && diffY < 0)
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
event.preventDefault();
event.stopPropagation();
event.preventDefault();
event.stopPropagation();
}
}
});
});
// Event: Prevent certain events inside the panel from bubbling.
$this.on('click touchend touchstart touchmove', function(event) {
event.stopPropagation();
});
// Event: Prevent certain events inside the panel from bubbling.
$this.on('click touchend touchstart touchmove', function(event) {
event.stopPropagation();
});
// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
$this.on('click', 'a[href="#' + id + '"]', function(event) {
// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
$this.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
event.preventDefault();
event.stopPropagation();
config.target.removeClass(config.visibleClass);
config.target.removeClass(config.visibleClass);
});
});
// Body.
// Body.
// Event: Hide panel on body click/tap.
$body.on('click touchend', function(event) {
$this._hide(event);
});
// Event: Hide panel on body click/tap.
$body.on('click touchend', function(event) {
$this._hide(event);
});
// Event: Toggle.
$body.on('click', 'a[href="#' + id + '"]', function(event) {
// Event: Toggle.
$body.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
event.preventDefault();
event.stopPropagation();
config.target.toggleClass(config.visibleClass);
config.target.toggleClass(config.visibleClass);
});
});
// Window.
// Window.
// Event: Hide on ESC.
if (config.hideOnEscape)
$window.on('keydown', function(event) {
// Event: Hide on ESC.
if (config.hideOnEscape)
$window.on('keydown', function(event) {
if (event.keyCode == 27)
$this._hide(event);
if (event.keyCode == 27)
$this._hide(event);
});
});
return $this;
return $this;
};
};
/**
* Apply "placeholder" attribute polyfill to one or more forms.
* @return {jQuery} jQuery object.
*/
$.fn.placeholder = function() {
/**
* Apply "placeholder" attribute polyfill to one or more forms.
* @return {jQuery} jQuery object.
*/
$.fn.placeholder = function() {
// Browser natively supports placeholders? Bail.
if (typeof (document.createElement('input')).placeholder != 'undefined')
return $(this);
// Browser natively supports placeholders? Bail.
if (typeof (document.createElement('input')).placeholder != 'undefined')
return $(this);
// No elements?
if (this.length == 0)
return $this;
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).placeholder();
for (var i=0; i < this.length; i++)
$(this[i]).placeholder();
return $this;
return $this;
}
}
// Vars.
var $this = $(this);
// Vars.
var $this = $(this);
// Text, TextArea.
$this.find('input[type=text],textarea')
.each(function() {
// Text, TextArea.
$this.find('input[type=text],textarea')
.each(function() {
var i = $(this);
var i = $(this);
if (i.val() == ''
|| i.val() == i.attr('placeholder'))
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
if (i.val() == ''
|| i.val() == i.attr('placeholder'))
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
})
.on('blur', function() {
})
.on('blur', function() {
var i = $(this);
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.val() == '')
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
if (i.val() == '')
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
})
.on('focus', function() {
})
.on('focus', function() {
var i = $(this);
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.val() == i.attr('placeholder'))
i
.removeClass('polyfill-placeholder')
.val('');
if (i.val() == i.attr('placeholder'))
i
.removeClass('polyfill-placeholder')
.val('');
});
});
// Password.
$this.find('input[type=password]')
.each(function() {
// Password.
$this.find('input[type=password]')
.each(function() {
var i = $(this);
var x = $(
$('<div>')
.append(i.clone())
.remove()
.html()
.replace(/type="password"/i, 'type="text"')
.replace(/type=password/i, 'type=text')
);
var i = $(this);
var x = $(
$('<div>')
.append(i.clone())
.remove()
.html()
.replace(/type="password"/i, 'type="text"')
.replace(/type=password/i, 'type=text')
);
if (i.attr('id') != '')
x.attr('id', i.attr('id') + '-polyfill-field');
if (i.attr('id') != '')
x.attr('id', i.attr('id') + '-polyfill-field');
if (i.attr('name') != '')
x.attr('name', i.attr('name') + '-polyfill-field');
if (i.attr('name') != '')
x.attr('name', i.attr('name') + '-polyfill-field');
x.addClass('polyfill-placeholder')
.val(x.attr('placeholder')).insertAfter(i);
x.addClass('polyfill-placeholder')
.val(x.attr('placeholder')).insertAfter(i);
if (i.val() == '')
i.hide();
else
x.hide();
if (i.val() == '')
i.hide();
else
x.hide();
i
.on('blur', function(event) {
i
.on('blur', function(event) {
event.preventDefault();
event.preventDefault();
var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
if (i.val() == '') {
if (i.val() == '') {
i.hide();
x.show();
i.hide();
x.show();
}
}
});
});
x
.on('focus', function(event) {
x
.on('focus', function(event) {
event.preventDefault();
event.preventDefault();
var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
x.hide();
x.hide();
i
.show()
.focus();
i
.show()
.focus();
})
.on('keypress', function(event) {
})
.on('keypress', function(event) {
event.preventDefault();
x.val('');
event.preventDefault();
x.val('');
});
});
});
});
// Events.
$this
.on('submit', function() {
// Events.
$this
.on('submit', function() {
$this.find('input[type=text],input[type=password],textarea')
.each(function(event) {
$this.find('input[type=text],input[type=password],textarea')
.each(function(event) {
var i = $(this);
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
i.attr('name', '');
if (i.attr('name').match(/-polyfill-field$/))
i.attr('name', '');
if (i.val() == i.attr('placeholder')) {
if (i.val() == i.attr('placeholder')) {
i.removeClass('polyfill-placeholder');
i.val('');
i.removeClass('polyfill-placeholder');
i.val('');
}
}
});
});
})
.on('reset', function(event) {
})
.on('reset', function(event) {
event.preventDefault();
event.preventDefault();
$this.find('select')
.val($('option:first').val());
$this.find('select')
.val($('option:first').val());
$this.find('input,textarea')
.each(function() {
$this.find('input,textarea')
.each(function() {
var i = $(this),
x;
var i = $(this),
x;
i.removeClass('polyfill-placeholder');
i.removeClass('polyfill-placeholder');
switch (this.type) {
switch (this.type) {
case 'submit':
case 'reset':
break;
case 'submit':
case 'reset':
break;
case 'password':
i.val(i.attr('defaultValue'));
case 'password':
i.val(i.attr('defaultValue'));
x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
if (i.val() == '') {
i.hide();
x.show();
}
else {
i.show();
x.hide();
}
if (i.val() == '') {
i.hide();
x.show();
}
else {
i.show();
x.hide();
}
break;
break;
case 'checkbox':
case 'radio':
i.attr('checked', i.attr('defaultValue'));
break;
case 'checkbox':
case 'radio':
i.attr('checked', i.attr('defaultValue'));
break;
case 'text':
case 'textarea':
i.val(i.attr('defaultValue'));
case 'text':
case 'textarea':
i.val(i.attr('defaultValue'