Merge pull request #1 from WEBDMG/PM-23

Pm 23
WEBDMG · Nov 16, 2017 · e40b810 · e40b810
2 parents cdad0da + b5b95f8
commit e40b810
Show file tree

Hide file tree

Showing 10 changed files with 7,005 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+# Bower Components
+bower_components/
diff --git a/Gathr-Photos.html b/Gathr-Photos.html
@@ -0,0 +1,67 @@
+<link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+
+<!-- Import the styles from the style module my-styles -->
+<link rel="import" href="my-styles.html">
+
+
+<dom-module id="gathr-photos">
+  <template>
+  <style include="my-styles"></style>
+  <style is="custom-style">
+
+    </style>
+        <div class="container-fluid" style="overflow:hidden;">
+          <table style="overflow:hidden;">
+            <tr style="overflow:hidden;">
+        <template is="dom-repeat" items="[[photos]]">
+            <td style="overflow:hidden;">
+              <img src="{{item.url}}" class="img img-responsive"/>
+            </td>
+           <p>{{wd}}</p>
+        </template>
+</tr>
+</table>
+    </div>
+
+
+    <iron-ajax
+    id="requestPhotos"
+    url="http://api.gathr.me/v4/photo/photos/token/{{pm}}"
+    params='{"X-API-KEY":"3725c5c088c7b235550f85223687031a2356aae6"}'
+    handle-as="json"
+    on-response="handleResponse">
+    </iron-ajax>
+  </template>
+
+  <script>
+    /**
+     * `Gathr-Photos`
+     * Gathr Web Component for displaying photos from Gathr.
+     *
+     * @customElement
+     * @polymer
+     * @demo demo/index.html
+     */
+     Polymer({
+      is: 'gathr-photos',
+      properties: {
+          pm: String,
+          occassion: {
+              type: Array
+          }
+      },
+      ready: function () {
+          this.$.requestPhotos.generateRequest();
+      },
+      handleResponse: function (data) {
+          this.occassion = data.detail.response;
+          this.photos = []
+          this.occassion.photos.forEach(function(element) {
+            this.photos.push(element)
+          }, this);
+
+      }
+  });
+  </script>
+</dom-module>
diff --git a/README.md b/README.md
@@ -1 +1,21 @@
-# Gathr-Photos
+# \<Gathr-Photos\>
+
+Gathr Web Component for displaying photos from Gathr.
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
+
+## Viewing Your Element
+
+```
+$ polymer serve
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,17 @@
+{
+  "name": "Gathr-Photos",
+  "description": "Gathr Web Component for displaying photos from Gathr.",
+  "main": "Gathr-Photos.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^2.0.0",
+    "iron-ajax": "latest"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>Gathr-Photos demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../gathr-photos.html">
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>
+  </head>
+  <body class="container">
+    <div class="vertical-section-container centered">
+      <h3>Basic Gathr-Photos demo</h3>
+      <demo-snippet>
+        <template>
+          <gathr-photos pm=""></gathr-photos>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="refresh" content="0;url=demo/" />
+    <title>Gathr-Photos</title>
+  </head>
+  <body>
+    <!--
+        ELEMENT API DOCUMENTATION SUPPORT COMING SOON
+        Visit demo/index.html to see live examples of your element running.
+        This page will automatically redirect you there when run in the browser
+        with `polymer serve`.
+      -->
+  </body>
+</html>