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,18 @@
{
"name": "core-splitter",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0"
},
"version": "0.5.1",
"homepage": "https://github.com/Polymer/core-splitter",
"_release": "0.5.1",
"_resolution": {
"type": "version",
"tag": "0.5.1",
"commit": "00e00c3e2959b16818de25c9d10c6865b4efc581"
},
"_source": "git://github.com/Polymer/core-splitter.git",
"_target": "^0.5.0",
"_originalSource": "Polymer/core-splitter"
}

View File

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

View File

@@ -0,0 +1,8 @@
{
"name": "core-splitter",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0"
},
"version": "0.5.1"
}

View File

@@ -0,0 +1,27 @@
/*
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
*/
:host {
display: block;
width: 12px;
background: #efefef url(handle.svg) no-repeat center;
box-shadow: inset 0 0 2px 1px #ccc;
cursor: col-resize;
}
:host(.horizontal) {
width: auto;
height: 12px;
cursor: row-resize;
background-image: url(handle-h.svg);
}
:host(:hover, :active) {
background-color: #ddd;
}

View File

@@ -0,0 +1,148 @@
<!--
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-splitter` provides a split bar and dragging on the split bar
will resize the sibling element. Use its `direction` property to indicate
which sibling element to be resized and the orientation. Usually you would want
to use `core-splitter` along with flex layout so that the other sibling
element can be _flexible_.
Example:
<div horizontal layout>
<div>left</div>
<core-splitter direction="left"></core-splitter>
<div flex>right</div>
</div>
In the above example, dragging the splitter will resize the _left_ element. And
since the parent container is a flexbox and the _right_ element has
`flex`, the _right_ element will be auto-resized.
For horizontal splitter set `direction` to `up` or `down`.
Example:
<div vertical layout>
<div>top</div>
<core-splitter direction="up"></core-splitter>
<div flex>bottom</div>
</div>
@group Polymer Core Elements
@element core-splitter
@homepage github.io
-->
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="core-splitter" attributes="direction locked minSize allowOverflow"
on-trackstart="{{trackStart}}" on-track="{{track}}" on-down="{{preventSelection}}">
<template>
<link rel="stylesheet" href="core-splitter.css">
</template>
<script>
Polymer('core-splitter', {
/**
* Possible values are `left`, `right`, `up` and `down`.
*
* @attribute direction
* @type string
* @default 'left'
*/
direction: 'left',
/**
* Minimum width to which the splitter target can be sized, e.g.
* `minSize="100px"`
*
* @attribute minSize
* @type string
* @default ''
*/
minSize: '',
/**
* Locks the split bar so it can't be dragged.
*
* @attribute locked
* @type boolean
* @default false
*/
locked: false,
/**
* By default the parent and siblings of the splitter are set to overflow hidden. This helps
* avoid elements bleeding outside the splitter regions. Set this property to true to allow
* these elements to overflow.
*
* @attribute allowOverflow
* @type boolean
* @default false
*/
allowOverflow: false,
ready: function() {
this.directionChanged();
},
domReady: function() {
if (!this.allowOverflow) {
this.parentNode.style.overflow = this.nextElementSibling.style.overflow =
this.previousElementSibling.style.overflow = 'hidden';
}
},
directionChanged: function() {
this.isNext = this.direction === 'right' || this.direction === 'down';
this.horizontal = this.direction === 'up' || this.direction === 'down';
this.update();
},
update: function() {
this.target = this.isNext ? this.nextElementSibling : this.previousElementSibling;
this.dimension = this.horizontal ? 'height' : 'width';
this.classList.toggle('horizontal', this.horizontal);
},
targetChanged: function(old) {
if (old) {
old.style[old.__splitterMinSize] = '';
}
var min = this.target.__splitterMinSize = this.horizontal ? 'minHeight' : 'minWidth';
this.target.style[min] = this.minSize;
},
trackStart: function() {
this.update();
this.size = parseInt(getComputedStyle(this.target)[this.dimension]);
},
track: function(e) {
if (this.locked) {
return;
}
var d = e[this.horizontal ? 'dy' : 'dx'];
this.target.style[this.dimension] =
this.size + (this.isNext ? -d : d) + 'px';
},
preventSelection: function(e) {
e.preventDefault();
}
});
</script>
</polymer-element>

View File

@@ -0,0 +1,76 @@
<!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>
<title>core-splitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="core-splitter.html">
<style>
.container {
height: 240px;
border: 4px solid #aaa;
}
#box1, #box3, #box5, #box6 {
width: 100px;
}
#box2, #box4 {
height: 40px;
}
</style>
</head>
<body unresolved>
<div class="container" horizontal layout>
<div>left (min: 128px)</div>
<core-splitter direction="left" minSize="128px"></core-splitter>
<div flex>right</div>
</div>
<br>
<div class="container" vertical layout>
<div id="box2">top</div>
<core-splitter direction="up"></core-splitter>
<div flex>bottom</div>
</div>
<br>
<div class="container" horizontal layout>
<div id="box3">1</div>
<core-splitter direction="left"></core-splitter>
<div flex vertical layout>
<div id="box4">2</div>
<core-splitter direction="up"></core-splitter>
<div flex>3</div>
</div>
</div>
<br>
<div class="container" horizontal layout>
<div id="box5">left</div>
<core-splitter direction="left"></core-splitter>
<div flex>center</div>
<core-splitter direction="right"></core-splitter>
<div id="box6">right</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<g id="more-horiz"><path d="M6,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S7.1,10,6,10z M18,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S19.1,10,18,10z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z"/></g>
</svg>

After

Width:  |  Height:  |  Size: 299 B

View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<g id="more-vert"><path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z"/></g>
</svg>

After

Width:  |  Height:  |  Size: 299 B

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>