Browse Source
Closes https://gitlab.com/autonomic-cooperative/autonomic-cooperative.gitlab.io/issues/19.merge-requests/7/head
Luke Murphy
4 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 |
|||
.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(); |
|||