add sections

src/layouts/defaultConfig.json.meta

@@ -1,2 +1,2 @@
-title: $:/plugins/Gk0Wk/layout/defaultConfig.json
+title: $:/plugins/Gk0Wk/layouts/defaultConfig.json
 type: application/json

src/layouts/modals/addTiddler.tid

@@ -1,4 +1,4 @@
-title: $:/plugins/Gk0Wk/layout/modals/add-tiddler
+title: $:/plugins/Gk0Wk/layouts/modals/add-tiddler
 type: text/vnd.tiddlywiki
 code-body: yes
 subtitle: <$text text={{{ [[$:/language]get[text]removeprefix[$:/languages/]else[en-GB]search[zh]then[添加条目]else[Add Tiddler]] }}} />

src/layouts/plugin.info

@@ -1,6 +1,6 @@
 {
-  "title": "$:/plugins/Gk0Wk/layout",
-  "name": "layout",
+  "title": "$:/plugins/Gk0Wk/layouts",
+  "name": "layouts",
   "author": "Gk0Wk",
   "description": "powerful layout view for TiddlyWiki",
   "plugin-type": "plugin",

src/layouts/readme.tid

@@ -1,3 +1,3 @@
-title: $:/plugins/Gk0Wk/layout/readme
+title: $:/plugins/Gk0Wk/layouts/readme
 type: text/vnd.tiddlywiki
-caption: layout-readme
+caption: layouts-readme

src/layouts/style.css.meta

@@ -1,3 +1,3 @@
-title: $:/plugins/Gk0Wk/layout/style.css
+title: $:/plugins/Gk0Wk/layouts/style.css
 tags: $:/tags/Stylesheet
 type: text/vnd.tiddlywiki

src/layouts/widget/addNewTiddlerf.ts

@@ -23,7 +23,7 @@ export const addNewTiddlerIcon = (stack: Stack, chinese = false) => {
       'layout:template': '$:/core/ui/ViewTemplate/body',
       'layout:className': 'gk0wk-gl-tiddler-container',
     });
-    ($tw as any).modal.display('$:/plugins/Gk0Wk/layout/modals/add-tiddler', {
+    ($tw as any).modal.display('$:/plugins/Gk0Wk/layouts/modals/add-tiddler', {
       event,
     });
   });

src/layouts/widget/index.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   IParseTreeNode,
   IWidgetInitialiseOptions,
   IChangedTiddlers,
@@ -70,12 +70,12 @@ class GoldenLayoutWidget extends Widget {
       );
     }
     this.config ??= $tw.utils.parseJSONSafe(
-      $tw.wiki.getTiddlerText('$:/plugins/Gk0Wk/layout/defaultConfig.json')!,
+      $tw.wiki.getTiddlerText('$:/plugins/Gk0Wk/layouts/defaultConfig.json')!,
       () => undefined,
     );
     this.config ??= JSON.parse(
-      $tw.wiki.getTiddler('$:/plugins/Gk0Wk/layout')!.fields.text,
-    ).tiddlers['$:/plugins/Gk0Wk/layout/defaultConfig.json'];
+      $tw.wiki.getTiddler('$:/plugins/Gk0Wk/layouts')!.fields.text,
+    ).tiddlers['$:/plugins/Gk0Wk/layouts/defaultConfig.json'];
 
     this.config!.header = {
       ...(this.config!.header ?? {}),

src/sections/plugin.info

@@ -0,0 +1,9 @@
+{
+  "title": "$:/plugins/Gk0Wk/sections",
+  "name": "sections",
+  "author": "Gk0Wk",
+  "description": "Section editor for TiddlyWiki5",
+  "plugin-type": "plugin",
+  "version": "0.0.1-alpha1",
+  "list": "readme LICENSE"
+}

src/sections/readme.tid

@@ -0,0 +1,3 @@
+title: $:/plugins/Gk0Wk/sections/readme
+type: text/vnd.tiddlywiki
+caption: sections-readme

src/sections/style.css

@@ -0,0 +1,92 @@
+.gk0wk-section-preview {
+  position: relative;
+}
+.gk0wk-section-preview[collapsed="yes"] {
+  margin: 5px 0;
+}
+
+.gk0wk-section-editor-preview-sidebar,
+.gk0wk-section-editor-editing-sidebar {
+  position: absolute;
+  max-height: calc(100% + 10px);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  transition: all {{$:/config/AnimationDuration}}ms;
+}
+.gk0wk-section-preview[collapsed="yes"] > .gk0wk-section-editor-preview-sidebar {
+  top: -5px;
+}
+.gk0wk-section-preview[collapsed="no"] > .gk0wk-section-editor-preview-sidebar {
+  top: -10px;
+}
+.gk0wk-section-preview:hover
+  > .gk0wk-section-editor-preview-sidebar {
+  opacity: 1;
+}
+.gk0wk-section-editor-preview-sidebar[side="left"] {
+  height: 50px;
+  left: -35px;
+  opacity: 0;
+}
+.gk0wk-section-editor-preview-sidebar[side="right"] {
+  height: 50px;
+  right: -35px;
+  opacity: 0;
+}
+.gk0wk-section-editor-editing-sidebar[side="right"] {
+  height: 50px;
+  right: -35px;
+  top: -10px;
+}
+
+.gk0wk-section-editor-button {
+  height: 20px;
+  width: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.5;
+  transition: all {{$:/config/AnimationDuration}}ms;
+}
+.gk0wk-section-editor-button:hover {
+  opacity: 1;
+}
+
+.gk0wk-section-editor-section-editing-background,
+.gk0wk-section-preview[collapsed="no"] > .gk0wk-section-editor-section-background {
+  position: absolute;
+  top: -10px;
+  bottom: -10px;
+  left: -10px;
+  right: -10px;
+  border-radius: 5px;
+  z-index: -1;
+  background: <<colour primary>>;
+}
+
+.gk0wk-section-preview[collapsed="yes"] > .gk0wk-section-editor-section-background {
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -10px;
+  right: -10px;
+  border-radius: 5px;
+  z-index: -1;
+  background: <<colour primary>>;
+}
+
+.gk0wk-section-editor-section-background {
+  background: <<colour primary>>;
+  opacity: 0;
+  transition: all {{$:/config/AnimationDuration}}ms;
+}
+
+.gk0wk-section-preview:hover
+  > .gk0wk-section-editor-section-background,
+.gk0wk-section-editor-section-editing-background {
+  opacity: 0.1;
+}

src/sections/style.css.meta

@@ -0,0 +1,3 @@
+title: $:/plugins/Gk0Wk/sections/style.css
+tags: $:/tags/Stylesheet
+type: text/vnd.tiddlywiki

src/sections/widget/addButton.ts

@@ -0,0 +1,86 @@
+import { EditingSidebarRight } from './editingSidebar';
+import { SectionEditorWidget, ISection } from './widget';
+
+let buttonContent: string | undefined;
+// eslint-disable-next-line no-nested-ternary
+const functionKey = $tw.browser
+  ? /macintosh|mac os x/i.test(navigator.userAgent)
+    ? 'metaKey'
+    : 'ctrlKey'
+  : 'ctrlKey';
+
+export const AddButton = (widget: SectionEditorWidget, sectionId: string) => {
+  buttonContent ??= $tw.wiki.renderText(
+    'text/html',
+    'text/vnd.tiddlywiki',
+    '<$transclude $tiddler="$:/core/images/new-button" size="14px"/>',
+    {
+      parentWidget: widget,
+      parseAsInline: true,
+    },
+  );
+  const button = $tw.utils.domMaker('div', {
+    class: 'gk0wk-section-editor-button',
+    style: {},
+    attributes: {
+      action: 'add',
+    },
+    innerHTML: buttonContent,
+  });
+  button.addEventListener('click', event => {
+    if (widget.editingSection) {
+      return;
+    }
+    const section = widget.getSection(sectionId);
+    if (!section) {
+      return;
+    }
+    const above = event[functionKey];
+    const { start, end, tiddler, container } = section;
+    widget.editingSection = section;
+    const editTitle = `$:/temp/Gk0Wk/section-editor/edit/${tiddler}-${Date.now()}-${
+      above ? start : end
+    }-${above ? start : end}-new`;
+    $tw.wiki.addTiddler({
+      title: editTitle,
+      text: '',
+    });
+    const editorWidget = $tw.wiki.makeTranscludeWidget(
+      '$:/core/ui/EditTemplate/body',
+      {
+        document,
+        parentWidget: widget,
+        field: 'text',
+        importPageMacros: true,
+        variables: {
+          currentTiddler: editTitle,
+        },
+      },
+    );
+    editorWidget.render(
+      container.parentElement!,
+      above ? container : (container.nextSibling as HTMLElement),
+    );
+    const t = (
+      above ? container.previousSibling : container.nextSibling
+    ) as HTMLElement;
+    t.style.position = 'relative';
+    const newSection: ISection = {
+      tiddler,
+      start: above ? start : end,
+      end: above ? start : end,
+      container,
+      editingTiddler: editTitle,
+      editor: t,
+    };
+    t.insertBefore(EditingSidebarRight(widget, newSection), t.firstChild);
+    t.insertBefore(
+      $tw.utils.domMaker('div', {
+        class: 'gk0wk-section-editor-section-editing-background',
+      }),
+      t.firstChild,
+    );
+    widget.editingSection = newSection;
+  });
+  return button;
+};

src/sections/widget/cancelButton.ts

@@ -0,0 +1,37 @@
+import { SectionEditorWidget, ISection } from './widget';
+
+let buttonContent: string | undefined;
+
+export const CancelButton = (
+  widget: SectionEditorWidget,
+  section: ISection,
+) => {
+  buttonContent ??= $tw.wiki.renderText(
+    'text/html',
+    'text/vnd.tiddlywiki',
+    '<$transclude $tiddler="$:/core/images/close-button" size="14px"/>',
+    {
+      parentWidget: widget,
+      parseAsInline: true,
+    },
+  );
+  const button = $tw.utils.domMaker('div', {
+    class: 'gk0wk-section-editor-button',
+    style: {},
+    attributes: {
+      action: 'cancel',
+    },
+    innerHTML: buttonContent,
+  });
+  button.addEventListener('click', () => {
+    if (widget.editingSection !== section) {
+      return;
+    }
+    section.editor?.remove();
+    delete section.editor;
+    section.container.style.display = '';
+    $tw.wiki.deleteTiddler(section.editingTiddler!);
+    delete widget.editingSection;
+  });
+  return button;
+};

src/sections/widget/deleteButton.ts

@@ -0,0 +1,47 @@
+import type { SectionEditorWidget } from './widget';
+
+let buttonContent: string | undefined;
+
+export const DeleteButton = (
+  widget: SectionEditorWidget,
+  sectionId: string,
+) => {
+  buttonContent ??= $tw.wiki.renderText(
+    'text/html',
+    'text/vnd.tiddlywiki',
+    '<$transclude $tiddler="$:/core/images/delete-button" size="14px"/>',
+    {
+      parentWidget: widget,
+      parseAsInline: true,
+    },
+  );
+  const button = $tw.utils.domMaker('div', {
+    class: 'gk0wk-section-editor-button',
+    style: {},
+    attributes: {
+      action: 'delete',
+    },
+    innerHTML: buttonContent,
+  });
+  button.addEventListener('click', () => {
+    if (widget.editingSection) {
+      return;
+    }
+    // 弹出确认框
+    // eslint-disable-next-line no-alert
+    if (confirm('确定删除？')) {
+      const section = widget.getSection(sectionId);
+      if (!section) {
+        return;
+      }
+      const { start, end, tiddler } = section;
+      const { fields } = $tw.wiki.getTiddler(tiddler)!;
+      const { text } = fields;
+      const newText = `${text.substring(0, start).trimEnd()}\n\n${text
+        .substring(end)
+        .trimStart()}`.trim();
+      $tw.wiki.addTiddler(new $tw.Tiddler(fields, { text: newText }));
+    }
+  });
+  return button;
+};