Dialog: Add typings

docs/index.html

@@ -175,14 +175,14 @@ <h2 class="odo-component__title">
                   <div class="odo-component__content">
                     <h2 class="odo-component__title">
                       <span class="odo-component__title-text">Dialog</span>
-                      <span class="odo-component__badge">v1.0.0</span>
+                      <span class="odo-component__badge">v1.1.0</span>
                     </h2>
 
 
                       <p class="odo-component__meta">
-                          <img height="20" src="https://img.shields.io/badge/coverage-100%25-brightgreen.svg" title="Statements: 100% (223 / 223)
-Branches: 100% (77 / 77)
-Functions: 100% (46 / 46)" alt="coverage">
+                          <img height="20" src="https://img.shields.io/badge/coverage-100%25-brightgreen.svg" title="Statements: 100% (232 / 232)
+Branches: 100% (80 / 80)
+Functions: 100% (47 / 47)" alt="coverage">
                           <img height="20" src="https://img.shields.io/badge/tag-ui-blue.svg" alt="tag: ui">
                       </p>
 

docs/odo-dialog/index.html

@@ -89,8 +89,6 @@ <h2 class="tombstoned-content__title">A shoreline in Vancouver, Canada</h2>
 
     </div>
 
-    <br/>
-
     <pre><code class="language-markup">&lt;button data-odo-dialog-open="default"&gt;Open the default dialog&lt;/button&gt;
 
 &lt;!-- Could be elsewhere in your markup -->
@@ -105,25 +103,45 @@ <h2 class="tombstoned-content__title">A shoreline in Vancouver, Canada</h2>
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
-    <pre><code class="language-javascript" data-language="javascript">const defaultDialog = new OdoDialog(document.getElementById('default'));</code></pre><br/>
+    <pre><code class="language-javascript" data-language="javascript">const defaultDialog = new OdoDialog(document.getElementById('default'));</code></pre>
 
     <h3>Public Events</h3>
-    <p>The opened event is triggered when the content has finished its transition in, while the closed event triggers once the dialog has completely transitioned out.</p>
+    <p>The opened event is triggered when the content has finished its transition in, while the closed event triggers once the dialog has completely transitioned out. In case you need to retrieve some information from the button which triggered the dialog to open, you can subscribe to the <code>TRIGGER_CLICKED</code> event.</p>
     <pre><code class="language-javascript">defaultDialog.on(OdoDialog.EventType.OPENED, function () {
   console.log('default dialog opened');
 });
 
 defaultDialog.on(OdoDialog.EventType.CLOSED, function () {
   console.log('default dialog closed');
-});</code></pre>
+});
 
-    <br/>
+defaultDialog.on(OdoDialog.EventType.TRIGGER_CLICKED, function (triggerElement) {
+  console.log('dialog about to open because you clicked:', triggerElement);
+});</code></pre>
 
     <h3>Public Methods</h3>
-    <pre><code class="language-javascript">defaultDialog.open();
-defaultDialog.close();
-defaultDialog.dispose();
-defaultDialog.getByClass(className);</code></pre>
+    <pre><code class="language-javascript">defaultDialog.open() // Open the dialog
+defaultDialog.close() // Close the dialog
+defaultDialog.dispose() // Close the dialog, remove event listeners and element references
+defaultDialog.getByClass(className) // Find a single element by class inside the dialog</code></pre>
+
+    <h3>Public Properties</h3>
+    <pre><code class="language-javascript">defaultDialog.element // Base element
+defaultDialog.options // options object
+defaultDialog.id // Unique id for the dialog. Same as the id attribute of the base element
+defaultDialog.isOpen // Whether the dialog is currently open</code></pre>
+
+    <h3>Protected Methods &amp; Properties</h3>
+    <p>If you create a subclass of OdoDialog, you will have access to these as well<sup>*</sup>.</p>
+
+    <pre><code class="language-javascript">defaultDialog.onClick(evt) // Delegated click handler on the dialog.
+defaultDialog.onKeyPress(evt) // Listens for the ESC key and traps the TAB key.
+defaultDialog.onResize(viewportHeight) // Sets the height of the dialog on viewport resize.
+defaultDialog.content // Dialog content (role=document)
+defaultDialog.backdrop // The background behind the dialog
+defaultDialog.isAnimating // Whether the dialog is currently animating (opening/closing)
+</code></pre>
+    <p><sup>*</sup><small>Because this is JavaScript, you have access to them already.</small></p>
 
     <h2>Changing Transitions</h2>
     <p>In addition to the default fade/scale transition, <code>OdoDialog</code> comes with two other transitions: <code>odo-dialog--fade</code> and <code>odo-dialog--zoom-in</code>. The other options in the <code>&lt;select&gt;</code> below are custom transitions added to this page. See the next section for details.</p>
@@ -150,8 +168,6 @@ <h2 class="no-margin-top" id="animation-changer-title">Cat Ipsum</h2>
       </select>
     </div>
 
-    <br/>
-
     <h2>Add Custom Transitions</h2>
     <p>You can add your own transitions too.</p>
     <p><code>OdoDialog</code> follows a similar transition sequence to <a href="https://vuejs.org/v2/guide/transitions.html">Vue.js transition effects</a>.</p>

docs/odo-dialog/scripts/demo.js

@@ -61,6 +61,10 @@ defaultDialog.on(OdoDialog.EventType.CLOSED, function () {
   console.log('default dialog closed');
 });
 
+defaultDialog.on(OdoDialog.EventType.TRIGGER_CLICKED, function (triggerElement) {
+  console.log('dialog about to open because you clicked:', triggerElement);
+});
+
 var styledDialog = new OdoDialog(document.getElementById('styled'));
 
 var animationChanger = new OdoDialog(document.getElementById('animation-changer'));
@@ -110,40 +114,56 @@ var ScrollToCloseDialog = function (_OdoDialog) {
 
     var _this = possibleConstructorReturn(this, _OdoDialog.call(this, element, options));
 
-    _this.onScroll = _this.onScroll.bind(_this);
-    _this.on(OdoDialog.EventType.OPENED, _this._onOpened.bind(_this));
-    _this.on(OdoDialog.EventType.CLOSED, _this._onClosed.bind(_this));
+    _this._onScroll = _this._onScroll.bind(_this);
+    _this._onOpened = _this._onOpened.bind(_this);
+    _this._onClosed = _this._onClosed.bind(_this);
+    _this._saveCloseOffset = _this._saveCloseOffset.bind(_this);
+    _this.on(OdoDialog.EventType.OPENED, _this._onOpened);
+    _this.on(OdoDialog.EventType.CLOSED, _this._onClosed);
     return _this;
   }
 
-  ScrollToCloseDialog.prototype._onOpened = function _onOpened() {
+  ScrollToCloseDialog.prototype._saveCloseOffset = function _saveCloseOffset() {
     var viewportHeight = window.innerHeight;
 
     // The extra margin is on the inner element, so it's included in the height
     // of the content element.
     var contentHeight = this.element.scrollHeight - viewportHeight;
 
-    // Require the user to scroll the content + 7/8 of the extra space.
-    this.closeOffset = contentHeight - Math.round(viewportHeight / 8);
+    this.closeOffset = contentHeight - Math.round(viewportHeight / ScrollToCloseDialog.VIEWPORT_DIVISOR);
+  };
 
-    // Listen for scrolls.
-    this.element.addEventListener('scroll', this.onScroll);
+  ScrollToCloseDialog.prototype._onOpened = function _onOpened() {
+    this._saveCloseOffset();
+    this.element.addEventListener('scroll', this._onScroll);
+    window.addEventListener('resize', this._saveCloseOffset);
   };
 
   ScrollToCloseDialog.prototype._onClosed = function _onClosed() {
-    this.element.removeEventListener('scroll', this.onScroll);
+    this.element.removeEventListener('scroll', this._onScroll);
+    window.removeEventListener('resize', this._saveCloseOffset);
   };
 
-  ScrollToCloseDialog.prototype.onScroll = function onScroll() {
-    var scrollTop = this.element.scrollTop;
-    if (scrollTop > this.closeOffset) {
+  ScrollToCloseDialog.prototype._onScroll = function _onScroll() {
+    if (this.element.scrollTop > this.closeOffset) {
       this.close();
     }
   };
 
+  ScrollToCloseDialog.prototype.dispose = function dispose() {
+    this.off(OdoDialog.EventType.OPENED, this._onOpened);
+    this.off(OdoDialog.EventType.CLOSED, this._onClosed);
+    _OdoDialog.prototype.dispose.call(this);
+  };
+
   return ScrollToCloseDialog;
 }(OdoDialog);
 
+// Require the user to scroll the content + x-1/x of the extra space.
+
+
+ScrollToCloseDialog.VIEWPORT_DIVISOR = 6;
+
 var scrollToClose = new ScrollToCloseDialog(document.getElementById('scroll-to-close'));
 
 window.scrollToClose = scrollToClose;

packages/odo-dialog/coverage.json

@@ -1 +1 @@
-{"lines":{"total":222,"covered":222},"statements":{"total":225,"covered":225},"functions":{"total":46,"covered":46},"branches":{"total":79,"covered":79},"coverage":100}
+{"lines":{"total":229,"covered":229},"statements":{"total":232,"covered":232},"functions":{"total":47,"covered":47},"branches":{"total":80,"covered":80},"coverage":100}