[Feature] Add ability for users to split their PDF into multiple OneNote pages (#273)

Adds a new option to PDF Mode that allows a user to split their PDF into individual OneNote pages. To facilitate this:

1. Move the PDF Clip Options to the mainController
2. Add some new Saveables, notably OneNoteSaveablePdfSynchronousBatched, which sends a bunch of createPage requests in series
3. Lots of little UI tweaks, such as moving the page number overlay in PDF preview to the top left corner from the middle of the page, and adding a spinner to indicate that a page is loading

Author: VishaalK

THIRD-PARTY-NOTICES.txt

@@ -53,6 +53,30 @@ limitations under the License.
 
 -------------------------------------------
 
+popper.js
+
+Copyright © 2016 Federico Zivolo and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of this software and associated documentation files (the “Software”),
+to deal in the Software without restriction, including without limitation
+the rights to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included
+in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+-------------------------------------------
+
 jpgjs
 
 Copyright (C) 2011 notmasteryet

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.2.16",
+  "version": "3.3.0",
   "name": "webclipper",
   "private": true,
   "description": "The core of the OneNote Web Clipper found at https://www.onenote.com/clipper",
@@ -17,6 +17,7 @@
     "@types/lodash": "4.14.37",
     "@types/mithril": "0.0.31",
     "@types/pdf": "0.0.31",
+    "@types/popper.js": "0.4.5",
     "@types/qunit": "1.16.30",
     "@types/rangy": "0.0.27",
     "@types/safari-extension": "0.0.27",
@@ -52,9 +53,10 @@
     "mithril": "0.2.5",
     "node-qunit-phantomjs": "1.4.0",
     "node-static": "0.7.9",
-    "onenoteapi": "1.0.6",
+    "onenoteapi": "1.1.0",
     "onenotepicker": "1.0.6",
     "pdfjs-dist": "1.6.319",
+    "popper.js": "0.6.4",
     "qunitjs": "1.20.0",
     "rangy": "1.3.0",
     "run-sequence": "1.2.2",

src/images/warning.png

@@ -5,6 +5,14 @@ export module ArrayUtils {
 	 * items.
 	 */
 	export function createEvenBuckets(numItems: number, maxPerBucket: number): number[] {
+		if (numItems < 1) {
+			return [];
+		}
+
+		if (maxPerBucket < 1) {
+			throw new Error("maxPerBucket cannot be less than 1 but was: " + maxPerBucket);
+		}
+
 		if (numItems <= maxPerBucket) {
 			return [numItems];
 		}
@@ -28,6 +36,10 @@ export module ArrayUtils {
 	 * Also retains the ordering of the items when partitions are flattened.
 	 */
 	export function partition(items: any[], maxPerBucket: number): any[][] {
+		if (items.length === 0) {
+			return [];
+		}
+
 		let bucketCounts = ArrayUtils.createEvenBuckets(items.length, maxPerBucket);
 		let partitions: any[][] = [];
 		let sliceStart = 0;

src/scripts/arrayUtils.ts

@@ -57,7 +57,7 @@ export class AnimatedTooltipClass extends ComponentBase<AnimatedTooltipState, An
 	render() {
 		// We have to make the renderablePanel undefined on the collapse for the vertical shrink animation to function correctly
 		let renderablePanel = (
-			<div className={Constants.Classes.heightAnimator} {...this.onElementDraw(this.onHeightAnimatorDraw) }>
+			<div className={Constants.Classes.heightAnimator + " " + Constants.Classes.clearfix} {...this.onElementDraw(this.onHeightAnimatorDraw) }>
 				{this.state.uiExpanded ? this.props.renderablePanel : undefined}
 			</div>
 		);

src/scripts/clipperUI/animatedTooltip.tsx

@@ -19,7 +19,7 @@ export class ExpandFromRightAnimationStrategy extends TransitioningAnimationStra
 	private animationTimeoutId: number;
 	private reverseChildAnimations: boolean;
 
-	constructor(options?: ExpandFromRightAnimationStrategyOptions) {
+	constructor(options: ExpandFromRightAnimationStrategyOptions) {
 		super(500 /* animationDuration */, options);
 		this.animationTimeout = 100;
 		this.reverseChildAnimations = true;

src/scripts/clipperUI/animations/expandFromRightAnimationStrategy.ts

@@ -8,7 +8,6 @@ import {TransitioningAnimationStrategy, TransitioningAnimationStrategyOptions} f
  * When transitioning out, elements fade away.
  */
 export class FadeInAnimationStrategy extends TransitioningAnimationStrategy<TransitioningAnimationStrategyOptions> {
-
 	constructor(options?: TransitioningAnimationStrategyOptions) {
 		super(200 /* animationDuration */, options);
 	}

src/scripts/clipperUI/animations/fadeInAnimationStrategy.ts

@@ -30,7 +30,7 @@ export class SlideContentInFromTopAnimationStrategy extends TransitioningAnimati
 	private animateOutSlideUpDelta: number;
 	private contentToAnimate: ContentToAnimate[];
 
-	constructor(options?: SlideContentInFromTopAnimationStrategyOptions) {
+	constructor(options: SlideContentInFromTopAnimationStrategyOptions) {
 		super(undefined /* animationDuration */, options, options.currentAnimationState);
 
 		this.animateInDuration = 367;

src/scripts/clipperUI/animations/slideContentInFromTopAnimationStrategy.ts

@@ -53,17 +53,11 @@ export abstract class TransitioningAnimationStrategy<TOptions extends Transition
 	}
 
 	protected doAnimate(el: HTMLElement): Promise<void> {
-		return new Promise<void>((resolve) => {
-			if (this.options.extShouldAnimateIn() && this.intShouldAnimateIn(el)) {
-				this.animateIn(el).then(() => {
-					resolve();
-				});
-			} else if (this.options.extShouldAnimateOut() && this.intShouldAnimateOut(el)) {
-				this.animateOut(el).then(() => {
-					resolve();
-				});
-			}
-		});
+		if (this.options.extShouldAnimateIn() && this.intShouldAnimateIn(el)) {
+			return this.animateIn(el);
+		} else if (this.options.extShouldAnimateOut() && this.intShouldAnimateOut(el)) {
+			return this.animateOut(el);
+		}
 	}
 
 	private animateIn(el: HTMLElement): Promise<void> {

src/scripts/clipperUI/animations/slideFromRightAnimationStrategy.ts

@@ -0,0 +1,4 @@
+export interface ClipSaveStatus {
+	numItemsCompleted: number;
+	numItemsTotal: number;
+}

src/scripts/clipperUI/animations/transitioningAnimationStrategy.ts

@@ -4,6 +4,7 @@ import {ClientInfo} from "../clientInfo";
 import {ClientType} from "../clientType";
 import {Constants} from "../constants";
 import {ObjectUtils} from "../objectUtils";
+
 import {PageInfo} from "../pageInfo";
 import {Polyfills} from "../polyfills";
 import {PreviewGlobalInfo, PreviewInfo} from "../previewInfo";
@@ -98,6 +99,12 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 				isLocalFileAndNotAllowed: true,
 				selectedPageRange: "",
 				shouldAttachPdf: false,
+				shouldDistributePages: false,
+				shouldShowPopover: false
+			},
+			clipSaveStatus: {
+				numItemsTotal: undefined,
+				numItemsCompleted: undefined
 			},
 
 			reset: () => {
@@ -534,10 +541,6 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 	}
 
 	private getDefaultClipMode(): ClipMode {
-		if (this.state && this.state.pageInfo && this.state.pageInfo.contentType === OneNoteApi.ContentType.EnhancedUrl) {
-			return ClipMode.Pdf;
-		}
-
 		if (this.state && this.state.invokeOptions) {
 			switch (this.state.invokeOptions.invokeMode) {
 				case InvokeMode.ContextImage:
@@ -553,11 +556,15 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 			}
 		}
 
-		if (this.state && this.state.pageInfo && UrlUtils.onWhitelistedDomain(this.state.pageInfo.rawUrl)) {
-			return ClipMode.Augmentation;
-		} else {
-			return ClipMode.FullPage;
+		if (this.state && this.state.pageInfo) {
+			if (UrlUtils.onWhitelistedDomain(this.state.pageInfo.rawUrl)) {
+				return ClipMode.Augmentation;
+			} else if (this.state.pageInfo.contentType === OneNoteApi.ContentType.EnhancedUrl) {
+				return ClipMode.Pdf;
+			}
 		}
+
+		return ClipMode.FullPage;
 	}
 
 	private updateFrameHeight(newContainerHeight: number) {
@@ -608,7 +615,7 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 		}});
 	}
 
-	private handleSignOut(authType: string) {
+	private handleSignOut(authType: string): void {
 		this.state.setState(this.getSignOutState());
 		Clipper.getExtensionCommunicator().callRemoteFunction(Constants.FunctionKeys.signOutUser, { param: AuthType[authType] });
 
@@ -624,7 +631,7 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 		return signOutState;
 	}
 
-	private handleStartClip() {
+	private handleStartClip(): void {
 		Clipper.logger.logUserFunnel(Log.Funnel.Label.ClipAttempted);
 
 		this.state.setState({ userResult: { status: Status.InProgress, data: this.state.userResult.data } });
@@ -661,11 +668,13 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 
 		let clipEvent = new Log.Event.PromiseEvent(Log.Event.Label.ClipToOneNoteAction);
 
-		OneNoteSaveableFactory.getSaveable(this.state).then((saveable) => {
+		(new OneNoteSaveableFactory(this.state)).getSaveable().then((saveable) => {
 			let saveOptions: SaveToOneNoteOptions = {
 				page: saveable,
-				saveLocation: this.state.saveLocation
+				saveLocation: this.state.saveLocation,
+				progressCallback: this.updateClipSaveProgress.bind(this)
 			};
+
 			let saveToOneNote = new SaveToOneNote(this.state.userResult.data.user.accessToken);
 			saveToOneNote.save(saveOptions).then((responsePackage: OneNoteApi.ResponsePackage<any>) => {
 				let createPageResponse = Array.isArray(responsePackage) ? responsePackage[0] : responsePackage;
@@ -687,6 +696,15 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
 		});
 	}
 
+	private updateClipSaveProgress(numItemsCompleted: number, numItemsTotal: number): void {
+		this.state.setState({
+			clipSaveStatus: {
+				numItemsCompleted: numItemsCompleted,
+				numItemsTotal: numItemsTotal
+			}
+		});
+	}
+
 	private storeLastClippedInformation() {
 		Clipper.storeValue(ClipperStorageKeys.lastClippedDate, Date.now().toString());
 

src/scripts/clipperUI/clipSaveStatus.ts

@@ -16,6 +16,7 @@ import {InvokeOptions} from "../extensions/invokeOptions";
 
 import {ClipMode} from "./clipMode";
 import {Status} from "./status";
+import {ClipSaveStatus} from "./clipSaveStatus";
 
 export interface DataResult<T> {
 	data?: T;
@@ -61,6 +62,7 @@ export interface ClipperState {
 
 	// Save to OneNote status
 	oneNoteApiResult?: DataResult<OneNoteApi.Page | OneNoteApi.RequestError>;
+	clipSaveStatus?: ClipSaveStatus;
 
 	// Should be set when the Web Clipper enters a state that can not be recovered this session
 	badState?: boolean;

src/scripts/clipperUI/clipper.tsx

@@ -1,4 +1,5 @@
 import {StringUtils} from "../stringUtils";
+import {ObjectUtils} from "../objectUtils";
 
 import {ClipMode} from "./clipMode";
 import {ClipperState} from "./clipperState";
@@ -19,11 +20,13 @@ export module ClipperStateUtilities {
 					return false;
 				} else if (clipperState.pdfPreviewInfo.allPages) {
 					return true;
+				} else if (!clipperState.pdfPreviewInfo.allPages && ObjectUtils.isNullOrUndefined(clipperState.pdfPreviewInfo.selectedPageRange)) {
+					return false;
 				}
-				// We know at this point that the status is succeeded and the user has a specific page range, so if
-				// it is unparseable or empty, we disallow the clip
-				let pages = StringUtils.parsePageRange(clipperState.pdfPreviewInfo.selectedPageRange, clipperState.pdfResult.data.get().pdf.numPages());
-				return !!pages && pages.length > 0;
+
+				// If the user has an invalidPageRange, the clipButton is still enabled,
+				// but when the user clips, we short circuit it and display a message instead
+				return true;
 			case ClipMode.FullPage:
 				let fullPageScreenshotResult = clipperState.fullPageResult;
 				return fullPageScreenshotResult.status === Status.Succeeded;

src/scripts/clipperUI/clipperState.ts

@@ -115,12 +115,12 @@ class ModeButtonSelectorClass extends ComponentBase<{}, ClipperStateProp> {
 
 		return (
 			<div style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Semilight) }>
-				{ this.getPdfModeButton(currentMode) }
 				{ this.getFullPageModeButton(currentMode) }
 				{ this.getRegionModeButton(currentMode) }
 				{ this.getAugmentationModeButton(currentMode) }
 				{ this.getSelectionModeButton(currentMode) }
 				{ this.getBookmarkModeButton(currentMode) }
+				{ this.getPdfModeButton(currentMode) }
 			</div>
 		);
 	}