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:
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
25
gaia/apps/homescreen/bower_components/base/.bower.json
vendored
Executable file
25
gaia/apps/homescreen/bower_components/base/.bower.json
vendored
Executable 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"
|
||||
}
|
||||
227
gaia/apps/homescreen/bower_components/base/base.css
vendored
Executable file
227
gaia/apps/homescreen/bower_components/base/base.css
vendored
Executable 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;
|
||||
}
|
||||
16
gaia/apps/homescreen/bower_components/base/bower.json
vendored
Executable file
16
gaia/apps/homescreen/bower_components/base/bower.json
vendored
Executable 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"
|
||||
]
|
||||
}
|
||||
27
gaia/apps/homescreen/bower_components/evt/.bower.json
vendored
Executable file
27
gaia/apps/homescreen/bower_components/evt/.bower.json
vendored
Executable 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"
|
||||
}
|
||||
19
gaia/apps/homescreen/bower_components/evt/bower.json
vendored
Executable file
19
gaia/apps/homescreen/bower_components/evt/bower.json
vendored
Executable 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"
|
||||
]
|
||||
}
|
||||
154
gaia/apps/homescreen/bower_components/evt/index.js
vendored
Executable file
154
gaia/apps/homescreen/bower_components/evt/index.js
vendored
Executable 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;
|
||||
}
|
||||
|
||||
})();
|
||||
12
gaia/apps/homescreen/bower_components/gaia-container/.bower.json
vendored
Executable file
12
gaia/apps/homescreen/bower_components/gaia-container/.bower.json
vendored
Executable 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"
|
||||
}
|
||||
1
gaia/apps/homescreen/bower_components/gaia-container/.gitignore
vendored
Executable file
1
gaia/apps/homescreen/bower_components/gaia-container/.gitignore
vendored
Executable file
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
122
gaia/apps/homescreen/bower_components/gaia-container/examples/basic.html
vendored
Executable file
122
gaia/apps/homescreen/bower_components/gaia-container/examples/basic.html
vendored
Executable 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>
|
||||
29
gaia/apps/homescreen/bower_components/gaia-container/package.json
vendored
Executable file
29
gaia/apps/homescreen/bower_components/gaia-container/package.json
vendored
Executable 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"
|
||||
}
|
||||
848
gaia/apps/homescreen/bower_components/gaia-container/script.js
vendored
Executable file
848
gaia/apps/homescreen/bower_components/gaia-container/script.js
vendored
Executable 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);
|
||||
28
gaia/apps/homescreen/bower_components/gaia-container/test/karma.conf.js
vendored
Executable file
28
gaia/apps/homescreen/bower_components/gaia-container/test/karma.conf.js
vendored
Executable 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}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
194
gaia/apps/homescreen/bower_components/gaia-container/test/test.js
vendored
Executable file
194
gaia/apps/homescreen/bower_components/gaia-container/test/test.js
vendored
Executable 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();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
40
gaia/apps/homescreen/bower_components/gaia-dialog/.bower.json
vendored
Executable file
40
gaia/apps/homescreen/bower_components/gaia-dialog/.bower.json
vendored
Executable 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"
|
||||
}
|
||||
32
gaia/apps/homescreen/bower_components/gaia-dialog/bower.json
vendored
Executable file
32
gaia/apps/homescreen/bower_components/gaia-dialog/bower.json
vendored
Executable 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"
|
||||
}
|
||||
}
|
||||
115
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-action.js
vendored
Executable file
115
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-action.js
vendored
Executable 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));
|
||||
59
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-alert.js
vendored
Executable file
59
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-alert.js
vendored
Executable 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));
|
||||
70
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-confirm.js
vendored
Executable file
70
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-confirm.js
vendored
Executable 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));
|
||||
104
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-menu.js
vendored
Executable file
104
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-menu.js
vendored
Executable 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));
|
||||
83
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-prompt.js
vendored
Executable file
83
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-prompt.js
vendored
Executable 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));
|
||||
247
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-select.js
vendored
Executable file
247
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog-select.js
vendored
Executable 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));
|
||||
483
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog.js
vendored
Executable file
483
gaia/apps/homescreen/bower_components/gaia-dialog/gaia-dialog.js
vendored
Executable 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));
|
||||
39
gaia/apps/homescreen/bower_components/gaia-icons/.bower.json
vendored
Executable file
39
gaia/apps/homescreen/bower_components/gaia-icons/.bower.json
vendored
Executable 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"
|
||||
}
|
||||
33
gaia/apps/homescreen/bower_components/gaia-icons/.jshintrc
vendored
Executable file
33
gaia/apps/homescreen/bower_components/gaia-icons/.jshintrc
vendored
Executable 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
|
||||
}
|
||||
58
gaia/apps/homescreen/bower_components/gaia-icons/bidi-helper.css
vendored
Executable file
58
gaia/apps/homescreen/bower_components/gaia-icons/bidi-helper.css
vendored
Executable 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';
|
||||
}
|
||||
|
||||
118
gaia/apps/homescreen/bower_components/gaia-icons/bin/report.js
vendored
Executable file
118
gaia/apps/homescreen/bower_components/gaia-icons/bin/report.js
vendored
Executable 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();
|
||||
30
gaia/apps/homescreen/bower_components/gaia-icons/bower.json
vendored
Executable file
30
gaia/apps/homescreen/bower_components/gaia-icons/bower.json
vendored
Executable 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"
|
||||
]
|
||||
}
|
||||
BIN
gaia/apps/homescreen/bower_components/gaia-icons/fonts/gaia-icons.ttf
vendored
Executable file
BIN
gaia/apps/homescreen/bower_components/gaia-icons/fonts/gaia-icons.ttf
vendored
Executable file
Binary file not shown.
41
gaia/apps/homescreen/bower_components/gaia-icons/gaia-icons-embedded.css
vendored
Executable file
41
gaia/apps/homescreen/bower_components/gaia-icons/gaia-icons-embedded.css
vendored
Executable file
File diff suppressed because one or more lines are too long
41
gaia/apps/homescreen/bower_components/gaia-icons/gaia-icons.css
vendored
Executable file
41
gaia/apps/homescreen/bower_components/gaia-icons/gaia-icons.css
vendored
Executable 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;
|
||||
}
|
||||
|
||||
38
gaia/apps/homescreen/bower_components/gaia-icons/gaia-icons.js
vendored
Executable file
38
gaia/apps/homescreen/bower_components/gaia-icons/gaia-icons.js
vendored
Executable 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));
|
||||
37
gaia/apps/homescreen/bower_components/gaia-text-input/.bower.json
vendored
Executable file
37
gaia/apps/homescreen/bower_components/gaia-text-input/.bower.json
vendored
Executable 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"
|
||||
}
|
||||
27
gaia/apps/homescreen/bower_components/gaia-text-input/bower.json
vendored
Executable file
27
gaia/apps/homescreen/bower_components/gaia-text-input/bower.json
vendored
Executable 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"
|
||||
}
|
||||
}
|
||||
216
gaia/apps/homescreen/bower_components/gaia-text-input/gaia-text-input-multiline.js
vendored
Executable file
216
gaia/apps/homescreen/bower_components/gaia-text-input/gaia-text-input-multiline.js
vendored
Executable 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));
|
||||
279
gaia/apps/homescreen/bower_components/gaia-text-input/gaia-text-input-pin.js
vendored
Executable file
279
gaia/apps/homescreen/bower_components/gaia-text-input/gaia-text-input-pin.js
vendored
Executable 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));
|
||||
335
gaia/apps/homescreen/bower_components/gaia-text-input/gaia-text-input.js
vendored
Executable file
335
gaia/apps/homescreen/bower_components/gaia-text-input/gaia-text-input.js
vendored
Executable 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));
|
||||
50
gaia/apps/homescreen/bower_components/gaia-text-input/index.html
vendored
Executable file
50
gaia/apps/homescreen/bower_components/gaia-text-input/index.html
vendored
Executable file
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title><gaia-text-input></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>
|
||||
29
gaia/apps/homescreen/bower_components/gaia-text-input/package.json
vendored
Executable file
29
gaia/apps/homescreen/bower_components/gaia-text-input/package.json
vendored
Executable 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"
|
||||
}
|
||||
}
|
||||
26
gaia/apps/homescreen/bower_components/pressed/.bower.json
vendored
Executable file
26
gaia/apps/homescreen/bower_components/pressed/.bower.json
vendored
Executable 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"
|
||||
}
|
||||
4
gaia/apps/homescreen/bower_components/pressed/.jshintrc
vendored
Executable file
4
gaia/apps/homescreen/bower_components/pressed/.jshintrc
vendored
Executable file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"strict": false,
|
||||
"node": true
|
||||
}
|
||||
17
gaia/apps/homescreen/bower_components/pressed/bower.json
vendored
Executable file
17
gaia/apps/homescreen/bower_components/pressed/bower.json
vendored
Executable 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"
|
||||
]
|
||||
}
|
||||
138
gaia/apps/homescreen/bower_components/pressed/pressed.js
vendored
Executable file
138
gaia/apps/homescreen/bower_components/pressed/pressed.js
vendored
Executable 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));
|
||||
Loading…
Reference in a new issue