@ulu/frontend 0.1.0-beta.80 → 0.1.0-beta.81

package/docs-dev/javascript/ui-resizer/index.html

@@ -5202,8 +5202,23 @@
                     
                     <li><a href="#new-exports.resizer(container%2C-control%2C-options)">new exports.Resizer(container, control, options)</a>
             		</li>
+
+                    <li><a href="#resizer.destroy()">resizer.destroy()</a>
+            		</li>
                 </ol>
             		</li>
+
+                    <li><a href="#ui%2Fresizer~multiplier">ui/resizer~multiplier</a>
+            		</li>
+
+                    <li><a href="#ui%2Fresizer~overridemaxdimensions">ui/resizer~overrideMaxDimensions</a>
+            		</li>
+
+                    <li><a href="#ui%2Fresizer~fromx-%3A-%22left%22-%7C-%22right%22-%7C-null">ui/resizer~fromX : "left" | "right" | null</a>
+            		</li>
+
+                    <li><a href="#ui%2Fresizer~fromy-%3A-%22top%22-%7C-%22bottom%22-%7C-null">ui/resizer~fromY : "top" | "bottom" | null</a>
+            		</li>
                 </ol>
             </div>
 			</div>
@@ -5220,9 +5235,22 @@
 <ul>
 <li><a href="#module_ui/resizer">ui/resizer</a>
 <ul>
+<li><em>static</em>
+<ul>
 <li><a href="#module_ui/resizer.Resizer">.Resizer</a>
 <ul>
 <li><a href="#new_module_ui/resizer.Resizer_new">new exports.Resizer(container, control, options)</a></li>
+<li><a href="#module_ui/resizer.Resizer+destroy">.destroy()</a></li>
+</ul>
+</li>
+</ul>
+</li>
+<li><em>inner</em>
+<ul>
+<li><a href="#module_ui/resizer..multiplier">~multiplier</a></li>
+<li><a href="#module_ui/resizer..overrideMaxDimensions">~overrideMaxDimensions</a></li>
+<li><a href="#module_ui/resizer..fromX">~fromX</a> : <code>&quot;left&quot;</code> | <code>&quot;right&quot;</code> | <code>null</code></li>
+<li><a href="#module_ui/resizer..fromY">~fromY</a> : <code>&quot;top&quot;</code> | <code>&quot;bottom&quot;</code> | <code>null</code></li>
 </ul>
 </li>
 </ul>
@@ -5230,14 +5258,23 @@
 </ul>
 <p><a name="module_ui/resizer.Resizer"></a></p>
 <h2 id="ui%2Fresizer.resizer" tabindex="-1">ui/resizer.Resizer</h2>
-<p><strong>Kind</strong>: static class of <a href="#module_ui/resizer"><code>ui/resizer</code></a><br>
-<a name="new_module_ui/resizer.Resizer_new"></a></p>
+<p><strong>Kind</strong>: static class of <a href="#module_ui/resizer"><code>ui/resizer</code></a></p>
+<ul>
+<li><a href="#module_ui/resizer.Resizer">.Resizer</a>
+<ul>
+<li><a href="#new_module_ui/resizer.Resizer_new">new exports.Resizer(container, control, options)</a></li>
+<li><a href="#module_ui/resizer.Resizer+destroy">.destroy()</a></li>
+</ul>
+</li>
+</ul>
+<p><a name="new_module_ui/resizer.Resizer_new"></a></p>
 <h3 id="new-exports.resizer(container%2C-control%2C-options)" tabindex="-1">new exports.Resizer(container, control, options)</h3>
 <table>
 <thead>
 <tr>
 <th>Param</th>
 <th>Type</th>
+<th>Default</th>
 <th>Description</th>
 </tr>
 </thead>
@@ -5245,35 +5282,67 @@
 <tr>
 <td>container</td>
 <td><code>Node</code></td>
-<td>Container to be resize</td>
+<td></td>
+<td>Container to be resized</td>
 </tr>
 <tr>
 <td>control</td>
 <td><code>Node</code></td>
+<td></td>
 <td>Resize handle element</td>
 </tr>
 <tr>
 <td>options</td>
 <td><code>Object</code></td>
-<td>Defualt can be changed on class</td>
+<td></td>
+<td>Options to configure the resizer.</td>
 </tr>
 <tr>
 <td>options.debug</td>
 <td><code>Boolean</code></td>
-<td>Enable non-essential debugging logs</td>
+<td></td>
+<td>Enable non-essential debugging logs.</td>
 </tr>
 <tr>
-<td>options.overrideMaxWidth</td>
+<td>options.overrideMaxDimensions</td>
 <td><code>Boolean</code></td>
-<td>When script is activated by handle remove the elements max-width and allow the width of the resize to exceed the max (default false)</td>
+<td></td>
+<td>When script is activated by handle, remove the element's max-width/max-height and allow the resize to exceed them (default false).</td>
 </tr>
 <tr>
-<td>options.fromLeft</td>
-<td><code>Boolean</code></td>
-<td>The script should assume the handle is on the left side of the element</td>
+<td>[options.fromX]</td>
+<td><code>&quot;left&quot;</code> | <code>&quot;right&quot;</code> | <code>null</code></td>
+<td><code></code></td>
+<td>Horizontal resizing direction.</td>
+</tr>
+<tr>
+<td>[options.fromY]</td>
+<td><code>&quot;top&quot;</code> | <code>&quot;bottom&quot;</code> | <code>null</code></td>
+<td><code></code></td>
+<td>Vertical resizing direction.</td>
 </tr>
 </tbody>
 </table>
+<p><a name="module_ui/resizer.Resizer+destroy"></a></p>
+<h3 id="resizer.destroy()" tabindex="-1">resizer.destroy()</h3>
+<p>Cleans up event listeners to prevent memory leaks.</p>
+<p><strong>Kind</strong>: instance method of <a href="#module_ui/resizer.Resizer"><code>Resizer</code></a><br>
+<a name="module_ui/resizer..multiplier"></a></p>
+<h2 id="ui%2Fresizer~multiplier" tabindex="-1">ui/resizer~multiplier</h2>
+<p>Amount to increase size by (ie. pointer movement * multiplier)</p>
+<p><strong>Kind</strong>: inner property of <a href="#module_ui/resizer"><code>ui/resizer</code></a><br>
+<a name="module_ui/resizer..overrideMaxDimensions"></a></p>
+<h2 id="ui%2Fresizer~overridemaxdimensions" tabindex="-1">ui/resizer~overrideMaxDimensions</h2>
+<p>Remove max-width, max-height</p>
+<p><strong>Kind</strong>: inner property of <a href="#module_ui/resizer"><code>ui/resizer</code></a><br>
+<a name="module_ui/resizer..fromX"></a></p>
+<h2 id="ui%2Fresizer~fromx-%3A-%22left%22-%7C-%22right%22-%7C-null" tabindex="-1">ui/resizer~fromX : <code>&quot;left&quot;</code> | <code>&quot;right&quot;</code> | <code>null</code></h2>
+<p>Specifies the horizontal edge from which resizing occurs.<code>null</code> means no horizontal resizing.- Default null</p>
+<p><strong>Kind</strong>: inner property of <a href="#module_ui/resizer"><code>ui/resizer</code></a><br>
+<a name="module_ui/resizer..fromY"></a></p>
+<h2 id="ui%2Fresizer~fromy-%3A-%22top%22-%7C-%22bottom%22-%7C-null" tabindex="-1">ui/resizer~fromY : <code>&quot;top&quot;</code> | <code>&quot;bottom&quot;</code> | <code>null</code></h2>
+<p>Specifies the vertical edge from which resizing occurs.- <code>null</code> means no vertical resizing.- Default null</p>
+<p><strong>Kind</strong>: inner property of <a href="#module_ui/resizer"><code>ui/resizer</code></a></p>
 
     </div>
   </div>

package/docs-dev/javascript/utils-class-logger/index.html

@@ -5337,7 +5337,7 @@
 </table>
 <p><a name="module_utils/class-logger..config"></a></p>
 <h2 id="utils%2Fclass-logger~config" tabindex="-1">utils/class-logger~config</h2>
-<p>Configuration Object</p>
+<p>Global Configuration Object</p>
 <p><strong>Kind</strong>: inner constant of <a href="#module_utils/class-logger"><code>utils/class-logger</code></a></p>
 
     </div>

package/docs-dev/sass/components/css-icon/index.html

@@ -5459,7 +5459,7 @@
 <li><strong>Group:</strong> css-icon</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 101-103</li>
-<li><strong>Lines (code):</strong> 105-438</li>
+<li><strong>Lines (code):</strong> 105-448</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>

package/docs-dev/sass/components/modal/index.html

@@ -5281,6 +5281,7 @@
   <span class="pjs-token pjs-string">"resizer-color"</span><span class="pjs-token pjs-punctuation">:</span>                  <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>99<span class="pjs-token pjs-punctuation">,</span> 99<span class="pjs-token pjs-punctuation">,</span> 99<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"resizer-color-hover"</span><span class="pjs-token pjs-punctuation">:</span>            black<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"resizer-width"</span><span class="pjs-token pjs-punctuation">:</span>                  1.25rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"resizer-center-size"</span> <span class="pjs-token pjs-punctuation">:</span>           1.65rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"title-color"</span><span class="pjs-token pjs-punctuation">:</span>                    white<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"title-font-weight"</span><span class="pjs-token pjs-punctuation">:</span>              bold<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"title-font-family"</span> <span class="pjs-token pjs-punctuation">:</span>             <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
@@ -5298,8 +5299,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 31-71</li>
-<li><strong>Lines (code):</strong> 73-117</li>
+<li><strong>Lines (comments):</strong> 31-72</li>
+<li><strong>Lines (code):</strong> 74-119</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5506,6 +5507,12 @@
 <td style="text-align:left">The width of the resizer.</td>
 </tr>
 <tr>
+<td style="text-align:left">resizer-center-size</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">1.65rem</td>
+<td style="text-align:left">The width/height of the resizer (in bottom right corner) used when position center with resize enabled</td>
+</tr>
+<tr>
 <td style="text-align:left">title-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">white</td>
@@ -5563,8 +5570,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 119-122</li>
-<li><strong>Lines (code):</strong> 124-126</li>
+<li><strong>Lines (comments):</strong> 121-124</li>
+<li><strong>Lines (code):</strong> 126-128</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5603,8 +5610,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 138-140</li>
-<li><strong>Lines (code):</strong> 142-500</li>
+<li><strong>Lines (comments):</strong> 140-142</li>
+<li><strong>Lines (code):</strong> 144-513</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5627,8 +5634,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 128-131</li>
-<li><strong>Lines (code):</strong> 133-136</li>
+<li><strong>Lines (comments):</strong> 130-133</li>
+<li><strong>Lines (code):</strong> 135-138</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

package/js/events/index.js

@@ -21,30 +21,31 @@ const events = {
    * - Is triggered by modules that were responsible for modifying the page
    */
   pageModified(context) {
-    context.dispatchEvent(new CustomEvent(getName("pageModified"), { bubbles: true }));
+    context.dispatchEvent(createEvent("pageModified"));
   },
   /**
    * Event called when page is resized
    */
   pageResized(context) {
-    context.dispatchEvent(new CustomEvent(getName("pageResized"), { bubbles: true }));
+    context.dispatchEvent(createEvent("pageResized"));
   },
   /**
    * Event dispatched before page print begins (teardown/restructure/hide things)
    */
   beforePrint(context) {
-    context.dispatchEvent(new CustomEvent(getName("beforePrint"), { bubbles: true }));
+    context.dispatchEvent(createEvent("beforePrint"));
   },
   /**
    * Event dispatched after page print (cleanup)
    */
   afterPrint(context) {
-    context.dispatchEvent(new CustomEvent(getName("afterPrint"), { bubbles: true }));
+    context.dispatchEvent(createEvent("afterPrint"));
   }
 };
 
 /**
- * Triggers one of our custom events
+ * Triggers one of our custom events (page/document level events)
+ * - UI components may dispatch their own events, this is just used for system wide events
  * @param {String} type Type of event to dispatch
  * @param {Node} context Element to trigger the event from
  * @example
@@ -62,6 +63,7 @@ export function dispatch(type, context) {
 
 /**
  * Namespaced event
+ * - Should be used for all ulu script/component events
  * @param {String} type Type of event to get the actual event name for
  * @returns {String}
  */
@@ -69,6 +71,16 @@ export function getName(type) {
   return "ulu:" + type;
 }
 
+/**
+ * Create ulu namespaced custom event
+ * @param {String} type Event base name (not prefixed)
+ * @param {any} data Custom data to pass with the event (will be available as `event.detail`)
+ * @param {Object} options CustomEvent options default `{ bubbles: true }`. If `detail` is also provided, it will be merged with this options object and will override the 'data' argument for this function
+ */
+export function createEvent(type, data = null, options = { bubbles: true }) {
+  return new CustomEvent(getName(type), { detail: data, ...options });
+}
+
 /**
  * Setup resize handler/dispatch
  */

package/js/settings.js

@@ -8,6 +8,7 @@
  * @typedef {object} Defaults
  * @property {string} iconClassClose - The CSS class string for the close icon
  * @property {string} iconClassDragX - The CSS class string for the drag X icon
+ * @property {string} iconClassDragBoth - The CSS class string for the dragging in both directions
  * @property {string} iconClassPrevious - The CSS class string for the previous icon
  * @property {string} iconClassNext - The CSS class string for the next icon
  * @property {string} cssvarPrefix - The prefix to use for CSS custom properties
@@ -19,6 +20,7 @@
 const defaults = {
   iconClassClose: "css-icon css-icon--close",
   iconClassDragX: "css-icon css-icon--drag-x",
+  iconClassDragBoth: "css-icon css-icon--drag-both",
   iconClassPrevious: "css-icon  css-icon--angle-left",
   iconClassNext: "css-icon  css-icon--angle-right",
   cssvarPrefix: "",

package/js/ui/dialog.js

@@ -4,6 +4,7 @@
 
 import { ComponentInitializer } from "../utils/system.js";
 import { wasClickOutside, preventScroll as setupPreventScroll } from "@ulu/utils/browser/dom.js";
+import { debounce } from "@ulu/utils/performance.js";
 import { pauseVideos as pauseYoutubeVideos, prepVideos as prepYoutubeVideos } from "../utils/pause-youtube-video.js";
 
 /**
@@ -131,9 +132,37 @@ export function setupDialog(dialog, userOptions) {
   const options = Object.assign({}, currentDefaults, userOptions);
   const body = document.body;
   const { preventScrollShift: preventShift } = options;
+  let isPointerDown = false;
+  let isResizing = false;
+
+  
+  // This was added to provide a simple flag for "isPointerDown" so that 
+  // we can disable click outside if it was a click that originated inside the dialog, probable from 
+  // native resize handle. If this causes issues in the future we can explore tracking the pointer
+  // with setPointerCapture but I'm worried about it affecting inner elements with their own pointer events
+  // This seems like it will be ok we just don't allow outside closing if there was pointerdown from within the modal
+  dialog.addEventListener("pointerdown", handlePointerdown);
 
   dialog.addEventListener("click", handleClicks);
 
+  // Watching for resizes to avoid closing outside during resizes
+  // - There is no resize event for css resize (so this uses pointerdown and resize observer)
+  const handleResizeEnd = debounce(() => {
+    if (isResizing && !isPointerDown) {
+      isResizing = false;
+    }
+  }, 500);
+
+  const resizeObserver = new ResizeObserver(() => {
+    if (isPointerDown) {
+      if (!isResizing) {
+        isResizing = true;
+      }
+      handleResizeEnd();
+    }
+  });
+  resizeObserver.observe(dialog);
+
   if (options.documentEnd) {
     body.appendChild(dialog);
   }
@@ -158,12 +187,27 @@ export function setupDialog(dialog, userOptions) {
     });
   }
 
+  function handlePointerdown() {
+    if (isPointerDown) return;
+    isPointerDown = true;
+
+    const done = () => {
+      // After event queue (click) - so after click handler for outside is called
+      setTimeout(() => {
+        isPointerDown = false;
+        isResizing = false;
+      }, 0);
+    };
+    document.addEventListener("pointerup", done, { once: true });
+    document.addEventListener("pointercancel", done, { once: true });
+  }
+
   function handleClicks(event) {
     const { target } = event;
+    const targetIsDialog = target === dialog;
     const closeFromButton = target.closest(initializer.attributeSelector("close"));
-    let closeFromOutside = options.clickOutsideCloses && 
-                           target === dialog && 
-                           wasClickOutside(dialog, event);
+    const allowCloseOutside = !isResizing && options.clickOutsideCloses;
+    const closeFromOutside = allowCloseOutside && targetIsDialog && wasClickOutside(dialog, event);
     if (closeFromOutside || closeFromButton) {
       if (options.pauseVideos) {
         pauseVideos(dialog);

package/js/ui/modal-builder.js

@@ -78,14 +78,16 @@ export const defaults = {
   footerHtml: null,
   classCloseIcon: wrapSettingString("iconClassClose"),
   classResizerIcon: wrapSettingString("iconClassDragX"),
+  classResizerIconBoth: wrapSettingString("iconClassDragBoth"),
   debug: false,
   templateCloseIcon(config) {
     const { baseClass, classCloseIcon } = config;
     return `<span class="${ baseClass }__close-icon ${ classCloseIcon }" aria-hidden="true"></span>`;
   },
   templateResizerIcon(config) {
-    const { baseClass, classResizerIcon } = config;
-    return `<span class="${ baseClass }__resizer-icon ${ classResizerIcon }" aria-hidden="true"></span>`;
+    const { baseClass, classResizerIcon, classResizerIconBoth } = config;
+    const iconClass = config.position === "center" ? classResizerIconBoth : classResizerIcon;
+    return `<span class="${ baseClass }__resizer-icon ${ iconClass }" aria-hidden="true"></span>`;
   },
   /**
    * Default modal template
@@ -129,7 +131,7 @@ export const defaults = {
         ` : "" }
         <div class="${ baseClass }__body" ${ initializer.getAttribute("body") }></div>
         ${ footerHtml ? `<div class="${ baseClass }__footer">${ footerHtml }</div>`: "" }
-        ${ config.hasResizer ? 
+        ${ config.allowResize ? 
           `<div class="${ baseClass }__resizer" ${ initializer.getAttribute("resizer") }>
             ${ config.templateResizerIcon(config) }
           </div>` : "" 
@@ -172,9 +174,8 @@ export function buildModal(content, options) {
 
   const config = Object.assign({}, currentDefaults, options);
 
-  if (config.position !== "center" && config.allowResize) {
-    config.hasResizer = true;
-  }
+  const { position } = config;
+
   if (config.debug) {
     initializer.log(config, content);
   }
@@ -186,7 +187,7 @@ export function buildModal(content, options) {
   const modal = createElementFromHtml(markup.trim());
   const selectChild = key => modal.querySelector(initializer.attributeSelector(key));
   const body = selectChild("body");
-  const resizer = selectChild("resizer");
+  const resizerElement = selectChild("resizer");
   const dialogOptions = separateDialogOptions(config);
 
   // Replace content with new dialog, and then insert the content into the new dialogs body
@@ -209,10 +210,20 @@ export function buildModal(content, options) {
     }
   }
 
-  if (config.hasResizer) {
-    new Resizer(modal, resizer, {
-      fromLeft: config.position === "right"
-    });
+  let resizer;
+  const resizablePositions = ["left", "right", "center"];
+  const isCenter = position === "center";
+  const isRight = position === "right";
+
+  if (config.allowResize) {
+    if (resizablePositions.includes(position)) {
+      const resizerOptions = isCenter ? 
+        { fromX: "right", fromY: "bottom", multiplier: 2 } : 
+        { fromX: isRight ? "left" : "right" };
+      resizer = new Resizer(modal, resizerElement, resizerOptions);
+    } else {
+      console.warn(`${ position } is not supported for resizing`);
+    }
   }
 
   if (config.print) {
@@ -225,7 +236,7 @@ export function buildModal(content, options) {
       printClone.remove();
     });
   }
-  return { modal };
+  return { modal, resizer };
 }
 
 /**