Merge pull request #9 from atotic/master

Polymer 1.0 port
ebidel · Jun 9, 2015 · bd669d4 · bd669d4
2 parents 6aef382 + 253eec0
commit bd669d4
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 142 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/bower.json b/bower.json
@@ -9,12 +9,9 @@
   "main": "geo-location.html",
   "license": "Apache2",
   "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests",
-    "../"
+    "/.*",
+    "/test/",
+    "/demo/"
   ],
   "keywords": [
     "web-component",
@@ -25,6 +22,9 @@
     "map"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#~0.5.1"
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
   }
 }
diff --git a/demo.html → demo/index.html b/demo.html → demo/index.html
@@ -3,8 +3,8 @@
 <html>
 <head>
   <title>geo-location Demo</title>
-  <script src="../webcomponentsjs/webcomponents.min.js"></script>
-  <link rel="import" href="geo-location.html">
+  <script src="../../webcomponentsjs/webcomponents.min.js"></script>
+  <link rel="import" href="../geo-location.html">
   <link href="//fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,800|Source+Code+Pro" rel="stylesheet">
   <style>
   * {
@@ -29,13 +29,13 @@
   }
   </style>
 </head>
-<body layout vertical center-justified center unresolved>
+<body class="layout vertical center-justified center" unresolved>
 
-<geo-location watchpos></geo-location>
 
-<template is="auto-binding">
-  <h2><pre>&lt;geo-location latitude="{{latitude}}"
-              longitude="{{longitude}}">
+<template is="dom-bind">
+  <geo-location watch-pos latitude="{{latitude}}" longitude="{{longitude}}"></geo-location>
+  <h2><pre>&lt;geo-location latitude="<span>{{latitude}}</span>"
+              longitude="<span>{{longitude}}</span>">
 &lt;/geo-location></pre></h2>
 </template>
 
@@ -46,11 +46,6 @@ <h2><pre>&lt;geo-location latitude="{{latitude}}"
 t.latitude = '???';
 t.longitude = '???';
 
-var geolocation = document.querySelector('geo-location');
-geolocation.addEventListener('geo-response', function(e) {
-  t.latitude = this.latitude.toFixed(6);
-  t.longitude = this.longitude.toFixed(6);
-});
 </script>
 <script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/geo-location.html b/geo-location.html
@@ -2,6 +2,8 @@
 
 <link rel="import" href="../polymer/polymer.html">
 
+<!-- TODO: decide if we need to cache results across instances. -->
+
 <!--
 Provides the current location using the [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation).
 
@@ -28,156 +30,162 @@
      <google-map latitude="{{lat}}" longitude="{{lng}}"
                  showcentermarker></google-map>
 
-@element geo-location
-@blurb Provides the current location using the Geolocation API.
-@status stable
-@snap https://raw.githubusercontent.com/ebidel/geo-location/master/snap.png
-@homepage http://ebidel.github.io/geo-location
+@demo
 -->
-<!-- TODO: decide if we need to cache results across instances. -->
-<polymer-element name="geo-location" attributes="maximumAge watchPos highAccuracy position">
+<dom-module id="geo-location">
   <template>
     <style>
       :host {
         display: none;
       }
     </style>
   </template>
-  <script>
-    (function() {
-      var id_ = null;
+</dom-module>
+<script>
+  (function() {
+    var id_ = null;
 
-      /**
-       * Fired when the Geolocation API returns an error.
-       *
-       * @event geo-error
-       * @param {Object} detail
-       * @param {boolean} detail.error The error message.
-       */
+    Polymer({
 
-      /**
-       * Fired when the Geolocation API returns a position result.
-       *
-       * @event geo-response
-       * @param {Object} detail
-       *   @param {Position} position The raw position object returned by the Geolocation API.
-       *   @param {Number} detail.latitude Latitude of the current position.
-       *   @param {Number} detail.longitude Longitude of the current position.
-       */
+      is: 'geo-location',
 
-      Polymer({
-
-        publish: {
-          /**
-           * The latitude of the current position.
-           *
-           * @attribute latitude
-           * @type Number
-           * @default null
-           */
-          latitude: {value: null, reflect: true},
-
-          /**
-           * The longitude of the current position.
-           *
-           * @attribute longitude
-           * @type Number
-           * @default null
-           */
-          longitude: {value: null, reflect: true}
+      properties: {
+        /**
+         * The latitude of the current position.
+         */
+        latitude: {
+          type: Number,
+          notify: true,
+          reflectToAttribute: true,
+          readOnly: true
+        },
+
+        /**
+         * The longitude of the current position.
+         */
+        longitude: {
+          type: Number,
+          notify: true,
+          reflectToAttribute: true,
+          readOnly: true
         },
 
         /**
          * If true, the latitude/longitude update as the device changes position.
          * If not set, the latitude/longitude are provided once.
-         *
-         * @attribute watchPos
-         * @type boolean
-         * @default false
          */
-        watchPos: false,
+        watchPos: {
+          type: Boolean,
+          value: false,
+          observer: '_watchPosChanged'
+        },
 
         /**
          * If true, enables high accuracy GPS.
-         *
-         * @attribute highAccuracy
-         * @type boolean
-         * @default false
          */
-        highAccuracy: false,
+        highAccuracy: {
+          type: Boolean,
+          value: false
+        },
 
         /**
          * The maximumAge option in the Gelocation API.
-         *
-         * @attribute maximumAge
-         * @type Number
-         * @default 0
          */
-        maximumAge: 0,
+        maximumAge: {
+          type: Number,
+          value: 0
+        },
 
         /**
          * The timeout option in the Gelocation API.
-         *
-         * @property timeout
-         * @type Number
-         * @default 5000
          */
-        timeout: 5000,
+        timeout: {
+          type: Number,
+          value: 5000
+        },
+
+        /**
+         * Geolocation API position object
+         */
+        position: {
+          type: Object,
+          notify: true,
+          readOnly: true
+        }
 
-        ready: function() {
+      },
+     /**
+       * Fired when the Geolocation API returns an error.
+       *
+       * @event geo-error
+       * @param {Object} detail
+       * @param {boolean} detail.error The error message.
+       */
+
+      /**
+       * Fired when the Geolocation API returns a position result.
+       *
+       * @event geo-response
+       * @param {Object} detail
+       *   @param {Position} position The raw position object returned by the Geolocation API.
+       *   @param {Number} detail.latitude Latitude of the current position.
+       *   @param {Number} detail.longitude Longitude of the current position.
+       */
+
+      ready: function() {
+        var options = {
+          enableHighAccuracy: this.highAccuracy,
+          timeout: this.timeout,
+          maximumAge: this.maximumAge
+        };
+
+        if (!this.watchPos) {
+          navigator.geolocation.getCurrentPosition(
+            this._onPosition.bind(this), this._onError.bind(this), options);
+        }
+      },
+
+      _watchPosChanged: function() {
+        if (id_) {
+          navigator.geolocation.clearWatch(id_);
+          id_ = null;
+        }
+
+        if (this.watchPos) {
           var options = {
             enableHighAccuracy: this.highAccuracy,
             timeout: this.timeout,
             maximumAge: this.maximumAge
           };
-
-          if (!this.watchPos) {
-            navigator.geolocation.getCurrentPosition(
-              this.onPosition.bind(this), this.onError.bind(this), options);
-          }
-        },
-        watchPosChanged: function() {
-          if (id_) {
-            navigator.geolocation.clearWatch(id_);
-            id_ = null;
-          }
-
-          if (this.watchPos) {
-            var options = {
-              enableHighAccuracy: this.highAccuracy,
-              timeout: this.timeout,
-              maximumAge: this.maximumAge
-            };
-            id_ = navigator.geolocation.watchPosition(
-              this.onPosition.bind(this), this.onError.bind(this), options);
-          }
-        },
-        /**
-         * Success callback when the Geolocation API returns results.
-         *
-         * @method onPosition
-         * @param {Position} pos A position object from the Geolocation API.
-         */
-        onPosition: function(pos) {
-          this.position = pos;
-          this.latitude = pos.coords.latitude;
-          this.longitude = pos.coords.longitude;
-          this.fire('geo-response', {
-            latitude: this.latitude,
-            longitude: this.longitude,
-            position: pos
-          });
-        },
-        /**
-         * Error callback when the Geolocation API returns an error.
-         *
-         * @method onError
-         * @param {Position} err The error that was returned.
-         */
-        onError: function(err) {
-          this.fire('geo-error', {error: err.code + ': ' + err.message});
+          id_ = navigator.geolocation.watchPosition(
+            this._onPosition.bind(this), this._onError.bind(this), options);
         }
-      });
-    })();
-  </script>
-</polymer-element>
+      },
+
+      /**
+       * Success callback when the Geolocation API returns results.
+       *
+       * @param {Position} pos A position object from the Geolocation API.
+       */
+      _onPosition: function(pos) {
+        this._setPosition(pos);
+        this._setLatitude(pos.coords.latitude);
+        this._setLongitude(pos.coords.longitude);
+        this.fire('geo-response', {
+          latitude: this.latitude,
+          longitude: this.longitude,
+          position: pos
+        });
+      },
+
+      /**
+       * Error callback when the Geolocation API returns an error.
+       *
+       * @param {Position} err The error that was returned.
+       */
+      _onError: function(err) {
+        this.fire('geo-error', {error: err.code + ': ' + err.message});
+      }
+    });
+  })();
+</script>
diff --git a/index.html b/index.html
@@ -1,14 +1,13 @@
 <!doctype html>
+<!-- Copyright Eric Bidelman <[email protected]> -->
 <html>
 <head>
 
-  <script src="../webcomponentsjs/webcomponents.min.js"></script>
-  <link rel="import" href="../core-component-page/core-component-page.html">
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
 
 </head>
-<body unresolved>
-
-  <core-component-page></core-component-page>
-
+<body>
+  <iron-component-page></iron-component-page>
 </body>
 </html>