Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu 2026-09-30 23:13:03 +02:00
commit b38dea0597
25901 changed files with 9982925 additions and 369 deletions

View file

@ -0,0 +1,227 @@
/** Variables
---------------------------------------------------------*/
:root {
--dim-micro: 6px;
--dim-small: 12px;
--dim-medium: 24px;
--dim-mega: 48px;
--base-xs: 6px;
--base-s: 18px;
--base-m: 24px;
--base-l: 30px;
--base-xl: 42px;
--base-xxl: 60px;
--base-font-xs: 10px;
--base-font-s: 14px;
--base-font-m: 17px;
--base-font-l: 23px;
--base-font-xl: 60px;
}
/**
* 1. Apply a natural box layout
* model to all elements
*/
*,
*:after,
*:before {
box-sizing: border-box; /* 1 */
font: inherit;
margin: 0;
}
/** Document
---------------------------------------------------------*/
html {
height: 100%;
}
/** Body
---------------------------------------------------------*/
body {
height: 100%;
font: 300 17px/21px 'FiraSans';
background-color: var(--background);
color: var(--text-color);
padding: 0;
}
/** Tags
---------------------------------------------------------*/
a {
color: var(--highlight-color, inherit);
text-decoration: none;
font-style: italic;
}
hr {
height: 1px;
margin: var(--dim-small) 0 var(--dim-small) 0;
border: 0;
background:
var(--border-color,
var(--background-plus,
rgba(0,0,0,0.2)));
}
em {
font-weight: 500;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: 300;
}
.alpha {
font-size: 23px;
font-weight: 200;
font-style: italic;
line-height: 26px;
margin: 6px 0 24px 0;
}
.beta {
font-size: 17px;
font-weight: 400;
margin: 32px 0 16px 0;
}
.gamma {
font-size: 14px;
text-transform: uppercase;
font-weight: normal;
margin: 32px 0 16px 0;
}
.milli {
font-size: 14px;
font-weight: 300;
}
.large {
font-size: 23px;
line-height: 26px;
}
.mega {
font-size: 60px;
line-height: 60px;
font-style: normal;
}
.giga {}
.kilo {}
/* alignment */
.l-align-right { float: right; }
.l-align-left { float: left; }
.l-align-center { text-align: center; }
.l-text-align-left { text-align: left; }
.l-text-align-right { text-align: right; }
.l-text-valign-top {
vertical-align: top;
}
.l-width-full {
width: 100%;
}
/** Flexbox
---------------------------------------------------------*/
.l-flex { display: flex; }
.l-flex-col { display: flex; flex-direction: column; }
.l-flex-col-v-align {
display: flex !important;
flex-direction: column;
justify-content: center;
}
.l-flex-v-align { align-items: center; }
.l-flex-h-align { justify-content: center; }
.l-flex-grow { flex: 1; }
/** Margin
---------------------------------------------------------*/
/* Top */
.l-mt-small { margin-top: var(--dim-small); }
.l-mt-med { margin-top: var(--dim-medium); }
/* Bottom */
.l-mb-small { margin-bottom: var(--dim-small); }
.l-mb-med { margin-bottom: var(--dim-medium); }
.l-mb-large {}
.l-mb-mega { margin-bottom: var(--dim-mega); }
/* Left */
.l-ml-small { margin-left: var(--dim-small); }
/* Right */
.l-mr-small { margin-right: var(--dim-small); }
/* Auto */
.l-mlr-auto { margin-left: auto; margin-right: auto; }
.l-m-auto { margin: auto }
/* Margin */
.l-m-small { margin: var(--dim-small) }
.l-m-med { margin: var(--dim-medium) }
.l-m-0 { margin: 0 }
/** Padding
---------------------------------------------------------*/
.l-p-small { padding: var(--dim-small); }
.l-pl-small { padding-left: var(--dim-small); }
.l-pr-small { padding-right: var(--dim-small); }
.l-plr-small {
padding-right: var(--dim-small);
padding-left: var(--dim-small);
}
.l-pb-small { padding-bottom: var(--dim-small); }
.l-pt-small { padding-top: var(--dim-small); }
.l-pt-mega { padding-top: var(--dim-mega); }
.l-pt-micro { padding-top: var(--dim-micro); }
.l-pb-micro { padding-bottom: var(--dim-micro); }
.l-p-0 { padding: 0 ;}
/** Helpers
---------------------------------------------------------*/
.l-clearfix:after {
content: "";
display: table;
clear: both;
}
.l-inline-block {
display: inline-block;
}
.is-hidden {
display: none !important;
}
.is-invisible {
visibility: hidden !important;
}

View file

@ -0,0 +1,16 @@
{
"name": "base",
"version": "0.0.0",
"authors": [
"Wilson Page <wilsonpage@me.com>"
],
"main": "base.css",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}

View file

@ -0,0 +1,19 @@
{
"name": "evt",
"main": "index.js",
"version": "0.4.0",
"homepage": "https://github.com/wilsonpage/evt",
"authors": [
"Wilson Page <wilsonpage@me.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"package.json",
"test",
"tests",
"README.md"
]
}

View file

@ -0,0 +1,7 @@
;;(function(){var proto=Events.prototype;var slice=[].slice;function Events(obj){if(!(this instanceof Events))return new Events(obj);if(obj)return mixin(obj,proto);}
proto.on=function(name,cb){this._cbs=this._cbs||{};(this._cbs[name]||(this._cbs[name]=[])).push(cb);return this;};proto.once=function(name,cb){this.on(name,one);function one(){cb.apply(this,arguments);this.off(name,one);}};proto.off=function(name,cb){this._cbs=this._cbs||{};if(!name){this._cbs={};return;}
if(!cb){return delete this._cbs[name];}
var cbs=this._cbs[name]||[];var i;while(cbs&&~(i=cbs.indexOf(cb))){cbs.splice(i,1);}
return this;};proto.fire=proto.emit=function(options){var cbs=this._cbs=this._cbs||{};var name=options.name||options;var batch=(cbs[name]||[]).concat(cbs['*']||[]);var ctx=options.ctx||this;if(batch.length){this._fireArgs=arguments;var args=slice.call(arguments,1);while(batch.length){batch.shift().apply(ctx,args);}}
return this;};proto.firer=function(name){var self=this;return function(){var args=slice.call(arguments);args.unshift(name);self.fire.apply(self,args);};};function mixin(a,b){for(var key in b)a[key]=b[key];return a;}
if(typeof exports==='object'){module.exports=Events;}else if(typeof define==='function'&&define.amd){define(function(){return Events;});}else{window.evt=Events;}})();

View file

@ -0,0 +1,122 @@
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>GaiaContainer Demo</title>
</head>
<script src='../script.js'></script>
<style>
body {
margin: 0;
}
div:first-of-type {
display: flex;
flex-direction: row;
}
div:first-of-type > * {
flex: 1;
}
gaia-container {
width: 100%;
display: flex;
flex-flow: row wrap;
}
gaia-container.alt {
flex-flow: row-reverse wrap-reverse;
}
gaia-container > .gaia-container-child:not(.added):not(.dragging) {
transition: transform 0.2s;
}
gaia-container > .gaia-container-child.dragging {
z-index: 1;
will-change: transform;
}
gaia-container > .gaia-container-child > div {
display: inline-block;
width: 33vw;
height: 33vw;
}
gaia-container > .gaia-container-child:not(.added):not(.removed) > div {
transition: transform 0.2s, opacity 0.2s;
}
gaia-container > .gaia-container-child.dragging > div {
transform: scale(1.1);
opacity: 0.8;
}
gaia-container > .gaia-container-child.added > div {
animation-name: added;
animation-duration: 0.4s;
}
@keyframes added {
0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 100%; }
}
gaia-container > .gaia-container-child.removed > div {
animation-name: removed;
animation-duration: 0.4s;
}
@keyframes removed {
45% { transform: scaleY(0.1); }
55% { transform: scaleY(0.1); }
100% { transform: scale(0); }
}
</style>
<div>
<button onclick='addBox()'>Add item</button>
<button onclick='container.classList.toggle("alt"); container.synchronise()'>Toggle layout</button>
</div>
<gaia-container drag-and-drop></gaia-container>
<script>
'use strict';
var container = document.getElementsByTagName('gaia-container')[0];
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
function addBox() {
var element = document.createElement('div');
element.style.backgroundColor = 'rgb(' +
randomInt(100, 200) + ',' +
randomInt(100, 200) + ',' +
randomInt(100, 200) + ')';
element.onclick = () => {
container.removeChild(element);
};
var children = container.children;
var insertBefore = children.length ?
children[randomInt(0, children.length - 1)] : null
container.insertBefore(element, insertBefore);
}
var resizeTimeout = null;
window.onresize = () => {
if (resizeTimeout !== null) {
window.clearTimeout(resizeTimeout);
}
resizeTimeout = window.setTimeout(() => {
resizeTimeout = null;
container.synchronise();
}, 100);
}
</script>

View file

@ -0,0 +1,52 @@
;'use strict';window.GaiaContainer=(function(exports){const STATE_CHANGE_TIMEOUT=100;const DEFAULT_DND_TIMEOUT=300;const DND_THRESHOLD=5;const DND_MOVE_THROTTLE=50;var proto=Object.create(HTMLElement.prototype);proto.createdCallback=function(){this._template=template.content.cloneNode(true);var shadow=this.createShadowRoot();shadow.appendChild(this._template);this._frozen=false;this._pendingStateChanges=[];this._children=[];this._dnd={enabled:false,delay:DEFAULT_DND_TIMEOUT,timeout:null,child:null,active:false,start:{pageX:0,pageY:0,clientX:0,clientY:0},last:{pageX:0,pageY:0,clientX:0,clientY:0,timeStamp:0},moveTimeout:null,lastMoveEventTime:0,clickCapture:false};var dndObserverCallback=(mutations)=>{if(this._dnd.enabled!==this.dragAndDrop){this._dnd.enabled=this.dragAndDrop;if(this._dnd.enabled){this.addEventListener('touchstart',this);this.addEventListener('touchmove',this);this.addEventListener('touchcancel',this);this.addEventListener('touchend',this);this.addEventListener('mousedown',this);this.addEventListener('mousemove',this);this.addEventListener('mouseup',this);this.addEventListener('click',this,true);this.addEventListener('contextmenu',this,true);}else{this.cancelDrag();this.removeEventListener('touchstart',this);this.removeEventListener('touchmove',this);this.removeEventListener('touchcancel',this);this.removeEventListener('touchend',this);this.removeEventListener('mousedown',this);this.removeEventListener('mousemove',this);this.removeEventListener('mouseup',this);this.removeEventListener('click',this,true);this.removeEventListener('contextmenu',this,true);}}};this.dndObserver=new MutationObserver(dndObserverCallback);this.dndObserver.observe(this,{attributes:true,attributeFilter:['drag-and-drop']});dndObserverCallback(null);};Object.defineProperty(proto,'children',{get:function(){return this._children.map((child)=>{return child.element;});},enumerable:true});Object.defineProperty(proto,'firstChild',{get:function(){return this._children.length?this._children[0].element:null;},enumerable:true});Object.defineProperty(proto,'lastChild',{get:function(){var length=this._children.length;return length?this._children[length-1].element:null;},enumerable:true});Object.defineProperty(proto,'dragAndDrop',{get:function(){return this.getAttribute('drag-and-drop')!==null;},enumerable:true});Object.defineProperty(proto,'dragAndDropTimeout',{get:function(){return this._dnd.delay;},set:function(timeout){if(timeout>=0){this._dnd.delay=timeout;}else{this._dnd.delay=DEFAULT_DND_TIMEOUT;}},enumerable:true});proto.realAppendChild=proto.appendChild;proto.appendChild=function(element,callback){this.insertBefore(element,null,callback);};proto.realRemoveChild=proto.removeChild;proto.removeChild=function(element,callback){var children=this._children;var childToRemove=null;for(var child of children){if(child.element===element){childToRemove=child;break;}}
if(childToRemove===null){throw'removeChild called on unknown child';}
this.changeState(childToRemove,'removed',()=>{this.realRemoveChild(childToRemove.container);this.realRemoveChild(childToRemove.master);for(var i=0,iLen=children.length;i<iLen;i++){if(children[i]===childToRemove){children.splice(i,1);break;}}
if(callback){callback();}
this.synchronise();});};proto.realReplaceChild=proto.replaceChild;proto.replaceChild=function(newElement,oldElement,callback){if(!newElement||!oldElement){throw'replaceChild called with null arguments';}
if(newElement.parentNode){newElement.parentNode.removeChild(newElement,()=>{this.replaceChild(newElement,oldElement,callback);});if(newElement.parentNode){return;}}
var children=this._children;for(var i=0,iLen=children.length;i<iLen;i++){var oldChild=children[i];if(oldChild.element===oldElement){var newChild=new GaiaContainerChild(newElement);this.realInsertBefore(newChild.container,oldChild.container);this.realInsertBefore(newChild.master,oldChild.master);this.realRemoveChild(oldChild.container);this.realRemoveChild(oldChild.master);this.children.splice(i,1,newChild);this.synchronise();if(callback){callback();}
return;}}
throw'removeChild called on unknown child';};proto.reorderChild=function(element,referenceElement,callback){if(!element){throw'reorderChild called with null element';}
var children=this._children;var child=null;var childIndex=null;var referenceChild=null;var referenceChildIndex=null;for(var i=0,iLen=children.length;i<iLen;i++){if(children[i].element===element){child=children[i];childIndex=i;}else if(children[i].element===referenceElement){referenceChild=children[i];referenceChildIndex=i;}
if(child&&(referenceChild||!referenceElement)){this.realRemoveChild(child.container);this.realRemoveChild(child.master);children.splice(childIndex,1);if(referenceChild){this.realInsertBefore(child.container,referenceChild.container);this.realInsertBefore(child.master,referenceChild.master);}else{(children.length===0)?this.realAppendChild(child.container):this.realInsertBefore(child.container,children[0].master);this.realAppendChild(child.master);}
referenceChild?children.splice(referenceChildIndex-(childIndex<referenceChildIndex)?1:0,0,child):children.splice(children.length,0,child);this.synchronise();if(callback){callback();}
return;}}
throw child?'reorderChild called on unknown reference element':'reorderChild called on unknown child';};proto.realInsertBefore=proto.insertBefore;proto.insertBefore=function(element,reference,callback){var children=this._children;var childToInsert=new GaiaContainerChild(element);var referenceIndex=-1;if(reference!==null){for(var i=0,iLen=children.length;i<iLen;i++){if(children[i].element===reference){referenceIndex=i;break;}}
if(referenceIndex===-1){throw'insertBefore called on unknown child';}}
if(referenceIndex===-1){(children.length===0)?this.realAppendChild(childToInsert.container):this.realInsertBefore(childToInsert.container,children[0].master);this.realAppendChild(childToInsert.master);children.push(childToInsert);}else{this.realInsertBefore(childToInsert.container,children[referenceIndex].container);this.realInsertBefore(childToInsert.master,children[referenceIndex].master);children.splice(referenceIndex,0,childToInsert);}
this.changeState(childToInsert,'added',callback);this.synchronise();};proto.changeState=function(child,state,callback){if(child.container.parentNode!==this){return;}
if(child.container.classList.contains(state)){return;}
if(this._frozen){this._pendingStateChanges.push(this.changeState.bind(this,child,state,callback));return;}
var animStart=(e)=>{if(!e.animationName.endsWith(state)){return;}
child.container.removeEventListener('animationstart',animStart);window.clearTimeout(child[state]);delete child[state];var self=this;child.container.addEventListener('animationend',function animEnd(){child.container.removeEventListener('animationend',animEnd);child.container.classList.remove(state);if(callback){callback();}});};child.container.addEventListener('animationstart',animStart);child.container.classList.add(state);child[state]=window.setTimeout(()=>{delete child[state];child.container.removeEventListener('animationstart',animStart);child.container.classList.remove(state);if(callback){callback();}},STATE_CHANGE_TIMEOUT);};proto.getChildOffsetRect=function(element){var children=this._children;for(var i=0,iLen=children.length;i<iLen;i++){var child=children[i];if(child.element===element){var top=child._lastMasterTop;var left=child._lastMasterLeft;var width=child._lastElementWidth;var height=child._lastElementHeight;return{top:top,left:left,width:width,height:height,right:left+width,bottom:top+height};}}
throw'getChildOffsetRect called on unknown child';};proto.getChildFromPoint=function(x,y){var children=this._children;for(var parent=this.parentElement;parent;parent=parent.parentElement){x+=parent.scrollLeft-parent.offsetLeft;y+=parent.scrollTop-parent.offsetTop;}
for(var i=0,iLen=children.length;i<iLen;i++){var child=children[i];if(x>=child._lastMasterLeft&&y>=child._lastMasterTop&&x<child._lastMasterLeft+child._lastElementWidth&&y<child._lastMasterTop+child._lastElementHeight){return child.element;}}
return null;};proto.cancelDrag=function(){if(this._dnd.timeout!==null){clearTimeout(this._dnd.timeout);this._dnd.timeout=null;}
if(this._dnd.moveTimeout!==null){clearTimeout(this._dnd.moveTimeout);this._dnd.moveTimeout=null;}
if(this._dnd.active){this._dnd.child.container.classList.remove('dragging');this._dnd.child.container.style.position='absolute';this._dnd.child.container.style.top='0';this._dnd.child.container.style.left='0';this._dnd.child.markDirty();this._dnd.child=null;this._dnd.active=false;this.synchronise();this._dnd.clickCapture=true;this.dispatchEvent(new CustomEvent('drag-finish'));}};proto.startDrag=function(){if(!this.dispatchEvent(new CustomEvent('drag-start',{cancelable:true,detail:{target:this._dnd.child.element,pageX:this._dnd.start.pageX,pageY:this._dnd.start.pageY,clientX:this._dnd.start.clientX,clientY:this._dnd.start.clientY}}))){return;}
this._dnd.active=true;this._dnd.child.container.classList.add('dragging');this._dnd.child.container.style.position='fixed';var rect=this.getBoundingClientRect();this._dnd.child.container.style.top=rect.top+'px';this._dnd.child.container.style.left=rect.left+'px';};proto.continueDrag=function(){if(!this._dnd.active){return;}
var left=this._dnd.child.master.offsetLeft+
(this._dnd.last.pageX-this._dnd.start.pageX);var top=this._dnd.child.master.offsetTop+
(this._dnd.last.pageY-this._dnd.start.pageY);this._dnd.child.container.style.transform='translate('+left+'px, '+top+'px)';if(this._dnd.moveTimeout===null){var delay=Math.max(0,DND_MOVE_THROTTLE-
(this._dnd.last.timeStamp-this._dnd.lastMoveEventTime));this._dnd.moveTimeout=setTimeout(()=>{this._dnd.moveTimeout=null;this._dnd.lastMoveEventTime=this._dnd.last.timeStamp;this.dispatchEvent(new CustomEvent('drag-move',{detail:{target:this._dnd.child.element,pageX:this._dnd.last.pageX,pageY:this._dnd.last.pageY,clientX:this._dnd.last.clientX,clientY:this._dnd.last.clientY}}));},delay);}};proto.endDrag=function(event){if(this._dnd.active){var dropTarget=this.getChildFromPoint(this._dnd.last.clientX,this._dnd.last.clientY);if(this.dispatchEvent(new CustomEvent('drag-end',{cancelable:true,detail:{target:this._dnd.child.element,dropTarget:dropTarget,pageX:this._dnd.last.pageX,pageY:this._dnd.last.pageY,clientX:this._dnd.last.clientX,clientY:this._dnd.last.clientY}}))){var children=this._children;if(dropTarget&&dropTarget!==this._dnd.child.element){var dropChild=null;var dropIndex=-1;var childIndex=-1;var insertBefore=true;for(var i=0,iLen=children.length;i<iLen;i++){if(children[i]===this._dnd.child){childIndex=i;if(!dropChild){insertBefore=false;}}
if(children[i].element===dropTarget){dropChild=children[i];dropIndex=i;}
if(dropIndex>=0&&childIndex>=0){break;}}
if(dropIndex>=0&&childIndex>=0){this.realRemoveChild(this._dnd.child.container);this.realRemoveChild(this._dnd.child.master);this.realInsertBefore(this._dnd.child.container,insertBefore?dropChild.container:dropChild.container.nextSibling);this.realInsertBefore(this._dnd.child.master,insertBefore?dropChild.master:dropChild.master.nextSibling);children.splice(dropIndex,0,children.splice(childIndex,1)[0]);this.dispatchEvent(new CustomEvent('drag-rearrange'));}}}}else if(this._dnd.timeout!==null){var handled=!this.dispatchEvent(new CustomEvent('activate',{cancelable:true,detail:{target:this._dnd.child.element}}));if(handled){event.stopImmediatePropagation();event.preventDefault();}}
this.cancelDrag();};proto.handleEvent=function(event){switch(event.type){case'touchstart':case'mousedown':if(this._dnd.active||this._dnd.timeout){this.cancelDrag();break;}
if(event instanceof MouseEvent){this._dnd.start.pageX=event.pageX;this._dnd.start.pageY=event.pageY;this._dnd.start.clientX=event.pageX;this._dnd.start.clientY=event.pageY;}else{this._dnd.start.pageX=event.touches[0].pageX;this._dnd.start.pageY=event.touches[0].pageY;this._dnd.start.clientX=event.touches[0].clientX;this._dnd.start.clientY=event.touches[0].clientY;}
this._dnd.last.pageX=this._dnd.start.pageX;this._dnd.last.pageY=this._dnd.start.pageY;this._dnd.last.clientX=this._dnd.start.clientX;this._dnd.last.clientY=this._dnd.start.clientY;this._dnd.last.timeStamp=event.timeStamp;var target=event.target;for(;target.parentNode!==this;target=target.parentNode){if(target===this||!target.parentNode){return;}}
var children=this._children;for(var child of children){if(child.container===target){this._dnd.child=child;break;}}
if(!this._dnd.child){return;}
if(this._dnd.delay>0){this._dnd.timeout=setTimeout(()=>{this._dnd.timeout=null;this.startDrag();},this._dnd.delay);}else{this.startDrag();}
break;case'touchmove':case'mousemove':var pageX,pageY,clientX,clientY;if(event instanceof MouseEvent){pageX=event.pageX;pageY=event.pageY;clientX=event.clientX;clientY=event.clientY;}else{pageX=event.touches[0].pageX;pageY=event.touches[0].pageY;clientX=event.touches[0].clientX;clientY=event.touches[0].clientY;}
if(this._dnd.timeout){if(Math.abs(pageX-this._dnd.start.pageX)>DND_THRESHOLD||Math.abs(pageY-this._dnd.start.pageY)>DND_THRESHOLD){clearTimeout(this._dnd.timeout);this._dnd.timeout=null;}}else if(this._dnd.active){event.preventDefault();this._dnd.last.pageX=pageX;this._dnd.last.pageY=pageY;this._dnd.last.clientX=clientX;this._dnd.last.clientY=clientY;this._dnd.last.timeStamp=event.timeStamp;this.continueDrag();}
break;case'touchcancel':this.cancelDrag();break;case'touchend':case'mouseup':if(this._dnd.active){event.preventDefault();event.stopImmediatePropagation();}
this.endDrag(event);break;case'click':if(this._dnd.clickCapture){this._dnd.clickCapture=false;event.preventDefault();event.stopImmediatePropagation();}
break;case'contextmenu':if(this._dnd.active||this._dnd.timeout){event.stopImmediatePropagation();event.preventDefault();}
break;}};proto.freeze=function(){this._frozen=true;};proto.thaw=function(){if(this._frozen){this._frozen=false;for(var callback of this._pendingStateChanges){callback();}
this._pendingStateChanges=[];this.synchronise();}};proto.synchronise=function(){if(this._frozen){return;}
var child;for(child of this._children){if(!this._dnd.active||child!==this._dnd.child){child.synchroniseMaster();}}
for(child of this._children){if(!this._dnd.active||child!==this._dnd.child){child.synchroniseContainer();}}};var template=document.createElement('template');template.innerHTML=`<style> :host { position: relative; display: block; }</style>`+`<content select='*'></content>`;function GaiaContainerChild(element){this._element=element;this.markDirty();}
GaiaContainerChild.prototype={get element(){return this._element;},get container(){if(!this._container){var container=document.createElement('div');container.classList.add('gaia-container-child');container.style.position='absolute';container.style.top='0';container.style.left='0';container.appendChild(this.element);this._container=container;}
return this._container;},get master(){if(!this._master){var master=document.createElement('div');master.style.visibility='hidden';this._master=master;}
return this._master;},markDirty(){this._lastElementWidth=null;this._lastElementHeight=null;this._lastElementDisplay=null;this._lastElementOrder=null;this._lastMasterTop=null;this._lastMasterLeft=null;},synchroniseMaster(){var master=this.master;var element=this.element;var style=window.getComputedStyle(element);var display=style.display;var order=style.order;var width=element.offsetWidth;var height=element.offsetHeight;if(this._lastElementWidth!==width||this._lastElementHeight!==height||this._lastElementDisplay!==display||this._lastElementOrder!==order){this._lastElementWidth=width;this._lastElementHeight=height;this._lastElementDisplay=display;this._lastElementOrder=order;master.style.width=width+'px';master.style.height=height+'px';master.style.display=display;master.style.order=order;}},synchroniseContainer(){var master=this.master;var container=this.container;var top=master.offsetTop;var left=master.offsetLeft;if(this._lastMasterTop!==top||this._lastMasterLeft!==left){this._lastMasterTop=top;this._lastMasterLeft=left;container.style.transform='translate('+left+'px, '+top+'px)';}}};exports.GaiaContainerChild=GaiaContainerChild;return document.registerElement('gaia-container',{prototype:proto});})(window);

View file

@ -0,0 +1,32 @@
{
"name": "gaia-dialog",
"version": "0.2.3",
"homepage": "https://github.com/gaia-components/gaia-dialog",
"authors": [
"Wilson Page <wilsonpage@me.com>"
],
"main": "gaia-dialog.js",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"index.html",
"package.json",
"README.md"
],
"devDependencies": {
"base": "gaia-components/base",
"pressed": "gaia-components/pressed",
"gaia-fonts": "gaia-components/gaia-fonts",
"gaia-theme": "gaia-components/gaia-theme",
"gaia-button": "gaia-components/gaia-button"
},
"dependencies": {
"gaia-text-input": "gaia-components/gaia-text-input",
"gaia-icons": "gaia-components/gaia-icons#^0.10.2",
"gaia-component": "gaia-components/gaia-component#^0.3.9"
}
}

View file

@ -0,0 +1,72 @@
;;(function(define){'use strict';define(function(require,exports,module){var GaiaDialogProto=require('gaia-dialog').prototype;var component=require('gaia-component');module.exports=component.register('gaia-dialog-action',{created:function(){this.setupShadowRoot();this.els={dialog:this.shadowRoot.querySelector('gaia-dialog'),submit:this.shadowRoot.querySelector('.submit'),cancel:this.shadowRoot.querySelector('.cancel')};this.els.dialog.addEventListener('closed',GaiaDialogProto.hide.bind(this));},open:function(e){return GaiaDialogProto.show.call(this).then(()=>this.els.dialog.open(e));},close:function(){return this.els.dialog.close().then(GaiaDialogProto.hide.bind(this));},template:`
<gaia-dialog>
<section>
<content select="h1"></content>
</section>
<content select="button"></content>
<button on-click="close" class="cancel">Cancel</button>
</gaia-dialog>
<style>
:host {
display: none;
}
:host[opened],
:host.animating {
display: block;
position: fixed;
width: 100%;
height: 100%;
}
/** Button
---------------------------------------------------------*/
::content section {
padding: 33px 16px;
}
::content button {
position: relative;
display: block;
width: 100%;
height: 50px;
margin: 0;
border: 0;
padding: 0rem 25px;
font: inherit;
background: var(--color-beta);
color: var(--color-epsilon);
transition: all 200ms;
transition-delay: 300ms;
}
::content button:after {
content: '';
display: block;
position: absolute;
height: 1px;
left: 6px;
right: 6px;
top: 49px;
background: #E7E7E7;
}
::content button:last-child:after {
display: none;
}
::content button:active {
background-color: var(--highlight-color);
color: #fff;
transition: none;
}
::content button:active:after {
background: var(--highlight-color);
transition: none;
}
</style>`});});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-dialog-action',this));

View file

@ -0,0 +1,59 @@
/* global define */
;(function(define){'use strict';define(function(require,exports,module){
/**
* Dependencies
*/
var GaiaDialogProto = require('gaia-dialog').prototype;
var component = require('gaia-component');
/**
* Exports
*/
module.exports = component.register('gaia-dialog-alert', {
created: function() {
this.setupShadowRoot();
this.els = {
dialog: this.shadowRoot.querySelector('gaia-dialog')
};
this.els.dialog.addEventListener('closed',
GaiaDialogProto.hide.bind(this));
},
open: function(e) {
return GaiaDialogProto.show.call(this)
.then(() => this.els.dialog.open(e));
},
close: function() {
return this.els.dialog.close()
.then(GaiaDialogProto.hide.bind(this));
},
template: `
<gaia-dialog>
<section>
<p><content></content></p>
</section>
<div>
<button class="submit primary" on-click="close">Ok</button>
</div>
</gaia-dialog>
<style>
:host {
display: none;
position: fixed;
width: 100%;
height: 100%;
}
</style>`
});
});})(typeof define=='function'&&define.amd?define
:(function(n,w){'use strict';return typeof module=='object'?function(c){
c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){
return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-dialog-alert',this));

View file

@ -0,0 +1,70 @@
/* global define */
;(function(define){'use strict';define(function(require,exports,module){
/**
* Dependencies
*/
var GaiaDialogProto = require('gaia-dialog').prototype;
var component = require('gaia-component');
/**
* Exports
*/
module.exports = component.register('gaia-dialog-confirm', {
created: function() {
this.setupShadowRoot();
this.els = {
dialog: this.shadowRoot.querySelector('gaia-dialog'),
submit: this.shadowRoot.querySelector('.submit'),
cancel: this.shadowRoot.querySelector('.cancel')
};
this.els.cancel.addEventListener('click', this.close.bind(this));
this.els.submit.addEventListener('click', this.close.bind(this));
},
open: function(e) {
return GaiaDialogProto.show.call(this)
.then(() => this.els.dialog.open(e));
},
close: function() {
// First close (hide) inner dialog and then the container.
return this.els.dialog.close()
.then(GaiaDialogProto.hide.bind(this));
},
template: `
<gaia-dialog>
<section>
<p><content></content></p>
</section>
<fieldset>
<button class="cancel">Cancel</button>
<button class="submit danger">Confirm</button>
</fieldset>
</gaia-dialog>
<style>
:host {
display: none;
}
:host[opened],
:host.animating {
display: block;
position: fixed;
width: 100%;
height: 100%;
}
</style>`
});
});})(typeof define=='function'&&define.amd?define
:(function(n,w){'use strict';return typeof module=='object'?function(c){
c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){
return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-dialog-confirm',this));

View file

@ -0,0 +1,104 @@
/* global define */
;(function(define){'use strict';define(function(require,exports,module){
/**
* Dependencies
*/
var GaiaDialogProto = require('gaia-dialog').prototype;
var component = require('gaia-component');
/**
* Exports
*/
module.exports = component.register('gaia-dialog-menu', {
created: function() {
this.setupShadowRoot();
this.els = {
dialog: this.shadowRoot.querySelector('gaia-dialog'),
items: this.shadowRoot.querySelector('.items')
};
this.els.dialog.addEventListener('closed',
GaiaDialogProto.hide.bind(this));
setTimeout(() => this.makeAccessible());
},
makeAccessible() {
this.els.items.setAttribute('role', 'menu');
[].forEach.call(this.querySelectorAll('button'),
menuitem => menuitem.setAttribute('role', 'menuitem'));
},
open: function(e) {
return GaiaDialogProto.show.call(this)
.then(() => this.els.dialog.open(e));
},
close: function() {
return this.els.dialog.close()
.then(GaiaDialogProto.hide.bind(this));
},
template: `
<gaia-dialog>
<div class="items"><content select="button"></content></div>
</gaia-dialog>
<style>
:host {
display: none;
position: fixed;
width: 100%;
height: 100%;
}
::content > button {
position: relative;
display: block;
width: 100%;
height: 50px;
line-height: 51px;
margin: 0;
border: 0;
padding: 0rem 16px;
font: inherit;
font-style: italic;
text-align: start;
background: var(--color-beta);
color: var(--highlight-color);
}
::content > button[data-icon]:before {
width: 50px;
font-size: 22px;
vertical-align: middle;
}
/** Button Divider Line
---------------------------------------------------------*/
::content > button:after {
content: '';
display: block;
position: absolute;
height: 1px;
left: 6px;
right: 6px;
top: 49px;
background: #E7E7E7;
}
::content > button:last-of-type:after {
display: none;
}
</style>`
});
});})(typeof define=='function'&&define.amd?define
:(function(n,w){'use strict';return typeof module=='object'?function(c){
c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){
return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-dialog-menu',this));

View file

@ -0,0 +1,83 @@
/* global define */
;(function(define){'use strict';define(function(require,exports,module){
/**
* Dependencies
*/
var GaiaDialogProto = require('gaia-dialog').prototype;
var component = require('gaia-component');
require('gaia-text-input');
/**
* Exports
*/
module.exports = component.register('gaia-dialog-prompt', {
created: function() {
this.setupShadowRoot();
this.els = {
dialog: this.shadowRoot.querySelector('gaia-dialog'),
input: this.shadowRoot.querySelector('gaia-text-input'),
submit: this.shadowRoot.querySelector('.submit'),
cancel: this.shadowRoot.querySelector('.cancel')
};
this.els.dialog.addEventListener('opened', () => {
this.setAttribute('opened', '');
});
this.els.dialog.addEventListener('closed', () => {
this.removeAttribute('opened');
});
this.els.input.placeholder = this.firstChild.textContent;
this.els.cancel.addEventListener('click', this.close.bind(this));
this.els.submit.addEventListener('click', this.close.bind(this));
},
open: function(e) {
return GaiaDialogProto.show.call(this)
.then(() => this.els.dialog.open(e));
},
close: function() {
return this.els.dialog.close()
.then(GaiaDialogProto.hide.bind(this));
},
template: `
<gaia-dialog>
<div><gaia-text-input></gaia-text-input></div>
<fieldset>
<button class="cancel">Cancel</button>
<button class="submit primary">Ok</button>
</fieldset>
</gaia-dialog>
<style>
:host {
display: none;
}
:host[opened],
:host.animating {
display: block;
position: fixed;
width: 100%;
height: 100%;
}
gaia-text-input {
margin: 16px !important;
}
</style>`
});
});})(typeof define=='function'&&define.amd?define
:(function(n,w){'use strict';return typeof module=='object'?function(c){
c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){
return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-dialog-prompt',this));

View file

@ -0,0 +1,247 @@
/* global define */
;(function(define){'use strict';define(function(require,exports,module){
/**
* Dependencies
*/
var GaiaDialogProto = require('gaia-dialog').prototype;
var component = require('gaia-component');
/**
* Exports
*/
module.exports = component.register('gaia-dialog-select', {
created: function() {
this.setupShadowRoot();
this.els = {
dialog: this.shadowRoot.querySelector('gaia-dialog'),
submit: this.shadowRoot.querySelector('.submit'),
cancel: this.shadowRoot.querySelector('.cancel'),
list: this.shadowRoot.querySelector('ul')
};
this.multiple = this.hasAttribute('multiple');
this.els.list.addEventListener('click', this.onListClick.bind(this));
this.els.submit.addEventListener('click', this.close.bind(this));
this.els.cancel.addEventListener('click', this.close.bind(this));
setTimeout(() => this.makeAccessible());
},
makeAccessible() {
this.els.list.setAttribute('role', 'listbox');
if (this.multiple) {
this.els.list.setAttribute('aria-multiselectable', true);
}
[].forEach.call(this.options, option => {
option.setAttribute('role', 'option');
option.setAttribute('tabindex', '0');
});
},
open: function(e) {
return GaiaDialogProto.show.call(this)
.then(() => this.els.dialog.open(e));
},
close: function() {
return this.els.dialog.close()
.then(GaiaDialogProto.hide.bind(this));
},
onListClick: function(e) {
var el = e.target.closest('li');
var selected = el.getAttribute('aria-selected') === 'true';
if (this.multiple) { this.onChangeMultiple(el, selected); }
else { this.onChange(el, selected); }
},
onChange: function(el, selected) {
this.clearSelected();
if (!selected) { el.setAttribute('aria-selected', !selected); }
this.fireChange();
this.close();
},
onChangeMultiple: function(el, selected) {
el.setAttribute('aria-selected', !selected);
this.fireChange();
},
clearSelected: function() {
[].forEach.call(this.selectedOptions, function(option) {
option.removeAttribute('aria-selected');
});
},
fireChange: function() {
var e = new CustomEvent('change', { detail: { value: this.valueString }});
this.dispatchEvent(e);
},
attrs: {
multiple: {
get: function() { return !!this._multiple; },
set: function(value) {
value = value === '' ? true : value;
if (value === this._multiple) { return; }
if (!value) {
this._multiple = false;
this.removeAttribute('multiple');
this.els.list.removeAttribute('aria-multiselectable');
} else {
this._multiple = true;
this.setAttribute('multiple', '');
this.els.list.setAttribute('aria-multiselectable', true);
}
}
},
options: {
get: function() { return this.querySelectorAll('li'); }
},
selectedOptions: {
get: function() {
return this.querySelectorAll('li[aria-selected="true"]');
}
},
selected: {
get: function() { return this.selectedOptions[0]; }
},
value: {
get: function() {
var selected = this.selectedOptions[0];
return selected && selected.getAttribute('value');
}
},
valueString: {
get: function() {
var selected = this.selected;
return selected && selected.textContent;
}
},
length: {
get: function() { return this.options.length; }
}
},
template: `
<gaia-dialog>
<content select="h1"></content>
<ul><content select="li"></content></ul>
<fieldset>
<button class="cancel">Cancel</button>
<button class="submit primary">Select</button>
</fieldset>
</gaia-dialog>
<style>
:host {
display: none;
position: fixed;
width: 100%;
height: 100%;
}
/** Title (duplicate from gaia-dialog)
---------------------------------------------------------*/
::content h1 {
padding: 16px;
font-size: 23px;
line-height: 26px;
font-weight: 200;
font-style: italic;
color: #858585;
}
/** List
---------------------------------------------------------*/
ul {
display: block;
padding: 0;
margin: 0;
}
/** Options
---------------------------------------------------------*/
::content li {
position: relative;
display: block;
padding: 16px;
text-align: start;
-moz-user-select: none;
cursor: pointer;
outline: 0;
}
::content li[aria-selected='true'] {
color: #00CAF2;
font-weight: normal;
}
::content li:after {
content: '';
display: block;
position: absolute;
height: 1px;
left: 16px;
right: 16px;
bottom: 1px;
background: #E7E7E7;
}
::content li:last-of-type:after {
display: none
}
/** Buttons
---------------------------------------------------------*/
::host:not([multiple]) .submit {
display: none !important;
}
::host:not([multiple]) .cancel {
width: 100% !important;
}
::host:not([multiple]) .cancel:after {
display: none% !important;
}
/** Tick Icon
---------------------------------------------------------*/
::content li[aria-selected='true']:before {
content: 'tick';
position: absolute;
top: 50%; right: 20px;
display: block;
margin-top: -12px;
font-family: 'gaia-icons';
font-style: normal;
font-size: 14px;
font-weight: 500;
text-rendering: optimizeLegibility;
}
</style>`
});
});})(typeof define=='function'&&define.amd?define
:(function(n,w){'use strict';return typeof module=='object'?function(c){
c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){
return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-dialog-select',this));

View file

@ -0,0 +1,291 @@
;;(function(define){'use strict';define((require,exports,module)=>{var component=require('gaia-component');var debug=0?console.log.bind(console):()=>{};var schedule=(window.scheduler&&typeof window.scheduler.mutation==="function"?window.scheduler:null)||{mutation:block=>Promise.resolve(block()),transition:(block,el,event,timeout)=>{block();return after(el,event,timeout||500);}};module.exports=component.register('gaia-dialog',{created(){this.setupShadowRoot();this.els={inner:this.shadowRoot.querySelector('.dialog-inner'),background:this.shadowRoot.querySelector('.background'),window:this.shadowRoot.querySelector('.window')};this.shadowRoot.addEventListener('click',e=>this.onClick(e));setTimeout(()=>this.makeAccessible());},makeAccessible(){this.setAttribute('role','dialog');},onClick(e){var el=e.target.closest('[on-click]');if(!el){return;}
debug('onClick');var method=el.getAttribute('on-click');if(typeof this[method]=='function'){this[method]();}},open(options){if(this.isOpen){return;}
debug('open dialog');this.isOpen=true;return this.show().then(()=>this.animateBackgroundIn(options)).then(()=>this.animateWindowIn()).then(()=>this.dispatch('opened'));},close(options){if(!this.isOpen){return;}
debug('close dialog');this.isOpen=false;return this.animateWindowOut().then(()=>this.animateBackgroundOut()).then(()=>this.hide()).then(()=>this.dispatch('closed'));},animateBackgroundIn(options){if(options){return this.animateBackgroundInFrom(options);}
var el=this.els.background;return schedule.transition(()=>{debug('animate background in');el.classList.remove('animate-out');el.classList.add('animate-in');},el,'animationend');},animateBackgroundOut(){var el=this.els.background;return schedule.transition(()=>{debug('animate background out');el.classList.add('animate-out');el.classList.remove('animate-in');},el,'animationend').then(()=>el.style='');},animateBackgroundInFrom(pos){var el=this.els.background;var scale=Math.sqrt(window.innerWidth*window.innerHeight)/15;var duration=scale*9;return schedule.mutation(()=>{el.classList.add('circular');el.classList.remove('animate-out');el.style.transform=`translate(${pos.clientX}px, ${pos.clientY}px)`;el.style.transitionDuration=duration+'ms';el.offsetTop;}).then(()=>{return schedule.transition(()=>{debug('animate background in from',pos);el.style.transform+=` scale(${scale})`;el.style.opacity=1;},el,'transitionend',duration*1.5);});},show(){return schedule.mutation(()=>{debug('show');this.style.display='block';});},hide(){return schedule.mutation(()=>{debug('hide');this.style.display='none';});},animateWindowIn(){var el=this.els.window;return schedule.transition(()=>{debug('animate window in');el.classList.add('animate-in');el.classList.remove('animate-out');},el,'animationend');},animateWindowOut(){var el=this.els.window;return schedule.transition(()=>{debug('animate window out');el.classList.add('animate-out');el.classList.remove('animate-in');},el,'animationend');},dispatch(name){this.dispatchEvent(new CustomEvent(name));},attrs:{opened:{get:function(){return!!this.isOpen;},set:function(value){value=value===''||value;if(!value){this.close();}
else{this.open();}}}},template:`
<div class="dialog-inner">
<div class="background" on-click="close"></div>
<div class="window"><content></content></div>
</div>
<style>
::content * {
box-sizing: border-box;
font-weight: inherit;
font-size: inherit;
}
::content p,
::content h1,
::content h2,
::content h3,
::content h4,
::content button,
::content fieldset {
padding: 0;
margin: 0;
border: 0;
}
:host {
display: none;
position: fixed;
top: 0px; left: 0px;
width: 100%;
height: 100%;
z-index: 200;
font-style: italic;
text-align: center;
overflow: hidden;
}
/** Inner
---------------------------------------------------------*/
.dialog-inner {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
/** Background
---------------------------------------------------------*/
.background {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(199,199,199,0.85);
}
/**
* .circular
*/
.background.circular {
width: 40px;
height: 40px;
margin: -20px;
border-radius: 50%;
will-change: transform, opacity;
transition-property: opacity, transform;
transition-timing-function: linear;
}
/**
* .animate-in
*/
.background.animate-in {
animation-name: gaia-dialog-fade-in;
animation-duration: 260ms;
animation-fill-mode: forwards;
}
/**
* .animate-out
*/
.background.animate-out {
animation-name: gaia-dialog-fade-out;
animation-duration: 260ms;
animation-fill-mode: forwards;
opacity: 1;
}
/** Window
---------------------------------------------------------*/
.window {
position: relative;
width: 90%;
max-width: 350px;
margin: auto;
box-shadow: 0 1px 0 0px rgba(0,0,0,0.15);
background: var(--color-iota);
transition: opacity 300ms;
opacity: 0;
}
.window.animate-in {
animation-name: gaia-dialog-entrance;
animation-duration: 300ms;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-fill-mode: forwards;
opacity: 1;
}
.window.animate-out {
animation-name: gaia-dialog-fade-out;
animation-duration: 150ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
opacity: 1;
}
/** Title
---------------------------------------------------------*/
::content h1 {
padding: 16px;
font-size: 23px;
line-height: 26px;
font-weight: 200;
font-style: italic;
color: #858585;
}
::content strong {
font-weight: 700;
}
::content small {
font-size: 0.8em;
}
/** Section
---------------------------------------------------------*/
::content section {
padding: 33px 18px;
color: #858585;
}
::content section > *:not(:last-child) {
margin-bottom: 13px;
}
/** Paragraphs
---------------------------------------------------------*/
::content p {
text-align: -moz-start;
}
/** Buttons
---------------------------------------------------------*/
::content button {
position: relative;
display: block;
width: 100%;
height: 50px;
margin: 0;
border: 0;
padding: 0rem 16px;
cursor: pointer;
font: inherit;
background: var(--color-beta);
color: var(--color-epsilon);
transition: all 200ms;
transition-delay: 300ms;
border-radius: 0;
}
/**
* .primary
*/
::content button.primary {
color: var(--highlight-color);
}
/**
* .danger
*/
::content button.danger {
color: var(--color-destructive);
}
/**
* Disabled buttons
*/
::content button[disabled] {
color: var(--color-zeta);
}
/** Button Divider Line
---------------------------------------------------------*/
::content button:after {
content: '';
display: block;
position: absolute;
height: 1px;
left: 6px;
right: 6px;
top: 49px;
background: #E7E7E7;
}
::content button:last-of-type:after {
display: none;
}
::content button:active {
background-color: var(--highlight-color);
color: #fff;
transition: none;
}
::content button:active:after {
background: var(--highlight-color);
transition: none;
}
::content button[data-icon]:before {
float: left;
}
/** Fieldset (button group)
---------------------------------------------------------*/
::content fieldset {
overflow: hidden;
}
::content fieldset button {
position: relative;
float: left;
width: 50%;
}
::content fieldset button:after {
content: '';
display: block;
position: absolute;
top: 6px;
bottom: 6px;
right: 0px;
left: auto;
width: 1px;
height: calc(100% - 12px);
background: #e7e7e7;
transition: all 200ms;
transition-delay: 200ms;
}
</style>`,globalCss:`
@keyframes gaia-dialog-entrance {
0% { transform: translateY(100px); }
100% { transform: translateY(0px); }
}
@keyframes gaia-dialog-fade-in {
0% { opacity: 0 }
100% { opacity: 1 }
}
@keyframes gaia-dialog-fade-out {
0% { opacity: 1 }
100% { opacity: 0 }
}`});function after(target,event,timeout){return new Promise(resolve=>{var timer=timeout&&setTimeout(cb,timeout);target.addEventListener(event,cb);function cb(){target.removeEventListener(event,cb);clearTimeout(timer);resolve();}});}});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-dialog',this));

View file

@ -0,0 +1,58 @@
/* Some BiDi-proof icons */
[data-icon="back"]:-moz-dir(ltr):before {
content: 'left';
}
[data-icon="back"]:-moz-dir(rtl):before {
content: 'right';
}
[data-icon="forward"]:-moz-dir(ltr):before {
content: 'right';
}
[data-icon="forward"]:-moz-dir(rtl):before {
content: 'left';
}
[data-icon="back-light"]:-moz-dir(ltr):before {
content: 'left-light';
}
[data-icon="back-light"]:-moz-dir(rtl):before {
content: 'right-light';
}
[data-icon="forward-light"]:-moz-dir(ltr):before {
content: 'right-light';
}
[data-icon="forward-light"]:-moz-dir(rtl):before {
content: 'left-light';
}
[data-icon="arrow-back"]:-moz-dir(ltr):before {
content: 'arrow-left';
}
[data-icon="arrow-back"]:-moz-dir(rtl):before {
content: 'arrow-right';
}
[data-icon="arrow-forward"]:-moz-dir(ltr):before {
content: 'arrow-right';
}
[data-icon="arrow-forward"]:-moz-dir(rtl):before {
content: 'arrow-left';
}
[data-icon="clear-input"]:-moz-dir(ltr):before {
content: 'clear-input-left';
}
[data-icon="clear-input"]:-moz-dir(rtl):before {
content: 'clear-input-right';
}
[data-icon="expand"]:-moz-dir(ltr):before {
content: 'expand-left';
}
[data-icon="expand"]:-moz-dir(rtl):before {
content: 'expand-right';
}

View file

@ -0,0 +1,118 @@
'use strict';
// Create a report about unused icons in a project.
var fs = require('fs');
var path = require('path');
var exec = require('child_process').exec;
var optimist = require('optimist');
var cli = optimist
.usage('Create a report about unused icons in a project.' + '\n' +
'Usage: $0 path/to/your/project/');
var projectDir = cli.argv._[0];
// No folder passed? Show help message then.
if (!projectDir) {
cli.showHelp();
process.exit(0);
}
// Check if the directory exist.
var stats = fs.lstatSync(projectDir);
if (!stats.isDirectory()) {
console.log('\x1b[31mPlease provide a valid folder.\x1b[0m\n');
cli.showHelp();
process.exit(0);
}
/**
* Get the list of all the icons in the font.
* @returns {Array}
*/
function getIcons() {
var icons = fs.readdirSync('./images/');
icons = icons.map(function(icon) {
return path.basename(icon, '.svg');
});
return icons;
}
/**
* Use a grep pattern to extract used icons from files.
* @param {string} grep
* @param {Function} callback
*/
function getUsedIcons(grep, callback) {
exec(grep, function(err, stdout, stderr) {
var usedIcons = stdout
.trim()
.split('\n')
.map(function(icon) {
// Take only the icon name.
return icon.split(/["']/)[1];
})
.filter(function(icon) {
// Remove non string items.
return icon && icon.match(/^[a-z0-9-]+$/);
});
callback(usedIcons);
if (err) {
console.log(err);
}
});
}
/**
* Get the list of unused icons in a folder. The patterns of extraction are:
* * data-icon="[^"]+"
* * .dataset.icon ?= ?.+
*/
function getUnusedIcons() {
var usedIcons = [];
var length = 2;
var cb = function(icons) {
usedIcons = usedIcons.concat(icons);
length--;
if (length > 0) {
return;
}
var allIcons = getIcons();
var unusedIcons = [];
allIcons.forEach(function(icon) {
if (usedIcons.indexOf(icon) === -1) {
unusedIcons.push(icon);
}
});
outputUnusedIcons(allIcons, unusedIcons);
};
getUsedIcons('grep -rhoP \'data-icon="[^"]+"\' ' + projectDir, cb);
getUsedIcons('grep -rhoP \'.dataset.icon ?= ?.+\' ' + projectDir, cb);
}
/**
* Display the list of unused icons to the screen.
* @param {Array.<string>} icons
* @param {Array.<string>} unusedIcons
*/
function outputUnusedIcons(icons, unusedIcons) {
console.log('\x1b[36mList of unused icons in %s (%d/%d):\x1b[0m',
projectDir, unusedIcons.length, icons.length);
unusedIcons.forEach(function(icon) {
console.log('* ' + icon);
});
}
getUnusedIcons();

View file

@ -0,0 +1,30 @@
{
"name": "gaia-icons",
"version": "0.10.3",
"homepage": "https://github.com/wilsonpage/gaia-icons",
"authors": [
"Wilson Page <wilsonpage@me.com>"
],
"main": [
"gaia-icons.js",
"gaia-icons.css",
"fonts/gaia-icons.ttf",
"gaia-icons-embedded.css"
],
"license": "MIT",
"ignore": [
"**/.*",
"!.jshintrc",
"node_modules",
"bower_components",
"templates",
"images",
"test",
"tests",
"index.html",
"create-svg-icon-set-file.py",
"Gruntfile.js",
"README.md",
"package.json"
]
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,41 @@
/* Generated by grunt-webfont */
/* Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css */
@font-face {
font-family: "gaia-icons";
src: url("fonts/gaia-icons.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
[data-icon]:before,
.ligature-icons {
font-family: "gaia-icons";
content: attr(data-icon);
display: inline-block;
font-weight: 500;
font-style: normal;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
font-size: 30px;
-webkit-font-smoothing: antialiased;
}
[data-icon]:not([data-l10n-id]):not([aria-label]):not([aria-hidden="true"]):before {
/* Highlight cases where icons are not localized and still visible to screen
reader */
background: rgba(255, 0, 0, 0.4);
}
[data-icon]:not([data-l10n-id]):not([aria-label]):not([aria-hidden="true"]):after {
background: #333;
color: #fff;
position: absolute;
width: 20rem;
border-radius: 0.5rem;
padding: 0.5rem;
content: "Icon is not localized and is still visible to screen reader. Please add data-l10n-id or aria-label for localization or use aria-hidden to hide the icon from screen reader.";
z-index: 9999;
}

View file

@ -0,0 +1,38 @@
/* global define */
(function(define){'use strict';define(function(require,exports,module){
/**
* Exports
*/
var base = window.GAIA_ICONS_BASE_URL ||
window.COMPONENTS_BASE_URL ||
'bower_components/';
if (!document.documentElement) {
window.addEventListener('load', load);
} else {
load();
}
function load() {
if (isLoaded()) { return; }
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = base + 'gaia-icons/gaia-icons.css';
document.head.appendChild(link);
exports.loaded = true;
}
function isLoaded() {
return exports.loaded ||
document.querySelector('link[href*=gaia-icons]') ||
document.documentElement.classList.contains('gaia-icons-loaded');
}
});})(typeof define=='function'&&define.amd?define
:(function(n,w){'use strict';return typeof module=='object'?function(c){
c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){
return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-icons',this));

View file

@ -0,0 +1,27 @@
{
"name": "gaia-text-input",
"version": "0.1.4",
"authors": [
"Wilson Page <wilsonpage@me.com>"
],
"main": "gaia-text-input.js",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"README.md"
],
"dependencies": {
"gaia-icons": "gaia-components/gaia-icons#~0.10.0",
"gaia-component": "gaia-components/gaia-component#~0.3.3"
},
"devDependencies": {
"gaia-fonts": "gaia-components/gaia-fonts#~0.2.1",
"gaia-theme": "gaia-components/gaia-theme#~0.4.3",
"base": "gaia-components/base",
"gaia-icons": "gaia-components/gaia-icons#master"
}
}

View file

@ -0,0 +1,216 @@
(function(define){define(function(require,exports,module){
/*jshint esnext:true*/
'use strict';
/**
* Dependencies
*/
var component = require('gaia-component');
/**
* Exports
*/
module.exports = component.register('gaia-text-input-multiline', {
created: function() {
this.setupShadowRoot();
this.els = {
inner: this.shadowRoot.querySelector('.inner'),
field: this.shadowRoot.querySelector('textarea')
};
this.type = this.getAttribute('type');
this.disabled = this.hasAttribute('disabled');
this.placeholder = this.getAttribute('placeholder');
this.required = this.getAttribute('required');
this.value = this.getAttribute('value');
},
clear: function(e) {
this.value = '';
},
attrs: {
placeholder: {
get: function() { return this.els.field.placeholder; },
set: function(value) { this.els.field.placeholder = value || ''; }
},
value: {
get: function() { return this.els.field.value; },
set: function(value) { this.els.field.value = value; }
},
required: {
get: function() { return this.els.field.required; },
set: function(value) { this.els.field.required = value; }
},
disabled: {
get: function() { return this.els.field.disabled; },
set: function(value) {
value = !!(value === '' || value);
this.els.field.disabled = value;
}
}
},
template: `<div class="inner">
<content select="label"></content>
<div class="fields">
<textarea></textarea>
<div class="focus focus-1"></div>
<div class="focus focus-2"></div>
</div>
</div>
<style>
/** Reset
---------------------------------------------------------*/
textarea {
box-sizing: border-box;
border: 0;
margin: 0;
padding: 0;
}
/** Host
---------------------------------------------------------*/
:host {
display: block;
margin-top: var(--base-m, 18px);
margin-bottom: var(--base-m, 18px);
}
/** Inner
---------------------------------------------------------*/
.inner {
height: 100%;
}
/** Label
---------------------------------------------------------*/
label {
font-size: 14px;
display: block;
margin: 0 0 4px 16px;
}
/**
* [disbled]
*/
[disabled] label {
opacity: 0.3;
}
/** Fields
---------------------------------------------------------*/
.fields {
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
--gi-border-color:
var(--input-border-color,
var(--border-color,
var(--background-plus,
#e7e7e7)));
border-color:
var(--gi-border-color);
border:
var(--input-border,
var(--border,
1px solid var(--gi-border-color)));
}
/** Textarea
---------------------------------------------------------*/
textarea {
display: block;
width: 100%;
height: 100%;
min-height: 86px;
padding: 10px 16px;
font-size: inherit;
border: none;
margin: 0;
font: inherit;
resize: none;
/* dynamic */
color:
var(--text-color, #000);
background:
var(--text-input-background,
var(--input-background,
var(--background-minus,
#fff)));
}
/**
* [disabled]
*/
textarea[disabled] {
background: transparent;
}
/** Placeholder Text
---------------------------------------------------------*/
::-moz-placeholder {
font-style: italic;
color:
var(--input-placeholder-color, #909ca7);
}
/** Focus Bar
---------------------------------------------------------*/
.focus {
position: absolute;
bottom: 0px;
width: 100%;
height: 3px;
transition: all 200ms;
transform: scaleX(0);
visibility: hidden;
background: var(--highlight-color, #000);
}
/**
* input:focus
*/
:focus ~ .focus {
transform: scaleX(1);
transition-delay: 200ms;
visibility: visible;
}
.focus-2 {
top: 0;
bottom: auto;
}
</style>`
});
});})((function(n,w){return typeof define=='function'&&define.amd?
define:typeof module=='object'?function(c){c(require,exports,module);}:function(c){
var m={exports:{}},r=function(n){return w[n];};w[n]=c(r,m.exports,m)||m.exports;};})('gaia-text-input-multiline',this));

View file

@ -0,0 +1,279 @@
(function(define){define(function(require,exports,module){
/*jshint esnext:true*/
'use strict';
/**
* Dependencies
*/
var component = require('gaia-component');
/**
* Locals
*/
var DEFAULT_LENGTH = 4;
/**
* Exports
*/
module.exports = component.register('gaia-text-input-pin', {
created: function() {
this.setupShadowRoot();
this.els = {
inner: this.shadowRoot.querySelector('.inner'),
fields: this.shadowRoot.querySelector('.fields'),
input: this.shadowRoot.querySelector('input')
};
this.disabled = this.hasAttribute('disabled');
this.length = this.getAttribute('length') || DEFAULT_LENGTH;
this.addEventListener('keyup', () => this.updateCells());
},
updateCells: function() {
var l = this.els.input.value.length;
this.els.cells.forEach((cell, i) => {
cell.classList.toggle('populated', i < l);
cell.classList.toggle('focused', i == l);
});
},
onBackspace: function(e) {
var input = e.target;
var empty = !input.value;
var previous = input.previousElementSibling;
if (!empty && previous) {
previous.clear();
previous.focus();
} else if (empty && previous) {
previous.focus();
}
},
setupFields: function() {
this.els.fields.innerHTML = '';
this.els.cells = [];
for (var i = 0, l = this.length; i < l; i++) {
var el = document.createElement('div');
el.className = 'cell';
this.els.fields.appendChild(el);
this.els.cells.push(el);
}
},
attributeChangedCallback: function(attr, from, to) {
if (attrs[attr]) { this[attr] = to; }
},
clear: function(e) {
this.value = '';
},
/**
* Attributes
*/
attrs: {
length: {
get: function() { return this._length; },
set: function(value) {
value = Number(value);
this._length = value;
this.els.input.setAttribute('maxlength', this.length);
this.setupFields();
}
},
value: {
get: function() { return this.els.input.value; },
set: function(value) { this.els.input.value = value; }
},
disabled: {
get: function() { return this.els.input.disabled; },
set: function(value) {
value = !!(value === '' || value);
this.els.input.disabled = value;
}
}
},
template: `
<div class="inner">
<content select="label"></content>
<div class="container">
<input />
<div class="fields"></div>
</div>
</div>
<style>
/** Host
---------------------------------------------------------*/
:host {
display: block;
height: 40px;
margin-top: var(--base-m, 18px);
margin-bottom: var(--base-m, 18px);
font-size: 40px;
}
/** Inner
---------------------------------------------------------*/
.inner {
height: 100%;
}
/** Label
---------------------------------------------------------*/
label {
font-size: 14px;
display: block;
margin: 0 0 4px 16px;
}
/** Container
---------------------------------------------------------*/
.container {
position: relative;
z-index: 0;
height: 100%;
}
/** Input (hidden)
---------------------------------------------------------*/
input {
opacity: 0;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
z-index: 1;
}
/** Fields
---------------------------------------------------------*/
.fields {
display: flex;
position: relative;
height: 100%;
margin-left: -1rem;
}
/**
* [disbled]
*/
[disabled] + .fields {
pointer-events: none;
}
/** Cell
---------------------------------------------------------*/
.cell {
position: relative;
height: 100%;
margin-left: 1rem;
flex: 1;
/* dynamic */
--gi-border-color:
var(--input-border-color,
var(--border-color,
var(--background-plus,
#e7e7e7)));
border-color:
var(--gi-border-color);
border:
var(--input-border,
var(--border,
1px solid var(--gi-border-color)));
background:
var(--text-input-background,
var(--input-background,
var(--background-minus,
#fff)));
}
/**
* [disbled]
*/
[disabled] + .fields .cell {
background: none;
}
/** Dot
---------------------------------------------------------*/
.cell::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 14px;
margin: -7px;
border-radius: 50%;
opacity: 0;
/* dynamic */
background:
var(--text-color);
}
/**
* .populated
*/
.cell.populated::after {
opacity: 1;
}
.cell::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 3px;
visibility: hidden;
background: var(--highlight-color, #000);
}
/**
* input:focus
*/
input:focus + .fields .cell::before {
visibility: visible;
}
</style>
`
});
});})((function(n,w){return typeof define=='function'&&define.amd?
define:typeof module=='object'?function(c){c(require,exports,module);}:function(c){
var m={exports:{}},r=function(n){return w[n];};w[n]=c(r,m.exports,m)||m.exports;};})('gaia-text-input-pin',this));

View file

@ -0,0 +1,335 @@
(function(define){define(function(require,exports,module){
/*jshint esnext:true*/
'use strict';
/**
* Dependencies
*/
var component = require('gaia-component');
require('gaia-icons'); // Load gaia-icons
/**
* Exports
*/
module.exports = component.register('gaia-text-input', {
extends: HTMLInputElement,
rtl: true,
created: function() {
this.setupShadowRoot();
this.els = {
inner: this.shadowRoot.querySelector('.inner'),
input: this.shadowRoot.querySelector('input'),
clear: this.shadowRoot.querySelector('.clear')
};
this.type = this.getAttribute('type');
this.disabled = this.hasAttribute('disabled');
this.clearable = this.hasAttribute('clearable');
this.placeholder = this.getAttribute('placeholder');
this.required = this.getAttribute('required');
this.value = this.getAttribute('value');
// Don't take focus from the input field
this.els.clear.addEventListener('mousedown', (e) => e.preventDefault());
this.els.clear.addEventListener('click', e => this.clear(e));
// Set dir initially and listen for changes
document.addEventListener('dirchanged', e => this.updateDir());
this.updateDir();
},
clear: function(e) {
this.value = '';
},
focus: function() {
this.els.input.focus();
},
updateDir: function() {
this.els.inner.setAttribute('dir', document.dir);
},
/**
* Attributes
*/
attrs: {
type: {
get: function() { return this.els.input.getAttribute('type'); },
set: function(value) {
if (!value) { return; }
this.els.inner.setAttribute('type', value);
this.els.input.setAttribute('type', value);
}
},
placeholder: {
get: function() { return this.field.placeholder; },
set: function(value) {
if (!value && value !== '') { return; }
this.els.input.placeholder = value;
}
},
clearable: {
get: function() { return this._clearable; },
set: function(value) {
var clearable = !!(value === '' || value);
if (clearable === this.clearable) { return; }
if (clearable) {
this.els.inner.setAttribute('clearable', '');
this.setAttribute('clearable', '');
} else {
this.els.inner.removeAttribute('clearable');
this.removeAttribute('clearable');
}
this._clearable = clearable;
}
},
value: {
get: function() { return this.els.input.value; },
set: function(value) { this.els.input.value = value; }
},
required: {
get: function() { return this.els.input.required; },
set: function(value) { this.els.input.required = value; }
},
maxlength: {
get: function() { return this.els.input.getAttribute('maxlength'); },
set: function(value) { this.els.input.setAttribute('maxlength', value); }
},
disabled: {
get: function() { return this.els.input.disabled; },
set: function(value) {
value = !!(value === '' || value);
this.els.input.disabled = value;
}
}
},
template: `
<div class="inner">
<content select="label"></content>
<div class="fields">
<input type="text"/>
<button class="clear" tabindex="-1"></button>
<div class="focus"></div>
</div>
</div>
<style>
:host {
display: block;
height: 40px;
margin-top: var(--base-m, 18px);
margin-bottom: var(--base-m, 18px);
}
/** Reset
---------------------------------------------------------*/
input,
button {
box-sizing: border-box;
border: 0;
margin: 0;
padding: 0;
}
/** Inner
---------------------------------------------------------*/
.inner {
height: 100%;
}
/** Label
---------------------------------------------------------*/
label {
font-size: 14px;
display: block;
margin: 0 0 4px 16px;
}
/**
* [disbled]
*/
[disabled] label {
opacity: 0.3;
}
/** Fields
---------------------------------------------------------*/
.fields {
position: relative;
width: 100%;
height: 100%;
--gi-border-color:
var(--input-border-color,
var(--border-color,
var(--background-plus,
#e7e7e7)));
border-color:
var(--gi-border-color);
border:
var(--input-border,
var(--border,
1px solid var(--gi-border-color)));
}
/**
* [type='search']
*/
[type='search'] .fields {
border-radius: 30px;
overflow: hidden;
}
/** Input Field
---------------------------------------------------------*/
input {
display: block;
width: 100%;
height: 100%;
border: none;
padding: 0 16px;
margin: 0;
font: inherit;
resize: none;
/* Dynamic */
color:
var(--text-color, #000);
background:
var(--text-input-background,
var(--input-background,
var(--background-minus,
#fff)));
}
/**
* [disabled]
*/
input[disabled] {
background: transparent;
}
/** Placeholder Text
---------------------------------------------------------*/
::-moz-placeholder {
font-style: italic;
color:
var(--input-placeholder-color, #909ca7);
}
/** Clear Button
---------------------------------------------------------*/
.clear {
display: none;
position: absolute;
top: 11px;
right: 0;
width: 18px;
height: 18px;
padding: 0;
margin: 0 10px;
border-radius: 50%;
opacity: 0;
color: #fff;
cursor: pointer;
background:
var(--input-clear-background, #999);
}
/**
* [dir=rtl]
*/
[dir=rtl] .clear {
right: initial;
left: 0;
}
/**
* [clearable]
*/
[clearable] .clear {
display: block;
}
/**
* input:focus
*/
input:focus ~ .clear {
opacity: 1;
}
/** Clear Icon
---------------------------------------------------------*/
.clear:before {
font: normal 500 19px/16.5px 'gaia-icons';
content: 'close';
display: block;
text-rendering: optimizeLegibility;
}
/** Focus Bar
---------------------------------------------------------*/
.focus {
position: absolute;
bottom: 0px;
width: 100%;
height: 3px;
transition: all 200ms;
transform: scaleX(0);
visibility: hidden;
background: var(--highlight-color, #000);
}
/**
* input:focus
*/
:focus ~ .focus {
transform: scaleX(1);
transition-delay: 200ms;
visibility: visible;
}
</style>
`
});
});})((function(n,w){return typeof define=='function'&&define.amd?
define:typeof module=='object'?function(c){c(require,exports,module);}:function(c){
var m={exports:{}},r=function(n){return w[n];};w[n]=c(r,m.exports,m)||m.exports;};})('gaia-text-input',this));

View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>&lt;gaia-text-input&gt;</title>
<meta name="description" content="gaia-text-input demo">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bower_components/base/base.css">
<link rel="stylesheet" type="text/css" href="bower_components/gaia-icons/gaia-icons.css">
<link rel="stylesheet" type="text/css" href="bower_components/gaia-theme/gaia-theme.css">
<link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css">
<script src="bower_components/gaia-theme/lib/gaia-theme-selector.js"></script>
<script src="bower_components/gaia-component/gaia-component.js"></script>
<script src="gaia-text-input.js"></script>
<script src="gaia-text-input-multiline.js"></script>
<script src="gaia-text-input-pin.js"></script>
<style type="text/css">
body {
padding: 48px 24px 24px;
}
</style>
</head>
<body>
<gaia-theme-selector></gaia-theme-selector>
<button id="btn">Focus</button>
<gaia-text-input id="field" placeholder="Default"></gaia-text-input>
<gaia-text-input placeholder="Search" type="search"></gaia-text-input>
<gaia-text-input placeholder="Email" type="email" clearable></gaia-text-input>
<gaia-text-input-multiline placeholder="Multiline"></gaia-text-input-multiline>
<gaia-text-input-pin length="4"></gaia-text-input-pin>
<gaia-text-input placeholder="Disabled" disabled></gaia-text-input>
<gaia-text-input placeholder="Search" type="search" disabled></gaia-text-input>
<gaia-text-input placeholder="Email" type="email" clearable disabled></gaia-text-input>
<gaia-text-input-multiline placeholder="Multiline" disabled></gaia-text-input-multiline>
<gaia-text-input-pin length="4" disabled></gaia-text-input-pin>
<!-- <gaia-text-input-password></gaia-text-input-password> -->
<script>
btn.onclick = e => field.focus();
</script>
</body>
</html>

View file

@ -0,0 +1,17 @@
{
"name": "pressed",
"main": "pressed.js",
"version": "0.1.2",
"authors": [
"Wilson Page <wilsonpage@me.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"!.jshintrc",
"node_modules",
"bower_components",
"test",
"tests"
]
}

View file

@ -0,0 +1,12 @@
;;(function(define){'use strict';define(function(require,exports,module){var pointer=[{down:'touchstart',up:'touchend',move:'touchmove'},{down:'mousedown',up:'mouseup',move:'mousemove'}]['ontouchstart'in window?0:1];module.exports=function(el,options){var released=(options&&options.released)||200;var scope=(options&&options.scope)||el;var min=(options&&options.min)||300;var instant=options&&options.instant;var timeouts={};var removeReleased;el.addEventListener(pointer.down,function(e){var start=e.timeStamp;var target=e.target;var pressed=false;var last=e;if(removeReleased){removeReleased();}
if(instant){onPressed();}
else{notScrolling(e,onPressed);}
function onPressed(){classListUp(target,scope,'add','pressed');}
addEventListener(pointer.up,function fn(e){removeEventListener(pointer.up,fn,true);var duration=e.timeStamp-start;var delta=min-duration;var lag=Math.max(delta,0);timeouts.pressed=setTimeout(function(){classListUp(target,scope,'remove','pressed');classListUp(target,scope,'add','released');removeReleased=function(){clearTimeout(timeouts.released);classListUp(target,scope,'remove','released');removeReleased=null;};timeouts.released=setTimeout(removeReleased,released);},lag);},true);},true);};function notScrolling(e,fn){detectScrolling(e,function(scrolling){if(!scrolling){fn();}});}
function detectScrolling(e,fn){var period=76;var last=e;if(windowScrolling){return fn(true);}
if(!e.touches){return fn(false);}
addEventListener('touchmove',onTouchMove,true);setTimeout(detect,period);function detect(){removeEventListener('touchmove',onTouchMove,true);if(windowScrolling){return fn(true);}
var time=last.timeStamp-e.timeStamp;var distance=getDistance(e.touches[0],last.touches[0]);var speed=distance/time;var scrolling=speed>0.03;fn(scrolling);}
function onTouchMove(e){last=e;}
function getDistance(a,b){var xs=0;var ys=0;xs=b.clientX-a.clientX;xs=xs*xs;ys=b.clientY-a.clientY;ys=ys*ys;return Math.sqrt(xs+ys);}}
var windowScrolling=false;var scrollTimeout;function classListUp(el,scope,method,cls){while(el&&el.classList&&el!==scope.parentNode){el.classList[method](cls);el=el.parentNode;}}});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('pressed',this));