Merge pull request #18 from Brightspace/polymer-3-2019-01-02-112300

Polymer 3 Conversion

.eslintignore

@@ -0,0 +1,2 @@
+test/acceptance/*
+reports

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "brightspace/wct-config"
+  "extends": "brightspace/wct-polymer-3-config"
 }

.gitignore

@@ -1,4 +1,4 @@
-bower_components*
-bower-*
 node_modules
 package-lock.json
+
+node_modules

d2l-image.js

@@ -0,0 +1,78 @@
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/iron-ajax/iron-ajax.js';
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<dom-module id="d2l-image">
+	<template strip-whitespace="">
+		<style>
+			:host {
+				display: block;
+			}
+
+			img {
+				width:100%;
+				height: 100%;
+				border-radius: var(--d2l-image-border-radius);
+				object-fit: var(--d2l-image-object-fit);
+			}
+		</style>
+
+		<iron-ajax id="imageRequest" url="[[imageUrl]]" headers="[[_headers]]" on-iron-ajax-response="_onImageResponse" on-iron-ajax-error="_onImageResponse" handle-as="blob">
+		</iron-ajax>
+
+		<img id="image" alt="{{alternateText}}">
+	</template>
+	
+</dom-module>`;
+
+document.head.appendChild($_documentContainer.content);
+
+Polymer({
+	is: 'd2l-image',
+
+	properties: {
+		alternateText: String,
+		imageUrl: {
+			type: String,
+			value: null
+		},
+		token: String,
+		_headers: String
+	},
+
+	observers: [
+		'_onImageUrlChange( imageUrl, token )'
+	],
+
+	_onImageUrlChange: function(imageUrl, token) {
+		if (imageUrl && token) {
+			this._headers = {
+				Authorization: 'Bearer ' + token
+			};
+			this.$.imageRequest.generateRequest();
+		} else if (imageUrl) {
+			this.$.image.src = imageUrl;
+		}
+	},
+
+	_onImageResponse: function(response) {
+		if (response.detail.status === 200) {
+			if (this.$.image.src) {
+				URL.revokeObjectURL(this.$.image.src);
+			}
+			this.$.image.src = URL.createObjectURL(response.detail.response);
+			this.dispatchEvent(new CustomEvent('d2l-image-loaded', {
+				bubbles: true,
+				composed: true,
+				detail: { response: response }
+			}));
+		} else {
+			this.dispatchEvent(new CustomEvent('d2l-image-failed-to-load', {
+				bubbles: true,
+				composed: true,
+				detail: { response: response }
+			}));
+		}
+	}
+});

package.json

@@ -1,33 +1,46 @@
 {
-  "name": "d2l-image",
   "description": "A Polymer-based web component for images requiring authentication",
-  "private": true,
-  "scripts": {
-    "postinstall": "polymer install --variants",
-    "lint": "npm run lint:html && npm run lint:wc",
-    "lint:html": "eslint *.html",
-    "lint:wc": "polymer lint -i d2l-image.html",
-    "test": "npm run lint && polymer test --skip-plugin sauce"
-  },
-  "homepage": "https://github.com/Brightspace/d2l-image#readme",
+  "keywords": [
+    "d2l",
+    "image"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Brightspace/d2l-image.git"
   },
+  "homepage": "https://github.com/Brightspace/d2l-image#readme",
+  "name": "d2l-image",
+  "scripts": {
+    "lint": "npm run lint:wc && npm run lint:js",
+    "lint:js": "eslint . --ext .js,.html test/**/*.js test/**/*.html demo/**/*.js demo/**/*.html",
+    "lint:wc": "polymer lint",
+    "test": "npm run lint && polymer test --skip-plugin sauce"
+  },
   "bugs": {
     "url": "https://github.com/Brightspace/d2l-image/issues"
   },
-  "keywords": [
-    "d2l",
-    "image"
-  ],
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@webcomponents/webcomponentsjs": "^2.2.1",
+    "babel-eslint": "^10.0.1",
     "eslint": "^4.15.0",
     "eslint-config-brightspace": "^0.4.0",
     "eslint-plugin-html": "^4.0.1",
-    "polymer-cli": "^1.5.7",
+    "polymer-cli": "^1.9.4",
+    "wct-browser-legacy": "^1.0.1",
     "web-component-tester": "^6.4.1"
+  },
+  "version": "",
+  "resolutions": {
+    "inherits": "2.0.3",
+    "samsam": "1.1.3",
+    "supports-color": "3.1.2",
+    "type-detect": "1.0.0"
+  },
+  "main": "d2l-image.js",
+  "dependencies": {
+    "@polymer/iron-ajax": "^3.0.0",
+    "@polymer/polymer": "^3.0.0"
   }
 }

polymer.json

@@ -1,5 +1,6 @@
 {
+  "npm": true,
   "lint": {
-    "rules": ["polymer-2-hybrid"]
+    "rules": ["polymer-3"]
   }
 }

test/d2l-image.html

@@ -3,10 +3,10 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-		<script src="../../web-component-tester/browser.js"></script>
+		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+		<script src="../../wct-browser-legacy/browser.js"></script>
 
-		<link rel="import" href="../d2l-image.html">
+		<script type="module" src="../d2l-image.js"></script>
 	</head>
 	<body>
 		<test-fixture id="d2l-image-fixture">
@@ -25,6 +25,6 @@
 				></d2l-image>
 			</template>
 		</test-fixture>
-		<script src="d2l-image.js"></script>
+		<script src="./d2l-image.js"></script>
 	</body>
 </html>

test/index.html

@@ -3,8 +3,8 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-		<script src="../../web-component-tester/browser.js"></script>
+		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+		<script src="../../wct-browser-legacy/browser.js"></script>
 	</head>
 	<body>
 		<script>