Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
Merge pull request #18 from Polymer/master
Browse files Browse the repository at this point in the history 
8/8 master -> stable
  • Loading branch information
@dfreedm
dfreedm committed Aug 8, 2013
2 parents 30b28ad + 6b08976 commit 9497cc1
Show file tree
Hide file tree
Showing 12 changed files with 175 additions and 81 deletions.
29 changes: 20 additions & 9 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,33 @@ Other projects require a similar agreement: jQuery, Firefox, Apache, Node, and m

Here's an easy guide that should get you up and running:

1. Fork the project on github and pull down your copy.
> replace the {{ username }} with your username and {{ repository }} with the repository name
1. Fork the project on github
2. Pull down the polymer-all project.

git clone [email protected]:{{ username }}/{{ repository }}.git --recursive
git clone [email protected]:Polymer/polymer-all --recursive

Note the `--recursive`. This is necessary for submodules to initialize properly. If you don't do a recursive clone, you'll have to init them manually:

git submodule init
git submodule update

2. Development happens on the `master` branch. Get yourself on it!
3. Go to the polymer-elements directory and switch it to point to your origin.

git remote remove origin
git remote add origin [email protected]:{{ username }}/{{ repository }}
git fetch origin
git checkout master

4. Pull down node dependencies. In your polymer-elements directory run 'npm install' this will pull down the tools used for executing the test.

That's it for the one time setup. Now you're ready to make a change.

## Running the tests

To run the tests make sure you have a webserver running with its docroot pointing to the polymer-all directory. Then navigate to /polymer-elements/test/runner.html

For Example:

cd polymer-all
ruby -rwebrick -e'WEBrick::HTTPServer.new(:Port => 4000, :DocumentRoot => Dir.pwd).start'

Then in your browser open: http://localhost:4000/polymer-elements/test/runner.html

## Submitting a pull request

We iterate fast! To avoid potential merge conflicts, it's a good idea to pull from the main project before making a change and submitting a pull request. The easiest way to do this is setup a remote called `upstream` and do a pull before working on a change:
Expand Down
2 changes: 1 addition & 1 deletion gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ module.exports = function(grunt) {
outdir: 'docs',
linkNatives: 'true',
tabtospace: 2,
themedir: 'tools/doc/themes/footstrap'
themedir: 'tools/doc/themes/polymerase'
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions polymer-flex-layout/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h3>Title</h3>
</script>
</polymer-element>

<polymer-element name="flex-container" extends="polymer-flex-panel">
<polymer-element name="flex-container" noscript extends="polymer-flex-panel">
<template>
<style>
div, polymer-flex-panel {
Expand Down Expand Up @@ -82,7 +82,7 @@ <h3>Title</h3>
</template>
</polymer-element>

<polymer-element name="flex-nonvisual">
<polymer-element name="flex-nonvisual" noscript>
<template>
<style>
div {
Expand Down
9 changes: 8 additions & 1 deletion polymer-flex-layout/polymer-flex-panel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,15 @@
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<polymer-element name="polymer-flex-panel" extends="polymer-flex-layout" isContainer>
<link rel="import" href="polymer-flex-layout.html">

<polymer-element name="polymer-flex-panel" extends="polymer-flex-layout">
<template>
<shadow></shadow>
</template>
<script>
Polymer('polymer-flex-panel', {
isContainer: true
});
</script>
</polymer-element>
30 changes: 14 additions & 16 deletions polymer-grid-layout/polymer-grid-layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,16 +136,24 @@
var m = 0;

function railize(count, sizeFn) {
// create rails for `count` tracks using `sizeFn(track)`
// tracks are bounded, so for n tracks there are (n+1) rails
//
// create rails for `count` tracks using sizing function `sizeFn(track)`
// for n tracks there are (n+1) rails
//
// |track|track|track|
// 0|->sz0|->sz1|<-sz2|0
//
// |track|track|track|
// 0|->sz0| |<-sz2|0
//
// 0|
// there can be one elastic track per set
//
// |track|track|track|track|
// 0|-->s0|-->s1|<--s1|<--s2|0
//
// sz1 spans two (>1) tracks which makes
// it elastic (it's underconstrained)
//
var rails = [];
var a = 0;
for (var i=0; i<count; i++) {
Expand All @@ -170,21 +178,11 @@
return rails;
}

// TODO(sjmiles): this codes tries to preserve actual position,
// so 'unposition' is really 'naturalize' or something
function unposition(box) {
var style = box.style;
//style.left = style.right = style.top = style.bottom = style.width = style.height = '';
// TODO(sjmiles): this codes tries to preserve position,
// so 'unposition' is really 'naturalize' or something
/*
if (style.left && style.right) {
style.left = '';
}
if (style.top && style.bottom) {
style.top = '';
}
*/
style.right = style.bottom = '';
style.width = style.height = '';
style.right = style.bottom = style.width = style.height = '';
style.position = 'absolute';
style.display = 'inline-block';
style.boxSizing = style.mozBoxSizing = 'border-box';
Expand Down
28 changes: 15 additions & 13 deletions polymer-list/polymer-grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
</script>
</polymer-element>

<polymer-element name="polymer-grid">
<polymer-element name="polymer-grid" attributes="items">
<template>
<style>
@host{*{
Expand All @@ -113,19 +113,21 @@
items: null,
scrub: 0,
ready: function() {
this.items = [];
for (var i = 0; i < 5000; i++) {
var n = '';
var l = Math.floor(Math.random() * 8) + 2;
for (var j=0; j<l; j++) {
n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
if (!this.items) {
this.items = [];
for (var i = 0; i < 5000; i++) {
var n = '';
var l = Math.floor(Math.random() * 8) + 2;
for (var j=0; j<l; j++) {
n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
}
n += ' ';
var l = Math.floor(Math.random() * 8) + 2;
for (var j=0; j<l; j++) {
n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
}
this.items[i] = n;
}
n += ' ';
var l = Math.floor(Math.random() * 8) + 2;
for (var j=0; j<l; j++) {
n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
}
this.items[i] = n;
}
},
inserted: function() {
Expand Down
66 changes: 41 additions & 25 deletions polymer-overlay/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,39 @@
</style>
</head>
<body>
<polymer-element name="x-dialog" attributes="opened autoCloseDisabled">
<template>
<style>
@host {
:scope {
box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
overflow: hidden;
background: white;
padding:30px 42px;
outline: 1px solid rgba(0,0,0,0.2);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
}
</style>
<polymer-overlay id="overlay" opened="{{opened}}" autoCloseDisabled="{{autoCloseDisabled}}"></polymer-overlay>
<content></content>
</template>
<script>
Polymer('x-dialog', {
ready: function() {
this.$.overlay.target = this;
},
toggle: function() {
this.$.overlay.toggle();
}
});
</script>
</polymer-element>
<button overlay="#dialog">Toggle Dialog</button>
( open styling:
<select onchange="changeOpening(event)">
Expand All @@ -49,51 +82,37 @@
<label>scrim: <input type="checkbox" onchange="scrimChange(event)"></label>
)
<br>
<div id="dialog" class="dialog polymer-overlay-scale-slideup">
<polymer-overlay></polymer-overlay>
<x-dialog id="dialog" class="dialog polymer-overlay-scale-slideup">
<h2>Dialog</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla sapien sed enim sollicitudin laoreet. Suspendisse suscipit, metus ac volutpat sodales, libero magna semper lacus, molestie fringilla massa orci ut arcu. Nullam sodales urna sit amet odio vehicula mattis.</div><br><br>
<div>Ut aliquam vulputate congue. Vestibulum pretium pretium nulla quis sollicitudin. Praesent lacinia congue erat nec mattis. Fusce commodo lacus est. Duis turpis eros, ultrices sed aliquet non, blandit egestas velit. Integer a augue nec lorem tristique hendrerit. Curabitur imperdiet risus id enim bibendum vestibulum. Integer id magna at arcu faucibus fermentum vel a augue. Sed fringilla venenatis dolor, in blandit magna molestie luctus. Vestibulum dignissim posuere ultrices. Aenean urna nisl, tincidunt vitae iaculis ut, pharetra nec eros.</div><br><br>
<div>
<input placeholder="say something..." autofocus oninput="somethingCheck()"></input><br>
I agree with this wholeheartedly.
<div id="confirmation" class="dialog">
<polymer-overlay></polymer-overlay>
<x-dialog id="confirmation" class="dialog">
Thank you.
</div>
</x-dialog>
</div><br><br>
<button overlay-toggle>OK</button>
</div>
</x-dialog>

<br><br>

<button overlay="#dialog2">Toggle Dialog 2</button>

<div id="dialog2" class="dialog polymer-overlay-shake" autoCloseDisabled="true">
<polymer-overlay></polymer-overlay>
<x-dialog id="dialog2" class="dialog polymer-overlay-shake" autoCloseDisabled="true">
<div>
<h2>Dialog 2</h2>
I'm dizzy.
</div>
<br><br>
<button overlay-toggle>OK</button>
</div>
</x-dialog>
<script>
setupOverlays = function() {
var overlays = document.querySelectorAll('polymer-overlay');
Array.prototype.forEach.call(overlays, function(o) {
o.target = o.parentNode;
});
}

document.addEventListener('WebComponentsReady', function() {
setupOverlays();
});

$ = document.querySelector.bind(document);

somethingCheck = function() {
$('#confirmation').querySelector('polymer-overlay').opened = (event.target.value == 'something');
$('#confirmation').opened = (event.target.value == 'something');
}

changeOpening = function(e) {
Expand All @@ -115,10 +134,7 @@ <h2>Dialog 2</h2>
var overlayButtons = document.querySelectorAll('button[overlay]');
Array.prototype.forEach.call(overlayButtons, function(b) {
b.addEventListener('tap', function(e) {
var overlay = document.querySelector(e.target.getAttribute('overlay'));
if (overlay) {
overlay.querySelector('polymer-overlay').toggle();
}
document.querySelector(e.target.getAttribute('overlay')).toggle();
})
});
</script>
Expand Down
49 changes: 48 additions & 1 deletion polymer-overlay/polymer-overlay.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ http://dev.w3.org/csswg/css3-transforms/#transform-rendering
We address this by using script based positioning =(
*/
@host {
* {
.polymer-overlay {
position: fixed;
z-index: 10;
outline: none;
Expand Down Expand Up @@ -129,3 +129,50 @@ We address this by using script based positioning =(
animation-name: polymer-overlay-shakeFadeOut;
}
}

.polymer-overlay {
position: fixed;
z-index: 10;
outline: none;
display: none;
opacity: 0.99;
-webkit-transition: opacity 0.001s;
transition: opacity 0.001s;
}

/*
The revealed class exists because it's necessary to 'show' a node
before applying a transition. When an overlay is opened, it is
immediately revealed (display: block) and then asynchronously the
opened or closing classes are added.
Because we don't want to actually show the node before a transition
or animation is applied, when the node is
revealed, it is made display: block but visibility: hidden.
It is then made visibility: visible when it is opened.
*/

.revealed {
display: block;
visibility: hidden;
}

.revealed.opened {
opacity: 1;
display: block;
visibility: visible;
}

.revealed.closing {
display: block;
visibility: visible;
}

.backdrop {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.25);
}
9 changes: 6 additions & 3 deletions polymer-overlay/polymer-overlay.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@
-->
<polymer-element name="polymer-overlay" attributes="target opened autoCloseDisabled">
<template>
<link rel="stylesheet" polymer-scope="controller" href="polymer-overlay.css">
<link rel="stylesheet" href="polymer-overlay.css">
<link rel="stylesheet" polymer-scope="global" href="polymer-overlay-global.css">
<polymer-key-helper id="keyHelper"></polymer-key-helper>
</template>
<script>
Expand Down Expand Up @@ -163,6 +163,9 @@
}
this.setAttribute('touch-action', 'none');
},
inserted: function() {
this.installControllerStyles();
},
/**
* Toggle the opened state of the overlay.
* @method toggle
Expand Down Expand Up @@ -253,10 +256,10 @@
continueRenderOpened: function() {
this.target.classList.toggle('opened', this.opened);
this.target.classList.toggle('closing', !this.opened);
//this.animating = this.asyncMethod('completeOpening', null, this.timeout);
this.animating = this.asyncMethod('completeOpening', null, this.timeout);
},
completeOpening: function() {
//clearTimeout(this.animating);
clearTimeout(this.animating);
this.animating = null;
this.target.classList.remove('closing');
this.target.classList.toggle('revealed', this.opened);
Expand Down
Loading

0 comments on commit 9497cc1

Please sign in to comment.