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
118
gaia/shared/elements/gaia_drawer/examples/index.html
Executable file
118
gaia/shared/elements/gaia_drawer/examples/index.html
Executable file
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>GaiaDrawer Demo</title>
|
||||
<meta name="description" content="Demo app for gaia-drawer" />
|
||||
<style type="text/css">
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 16px sans-serif;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 400px;
|
||||
border: solid 1px #eee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.half {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.third {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
gaia-drawer {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Demo Dependencies -->
|
||||
<link rel="stylesheet" type="text/css" href="../../../style/lists.css">
|
||||
<script>window.GaiaHeaderBaseurl = '../../gaia_header/';</script>
|
||||
<script src="../../gaia_header/script.js"></script>
|
||||
|
||||
<!-- Component -->
|
||||
<script src="../../../js/component_utils.js"></script>
|
||||
<script>window.GaiaDrawerBaseurl = '../';</script>
|
||||
<script src="../script.js"></script>
|
||||
</head>
|
||||
<body role="application">
|
||||
<div class="slot third">
|
||||
<gaia-header action="menu"><h1>Title</h1></gaia-header>
|
||||
<gaia-drawer open>
|
||||
<section data-type="list">
|
||||
<ul>
|
||||
<li><p>List Item 1</p></li>
|
||||
<li><p>List Item 2</p></li>
|
||||
<li><p>List Item 3</p></li>
|
||||
</ul>
|
||||
</section>
|
||||
</gaia-drawer>
|
||||
</div>
|
||||
<div class="slot third">
|
||||
<gaia-header action="menu"><h1>Title</h1></gaia-header>
|
||||
<gaia-drawer>
|
||||
<section data-type="list">
|
||||
<ul>
|
||||
<li><p>List Item 1</p></li>
|
||||
<li><p>List Item 2</p></li>
|
||||
<li><p>List Item 3</p></li>
|
||||
</ul>
|
||||
</section>
|
||||
</gaia-drawer>
|
||||
</div>
|
||||
<div class="slot third">
|
||||
<gaia-header action="menu"><h1>Title</h1></gaia-header>
|
||||
<gaia-drawer>
|
||||
<section data-type="list">
|
||||
<ul>
|
||||
<li><p>List Item 1</p></li>
|
||||
<li><p>List Item 2</p></li>
|
||||
<li><p>List Item 3</p></li>
|
||||
<li><p>List Item 1</p></li>
|
||||
<li><p>List Item 2</p></li>
|
||||
<li><p>List Item 3</p></li>
|
||||
<li><p>List Item 1</p></li>
|
||||
<li><p>List Item 2</p></li>
|
||||
<li><p>List Item 3</p></li>
|
||||
</ul>
|
||||
</section>
|
||||
</gaia-drawer>
|
||||
</div>
|
||||
<div class="half"></div>
|
||||
<div class="half"></div>
|
||||
<script>
|
||||
|
||||
[].forEach.call(document.querySelectorAll('.slot'), function(slot) {
|
||||
var header = slot.querySelector('gaia-header');
|
||||
var drawer = slot.querySelector('gaia-drawer');
|
||||
header.addEventListener('action', function() {
|
||||
drawer.toggle();
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('WebComponentsReady', function() {
|
||||
console.log('WebComponentsReady');
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
138
gaia/shared/elements/gaia_drawer/script.js
Executable file
138
gaia/shared/elements/gaia_drawer/script.js
Executable file
|
|
@ -0,0 +1,138 @@
|
|||
window.GaiaDrawer = (function(win) {
|
||||
/*global ComponentUtils*/
|
||||
/*jshint maxlen:false*/
|
||||
'use strict';
|
||||
|
||||
// Extend from the HTMLElement prototype
|
||||
var proto = Object.create(HTMLElement.prototype);
|
||||
|
||||
// Allow baseurl to be overridden (used for demo page)
|
||||
var baseurl = window.GaiaDrawerBaseurl ||
|
||||
'/shared/elements/gaia_drawer/';
|
||||
|
||||
/**
|
||||
* Runs when an instance of the
|
||||
* element is first created.
|
||||
*
|
||||
* When use this moment to create the
|
||||
* shadow-dom, inject our template
|
||||
* content, setup event listeners
|
||||
* and set the draw state to match
|
||||
* the initial `open` attribute.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
proto.createdCallback = function() {
|
||||
var shadow = this.createShadowRoot();
|
||||
this._template = template.content.cloneNode(true);
|
||||
|
||||
// Fetch some els
|
||||
this._els = {};
|
||||
this._els.background = this._template.getElementById('background');
|
||||
this._els.content = this._template.getElementById('content');
|
||||
this._els.inner = this._template.getElementById('inner');
|
||||
|
||||
this._attachEvents();
|
||||
this.toggle(this.hasAttribute('open'));
|
||||
|
||||
// Put content in the shadow-dom
|
||||
shadow.appendChild(this._template);
|
||||
ComponentUtils.style.call(this, baseurl);
|
||||
};
|
||||
|
||||
/**
|
||||
* Runs when any attribute changes
|
||||
* on the element.
|
||||
*
|
||||
* We only support the `open` attribute,
|
||||
* so we ignore all others. We then toggle,
|
||||
* opening the drawer for all values other
|
||||
* than `null` (which means the attribute
|
||||
* was removed).
|
||||
*
|
||||
* @param {String} attr
|
||||
* @param {String|null} oldVal
|
||||
* @param {String|null} newVal
|
||||
* @private
|
||||
*/
|
||||
proto.attributeChangedCallback = function(attr, oldVal, newVal) {
|
||||
if (attr !== 'open') { return; }
|
||||
this.toggle(newVal !== null);
|
||||
};
|
||||
|
||||
proto._attachEvents = function() {
|
||||
this._els.background.addEventListener('click', this.close.bind(this));
|
||||
this._els.content.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggle the drawer open/closed.
|
||||
*
|
||||
* If a value is passed, we ignore the
|
||||
* current `open` value and just derive
|
||||
* the state from the value given (similar
|
||||
* to how `classList.toggle` works).
|
||||
*
|
||||
* @param {Boolean} value
|
||||
* @public
|
||||
*/
|
||||
proto.toggle = function(value) {
|
||||
value = arguments.length ? value : !this.hasAttribute('open');
|
||||
if (value) { this.open(); }
|
||||
else { this.close(); }
|
||||
};
|
||||
|
||||
/**
|
||||
* Open the drawer.
|
||||
*
|
||||
* We have to also duplicate the
|
||||
* attribute on the `.inner` element
|
||||
* inside the shadow-root as we are
|
||||
* currently missing the `:host`
|
||||
* selector from the platform.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
proto.open = function() {
|
||||
this.setAttribute('open', '');
|
||||
this._els.inner.setAttribute('open', '');
|
||||
};
|
||||
|
||||
/**
|
||||
* Close the drawer.
|
||||
*
|
||||
* We have to also duplicate the
|
||||
* attribute on the `.inner` element
|
||||
* inside the shadow-root as we are
|
||||
* currently missing the `:host`
|
||||
* selector from the platform.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
proto.close = function() {
|
||||
this.removeAttribute('open');
|
||||
this._els.inner.removeAttribute('open');
|
||||
};
|
||||
|
||||
// HACK: Create a <template> in memory at runtime.
|
||||
// When the custom-element is created we clone
|
||||
// this template and inject into the shadow-root.
|
||||
// Prior to this we would have had to copy/paste
|
||||
// the template into the <head> of every app that
|
||||
// wanted to use <gaia-switch>, this would make
|
||||
// markup changes complicated, and could lead to
|
||||
// things getting out of sync. This is a short-term
|
||||
// hack until we can import entire custom-elements
|
||||
// using HTML Imports (bug 877072).
|
||||
// var stylesheet = baseurl + 'style.css';
|
||||
var template = document.createElement('template');
|
||||
template.innerHTML = `<div class="inner" id="inner">
|
||||
<div class="background" id="background"></div>
|
||||
<div class="content" id="content"><content></content></div>
|
||||
</div>`;
|
||||
|
||||
// Register and return the constructor
|
||||
return document.registerElement('gaia-drawer', { prototype: proto });
|
||||
})(window);
|
||||
69
gaia/shared/elements/gaia_drawer/style.css
Executable file
69
gaia/shared/elements/gaia_drawer/style.css
Executable file
|
|
@ -0,0 +1,69 @@
|
|||
|
||||
/** Gaia Drawer
|
||||
---------------------------------------------------------*/
|
||||
|
||||
gaia-drawer {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/** Inner
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
/** Content
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
min-height: calc(100% - 200px);
|
||||
max-height: calc(100% - 95px);
|
||||
overflow: auto;
|
||||
color: #5F5F5F;
|
||||
background-color: #F4F4F4;
|
||||
transform: translateY(-100%);
|
||||
transition: transform 300ms ease, visibility 300ms;
|
||||
will-change: transform;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* open
|
||||
*/
|
||||
|
||||
[open] .content {
|
||||
transform: translateY(0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/** Background
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.background {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.6);
|
||||
transition: opacity 240ms ease;
|
||||
will-change: opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* open
|
||||
*/
|
||||
|
||||
[open] .background {
|
||||
opacity: 1;
|
||||
}
|
||||
Loading…
Reference in a new issue