initial commit

README.md

@@ -0,0 +1,6 @@
+core-popup
+==========
+
+owner: [@morethanreal](https://github.com/morethanreal)
+
+See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-popup) for more information.

bower.json

@@ -0,0 +1,13 @@
+{
+  "name": "core-popup-menu",
+  "private": false,
+  "dependencies": {
+  	"polymer": "Polymer/polymer#master",
+  	"core-icon": "Polymer/core-icon#master",
+  	"core-icon-button": "Polymer/core-icon-button#master",
+  	"core-icons": "Polymer/core-icons#master",
+  	"core-item": "Polymer/core-item#master",
+  	"core-menu": "Polymer/core-menu#master",
+    "core-overlay": "Polymer/core-overlay#master"
+  }
+}

core-popup-overlay.html

@@ -0,0 +1,127 @@
+<!--
+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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../core-overlay/core-overlay.html">
+
+<!--
+
+`core-popup-overlay` is a helper class to position an overlay relative to another
+element.
+
+@group Polymer Core Elements
+@element core-popup-overlay
+@extends core-overlay
+@homepage github.io
+-->
+
+<polymer-element name="core-popup-overlay" extends="core-overlay">
+<script>
+    Polymer({
+
+      publish: {
+
+        /**
+         * The `relatedTarget` is an element used to position the overlay, for example a
+         * button the user taps to show a menu.
+         *
+         * @attribute relatedTarget
+         * @type Element
+         */
+        relatedTarget: null,
+
+        /**
+         * The horizontal alignment of the overlay relative to the `relatedTarget`.
+         *
+         * @attribute halign
+         * @type 'left'|'right'
+         * @default 'auto'
+         */
+        halign: 'left',
+
+        /**
+         * The vertical alignment of the overlay relative to the `relatedTarget`.
+         *
+         * @attribute valign
+         * @type 'top'|'bottom'
+         * @default 'bottom'
+         */
+        valign: 'bottom',
+
+        margin: 12
+
+      },
+
+      positionTarget: function() {
+        if (!this.relatedTarget) {
+          this.super();
+          return;
+        }
+
+        var top, left, bottom, right;
+        var ref = this.relatedTarget.getBoundingClientRect();
+
+        // if (this._shouldPosition.left) {
+          if (this.halign === 'left') {
+            left = ref.left;
+          } else if (this.halign === 'right') {
+            left = Math.max(ref.right - this.target.offsetWidth, this.margin);
+          }
+          this.target.style.left = left + 'px';
+        // }
+
+        // if (this._shouldPosition.top) {
+          if (this.valign === 'bottom') {
+            top = ref.top;
+          } else {
+            top = Math.max(ref.bottom - this.target.offsetHeight, this.margin)
+          }
+          this.target.style.top = top + 'px';
+        // }
+
+      },
+
+      sizeTarget: function() {
+        var sizer = this.sizingTarget || this.target;
+        var rect = sizer.getBoundingClientRect();
+        var ref = this.relatedTarget.getBoundingClientRect();
+
+        var minW = ref.width + 'px';
+
+        // at least as wide as the relatedTarget
+        sizer.style.minWidth = minW + 'px';
+
+        var maxW, maxH;
+
+        // if (this._shouldPosition.left) {
+          if (this.halign === 'left') {
+            maxW = window.innerWidth - rect.left - this.margin;
+          } else {
+            maxW = ref.right - rect.left;
+          }
+          sizer.style.maxWidth = maxW + 'px';
+        // }
+
+        // if (this._shouldPosition.top) {
+          if (this.valign === 'bottom') {
+            maxH = window.innerHeight - rect.top - this.margin;
+          } else {
+            maxH = ref.bottom - rect.top;
+          }
+          sizer.style.maxHeight = maxH + 'px';
+        // }
+
+        // if (!this._shouldPosition.left && !this._shouldPosition.top) {
+        //   this.super();
+        // }
+      }
+
+    });
+  </script>
+</polymer-element>

core-popup.css

@@ -0,0 +1,19 @@
+/*
+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;
+  border-radius: 3px;
+  color: #000;
+  max-height: inherit;
+  overflow: scroll;
+  /* initially position offscreen to get the natural offsetWidth and offsetHeight */
+  left: -99999px;
+  top: -99999px;
+}

core-popup.html

@@ -0,0 +1,121 @@
+<!--
+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-popup` is a popup that can be positioned relative to another element, usually the element
+that opens or closes the popup. It can be used to implement various kinds of popup menus.
+
+Example:
+
+    <template is="auto-binding">
+        <div id="control">Your favorite pastry:</div>
+        <core-popup relatedTarget="{{$.control}}">
+          <core-menu>
+            <core-item label="Churro"></core-item>
+            <core-item label="Donut"></core-item>
+            <core-item label="Macaron"></core-item>
+          </core-menu>
+        </core-popup>
+    </template>
+
+@group Polymer Core Elements
+@element core-popup
+@homepage github.io
+-->
+
+<!--
+Fired when an item's selection state is changed. This event is fired both
+when an item is selected or deselected. The `isSelected` detail property
+contains the selection state.
+
+@event core-select
+@param {Object} detail
+  @param {boolean} detail.isSelected true for selection and false for de-selection
+  @param {Object} detail.item the item element
+-->
+<link href="../polymer/polymer.html" rel="import">
+
+<link href="core-popup-overlay.html" rel="import">
+
+<polymer-element name="core-popup">
+<template>
+
+  <link href="core-popup.css" rel="stylesheet">
+
+  <core-popup-overlay id="overlay" target="{{}}" sizingTarget="{{$.menu}}" relatedTarget="{{relatedTarget}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" transition="{{transition}}"></core-popup-overlay>
+
+  <content></content>
+
+</template>
+<script>
+
+  Polymer({
+
+    publish: {
+
+      /**
+       * The element associated with this menu, usually the element that
+       * causes the menu the open.
+       *
+       * @attribute relatedTarget
+       * @type Node
+       */
+      relatedTarget: null,
+
+      /**
+       * If true, the menu is currently visible.
+       *
+       * @attribute opened
+       * @type boolean
+       * @default false
+       */
+      opened: false,
+
+      /**
+       * The horizontal alignment of the pulldown menu relative to the button.
+       * If set to `auto`, the popup will be positioned the same as `left` if its
+       * natural width can fit in the viewport, otherwise it will be positioned as
+       * `right`.
+       *
+       * @attribute halign
+       * @type 'left' | 'right'
+       * @default 'auto'
+       */
+      halign: 'left',
+
+      /**
+       * The vertical alignment of the pulldown menu relative to the button. If set
+       * to `auto`, the popup will be positioned the same as `bottom` if its natural
+       * height can fit in the viewport, otherwise it will be positioned as `top`.
+       *
+       * @attribute valign
+       * @type 'bottom' | 'top'
+       * @default 'bottom'
+       */
+      valign: 'bottom',
+
+      /**
+       * The transition property specifies a string which identifies a 
+       * <a href="../core-transition/">`core-transition`</a> element that 
+       * will be used to help the overlay open and close. The default
+       * `core-transition-fade` will cause the overlay to fade in and out.
+       *
+       * @attribute transition
+       * @type string
+       * @default null
+       */
+      transition: null
+
+    }
+
+  });
+
+</script>
+</polymer-element>