diff options
5 files changed, 58 insertions, 66 deletions
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 9f32bb0c9..815dfb35a 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { observable } from 'mobx'; +import { observable, computed } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { documentSchema } from '../../../new_fields/documentSchemas'; @@ -36,27 +36,37 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) } } - render() { + advance = (e: React.MouseEvent) => { + e.stopPropagation(); + this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + 1) % this.childLayoutPairs.length; + } + goback = (e: React.MouseEvent) => { + e.stopPropagation(); + this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; + } + + @computed get content() { const index = NumCast(this.layoutDoc._itemIndex); return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) : - <div className="collectionCarouselView-outer"> - <ContentFittingDocumentView - {...this.props} - Document={this.childLayoutPairs[index].layout} - DataDocument={this.childLayoutPairs[index].data} - getTransform={this.props.ScreenToLocalTransform} /> - <div className="carouselView-back" onClick={e => { e.stopPropagation(); this.layoutDoc._itemIndex = (index - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length }}> - <FontAwesomeIcon - icon={faCaretLeft} - size={"2x"} - /> - </div> - <div className="carouselView-fwd" onClick={e => { e.stopPropagation(); this.layoutDoc._itemIndex = (index + 1) % this.childLayoutPairs.length }}> - <FontAwesomeIcon - icon={faCaretRight} - size={"2x"} - /> - </div> - </div>; + <ContentFittingDocumentView {...this.props} + Document={this.childLayoutPairs[index].layout} + DataDocument={this.childLayoutPairs[index].data} + getTransform={this.props.ScreenToLocalTransform} /> + } + @computed get buttons() { + return <> + <div key="back" className="carouselView-back" onClick={this.goback}> + <FontAwesomeIcon icon={faCaretLeft} size={"2x"} /> + </div> + <div key="fwd" className="carouselView-fwd" onClick={this.advance}> + <FontAwesomeIcon icon={faCaretRight} size={"2x"} /> + </div> + </>; + } + render() { + return <div className="collectionCarouselView-outer"> + {this.content} + {this.buttons} + </div>; } }
\ No newline at end of file diff --git a/src/client/views/collections/CollectionPivotView.tsx b/src/client/views/collections/CollectionPivotView.tsx index 98fc54b3b..66c7c9745 100644 --- a/src/client/views/collections/CollectionPivotView.tsx +++ b/src/client/views/collections/CollectionPivotView.tsx @@ -1,61 +1,37 @@ -import { CollectionSubView } from "./CollectionSubView"; -import React = require("react"); -import { computed, action, IReactionDisposer, reaction, runInAction, observable } from "mobx"; -import { faEdit, faChevronCircleUp } from "@fortawesome/free-solid-svg-icons"; -import { Doc, DocListCast, Field, DocCastAsync } from "../../../new_fields/Doc"; -import "./CollectionPivotView.scss"; -import { observer } from "mobx-react"; -import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; -import { CollectionTreeView } from "./CollectionTreeView"; -import { Cast, StrCast, NumCast } from "../../../new_fields/Types"; -import { Docs } from "../../documents/Documents"; -import { ScriptField, ComputedField } from "../../../new_fields/ScriptField"; -import { CompileScript, Scripting } from "../../util/Scripting"; -import { anchorPoints, Flyout } from "../TemplateMenu"; +import { faEdit } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { List } from "../../../new_fields/List"; +import { action, computed, IReactionDisposer, observable } from "mobx"; +import { observer } from "mobx-react"; import { Set } from "typescript-collections"; -import { PrefetchProxy } from "../../../new_fields/Proxy"; -import { EditableView } from "../EditableView"; +import { Doc, DocListCast } from "../../../new_fields/Doc"; +import { List } from "../../../new_fields/List"; import { listSpec } from "../../../new_fields/Schema"; +import { ComputedField, ScriptField } from "../../../new_fields/ScriptField"; +import { Cast, StrCast } from "../../../new_fields/Types"; +import { Docs } from "../../documents/Documents"; +import { CompileScript } from "../../util/Scripting"; +import { EditableView } from "../EditableView"; +import { anchorPoints, Flyout } from "../TemplateMenu"; +import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; +import "./CollectionPivotView.scss"; +import { CollectionSubView } from "./CollectionSubView"; +import { CollectionTreeView } from "./CollectionTreeView"; +import React = require("react"); @observer export class CollectionPivotView extends CollectionSubView(doc => doc) { - private _narrativeDisposer: IReactionDisposer | undefined; - componentWillUnmount() { - this._narrativeDisposer?.(); - } componentDidMount() { this.props.Document._freeformLayoutEngine = "pivot"; + const childDetailed = this.props.Document.childDetailed; // bcz: needs to be here to make sure the childDetailed layout template has been loaded when the first item is clicked; if (!this.props.Document._facetCollection) { const facetCollection = Docs.Create.TreeDocument([], { title: "facetFilters", _yMargin: 0, treeViewHideTitle: true }); facetCollection.target = this.props.Document; - this.props.Document.excludeFields = new List<string>(["_facetCollection", "_docFilter", "viewSpecScript"]); + this.props.Document.excludeFields = new List<string>(["_facetCollection", "_docFilter"]); const scriptText = "setDocFilter(containingTreeView.target, heading, this.title, checked)"; - const script = CompileScript(scriptText, { - params: { this: Doc.name, heading: "boolean", checked: "boolean", containingTreeView: Doc.name }, - typecheck: false, - editable: true, - }); - if (script.compiled) { - facetCollection.onCheckedClick = new ScriptField(script); - } - const openDocText = "const alias = getAlias(this); Doc.ApplyTemplateTo(childDetailed, alias, 'layout_detailed'); useRightSplit(alias); "; - this._narrativeDisposer = reaction(() => DocCastAsync(this.props.Document.childDetailed), - (childDetailedPromise) => childDetailedPromise.then(childDetailed => { - if (childDetailed) { - const openDocScript = CompileScript(openDocText, { - params: { this: Doc.name, heading: "boolean", containingTreeView: Doc.name }, - capturedVariables: { childDetailed: new PrefetchProxy(childDetailed) }, - typecheck: false, - editable: true, - }); - if (openDocScript.compiled) { - this.props.Document.onChildClick = new ScriptField(openDocScript); - } - } - }), { fireImmediately: true }); + const childText = "const alias = getAlias(this); Doc.ApplyTemplateTo(containingCollection.childDetailed, alias, 'layout_detailed'); useRightSplit(alias); "; + facetCollection.onCheckedClick = ScriptField.MakeScript(scriptText, { this: Doc.name, heading: "boolean", checked: "boolean", containingTreeView: Doc.name }); + this.props.Document.onChildClick = ScriptField.MakeScript(childText, { this: Doc.name, heading: "boolean", containingCollection: Doc.name }); this.props.Document._facetCollection = facetCollection; this.props.Document._fitToBox = true; } diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 6a6f7aa6d..9cd9c1465 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -283,6 +283,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC }, icon: "compress-arrows-alt" })); layoutItems.push({ description: ":freeform", event: () => this.props.parent.props.addDocument(Docs.Create.FreeformDocument([], { _width: 200, _height: 200, _LODdisable: true })), icon: "compress-arrows-alt" }); + layoutItems.push({ description: ":carousel", event: () => this.props.parent.props.addDocument(Docs.Create.CarouselDocument([], { _width: 400, _height: 200, _LODdisable: true })), icon: "compress-arrows-alt" }); layoutItems.push({ description: ":columns", event: () => this.props.parent.props.addDocument(Docs.Create.MulticolumnDocument([], { _width: 200, _height: 200 })), icon: "compress-arrows-alt" }); layoutItems.push({ description: ":image", event: () => this.props.parent.props.addDocument(Docs.Create.ImageDocument("http://www.cs.brown.edu/~bcz/face.gif", { _width: 200, _height: 200 })), icon: "compress-arrows-alt" }); diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index ea3c505d8..846d402ab 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -114,6 +114,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF PanelWidth={this.finalPanelWidth} PanelHeight={this.finalPanelHeight} /> : <ContentFittingDocumentView {...this.props} + CollectionDoc={this.props.ContainingCollectionDoc} DataDocument={this.props.DataDoc} getTransform={this.getTransform} active={returnFalse} diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index 5ad8ad412..ca3aa0167 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -16,6 +16,7 @@ import { deleteProperty, getField, getter, makeEditable, makeReadOnly, setter, u import { intersectRect } from "../Utils"; import { UndoManager } from "../client/util/UndoManager"; import { computedFn } from "mobx-utils"; +import { RichTextField } from "./RichTextField"; export namespace Field { export function toKeyValueString(doc: Doc, key: string): string { @@ -610,6 +611,9 @@ export namespace Doc { Cast(templateField.data, listSpec(Doc), [])?.map(d => d instanceof Doc && MakeMetadataFieldTemplate(d, templateDoc)); (Doc.GetProto(templateField)[metadataFieldKey] = ObjectField.MakeCopy(templateField.data)); } + if (templateField.data instanceof RichTextField && templateField.data.Data) { + templateField._textTemplate = ObjectField.MakeCopy(templateField.data); + } // get the layout string that the template uses to specify its layout const templateFieldLayoutString = StrCast(Doc.LayoutField(Doc.Layout(templateField))); |