aboutsummaryrefslogtreecommitdiff
path: root/src/mobile
diff options
context:
space:
mode:
Diffstat (limited to 'src/mobile')
-rw-r--r--src/mobile/AudioUpload.tsx5
-rw-r--r--src/mobile/MobileInkOverlay.tsx119
-rw-r--r--src/mobile/MobileInterface.tsx626
-rw-r--r--src/mobile/MobileMain.tsx35
4 files changed, 487 insertions, 298 deletions
diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx
index 88221732e..64baa351c 100644
--- a/src/mobile/AudioUpload.tsx
+++ b/src/mobile/AudioUpload.tsx
@@ -19,7 +19,7 @@ import React = require('react');
@observer
export class AudioUpload extends React.Component {
- @observable public _audioCol: Doc = FieldValue(Cast(Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio", _width: 500, _height: 100 }), Doc) as Doc], { title: "mobile audio", _width: 300, _height: 300, _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc;
+ @observable public _audioCol: Doc = FieldValue(Cast(Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio", _width: 500, _height: 100 }), Doc) as Doc], { title: "mobile audio", _width: 300, _height: 300, _fitContentsToBox: true, boxShadow: "0 0" }), Doc)) as Doc;
/**
* Handles the onclick functionality for the 'Restart' button
@@ -36,7 +36,7 @@ export class AudioUpload extends React.Component {
title: "mobile audio",
_width: 500,
_height: 100
- }), Doc) as Doc], { title: "mobile audio", _width: 300, _height: 300, _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc;
+ }), Doc) as Doc], { title: "mobile audio", _width: 300, _height: 300, _fitContentsToBox: true, boxShadow: "0 0" }), Doc)) as Doc;
}
/**
@@ -96,7 +96,6 @@ export class AudioUpload extends React.Component {
isDocumentActive={returnTrue}
isContentActive={emptyFunction}
focus={emptyFunction}
- layerProvider={undefined}
styleProvider={() => "rgba(0,0,0,0)"}
docViewPath={returnEmptyDoclist}
whenChildContentsActiveChanged={emptyFunction}
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index d668d134e..6415099fd 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -1,13 +1,12 @@
import React = require('react');
-import { observer } from "mobx-react";
-import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPositionContent, MobileDocumentUploadContent } from "../server/Message";
-import { observable, action } from "mobx";
-import { GestureUtils } from "../pen-gestures/GestureUtils";
-import "./MobileInkOverlay.scss";
-import { DragManager } from "../client/util/DragManager";
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
import { DocServer } from '../client/DocServer';
+import { DragManager } from '../client/util/DragManager';
import { Doc } from '../fields/Doc';
-
+import { GestureUtils } from '../pen-gestures/GestureUtils';
+import { GestureContent, MobileDocumentUploadContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent } from '../server/Message';
+import './MobileInkOverlay.scss';
@observer
export default class MobileInkOverlay extends React.Component {
@@ -18,7 +17,7 @@ export default class MobileInkOverlay extends React.Component {
@observable private _height: number = 0;
@observable private _x: number = -300;
@observable private _y: number = -300;
- @observable private _text: string = "";
+ @observable private _text: string = '';
@observable private _offsetX: number = 0;
@observable private _offsetY: number = 0;
@@ -49,7 +48,7 @@ export default class MobileInkOverlay extends React.Component {
this._scale = scaledSize.scale;
this._x = 300; // TODO: center on screen
this._y = 25; // TODO: center on screen
- this._text = text ? text : "";
+ this._text = text ? text : '';
}
@action
@@ -64,31 +63,29 @@ export default class MobileInkOverlay extends React.Component {
// TODO: figure out why strokes drawn in corner of mobile interface dont get inserted
const { points, bounds } = content;
- console.log("received points", points, bounds);
+ console.log('received points', points, bounds);
const B = {
- right: (bounds.right * this._scale) + this._x,
- left: (bounds.left * this._scale) + this._x, // TODO: scale
- bottom: (bounds.bottom * this._scale) + this._y,
- top: (bounds.top * this._scale) + this._y, // TODO: scale
+ right: bounds.right * this._scale + this._x,
+ left: bounds.left * this._scale + this._x, // TODO: scale
+ bottom: bounds.bottom * this._scale + this._y,
+ top: bounds.top * this._scale + this._y, // TODO: scale
width: bounds.width * this._scale,
height: bounds.height * this._scale,
};
const target = document.elementFromPoint(this._x + 10, this._y + 10);
target?.dispatchEvent(
- new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
- {
- bubbles: true,
- detail: {
- points: points,
- gesture: GestureUtils.Gestures.Stroke,
- bounds: B
- }
- }
- )
+ new CustomEvent<GestureUtils.GestureEvent>('dashOnGesture', {
+ bubbles: true,
+ detail: {
+ points: points,
+ gesture: GestureUtils.Gestures.Stroke,
+ bounds: B,
+ },
+ })
);
- }
+ };
uploadDocument = async (content: MobileDocumentUploadContent) => {
const { docId } = content;
@@ -100,36 +97,34 @@ export default class MobileInkOverlay extends React.Component {
const complete = new DragManager.DragCompleteEvent(false, dragData);
if (target) {
- console.log("dispatching upload doc!!!!", target, doc);
+ console.log('dispatching upload doc!!!!', target, doc);
target.dispatchEvent(
- new CustomEvent<DragManager.DropEvent>("dashOnDrop",
- {
- bubbles: true,
- detail: {
- x: this._x,
- y: this._y,
- complete: complete,
- altKey: false,
- metaKey: false,
- ctrlKey: false,
- shiftKey: false,
- embedKey: false
- }
- }
- )
+ new CustomEvent<DragManager.DropEvent>('dashOnDrop', {
+ bubbles: true,
+ detail: {
+ x: this._x,
+ y: this._y,
+ complete: complete,
+ altKey: false,
+ metaKey: false,
+ ctrlKey: false,
+ shiftKey: false,
+ embedKey: false,
+ },
+ })
);
} else {
- alert("TARGET IS UNDEFINED");
+ alert('TARGET IS UNDEFINED');
}
}
- }
+ };
@action
dragStart = (e: React.PointerEvent) => {
- document.removeEventListener("pointermove", this.dragging);
- document.removeEventListener("pointerup", this.dragEnd);
- document.addEventListener("pointermove", this.dragging);
- document.addEventListener("pointerup", this.dragEnd);
+ document.removeEventListener('pointermove', this.dragging);
+ document.removeEventListener('pointerup', this.dragEnd);
+ document.addEventListener('pointermove', this.dragging);
+ document.addEventListener('pointerup', this.dragEnd);
this._isDragging = true;
this._offsetX = e.pageX - this._mainCont.current!.getBoundingClientRect().left;
@@ -137,7 +132,7 @@ export default class MobileInkOverlay extends React.Component {
e.preventDefault();
e.stopPropagation();
- }
+ };
@action
dragging = (e: PointerEvent) => {
@@ -150,41 +145,39 @@ export default class MobileInkOverlay extends React.Component {
e.preventDefault();
e.stopPropagation();
- }
+ };
@action
dragEnd = (e: PointerEvent) => {
- document.removeEventListener("pointermove", this.dragging);
- document.removeEventListener("pointerup", this.dragEnd);
+ document.removeEventListener('pointermove', this.dragging);
+ document.removeEventListener('pointerup', this.dragEnd);
this._isDragging = false;
e.preventDefault();
e.stopPropagation();
- }
+ };
render() {
-
return (
- <div className="mobileInkOverlay"
+ <div
+ className="mobileInkOverlay"
style={{
width: this._width,
height: this._height,
- position: "absolute",
+ position: 'absolute',
transform: `translate(${this._x}px, ${this._y}px)`,
zIndex: 30000,
- pointerEvents: "none",
- borderStyle: this._isDragging ? "solid" : "dashed",
- }
- }
- ref={this._mainCont}
- >
+ pointerEvents: 'none',
+ borderStyle: this._isDragging ? 'solid' : 'dashed',
+ }}
+ ref={this._mainCont}>
<p>{this._text}</p>
<div className="mobileInkOverlay-border top" onPointerDown={this.dragStart}></div>
<div className="mobileInkOverlay-border bottom" onPointerDown={this.dragStart}></div>
<div className="mobileInkOverlay-border left" onPointerDown={this.dragStart}></div>
<div className="mobileInkOverlay-border right" onPointerDown={this.dragStart}></div>
- </div >
+ </div>
);
}
-} \ No newline at end of file
+}
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index cfcc48608..f19496d25 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -1,57 +1,240 @@
-
import { library } from '@fortawesome/fontawesome-svg-core';
import {
- faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
- faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
- faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
- faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
- faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
- faThumbtack, faTree, faTv, faBook, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft,
- faAlignRight, faAlignLeft
+ faTasks,
+ faReply,
+ faQuoteLeft,
+ faHandPointLeft,
+ faFolderOpen,
+ faAngleDoubleLeft,
+ faExternalLinkSquareAlt,
+ faMobile,
+ faThLarge,
+ faWindowClose,
+ faEdit,
+ faTrashAlt,
+ faPalette,
+ faAngleRight,
+ faBell,
+ faTrash,
+ faCamera,
+ faExpand,
+ faCaretDown,
+ faCaretLeft,
+ faCaretRight,
+ faCaretSquareDown,
+ faCaretSquareRight,
+ faArrowsAltH,
+ faPlus,
+ faMinus,
+ faTerminal,
+ faToggleOn,
+ faFile as fileSolid,
+ faExternalLinkAlt,
+ faLocationArrow,
+ faSearch,
+ faFileDownload,
+ faStop,
+ faCalculator,
+ faWindowMaximize,
+ faAddressCard,
+ faQuestionCircle,
+ faArrowLeft,
+ faArrowRight,
+ faArrowDown,
+ faArrowUp,
+ faBolt,
+ faBullseye,
+ faCaretUp,
+ faCat,
+ faCheck,
+ faChevronRight,
+ faClipboard,
+ faClone,
+ faCloudUploadAlt,
+ faCommentAlt,
+ faCompressArrowsAlt,
+ faCut,
+ faEllipsisV,
+ faEraser,
+ faExclamation,
+ faFileAlt,
+ faFileAudio,
+ faFilePdf,
+ faFilm,
+ faFilter,
+ faFont,
+ faGlobeAsia,
+ faHighlighter,
+ faLongArrowAltRight,
+ faMicrophone,
+ faMousePointer,
+ faMusic,
+ faObjectGroup,
+ faPause,
+ faPen,
+ faPenNib,
+ faPhone,
+ faPlay,
+ faPortrait,
+ faRedoAlt,
+ faStamp,
+ faStickyNote,
+ faThumbtack,
+ faTree,
+ faTv,
+ faBook,
+ faUndoAlt,
+ faVideo,
+ faAsterisk,
+ faBrain,
+ faImage,
+ faPaintBrush,
+ faTimes,
+ faEye,
+ faHome,
+ faLongArrowAltLeft,
+ faBars,
+ faTh,
+ faChevronLeft,
+ faAlignRight,
+ faAlignLeft,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
-import * as React from "react";
+import * as React from 'react';
import { Docs, DocumentOptions, DocUtils } from '../client/documents/Documents';
-import { DocumentType } from "../client/documents/DocumentTypes";
+import { CollectionViewType, DocumentType } from '../client/documents/DocumentTypes';
import { CurrentUserUtils } from '../client/util/CurrentUserUtils';
import { ScriptingGlobals } from '../client/util/ScriptingGlobals';
import { SettingsManager, ColorScheme } from '../client/util/SettingsManager';
import { Transform } from '../client/util/Transform';
-import { UndoManager } from "../client/util/UndoManager";
+import { UndoManager } from '../client/util/UndoManager';
import { TabDocView } from '../client/views/collections/TabDocView';
-import { CollectionViewType } from "../client/views/collections/CollectionView";
-import { GestureOverlay } from "../client/views/GestureOverlay";
-import { AudioBox } from "../client/views/nodes/AudioBox";
+import { GestureOverlay } from '../client/views/GestureOverlay';
+import { AudioBox } from '../client/views/nodes/AudioBox';
import { DocumentView } from '../client/views/nodes/DocumentView';
-import { RichTextMenu } from "../client/views/nodes/formattedText/RichTextMenu";
-import { RadialMenu } from "../client/views/nodes/RadialMenu";
+import { RichTextMenu } from '../client/views/nodes/formattedText/RichTextMenu';
+import { RadialMenu } from '../client/views/nodes/RadialMenu';
import { Doc, DocListCast } from '../fields/Doc';
import { InkTool } from '../fields/InkField';
-import { List } from "../fields/List";
-import { ScriptField } from "../fields/ScriptField";
-import { Cast, FieldValue } from '../fields/Types';
+import { List } from '../fields/List';
+import { ScriptField } from '../fields/ScriptField';
+import { Cast, FieldValue, StrCast } from '../fields/Types';
import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero } from '../Utils';
-import { AudioUpload } from "./AudioUpload";
-import { Uploader } from "./ImageUpload";
-import "./AudioUpload.scss";
-import "./ImageUpload.scss";
-import "./MobileInterface.scss";
-
-library.add(...[faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
- faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
- faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
- faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
- faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
- faThumbtack, faTree, faTv, faUndoAlt, faBook, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft,
- faAlignLeft, faAlignRight].map(m => m as any));
-
+import { AudioUpload } from './AudioUpload';
+import { Uploader } from './ImageUpload';
+import './AudioUpload.scss';
+import './ImageUpload.scss';
+import './MobileInterface.scss';
+
+library.add(
+ ...[
+ faTasks,
+ faReply,
+ faQuoteLeft,
+ faHandPointLeft,
+ faFolderOpen,
+ faAngleDoubleLeft,
+ faExternalLinkSquareAlt,
+ faMobile,
+ faThLarge,
+ faWindowClose,
+ faEdit,
+ faTrashAlt,
+ faPalette,
+ faAngleRight,
+ faBell,
+ faTrash,
+ faCamera,
+ faExpand,
+ faCaretDown,
+ faCaretLeft,
+ faCaretRight,
+ faCaretSquareDown,
+ faCaretSquareRight,
+ faArrowsAltH,
+ faPlus,
+ faMinus,
+ faTerminal,
+ faToggleOn,
+ fileSolid,
+ faExternalLinkAlt,
+ faLocationArrow,
+ faSearch,
+ faFileDownload,
+ faStop,
+ faCalculator,
+ faWindowMaximize,
+ faAddressCard,
+ faQuestionCircle,
+ faArrowLeft,
+ faArrowRight,
+ faArrowDown,
+ faArrowUp,
+ faBolt,
+ faBullseye,
+ faCaretUp,
+ faCat,
+ faCheck,
+ faChevronRight,
+ faClipboard,
+ faClone,
+ faCloudUploadAlt,
+ faCommentAlt,
+ faCompressArrowsAlt,
+ faCut,
+ faEllipsisV,
+ faEraser,
+ faExclamation,
+ faFileAlt,
+ faFileAudio,
+ faFilePdf,
+ faFilm,
+ faFilter,
+ faFont,
+ faGlobeAsia,
+ faHighlighter,
+ faLongArrowAltRight,
+ faMicrophone,
+ faMousePointer,
+ faMusic,
+ faObjectGroup,
+ faPause,
+ faPen,
+ faPenNib,
+ faPhone,
+ faPlay,
+ faPortrait,
+ faRedoAlt,
+ faStamp,
+ faStickyNote,
+ faThumbtack,
+ faTree,
+ faTv,
+ faUndoAlt,
+ faBook,
+ faVideo,
+ faAsterisk,
+ faBrain,
+ faImage,
+ faPaintBrush,
+ faTimes,
+ faEye,
+ faHome,
+ faLongArrowAltLeft,
+ faBars,
+ faTh,
+ faChevronLeft,
+ faAlignLeft,
+ faAlignRight,
+ ].map(m => m as any)
+);
@observer
export class MobileInterface extends React.Component {
static Instance: MobileInterface;
- private _library: Promise<Doc>;
+ private _library: Doc;
private _mainDoc: any = CurrentUserUtils.setupActiveMobileMenu(Doc.UserDoc());
@observable private _sidebarActive: boolean = false; //to toggle sidebar display
@observable private _imageUploadActive: boolean = false; //to toggle image upload
@@ -64,36 +247,38 @@ export class MobileInterface extends React.Component {
@observable private _homeDoc: Doc = this._mainDoc; // home menu as a document
@observable private _parents: Array<Doc> = []; // array of parent docs (for pathbar)
- @computed private get mainContainer() { return Doc.UserDoc() ? FieldValue(Cast(Doc.UserDoc().activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
+ @computed private get mainContainer() {
+ return Doc.UserDoc() ? FieldValue(Cast(Doc.UserDoc().activeMobile, Doc)) : Doc.GuestMobile;
+ }
constructor(props: Readonly<{}>) {
super(props);
- this._library = CurrentUserUtils.setupLibrary(Doc.UserDoc()); // to access documents in Dash Web
+ this._library = CurrentUserUtils.setupDashboards(Doc.UserDoc(), 'myDashboards'); // to access documents in Dash Web
MobileInterface.Instance = this;
}
@action
componentDidMount = () => {
// if the home menu is in list view -> adjust the menu toggle appropriately
- this._menuListView = this._homeDoc._viewType === "stacking" ? true : false;
- CurrentUserUtils.SelectedTool = InkTool.None; // ink should intially be set to none
+ this._menuListView = this._homeDoc._viewType === 'stacking' ? true : false;
+ Doc.ActiveTool = InkTool.None; // ink should intially be set to none
Doc.UserDoc().activeMobile = this._homeDoc; // active mobile set to home
AudioBox.Enabled = true;
// remove double click to avoid mobile zoom in
- document.removeEventListener("dblclick", this.onReactDoubleClick);
- document.addEventListener("dblclick", this.onReactDoubleClick);
- }
+ document.removeEventListener('dblclick', this.onReactDoubleClick);
+ document.addEventListener('dblclick', this.onReactDoubleClick);
+ };
@action
componentWillUnmount = () => {
document.removeEventListener('dblclick', this.onReactDoubleClick);
- }
+ };
// Prevent zooming in when double tapping the screen
onReactDoubleClick = (e: MouseEvent) => {
e.stopPropagation();
- }
+ };
// Switch the mobile view to the given doc
@action
@@ -110,7 +295,7 @@ export class MobileInterface extends React.Component {
// Ensures that switching to home is not registed
UndoManager.undoStack.length = 0;
UndoManager.redoStack.length = 0;
- }
+ };
// For toggling the hamburger menu
@action
@@ -120,29 +305,29 @@ export class MobileInterface extends React.Component {
if (this._ink) {
this.onSwitchInking();
}
- }
+ };
/**
* Method called when 'Library' button is pressed on the home screen
*/
switchToLibrary = async () => {
- this._library.then(library => this.switchCurrentView(library));
- runInAction(() => this._homeMenu = false);
+ this.switchCurrentView(this._library);
+ runInAction(() => (this._homeMenu = false));
this.toggleSidebar();
- }
+ };
/**
* Back method for navigating through items
*/
@action
back = () => {
- const header = document.getElementById("header") as HTMLElement;
+ const header = document.getElementById('header') as HTMLElement;
const doc = Cast(this._parents.pop(), Doc) as Doc; // Parent document
// Case 1: Parent document is 'dashboards'
- if (doc === Cast(this._library, Doc) as Doc) {
+ if (doc === (Cast(this._library, Doc) as Doc)) {
this.dashboards = null;
- this._library.then(library => this.switchCurrentView(library));
+ this.switchCurrentView(this._library);
// Case 2: Parent document is the 'home' menu (root node)
- } else if (doc === Cast(this._homeDoc, Doc) as Doc) {
+ } else if (doc === (Cast(this._homeDoc, Doc) as Doc)) {
this._homeMenu = true;
this._parents = [];
this.dashboards = null;
@@ -155,7 +340,7 @@ export class MobileInterface extends React.Component {
header.textContent = String(doc.title);
}
this._ink = false; // turns ink off
- }
+ };
/**
* Return 'Home", which implies returning to 'Home' menu buttons
@@ -171,7 +356,7 @@ export class MobileInterface extends React.Component {
if (this._sidebarActive) {
this.toggleSidebar();
}
- }
+ };
/**
* Return to primary Dashboard in library (Dashboards Doc)
@@ -179,10 +364,10 @@ export class MobileInterface extends React.Component {
@action
returnMain = () => {
this._parents = [this._homeDoc];
- this._library.then(library => this.switchCurrentView(library));
+ this.switchCurrentView(this._library);
this._homeMenu = false;
this.dashboards = null;
- }
+ };
/**
* Note: window.innerWidth and window.screen.width compute different values.
@@ -190,14 +375,14 @@ export class MobileInterface extends React.Component {
* display resolution which computes differently.
*/
returnWidth = () => window.innerWidth; //The windows width
- returnHeight = () => (window.innerHeight - 300); //Calculating the windows height (-300 to account for topbar)
- whitebackground = () => "white";
+ returnHeight = () => window.innerHeight - 300; //Calculating the windows height (-300 to account for topbar)
+ whitebackground = () => 'white';
/**
* DocumentView for graphic display of all documents
*/
@computed get displayDashboards() {
- return !this.mainContainer ? (null) :
- <div style={{ position: "relative", top: '198px', height: `calc(100% - 350px)`, width: "100%", left: "0%" }}>
+ return !this.mainContainer ? null : (
+ <div style={{ position: 'relative', top: '198px', height: `calc(100% - 350px)`, width: '100%', left: '0%' }}>
<DocumentView
Document={this.mainContainer}
DataDoc={undefined}
@@ -214,7 +399,6 @@ export class MobileInterface extends React.Component {
isContentActive={emptyFunction}
focus={DocUtils.DefaultFocus}
styleProvider={this.whitebackground}
- layerProvider={undefined}
docViewPath={returnEmptyDoclist}
whenChildContentsActiveChanged={emptyFunction}
bringToFront={emptyFunction}
@@ -224,7 +408,8 @@ export class MobileInterface extends React.Component {
ContainingCollectionView={undefined}
ContainingCollectionDoc={undefined}
/>
- </div>;
+ </div>
+ );
}
/**
@@ -234,20 +419,19 @@ export class MobileInterface extends React.Component {
*/
handleClick = async (doc: Doc) => {
runInAction(() => {
- if (doc.type !== "collection" && this._sidebarActive) {
+ if (doc.type !== 'collection' && this._sidebarActive) {
this._parents.push(this._activeDoc);
this.switchCurrentView(doc);
this._homeMenu = false;
this.toggleSidebar();
- }
- else {
+ } else {
this._parents.push(this._activeDoc);
this.switchCurrentView(doc);
this._homeMenu = false;
this.dashboards = doc;
}
});
- }
+ };
/**
* Called when an item in the library is clicked and should
@@ -261,30 +445,31 @@ export class MobileInterface extends React.Component {
this._homeMenu = false;
this.dashboards = doc;
this.toggleSidebar();
- }
+ };
// Renders the graphical pathbar
renderPathbar = () => {
const docPath = [...this._parents, this._activeDoc];
- const items = docPath.map((doc: Doc, index: any) =>
+ const items = docPath.map((doc: Doc, index: any) => (
<div className="pathbarItem" key={index}>
- {index === 0 ? (null) : <FontAwesomeIcon key="icon" className="pathIcon" icon="angle-right" size="lg" />}
- <div className="pathbarText"
- style={{ backgroundColor: this._homeMenu || doc === this._activeDoc ? "rgb(119,17,37)" : undefined }}
- onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+ {index === 0 ? null : <FontAwesomeIcon key="icon" className="pathIcon" icon="angle-right" size="lg" />}
+ <div className="pathbarText" style={{ backgroundColor: this._homeMenu || doc === this._activeDoc ? 'rgb(119,17,37)' : undefined }} onClick={() => this.handlePathClick(doc, index)}>
+ {StrCast(doc.title)}
</div>
- </div>);
- return (<div className="pathbar">
- <div className="scrollmenu">
- {items}
</div>
- {!this._parents.length ? (null) :
- <div className="back" >
- <FontAwesomeIcon onClick={this.back} icon={"chevron-left"} color="white" size={"2x"} />
- </div>}
- <div className="hidePath" />
- </div>);
- }
+ ));
+ return (
+ <div className="pathbar">
+ <div className="scrollmenu">{items}</div>
+ {!this._parents.length ? null : (
+ <div className="back">
+ <FontAwesomeIcon onClick={this.back} icon={'chevron-left'} color="white" size={'2x'} />
+ </div>
+ )}
+ <div className="hidePath" />
+ </div>
+ );
+ };
// Handles when user clicks on a document in the pathbar
@action
@@ -301,7 +486,7 @@ export class MobileInterface extends React.Component {
this.switchCurrentView(doc);
this._parents.length = index;
}
- }
+ };
// Renders the contents of the menu and sidebar
@computed get renderDefaultContent() {
@@ -310,7 +495,9 @@ export class MobileInterface extends React.Component {
<div>
<div className="navbar">
<FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
- <div className="header" id="header">{this._homeDoc.title}</div>
+ <div className="header" id="header">
+ {StrCast(this._homeDoc.title)}
+ </div>
<div className="cover" id="cover" onClick={e => e.stopPropagation()}></div>
<div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
<span></span>
@@ -323,20 +510,23 @@ export class MobileInterface extends React.Component {
);
}
// stores dashboards documents as 'dashboards' variable
- let dashboards = CurrentUserUtils.MyDashboards;
+ let dashboards = Doc.MyDashboards;
if (this.dashboards) {
dashboards = this.dashboards;
}
// returns a list of navbar buttons as 'buttons'
const buttons = DocListCast(dashboards.data).map((doc: Doc, index: any) => {
- if (doc.type !== "ink") {
+ if (doc.type !== 'ink') {
return (
- <div
- className="item"
- key={index}>
- <div className="item-title" onClick={() => this.handleClick(doc)}> {doc.title} </div>
- <div className="item-type" onClick={() => this.handleClick(doc)}>{doc.type}</div>
- <FontAwesomeIcon onClick={() => this.handleClick(doc)} className="right" icon="angle-right" size="lg" style={{ display: `${doc.type === "collection" ? "block" : "none"}` }} />
+ <div className="item" key={index}>
+ <div className="item-title" onClick={() => this.handleClick(doc)}>
+ {' '}
+ {doc.title as string}{' '}
+ </div>
+ <div className="item-type" onClick={() => this.handleClick(doc)}>
+ {doc.type as string}
+ </div>
+ <FontAwesomeIcon onClick={() => this.handleClick(doc)} className="right" icon="angle-right" size="lg" style={{ display: `${doc.type === 'collection' ? 'block' : 'none'}` }} />
<FontAwesomeIcon className="open" onClick={() => this.openFromSidebar(doc)} icon="external-link-alt" size="lg" />
</div>
);
@@ -347,43 +537,39 @@ export class MobileInterface extends React.Component {
<div>
<div className="navbar">
<FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
- <div className="header" id="header">{this._sidebarActive ? "library" : this._activeDoc.title}</div>
- <div className={`toggle-btn ${this._sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}>
+ <div className="header" id="header">
+ {this._sidebarActive ? 'library' : (this._activeDoc.title as string)}
+ </div>
+ <div className={`toggle-btn ${this._sidebarActive ? 'active' : ''}`} onClick={this.toggleSidebar}>
<span></span>
<span></span>
<span></span>
</div>
- <div className={`background ${this._sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}></div>
+ <div className={`background ${this._sidebarActive ? 'active' : ''}`} onClick={this.toggleSidebar}></div>
</div>
{this.renderPathbar()}
- <div className={`sidebar ${this._sidebarActive ? "active" : ""}`}>
+ <div className={`sidebar ${this._sidebarActive ? 'active' : ''}`}>
<div className="sidebarButtons">
- {this.dashboards ?
+ {this.dashboards ? (
<>
{buttons}
- <div
- className="item" key="home"
- onClick={this.returnMain}
- style={{ opacity: 0.7 }}>
+ <div className="item" key="home" onClick={this.returnMain} style={{ opacity: 0.7 }}>
<FontAwesomeIcon className="right" icon="angle-double-left" size="lg" />
<div className="item-type">Return to dashboards</div>
</div>
- </> :
+ </>
+ ) : (
<>
{buttons}
- <div
- className="item"
- style={{ opacity: 0.7 }}
- onClick={() => this.createNewDashboard()}>
+ <div className="item" style={{ opacity: 0.7 }} onClick={() => this.createNewDashboard()}>
<FontAwesomeIcon className="right" icon="plus" size="lg" />
<div className="item-type">Create New Dashboard</div>
</div>
</>
- }
+ )}
</div>
</div>
- <div className={`blanket ${this._sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}>
- </div>
+ <div className={`blanket ${this._sidebarActive ? 'active' : ''}`} onClick={this.toggleSidebar}></div>
</div>
);
}
@@ -392,57 +578,54 @@ export class MobileInterface extends React.Component {
* Handles the 'Create New Dashboard' button in the menu (taken from MainView.tsx)
*/
@action
- createNewDashboard = async (id?: string) => {
- const scens = CurrentUserUtils.MyDashboards;
+ createNewDashboard = (id?: string) => {
+ const scens = Doc.MyDashboards;
const dashboardCount = DocListCast(scens.data).length + 1;
const freeformOptions: DocumentOptions = {
x: 0,
y: 400,
- title: "Collection " + dashboardCount,
+ title: 'Collection ' + dashboardCount,
};
- const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions);
- const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, "row");
+ const freeformDoc = Doc.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions);
+ const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, 'row');
const toggleTheme = ScriptField.MakeScript(`self.colorScheme = self.colorScheme ? undefined: ${ColorScheme.Dark}}`);
const toggleComic = ScriptField.MakeScript(`toggleComicMode()`);
const cloneDashboard = ScriptField.MakeScript(`cloneDashboard()`);
dashboardDoc.contextMenuScripts = new List<ScriptField>([toggleTheme!, toggleComic!, cloneDashboard!]);
- dashboardDoc.contextMenuLabels = new List<string>(["Toggle Theme Colors", "Toggle Comic Mode", "New Dashboard Layout"]);
+ dashboardDoc.contextMenuLabels = new List<string>(['Toggle Theme Colors', 'Toggle Comic Mode', 'New Dashboard Layout']);
- Doc.AddDocToList(scens, "data", dashboardDoc);
- }
+ Doc.AddDocToList(scens, 'data', dashboardDoc);
+ };
// Button for switching between pen and ink mode
@action
onSwitchInking = () => {
- const button = document.getElementById("inkButton") as HTMLElement;
- button.style.backgroundColor = this._ink ? "white" : "black";
- button.style.color = this._ink ? "black" : "white";
+ const button = document.getElementById('inkButton') as HTMLElement;
+ button.style.backgroundColor = this._ink ? 'white' : 'black';
+ button.style.color = this._ink ? 'black' : 'white';
if (!this._ink) {
- CurrentUserUtils.SelectedTool = InkTool.Pen;
+ Doc.ActiveTool = InkTool.Pen;
this._ink = true;
} else {
- CurrentUserUtils.SelectedTool = InkTool.None;
+ Doc.ActiveTool = InkTool.None;
this._ink = false;
}
- }
+ };
// The static ink menu that appears at the top
@computed get inkMenu() {
- return this._activeDoc._viewType !== CollectionViewType.Docking || !this._ink ? (null) :
- <div className="colorSelector">
- {/* <CollectionFreeFormViewChrome /> */}
- </div>;
+ return this._activeDoc._viewType !== CollectionViewType.Docking || !this._ink ? null : <div className="colorSelector">{/* <CollectionFreeFormViewChrome /> */}</div>;
}
// DocButton that uses UndoManager and handles the opacity change if CanUndo is true
@computed get undo() {
- if (this.mainContainer && this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc &&
- this._activeDoc !== Doc.SharingDoc() && this._activeDoc.title !== "WORKSPACES") {
+ if (this.mainContainer && this._activeDoc.type === 'collection' && this._activeDoc !== this._homeDoc && this._activeDoc !== Doc.SharingDoc() && this._activeDoc.title !== 'WORKSPACES') {
return (
- <div className="docButton"
- style={{ backgroundColor: "black", color: "white", fontSize: "60", opacity: UndoManager.CanUndo() ? "1" : "0.4", }}
+ <div
+ className="docButton"
+ style={{ backgroundColor: 'black', color: 'white', fontSize: '60', opacity: UndoManager.CanUndo() ? '1' : '0.4' }}
id="undoButton"
title="undo"
onClick={(e: React.MouseEvent) => {
@@ -450,17 +633,18 @@ export class MobileInterface extends React.Component {
e.stopPropagation();
}}>
<FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="undo-alt" />
- </div>);
- } else return (null);
+ </div>
+ );
+ } else return null;
}
// DocButton that uses UndoManager and handles the opacity change if CanRedo is true
@computed get redo() {
- if (this.mainContainer && this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc &&
- this._activeDoc !== Doc.SharingDoc() && this._activeDoc.title !== "WORKSPACES") {
+ if (this.mainContainer && this._activeDoc.type === 'collection' && this._activeDoc !== this._homeDoc && this._activeDoc !== Doc.SharingDoc() && this._activeDoc.title !== 'WORKSPACES') {
return (
- <div className="docButton"
- style={{ backgroundColor: "black", color: "white", fontSize: "60", opacity: UndoManager.CanRedo() ? "1" : "0.4", }}
+ <div
+ className="docButton"
+ style={{ backgroundColor: 'black', color: 'white', fontSize: '60', opacity: UndoManager.CanRedo() ? '1' : '0.4' }}
id="undoButton"
title="redo"
onClick={(e: React.MouseEvent) => {
@@ -468,78 +652,81 @@ export class MobileInterface extends React.Component {
e.stopPropagation();
}}>
<FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="redo-alt" />
- </div>);
- } else return (null);
+ </div>
+ );
+ } else return null;
}
// DocButton for switching into ink mode
@computed get drawInk() {
- return !this.mainContainer || this._activeDoc._viewType !== CollectionViewType.Docking ? (null) :
- <div className="docButton"
- id="inkButton"
- title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
- onClick={this.onSwitchInking}>
+ return !this.mainContainer || this._activeDoc._viewType !== CollectionViewType.Docking ? null : (
+ <div className="docButton" id="inkButton" title={Doc.isDocPinned(this._activeDoc) ? 'Pen on' : 'Pen off'} onClick={this.onSwitchInking}>
<FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib" />
- </div>;
+ </div>
+ );
}
// DocButton: Button that appears on the bottom of the screen to initiate image upload
@computed get uploadImageButton() {
- if (this._activeDoc.type === DocumentType.COL && this._activeDoc !== this._homeDoc && this._activeDoc._viewType !== CollectionViewType.Docking && this._activeDoc.title !== "WORKSPACES") {
- return <div className="docButton"
- id="imageButton"
- title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
- onClick={this.toggleUpload}>
- <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload" />
- </div>;
- } else return (null);
+ if (this._activeDoc.type === DocumentType.COL && this._activeDoc !== this._homeDoc && this._activeDoc._viewType !== CollectionViewType.Docking && this._activeDoc.title !== 'WORKSPACES') {
+ return (
+ <div className="docButton" id="imageButton" title={Doc.isDocPinned(this._activeDoc) ? 'Pen on' : 'Pen off'} onClick={this.toggleUpload}>
+ <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload" />
+ </div>
+ );
+ } else return null;
}
// DocButton to download images on the mobile
@computed get downloadDocument() {
- if (this._activeDoc.type === "image" || this._activeDoc.type === "pdf" || this._activeDoc.type === "video") {
- return <div className="docButton"
- title={"Download Image"}
- style={{ backgroundColor: "white", color: "black" }}
- onClick={e => window.open(this._activeDoc["data-path"]?.toString())}> {/* daa-path holds the url */}
- <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="download" />
- </div>;
- } else return (null);
+ if (this._activeDoc.type === 'image' || this._activeDoc.type === 'pdf' || this._activeDoc.type === 'video') {
+ return (
+ <div className="docButton" title={'Download Image'} style={{ backgroundColor: 'white', color: 'black' }} onClick={e => window.open(this._activeDoc['data-path']?.toString())}>
+ {' '}
+ {/* daa-path holds the url */}
+ <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="download" />
+ </div>
+ );
+ } else return null;
}
// DocButton for pinning images to presentation
@computed get pinToPresentation() {
// Only making button available if it is an image
- if (!(this._activeDoc.type === "collection" || this._activeDoc.type === "presentation")) {
+ if (!(this._activeDoc.type === 'collection' || this._activeDoc.type === 'presentation')) {
const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc);
- return <div className="docButton"
- title={Doc.isDocPinned(this._activeDoc) ? "Unpin from presentation" : "Pin to presentation"}
- style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }}
- onClick={e => TabDocView.PinDoc(this._activeDoc, { unpin: isPinned })}>
- <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
- </div>;
- } else return (null);
+ return (
+ <div
+ className="docButton"
+ title={Doc.isDocPinned(this._activeDoc) ? 'Unpin from presentation' : 'Pin to presentation'}
+ style={{ backgroundColor: isPinned ? 'black' : 'white', color: isPinned ? 'white' : 'black' }}
+ onClick={e => TabDocView.PinDoc(this._activeDoc)}>
+ <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
+ </div>
+ );
+ } else return null;
}
// Buttons for switching the menu between large and small icons
@computed get switchMenuView() {
- return this._activeDoc.title !== this._homeDoc.title ? (null) :
+ return this._activeDoc.title !== this._homeDoc.title ? null : (
<div className="homeSwitch">
- <div className={`list ${!this._menuListView ? "active" : ""}`} onClick={this.changeToIconView}>
+ <div className={`list ${!this._menuListView ? 'active' : ''}`} onClick={this.changeToIconView}>
<FontAwesomeIcon size="sm" icon="th-large" />
</div>
- <div className={`list ${this._menuListView ? "active" : ""}`} onClick={this.changeToListView}>
+ <div className={`list ${this._menuListView ? 'active' : ''}`} onClick={this.changeToListView}>
<FontAwesomeIcon size="sm" icon="bars" />
</div>
- </div>;
+ </div>
+ );
}
// Logic for switching the menu into the icons
@action
changeToIconView = () => {
- if (this._homeDoc._viewType = "stacking") {
+ if ((this._homeDoc._viewType = 'stacking')) {
this._menuListView = false;
- this._homeDoc._viewType = "masonry";
+ this._homeDoc._viewType = 'masonry';
this._homeDoc.columnWidth = 300;
this._homeDoc._columnWidth = 300;
const menuButtons = DocListCast(this._homeDoc.data);
@@ -552,13 +739,13 @@ export class MobileInterface extends React.Component {
doc._nativeWidth = 400;
});
}
- }
+ };
// Logic for switching the menu into the stacking view
@action
changeToListView = () => {
- if (this._homeDoc._viewType = "masonry") {
- this._homeDoc._viewType = "stacking";
+ if ((this._homeDoc._viewType = 'masonry')) {
+ this._homeDoc._viewType = 'stacking';
this._menuListView = true;
const menuButtons = DocListCast(this._homeDoc.data);
menuButtons.map(doc => {
@@ -569,60 +756,59 @@ export class MobileInterface extends React.Component {
doc._nativeWidth = 900;
});
}
- }
+ };
// For setting up the presentation document for the home menu
@action
setupDefaultPresentation = () => {
- const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+ const presentation = Doc.ActivePresentation;
if (presentation) {
this.switchCurrentView(presentation);
this._homeMenu = false;
}
- }
+ };
// For toggling image upload pop up
@action
- toggleUpload = () => this._imageUploadActive = !this._imageUploadActive
+ toggleUpload = () => (this._imageUploadActive = !this._imageUploadActive);
// For toggling audio record and dictate pop up
@action
- toggleAudio = () => this._audioUploadActive = !this._audioUploadActive
+ toggleAudio = () => (this._audioUploadActive = !this._audioUploadActive);
// Button for toggling the upload pop up in a collection
@action
toggleUploadInCollection = () => {
- const button = document.getElementById("imageButton") as HTMLElement;
- button.style.backgroundColor = this._imageUploadActive ? "white" : "black";
- button.style.color = this._imageUploadActive ? "black" : "white";
+ const button = document.getElementById('imageButton') as HTMLElement;
+ button.style.backgroundColor = this._imageUploadActive ? 'white' : 'black';
+ button.style.color = this._imageUploadActive ? 'black' : 'white';
this._imageUploadActive = !this._imageUploadActive;
- }
+ };
// For closing the image upload pop up
@action
closeUpload = () => {
this._imageUploadActive = false;
- }
+ };
// Returns the image upload pop up
@computed get uploadImage() {
- const doc = !this._homeMenu ? this._activeDoc : Cast(Doc.SharingDoc(), Doc) as Doc;
+ const doc = !this._homeMenu ? this._activeDoc : (Cast(Doc.SharingDoc(), Doc) as Doc);
return <Uploader Document={doc} />;
}
- // Radial menu can only be used if it is a colleciton and it is not a homeDoc
+ // Radial menu can only be used if it is a colleciton and it is not a homeDoc
// (and cannot be used on Dashboard to avoid pin to presentation opening on right)
@computed get displayRadialMenu() {
- return this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc &&
- this._activeDoc._viewType !== CollectionViewType.Docking ? <RadialMenu /> : (null);
+ return this._activeDoc.type === 'collection' && this._activeDoc !== this._homeDoc && this._activeDoc._viewType !== CollectionViewType.Docking ? <RadialMenu /> : null;
}
onDragOver = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
- }
+ };
/**
* MENU BUTTON
@@ -634,22 +820,22 @@ export class MobileInterface extends React.Component {
const mobileUpload = Cast(Doc.SharingDoc(), Doc) as Doc;
this.switchCurrentView(mobileUpload);
this._homeMenu = false;
- }
+ };
render() {
return (
<div className="mobileInterface-container" onDragOver={this.onDragOver}>
<SettingsManager />
- <div className={`image-upload ${this._imageUploadActive ? "active" : ""}`}>
- {this.uploadImage}
- </div>
- <div className={`audio-upload ${this._audioUploadActive ? "active" : ""}`}>
+ <div className={`image-upload ${this._imageUploadActive ? 'active' : ''}`}>{this.uploadImage}</div>
+ <div className={`audio-upload ${this._audioUploadActive ? 'active' : ''}`}>
<AudioUpload />
</div>
{this.switchMenuView}
{this.inkMenu}
<GestureOverlay>
- <div style={{ display: "none" }}><RichTextMenu key="rich" /></div>
+ <div style={{ display: 'none' }}>
+ <RichTextMenu key="rich" />
+ </div>
<div className="docButtonContainer">
{this.pinToPresentation}
{this.downloadDocument}
@@ -667,21 +853,31 @@ export class MobileInterface extends React.Component {
}
}
-
//Global functions for mobile menu
-ScriptingGlobals.add(function switchToMobileLibrary() { return MobileInterface.Instance.switchToLibrary(); },
- "opens the library to navigate through dashboards on Dash Mobile");
-ScriptingGlobals.add(function openMobileUploads() { return MobileInterface.Instance.toggleUpload(); },
- "opens the upload files menu for Dash Mobile");
-ScriptingGlobals.add(function switchToMobileUploadCollection() { return MobileInterface.Instance.switchToMobileUploads(); },
- "opens the mobile uploads collection on Dash Mobile");
-ScriptingGlobals.add(function openMobileAudio() { return MobileInterface.Instance.toggleAudio(); },
- "opens the record and dictate menu on Dash Mobile");
-ScriptingGlobals.add(function switchToMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); },
- "opens the presentation on Dash Mobile");
-ScriptingGlobals.add(function openMobileSettings() { return SettingsManager.Instance.open(); },
- "opens settings on Dash Mobile");
+ScriptingGlobals.add(function switchToMobileLibrary() {
+ return MobileInterface.Instance.switchToLibrary();
+}, 'opens the library to navigate through dashboards on Dash Mobile');
+ScriptingGlobals.add(function openMobileUploads() {
+ return MobileInterface.Instance.toggleUpload();
+}, 'opens the upload files menu for Dash Mobile');
+ScriptingGlobals.add(function switchToMobileUploadCollection() {
+ return MobileInterface.Instance.switchToMobileUploads();
+}, 'opens the mobile uploads collection on Dash Mobile');
+ScriptingGlobals.add(function openMobileAudio() {
+ return MobileInterface.Instance.toggleAudio();
+}, 'opens the record and dictate menu on Dash Mobile');
+ScriptingGlobals.add(function switchToMobilePresentation() {
+ return MobileInterface.Instance.setupDefaultPresentation();
+}, 'opens the presentation on Dash Mobile');
+ScriptingGlobals.add(function openMobileSettings() {
+ return SettingsManager.Instance.open();
+}, 'opens settings on Dash Mobile');
// Other global functions for mobile
-ScriptingGlobals.add(function switchMobileView(doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); },
- "changes the active document displayed on the Dash Mobile", "(doc: any)"); \ No newline at end of file
+ScriptingGlobals.add(
+ function switchMobileView(doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) {
+ return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch);
+ },
+ 'changes the active document displayed on the Dash Mobile',
+ '(doc: any)'
+);
diff --git a/src/mobile/MobileMain.tsx b/src/mobile/MobileMain.tsx
index 4a1e26078..6cbf86f77 100644
--- a/src/mobile/MobileMain.tsx
+++ b/src/mobile/MobileMain.tsx
@@ -1,25 +1,26 @@
-import { MobileInterface } from "./MobileInterface";
-import { Docs } from "../client/documents/Documents";
-import { CurrentUserUtils } from "../client/util/CurrentUserUtils";
-import * as ReactDOM from 'react-dom';
import * as React from 'react';
-import { DocServer } from "../client/DocServer";
-import { AssignAllExtensions } from "../extensions/General/Extensions";
+import * as ReactDOM from 'react-dom';
+import { DocServer } from '../client/DocServer';
+import { Docs } from '../client/documents/Documents';
+import { CurrentUserUtils } from '../client/util/CurrentUserUtils';
+import { AssignAllExtensions } from '../extensions/General/Extensions';
+import { MobileInterface } from './MobileInterface';
AssignAllExtensions();
(async () => {
const info = await CurrentUserUtils.loadCurrentUser();
- DocServer.init(window.location.protocol, window.location.hostname, 4321, info.email + " (mobile)");
+ DocServer.init(window.location.protocol, window.location.hostname, 4321, info.email + ' (mobile)');
await Docs.Prototypes.initialize();
- if (info.id !== "__guest__") {
- // a guest will not have an id registered
- await CurrentUserUtils.loadUserDocument(info.id);
- }
- document.getElementById('root')!.addEventListener('wheel', event => {
- if (event.ctrlKey) {
- event.preventDefault();
- }
- }, true);
+ await CurrentUserUtils.loadUserDocument(info.id);
+ document.getElementById('root')!.addEventListener(
+ 'wheel',
+ event => {
+ if (event.ctrlKey) {
+ event.preventDefault();
+ }
+ },
+ true
+ );
ReactDOM.render(<MobileInterface />, document.getElementById('root'));
-})(); \ No newline at end of file
+})();
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-03-10 04:01:58 +0000