Merge pull request #294 from OneNoteDev/feature/port-to-popperjs-v1

Port to popperjs v1

Author: mttwc

package.json

@@ -51,12 +51,12 @@
     "lodash": "4.17.0",
     "merge-stream": "1.0.0",
     "mithril": "0.2.5",
-    "node-qunit-phantomjs": "1.4.0",
+    "node-qunit-phantomjs": "1.5.0",
     "node-static": "0.7.9",
     "onenoteapi": "1.1.0",
     "onenotepicker": "1.0.6",
     "pdfjs-dist": "1.6.422",
-    "popper.js": "0.6.4",
+    "popper.js": "1.0.0",
     "qunitjs": "1.20.0",
     "rangy": "1.3.0",
     "run-sequence": "1.2.2",

src/scripts/clipperUI/components/pdfClipOptions.tsx

@@ -143,6 +143,7 @@ class PdfClipOptionsClass extends ComponentBase<PdfClipOptionsState, ClipperStat
 					<Popover
 						referenceElementId={Constants.Ids.rangeInput}
 						placement="bottom"
+						parentId={Constants.Ids.mainController}
 						content={this.getErrorMessageForInvalidPageRange()}
 						classNames={[Constants.Classes.popover]}
 						arrowClassNames={[Constants.Classes.popoverArrow]}

src/scripts/clipperUI/components/popover.tsx

@@ -8,7 +8,7 @@ import * as popperJS from "popper.js";
 export interface PopoverProps {
 	referenceElementId: string;
 	placement: string; // TODO: use a union type of allowed values
-
+	parentId?: string;
 	content?: string;
 	classNames?: string[];
 	arrowClassNames?: string[];
@@ -25,23 +25,21 @@ class PopoverClass extends ComponentBase<{}, PopoverProps> {
 
 	handlePopoverLifecycle(element, isInitialized, context) {
 		if (!isInitialized) {
-			let popoverObj: any = {
-				content: this.props.content,
-				classNames: this.props.classNames,
-				arrowClassNames: this.props.arrowClassNames
-			};
+			let popperElement = this.generatePopperElement(this.props.parentId);
 
-			let mainControllerElem = document.getElementById(Constants.Ids.mainController);
-			if (mainControllerElem) {
-				// We want to set the parent lower in the HTML hierarchy to avoid z-index issues relating to stacking contexts
-				popoverObj.parent = mainControllerElem;
+			// TODO temporarily typed this way until definitions is updated for popperJS.PopperOptions
+			let popperOptions: any = {
+				placement: this.props.placement,
+				removeOnDestroy: this.props.removeOnDestroy,
+				modifiers: {}
+			};
+			if (this.props.modifiersIgnored) {
+				for (let i = 0; i < this.props.modifiersIgnored.length; i++) {
+					popperOptions.modifiers[this.props.modifiersIgnored[i]] = { enabled: false };
+				}
 			}
 
-			this.refToPopper = new popperJS(document.getElementById(this.props.referenceElementId), popoverObj, {
-				placement: this.props.placement,
-				modifiersIgnored: this.props.modifiersIgnored,
-				removeOnDestroy: this.props.removeOnDestroy
-			});
+			this.refToPopper = new popperJS(document.getElementById(this.props.referenceElementId), popperElement, popperOptions);
 		}
 
 		if (isInitialized) {
@@ -58,6 +56,36 @@ class PopoverClass extends ComponentBase<{}, PopoverProps> {
 		};
 	}
 
+	private generatePopperElement(parentId: string): HTMLDivElement {
+		let popperElement = document.createElement("div") as HTMLDivElement;
+		popperElement.innerText = this.props.content;
+
+		if (this.props.classNames) {
+			for (let i = 0; i < this.props.classNames.length; i++) {
+				popperElement.classList.add(this.props.classNames[i]);
+			}
+		}
+
+		if (this.props.arrowClassNames) {
+			let arrowElement = document.createElement("div");
+			for (let i = 0; i < this.props.arrowClassNames.length; i++) {
+				arrowElement.classList.add(this.props.arrowClassNames[i]);
+			}
+			arrowElement.setAttribute("x-arrow", "");
+			popperElement.appendChild(arrowElement);
+		}
+
+		let parent = parentId ? document.getElementById(parentId) : undefined;
+		if (parent) {
+			// We want to set the parent lower in the HTML hierarchy to avoid z-index issues relating to stacking contexts
+			parent.appendChild(popperElement);
+		} else {
+			document.body.appendChild(popperElement);
+		}
+
+		return popperElement;
+	}
+
 	render() {
 		return (
 			<div config={this.handlePopoverLifecycle.bind(this)} />