Browse Source
Closes https://gitlab.com/autonomic-cooperative/autonomic-cooperative.gitlab.io/issues/19.merge-requests/7/head
Luke Murphy
5 years ago
51 changed files with 3181 additions and 3173 deletions
@ -0,0 +1,8 @@
|
||||
root=true |
||||
|
||||
[*] |
||||
charset=utf-8 |
||||
indent_style=space |
||||
|
||||
[Makefile] |
||||
indent_style=tab |
||||
@ -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> |
||||
|
||||
@ -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> |
||||
|
||||
@ -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> |
||||
|
||||
@ -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> |
||||
|
||||
@ -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> |
||||
|
||||
@ -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> |
||||
|
||||
@ -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> |
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 324 KiB After Width: | Height: | Size: 325 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 9.8 KiB |
@ -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); |
||||
@ -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 |
||||