diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..58d9402 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +test/acceptance/* +reports diff --git a/.eslintrc.json b/.eslintrc.json index d41a881..10677a2 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,3 @@ { - "extends": "brightspace/polymer-config" + "extends": "brightspace/polymer-3-config" } diff --git a/.gitignore b/.gitignore index 3bd73dc..504afef 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,2 @@ -bower_components -bower_components-1.x -bower-1.x.json node_modules/ package-lock.json diff --git a/bower.json b/bower.json deleted file mode 100644 index 30f4d32..0000000 --- a/bower.json +++ /dev/null @@ -1,45 +0,0 @@ -{ - "name": "d2l-alert", - "description": "Polymer-based web component for a D2L alert", - "main": "d2l-alert.html", - "license": "Apache-2.0", - "ignore": [ - "demo", - "test", - ".editorconfig", - ".eslintrc.json", - ".gitignore", - ".travis.yml", - "alert.gif", - "index.html", - "package.json", - "polymer.json", - "wct.config.json" - ], - "dependencies": { - "d2l-button": "^4.7.5", - "d2l-colors": "^3.1.2", - "d2l-icons": "^5.1.0", - "d2l-localize-behavior": "^1.1.3", - "d2l-typography": "^6.1.3", - "polymer": "1.9.1 - 2" - }, - "devDependencies": { - "iron-component-page": "^2.0.0", - "iron-demo-helpers": "^2.0.0", - "web-component-tester": "^6.0.0" - }, - "variants": { - "1.x": { - "dependencies": { - "polymer": "^1.9.1" - }, - "resolutions": { - "webcomponentsjs": "^0.7" - } - } - }, - "resolutions": { - "webcomponentsjs": "^1.0.0" - } -} diff --git a/d2l-alert-shared-styles.html b/d2l-alert-shared-styles.js similarity index 50% rename from d2l-alert-shared-styles.html rename to d2l-alert-shared-styles.js index 3ec1020..399880a 100644 --- a/d2l-alert-shared-styles.html +++ b/d2l-alert-shared-styles.js @@ -1,6 +1,8 @@ - - - +import '../@polymer/polymer/polymer-legacy.js'; +import '../d2l-colors/d2l-colors.js'; +const $_documentContainer = document.createElement('template'); + +$_documentContainer.innerHTML = ` - +`; + +document.head.appendChild($_documentContainer.content); diff --git a/d2l-alert-toast.html b/d2l-alert-toast.html deleted file mode 100644 index 60ff89c..0000000 --- a/d2l-alert-toast.html +++ /dev/null @@ -1,177 +0,0 @@ - - - - - - - - diff --git a/d2l-alert-toast.js b/d2l-alert-toast.js new file mode 100644 index 0000000..01f0213 --- /dev/null +++ b/d2l-alert-toast.js @@ -0,0 +1,186 @@ +/** +`d2l-alert-toast` +Polymer-based web component for a D2L toast alert + +@demo demo/index.html +*/ +/* + FIXME(polymer-modulizer): the above comments were extracted + from HTML and may be out of place here. Review them and + then delete this comment! +*/ +import '../@polymer/polymer/polymer-legacy.js'; + +import './d2l-alert.js'; +import { Polymer } from '../@polymer/polymer/lib/legacy/polymer-fn.js'; +const $_documentContainer = document.createElement('template'); + +$_documentContainer.innerHTML = ` + + +`; + +document.head.appendChild($_documentContainer.content); +Polymer({ + is: 'd2l-alert-toast', + + /** + * Fired when the custom action button is pressed. + * + * @event d2l-alert-button-pressed + */ + + /** + * Fired when the alert is closed/hidden. + * + * @event d2l-alert-closed + */ + + listeners: { + 'd2l-alert-closed': '_close' + }, + + properties: { + + /** + * Type of alert to display. Valid values are 'default', 'success', 'critical', and 'warning'. + * Values "call-to-action" and "error" have been deprecated. + * + * NOTE: Toast alerts should not be used with 'critical' or 'warning' colors. + */ + type: { + type: String, + value: 'default', + reflectToAttribute: true + }, + /** + * Text for a custom action button. If provided, a button will be rendered with the specified text. + */ + buttonText: { + type: String, + value: null + }, + /** + * Whether to render a close button, allowing the user to hide the alert. + */ + hideCloseButton: { + type: Boolean, + value: false + }, + /** + * Additional text that will go underneath the heading + */ + subtext: { + type: String, + value: null + }, + /** + * Whether to open the toast alert (make visible) or not. + */ + open:{ + type: Boolean, + value: false, + reflectToAttribute: true, + observer: '_changeOpen' + }, + /** + * Whether to automatically close after 2.5 seconds or stay open + */ + autoclose:{ + type: Number, + value: 1, + observer: '_changeOpen' + } + }, + + _changeOpen: function() { + if (!this._toastContainer) { + this._toastContainer = this.$$('div.d2l-alert-toast-container'); + } + + if (this.open) { + requestAnimationFrame(function() { + requestAnimationFrame(function() { + this._toastContainer.classList.add('d2l-alert-toast-container-opened'); + this._toastContainer.setAttribute('role', 'alert'); + + if (this.autoclose === 1) { + //clear the setTimeout below that will close after 2.5 seconds if you closed the toast another way, and are re-opening (you'll want a fresh 2.5 seconds) + if (this._setTimeoutId > -1) { + clearTimeout(this._setTimeoutId); + } + + this._setTimeoutId = setTimeout(function() { + this._toastContainer.classList.remove('d2l-alert-toast-container-opened'); + this._setTimeoutId = -1; + }.bind(this), 2500); + } + }.bind(this)); + }.bind(this)); + + } else { + this._toastContainer.classList.remove('d2l-alert-toast-container-opened'); + this._toastContainer.removeAttribute('role'); + } + }, + + _close: function() { + this.open = false; + //this removes the hidden attribute from the alert element, which is necessary for it to be visible again if we want to open it + var alertElement = this.$$('d2l-alert'); + if (alertElement && alertElement.hasAttribute('hidden')) { + alertElement.removeAttribute('hidden'); + } + }, + + //make sure that the transition has ended before setting open property to false, because it sets display:none and stops the transition from happening + //also, check for the event triggered by the end of visibility transition, as the toast will no longer be visible after this point + _setClosedClass: function(event) { + if (!this._toastContainer.classList.contains('d2l-alert-toast-container-opened') && event.propertyName === 'visibility') { + this.open = false; + } + } +}); diff --git a/d2l-alert.html b/d2l-alert.js similarity index 53% rename from d2l-alert.html rename to d2l-alert.js index 39a87a3..5736093 100644 --- a/d2l-alert.html +++ b/d2l-alert.js @@ -1,19 +1,27 @@ - - - - - - - - - - - - +}); + diff --git a/test/index.html b/test/index.html index 2e74961..7b9e96d 100644 --- a/test/index.html +++ b/test/index.html @@ -2,8 +2,8 @@ - - + +