Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
24
gaia/distros/spark/apps/directory/components/gaia-tabs/bower.json
Executable file
24
gaia/distros/spark/apps/directory/components/gaia-tabs/bower.json
Executable file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "gaia-tabs",
|
||||
"version": "0.0.1",
|
||||
"authors": [
|
||||
"Wilson Page <wilsonpage@me.com>"
|
||||
],
|
||||
"main": "gaia-tabs.js",
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"examples",
|
||||
"test",
|
||||
"tests",
|
||||
"README.md"
|
||||
],
|
||||
"dependencies": {
|
||||
"gaia-component": "gaia-components/gaia-component#~0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"base": "gaia-components/base"
|
||||
}
|
||||
}
|
||||
235
gaia/distros/spark/apps/directory/components/gaia-tabs/gaia-tabs.js
Executable file
235
gaia/distros/spark/apps/directory/components/gaia-tabs/gaia-tabs.js
Executable file
|
|
@ -0,0 +1,235 @@
|
|||
;(function(umd){umd(function(require,exports,module){
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Dependencies
|
||||
*/
|
||||
|
||||
var component = require('gaia-component');
|
||||
|
||||
/**
|
||||
* Exports
|
||||
*/
|
||||
|
||||
module.exports = component.register('gaia-tabs', {
|
||||
|
||||
/**
|
||||
* Runs on creation
|
||||
*
|
||||
* The initial value of the `select`
|
||||
* attribute is used to select a tab.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
created: function() {
|
||||
this.setupShadowRoot();
|
||||
|
||||
this.els = {
|
||||
marker: this.shadowRoot.querySelector('.marker')
|
||||
};
|
||||
|
||||
this.makeAccessible();
|
||||
this.addEventListener('click', this.onClick);
|
||||
this.select(this.getAttribute('selected'));
|
||||
this.setupMarker();
|
||||
},
|
||||
|
||||
getLength: function() {
|
||||
var style = this.querySelector('style') ? 1 : 0;
|
||||
return this.children.length - style;
|
||||
},
|
||||
|
||||
setupMarker: function() {
|
||||
this.els.marker.style.width = (1 / this.getLength() * 100) + '%';
|
||||
},
|
||||
|
||||
setMarkerPosition: function(index) {
|
||||
index = document.dir === 'rtl' ? this.getLength() - index - 1 : index;
|
||||
this.els.marker.style.transform = 'translateX(' + index * 100 + '%)';
|
||||
},
|
||||
|
||||
/**
|
||||
* Add necessary attributes to
|
||||
* improve accessibility.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
makeAccessible: function() {
|
||||
this.setAttribute('role', 'tablist');
|
||||
for (var el = this.firstElementChild; el; el = el.nextElementSibling) {
|
||||
el.setAttribute('role', 'tab');
|
||||
el.tabIndex = 0;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Walks up the DOM from the `event.target`
|
||||
* until it finds an immediate child of the
|
||||
* element, then selects the index
|
||||
* of that element.
|
||||
*
|
||||
* @param {Event} e
|
||||
* @private
|
||||
*/
|
||||
onClick: function(e) {
|
||||
var el = e.target;
|
||||
var i;
|
||||
while (el) {
|
||||
i = [].indexOf.call(this.children, el);
|
||||
if (i > -1) { return this.select(i); }
|
||||
el = el.parentNode;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Select a tab by index.
|
||||
*
|
||||
* @param {Number} index
|
||||
* @public
|
||||
*/
|
||||
select: function(index) {
|
||||
if (index === null) { return; }
|
||||
|
||||
// Make sure it's a number
|
||||
index = Number(index);
|
||||
|
||||
var el = this.children[index];
|
||||
this.deselect(this.selected);
|
||||
this.setMarkerPosition(index);
|
||||
this.selectedChild = el;
|
||||
this.selected = index;
|
||||
|
||||
el.setAttribute('aria-selected', 'true');
|
||||
el.classList.add('selected');
|
||||
|
||||
var e = new CustomEvent('change');
|
||||
setTimeout(this.dispatchEvent.bind(this, e));
|
||||
},
|
||||
|
||||
/**
|
||||
* Deselect a tab by index.
|
||||
* @param {Number} index
|
||||
* @public
|
||||
*/
|
||||
deselect: function(index) {
|
||||
var el = this.children[index];
|
||||
if (!el) { return; }
|
||||
el.removeAttribute('aria-selected');
|
||||
el.classList.remove('selected');
|
||||
if (this.current == el) {
|
||||
this.selectedChild = null;
|
||||
this.selected = null;
|
||||
}
|
||||
},
|
||||
|
||||
template: `
|
||||
<div class="inner">
|
||||
<content></content>
|
||||
<div class="marker"></div>
|
||||
</div>
|
||||
<style>
|
||||
|
||||
/** Host
|
||||
---------------------------------------------------------*/
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-top: 1px solid;
|
||||
overflow: hidden;
|
||||
|
||||
border-color:
|
||||
var(--border-color,
|
||||
var(--background-plus))
|
||||
}
|
||||
|
||||
/** Inner
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
/** Direct Children
|
||||
---------------------------------------------------------*/
|
||||
|
||||
::content > * {
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: 45px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
flex: 1;
|
||||
|
||||
font-size: 17px;
|
||||
font-style: italic;
|
||||
font-weight: lighter;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
transition:
|
||||
color,
|
||||
opacity 0.2s;
|
||||
transition-delay: 200ms;
|
||||
}
|
||||
|
||||
/**
|
||||
* :active
|
||||
*/
|
||||
|
||||
::content > :active {
|
||||
transition: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/**
|
||||
* .selected
|
||||
*/
|
||||
|
||||
::content > .selected {
|
||||
color: var(--highlight-color, #000);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* [disabled]
|
||||
*/
|
||||
|
||||
::content > [disabled] {
|
||||
transition: none;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/** Style
|
||||
---------------------------------------------------------*/
|
||||
|
||||
::content style {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/** Marker
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.marker {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
height: 3px;
|
||||
background: var(--highlight-color, #000);
|
||||
transition: transform 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
||||
}
|
||||
|
||||
</style>
|
||||
`
|
||||
});
|
||||
|
||||
});})(typeof define=='function'&&define.amd?define
|
||||
:(function(n,w){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-tabs',this));
|
||||
35
gaia/distros/spark/apps/directory/components/gaia-tabs/index.html
Executable file
35
gaia/distros/spark/apps/directory/components/gaia-tabs/index.html
Executable file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title><gaia-tabs></title>
|
||||
<meta name="description" content="gaia-tabs example" />
|
||||
<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">
|
||||
<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-tabs.js"></script>
|
||||
<style type="text/css">
|
||||
|
||||
body {
|
||||
padding: 16px;
|
||||
padding-top: 48px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<gaia-theme-selector></gaia-theme-selector>
|
||||
<h1 class="large l-align-center l-mb-mega"><gaia-tabs></h1>
|
||||
<section>
|
||||
<gaia-tabs selected="2">
|
||||
<a href="#" class="icon-dialer">Item 1</a>
|
||||
<a href="#" class="icon-contacts">Item 2</a>
|
||||
<a href="#" class="icon-call-log">Item 3</a>
|
||||
<a href="#" disabled="">Item 4</a>
|
||||
<a href="#">Item 5</a>
|
||||
</gaia-tabs>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
26
gaia/distros/spark/apps/directory/components/gaia-tabs/package.json
Executable file
26
gaia/distros/spark/apps/directory/components/gaia-tabs/package.json
Executable file
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"name": "gaia-tabs",
|
||||
"version": "0.1.0",
|
||||
"main": "gaia-tabs.js",
|
||||
"directories": {
|
||||
"example": "examples",
|
||||
"test": "test"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
"test": "gaia-test-lint && gaia-test-unit"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/gaia-components/gaia-tabs.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/gaia-components/gaia-tabs/issues"
|
||||
},
|
||||
"homepage": "https://github.com/gaia-components/gaia-tabs",
|
||||
"dependencies": {
|
||||
"gaia-test": "git://github.com/gaia-components/gaia-test"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue