Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(74)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: pkg/polymer/lib/elements/polymer-anchor-point/demo.html

Issue 175443005: [polymer] import all elements (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: updated from bower Created 6 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « pkg/polymer/lib/elements/polymer-anchor-point/bower.json ('k') | pkg/polymer/lib/elements/polymer-anchor-point/docs.json » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: pkg/polymer/lib/elements/polymer-anchor-point/demo.html
diff --git a/pkg/polymer/lib/elements/polymer-anchor-point/demo.html b/pkg/polymer/lib/elements/polymer-anchor-point/demo.html
new file mode 100644
index 0000000000000000000000000000000000000000..440f974817da0265438ebd95accc2fc20e90a331
--- /dev/null
+++ b/pkg/polymer/lib/elements/polymer-anchor-point/demo.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+ <head>
+ <title>polymer-anchor-point</title>
+ <link rel="import" href="../polymer-ui-icon-button/polymer-ui-icon-button.html">
+ <link rel="import" href="../polymer-ui-toolbar/polymer-ui-toolbar.html">
+ <link rel="import" href="polymer-anchor-point.html">
+ <script src="../platform/platform.js"></script>
+ <link rel="stylesheet" href="../polymer-ui-base/base.css">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ }
+ html, body, #container {
+ height: 100%;
+ }
+ #target {
+ padding: 5px;
+ border: 1px solid black;
+ display: none;
+ position: absolute;
+ left: -99999px;
+ }
+ #target.active {
+ display: block;
+ }
+ </style>
+ </head>
+ <body class="polymer-ui-body-text">
+ <div id="container">
+ <polymer-flex-layout vertical="true"></polymer-flex-layout>
+ <polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
+ <polymer-ui-icon-button icon="menu" anchor-point="bottom left" target-anchor-point="top left"></polymer-ui-icon-button>
+ <div flex></div>
+ <polymer-ui-icon-button icon="refresh" anchor-point="bottom center" target-anchor-point="top center"></polymer-ui-icon-button>
+ <div flex></div>
+ <polymer-ui-icon-button icon="add" anchor-point="bottom right" target-anchor-point="top right"></polymer-ui-icon-button>
+ </polymer-ui-toolbar>
+ <div flex></div>
+ <div style="text-align:center">
+ <p><strong>Click icon buttons in the toolbars or enter custom <a href="http://dev.w3.org/csswg/css-backgrounds/#the-background-position" target="_blank">anchor-points</a> below.</strong></p>
+ <br>
+ anchor-point: <input id="customAnchorPt" value="bottom">
+ target anchor-point: <input id="customTargetAnchorPt" value="center -10px">
+ <br><br>
+ Click <polymer-ui-icon-button icon="settings" onclick="toggleCustom(event)"></polymer-ui-icon-button> for custom
+ </div>
+ <div flex></div>
+ <polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
+ <polymer-ui-icon-button icon="drawer" anchor-point="top left" target-anchor-point="bottom left"></polymer-ui-icon-button>
+ <polymer-ui-icon-button icon="dots" anchor-point="top center" target-anchor-point="bottom center"></polymer-ui-icon-button>
+ <div flex></div>
+ <polymer-ui-icon-button icon="search" anchor-point="top right" target-anchor-point="bottom right"></polymer-ui-icon-button>
+ </polymer-ui-toolbar>
+ </div>
+ <div id="target" onclick="toggle(event)"></div>
+ <polymer-anchor-point id="anchorable"></polymer-anchor-point>
+ <script>
+ function toggle(e) {
+ var anchorable = document.querySelector('#anchorable');
+ var target = document.querySelector('#target');
+ var anchor = e.target;
+ if (target.classList.contains('active')) {
+ target.classList.remove('active');
+ } else {
+ var targetAnchorPt = anchor.getAttribute('target-anchor-point');
+ target.setAttribute('anchor-point', targetAnchorPt);
+ target.innerHTML = 'anchor-point: ' + anchor.getAttribute('anchor-point') + '<br>' + 'target anchor-point: ' + targetAnchorPt;
+ anchorable.target = target;
+ anchorable.anchor = anchor;
+ target.classList.add('active');
+ anchorable.apply();
+ }
+ };
+ function toggleCustom(e) {
+ var anchorable = document.querySelector('#anchorable');
+ var target = document.querySelector('#target');
+ var anchor = e.target;
+ if (target.classList.contains('active')) {
+ target.classList.remove('active');
+ } else {
+ var anchorPt = document.querySelector('#customAnchorPt').value;
+ anchor.setAttribute('anchor-point', anchorPt);
+ var targetAnchorPt = document.querySelector('#customTargetAnchorPt').value;
+ target.setAttribute('anchor-point', targetAnchorPt);
+ target.innerHTML = 'anchor-point: ' + anchorPt + '<br>' + 'target anchor-point: ' + targetAnchorPt;
+ anchorable.target = target;
+ anchorable.anchor = anchor;
+ target.classList.add('active');
+ anchorable.apply();
+ }
+ }
+ </script>
+ </body>
+</html>
« no previous file with comments | « pkg/polymer/lib/elements/polymer-anchor-point/bower.json ('k') | pkg/polymer/lib/elements/polymer-anchor-point/docs.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698