-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 925204d
Showing
6 changed files
with
422 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| bower_components/* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| polymer-ui-p2r | ||
| ============== | ||
|
|
||
| A pull to refresh polymer component. | ||
|
|
||
| Setup | ||
| ----- | ||
|
|
||
| Run "bower install" to install the dependencies. Serve up this directory via the | ||
| web server of your choice. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "name": "polymer-ui-p2r", | ||
| "version": "0.0.0", | ||
| "homepage": "https://github.com/tdresser/polymer-ui-p2r", | ||
| "authors": [ | ||
| "Tim Dresser <[email protected]>" | ||
| ], | ||
| "description": "A pull to refresh polymer component.", | ||
| "ignore": [ | ||
| "**/.*", | ||
| "node_modules", | ||
| "bower_components", | ||
| "test", | ||
| "tests" | ||
| ], | ||
| "dependencies": { | ||
| "platform": "Polymer/platform#~0.2.0", | ||
| "polymer": "Polymer/polymer#~0.2.0" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script src="bower_components/platform/platform.js"></script> | ||
|
|
||
| <link rel="import" href="polymer-p2r.html"> | ||
| </head> | ||
| <style> | ||
| polymer-p2r[unresolved] { | ||
| opacity: 0; | ||
| transition: opacity 5s; | ||
| } | ||
|
|
||
| polymer-p2r { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .row { | ||
| height: 55px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .even { | ||
| background-color: lightblue; | ||
| } | ||
|
|
||
| .odd { | ||
| background-color: white; | ||
| } | ||
|
|
||
| polymer-p2r .header-div { | ||
| background-color: lightgrey; | ||
| -moz-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| height:100px; | ||
| text-align:center; | ||
| padding-top:50px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| polymer-p2r .header-div::after { | ||
| content: 'Pull down to refresh...'; | ||
| } | ||
|
|
||
| polymer-p2r.pulled .header-div::after { | ||
| content: 'Release to refresh...'; | ||
| } | ||
|
|
||
| polymer-p2r.loading .header-div::after { | ||
| content: 'Loading...'; | ||
| } | ||
|
|
||
| </style | ||
| <body> | ||
| <polymer-p2r unresolved> | ||
| <div class="p2rheader"> | ||
| <div class="header-div"> | ||
| This should be the header. | ||
| </div> | ||
| </div> | ||
| <div class="content"> | ||
| <div class='row odd'>1</div> | ||
| <div class='row even'>2</div> | ||
| <div class='row odd'>3</div> | ||
| <div class='row even'>4</div> | ||
| <div class='row odd'>5</div> | ||
| <div class='row even'>6</div> | ||
| <div class='row odd'>7</div> | ||
| <div class='row even'>8</div> | ||
| <div class='row odd'>9</div> | ||
| <div class='row even'>10</div> | ||
| <div class='row odd'>11</div> | ||
| <div class='row even'>12</div> | ||
| <div class='row odd'>13</div> | ||
| <div class='row even'>14</div> | ||
| <div class='row odd'>15</div> | ||
| <div class='row even'>16</div> | ||
| <div class='row odd'>17</div> | ||
| <div class='row even'>18</div> | ||
| <div class='row odd'>19</div> | ||
| <div class='row even'>20</div> | ||
| <div class='row odd'>21</div> | ||
| <div class='row even'>22</div> | ||
| <div class='row odd'>23</div> | ||
| <div class='row even'>24</div> | ||
| </div> | ||
| </polymer-p2r> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| <link rel="import" href="bower_components/polymer/polymer.html"> | ||
|
|
||
| <polymer-element name="polymer-p2r"> | ||
| <template> | ||
| <style> | ||
| :host * { | ||
| margin:0; | ||
| padding:0; | ||
| } | ||
|
|
||
| :host { | ||
| display:block; | ||
| height:300px; | ||
| width:500px; | ||
| } | ||
|
|
||
| :host #scroller { | ||
| height:100%; | ||
| width:100%; | ||
| display:block; | ||
| overflow-y:scroll; | ||
| } | ||
|
|
||
| :host #scrollcontent { | ||
| position: relative; | ||
| width: 100%; | ||
| /* Offset p2r height */ | ||
| top: -100px; | ||
| margin-bottom:-100px; | ||
| } | ||
|
|
||
| :host #p2r { | ||
| position: relative; | ||
| z-index:-1; | ||
| } | ||
| </style> | ||
| <div id="scroller"> | ||
| <div id="p2r"> | ||
| <content select=".p2rheader"></content> | ||
| </div> | ||
| <div id="scrollcontent"> | ||
| <content select=".content"></content> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script src="polymer-p2r.js"></script> | ||
| </polymer-element> |
Oops, something went wrong.