oversu/VulpesOS
oversu/VulpesOS
Watch
3
2
Fork
You've already forked VulpesOS
 0
Code Issues 27 Pull requests Projects Releases 9 Packages Wiki Activity

Publish Vulpes Preview 15 sources for desktop, Android and Tundra

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

32
gaia/distros/spark/apps/studio/bower_components/gaia-dialog/.bower.json vendored Executable file
View file

@ -0,0 +1,32 @@
{
"name": "gaia-dialog",
"version": "0.0.6",
"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",
"examples",
"test",
"tests",
"README.md"
],
"dependencies": {
"gaia-text-input": "gaia-components/gaia-text-input",
"gaia-icons": "gaia-components/gaia-icons#~0.7.4"
},
"_release": "0.0.6",
"_resolution": {
"type": "version",
"tag": "v0.0.6",
"commit": "526ea56e2083807b862f696431ac174f7b33f317"
},
"_source": "git://github.com/gaia-components/gaia-dialog.git",
"_target": "*",
"_originalSource": "gaia-components/gaia-dialog"
}

23
gaia/distros/spark/apps/studio/bower_components/gaia-dialog/bower.json vendored Executable file
View file

@ -0,0 +1,23 @@
{
"name": "gaia-dialog",
"version": "0.0.6",
"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",
"examples",
"test",
"tests",
"README.md"
],
"dependencies": {
"gaia-text-input": "gaia-components/gaia-text-input",
"gaia-icons": "gaia-components/gaia-icons#~0.7.4"
}
}

117
gaia/distros/spark/apps/studio/bower_components/gaia-dialog/gaia-dialog-action.js vendored Executable file
View file

@ -0,0 +1,117 @@
;(function(define){define(function(require,exports,module){
/*jshint esnext:true*/
'use strict';
/**
* Dependencies
*/
var GaiaDialog = require('gaia-dialog');
/**
* Extend from the `HTMLElement` prototype
*
* @type {Object}
*/
var proto = GaiaDialog.extend();
/**
* Runs when an instance of `GaiaTabs`
* is first created.
*
* The initial value of the `select` attribute
* is used to select a tab.
*
* @private
*/
proto.createdCallback = function() {
this.onCreated();
this.els.submit = this.shadowRoot.querySelector('.submit');
this.els.cancel = this.shadowRoot.querySelector('.cancel');
};
proto.template = `
<style>
.shadow-host {
display: none;
}
.shadow-host[opened],
.shadow-host.animating {
display: block;
position: fixed;
width: 100%;
height: 100%;
}
/** Button
---------------------------------------------------------*/
.shadow-content section {
padding: 33px 16px;
}
.shadow-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;
}
.shadow-content button:after {
content: '';
display: block;
position: absolute;
height: 1px;
left: 6px;
right: 6px;
top: 49px;
background: #E7E7E7;
}
.shadow-content button:last-child:after {
display: none;
}
.shadow-content button:active {
background-color: var(--highlight-color);
color: #fff;
transition: none;
}
.shadow-content button:active:after {
background: var(--highlight-color);
transition: none;
}
</style>
<gaia-dialog>
<section>
<content select="h1"></content>
</section>
<content select="button"></content>
<button class="cancel">Cancel</button>
</gaia-dialog>`;
// Register and expose the constructor
try {
module.exports = document.registerElement('gaia-dialog-action', { prototype: proto });
module.exports.proto = proto;
} catch (e) {
if (e.name !== 'NotSupportedError') {
throw e;
}
}
});})(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));

66
gaia/distros/spark/apps/studio/bower_components/gaia-dialog/gaia-dialog-alert.js vendored Executable file
View file

@ -0,0 +1,66 @@
;(function(define){define(function(require,exports,module){
/*jshint esnext:true*/
'use strict';
/**
* Dependencies
*/
var GaiaDialog = require('gaia-dialog');
var proto = GaiaDialog.extend();
/**
* Runs when an instance of `GaiaTabs`
* is first created.
*
* The initial value of the `select` attribute
* is used to select a tab.
*
* @private
*/
proto.createdCallback = function() {
this.onCreated();
this.els.submit = this.shadowRoot.querySelector('.submit');
this.els.submit.addEventListener('click', this.close.bind(this));
};
proto.template = `
<style>
.shadow-host {
display: none;
}
.shadow-host[opened],
.shadow-host.animating {
display: block;
position: fixed;
width: 100%;
height: 100%;
}
</style>
<gaia-dialog>
<section>
<p><content></content></p>
</section>
<div>
<button class="submit primary">Ok</button>
</div>
</gaia-dialog>`;
// Register and expose the constructor
try {
module.exports = document.registerElement('gaia-dialog-alert', { prototype: proto });
module.exports.proto = proto;
} catch (e) {
if (e.name !== 'NotSupportedError') {
throw e;
}
}
});})(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));

75
gaia/distros/spark/apps/studio/bower_components/gaia-dialog/gaia-dialog-confirm.js vendored Executable file
View file

@ -0,0 +1,75 @@
;(function(define){define(function(require,exports,module){
/*jshint esnext:true*/
'use strict';
/**
* Dependencies
*/
var GaiaDialog = require('gaia-dialog');
/**
* Extend from the `HTMLElement` prototype
*
* @type {Object}
*/
var proto = GaiaDialog.extend();
/**
* Runs when an instance of `GaiaTabs`
* is first created.
*
* The initial value of the `select` attribute
* is used to select a tab.
*
* @private
*/
proto.createdCallback = function() {
this.onCreated();
this.els.submit = this.shadowRoot.querySelector('.submit');
this.els.cancel = this.shadowRoot.querySelector('.cancel');
this.els.cancel.addEventListener('click', this.close.bind(this));
this.els.submit.addEventListener('click', this.close.bind(this));
};
proto.template = `
<style>
.shadow-host {
display: none;
}
.shadow-host[opened],
.shadow-host.animating {
display: block;
position: fixed;
width: 100%;
height: 100%;
}
</style>
<gaia-dialog>
<section>
<p><content></content></p>
</section>
<fieldset>
<button class="cancel">Cancel</button>
<button class="submit danger">Confirm</button>
</fieldset>
</gaia-dialog>`;
// Register and expose the constructor
try {
module.exports = document.registerElement('gaia-dialog-confirm', { prototype: proto });
module.exports.proto = proto;
} catch (e) {
if (e.name !== 'NotSupportedError') {
throw e;
}
}
});})(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));

128
gaia/distros/spark/apps/studio/bower_components/gaia-dialog/gaia-dialog-menu.js vendored Executable file
View file

@ -0,0 +1,128 @@
;(function(define){define(function(require,exports,module){
/*jshint esnext:true*/
'use strict';
/**
* Dependencies
*/
var GaiaDialog = require('gaia-dialog');
/**
* Detects presence of shadow-dom
* CSS selectors.
*
* @return {Boolean}
*/
var hasShadowCSS = (function() {
try { document.querySelector(':host'); return true; }
catch (e) { return false; }
})();
/**
* Extend from the `HTMLElement` prototype
*
* @type {Object}
*/
var proto = GaiaDialog.extend();
/**
* Runs when an instance of `GaiaTabs`
* is first created.
*
* The initial value of the `select` attribute
* is used to select a tab.
*
* @private
*/
proto.createdCallback = function() {
this.onCreated();
this.els.submit = this.shadowRoot.querySelector('.submit');
this.els.cancel = this.shadowRoot.querySelector('.cancel');
};
proto.template = `
<style>
:host {
display: none;
}
:host[opened],
:host.animating {
display: block;
position: fixed;
width: 100%;
height: 100%;
}
::content > button {
position: relative;
display: block;
width: 100%;
height: 50px;
line-height: 50px;
margin: 0;
border: 0;
padding: 0rem 16px;
font: inherit;
font-style: italic;
text-align: left;
background: var(--color-beta);
color: var(--highlight-color);
}
::content > button[data-icon]:before {
width: 50px;
font-size: 22px;
margin-left: -16px;
vertical-align: middle;
text-align: center;
}
/** 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>
<gaia-dialog>
<div class="items"><content select="button"></content></div>
</gaia-dialog>`;
// If the browser doesn't support shadow-css
// selectors yet, we update the template
// to use the shim classes instead.
if (!hasShadowCSS) {
proto.template = proto.template
.replace('::content', 'gaia-dialog-menu.shadow-content', 'g')
.replace(':host', 'gaia-dialog-menu.shadow-host', 'g');
}
// Register and expose the constructor
try {
module.exports = document.registerElement('gaia-dialog-menu', { prototype: proto });
module.exports.proto = proto;
} catch (e) {
if (e.name !== 'NotSupportedError') {
throw e;
}
}
});})(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));

80
gaia/distros/spark/apps/studio/bower_components/gaia-dialog/gaia-dialog-prompt.js vendored Executable file
View file

@ -0,0 +1,80 @@
;(function(define){define(function(require,exports,module){
/*jshint esnext:true*/
'use strict';
/**
* Dependencies
*/
var GetTextInput = require('gaia-text-input');
var GaiaDialog = require('gaia-dialog');
/**
* Extend from `GaiaDialog` prototype
*
* @type {Object}
*/
var proto = GaiaDialog.extend();
/**
* Runs when an instance of `GaiaTabs`
* is first created.
*
* The initial value of the `select` attribute
* is used to select a tab.
*
* @private
*/
proto.createdCallback = function() {
this.onCreated();
this.els.input = this.shadowRoot.querySelector('gaia-text-input');
this.els.submit = this.shadowRoot.querySelector('.submit');
this.els.cancel = this.shadowRoot.querySelector('.cancel');
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));
};
proto.template = `
<style>
gaia-dialog-prompt {
display: none;
}
gaia-dialog-prompt[opened],
gaia-dialog-prompt.animating {
display: block;
position: fixed;
width: 100%;
height: 100%;
}
gaia-text-input {
margin: 16px !important;
}
</style>
<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>`;
// Register and expose the constructor
try {
module.exports = document.registerElement('gaia-dialog-prompt', { prototype: proto });
module.exports.proto = proto;
} catch (e) {
if (e.name !== 'NotSupportedError') {
throw e;
}
}
});})(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));

257
gaia/distros/spark/apps/studio/bower_components/gaia-dialog/gaia-dialog-select.js vendored Executable file
View file

@ -0,0 +1,257 @@
;(function(define){define(function(require,exports,module){
/*jshint esnext:true*/
'use strict';
/**
* Dependencies
*/
var GaiaDialog = require('gaia-dialog');
// Load icon-font
require('gaia-icons');
/**
* Extend from `GaiaDialog` prototype
*
* @type {Object}
*/
var proto = GaiaDialog.extend();
/**
* Runs when an instance of `GaiaTabs`
* is first created.
*
* The initial value of the `select` attribute
* is used to select a tab.
*
* @private
*/
proto.createdCallback = function() {
this.onCreated();
this.els.submit = this.shadowRoot.querySelector('.submit');
this.els.cancel = this.shadowRoot.querySelector('.cancel');
this.els.list = this.shadowRoot.querySelector('ul');
this.multiple = this.hasAttribute('multiple');
on(this.els.list, 'click', this.onListClick, this);
on(this.els.submit, 'click', this.close, this);
on(this.els.cancel, 'click', this.close, this);
};
proto.onListClick = function(e) {
var el = getLi(e.target);
var selected = el.getAttribute('aria-selected') === 'true';
if (this.multiple) { this.onChangeMultiple(el, selected); }
else { this.onChange(el, selected); }
};
proto.onChange = function(el, selected) {
this.clearSelected();
if (!selected) { el.setAttribute('aria-selected', !selected); }
this.fireChange();
this.close();
};
proto.onChangeMultiple = function(el, selected) {
el.setAttribute('aria-selected', !selected);
this.fireChange();
};
proto.clearSelected = function() {
[].forEach.call(this.selectedOptions, function(option) {
option.removeAttribute('aria-selected');
});
};
proto.fireChange = function() {
var e = new CustomEvent('change', { detail: { value: this.valueString }});
this.dispatchEvent(e);
};
proto.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');
} else {
this._multiple = true;
this.setAttribute('multiple', '');
}
}
},
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; }
}
};
Object.defineProperties(proto, proto.attrs);
proto.template = `
<style>
.shadow-host {
display: none;
}
.shadow-host[opened],
.shadow-host.animating {
display: block;
position: fixed;
width: 100%;
height: 100%;
}
/** Title (duplicate from gaia-dialog)
---------------------------------------------------------*/
.shadow-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
---------------------------------------------------------*/
.shadow-content li {
position: relative;
display: block;
padding: 16px;
text-align: left;
-moz-user-select: none;
cursor: pointer;
}
.shadow-content li[aria-selected='true'] {
color: #00CAF2;
font-weight: normal;
}
.shadow-content li:after {
content: '';
display: block;
position: absolute;
height: 1px;
left: 16px;
right: 16px;
bottom: 1px;
background: #E7E7E7;
}
.shadow-content li:last-of-type:after {
display: none
}
/** Buttons
---------------------------------------------------------*/
gaia-dialog:not([multiple]) .submit {
display: none !important;
}
gaia-dialog:not([multiple]) .cancel {
width: 100% !important;
}
gaia-dialog:not([multiple]) .cancel:after {
display: none% !important;
}
/** Tick Icon
---------------------------------------------------------*/
.shadow-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>
<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>`;
function on(el, name, fn, ctx) {
if (ctx) { fn = fn.bind(ctx); }
el.addEventListener(name, fn);
}
function getLi(el) {
return el && (el.tagName === 'LI' ? el : getLi(el.parentNode));
}
// Register and expose the constructor
try {
module.exports = document.registerElement('gaia-dialog-select', { prototype: proto });
module.exports.proto = proto;
} catch (e) {
if (e.name !== 'NotSupportedError') {
throw e;
}
}
});})(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));

586
gaia/distros/spark/apps/studio/bower_components/gaia-dialog/gaia-dialog.js vendored Executable file
View file

@ -0,0 +1,586 @@
;(function(define){define(function(require,exports,module){
/*jshint laxbreak:true*/
/*jshint esnext:true*/
'use strict';
/**
* Extend from the `HTMLElement` prototype
*
* @type {Object}
*/
var proto = Object.create(HTMLElement.prototype);
var innerHTML = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
var removeAttribute = proto.removeAttribute;
var setAttribute = proto.setAttribute;
var has = Object.prototype.hasOwnProperty;
/**
* Runs when an instance of `GaiaTabs`
* is first created.
*
* The initial value of the `select` attribute
* is used to select a tab.
*
* @private
*/
proto.createdCallback = function() {
this.createShadowRoot().innerHTML = template;
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));
this.setupAnimationListeners();
this.styleHack();
};
proto.onClick = function(e) {
var el = closest('[on-click]', e.target, this);
if (!el) { return; }
var method = el.getAttribute('on-click');
if (typeof this[method] == 'function') { this[method](); }
};
proto.setupAnimationListeners = function() {
this.addEventListener('animationstart', this.onAnimationStart.bind(this));
this.addEventListener('animationend', this.onAnimationEnd.bind(this));
};
proto.styleHack = function() {
var style = this.shadowRoot.querySelector('style').cloneNode(true);
this.classList.add('shadow-content', 'shadow-host');
style.setAttribute('scoped', '');
this.appendChild(style);
};
proto.open = function(options) {
if (this.isOpen) { return; }
this.animateIn(options);
this.isOpen = true;
this.setAttribute('opened', '');
this.dispatch('opened');
};
proto.close = function(options) {
if (!this.isOpen) { return; }
var self = this;
self.isOpen = false;
this.animateOut(function() {
self.removeAttribute('opened');
self.dispatch('closed');
});
};
proto.attributeChangedCallback = function(name, from, to) {
if (this.attrs[name]) { this[name] = to; }
};
proto.setAttribute = function(attr, value) {
this.els.inner.setAttribute(attr, value);
setAttribute.call(this, attr, value);
};
proto.removeAttribute = function(attr) {
this.els.inner.removeAttribute(attr);
removeAttribute.call(this, attr);
};
proto.animateIn = function(e) {
var hasTarget = e && ('clientX' in e || e.touches);
if (hasTarget) { return this.animateInFromTarget(e); }
var self = this;
this.dispatch('animationstart');
this.els.background.classList.add('animate-in');
this.els.background.addEventListener('animationend', function fn() {
self.els.background.removeEventListener('animationend', fn);
self.els.window.classList.add('animate-in');
self.dispatch('animationend');
});
};
proto.animateInFromTarget = function(e) {
var pos = e.touches && e.touches[0] || e;
var scale = Math.sqrt(innerWidth * innerHeight) / 10;
var background = this.els.background;
var duration = scale * 7;
var end = 'transitionend';
var self = this;
background.style.transform = 'translate(' + pos.clientX + 'px, ' + pos.clientY + 'px)';
background.style.transitionDuration = duration + 'ms';
background.classList.add('circular');
this.dispatch('animationstart');
var reflow = background.offsetTop;
background.style.transform += ' scale(' + scale + ')';
background.style.opacity = 1;
background.addEventListener(end, function fn() {
background.removeEventListener(end, fn);
self.els.window.classList.add('animate-in');
self.dispatch('animationend');
});
};
proto.animateOut = function(callback) {
var end = 'animationend';
var background = this.els.background;
var self = this;
var classes = {
el: this.classList,
window: this.els.window.classList,
background: this.els.background.classList
};
this.dispatch('animationstart');
classes.window.add('animate-out');
this.els.window.addEventListener(end, function fn(e) {
self.els.window.removeEventListener(end, fn);
e.stopPropagation();
classes.background.add('animate-out');
self.els.background.addEventListener(end, function fn() {
self.els.background.removeEventListener(end, fn);
classes.window.remove('animate-out', 'animate-in');
classes.background.remove('animate-out', 'animate-in');
background.classList.remove('circular');
background.style = '';
self.dispatch('animationend');
if (callback) { callback(); }
});
});
};
proto.onAnimationStart = function() {
this.classList.add('animating');
};
proto.onAnimationEnd = function() {
this.classList.remove('animating');
};
proto.dispatch = function(name) {
this.dispatchEvent(new CustomEvent(name));
};
proto.attrs = {
opened: {
get: function() { return !!this.isOpen; },
set: function(value) {
value = value === '' || value;
if (!value) { this.close(); }
else { this.open(); }
}
}
};
Object.defineProperties(proto, proto.attrs);
// Override `innerHTML` to prevent the scoped
// stylesheet being erased by mistake.
Object.defineProperty(proto, 'innerHTML', {
get: function() { return innerHTML.get.call(this); },
set: function(html) {
var style = this.querySelector('style');
innerHTML.set.call(this, html);
this.appendChild(style);
}
});
var template = `
<style>
.shadow-content * {
box-sizing: border-box;
font-weight: inherit;
font-size: inherit;
}
.shadow-content p,
.shadow-content h1,
.shadow-content h2,
.shadow-content h3,
.shadow-content h4,
.shadow-content button,
.shadow-content fieldset {
padding: 0;
margin: 0;
border: 0;
}
.shadow-host {
display: none;
position: fixed;
top: 0px; left: 0px;
width: 100%;
height: 100%;
z-index: 200;
font-style: italic;
text-align: center;
}
.shadow-host[opened],
.shadow-host.animating {
display: block;
}
/** 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: 300ms;
animation-fill-mode: forwards;
}
/**
* .animate-out
*/
.background.animate-out {
animation-name: gaia-dialog-fade-out;
animation-delay: 300ms;
animation-duration: 300ms;
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);
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;
}
.window.animate-out {
animation-name: gaia-dialog-fade-out;
animation-duration: 200ms;
animation-delay: 100ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
opacity: 1;
}
/** Title
---------------------------------------------------------*/
.shadow-content h1 {
padding: 16px;
font-size: 23px;
line-height: 26px;
font-weight: 200;
font-style: italic;
color: #858585;
}
.shadow-content strong {
font-weight: 700;
}
.shadow-content small {
font-size: 0.8em;
}
/** Section
---------------------------------------------------------*/
.shadow-content section {
padding: 33px 18px;
color: #858585;
}
.shadow-content section > *:not(:last-child) {
margin-bottom: 13px;
}
/** Paragraphs
---------------------------------------------------------*/
.shadow-content p {
text-align: left;
}
/** Buttons
---------------------------------------------------------*/
.shadow-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
*/
.shadow-content button.primary {
color: var(--highlight-color);
}
/**
* .danger
*/
.shadow-content button.danger {
color: var(--color-destructive);
}
/**
* Disabled buttons
*/
.shadow-content button[disabled] {
color: var(--color-zeta);
}
/** Button Divider Line
---------------------------------------------------------*/
.shadow-content button:after {
content: '';
display: block;
position: absolute;
height: 1px;
left: 6px;
right: 6px;
top: 49px;
background: #E7E7E7;
}
.shadow-content button:last-of-type:after {
display: none;
}
.shadow-content button:active {
background-color: var(--highlight-color);
color: #fff;
transition: none;
}
.shadow-content button:active:after {
background: var(--highlight-color);
transition: none;
}
.shadow-content button[data-icon]:before {
float: left;
}
/** Fieldset (button group)
---------------------------------------------------------*/
.shadow-content fieldset {
overflow: hidden;
}
.shadow-content fieldset button {
position: relative;
float: left;
width: 50%;
}
.shadow-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>
<div class="dialog-inner">
<div class="background" on-click="close"></div>
<div class="window"><content></content></div>
</div>`;
var animations = `
@keyframes gaia-dialog-entrance {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes gaia-dialog-fade-in {
0% { opacity: 0 }
100% { opacity: 1 }
}
@keyframes gaia-dialog-fade-out {
0% { opacity: 1 }
100% { opacity: 0 }
}`;
(function() {
var style = document.createElement('style');
style.innerHTML = animations;
headReady().then(() => {
document.head.appendChild(style);
});
/**
* Resolves a promise once document.head is ready.
*
* @private
*/
function headReady() {
return new Promise(resolve => {
if (document.head) { return resolve(); }
window.addEventListener('load', function fn() {
window.removeEventListener('load', fn);
resolve();
});
});
}
})();
// Register and expose the constructor
try {
module.exports = document.registerElement('gaia-dialog', { prototype: proto });
module.exports.proto = proto;
module.exports.extend = function() {
return mixin(Object.create(proto), extended);
};
} catch (e) {
if (e.name !== 'NotSupportedError') {
throw e;
}
}
var extended = {
onCreated: function() {
var self = this;
this.createShadowRoot().innerHTML = this.template;
this.els = { dialog: this.shadowRoot.querySelector('gaia-dialog') };
this.setupAnimationListeners();
this.styleHack();
this.els.dialog.addEventListener('opened', function() {
setAttribute.call(self, 'opened', '');
});
this.els.dialog.addEventListener('closed', function() {
removeAttribute.call(self, 'opened');
});
},
open: function(e) {
this.els.dialog.open(e);
},
close: function() {
this.els.dialog.close();
},
setAttribute: function(attr, value) {
this.els.dialog.setAttribute(attr, value);
setAttribute.call(this, attr, value);
},
removeAttribute: function(attr) {
this.els.dialog.removeAttribute(attr);
removeAttribute.call(this, attr);
}
};
function closest(selector, el, top) {
return el && el !== top
? (el.matches(selector) ? el : closest(el.parentNode))
: null;
}
function mixin(a, b) {
for (var key in b) { a[key] = b[key]; }
return a;
}
});})(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));

122
gaia/distros/spark/apps/studio/bower_components/gaia-dialog/index.html vendored Executable file
View file

@ -0,0 +1,122 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>&lt;gaia-dialog&gt;</title>
<meta name="description" content="gaia-dialog" />
<link rel="import" type="text/html" href="../src/gaia-dialog.html">
<link rel="stylesheet" type="text/css" href="bower_components/base/base.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">
<link rel="stylesheet" type="text/css" href="bower_components/gaia-icons/gaia-icons.css">
<script src="bower_components/gaia-theme/lib/gaia-theme-selector.js"></script>
<script src="bower_components/pressed/pressed.js"></script>
<script src="bower_components/gaia-icons/gaia-icons.js"></script>
<script src="bower_components/gaia-button/gaia-button.js"></script>
<script src="bower_components/gaia-text-input/gaia-text-input.js"></script>
<script src="gaia-dialog.js"></script>
<script src="gaia-dialog-alert.js"></script>
<script src="gaia-dialog-confirm.js"></script>
<script src="gaia-dialog-prompt.js"></script>
<script src="gaia-dialog-action.js"></script>
<script src="gaia-dialog-select.js"></script>
<script src="gaia-dialog-menu.js"></script>
<style>
body {
padding-top: 48px;
}
</style>
</head>
<body class="l-align-center">
<gaia-theme-selector></gaia-theme-selector>
<div id="buttons">
<div class="l-mb-small"><gaia-button data-for="gaia-dialog-alert">Alert</gaia-button></div>
<div class="l-mb-small"><gaia-button data-for="gaia-dialog-confirm">Confirm</gaia-button></div>
<div class="l-mb-small"><gaia-button data-for="gaia-dialog-prompt">Prompt</gaia-button></div>
<div class="l-mb-small"><gaia-button data-for="gaia-dialog-action">Action</gaia-button></div>
<div class="l-mb-small"><gaia-button data-for="gaia-dialog-select">Select</gaia-button></div>
<div class="l-mb-small"><gaia-button data-for="gaia-dialog-select[multiple]">Select Multiple</gaia-button></div>
<div class="l-mb-small"><gaia-button data-for="gaia-dialog-menu">Menu</gaia-button></div>
<div class="l-mb-small"><gaia-button data-for="#custom-dialog-1">Custom</gaia-button></div>
</div>
<div id="dialogs">
<gaia-dialog-alert>No SIM card is present</gaia-dialog-alert>
<gaia-dialog-confirm>Are you sure you want to delete this contact?</gaia-dialog-confirm>
<gaia-dialog-prompt>Device name</gaia-dialog-prompt>
<gaia-dialog-action>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu mollis tortor.</h1>
<button>Action 1</button>
<button>Action 2</button>
</gaia-dialog-action>
<gaia-dialog-select>
<h1>Ring tone</h1>
<li>Classic prism</li>
<li>Wallphone</li>
<li>Disco drive</li>
<li>Touchmatic</li>
<li>Classic courier</li>
<li>Hacker</li>
</gaia-dialog-select>
<gaia-dialog-select multiple>
<h1>Ring tone</h1>
<li>Classic prism</li>
<li>Wallphone</li>
<li>Disco drive</li>
<li>Touchmatic</li>
<li>Classic courier</li>
<li>Hacker</li>
</gaia-dialog-select>
<gaia-dialog-menu>
<button data-icon="firefox">Open in new window</button>
<button data-icon="firefox">Add to Home Screen</button>
<button data-icon="firefox">Share link</button>
<button data-icon="firefox">Settings</button>
</gaia-dialog-menu>
<gaia-dialog id="custom-dialog-1">
<section>
<h1>Application Download</h1>
<p>Do you want to download and install this application?</p>
</section>
<fieldset>
<button>Cancel</button>
<button>Action</button>
</fieldset>
</gaia-dialog>
<gaia-dialog>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<hr></hr>
<p>Lorem ipsum dolor sit amet, consecutor adipisicing elit, sed do eiusod tempor incidenti ut la et dolore magna...</p>
<button>Action</button>
<button>Cancel</button>
</gaia-dialog>
<gaia-dialog>
<h1>Confirmation</h1>
<p>Lorem ipsum dolor sit amet, consecutor adipisicing elit, sed do eiusod tempor incidenti ut la et dolore magna...</p>
<hr>
<p>Lorem ipsum dolor sit amet, consecutor adipisicing elit, sed do eiusod tempor incidenti ut la et dolore magna...</p>
<button>Action</button>
<button>Action</button>
<button>Cancel</button>
</gaia-dialog>
</div>
<script>
var buttons = document.querySelectorAll('gaia-button');
[].forEach.call(buttons, function(button) {
button.addEventListener('click', function(e) {
var dialog = document.querySelector(button.dataset.for);
dialog.open(e);
});
});
</script>
</body>
</html>

134
gaia/distros/spark/apps/studio/bower_components/gaia-dialog/src/gaia-dialog.html vendored Executable file
View file

@ -0,0 +1,134 @@
<template id="template">
<style>
gaia-dialog.host {
position: absolute;
top: 0;
left: 0;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 16px;
font-size: 16px;
font-style: italic;
color: #666;
}
.inner {
max-height: 100%;
overflow: auto;
background: #F4F4F4;
}
.content > *:not(section) {
margin: 0 16px 16px;
}
.content > :first-child {
margin-top: 16px;
}
.content h1,
.content h2 {
text-align: center;
font-weight: lighter;
color: #858585;
}
.content h1 {
font-size: 1.6em;
}
.content h2 {
font-size: 1em;
}
.content h1 + h2 {
margin-top: -16px;
}
.content hr {
height: 1px;
border: 0;
background: #E7E7E7;
}
.content button {
box-sizing: border-box;
position: relative;
display: block;
width: 100%;
border: none;
outline: 0;
padding: 16px;
margin: 0;
background: #fff;
font: inherit;
color: #1EADCB;
}
.content button:after {
content: "";
display: block;
position: absolute;
right: 0;
left: 0;
top: 0;
margin: 0 8px;
height: 2px;
background: #f4f4f4
}
.content button:first-child:after {
display: none;
}
.content section {
display: flex;
overflow: hidden;
}
.content section > button {
flex: 1;
}
.content section > button:after {
width: 2px;
height: auto;
left: 0;
bottom: 0;
right: auto;
margin: 8px 0;
}
</style>
<div class="inner">
<content></content>
</div>
</template>
<script>
var proto = Object.create(HTMLElement.prototype);
var thisDoc = document.currentScript.ownerDocument;
var template = thisDoc.getElementById('template');
proto.createdCallback = function() {
var root = this.createShadowRoot();
var html = template.content.cloneNode(true);
root.appendChild(html);
this.configureStyle();
};
proto.configureStyle = function() {
var style = this.shadowRoot.querySelector('style').cloneNode(true);
this.classList.add('content', 'host');
style.setAttribute('scoped', '');
this.appendChild(style);
};
document.registerElement('gaia-dialog', { prototype: proto });
</script>