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

Unified Diff: pkg/polymer/lib/elements/polymer-ui-splitter/polymer-ui-splitter.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
Index: pkg/polymer/lib/elements/polymer-ui-splitter/polymer-ui-splitter.html
diff --git a/pkg/polymer/lib/elements/polymer-ui-splitter/polymer-ui-splitter.html b/pkg/polymer/lib/elements/polymer-ui-splitter/polymer-ui-splitter.html
new file mode 100644
index 0000000000000000000000000000000000000000..f3a9497b44f8c51fb3368bf78c568001be774611
--- /dev/null
+++ b/pkg/polymer/lib/elements/polymer-ui-splitter/polymer-ui-splitter.html
@@ -0,0 +1,92 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<!--
+/**
+ * @module Polymer UI Elements
+ */
+/**
+ * polymer-ui-splitter provides a spilt bar and dragging on the split bar
+ * will resize the sibling element. Use the property "direction" to indicate
+ * which sibling to be resized and the orientation.
+ *
+ * Example:
+ *
+ * <div class="flexbox">
+ * <div>left</div>
+ * <polymer-ui-splitter direction="left"></polymer-ui-splitter>
+ * <div flex>right</div>
+ * </div>
+ *
+ * For horizontal splitter set direction to "up" or "down".
+ *
+ * Example:
+ *
+ * <div class="flexbox column">
+ * <div>top</div>
+ * <polymer-ui-splitter direction="up"></polymer-ui-splitter>
+ * <div flex>bottom</div>
+ * </div>
+ *
+ * @class polymer-ui-splitter
+ */
+-->
+<link rel="import" href="../polymer/polymer.html">
+
+<polymer-element name="polymer-ui-splitter" attributes="direction locked"
+ on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend="{{trackEnd}}">
+ <template>
+ <link rel="stylesheet" href="polymer-ui-splitter.css">
+ </template>
+ <script>
+ Polymer('polymer-ui-splitter', {
+ /**
+ * Possible values are "left", "right", "up" and "down".
+ *
+ * @attribute direction
+ * @type string
+ * @default 'left'
+ */
+ direction: 'left',
+ /**
+ * Locks the split bar so it can't be dragged.
+ *
+ * @attribute locked
+ * @type boolean
+ * @default false
+ */
+ locked: false,
+ ready: function() {
+ this.directionChanged();
+ },
+ 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);
+ },
+ trackStart: function(e) {
+ this.update();
+ this.classList.add('active');
+ 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';
+ },
+ trackEnd: function() {
+ this.classList.remove('active');
+ }
+ });
+ </script>
+</polymer-element>

Powered by Google App Engine
This is Rietveld 408576698