Add option to maximize tiddler width - #6

crazko · Aug 22, 2020 · f7c221d · f7c221d
1 parent 894610b
commit f7c221d
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 8 deletions.
diff --git a/main/tiddlers/Changelog.tid b/main/tiddlers/Changelog.tid
@@ -1,5 +1,5 @@
-created: 20200702081828800
-modified: 20200702083434300
+created: 20200822122721842
+modified: 20200822122721887
 title: Changelog
 type: text/vnd.tiddlywiki
 
@@ -8,11 +8,17 @@ All notable changes to this project will be documented here.
 The format is based on [[Keep a Changelog|https://keepachangelog.com/en/1.0.0/]],
 and this project adheres to [[Semantic Versioning|https://semver.org/spec/v2.0.0.html]].
 
+!! [0.3.0] - 2020-08-22
+
+!!! Added
+
+* Add option to maximize tiddler width ([[#6|https://github.com/crazko/krystal/issues/6]])
+
 !! [0.2.1] - 2020-08-03
 
 !!! Fixed
 
-* Tiddlers do not overflow when statically exported
+* Tiddlers do not overflow when statically exported ([[#9|https://github.com/crazko/krystal/issues/9]])
 
 !! [0.2.0] - 2020-07-02
 
@@ -24,12 +30,12 @@ and this project adheres to [[Semantic Versioning|https://semver.org/spec/v2.0.0
 
 !!! Changed
 
-* New possibilities of [[Customizable Header]]
+* New possibilities of [[Customizable Header]] ([[#8|https://github.com/crazko/krystal/issues/8]])
 
 !! [0.1.6] - 2020-06-27
 
 !!! Added
 
-* Tiddlers styling options (width & padding), see [[$:/plugins/rmnvsl/krystal/settings]]
+* Tiddlers styling options (width & padding), see [[$:/plugins/rmnvsl/krystal/settings]] ([[#7|https://github.com/crazko/krystal/issues/7]])
 
 ... previous versions changelog not provided.
diff --git a/main/tiddlers/Krystal.tid b/main/tiddlers/Krystal.tid
@@ -1,5 +1,5 @@
 created: 20200628120033834
-modified: 20200822093915799
+modified: 20200822122633970
 title: Krystal
 type: text/vnd.tiddlywiki
 
@@ -16,6 +16,7 @@ Made by [[Roman Veselý|https://romanvesely.com/]] - <span class="krystal-icon">
 * horizontal story view for tiddlers (show [[Example]] 👉)
 * bi-directional links at the bottom of each tiddler
 * [[Customizable Header]] instead of sidebar
+* edit/view [[Toolbar option to maximize tiddler width]]
 * nice animations and transitions 🐮
 
 !!! Customizable in [[plugin settings|$:/plugins/rmnvsl/krystal/settings]]

diff --git a/main/tiddlers/Toolbar option to maximize tiddler width.tid b/main/tiddlers/Toolbar option to maximize tiddler width.tid
@@ -0,0 +1,12 @@
+created: 20200822122155716
+modified: 20200822123555602
+title: Toolbar option to maximize tiddler width
+type: text/vnd.tiddlywiki
+
+{{maximize-tiddler.png}}
+
+---
+
+Visit [[$:/ControlPanel]] > Appearance > Toolbars > Edit Toolbar / View Toolbar.
+
+Find ''<span class="krystal-icon">{{$:/plugins/rmnvsl/krystal/images/maximize-tiddler}}</span> maximize tiddler'' option, check the checkbox to make it visible in the toolbar and/or drag & drop to re-position.
diff --git a/main/tiddlers/maximize-tiddler.png b/main/tiddlers/maximize-tiddler.png
diff --git a/main/tiddlers/maximize-tiddler.png.meta b/main/tiddlers/maximize-tiddler.png.meta
@@ -0,0 +1,4 @@
+created: 20200822123429322
+modified: 20200822123429360
+title: maximize-tiddler.png
+type: image/png
diff --git a/plugins/rmnvsl/krystal/button-maximize.tid b/plugins/rmnvsl/krystal/button-maximize.tid
@@ -0,0 +1,15 @@
+caption: {{$:/plugins/rmnvsl/krystal/images/maximize-tiddler}} maximize tiddler
+description: Make tiddler full-width
+tags: $:/tags/ViewToolbar $:/tags/EditToolbar
+title: $:/plugins/rmnvsl/krystal/buttons/maximize
+type: text/vnd.tiddlywiki
+
+<$button tooltip="Make tiddler full-width" aria-label="maximize tiddler" class=<<tv-config-toolbar-class>>>
+<$action-sendmessage $message="tm-maximize" $param=<<currentTiddler>>/>
+<$list filter="[<tv-config-toolbar-icons>match[yes]]">
+{{$:/plugins/rmnvsl/krystal/images/maximize-tiddler}}
+</$list>
+<$list filter="[<tv-config-toolbar-text>match[yes]]">
+<span class="tc-btn-text">maximize tiddler</span>
+</$list>
+</$button>
diff --git a/plugins/rmnvsl/krystal/image-maximize-tiddler.tid b/plugins/rmnvsl/krystal/image-maximize-tiddler.tid
@@ -0,0 +1,5 @@
+tags: $:/tags/Image
+title: $:/plugins/rmnvsl/krystal/images/maximize-tiddler
+type: text/vnd.tiddlywiki
+
+<svg width="22pt" height="22pt" class="tc-image-fixed-height tc-image-button" viewBox="0 0 128 128" transform="rotate(90)"><path fill-rule="evenodd" d="M60 35.657l-9.172 9.171a4 4 0 11-5.656-5.656l16-16a4 4 0 015.656 0l16 16a4 4 0 01-5.656 5.656L68 35.657v57.686l9.172-9.171a4 4 0 115.656 5.656l-16 16a4 4 0 01-5.656 0l-16-16a4 4 0 115.656-5.656L60 93.343V35.657zM16 116h96a4 4 0 100-8H16a4 4 0 100 8zm0-96h96a4 4 0 100-8H16a4 4 0 100 8z"/></svg>
diff --git a/plugins/rmnvsl/krystal/plugin.info b/plugins/rmnvsl/krystal/plugin.info
@@ -3,7 +3,7 @@
   "name": "Krystal",
   "description": "Horizontal Story River",
   "author": "Roman Veselý",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "core-version": ">=5.0.8",
   "source": "https://github.com/crazko/krystal",
   "plugin-type": "plugin",

diff --git a/plugins/rmnvsl/krystal/plugin.js b/plugins/rmnvsl/krystal/plugin.js
@@ -9,6 +9,7 @@ Sets plugin behavior
 (function () {
   const STORY_TIDDLER_TITLE = "$:/StoryList";
   const ACTIVE_LINK_CLASS = "krystal-link--active";
+  const MAXIMIZED_TIDDLER_CLASS = "krystal-tiddler__frame--maximized";
 
   exports.after = ["render"];
 
@@ -26,6 +27,12 @@ Sets plugin behavior
       }
     });
 
+    $tw.rootWidget.addEventListener("tm-maximize", function (event) {
+      if (event.type === "tm-maximize") {
+        tiddlerFullscreen(event.param);
+      }
+    });
+
     $tw.hooks.addHook("th-navigating", closeTiddlersToRight);
 
     $tw.wiki.addEventListener("change", highlightOpenTiddlerLinks);
@@ -229,6 +236,14 @@ Sets plugin behavior
     return event;
   }
 
+  function tiddlerFullscreen(tiddlerTitle) {
+    const tiddler = document.querySelector(
+      `div[data-tiddler-title="${tiddlerTitle}"]`
+    );
+
+    tiddler.classList.toggle(MAXIMIZED_TIDDLER_CLASS);
+  }
+
   // ---
 
   function throttle(callback, limit) {

diff --git a/plugins/rmnvsl/krystal/readme.tid b/plugins/rmnvsl/krystal/readme.tid
@@ -1,3 +1,7 @@
 title: $:/plugins/rmnvsl/krystal/readme
 
-Horizontal story view for tiddlers and bi-directional links.
+Horizontal story view for tiddlers and bi-directional links.
+
+Homepage: https://github.com/crazko/krystal
+
+Made by [[Roman Veselý|https://romanvesely.com/]] - <span class="krystal-icon">{{$:/core/images/github}}</span> [[@crazko|https://github.com/crazko]], <span class="krystal-icon">{{$:/core/images/twitter}}</span> [[@rmnvsl|https://twitter.com/rmnvsl]]
diff --git a/plugins/rmnvsl/krystal/river.css b/plugins/rmnvsl/krystal/river.css
@@ -57,6 +57,14 @@
   .krystal-tiddler__frame--overlay {
     box-shadow: 0 0 1em rgba(0, 0, 0, 0.125);
   }
+
+  .krystal-tiddler__frame--maximized {
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0;
+    width: 100%;
+    z-index: 100;
+  }
 
   .tc-tiddler-frame:nth-of-type(1) { left: calc(0 * var(--tiddler-padding)) }
   .tc-tiddler-frame:nth-of-type(2) { left: calc(1 * var(--tiddler-padding)) }

diff --git a/...em/$__config_EditToolbarButtons_Visibility_$__plugins_rmnvsl_krystal_buttons_maximize.tid b/...em/$__config_EditToolbarButtons_Visibility_$__plugins_rmnvsl_krystal_buttons_maximize.tid
@@ -0,0 +1,4 @@
+title: $:/config/EditToolbarButtons/Visibility/$:/plugins/rmnvsl/krystal/buttons/maximize
+type: text/vnd.tiddlywiki
+
+hide
diff --git a/...em/$__config_ViewToolbarButtons_Visibility_$__plugins_rmnvsl_krystal_buttons_maximize.tid b/...em/$__config_ViewToolbarButtons_Visibility_$__plugins_rmnvsl_krystal_buttons_maximize.tid
@@ -0,0 +1,4 @@
+title: $:/config/ViewToolbarButtons/Visibility/$:/plugins/rmnvsl/krystal/buttons/maximize
+type: text/vnd.tiddlywiki
+
+hide