bm-core-ui 2.9.5 → 2.10.0

package/build/BMWindow/BMPopover/BMPopover.js

@@ -5,7 +5,7 @@ import { BMWindow } from "../BMWindow";
 import { BMRectMakeWithOrigin, BMRectMakeWithNodeFrame, BMRectMake } from "../../Core/BMRect";
 import { BMPointMake } from "../../Core/BMPoint";
 import { BMHook, __BMVelocityAnimate } from "../../Core/BMAnimationContext";
-import { BMView } from "../../BMView/BMView_v2.5";
+import { BMView, BMViewColorScheme } from "../../BMView/BMView_v2.5";
 import { BMInsetMakeWithEqualInsets } from "../../Core/BMInset";
 
 // @type BMPopoverIndicatorDirection
@@ -194,6 +194,11 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
      */
     _clipPathOutlinePath: undefined, // <DOMNode, nullable>
 
+    /**
+     * When `_clipPathSVG` is defined, this represents the box shadow path element.
+     */
+    _clipPathBoxShadowPath: undefined, // <DOMNode, nullable>
+
     /**
      * A string that forms part of the HTML IDs that will be assigned to the clip paths
      * to be used on browsers.
@@ -258,24 +263,24 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
         this._size = size.copy();
 
         // Set up the popover container
-        this.node.className = 'BMPopover';
-        this.contentNode.className = 'BMPopoverContainer BMPopoverContainerView';
+        this.node.className = 'BMDarkModeAuto BMPopover';
+        this.contentNode.className = 'BMDarkModeAuto BMPopoverContainer BMPopoverContainerView';
 
         this._overlay.node.className = 'BMPopoverOverlay';
 
         // A second layer is used to draw the drop shadow, due to the unusual shape of the popover window
         const popoverDropShadowContainer = document.createElement('div');
-        popoverDropShadowContainer.className = 'BMPopoverContainerLayer BMPopoverDropShadowContainer';
+        popoverDropShadowContainer.className = 'BMDarkModeAuto BMPopoverContainerLayer BMPopoverDropShadowContainer';
         const popoverDropShadowContent = document.createElement('div');
-        popoverDropShadowContent.className = 'BMPopoverDropShadowContent';
+        popoverDropShadowContent.className = 'BMDarkModeAuto BMPopoverDropShadowContent';
         popoverDropShadowContainer.appendChild(popoverDropShadowContent);
 
         // A third layer is used to draw the background
         const popoverBackground = document.createElement('div');
-        popoverBackground.className = 'BMPopoverBackground';
+        popoverBackground.className = 'BMDarkModeAuto BMPopoverBackground';
 
         // Two additional sublayers are used for dark mode and contain the outline and background color.
-        popoverBackground.innerHTML = '<div class="BMPopoverBackgroundDarkModeContainer"><div class="BMPopoverBackgroundDarkModeOutline"></div><div class="BMPopoverBackgroundDarkModeFill"></div></div>';
+        popoverBackground.innerHTML = '<div class="BMDarkModeAuto BMPopoverBackgroundDarkModeContainer"><div class="BMDarkModeAuto BMPopoverBackgroundDarkModeOutline"></div><div class="BMDarkModeAuto BMPopoverBackgroundDarkModeFill"></div></div>';
 
         // Add the popover to the document
         this.node.appendChild(popoverBackground);
@@ -310,6 +315,30 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
         return this.initWithSize(frame.size);
     },
 
+	// @override - BMView
+	colorSchemeDidChange(scheme) {
+		BMWindow.prototype.colorSchemeDidChange.apply(this, arguments);
+
+		switch (this.colorScheme) {
+			case BMViewColorScheme.Light:
+				// Handled by BMWindow
+				break;
+			case BMViewColorScheme.Auto:
+				// For auto mode, add the BMDarkModeAuto class to the elements whose appearance should change
+				this._dropShadowContainer.classList.add('BMDarkModeAuto');
+				this._dropShadowContent.classList.add('BMDarkModeAuto');
+				this._background.classList.add('BMDarkModeAuto');
+				this._popoverDarkModeFill.classList.add('BMDarkModeAuto');
+                this._background.querySelector('.BMPopoverBackgroundDarkModeOutline').classList.add('BMDarkModeAuto');
+                this._background.querySelector('.BMPopoverBackgroundDarkModeContainer').classList.add('BMDarkModeAuto');
+				break;
+			case BMViewColorScheme.Dark:
+				// Dark is not yet supported
+			default:
+				throw new Error(`The color scheme ${scheme} is not supported on this view.`);
+		}
+	},
+
     /**
      * Invoked by CoreUI to update this popover's position and recalculate the various paths used by it.
      */
@@ -422,7 +451,8 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
         innerFrame.origin = BMPointMake();
 
         const pathContent = `${this._pathForPopoverWithFrame(innerFrame, {indicatorSize: this._indicatorSize, position: indicatorPosition, direction, radius: this._borderRadius})}`;
-        const outlinePathContent = `${this._pathForPopoverWithFrame(innerFrame, {indicatorSize: this._indicatorSize, inset: 1, position: indicatorPosition, direction, radius: this._borderRadius})}`;
+        const outlinePathContent = `${this._pathForPopoverWithFrame(innerFrame, {indicatorSize: this._indicatorSize, inset: 1, position: indicatorPosition, direction, radius: this._borderRadius - 1.5})}`;
+        const boxShadowPathContent = `${this._pathForPopoverWithFrame(innerFrame, {indicatorSize: this._indicatorSize, position: indicatorPosition, direction, radius: this._borderRadius + 1.5})}`;
 
         if (!this._clipPathUUID && !CSS.supports('clip-path', `path('${pathContent}')`)) {
             // If inline path definitions are not supported by the browsers, create an UUID for a SVG clip path and create it
@@ -450,6 +480,15 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
 
             this._clipPathSVG.appendChild(outlineClipPath);
 
+            // Create and attach the shadow clip path
+            const boxShadowClipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');
+            boxShadowClipPath.setAttribute('id', 'popover-box-shadow-clip-path-' + this._clipPathUUID);
+            boxShadowClipPath.setAttribute('clipPathUnits', 'userSpaceOnUse');
+            this._clipPathBoxShadowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            boxShadowClipPath.appendChild(this._clipPathBoxShadowPath);
+
+            this._clipPathSVG.appendChild(boxShadowClipPath);
+
             document.body.appendChild(this._clipPathSVG);
             
         }
@@ -458,11 +497,13 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
         if (this._clipPathUUID) {
             this._clipPathBackgroundPath.setAttribute('d', pathContent);
             this._clipPathOutlinePath.setAttribute('d', outlinePathContent);
+            this._clipPathBoxShadowPath.setAttribute('d', boxShadowPathContent);
         }
 
         // For Blink/Chrome-based browsers clip-path: path() is not supported, but clip-path: url() can be used instead for that browser
         const path = this._clipPathUUID ? `url(#popover-clip-path-${this._clipPathUUID})` : `path('${pathContent}')`;
-        const outlinePath = this._clipPathUUID ? `url(#popover--outline-clip-path-${this._clipPathUUID})` : `path('${outlinePathContent}')`;
+        const outlinePath = this._clipPathUUID ? `url(#popover-outline-clip-path-${this._clipPathUUID})` : `path('${outlinePathContent}')`;
+        const boxShadowPath = this._clipPathUUID ? `url(#popover-box-shadow-clip-path-${this._clipPathUUID})` : `path('${boxShadowPathContent}')`;
 
         // Assign the frame to the window, and to the drop shadow container
         const positionStyle = {
@@ -482,8 +523,8 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
         popoverDarkModeFill.style.webkitClipPath = outlinePath;
 
         BMCopyProperties(this._dropShadowContainer.style, positionStyle);
-        this._dropShadowContent.style.clipPath = path;
-        this._dropShadowContent.style.webkitClipPath = path;
+        this._dropShadowContent.style.clipPath = boxShadowPath;
+        this._dropShadowContent.style.webkitClipPath = boxShadowPath;
 
         const popoverLayers = [this.contentNode, this._background, this._dropShadowContainer];
 

package/build/BMWindow/BMWindow.js

@@ -4,7 +4,7 @@ import {YES, NO, BMExtend, BMCopyProperties} from '../Core/BMCoreUI'
 import {BMPointMake} from '../Core/BMPoint'
 import {BMRectMake, BMRectMakeWithNodeFrame} from '../Core/BMRect'
 import {BMAnimateWithBlock, BMAnimationContextGetCurrent, BMAnimationContextEnableWebAnimations, __BMVelocityAnimate, BMHook} from '../Core/BMAnimationContext'
-import {BMView} from '../BMView/BMView_v2.5'
+import {BMView, BMViewColorScheme} from '../BMView/BMView_v2.5'
 import {BMLayoutOrientation} from '../BMView/BMLayoutSizeClass'
 import { BMSizeMake } from '../Core/BMSize'
 import { BMLayoutAttribute } from '../BMView/BMLayoutConstraint_v2.5'
@@ -730,7 +730,7 @@ BMWindow.prototype = BMExtend(Object.create(BMView.prototype), {
 		
 		let node = document.createElement('div');
 		this._window = node;
-		node.className = 'BMWindow';
+		node.className = 'BMDarkModeAuto BMWindow';
 
 		BMCopyProperties(node.style, {
 			opacity: 0,
@@ -764,18 +764,18 @@ BMWindow.prototype = BMExtend(Object.create(BMView.prototype), {
 		}
 		
 		this._content = document.createElement('div');
-		this._content.className = 'BMWindowContent';
+		this._content.className = 'BMDarkModeAuto BMWindowContent';
 		node.appendChild(this._content);
 		
 		var withToolbar = (!args || args.toolbar === undefined) ? YES : args.toolbar;
 		
 		if (withToolbar) {
 			this._toolbar = document.createElement('div');
-			this._toolbar.className = 'BMWindowToolbar';
+			this._toolbar.className = 'BMDarkModeAuto BMWindowToolbar';
 			node.appendChild(this._toolbar);
 		}
 		else {
-			this._content.className = 'BMWindowContent BMWindowFullContent';
+			this._content.className = 'BMDarkModeAuto BMWindowContent BMWindowFullContent';
 		}
 		
 		document.body.appendChild(this._blocker);
@@ -940,7 +940,7 @@ BMWindow.prototype = BMExtend(Object.create(BMView.prototype), {
 
 			// Also create a drag handle to resize the window
 			let dragHandle = this._dragHandle = document.createElement('div');
-			dragHandle.className = 'material-icons BMWindowDragHandle';
+			dragHandle.className = 'material-icons BMWindowDragHandle BMDarkModeAuto';
 			dragHandle.innerText = 'dehaze';
 			dragHandle.style.cursor = 'nwse-resize';
 			node.appendChild(dragHandle);
@@ -1075,14 +1075,40 @@ BMWindow.prototype = BMExtend(Object.create(BMView.prototype), {
 		return this;
 	},
 
+	// @override - BMView
+	colorSchemeDidChange(scheme) {
+		BMView.prototype.colorSchemeDidChange.apply(this, arguments);
+
+		switch (this.colorScheme) {
+			case BMViewColorScheme.Light:
+				// For light mode, remove the BMDarkModeAuto class from all elements
+				this.node.querySelectorAll('.BMDarkModeAuto').forEach(n => n.classList.remove('BMDarkModeAuto'));
+				this.node.classList.remove('BMDarkModeAuto');
+				break;
+			case BMViewColorScheme.Auto:
+				// For auto mode, add the BMDarkModeAuto class to the elements whose appearance should change
+				this.node.classList.add('BMDarkModeAuto');
+				if (this._dragHandle) {
+					this._dragHandle.classList.add('BMDarkModeAuto');
+				}
+				break;
+			case BMViewColorScheme.Dark:
+				// Dark is not yet supported
+			default:
+				throw new Error(`The color scheme ${scheme} is not supported on this view.`);
+		}
+	},
+
 	/**
 	 * Invoked on non-modal windows when the viewport resizes.
 	 * @param event <Event>			The event that triggered this action.
 	 */
 	_viewportDidResize(event) {
+		// Limit the window to not move past the new viewport size
 		this.maxRightConstraint.constant = window.innerWidth;
 		this.maxBottomConstraint.constant = window.innerHeight;
 
+		// Full screen windows need to re-layout to match the new viewport size
 		if (this._fullScreen) this.layout();
 	},
 

package/build/Core/BMCoreUI.js

@@ -394,35 +394,47 @@ export var BMHTMLEntity = Object.freeze({ // <enum>
 	/**
 	 * The HTML entity representing the control key.
 	 */
-	Control: '&#8963;', // <enum>
+	Control: '&#8963;', // <String>
+
 	/**
 	 * The HTML entity representing the bowen knot Command symbol.
 	 */
-	Command: '&#8984;', // <enum>
+	Command: '&#8984;', // <String>
+
 	/**
 	 * The HTML entity representing the Option symbol.
 	 */
-	Option: '&#8997;', // <enum>
+	Option: '&#8997;', // <String>
+
 	/**
 	 * The HTML entity representing the Shift symbol.
 	 */
-	Shift: '&#8679;', // <enum>
+	Shift: '&#8679;', // <String>
+
 	/**
 	 * The HTML entity representing the Caps-Lock symbol.
 	 */
-	CapsLock: '&#8682;', // <enum>
+	CapsLock: '&#8682;', // <String>
+
 	/**
 	 * The HTML entity representing the Backspace delete symbol.
 	 */
-	Delete: '&#9003;', // <enum>
+	Delete: '&#9003;', // <String>
+
 	/**
 	 * The HTML entity representing the Return symbol.
 	 */
-	Return: '&#9166;', // <enum>
+	Return: '&#9166;', // <String>
+
 	/**
 	 * The HTML entity representing the Escape symbol.
 	 */
-	Escape: '&#9099;', // <enum>
+	Escape: '&#9099;', // <String>
+
+	/**
+	 * The HTML entity representing the Tab symbol.
+	 */
+	Tab: '&#8677;', // <String>
 });
 
 // @endtype