From 6604c40d02b4dd7c6a6c663f301bcaedfee6998f Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 21 Aug 2019 17:18:02 -0400 Subject: send help oh god --- src/client/util/RichTextSchema.tsx | 81 ------------------------------------- src/client/util/TooltipTextMenu.tsx | 29 ------------- 2 files changed, 110 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 733c50d20..1f6c2badb 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -111,19 +111,6 @@ export const nodes: { [index: string]: NodeSpec } = { // } // }] }, - - checkbox: { - inline: true, - attrs: { - visibility: { default: false } - }, - group: "inline", - toDOM(node) { - const attrs = { style: `width: 40px` }; - return ["span", { ...node.attrs, ...attrs }]; - }, - }, - // :: NodeSpec An inline image (``) node. Supports `src`, // `alt`, and `href` attributes. The latter two default to the empty // string. @@ -203,19 +190,6 @@ export const nodes: { [index: string]: NodeSpec } = { // toDOM() { return ulDOM } }, - checkbox_list: { - content: 'checklist_item+', - marks: '_', - group: 'block', - // inline: true, - parseDOM: [ - { tag: "ul" } - ], - toDOM() { - return ["ul", { style: 'list-style: none' }, 0]; - }, - }, - //bullet_list: { // content: 'list_item+', // group: 'block', @@ -228,18 +202,6 @@ export const nodes: { [index: string]: NodeSpec } = { ...listItem, content: 'paragraph block*' }, - - checklist_item: { - content: 'paragraph block*', - parseDOM: [{ tag: "li" }], - // toDOM() { - // return ["li", { style: 'content: checkbox' }, 0]; - // }, - toDOM() { - return ["li", 0]; - }, - defining: true - } }; const emDOM: DOMOutputSpecArray = ["em", 0]; @@ -562,49 +524,6 @@ export class ImageResizeView { } } -export class CheckboxView { - _view: any; - _collapsed: HTMLElement; - - constructor(node: any, view: any, getPos: any) { - this._collapsed = document.createElement("span"); - this._collapsed.textContent = node.attrs.visibility ? "⬛" : "⬜"; - this._collapsed.style.position = "relative"; - // this._collapsed.style.width = "80px"; - this._collapsed.style.height = "20px"; - let self = this; - this._view = view; - const js = node.toJSON; - node.toJSON = function () { - - return js.apply(this, arguments); - }; - this._collapsed.onpointerdown = function (e: any) { - console.log(node.attrs.visibility) - if (node.attrs.visibility) { - let y = getPos(); - const attrs = { ...node.attrs }; - attrs.visibility = !attrs.visibility; - view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs)); - self._collapsed.textContent = "⬜"; - } else { - let y = getPos(); - const attrs = { ...node.attrs }; - attrs.visibility = !attrs.visibility; - console.log(attrs.visibility) - view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs)); - self._collapsed.textContent = "⬛"; - } - e.preventDefault(); - e.stopPropagation(); - console.log(node.attrs.visibility) - - }; - (this as any).dom = this._collapsed; - } - -} - export class SummarizedView { // TODO: highlight text that is summarized. to find end of region, walk along mark _collapsed: HTMLElement; diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 46961e416..450931b76 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -189,7 +189,6 @@ export class TooltipTextMenu { this.tooltip.appendChild(this._brushdom); this.tooltip.appendChild(this.createLink().render(this.view).dom); this.tooltip.appendChild(this.createStar().render(this.view).dom); - this.tooltip.appendChild(this.createCheckbox().render(this.view).dom); this.updateListItemDropdown(":", this.listTypeBtnDom); @@ -441,14 +440,6 @@ export class TooltipTextMenu { return true; } - public static insertCheckbox(state: EditorState, dispatch: any) { - let newNode = schema.nodes.checkbox.create({ visibility: false }); - if (dispatch) { - dispatch(state.tr.replaceSelectionWith(newNode)); - } - return true; - } - //will display a remove-list-type button if selection is in list, otherwise will show list type dropdown updateListItemDropdown(label: string, listTypeBtn: any) { //remove old btn @@ -461,7 +452,6 @@ export class TooltipTextMenu { }); //option to remove the list formatting toAdd.push(this.dropdownNodeBtn("X", "color: black; width: 40px;", undefined, this.view, this.listTypes, this.changeToNodeType)); - toAdd.push(this.dropdownNodeBtn("⬜", "color:black; width:40px;", schema.nodes.checkbox_list, this.view, this.listTypes, this.changeToNodeType)) listTypeBtn = (new Dropdown(toAdd, { label: label, @@ -525,11 +515,6 @@ export class TooltipTextMenu { liftListItem(schema.nodes.list_item)(view.state, view.dispatch); if (nodeType) { //add new wrapInList(nodeType)(view.state, view.dispatch); - // console.log(nodeType === schema.nodes.checkbox_list) - // if (nodeType === schema.nodes.checkbox_list) { - // TooltipTextMenu.insertCheckbox(view.state, view.dispatch) - // } - } } @@ -564,20 +549,6 @@ export class TooltipTextMenu { }); } - createCheckbox() { - return new MenuItem({ - title: "Checkbox", - label: "Checkbox", - icon: icons.code, - css: "color:white", - class: "checkbox", - execEvent: "", - run: (state, dispatch) => { - TooltipTextMenu.insertCheckbox(state, dispatch); - } - }) - } - deleteLinkItem() { const icon = { height: 16, width: 16, -- cgit v1.2.3-70-g09d2 From f4afa471e03618169137a6533db8623aae93d6c5 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 23 Aug 2019 12:42:38 -0400 Subject: got drag drop buttons working better. --- src/client/util/DragManager.ts | 30 ++++++++- .../views/collections/CollectionViewChromes.tsx | 71 +++++++--------------- .../collectionFreeForm/CollectionFreeFormView.tsx | 11 +++- src/client/views/nodes/ButtonBox.scss | 19 +++++- src/client/views/nodes/ButtonBox.tsx | 42 +++++++------ src/new_fields/Doc.ts | 14 ++++- 6 files changed, 111 insertions(+), 76 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 24c093213..748fb9d13 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -1,5 +1,5 @@ import { action, runInAction } from "mobx"; -import { Doc } from "../../new_fields/Doc"; +import { Doc, Field } from "../../new_fields/Doc"; import { Cast, StrCast } from "../../new_fields/Types"; import { URLField } from "../../new_fields/URLField"; import { emptyFunction } from "../../Utils"; @@ -9,6 +9,11 @@ import { DocumentManager } from "./DocumentManager"; import { LinkManager } from "./LinkManager"; import { SelectionManager } from "./SelectionManager"; import { SchemaHeaderField } from "../../new_fields/SchemaHeaderField"; +import { Docs } from "../documents/Documents"; +import { CompileScript } from "./Scripting"; +import { ScriptField } from "../../new_fields/ScriptField"; +import { List } from "../../new_fields/List"; +import { PrefetchProxy } from "../../new_fields/Proxy"; export type dropActionType = "alias" | "copy" | undefined; export function SetupDrag( @@ -247,6 +252,27 @@ export namespace DragManager { }); } + export function StartButtonDrag(eles: HTMLElement[], script: string, title: string, vars: { [name: string]: Field }, params: string[], downX: number, downY: number, options?: DragOptions) { + let dragData = new DragManager.DocumentDragData([], [undefined]); + runInAction(() => StartDragFunctions.map(func => func())); + StartDrag(eles, dragData, downX, downY, options, options && options.finishDrag ? options.finishDrag : + (dropData: { [id: string]: any }) => { + let bd = Docs.Create.ButtonDocument({ width: 150, height: 50, title: title }); + let compiled = CompileScript(script, { + params: { doc: Doc.name }, + typecheck: false, + editable: true + }); + if (compiled.compiled) { + let scriptField = new ScriptField(compiled); + bd.onClick = scriptField; + } + params.map(p => Object.keys(vars).indexOf(p) !== -1 && (Doc.GetProto(bd)[p] = new PrefetchProxy(vars[p] as Doc))); + bd.buttonParams = new List(params); + dropData.droppedDocuments = [bd]; + }); + } + export function StartLinkedDocumentDrag(eles: HTMLElement[], dragData: DocumentDragData, downX: number, downY: number, options?: DragOptions) { dragData.moveDocument = moveLinkedDocument; @@ -482,7 +508,7 @@ export namespace DragManager { // if (parent && dragEle) parent.appendChild(dragEle); }); if (target) { - if (finishDrag) finishDrag(dragData); + finishDrag && finishDrag(dragData); target.dispatchEvent( new CustomEvent("dashOnDrop", { diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 352bcd4a6..15bef39b3 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -286,20 +286,22 @@ export class CollectionViewBaseChrome extends React.Component await p));", params: ["target", "source"], // bcz: doesn't look like we can do async stuff in scripting... + title: "set content", script: "getProto(this.target).data = aliasDocs(this.source);", params: ["target", "source"], + immediate: (draggedDocs: Doc[]) => Doc.GetProto(this.props.CollectionView.props.Document).data = new List(draggedDocs) + }, + { + title: "set template", script: "this.target.childLayout = this.source ? this.source[0] : undefined", params: ["target", "source"], + immediate: (draggedDocs: Doc[]) => this.props.CollectionView.props.Document.childLayout = draggedDocs.length ? draggedDocs[0] : undefined + }]; @undoBatch @action protected drop(e: Event, de: DragManager.DropEvent): boolean { - if (de.data instanceof DragManager.DocumentDragData) { - if (de.data.draggedDocuments.length) { - if (this._currentKey === "Set Template") { - this.props.CollectionView.props.Document.childLayout = de.data.draggedDocuments[0]; - } - if (this._currentKey === "Set Content") { - Doc.GetProto(this.props.CollectionView.props.Document).data = new List(de.data.draggedDocuments); - } - e.stopPropagation(); - return true; - } + if (de.data instanceof DragManager.DocumentDragData && de.data.draggedDocuments.length) { + this.commands.filter(c => c.title === this._currentKey).map(c => c.immediate(de.data.draggedDocuments)); + e.stopPropagation(); } return true; } @@ -317,9 +319,7 @@ export class CollectionViewBaseChrome extends React.Component(); renderSuggestion = (suggestion: string) => { @@ -340,38 +340,19 @@ export class CollectionViewBaseChrome extends React.Component => { - return this._allCommands.filter(c => c.indexOf(value) !== -1); + return this.commands.filter(c => c.title.indexOf(value) !== -1).map(c => c.title); } autoSuggestDown = (e: React.PointerEvent) => { e.stopPropagation(); } + dragCommandDown = (e: React.PointerEvent) => { - let de = new DragManager.DocumentDragData([this.props.CollectionView.props.Document], [undefined]); - DragManager.StartDocumentDrag([this._commandRef.current!], de, e.clientX, e.clientY, { - finishDrag: (dropData: { [id: string]: any }) => { - let bd = Docs.Create.ButtonDocument({ width: 150, height: 50, title: this._currentKey }); - let script = `getProto(target).data = copyField(this.source);`; - let compiled = CompileScript(script, { - params: { doc: Doc.name }, - capturedVariables: { target: this.props.CollectionView.props.Document }, - typecheck: false, - editable: true - }); - if (compiled.compiled) { - let scriptField = new ScriptField(compiled); - bd.onClick = scriptField; - } - dropData.droppedDocuments = [bd]; - }, - handlers: { - dragComplete: action(() => { - }), - }, - hideSource: false - }); - e.preventDefault(); + this.commands.filter(c => c.title === this._currentKey).map(c => + DragManager.StartButtonDrag([this._commandRef.current!], c.script, c.title, + { target: this.props.CollectionView.props.Document }, c.params, e.clientX, e.clientY)); e.stopPropagation(); + e.preventDefault(); } render() { @@ -419,7 +400,7 @@ export class CollectionViewBaseChrome extends React.Component
CREATED WITHIN: -
+