bm-core-ui 2.9.5 → 2.10.1

package/build/BMCollectionView/BMCollectionView.js

@@ -350,8 +350,17 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	 * The layout object managing this collection view's layout.
 	 */
     _layout: undefined, // <BMCollectionViewLayout>
-    get layout() { return this._layout; },
+    get layout() {
+		if (this._transitionLayout && this._layout == this._transitionLayout) {
+			return this._layout.targetLayout; 
+		}
+		else {
+			return this._layout; 
+		}
+	},
     set layout(layout) { 
+		// If data is being updated, wait for the update to finish before updating the
+		// layout
 		if (this.isUpdatingData) {
 			var self = this;
 			this.registerDataCompletionCallback(function () {
@@ -360,6 +369,7 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			return;
 		}
 
+		// If an animation context is active, perform this change with an animation
 		if (BMAnimationContextGetCurrent()) {
 			if (!this.initialized) {
 				this._layout = layout || new BMCollectionViewFlowLayout(); 
@@ -378,6 +388,12 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			this.invalidateLayout();
 		}
 	},
+
+	/**
+	 * Set to a transition layout while an animated layout update is in progress. Undefined
+	 * in all other cases.
+	 */
+	_transitionLayout: undefined, // <BMCollectionViewLayout, nullable>
 	
     // MARK: Managed attributes
     
@@ -388,7 +404,10 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	get frame() { return this._frame; },
 	set frame(frame) {
 		// If this frame is assigned as part of a layout animation, don't perform any changes
-		if (this._layoutAnimator) return Object.getOwnPropertyDescriptor(BMView.prototype, 'frame').set.call(this, frame);
+		if (this._layoutAnimator) {
+			Object.getOwnPropertyDescriptor(BMView.prototype, 'frame').set.call(this, frame);
+			return;
+		}
 
 		const currentFrame = this._frame && this._frame.copy();
 
@@ -747,8 +766,47 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		this._supplementaryViewClasses[args.forReuseIdentifier] = supplementaryViewClass;
 	},
 
-	// @override - BMView
-	initWithDOMNode(node) {
+
+	/**
+	 * Initializes this collection view with the specified DOM node and default properties.
+	 * The collection view will use a `BMCollectionViewFlowLayout` layout object.
+	 * A valid object should be assigned to the `dataSet` property to fully initialize and use this collection view.
+	 * @param node <DOMNode>					The container that the collection view will manage. This should be an empty div element,
+	 * 											otherwise the behaviour of the collection view will be undefined.
+	 * {
+	 *	@param customScroll <Boolean, nullable> Defaults to `NO`. When set to `YES`, collection view will use custom scrolling in 
+	 *											place of regular scrolling. Otherwise, it will use native scrolling. This should only be
+	 *											used with layouts where cell positions depend on the scroll position of collection view.
+	 *											This property cannot be changed after being set in the intializer.
+	 * }
+	 * @return <BMCollectionView>				A collection view.
+	 */
+	initWithDOMNode(node, args) {
+		var customScrollRequired = args && args.customScroll;
+	
+		_BMCollectionViews.set(this, true);
+		
+		this._container = BMJQueryShim.shimWithDOMNode(node);
+		this.layout = new BMCollectionViewFlowLayout();
+		this.cellCache = {};
+		this.retainedCells = [];
+		this.allCells = [];
+		this.supplementaryViewCache = {};
+		
+		this.attributeCache = {};
+		
+		this._selectedIndexPaths = [];
+		
+		this.customScrollRequired = customScrollRequired;
+	
+		this._cellClasses = {};
+		this._supplementaryViewClasses = {};
+	
+		this._measures = {};
+		this._measuredIndexPaths = [];
+	
+		this._cellLayoutQueue = BMViewLayoutQueue.layoutQueue();
+
 		return BMView.prototype.initWithDOMNode.apply(this, arguments);
 	},
 
@@ -787,7 +845,8 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	},
 
     /**
-	 * Should not be invoked manually. It is invoked by collection view to create the initial layout and cells.
+	 * Should not be invoked manually. Invoked by collection view the first time a data set is assigned
+	 * to it to create the initial layout and cells.
 	 */
     _init: function () {
 		// If currently invisible, delay the init
@@ -3417,6 +3476,10 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			    if (i == event.changedTouches.length) return;
 			}
 
+			if (this.delegate && this.delegate.collectionViewWillFinishInteractiveMovementForCell) {
+				this.delegate.collectionViewWillFinishInteractiveMovementForCell(this, cell, {atIndexPath: cell.indexPath});
+			}
+
 			// Remove the previously added handlers from window
 			window.removeEventListener(touchIdentifier !== undefined ? 'touchmove' : 'mousemove', mousemoveHandler, {capture: YES, passive: NO});
 			window.removeEventListener(touchIdentifier !== undefined ? 'touchend' : 'mouseup', mouseupHandler, {capture: YES, passive: NO});
@@ -3440,10 +3503,6 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			let sourceRect = BMRectMakeWithNodeFrame(draggingShadow);
 			let targetRect = BMRectMakeWithNodeFrame(cell.node);
 
-			if (this.delegate && this.delegate.collectionViewWillFinishInteractiveMovementForCell) {
-				this.delegate.collectionViewWillFinishInteractiveMovementForCell(this, cell, {atIndexPath: cell.indexPath});
-			}
-
 			// Resolve the current dragging operation
 			resolveIsDragging();
 			
@@ -4710,6 +4769,7 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	    
 	    // Temporarily make the transition layout the current layout
 	    this._layout = transitionLayout;
+		this._transitionLayout = transitionLayout;
 		
 		// Retain all transitioning cells during this change
 		let retainedCells = [];
@@ -4781,6 +4841,7 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			});
 
 			self._layout = layout;
+			self._transitionLayout = undefined;
 			
 			if (self.iScroll) self.iScroll.refresh();
 		    
@@ -5018,6 +5079,8 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		if (BM_COLLECTION_VIEW_USE_STATIC_CONTEXT) BMAnimationContextBeginStatic();
 		
 		if (animated === undefined) animated = YES;
+		
+		var self = this;
 
 		let resolveUpdateData;
 		this._dataUpdatePromise = new Promise(function (resolve, reject) {resolveUpdateData = resolve});
@@ -5026,8 +5089,13 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		this._updateSelectionIndexPaths();
 		
 		if (!animated) {
+			this.layout.collectionViewWillStartUpdates(undefined);
+
 			// Instant data set changes are identical to layout invalidations.
 			this.invalidateLayout();
+
+			// Inform the layout that the full data update has finished preparing and all animations were started
+			self.layout.collectionViewDidStartUpdates();
 			
 			// Have the data set refresh the contents of each cell
 			for (var i = 0; i < this.allCells.length; i++) {
@@ -5361,8 +5429,6 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		
 		this.dataSet.useOldData(NO);
 		
-		var self = this;
-		
 		var contentSizeWidthApplied = NO;
 		var contentSizeHeightApplied = NO;
 		
@@ -6162,7 +6228,7 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
  * @return <BMCollectionView>				A collection view.
  */
 BMCollectionView.collectionViewForNode = function (node, args) {
-	let collectionView = BMCollectionViewMakeWithContainer(BMJQueryShim.shimWithDOMNode(node), args);
+	let collectionView = new this().initWithDOMNode(node, args);
 
 	return collectionView;
 }
@@ -6193,35 +6259,7 @@ BMCollectionView.collectionView = function () {
  * @return <BMCollectionView>				A collection view.
  */
 export function BMCollectionViewMakeWithContainer(container, options) {
-	var customScrollRequired = options && options.customScroll;
-	var collectionView = new BMCollectionView();
-
-	_BMCollectionViews.set(collectionView, true);
-	
-	collectionView._container = container;
-	collectionView.layout = new BMCollectionViewFlowLayout();
-	collectionView.cellCache = {};
-	collectionView.retainedCells = [];
-	collectionView.allCells = [];
-	collectionView.supplementaryViewCache = {};
-	
-	collectionView.attributeCache = {};
-	
-	collectionView._selectedIndexPaths = [];
-	
-	collectionView.customScrollRequired = customScrollRequired;
-
-	collectionView._cellClasses = {};
-	collectionView._supplementaryViewClasses = {};
-
-	collectionView._measures = {};
-	collectionView._measuredIndexPaths = [];
-
-	collectionView._cellLayoutQueue = BMViewLayoutQueue.layoutQueue();
-
-	collectionView.initWithDOMNode(container[0]);
-	
-	return collectionView;
+	return new BMCollectionView().initWithDOMNode(container[0], options);
 }
 
 // @endtype

package/build/BMCollectionView/BMCollectionViewFlowLayout.js

@@ -22,20 +22,20 @@ export var BMCollectionViewTableLayoutSupplementaryView = Object.freeze({ // <en
 	/**
 	 * Indicates that this supplementary view is a footer.
 	 */
-	Footer: "Footer", // <enum>
+	Footer: "Footer", // <string>
 	
 	/**
 	 * Indicates that this supplementary view is a header.
 	 */
-	Header: "Header", // <enum>
+	Header: "Header", // <string>
 	
 	/**
 	 * Indicates that this supplementary is an empty content view.
 	 */
-	Empty: "Empty" // <enum>
+	Empty: "Empty" // <string>
 });
 
-// @type
+// @endtype
 
 // @type BMCollectionViewTableLayout extends BMCollectionViewLayout
 
@@ -1394,7 +1394,7 @@ export var BMCollectionViewFlowLayoutOrientation = Object.freeze({ // <enum>
  * As the flow layout only provides supplementary views for section headers and footers and empty data sets just like the table layout,
  * the identifiers used by the table layout are reused in this case.
  */
-export var BMCollectionViewFlowLayoutSupplementaryView = BMCollectionViewTableLayoutSupplementaryView;
+export var BMCollectionViewFlowLayoutSupplementaryView = BMCollectionViewTableLayoutSupplementaryView; // <typeof BMCollectionViewTableLayoutSupplementaryView>
 
 /**
  * The flow layout arranges cells in a horiztonally (TO DO) or vertically scrolling container.
@@ -1758,6 +1758,18 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 			// When using custom cell sizes, the layout will pre-compute the entire layout attributes
 			this.cachedLayout = { sections: [] };
 
+			// If this is invoked as part of a batch or animated layout update, ensure that the new layout
+			// is measured up to at least the current collection view bounds
+			if (this._expectedCellSize && this._copy) {
+				target = target || {};
+				if (target.targetRect) {
+					target.targetRect = target.targetRect.rectByUnionWithRect(this.collectionView.bounds)
+				}
+				else {
+					target.targetRect = this.collectionView.bounds;
+				}
+			}
+
 			/*
 			declare interface BMCollectionViewFlowLayoutCache {
 				availableWidth: number;
@@ -4885,6 +4897,7 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 		var copy = new BMCollectionViewFlowLayout();
 		
 		copy.cellSize = this.cellSize && this.cellSize.copy();
+		copy.expectedCellSize = this.expectedCellSize && this.expectedCellSize.copy();
 		copy.rowSpacing = this.rowSpacing;
 		
 		copy.showsHeaders = this.showsHeaders;

package/build/BMCoreUI.css

@@ -256,24 +256,24 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.BMWindow {
+	.BMDarkModeAuto.BMWindow {
 		box-shadow: rgba(0, 0, 0, .66) 0px 0px 0px 1px, rgba(0, 0, 0, .66) 0px 12px 64px;
 		background-color: rgba(255, 255, 255, .6);
 	}
 
-	.BMWindowInactive {
+	.BMDarkModeAuto.BMWindowInactive {
 		background: rgba(70, 70, 70, 1);
 	}
 
-	.BMNonModalWindow {
+	.BMDarkModeAuto.BMNonModalWindow {
 		box-shadow: rgba(0, 0, 0, .66) 0px 0px 0px 1px, rgba(0, 0, 0, .66) 0px 6px 32px;
 	}
 
-	.BMWindow.BMKeyWindow, .BMToolWindow {
+	.BMDarkModeAuto.BMWindow.BMKeyWindow, .BMDarkModeAuto.BMToolWindow {
 		box-shadow: rgba(0, 0, 0, .66) 0px 0px 0px 1px, rgba(0, 0, 0, .66) 0px 12px 64px;
 	}
 
-	.BMWindow::after {
+	.BMDarkModeAuto.BMWindow::after {
 		content: '';
 		position: absolute;
 		pointer-events: none;
@@ -288,7 +288,7 @@
 		box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, .25) inset;
 	}
 
-	.BMWindowDragHandle {
+	.BMDarkModeAuto.BMWindowDragHandle {
 		color: rgba(255, 255, 255, .33);
 	}
 }
@@ -313,7 +313,7 @@
 /* In theory, this would break browsers that support dark mode but not backdrop filter;
    In practice, only Safari supports both. */
 @media (prefers-color-scheme: dark) {
-	.BMWindowContent {
+	.BMDarkModeAuto.BMWindowContent {
 		background-color: rgba(0, 0, 0, .75) !important;
 	}
 }
@@ -323,7 +323,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.BMWindowBackground {
+	.BMDarkModeAuto.BMWindowBackground {
 		background-color: #1e1e1e !important; /* tw-important */
 	}
 }
@@ -1294,6 +1294,10 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	-webkit-tap-highlight-color: transparent;
 }
 
+.BMMenuItemDisabled.BMMenuItem {
+	color: rgba(0, 0, 0, .4);
+}
+
 .BMLayoutEditorConstraintPopupOption {
 	padding-right: 64px;
 }
@@ -1330,11 +1334,21 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	flex-grow: 1;
 }
 
+.BMMenuItemHint {
+	margin-left: 48px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	padding: 0px 16px;
+
+	opacity: .33;
+}
+
 .BMMenuItemDisclosure {
 	width: 24px;
 	height: 24px;
-
-	margin-left: 48px;
 	
 	font-weight: 600;
 
@@ -1343,6 +1357,12 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	display: flex;
 	align-items: center;
 	justify-content: center;
+
+	display: none;
+}
+
+.BMMenuItemDisclosure.BMMenuItemDisclosureSubmenu {
+	display: block;
 }
 
 .BMMenuItemDisclosureSubmenu::after {
@@ -1371,7 +1391,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	}
 }
 
-.BMLayoutEditorConstraintPopupOption:hover, .BMMenuTouch > .BMMenuItem:active, .BMMenuItem.BMMenuItemHighlighted {
+.BMLayoutEditorConstraintPopupOption:hover, .BMMenuTouch > .BMMenuItem:not(.BMMenuItemDisabled):active, .BMMenuItem.BMMenuItemHighlighted {
 	background: rgb(0, 128, 255);
 	color: white;
 }
@@ -1381,7 +1401,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	color: rgba(0, 0, 0, .8);
 }
 
-.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:hover {
+.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:not(.BMMenuItemDisabled):hover {
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
 }
@@ -1410,7 +1430,11 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		color: rgba(255, 255, 255, .9);
 	}
 
-	.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:hover {
+	.BMMenuItem.BMMenuItemDisabled {
+		color: rgba(255, 255, 255, .45);
+	}
+
+	.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:not(.BMMenuItemDisabled):hover {
 		background: transparent;
 		color: white;
 	}
@@ -2528,6 +2552,9 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 
 .BMPopover {
 	position: absolute;
+
+	/* This is required otherwise the mix-blend-mode on the drop shadow layer doesn't work */
+	z-index: unset !important;
 }
 
 .BMPopoverOverlay {
@@ -2605,7 +2632,7 @@ The drop shadow layer contains the drop shadow effect only.
 }
 
 @media (prefers-color-scheme: dark) {
-	.BMPopoverDropShadowContainer {
+	.BMDarkModeAuto.BMPopoverDropShadowContainer {
 		filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)) drop-shadow(0px 12px 64px rgba(0, 0, 0, .66));
 	}
 }
@@ -2642,11 +2669,11 @@ The background layer contains the background.
 }
 
 @media (prefers-color-scheme: dark) {
-	.BMPopoverBackground {
+	.BMDarkModeAuto.BMPopoverBackground {
 		background: transparent;
 	}
 
-	.BMPopoverBackgroundDarkModeContainer {
+	.BMDarkModeAuto.BMPopoverBackgroundDarkModeContainer {
 		display: block;
 
 		position: absolute;
@@ -2659,7 +2686,7 @@ The background layer contains the background.
 		opacity: .8;
 	}
 
-	.BMPopoverBackgroundDarkModeOutline {
+	.BMDarkModeAuto.BMPopoverBackgroundDarkModeOutline {
 		background-color: rgb(100, 100, 100);
 
 		position: absolute;
@@ -2670,7 +2697,7 @@ The background layer contains the background.
 		top: 0px;
 	}
 
-	.BMPopoverBackgroundDarkModeFill {
+	.BMDarkModeAuto.BMPopoverBackgroundDarkModeFill {
 		background-color: rgb(40, 40, 40);
 
 		position: absolute;