Commit a2c8541a authored by Björn Bartels's avatar Björn Bartels

update tmpl, clean-up

parent ae78f01e
......@@ -34,13 +34,13 @@
"license": "Apache-2.0",
"babel": {
"presets": [
"es2015"
"env"
]
},
"private": false,
"dependencies": {},
"devDependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-env": "^1.6.0",
"babel-register": "^6.7.2",
"browser-sync": "^2.10.0",
"require-dir": "^0.3.0",
......
......@@ -17,7 +17,7 @@
</head>
<body>
<div id="wrapper" class="row column small-12">
<div id="wrapper" class="row column small-12">
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
......
......@@ -81,7 +81,6 @@ layout: default
<li>Lorem ipsum...</li>
<li>Lorem ipsum...</li>
<li>Lorem ipsum...</li>
<li>
<ol>
<li>Lorem ipsum...</li>
<li>Lorem ipsum...</li>
......@@ -92,6 +91,7 @@ layout: default
</ol>
</li>
</ol>
<li>
</li>
</ol>
......
<!DOCTYPE html>
<!-- <!DOCTYPE html>
<html>
<head>
<title>[site-app]</title>
......@@ -9,13 +9,13 @@
<link href="/assets/vendor/datatables/css/dataTables.foundation.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/assets/vendor/flag-icon-css/flag-icon.min.css" media="screen" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/css/app.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-- >
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-- >
<script src="assets/vendor/modernizr.js"></script>
<script src="assets/js/app.js"></script>
</head>
<body>
-->
<div id="wrapper" class="row column large-12">
<div class="row">
<div class="large-12 columns">
......@@ -1662,21 +1662,8 @@
</article>
<hr>
<!-- Footer -->
<footer id="footer" class="row column large-12">
<span class="copyright">&copy; <a href="https://bjoernbartels.earth" target="_blank">[bjoernbartels.earth]</a>.
<span class="patterns">| <a href="/">Patterns</a>.
<span class="typography">| <a href="/typography.html">Typography</a>.
<span class="foundation">| <a href="/kitchensink.html">Kitchen Sink</a>.
<span class="styleguide">| <a href="/styleguide.html">Styleguide</a>.
<span class="foundation">| <a href="/foundation.html">Demo</a>.
</footer>
</div>
<!--
</body>
</html>
\ No newline at end of file
</html> -->
\ No newline at end of file
---
layout: default
---
<header class="row">
<div class="large-12 columns">
<h1>[Typography - Theme]</h1>
</div>
</header>
<div class="row">
<div class="large-12 columns">
<div class="callout">
<h1>H1 headline text example</h1>
<h2>H2 headline text example</h2>
<h3>H3 headline text example</h3>
<h4>H4 headline text example</h4>
<h5>H5 headline text example</h5>
<h6>H6 headline text example</h6>
<p>paragraph text example</p>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="row column small-12">
<span class="copyright" >&copy; <a href="{{project.author.url}}" target="_blank">{{project.author.name}}</a>.
<span class="patterns" >| <a href="/pl/patterns">Patterns</a>.
<span class="htmlelements">| <a href="/htmlelements.html">HTML Elements</a>.
<span class="foundation">| <a href="/foundation.html">Foundation Demo</a>.
<span class="styleguide">| <a href="/styleguide.html">Styleguide</a>.
<span class="emulator" style="dislay:none;" >| <a href="/pl/mobile-phone-emulator.html">Emulator</a>.
</footer>
\ No newline at end of file
<footer id="footer" class="row columns small-12">
<div class="small-12 medium-6 column text-left">
<span class="patterns" ><a href="/pl/patterns/">Patterns</a>
<span class="htmlelements">| <a href="/htmlelements.html">HTML Elements</a>
<span class="typography">| <a href="/typography.html">Typography</a>
<span class="plfoundation">| <a href="/kitchensink.html">Kitchen Sink</a>
<span class="styleguide">| <a href="/styleguide.html">Styleguide</a>
<span class="plfoundation">| <a href="/foundation.html">Demo</a>
<span class="emulator" style="dislay:none;" >| <a href="/pl/emulator">Emulator</a>.
</div>
<div class="small-12 medium-6 column text-right">
{{#if project}}
<span class="copyright" >[{{project.name}}{{#if project.version}} v{{project.version}}{{/if}}]</a>
<span class="copyright" >| &copy; <a href="{{project.author.url}}" target="_blank">{{project.author.name}}</a>
{{/if}}
</div>
</footer>
\ No newline at end of file
### 09/2017
- initial release
\ No newline at end of file
---
pattern:
name: 'molecule/article-excerpt-toggle'
categories: ['typography','article']
uses: ['atom/text-headline','molecule/text-excerpt-toggle','atom/link']
params:
class: ['*']
headline: ['*']
content: ['*']
url: ['*']
defaults:
headline: 'This is some article headline...'
url: 'https://domain.tld/'
---
<article class="{{class}}">
{{PL atom="text-headline" text=headline}}
{{PL molecule="text-excerpt-toggle" text=content}}
{{PL atom="link" href=url label="read more" class="more"}}
</article>
\ No newline at end of file
---
title: molecule/article-excerpt-toggle
description: 'an article teaser module with "more" link, text paragraph is toggling to excerpt or full length'
sass: styles.scss
js:
---
Here you can either give a rather brief description of your pattern or provide extended usage information.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
## A Markup Example
```html_example
<article class="{{class}}">
{{patternlibrary atom="text-headline" text=headline}}
{{patternlibrary molecule="text-excerpt-toggle" text=content}}
{{patternlibrary atom="link" href=url label="read more" class="more"}}
</article>
```
\ No newline at end of file
......@@ -2,7 +2,7 @@
title: molecule/article-teaser
description: 'an article teaser module with "more" link'
sass: styles.scss
js: module.js
js:
---
Here you can either give a rather brief description of your pattern or provide extended usage information.
......
### 09/2017
- initial release
\ No newline at end of file
---
pattern:
name: 'molecule/text-excerpt-toggle'
categories: ['basic','typography']
uses: ['atom/text-paragraph','atom/link']
params:
class: ['*']
---
<p class="{{class}}" data-text-excerpt-toggle>{{texthelper 'long'}}</p>
<a href="#more">show more</a>
<a href="#less">show less</a>
\ No newline at end of file
'use strict';
import $ from 'jquery';
/**
* TextExcerptToggle module.
*
* @module Siteapp.TextExcerptToggle
*
*/
class TextExcerptToggle {
/**
* Creates a new instance of a Siteapp.TextExcerptToggle.
* @class
* @param {jQuery} element - jQuery object to make into a Siteapp.TextExcerptToggle.
* Object should be of the TextExcerptToggle panel, rather than its anchor.
* @param {Object} options - Overrides to the default plugin settings.
*/
constructor(element, options) {
this.$element = element;
this.options = $.extend({}, TextExcerptToggle.defaults, this.$element.data(), options);
this._init();
}
/**
* Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
* @function
* @private
*/
_init() {
var $id = this.$element.attr('id');
this.$anchor = $(`[data-toggle="${$id}"]`).length ? $(`[data-toggle="${$id}"]`) : $(`[data-open="${$id}"]`);
this.$anchor.attr({
'aria-controls': $id,
'data-is-focus': false,
'data-yeti-box': $id,
'aria-haspopup': true,
'aria-expanded': false
});
if(this.options.parentClass){
this.$parent = this.$element.parents('.' + this.options.parentClass);
}else{
this.$parent = null;
}
this.options.positionClass = this.getPositionClass();
this.counter = 4;
this.usedPositions = [];
this.$element.attr({
'aria-hidden': 'true',
'data-yeti-box': $id,
'data-resize': $id,
'aria-labelledby': this.$anchor[0].id || GetYoDigits(6, 'dd-anchor')
});
this._events();
}
/**
* Helper function to determine current orientation of TextExcerptToggle pane.
* @function
* @returns {String} position - string value of a position class.
*/
getPositionClass() {
var verticalPosition = this.$element[0].className.match(/(top|left|right|bottom)/g);
verticalPosition = verticalPosition ? verticalPosition[0] : '';
var horizontalPosition = /float-(\S+)/.exec(this.$anchor[0].className);
horizontalPosition = horizontalPosition ? horizontalPosition[1] : '';
var position = horizontalPosition ? horizontalPosition + ' ' + verticalPosition : verticalPosition;
return position;
}
/**
* Adjusts the TextExcerptToggle panes orientation by adding/removing positioning classes.
* @function
* @private
* @param {String} position - position class to remove.
*/
_reposition(position) {
this.usedPositions.push(position ? position : 'bottom');
//default, try switching to opposite side
if(!position && (this.usedPositions.indexOf('top') < 0)){
this.$element.addClass('top');
}else if(position === 'top' && (this.usedPositions.indexOf('bottom') < 0)){
this.$element.removeClass(position);
}else if(position === 'left' && (this.usedPositions.indexOf('right') < 0)){
this.$element.removeClass(position)
.addClass('right');
}else if(position === 'right' && (this.usedPositions.indexOf('left') < 0)){
this.$element.removeClass(position)
.addClass('left');
}
//if default change didn't work, try bottom or left first
else if(!position && (this.usedPositions.indexOf('top') > -1) && (this.usedPositions.indexOf('left') < 0)){
this.$element.addClass('left');
}else if(position === 'top' && (this.usedPositions.indexOf('bottom') > -1) && (this.usedPositions.indexOf('left') < 0)){
this.$element.removeClass(position)
.addClass('left');
}else if(position === 'left' && (this.usedPositions.indexOf('right') > -1) && (this.usedPositions.indexOf('bottom') < 0)){
this.$element.removeClass(position);
}else if(position === 'right' && (this.usedPositions.indexOf('left') > -1) && (this.usedPositions.indexOf('bottom') < 0)){
this.$element.removeClass(position);
}
//if nothing cleared, set to bottom
else{
this.$element.removeClass(position);
}
this.classChanged = true;
this.counter--;
}
/**
* Sets the position and orientation of the TextExcerptToggle pane, checks for collisions.
* Recursively calls itself if a collision is detected, with a new position class.
* @function
* @private
*/
_setPosition() {
if(this.$anchor.attr('aria-expanded') === 'false'){ return false; }
var position = this.getPositionClass(),
$eleDims = Box.GetDimensions(this.$element),
$anchorDims = Box.GetDimensions(this.$anchor),
_this = this,
direction = (position === 'left' ? 'left' : ((position === 'right') ? 'left' : 'top')),
param = (direction === 'top') ? 'height' : 'width',
offset = (param === 'height') ? this.options.vOffset : this.options.hOffset;
if(($eleDims.width >= $eleDims.windowDims.width) || (!this.counter && !Box.ImNotTouchingYou(this.$element, this.$parent))){
var newWidth = $eleDims.windowDims.width,
parentHOffset = 0;
if(this.$parent){
var $parentDims = Box.GetDimensions(this.$parent),
parentHOffset = $parentDims.offset.left;
if ($parentDims.width < newWidth){
newWidth = $parentDims.width;
}
}
this.$element.offset(Box.GetOffsets(this.$element, this.$anchor, 'center bottom', this.options.vOffset, this.options.hOffset + parentHOffset, true)).css({
'width': newWidth - (this.options.hOffset * 2),
'height': 'auto'
});
this.classChanged = true;
return false;
}
this.$element.offset(Box.GetOffsets(this.$element, this.$anchor, position, this.options.vOffset, this.options.hOffset));
while(!Box.ImNotTouchingYou(this.$element, this.$parent, true) && this.counter){
this._reposition(position);
this._setPosition();
}
}
/**
* Adds event listeners to the element utilizing the triggers utility library.
* @function
* @private
*/
_events() {
var _this = this;
this.$element.on({
'open.zf.trigger': this.open.bind(this),
'close.zf.trigger': this.close.bind(this),
'toggle.zf.trigger': this.toggle.bind(this),
'resizeme.zf.trigger': this._setPosition.bind(this)
});
if(this.options.hover){
this.$anchor.off('mouseenter.zf.textexcerpttoggle mouseleave.zf.textexcerpttoggle')
.on('mouseenter.zf.textexcerpttoggle', function(){
var bodyData = $('body').data();
if(typeof(bodyData.whatinput) === 'undefined' || bodyData.whatinput === 'mouse') {
clearTimeout(_this.timeout);
_this.timeout = setTimeout(function(){
_this.open();
_this.$anchor.data('hover', true);
}, _this.options.hoverDelay);
}
}).on('mouseleave.zf.textexcerpttoggle', function(){
clearTimeout(_this.timeout);
_this.timeout = setTimeout(function(){
_this.close();
_this.$anchor.data('hover', false);
}, _this.options.hoverDelay);
});
if(this.options.hoverPane){
this.$element.off('mouseenter.zf.textexcerpttoggle mouseleave.zf.textexcerpttoggle')
.on('mouseenter.zf.textexcerpttoggle', function(){
clearTimeout(_this.timeout);
}).on('mouseleave.zf.textexcerpttoggle', function(){
clearTimeout(_this.timeout);
_this.timeout = setTimeout(function(){
_this.close();
_this.$anchor.data('hover', false);
}, _this.options.hoverDelay);
});
}
}
this.$anchor.add(this.$element).on('keydown.zf.textexcerpttoggle', function(e) {
var $target = $(this),
visibleFocusableElements = Keyboard.findFocusable(_this.$element);
Keyboard.handleKey(e, 'TextExcerptToggle', {
open: function() {
if ($target.is(_this.$anchor)) {
_this.open();
_this.$element.attr('tabindex', -1).focus();
e.preventDefault();
}
},
close: function() {
_this.close();
_this.$anchor.focus();
}
});
});
}
/**
* Adds an event handler to the body to close any TextExcerptToggle on a click.
* @function
* @private
*/
_addBodyHandler() {
var $body = $(document.body).not(this.$element),
_this = this;
$body.off('click.zf.textexcerpttoggle')
.on('click.zf.textexcerpttoggle', function(e){
if(_this.$anchor.is(e.target) || _this.$anchor.find(e.target).length) {
return;
}
if(_this.$element.find(e.target).length) {
return;
}
_this.close();
$body.off('click.zf.textexcerpttoggle');
});
}
/**
* Opens the TextExcerptToggle pane, and fires a bubbling event to close other TextExcerptToggle.
* @function
* @fires TextExcerptToggle#closeme
* @fires TextExcerptToggle#show
*/
open() {
// var _this = this;
/**
* Fires to close other open TextExcerptToggle, typically when TextExcerptToggle is opening
* @event TextExcerptToggle#closeme
*/
this.$element.trigger('closeme.zf.textexcerpttoggle', this.$element.attr('id'));
this.$anchor.addClass('hover')
.attr({'aria-expanded': true});
// this.$element/*.show()*/;
this._setPosition();
this.$element.addClass('is-open')
.attr({'aria-hidden': false});
if(this.options.autoFocus){
var $focusable = Keyboard.findFocusable(this.$element);
if($focusable.length){
$focusable.eq(0).focus();
}
}
if(this.options.closeOnClick){ this._addBodyHandler(); }
if (this.options.trapFocus) {
Keyboard.trapFocus(this.$element);
}
/**
* Fires once the TextExcerptToggle is visible.
* @event TextExcerptToggle#show
*/
this.$element.trigger('show.zf.textexcerpttoggle', [this.$element]);
}
/**
* Closes the open TextExcerptToggle pane.
* @function
* @fires TextExcerptToggle#hide
*/
close() {
if(!this.$element.hasClass('is-open')){
return false;
}
this.$element.removeClass('is-open')
.attr({'aria-hidden': true});
this.$anchor.removeClass('hover')
.attr('aria-expanded', false);
if(this.classChanged){
var curPositionClass = this.getPositionClass();
if(curPositionClass){
this.$element.removeClass(curPositionClass);
}
this.$element.addClass(this.options.positionClass)
/*.hide()*/.css({height: '', width: ''});
this.classChanged = false;
this.counter = 4;
this.usedPositions.length = 0;
}
/**
* Fires once the TextExcerptToggle is no longer visible.
* @event TextExcerptToggle#hide
*/
this.$element.trigger('hide.zf.textexcerpttoggle', [this.$element]);
if (this.options.trapFocus) {
Keyboard.releaseFocus(this.$element);
}
}
/**
* Toggles the TextExcerptToggle pane's visibility.
* @function
*/
toggle() {
if(this.$element.hasClass('is-open')){
if(this.$anchor.data('hover')) return;
this.close();
}else{
this.open();
}
}
/**
* Destroys the TextExcerptToggle.
* @function
*/
_destroy() {
this.$element.off('.zf.trigger').hide();
this.$anchor.off('.zf.textexcerpttoggle');
$(document.body).off('click.zf.textexcerpttoggle');
}
}
TextExcerptToggle.defaults = {
/**
* Class that designates bounding container of TextExcerptToggle (default: window)
* @option
* @type {?string}
* @default null
*/
parentClass: null,
/**
* Amount of time to delay opening a submenu on hover event.
* @option
* @type {number}
* @default 250
*/
hoverDelay: 250,
/**
* Allow submenus to open on hover events
* @option
* @type {boolean}
* @default false
*/
hover: false,
/**
* Don't close TextExcerptToggle when hovering over TextExcerptToggle pane
* @option
* @type {boolean}
* @default false
*/
hoverPane: false,
/**
* Number of pixels between the TextExcerptToggle pane and the triggering element on open.
* @option
* @type {number}
* @default 1
*/
vOffset: 1,
/**
* Number of pixels between the TextExcerptToggle pane and the triggering element on open.
* @option
* @type {number}
* @default 1
*/
hOffset: 1,
/**
* Class applied to adjust open position. JS will test and fill this in.
* @option
* @type {string}
* @default ''
*/
positionClass: '',
/**
* Allow the plugin to trap focus to the TextExcerptToggle pane if opened with keyboard commands.
* @option
* @type {boolean}
* @default false
*/
trapFocus: false,
/**
* Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.
* @option
* @type {boolean}
* @default false
*/
autoFocus: false,
/**
* Allows a click on the body to close the TextExcerptToggle.
* @option
* @type {boolean}
* @default false
*/
closeOnClick: false
}
export {TextExcerptToggle};
---
title: 'molecule/text-excerpt-toggle'
description: 'an inline text paragraph, toggling to excerpt or full length'
sass: styles.scss
js: module.js
---
Here you can either give a rather brief description of your pattern or provide extended usage information.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
## A Markup Example
```html_example
<p data-text-excerpt-toggle>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum
inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda
error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum
inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda
error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum
inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda
error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum
inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda
error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
</p>
<a href="#more">show more</a>
<a href="#less">show less</a>
```
\ No newline at end of file
# The Grid
<p class="lead">Problem: You've got tons of content, each needing different sized vertical columns, and don't know how to quick and easily get it all done. Solution: The awesome grid!</p>
---
## Overview
The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns, and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a row or column.
---
## Nesting
In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.
---
## How to Use