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,25 @@
{
"name": "base",
"authors": [
"Wilson Page <wilsonpage@me.com>"
],
"main": "base.css",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"homepage": "https://github.com/gaia-components/base",
"_release": "737e000325",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "737e0003253ee4f3ceff5c1223543a1b3f7d39dd"
},
"_source": "git://github.com/gaia-components/base.git",
"_target": "master",
"_originalSource": "gaia-components/base"
}

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,27 @@
{
"name": "evt",
"main": "index.js",
"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"
],
"_release": "3593dd6b4d",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "3593dd6b4dd19f683d00fd0eaf2581c11a128da6"
},
"_source": "git://github.com/gaia-components/evt.git",
"_target": "master",
"_originalSource": "gaia-components/evt"
}

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,154 @@
/**
* Evt
*
* A super lightweight
* event emitter library.
*
* @version 0.3.3
* @author Wilson Page <wilson.page@me.com>
*/
;(function() {
/**
* Locals
*/
var proto = Events.prototype;
var slice = [].slice;
/**
* Creates a new event emitter
* instance, or if passed an
* object, mixes the event logic
* into it.
*
* @param {Object} obj
* @return {Object}
*/
function Events(obj) {
if (!(this instanceof Events)) return new Events(obj);
if (obj) return mixin(obj, proto);
}
/**
* Registers a callback
* with an event name.
*
* @param {String} name
* @param {Function} cb
* @return {Event}
*/
proto.on = function(name, cb) {
this._cbs = this._cbs || {};
(this._cbs[name] || (this._cbs[name] = [])).push(cb);
return this;
};
/**
* Attach a callback that once
* called, detaches itself.
*
* TODO: Implement `.off()` to work
* with `once()` callbacks.
*
* @param {String} name
* @param {Function} cb
* @public
*/
proto.once = function(name, cb) {
this.on(name, one);
function one() {
cb.apply(this, arguments);
this.off(name, one);
}
};
/**
* Removes a single callback,
* or all callbacks associated
* with the passed event name.
*
* @param {String} name
* @param {Function} cb
* @return {Event}
*/
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;
};
/**
* Fires an event, triggering
* all callbacks registered on this
* event name.
*
* @param {String} name
* @return {Event}
*/
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);
};
};
/**
* Util
*/
/**
* Mixes in the properties
* of the second object into
* the first.
*
* @param {Object} a
* @param {Object} b
* @return {Object}
*/
function mixin(a, b) {
for (var key in b) a[key] = b[key];
return a;
}
/**
* Expose 'Event' (UMD)
*/
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,12 @@
{
"name": "gaia-container",
"_release": "16513d8946",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "16513d894678a754a5297772c05d4d761e76a240"
},
"_source": "https://gitlab.com/Cwiiis/gaia-container.git",
"_target": "*",
"_originalSource": "https://gitlab.com/Cwiiis/gaia-container.git"
}

View file

@ -0,0 +1 @@
node_modules

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,29 @@
{
"name": "gaia-container",
"version": "0.0.0",
"description": "Gaia Container is a drop-in replacement for generic container elements that provides convenience methods and behaviour for animations and drag-and-drop functionality.",
"main": "script.js",
"scripts": {
"test": "./node_modules/karma/bin/karma start test/karma.conf.js --single-run",
"test-dev": "./node_modules/karma/bin/karma start test/karma.conf.js"
},
"repository": {
"type": "git",
"url": "git@gitlab.com:Cwiiis/gaia-container.git"
},
"devDependencies": {
"karma": "^0.12.37",
"karma-firefox-launcher": "^0.1.6",
"karma-mocha": "^0.2.0",
"karma-sinon-chai": "^1.0.0",
"mocha": "^2.2.5",
"mozilla-download": "^1.1.1"
},
"keywords": [
"container",
"homescreen",
"B2G",
"Firefox OS"
],
"license": "MIT"
}

View file

@ -0,0 +1,848 @@
'use strict';
window.GaiaContainer = (function(exports) {
/**
* The time, in ms, to wait for an animation to start in response to a state
* change, before removing the associated style class.
*/
const STATE_CHANGE_TIMEOUT = 100;
/**
* The time, in ms, to wait before initiating a drag-and-drop from a
* long-press.
*/
const DEFAULT_DND_TIMEOUT = 300;
/**
* The distance, in CSS pixels, in which a touch or mouse point can deviate
* before it being discarded for initiation of a drag-and-drop action.
*/
const DND_THRESHOLD = 5;
/**
* The minimum time between sending move events during drag-and-drop.
*/
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 = {
// Whether drag-and-drop is enabled
enabled: false,
// The time, in ms, to wait before initiating a drag-and-drop from a
// long-press
delay: DEFAULT_DND_TIMEOUT,
// Timeout used to initiate drag-and-drop actions
timeout: null,
// The child that was tapped/clicked
child: null,
// Whether a drag is active
active: false,
// The start point of the drag action
start: { pageX: 0, pageY: 0, clientX: 0, clientY: 0 },
// The last point of the drag action
last: { pageX: 0, pageY: 0, clientX: 0, clientY: 0, timeStamp: 0 },
// Timeout used to send drag-move events
moveTimeout: null,
// The last time a move event was fired
lastMoveEventTime: 0,
// Whether to capture the next click event
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);
// Find the child again. We need to do this in case the container was
// manipulated between removing the child and this callback being reached.
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';
}
// Unparent the newElement if necessary (with support for gaia-container)
if (newElement.parentNode) {
newElement.parentNode.removeChild(newElement, () => {
this.replaceChild(newElement, oldElement, callback);
});
if (newElement.parentNode) {
return;
}
}
// Remove the old child and add the new one, but don't run the removed/
// added state changes.
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';
};
/**
* Reorders the given element to appear before referenceElement.
*/
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();
};
/**
* Used to execute a state-change of a child that may possibly be animated.
* @state will be added to the child's class-list. If an animation starts that
* has the same name, that animation will complete and @callback will be
* called. Otherwise, the class will be removed and @callback called on the
* next frame.
*/
proto.changeState = function(child, state, callback) {
// Check that the child is still attached to this parent (can happen if
// the child is removed while frozen).
if (child.container.parentNode !== this) {
return;
}
// Check for a redundant state change.
if (child.container.classList.contains(state)) {
return;
}
// Queue up state change if we're frozen.
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) {
// Default action, rearrange the dragged child to before or after
// the child underneath the touch/mouse point.
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;
}
}
// Find the child
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;
}
};
/**
* Temporarily disables element position synchronisation. Useful when adding
* multiple elements to the container at the same time, or in quick
* succession.
*/
proto.freeze = function() {
this._frozen = true;
};
/**
* Enables element position synchronisation after freeze() has been called.
*/
proto.thaw = function() {
if (this._frozen) {
this._frozen = false;
for (var callback of this._pendingStateChanges) {
callback();
}
this._pendingStateChanges = [];
this.synchronise();
}
};
/**
* Synchronise positions between the managed container and all children.
* This is called automatically when adding/inserting or removing children,
* but must be called manually if the managed container is manipulated
* outside of these methods (for example, if style properties change, or
* if it's resized).
*/
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;
},
/**
* The element that will contain the child element and control its position.
*/
get container() {
if (!this._container) {
// Create 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;
},
/**
* The element that will be added to the container that will
* control the element's transform.
*/
get master() {
if (!this._master) {
// Create master
var master = document.createElement('div');
master.style.visibility = 'hidden';
this._master = master;
}
return this._master;
},
/**
* Clears any cached style properties. To be used if elements are
* manipulated outside of the methods of this object.
*/
markDirty() {
this._lastElementWidth = null;
this._lastElementHeight = null;
this._lastElementDisplay = null;
this._lastElementOrder = null;
this._lastMasterTop = null;
this._lastMasterLeft = null;
},
/**
* Synchronise the size of the master with the managed child element.
*/
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;
}
},
/**
* Synchronise the container's transform with the position of the master.
*/
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,28 @@
/* global module */
// Karma configuration
'use strict';
module.exports = function(config) {
config.set({
frameworks: ['mocha', 'sinon-chai'],
client: {
captureConsole: true,
mocha: {'ui': 'tdd'}
},
basePath: '../',
files: [
'script.js',
'test/test.js'
],
browsers: ['FirefoxLatest'],
customLaunchers: {
FirefoxLatest: {
base: 'FirefoxNightly',
prefs: {'dom.webcomponents.enabled': true}
}
}
});
};

View file

@ -0,0 +1,194 @@
/* global sinon, assert, suite, setup, teardown, test */
'use strict';
suite('GaiaContainer', () => {
var sinonSandbox, dom, el;
setup(() => {
sinonSandbox = sinon.sandbox.create();
// DOM container to put test cases
dom = document.createElement('div');
dom.innerHTML = '<gaia-container></gaia-container>';
el = dom.firstElementChild;
document.body.appendChild(dom);
});
teardown(() => {
sinonSandbox.restore();
document.body.removeChild(dom);
dom = null;
});
suite('Drag and drop feature', () => {
test('drag-and-drop attribute should not be set by default', () => {
assert.equal(el.getAttribute('drag-and-drop'), null);
assert.equal(el.hasAttribute('drag-and-drop'), false);
assert.equal(el.dragAndDrop, false);
});
test('.dragAndDrop property value should change with the attribute', () => {
dom.innerHTML = '<gaia-container drag-and-drop></gaia-container>';
el = dom.firstElementChild;
assert.equal(el.getAttribute('drag-and-drop'), '');
assert.equal(el.hasAttribute('drag-and-drop'), true);
assert.equal(el.dragAndDrop, true);
el.removeAttribute('drag-and-drop');
assert.equal(el.getAttribute('drag-and-drop'), null);
assert.equal(el.hasAttribute('drag-and-drop'), false);
assert.equal(el.dragAndDrop, false);
});
test('.dragAndDropTimeout should only accept positive value', () => {
var otherValue = 9999;
assert.equal(typeof el.dragAndDropTimeout, 'number');
el.dragAndDropTimeout = otherValue;
assert.equal(el.dragAndDropTimeout, otherValue);
el.dragAndDropTimeout = 0;
el.dragAndDropTimeout = -5555;
assert.equal(el.dragAndDropTimeout, otherValue);
});
suite('Events', () => {
var icon;
setup(() => {
icon = document.createElement('div');
el.appendChild(icon);
el.dragAndDropTimeout = 1;
});
test('drag-start', done => {
el.handleEvent({
type: 'touchstart',
target: icon,
touches: [{
pageX: 0,
pageY: 0,
clientX: 0,
clientY: 0
}]
});
el.addEventListener('drag-start', () => {
done();
});
});
test('drag-start resets last-drag', done => {
el._dnd.last.pageX = el._dnd.last.pageY =
el._dnd.last.clientX = el._dnd.last.clientY =
el._dnd.last.timeStamp = 100;
el.handleEvent({
type: 'touchstart',
target: icon,
timeStamp: 0,
touches: [{
pageX: 0,
pageY: 0,
clientX: 0,
clientY: 0
}]
});
el.addEventListener('drag-start', () => {
assert.equal(el._dnd.last.pageX, 0);
assert.equal(el._dnd.last.pageY, 0);
assert.equal(el._dnd.last.clientX, 0);
assert.equal(el._dnd.last.clientY, 0);
assert.equal(el._dnd.last.timeStamp, 0);
done();
});
});
});
});
suite('DOM manipulation', () => {
var nodeA, nodeB;
setup(() => {
nodeA = document.createElement('div');
nodeB = document.createElement('div');
el.appendChild(nodeA);
});
test('should add and remove child nodes', done => {
assert.equal(el.children.length, 1);
el.appendChild(nodeB);
assert.equal(el.children.length, 2);
assert.equal(el.firstChild, nodeA);
assert.equal(el.lastChild, nodeB);
el.removeChild(nodeB, () => {
assert.equal(el.children.length, 1);
assert.equal(el.firstChild, nodeA);
assert.equal(el.lastChild, nodeA);
done();
});
});
test('.replaceChild()', done => {
el.appendChild(nodeB);
el.replaceChild(nodeB, nodeA, () => {
assert.equal(el.children.length, 2);
assert.equal(el.firstChild, nodeA);
assert.equal(el.lastChild, nodeB);
done();
});
});
test('.insertBefore()', done => {
el.insertBefore(nodeB, nodeA, () => {
assert.equal(el.children.length, 2);
assert.equal(el.firstChild, nodeB);
assert.equal(el.lastChild, nodeA);
done();
});
});
test('.reorderChild()', done => {
el.appendChild(nodeB);
el.reorderChild(nodeB, nodeA, () => {
assert.equal(el.children.length, 2);
assert.equal(el.firstChild, nodeB);
assert.equal(el.lastChild, nodeA);
el.reorderChild(nodeB, null, () => {
assert.equal(el.children.length, 2);
assert.equal(el.firstChild, nodeA);
assert.equal(el.lastChild, nodeB);
done();
});
});
});
});
suite('Utility functions', () => {
test('.getBoundingClientRect()', done => {
var nodeA = document.createElement('div');
nodeA.style.width = '200px';
nodeA.style.height = '100px';
el.style.paddingLeft = '100px';
el.style.paddingTop = '50px';
el.appendChild(nodeA, () => {
var rect = el.getChildOffsetRect(nodeA);
assert.equal(rect.width, 200);
assert.equal(rect.height, 100);
assert.equal(rect.left, 100);
assert.equal(rect.top, 50);
assert.equal(rect.right, 300);
assert.equal(rect.bottom, 150);
done();
});
});
});
});

View file

@ -0,0 +1,40 @@
{
"name": "gaia-dialog",
"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"
},
"_release": "0bf523d279",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "0bf523d2791cea3649ac36983699cb5ee410a19a"
},
"_source": "git://github.com/gaia-components/gaia-dialog.git",
"_target": "master",
"_originalSource": "gaia-components/gaia-dialog"
}

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,115 @@
/* 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-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() {
// First close (hide) inner dialog and then the container.
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,483 @@
/* global define */
;(function(define){'use strict';define((require,exports,module) => {
/**
* Dependencies
*/
var component = require('gaia-component');
/**
* Simple logger (toggle 0)
*
* @type {Function}
*/
var debug = 0 ? console.log.bind(console) : () => {};
/**
* Use the dom-scheduler if it's around,
* else fallback to fake shim.
*
* @type {Object}
*/
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);
}
};
/**
* Exports
*/
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; // Hack, any ideas?
})
.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 }
}`
});
/**
* Utils
*/
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,39 @@
{
"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"
],
"_release": "0.10.3",
"_resolution": {
"type": "version",
"tag": "v0.10.3",
"commit": "c3628ea7b1d0950dda833f86ccfd7d2782e5c8e3"
},
"_source": "git://github.com/gaia-components/gaia-icons.git",
"_target": "^0.10.2",
"_originalSource": "gaia-components/gaia-icons"
}

View file

@ -0,0 +1,33 @@
{
"camelcase": false,
"curly": true,
"forin": false,
"latedef": "nofunc",
"newcap": false,
"noarg": true,
"node": true,
"nonew": true,
"quotmark": "single",
"undef": true,
"unused": "vars",
"strict": true,
"trailing": true,
"maxlen": 80,
"eqnull": true,
"esnext": true,
"expr": true,
"globalstrict": true,
"maxerr": 1000,
"regexdash": true,
"laxcomma": true,
"proto": true,
"browser": true,
"devel": true,
"nonstandard": true,
"worker": true,
"-W078": true
}

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"
]
}

Binary file not shown.

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,37 @@
{
"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"
},
"homepage": "https://github.com/gaia-components/gaia-text-input",
"_release": "0.1.4",
"_resolution": {
"type": "version",
"tag": "v0.1.4",
"commit": "d811482e143cc7990be04fdbfcc890f2a9fbd9d1"
},
"_source": "git://github.com/gaia-components/gaia-text-input.git",
"_target": "*",
"_originalSource": "gaia-components/gaia-text-input"
}

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,29 @@
{
"name": "gaia-text-input",
"version": "0.1.4",
"homepage": "https://github.com/gaia-components/gaia-text-input",
"license": "ISC",
"main": "gaia-text-input.js",
"directories": {
"test": "test"
},
"devDependencies": {
"bower": "^1.3.5",
"karma": "^0.12.16",
"karma-firefox-launcher": "^0.1.3",
"karma-mocha": "^0.1.3",
"karma-sinon-chai": "^0.1.6",
"mozilla-download": "0.4.4"
},
"scripts": {
"test": "./node_modules/karma/bin/karma start test/karma.conf.js --single-run",
"test-dev": "./node_modules/karma/bin/karma start test/karma.conf.js"
},
"repository": {
"type": "git",
"url": "git://github.com/gaia-components/gaia-text-input.git"
},
"bugs": {
"url": "https://github.com/gaia-components/gaia-text-input/issues"
}
}

View file

@ -0,0 +1,26 @@
{
"name": "pressed",
"main": "pressed.js",
"authors": [
"Wilson Page <wilsonpage@me.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"!.jshintrc",
"node_modules",
"bower_components",
"test",
"tests"
],
"homepage": "https://github.com/gaia-components/pressed",
"_release": "0a9ae880fe",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "0a9ae880fe71ebb6bffaf14b9fd1c7eb6ce489cb"
},
"_source": "git://github.com/gaia-components/pressed.git",
"_target": "master",
"_originalSource": "gaia-components/pressed"
}

View file

@ -0,0 +1,4 @@
{
"strict": false,
"node": true
}

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,138 @@
;(function(define){'use strict';define(function(require,exports,module){
/**
* Pointer event abstraction to make
* it work for touch and mouse.
*
* @type {Object}
*/
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 there is a removeRelease pending
// run it before we add any more 'pressed'
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);
// Once we consider the 'press' event
// to be over, we remove the 'pressed'
// class and add a 'released' class.
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;
// addEventListener('scroll', function() {
// windowScrolling = true;
// clearTimeout(scrollTimeout);
// scrollTimeout = setTimeout(function() {
// windowScrolling = false;
// }, 60);
// });
/**
* Run a classList method on every
* element up the DOM tree, until
* the given scope.
*
* @param {Element} el
* @param {Element} scope
* @param {String} method
* @param {String} cls
*/
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));