@vaadin/vaadin-notification - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-notification",
-  "version": "1.1.0",
+  "version": "1.2.0-alpha1",
   "main": "vaadin-notification.js",
@@ -25,3 +25,4 @@ "author": "Vaadin Ltd",
     "supports-color": "3.1.2",
-    "type-detect": "1.0.0"
+    "type-detect": "1.0.0",
+    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
   },
@@ -36,6 +37,6 @@ "dependencies": {
   "devDependencies": {
-    "@polymer/iron-component-page": "^3.0.0-pre.18",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
-    "@webcomponents/webcomponentsjs": "^2.0.0",
-    "wct-browser-legacy": "^1.0.1",
+    "@polymer/iron-component-page": "^3.0.0-pre.15",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.15",
+    "@webcomponents/webcomponentsjs": "^2.0.0-beta.2",
+    "wct-browser-legacy": "^0.0.1-pre.11",
     "@vaadin/vaadin-button": "^2.1.0",
@@ -42,0 +43,0 @@ "@vaadin/vaadin-checkbox": "^2.2.1",

src/vaadin-notification.js

@@ -11,2 +11,3 @@ /**
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
@@ -190,5 +191,33 @@ /**
 /**
+ *
  * `<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).
+ * The content of the notification can be populated in two ways: imperatively by using renderer callback function
+ * and declaratively by using Polymer's Templates.
  *
+ * ### Rendering
+ *
+ * By default, the notification uses the content provided by using the renderer callback function.
+ *
+ * The renderer function provides `root`, `notification` arguments.
+ * Generate DOM content, append it to the `root` element and control the state
+ * of the host element by accessing `notification`. Before generating new content,
+ * users are able to check if there is already content in `root` for reusing it.
+ *
+ * ```html
+ * <vaadin-notification id="notification"></vaadin-notification>
  * ```
+ * ```js
+ * const notification = document.querySelector('#notification');
+ * notification.renderer = function(root) {
+ *   root.textContent = "Your work has been saved";
+ * };
+ * ```
+ *
+ * ### Polymer Templates
+ *
+ * Alternatively, the content can be provided with Polymer's Template.
+ * Notification finds the first child template and uses that in case renderer callback function
+ * is not provided. You can also set a custom template using the `template` property.
+ *
+ * ```
  * <vaadin-notification>
@@ -222,3 +251,3 @@ *   <template>
   static get version() {
-    return '1.1.0';
+    return '1.2.0-alpha1';
   }
@@ -255,3 +284,20 @@
         observer: '_positionChanged'
-      }
+      },
+
+      /**
+       * Custom function for rendering the content of the notification.
+       * Receives two arguments:
+       *
+       * - `root` The `<vaadin-notification-card>` DOM element. Append
+       *   your content to it.
+       * - `notification` The reference to the `<vaadin-notification>` element.
+       *
+       * **NOTE:** The renderer callback can be called multiple times with the previous content.
+       */
+      renderer: Function,
+
+      /**
+       * The template of the notification card content.
+       */
+      _notificationTemplate: Object
     };
@@ -262,6 +308,47 @@ }
     return [
-      '_durationChanged(duration, opened)'
+      '_durationChanged(duration, opened)',
+      '_templateOrRendererChanged(_notificationTemplate, renderer)'
     ];
   }
 
+  ready() {
+    super.ready();
+
+    this._observer = new FlattenedNodesObserver(this, info => {
+      this._setTemplateFromNodes(info.addedNodes);
+    });
+  }
+
+  _setTemplateFromNodes(nodes) {
+    this._notificationTemplate = nodes.filter(node => node.localName && node.localName === 'template')[0] || this._notificationTemplate;
+  }
+
+  _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {
+    if (template !== oldTemplate) {
+      this._notificationTemplate = undefined;
+    } else if (renderer !== oldRenderer) {
+      this.renderer = undefined;
+    }
+  }
+
+  _templateOrRendererChanged(template, renderer) {
+    if (template && renderer) {
+      this._removeNewRendererOrTemplate(template, this._oldTemplate, renderer, this._oldRenderer);
+      throw new Error('You should only use either a renderer or a template for dialog content');
+    }
+
+    this._oldTemplate = template;
+    this._oldRenderer = renderer;
+
+    if (renderer) {
+      this._card = this.$['vaadin-notification-card'];
+
+      while (this._card.firstChild) {
+        this._card.removeChild(this._card.firstChild);
+      }
+
+      this.renderer(this._card, this);
+    }
+  }
+
   /**
@@ -292,60 +379,69 @@ * Opens the notification.
       this._container.opened = true;
-      if (!this._instance) {
-        const template = this.querySelector('template');
-        if (!template._Templatizer) {
-          template._Templatizer = templatize(template, this, {
-            forwardHostProp: function(prop, value) {
-              if (this._instance) {
-                this._instance.forwardHostProp(prop, value);
-              }
-            }
-          });
-        }
-        this._instance = new template._Templatizer({});
+      if (!this._instance && !this.renderer) {
+        this._ensureTemplatized();
+      }
 
-        const templateRoot = template.getRootNode();
-        const isScoped = templateRoot !== document;
-        this._card = this.$['vaadin-notification-card'];
-        this._cardContent = this._card.shadowRoot.querySelector('[part~="content"]');
-        if (isScoped) {
+      this._animatedAppendNotificationCard();
+    } else if (this._card) {
+      this._closeNotificationCard();
+    }
+  }
 
-          if (!this._cardContent.shadowRoot) {
-            this._cardContent.attachShadow({mode: 'open'});
-          }
-          if (window.ShadyCSS && !window.ShadyCSS.nativeShadow) {
-            // Shady DOM
-            var shadyStyleScope = templateRoot.host && templateRoot.host.localName;
-            if (shadyStyleScope && shadyStyleScope.indexOf('-') === -1) {
-              shadyStyleScope = templateRoot.host.getAttribute('is');
-            }
+  _ensureTemplatized() {
+    this._notificationTemplate = this.querySelector('template') || this._notificationTemplate;
 
-            if (shadyStyleScope) {
-              this._cardContent.setAttribute('is', shadyStyleScope);
-            }
-          } else {
-            // Shadow DOM
-            const scopeCssText = Array.from(templateRoot.querySelectorAll('style'))
-              .reduce((result, style) => result + style.textContent, '')
-              // The overlay root’s :host styles should not apply inside the overlay
-              .replace(/:host/g, ':host-nomatch');
+    if (!this._notificationTemplate) {
+      return;
+    }
 
-            if (scopeCssText) {
-              const style = document.createElement('style');
-              style.textContent = scopeCssText;
-              this._cardContent.shadowRoot.appendChild(style);
-            }
+    if (!this._notificationTemplate._Templatizer) {
+      this._notificationTemplate._Templatizer = templatize(this._notificationTemplate, this, {
+        forwardHostProp: function(prop, value) {
+          if (this._instance) {
+            this._instance.forwardHostProp(prop, value);
           }
+        }
+      });
+    }
+    this._instance = new this._notificationTemplate._Templatizer({});
 
-          this._cardContent.shadowRoot.appendChild(this._instance.root);
-        } else {
-          this._card.appendChild(this._instance.root);
+    const templateRoot = this._notificationTemplate.getRootNode();
+    const isScoped = templateRoot !== document;
+    this._card = this.$['vaadin-notification-card'];
+    this._cardContent = this._card.shadowRoot.querySelector('[part~="content"]');
+    if (isScoped) {
+
+      if (!this._cardContent.shadowRoot) {
+        this._cardContent.attachShadow({mode: 'open'});
+      }
+      if (window.ShadyCSS && !window.ShadyCSS.nativeShadow) {
+        // Shady DOM
+        var shadyStyleScope = templateRoot.host && templateRoot.host.localName;
+        if (shadyStyleScope && shadyStyleScope.indexOf('-') === -1) {
+          shadyStyleScope = templateRoot.host.getAttribute('is');
         }
 
-        this._card.setAttribute('aria-label', this._card.textContent.trim());
+        if (shadyStyleScope) {
+          this._cardContent.setAttribute('is', shadyStyleScope);
+        }
+      } else {
+        // Shadow DOM
+        const scopeCssText = Array.from(templateRoot.querySelectorAll('style'))
+          .reduce((result, style) => result + style.textContent, '')
+          // The overlay root’s :host styles should not apply inside the overlay
+          .replace(/:host/g, ':host-nomatch');
+
+        if (scopeCssText) {
+          const style = document.createElement('style');
+          style.textContent = scopeCssText;
+          this._cardContent.shadowRoot.appendChild(style);
+        }
       }
 
-      this._animatedAppendNotificationCard();
-    } else if (this._card) {
-      this._closeNotificationCard();
+      this._cardContent.shadowRoot.appendChild(this._instance.root);
+    } else {
+      this._card.appendChild(this._instance.root);
     }
+
+    this._card.setAttribute('aria-label', this._card.textContent.trim());
   }
@@ -364,2 +460,6 @@
   _appendNotificationCard() {
+    if (!this._card) {
+      return;
+    }
+
     if (!this._container.shadowRoot.querySelector(`slot[name="${this.position}"]`)) {
@@ -366,0 +466,0 @@ window.console.warn(

test/test-suites.js

 window.VaadinNotificationSuites = [
   'vaadin-notification-test.html',
   'notification-styling-test.html',
+  'notification-renderer-test.html',
   'notification-template-test.html',
@@ -5,0 +6,0 @@ 'multiple-notification-test.html',

test/visual/test.js

@@ -16,10 +16,11 @@ gemini.suite('vaadin-notification', function(rootSuite) {
     .after(goToAboutBlank);
-
-  gemini.suite('default-tests', function(suite) {
-    suite
-      .setUrl('default.html')
-      .setCaptureElements('body')
-      .capture('default');
+  ['lumo', 'material'].forEach(theme => {
+    gemini.suite(`default-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`default.html?theme=${theme}`)
+        .setCaptureElements('body')
+        .capture('default');
+    });
   });
 
 });

theme/lumo/vaadin-notification-styles.js

@@ -6,2 +6,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -8,0 +9,0 @@ $_documentContainer.innerHTML = `<dom-module id="lumo-notification-card" theme-for="vaadin-notification-card">

theme/material/vaadin-notification-styles.js

@@ -5,2 +5,3 @@ import '@vaadin/vaadin-material-styles/color.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -7,0 +8,0 @@ $_documentContainer.innerHTML = `<dom-module id="material-notification-container" theme-for="vaadin-notification-container">

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

174512

increased by32.49%

Number of package files

22

increased by15.79%

Lines of code

739

increased by13.87%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes