Merge pull request #4 from Brightspace/rmahler/empty-imageUrl

Check for empty imageUrl and token
Brightspace · May 30, 2017 · a70efe0 · a70efe0
2 parents 93008ab + 3a68c34
commit a70efe0
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 125 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,13 +1,13 @@
-root = true
-
-[*]
-charset = utf8
-end_of_line = lf
-trim_trailing_whitespace = true
-insert_final_newline = true
-indent_style = tab
-indent_size = 4
-
-[{*.json,*.yml,*.yaml}]
-indent_style = space
-indent_size = 2
+root = true
+
+[*]
+charset = utf8
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = tab
+indent_size = 4
+
+[{*.json,*.yml}]
+indent_style = space
+indent_size = 2
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc b/.eslintrc
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -0,0 +1,2 @@
+extends:
+  - brightspace/wct-config
diff --git a/.travis.yml b/.travis.yml
@@ -1,16 +1,14 @@
 language: node_js
-node_js: 6
-dist: trusty
-sudo: required
+node_js: stable
+sudo: false
 addons:
   firefox: latest
   apt:
     packages:
-    - gdebi
     - oracle-java8-installer
     - oracle-java8-set-default
 before_script:
   - npm run test:lint:js
   - npm run test:lint:wc
 script:
-  - xvfb-run wct
+  - xvfb-run polymer test
diff --git a/README.md b/README.md
@@ -1,7 +1,35 @@
 # d2l-image
 
-A [Polymer](https://www.polymer-project.org/)-based web component for displaying images that require authentication
+[![Build Status](https://travis-ci.org/Brightspace/d2l-image.svg?branch=master)](https://travis-ci.org/Brightspace/d2l-image)
+
+A [Polymer](https://www.polymer-project.org)-based web component for displaying images that require authentication.
+
+## Installation
+
+Clone the repo and install npm and bower dependencies:
+
+```sh
+npm install
+```
+
+Run tests:
+
+```sh
+npm test
+```
+
+## Usage
+
+```html
+<d2l-image
+	alternate-text="Alt text that will appear on image"
+	image-url="https://example.com/image-to-fetch.jpg"
+	token="some-oauth-token">
+</d2l-image>
+```
+
+When both `image-url` and `token` are non-null, `d2l-image` will load the image.
 
 ## Coding styles
 
-See the [Best Practices & Style Guide](https://github.com/Brightspace/valence-ui-docs/wiki/Best-Practices-&-Style-Guide) for information on naming conventions, plus information about the [EditorConfig](http://editorconfig.org) rules used in this repo.
+Follow the [EditorConfig](http://editorconfig.org) rules used in this repo.
diff --git a/bower.json b/bower.json
@@ -6,12 +6,10 @@
     "polymer"
   ],
   "dependencies": {
-    "d2l-hm-constants-behavior": "git://github.com/Brightspace/d2l-hm-constants-behavior.git#^1.0.0",
-    "d2l-organization-hm-behavior": "git://github.com/Brightspace/organization-hm-behavior.git#^1.0.0",
-    "iron-ajax": "^1.4.3"
+    "iron-ajax": "^1.4.3",
+    "polymer": "^1.8.0"
   },
   "devDependencies": {
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "web-component-tester": "^6.0.0"
   }
 }
diff --git a/d2l-image.html b/d2l-image.html
@@ -1,7 +1,5 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../iron-ajax/iron-ajax.html">
-<link rel="import" href="../d2l-organization-hm-behavior/d2l-organization-hm-behavior.html">
-<link rel="import" href="../d2l-hm-constants-behavior/d2l-hm-constants-behavior.html">
 
 <dom-module id="d2l-image">
 	<template>
@@ -16,7 +14,14 @@
 			}
 		</style>
 
-		<iron-ajax id="imageRequest" url="[[imageUrl]]" headers="[[_headers]]" on-iron-ajax-response="_onImageResponse" on-iron-ajax-error="_onImageResponse" handle-as="arraybuffer"></iron-ajax>
+		<iron-ajax
+			id="imageRequest"
+			url="[[imageUrl]]"
+			headers="[[_headers]]"
+			on-iron-ajax-response="_onImageResponse"
+			on-iron-ajax-error="_onImageResponse"
+			handle-as="arraybuffer">
+		</iron-ajax>
 
 		<img id="image" alt="{{alternateText}}"/>
 	</template>
@@ -25,6 +30,7 @@
 
 	Polymer({
 		is: 'd2l-image',
+
 		properties: {
 			alternateText: String,
 			imageUrl: {
@@ -34,21 +40,19 @@
 			token: String,
 			_headers: String
 		},
+
 		observers: [
 			'_onImageUrlChange( imageUrl, token )'
 		],
-		behaviors: [
-			window.D2L.Hypermedia.OrganizationHMBehavior,
-			window.D2L.Hypermedia.HMConstantsBehavior
-		],
-		_onImageUrlChange: function() {
-			if (this.token) {
+
+		_onImageUrlChange: function(imageUrl, token) {
+			if (imageUrl && token) {
 				this._headers = {
-					Authorization: 'Bearer ' + this.token
+					Authorization: 'Bearer ' + token
 				};
 				this.$.imageRequest.generateRequest();
-			} else {
-				this.$.image.src = this.imageUrl;
+			} else if (imageUrl) {
+				this.$.image.src = imageUrl;
 			}
 		},
 

diff --git a/package.json b/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "scripts": {
     "postinstall": "bower install",
-    "test": "npm run test:lint:js && npm run test:lint:wc && wct",
-    "test:lint:js": "./node_modules/.bin/eslint --ext .js,.html .",
-    "test:lint:wc": "polylint --no-recursion",
-    "test:no-lint": "wct -p"
+    "test": "npm run test:lint:js && npm run test:lint:wc && npm run test:unit",
+    "test:lint:js": "eslint --ext .js,.html . test/",
+    "test:lint:wc": "polymer lint -i d2l-image.html",
+    "test:unit": "polymer test"
   },
   "homepage": "https://github.com/Brightspace/d2l-image#readme",
   "repository": {
@@ -27,9 +27,7 @@
     "bower": "^1.8.0",
     "eslint": "^3.17.0",
     "eslint-config-brightspace": "^0.2.1",
-    "eslint-config-google": "^0.7.0",
     "eslint-plugin-html": "^1.7.0",
-    "polylint": "^2.10.4",
-    "web-component-tester": "^4.2.2"
+    "polymer-cli": "^1.1.0"
   }
 }
diff --git a/polymer.json b/polymer.json
@@ -0,0 +1,5 @@
+{
+  "lint": {
+    "rules": ["polymer-2-hybrid"]
+  }
+}
diff --git a/wct.config.json b/wct.config.json
@@ -1,56 +1,7 @@
 {
-   "plugins":{
-      "local":{
-         "browsers":[
-            {
-               "browserName":"phantom"
-            }
-         ]
-      },
-      "sauce":{
-         "disabled":true,
-         "browsers":[
-            {
-               "browserName":"chrome",
-               "platform":"OS X 10.11",
-               "version":""
-            },
-            {
-               "browserName":"chrome",
-               "platform":"Windows 10",
-               "version":""
-            },
-            {
-               "browserName":"firefox",
-               "platform":"OS X 10.11",
-               "version":""
-            },
-            {
-               "browserName":"firefox",
-               "platform":"Windows 10",
-               "version":""
-            },
-            {
-               "browserName":"safari",
-               "platform":"OS X 10.11",
-               "version":"9.0"
-            },
-            {
-               "browserName":"microsoftedge",
-               "platform":"Windows 10",
-               "version":""
-            },
-            {
-               "browserName":"internet explorer",
-               "platform":"Windows 10",
-               "version":"11"
-            },
-            {
-               "browserName":"internet explorer",
-               "platform":"Windows 8",
-               "version":"10"
-            }
-         ]
-      }
-   }
+  "plugins":{
+    "local":{
+      "browsers":["firefox"]
+    }
+  }
 }