= [];
- private _menu: Doc = this.mainDoc;
+ private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc);
private _open: boolean = false;
- private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+
+ // private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+ private _ink: boolean = false;
constructor(props: Readonly<{}>) {
super(props);
@@ -71,33 +1104,31 @@ export class MobileInterface extends React.Component {
@action
componentDidMount = () => {
library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]);
-
+ if (this.userDoc.activeMobile) {
+ console.log(Doc.UserDoc().activeMobile)
+ }
if (this.userDoc && !this.mainContainer) {
- this.userDoc.activeMobile = this.mainDoc;
+ this.userDoc.activeMobile = this._homeDoc;
}
+ InkingControl.Instance.switchTool(InkTool.None);
+ MobileInterface.Instance.drawingInk = false;
+ InkingControl.Instance.updateSelectedColor("#FF0000");
+ console.log(this.userDoc.inkColor);
+ console.log(InkingControl.Instance.selectedColor);
+ InkingControl.Instance.switchWidth("2");
+ this.switchCurrentView((userDoc: Doc) => this._homeDoc);
}
@action
switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => {
if (!this.userDoc) return;
- this.userDoc.activeMobile = doc(this.userDoc);
+ Doc.UserDoc().activeMobile = doc(this.userDoc);
onSwitch && onSwitch();
this.renderView = renderView;
}
- onSwitchInking = () => {
- InkingControl.Instance.switchTool(InkTool.Pen);
- MobileInterface.Instance.drawingInk = true;
-
- DocServer.Mobile.dispatchOverlayTrigger({
- enableOverlay: true,
- width: window.innerWidth,
- height: window.innerHeight
- });
- }
-
onSwitchUpload = async () => {
let width = 300;
let height = 300;
@@ -123,70 +1154,167 @@ export class MobileInterface extends React.Component {
});
}
+ toggleSidebar = () => {
+ if (this._open === false) {
+ this._open = true;
+ } else {
+ this._open = false;
+ }
+ console.log("clicked");
+ let menuButton = document.getElementById("menuButton") as HTMLElement;
+ menuButton.classList.toggle('active');
+
+ let sidebar = document.getElementById("sidebar") as HTMLElement;
+ sidebar.classList.toggle('active');
+
+ let header = document.getElementById("header") as HTMLElement;
+
+ if (!sidebar.classList.contains('active')) {
+ header.textContent = String(this._activeDoc.title);
+ } else {
+ header.textContent = "library";
+ }
+ }
+
+ switchToLibrary = () => {
+ this._parents.push(this._activeDoc);
+ this.switchCurrentView((userDoc: Doc) => this._library);
+ this._activeDoc = this._library;
+ this._homeMenu = false;
+ this.toggleSidebar();
+ }
+
back = () => {
- const doc = Cast(this._parents.pop(), Doc) as Doc;
- if (doc === Cast(this._menu, Doc) as Doc) {
+ let header = document.getElementById("header") as HTMLElement;
+ let doc = Cast(this._parents.pop(), Doc) as Doc;
+ if (doc === Cast(this._library, Doc) as Doc) {
+ this._child = null;
+ this.userDoc.activeMobile = this._library;
+ } else if (doc === Cast(this._homeDoc, Doc) as Doc) {
+ this._homeMenu = true;
+ this._parents = [];
+ this._activeDoc = this._homeDoc;
this._child = null;
- this.userDoc.activeMobile = this.mainDoc;
+ this.switchCurrentView((userDoc: Doc) => this._homeDoc);
} else {
if (doc) {
this._child = doc;
this.switchCurrentView((userDoc: Doc) => doc);
+ this._homeMenu = false;
+ header.textContent = String(doc.title);
}
}
if (doc) {
this._activeDoc = doc;
}
+ this._ink = false;
}
returnHome = () => {
+ if (this._homeMenu === false || this._open === true) {
+ this._homeMenu = true;
+ this._parents = [];
+ this._activeDoc = this._homeDoc;
+ this._child = null;
+ this.switchCurrentView((userDoc: Doc) => this._homeDoc);
+ }
+ if (this._open) {
+ this.toggleSidebar();
+ }
+ }
+
+ returnMain = () => {
+ console.log("home");
this._parents = [];
- this._activeDoc = this._menu;
- this.switchCurrentView((userDoc: Doc) => this._menu);
+ // this.toggleSidebar();
+ this._activeDoc = this._library;
+ this.switchCurrentView((userDoc: Doc) => this._library);
+ this._homeMenu = false;
this._child = null;
}
+ // @computed get onChildClickHandler() { return ScriptCast(Doc.UserDoc.onClick); }
+
displayWorkspaces = () => {
if (this.mainContainer) {
const backgroundColor = () => "white";
- return (
-
- window.screen.width}
- PanelHeight={() => window.screen.height}
- renderDepth={0}
- focus={emptyFunction}
- backgroundColor={backgroundColor}
- parentActive={returnTrue}
- whenActiveChanged={emptyFunction}
- bringToFront={emptyFunction}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}
- />
-
- );
+ if (this._activeDoc.title === "mobile audio") {
+ return (
+
+ window.screen.width}
+ PanelHeight={() => window.screen.height}
+ renderDepth={0}
+ focus={emptyFunction}
+ backgroundColor={backgroundColor}
+ parentActive={returnTrue}
+ whenActiveChanged={emptyFunction}
+ bringToFront={emptyFunction}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ />
+
+ );
+ } else {
+ return (
+
+
+
+ );
+ }
}
}
+ returnWidth = () => 2000;
+ returnHeight = () => 2000;
+
handleClick(doc: Doc) {
- const children = DocListCast(doc.data);
+ console.log(screen.height)
+ console.log(screen.width)
+ let children = DocListCast(doc.data);
if (doc.type !== "collection") {
this._parents.push(this._activeDoc);
this._activeDoc = doc;
this.switchCurrentView((userDoc: Doc) => doc);
+ this._homeMenu = false;
this.toggleSidebar();
} else if (doc.type === "collection" && children.length === 0) {
console.log("This collection has no children");
@@ -194,6 +1322,7 @@ export class MobileInterface extends React.Component {
this._parents.push(this._activeDoc);
this._activeDoc = doc;
this.switchCurrentView((userDoc: Doc) => doc);
+ this._homeMenu = false;
this._child = doc;
}
@@ -201,167 +1330,426 @@ export class MobileInterface extends React.Component {
// sidebar.classList.toggle('active');
}
+ /**
+ * Handles creation of array which is then rendered in renderPathbar()
+ */
createPathname = () => {
- let pathname = "";
+ // let pathname = 'workspaces';
+ // let titleArray = [];
+ let docArray = [];
this._parents.map((doc: Doc, index: any) => {
- if (doc === this.mainDoc) {
- pathname = pathname + doc.title;
+ // if (doc === this.mainDoc) {
+ // pathname = pathname;
+ // } else if (doc.type === "audio" || doc.type === "presentation") {
+ // pathname = pathname;
+ // } else if (doc.type !== "collection") {
+ // pathname = pathname;
+ // } else {
+ // pathname = pathname + " > " + doc.title;
+ // titleArray.push(doc.title);
+ // docArray.push(doc);
+ // }
+ docArray.push(doc);
+ });
+ docArray.push(this._activeDoc);
+ // if (this._activeDoc.title === "mobile audio") {
+ // pathname = this._activeDoc.title;
+ // } else if (this._activeDoc.title === "Presentation") {
+ // pathname = this._activeDoc.title;
+ // } else if (this._activeDoc === this.mainDoc) {
+ // pathname = pathname;
+ // } else {
+ // pathname = pathname + " > " + this._activeDoc.title;
+ // docArray.push(this._activeDoc);
+ // titleArray.push(this._activeDoc.title);
+ // }
+
+ return docArray;
+ }
+
+ // Renders the graphical pathbar
+ renderPathbar = () => {
+ // if (this._homeMenu == false) {
+ let docArray = this.createPathname();
+ let items = docArray.map((doc: Doc, index: any) => {
+ if (index == 0) {
+ return (
+
+
this.handlePathClick(doc, index)}>{doc.title}
+
+
+
+
this.handlePathClick(doc, index)}>{doc.title}
+
+
+
+
this.handlePathClick(doc, index)}>{doc.title}
+
+
+ //
+ //
+ //
this.returnHome()}>Home
+ //
+ //
+ //
+ //
+ //
this.handleClick(doc)}>{doc.title}
-
{doc.type}
-
-
-
{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}
+ let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => {
+ if (doc.type !== "ink") {
+ return (
-
-
{this.createPathname()}
+ className="item"
+ key={index}
+ onClick={() => doc.click}>{doc.title}
+
+
+
+
+
+
+ {this.renderPathbar()}
+
-
- {this._child ?
- <>
-
←
-
{buttons}
-
Home
- :
- <>
+ );
+ }
+ const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+ let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
+ if (doc.type !== "ink") {
+ return (
+
this.handleClick(doc)}>{doc.title}
+
{doc.type}
+
+
);
+ }
+ });
+
+ if (this._child) {
+ buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => {
+ if (doc.type !== "ink") {
+ return (
+
this.handleClick(doc)}>{doc.title}
+
{doc.type}
+
+
);
+ }
+ });
+ }
+
+ if (!this._child) {
+ return (
+
+
+
+
+
+
+ {this.renderPathbar()}
+
+
+ {/*
+ {this.renderView}
+
*/}
{this.renderView}
}
-
- );
+ );
+ }
+ else {
+ return (
+
+
+
+
+
+
+ {this.renderPathbar()}
+
+
+
+
;
+ }
+ }
+
+ toggleSelector = () => {
+ console.log("toggle selector!");
+ let toolbar = document.getElementById("toolbar") as HTMLElement;
+ toolbar.classList.toggle('active');
+ }
+
+ colorTool = () => {
+ if (this._activeDoc._viewType === "docking") {
+ const color = InkingControl.Instance.selectedColor;
+ console.log(color);
+ return (
+
+ );
+ }
+ }
+
+ onSwitchInking = () => {
+ const button = document.getElementById("inkButton") as HTMLElement;
+ const color = InkingControl.Instance.selectedColor;
+ button.style.backgroundColor = this._ink ? "white" : color;
+ button.style.color = this._ink ? "black" : "white";
+
+ if (!this._ink) {
+ console.log("INK IS ACTIVE");
+ InkingControl.Instance.switchTool(InkTool.Pen);
+ MobileInterface.Instance.drawingInk = true;
+ this._ink = true;
+ } else {
+ console.log("INK IS INACTIVE");
+ InkingControl.Instance.switchTool(InkTool.None);
+ MobileInterface.Instance.drawingInk = false;
+ this._ink = false;
+ }
+ }
+
+ drawInk = () => {
+ if (this._activeDoc._viewType === "docking") {
+ const inkIsOn = this._ink;
+ return
+
+
;
+ }
+ }
+
+ downloadDocument = () => {
if (this._activeDoc.type === "image") {
- const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc);
- return {
- if (isPinned) {
- DockedFrameRenderer.UnpinDoc(this._activeDoc);
- }
- else {
- DockedFrameRenderer.PinDoc(this._activeDoc);
- }
+ window.open(url);
+ console.log(url);
}}>
-
;
}
}
recordAudio = async () => {
- // upload to server with known URL
- this._parents.push(this._activeDoc);
+ // upload to server with known URL
+ if (this._activeDoc.title !== "mobile audio") {
+ this._parents.push(this._activeDoc);
+ }
const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc;
+ console.log(audioDoc);
if (audioDoc) {
console.log("audioClicked: " + audioDoc.title);
this._activeDoc = audioDoc;
this.switchCurrentView((userDoc: Doc) => audioDoc);
- this.toggleSidebar();
- }
- const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
- if (audioRightSidebar) {
- console.log(audioRightSidebar.title);
- const data = Cast(audioRightSidebar.data, listSpec(Doc));
- if (data) {
- data.push(audioDoc);
- }
+ this._homeMenu = false;
+ // this.toggleSidebar();
}
+ // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+ // this.audioState = await audioDoc.getProto;
+ // if (this.audioState) {
+ // console.log(this.audioState);
+ // const data = Cast(audioRightSidebar.data, listSpec(Doc));
+ // if (data) {
+ // data.push(audioDoc);
+ // }
+ // }
}
- openDefaultPresentation = () => {
- this._parents.push(this._activeDoc);
- const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
-
- if (presentation) {
- console.log("presentation clicked: " + presentation.title);
- this._activeDoc = presentation;
- this.switchCurrentView((userDoc: Doc) => presentation);
- this.toggleSidebar();
+ uploadAudio = () => {
+ const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+ const audioDoc = this._activeDoc;
+ const data = Cast(audioRightSidebar.data, listSpec(Doc));
+ console.log(audioDoc.proto);
+ if (data) {
+ data.push(audioDoc);
}
+ // this.recordAudio();
}
- // mobileHome = () => {
- // return (
- //
- //
-
- //
- //
-
- //
- //
-
- //
- //
-
- //
- //
-
- //
- //
HELLO!
+ // );
+ // }
+ // }
// }
- renderActiveCollection = (userDoc: Doc) => {
- if (this.activeContainer) {
- const active = Cast(this.activeContainer.data, listSpec(Doc));
- if (active) {
- return (
- HELLO!
- );
- }
- }
- }
-
onBack = (e: React.MouseEvent) => {
this.switchCurrentView((userDoc: Doc) => this.mainDoc);
InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool
@@ -445,6 +1833,44 @@ export class MobileInterface extends React.Component {
}
}
+ pinToPresentation = () => {
+ // Only making button available if it is an image
+ if (this._activeDoc.type === "image") {
+ const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc);
+ return {
+ if (isPinned) {
+ DockedFrameRenderer.UnpinDoc(this._activeDoc);
+ }
+ else {
+ DockedFrameRenderer.PinDoc(this._activeDoc);
+ }
+ }}>
+
+
;
+ }
+ }
+
+ setupDefaultPresentation = () => {
+ if (this._activeDoc.title !== "Presentation") {
+ this._parents.push(this._activeDoc);
+ }
+
+ const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+
+ if (presentation) {
+ console.log(this._activeDoc.mobile);
+ console.log("presentation clicked: " + presentation.title);
+ this._activeDoc = presentation;
+ this.switchCurrentView((userDoc: Doc) => presentation);
+ this._homeMenu = false;
+ // this.toggleSidebar();
+ }
+ }
+
onDragOver = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
@@ -453,7 +1879,7 @@ export class MobileInterface extends React.Component {
render() {
// const content = this.currentView === "main" ? this.mainContent :
// this.currentView === "ink" ? this.inkContent :
- // this.currentView === "upload" ? this.uploadContent : <>;
+ // this.currentView === "upload" ? this.uploadContent : <>;onDragOver={this.onDragOver}
return (
{/*
@@ -462,16 +1888,28 @@ export class MobileInterface extends React.Component {
*/}
{/*
*/}
- {this.displayWorkspaces()}
- {this.pinToPresentation()}
+ {/* {this.menuOptions()} */}
+ {/* {this.displayHome()} */}
+
+ {this.pinToPresentation()}
+ {this.downloadDocument()}
+ {this.drawInk()}
+ {this.uploadAudioButton()}
+ {this.colorTool()}
+
+
+ {this.displayWorkspaces()}
+ {this.renderDefaultContent()}
+
+
{/* */}
{/*
*/}
{/*
*/}
-
+ {/*
{this.renderDefaultContent()}
-
+
*/}
{/*
*/}
{/*
*/}
{/*
@@ -485,6 +1923,13 @@ export class MobileInterface extends React.Component {
}
Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); });
+Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); });
+Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); });
+Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); });
+Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); });
+Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); });
+
+
// WAS 2
// 1
@@ -527,15 +1972,7 @@ Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, render
// }
// }
-// 2
-// Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); });
-// Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); });
-// Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); });
-// Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); });
- // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); });
-
-
-// 3
+// 3
// renderInkingContent = () => {
// console.log("rendering inking content");
// // TODO: support panning and zooming
@@ -583,4 +2020,4 @@ Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, render
//
-
Workspace1
-
Workspace2
-
Workspace3
-