Added Polymer

This commit is contained in:
Thaum
2014-11-26 10:18:35 +00:00
parent 5eea4714b2
commit 3408ba9e8d
1210 changed files with 394645 additions and 47 deletions

View File

@@ -0,0 +1,21 @@
{
"name": "core-collapse",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0"
},
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#^1.1.0"
},
"version": "0.5.1",
"homepage": "https://github.com/Polymer/core-collapse",
"_release": "0.5.1",
"_resolution": {
"type": "version",
"tag": "0.5.1",
"commit": "e07e13407280eb551f41c0ea0e702d1f11c6ca39"
},
"_source": "git://github.com/Polymer/core-collapse.git",
"_target": "^0.5.0",
"_originalSource": "Polymer/core-collapse"
}

View File

@@ -0,0 +1,4 @@
core-collapse
=============
See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-collapse) for more information.

View File

@@ -0,0 +1,11 @@
{
"name": "core-collapse",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0"
},
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#^1.1.0"
},
"version": "0.5.1"
}

View File

@@ -0,0 +1,16 @@
/*
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
html /deep/ core-collapse {
display: block;
}
html /deep/ .core-collapse-closed {
display: none;
}

View File

@@ -0,0 +1,298 @@
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
`core-collapse` creates a collapsible block of content. By default, the content
will be collapsed. Use `opened` or `toggle()` to show/hide the content.
<button on-click="{{toggle}}">toggle collapse</button>
<core-collapse id="collapse">
Content goes here...
</core-collapse>
...
toggle: function() {
this.$.collapse.toggle();
}
`core-collapse` adjusts the height/width of the collapsible element to show/hide
the content. So avoid putting padding/margin/border on the collapsible directly,
and instead put a div inside and style that.
<style>
.collapse-content {
padding: 15px;
border: 1px solid #dedede;
}
</style>
<core-collapse>
<div class="collapse-content">
Content goes here...
</div>
</core-collapse>
@group Polymer Core Elements
@element core-collapse
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="stylesheet" href="core-collapse.css" shim-shadowdom>
<polymer-element name="core-collapse" attributes="target horizontal opened duration fixedSize allowOverflow">
<template>
<content></content>
</template>
<script>
Polymer('core-collapse', {
/**
* Fired when the `core-collapse`'s `opened` property changes.
*
* @event core-collapse-open
*/
/**
* Fired when the target element has been resized as a result of the opened
* state changing.
*
* @event core-resize
*/
/**
* The target element that will be opened when the `core-collapse` is
* opened. If unspecified, the `core-collapse` itself is the target.
*
* @attribute target
* @type object
* @default null
*/
target: null,
/**
* If true, the orientation is horizontal; otherwise is vertical.
*
* @attribute horizontal
* @type boolean
* @default false
*/
horizontal: false,
/**
* Set opened to true to show the collapse element and to false to hide it.
*
* @attribute opened
* @type boolean
* @default false
*/
opened: false,
/**
* Collapsing/expanding animation duration in second.
*
* @attribute duration
* @type number
* @default 0.33
*/
duration: 0.33,
/**
* If true, the size of the target element is fixed and is set
* on the element. Otherwise it will try to
* use auto to determine the natural size to use
* for collapsing/expanding.
*
* @attribute fixedSize
* @type boolean
* @default false
*/
fixedSize: false,
/**
* By default the collapsible element is set to overflow hidden. This helps
* avoid element bleeding outside the region and provides consistent overflow
* style across opened and closed states. Set this property to true to allow
* the collapsible element to overflow when it's opened.
*
* @attribute allowOverflow
* @type boolean
* @default false
*/
allowOverflow: false,
created: function() {
this.transitionEndListener = this.transitionEnd.bind(this);
},
ready: function() {
this.target = this.target || this;
},
domReady: function() {
this.async(function() {
this.afterInitialUpdate = true;
});
},
detached: function() {
if (this.target) {
this.removeListeners(this.target);
}
},
targetChanged: function(old) {
if (old) {
this.removeListeners(old);
}
if (!this.target) {
return;
}
this.isTargetReady = !!this.target;
this.classList.toggle('core-collapse-closed', this.target !== this);
this.toggleOpenedStyle(false);
this.horizontalChanged();
this.addListeners(this.target);
// set core-collapse-closed class initially to hide the target
this.toggleClosedClass(true);
this.update();
},
addListeners: function(node) {
node.addEventListener('transitionend', this.transitionEndListener);
},
removeListeners: function(node) {
node.removeEventListener('transitionend', this.transitionEndListener);
},
horizontalChanged: function() {
this.dimension = this.horizontal ? 'width' : 'height';
},
openedChanged: function() {
this.update();
this.fire('core-collapse-open', this.opened);
},
/**
* Toggle the opened state.
*
* @method toggle
*/
toggle: function() {
this.opened = !this.opened;
},
setTransitionDuration: function(duration) {
var s = this.target.style;
s.transition = duration ? (this.dimension + ' ' + duration + 's') : null;
if (duration === 0) {
this.async('transitionEnd');
}
},
transitionEnd: function() {
if (this.opened && !this.fixedSize) {
this.updateSize('auto', null);
}
this.setTransitionDuration(null);
this.toggleOpenedStyle(this.opened);
this.toggleClosedClass(!this.opened);
this.asyncFire('core-resize', null, this.target);
},
toggleClosedClass: function(closed) {
this.hasClosedClass = closed;
this.target.classList.toggle('core-collapse-closed', closed);
},
toggleOpenedStyle: function(opened) {
this.target.style.overflow = this.allowOverflow && opened ? '' : 'hidden';
},
updateSize: function(size, duration, forceEnd) {
this.setTransitionDuration(duration);
this.calcSize();
var s = this.target.style;
var nochange = s[this.dimension] === size;
s[this.dimension] = size;
// transitonEnd will not be called if the size has not changed
if (forceEnd && nochange) {
this.transitionEnd();
}
},
update: function() {
if (!this.target) {
return;
}
if (!this.isTargetReady) {
this.targetChanged();
}
this.horizontalChanged();
this[this.opened ? 'show' : 'hide']();
},
calcSize: function() {
return this.target.getBoundingClientRect()[this.dimension] + 'px';
},
getComputedSize: function() {
return getComputedStyle(this.target)[this.dimension];
},
show: function() {
this.toggleClosedClass(false);
// for initial update, skip the expanding animation to optimize
// performance e.g. skip calcSize
if (!this.afterInitialUpdate) {
this.transitionEnd();
return;
}
if (!this.fixedSize) {
this.updateSize('auto', null);
var s = this.calcSize();
if (s == '0px') {
this.transitionEnd();
return;
}
this.updateSize(0, null);
}
this.async(function() {
this.updateSize(this.size || s, this.duration, true);
});
},
hide: function() {
this.toggleOpenedStyle(false);
// don't need to do anything if it's already hidden
if (this.hasClosedClass && !this.fixedSize) {
return;
}
if (this.fixedSize) {
// save the size before hiding it
this.size = this.getComputedSize();
} else {
this.updateSize(this.calcSize(), null);
}
this.async(function() {
this.updateSize(0, this.duration);
});
}
});
</script>
</polymer-element>

View File

@@ -0,0 +1,79 @@
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html>
<head>
<title>core-collapse</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="core-collapse.html">
<style>
body {
font-family: sans-serif;
margin: 8px 24px;
}
.heading {
padding: 10px 15px;
background-color: #f3f3f3;
border: 1px solid #dedede;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 18px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.content {
padding: 15px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
</style>
</head>
<body unresolved>
<div class="heading" onclick="document.querySelector('#collapse1').toggle();">Collapse #1</div>
<core-collapse id="collapse1">
<div class="content">
<div>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.</div>
</div>
</core-collapse>
<br>
<div class="heading" onclick="document.querySelector('#collapse2').toggle();">Collapse #2</div>
<core-collapse id="collapse2">
<div class="content">
<div>Pro saepe pertinax ei, ad pri animal labores suscipiantur. Modus commodo minimum eum te, vero utinam assueverit per eu, zril oportere suscipiantur pri te. Partem percipitur deterruisset ad sea, at eam suas luptatum dissentiunt. No error alienum pro, erant senserit ex mei, pri semper alterum no. Ut habemus menandri vulputate mea. Feugiat verterem ut sed. Dolores maiestatis id per. Pro saepe pertinax ei, ad pri animal labores suscipiantur. Modus commodo minimum eum te, vero utinam assueverit per eu, zril oportere suscipiantur pri te. Partem percipitur deterruisset ad sea, at eam suas luptatum dissentiunt. No error alienum pro, erant senserit ex mei, pri semper alterum no. Ut habemus menandri vulputate mea. Feugiat verterem ut sed. Dolores maiestatis id per.</div>
<br>
<div class="heading" onclick="document.querySelector('#collapse3').toggle();">Collapse #3</div>
<core-collapse id="collapse3">
<div class="content">
<div>Iisque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior. Id nam odio natum malorum, tibique copiosae expetenda mel ea. Mea melius malorum ut. Ut nec tollit vocent timeam. Facer nonumy numquam id his, munere salutatus consequuntur eum et, eum cotidieque definitionem signiferumque id. Ei oblique graecis patrioque vis, et probatus dignissim inciderint vel. Sed id paulo erroribus, autem semper accusamus in mel. Iisque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior. Id nam odio natum malorum, tibique copiosae expetenda mel ea. Mea melius malorum ut. Ut nec tollit vocent timeam. Facer nonumy numquam id his, munere salutatus consequuntur eum et, eum cotidieque definitionem signiferumque id. Ei oblique graecis patrioque vis, et probatus dignissim inciderint vel. Sed id paulo erroribus, autem semper accusamus in mel.</div>
</div>
</core-collapse>
</div>
</core-collapse>
</body>
</html>

View File

@@ -0,0 +1,22 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-component-page/core-component-page.html">
</head>
<body unresolved>
<core-component-page></core-component-page>
</body>
</html>

View File

@@ -0,0 +1,85 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<title>core-collapse-basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../core-collapse.html">
</head>
<body>
<core-collapse id="collapse" duration="0.1" opened>
<div>
Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem
</div>
</core-collapse>
<script>
function getCollapseComputedStyle() {
var c = document.querySelector('#collapse');
return getComputedStyle(c);
}
var collapse = document.querySelector('#collapse');
var delay = 200;
var collapseHeight;
suite('basic', function() {
test('verify attribute', function() {
assert.equal(collapse.opened, true);
});
test('verify height', function(done) {
Polymer.flush();
setTimeout(function() {
collapseHeight = getCollapseComputedStyle().height;
// verify height
assert.notEqual(collapseHeight, '0px');
done();
}, delay);
});
test('test opened: false', function(done) {
collapse.opened = false;
Polymer.flush();
setTimeout(function() {
var h = getCollapseComputedStyle().height;
// verify height is 0px
assert.equal(h, '0px');
done();
}, delay);
});
test('test opened: true', function(done) {
collapse.opened = true;
Polymer.flush();
setTimeout(function() {
var h = getCollapseComputedStyle().height;
// verify height
assert.equal(h, collapseHeight);
done();
}, delay);
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,24 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html'
]);
</script>
</body>
</html>