crazko/krystal

TiddlyWiki5 plugin - Horizontal Story River

Krystal - Horizontal Story River

TiddlyWiki5 plugin.

---

DEMO: https://crazko.github.io/krystal

krystal's Issues

Separate backlinks from storyview

Hello thank you for your awesome work !

In term of layout this is my best experience so far in TW world !

This is why I ask if it could be possible to separate both features (making 2 plugins)

• Horizontal Layout
• Backlinks

From my point of view I do not need back links.

Thank you

Right side of screen cut off

First of all, thank you for your amazing work. I love this plugin.

I took a short break from using it and when I re-enabled it, I got this weird bug. When I open more than two tiddlers, the right side of the screen gets cut off:

I was unable to reproduce it with a newly downloaded copy of tw but a fried who just started using it a month ago had the same thing happen.

Since I helped set up my friend's tw, we have the same plugins and we're both using github to save. So I wondered whether one of our plugins was the culprit. But after disabling them all, the problem persisted.

Any suggestions for what to try next/any idea what's going on?

Thanks!

Make it possible to disable backlinks feature

Would it be possible to add a tickbox in plugin' settings to disable backlinks display ($:/plugins/rmnvsl/krystal/references) ?
This can conflict with other plugins that also offer this feature, and is quite independent from the other features of this plugin.

The notification to save and reload after installing a plugin hide the main toolbar in the top

After install a plugin, Tiddlywiki show a notification to save and reload, but this notification hide the main toolbar in the top including save button. The user have to close the notification to click the save button.

I really love this theme!

It's the first Tiddly theme that actually looks functional and pleasing to the eye. I added the theme to my node install and it all just works:

https://glitch.com/~helpful-foil-exhaust

Would love to help out / learn more or just generally cheer you on as you build this out. I don't know much about Tiddly but excited to learn and experiment with it.

Ideas for Andy's hover effect?

Hey,

Awesome theme! Have you thought about an easy way to integrate the preview feature from Andy's version? You can see a similar implementation on Anne-Laure's site. If you don't currently have the bandwidth, I'd be open to taking a stab at it.

TypeError: document.querySelector(...) is null

Here is an attempt to make krystal and multicolumn plug in work together.
This is done using the ensemble feature of multicolumn - you can save a particular layout, storyview, stylesheets tiddlers, pagetemplate to a particular ensemble. So when we load that particular ensemble, all these will be automatically loaded.

Check this demo - https://multicolumn-krystal.tiddlyhost.com/

But I encountered one problem -

Is this related to krystal plug in.

Maximize tiddler not working with whitespace theme

I am not able to maximize the tiddler when whitespce theme is active in my wiki.

See a demo here.

Would you consider adding 2D navigation?

Hi! Love this, thank you for doing this. Would you consider doing 2d navigation? Imagine if every time you clicked on a page link, it was added vertically into the slot to the right, instead of straight up replacing everything that was already to the right. https://www.freecodecamp.org/news/lossless-web-navigation-spatial-model-37f83438201d/

Configurable Tiddler Width via Theme Tweaks in Control Panel

It would be great if we could adjust the width of all panes via a setting in the control panel. There is an option for theme tweaks, and you've already created a tab for Krystal, so it would make sense to allow the pixel width for the panes to be set there without having to edit a shadow tiddler.

[idea] Thiner scrollbar with compatibility with color palette

The inner scrollbars are thick and not compatible with palette color. A stylesheet can be used to set the scrollbar thickness and possibly to follow the color palettes.

See:

Jermolene/TiddlyWiki5#5352 (comment)

Import tiddler is blank

Dragging links on the story river or using the Import button summons the Import tiddler at the left, but it is blank:

Maximize column

Feature request:

Option for maximizing column (so it takes full screen width) would be useful for writing longer tiddlers (especially with preview since TW show preview in vertical split)

Suggestions for more functionality

I have been using tiddlywiki for the last 6 months regularly and i mostly use Krystal plug in for the story view. Here are some of the things which i observed during my regular use that may help to increase the functionality

1. Clicking on the link in a tiddler when it is in the maximised state should return the tiddler back to the default state as mentioned by you in this comment #13 (comment)
2. Keyboard shortcut for going into and coming out of the maximised state of a tiddler. I dont know whether this is possible since it may be difficult to find which is the active tiddler when all tiddlers are in view-mode.
3. Dropdown option for the header tools especially the "Open" tiddler which shows the currently open tiddlers. I am asking this because when 4 or more tiddlers are open simultaneously, it is slightly difficult to see and compare two non-adjacent tiddlers. For example, if I want to see 3rd and 5th tiddler side-by-side, what i do now is click open the "Open" tool from header and drag and drop 3, 5 tiddlers into 1st and 2nd tiddler position. If there is a dropdown option for "Open" tool in the header, i can drag and drop from there itself and help speed up my workflow. The workaround i am using now takes up little more time and i will lose the flow of note taking. Check this link to see a similar dropdown implementation
4. "Close tiddlers to the right" - When this option in the settings is set to yes, clicking on the first link in a tiddler will open the link to the right. Any more links you click from the same tiddler will open that link to the right after replacing the previously opened tiddler on the right. I would like to over-ride this behavior if i use "shift clicking" a link instead of "just clicking" the link. That is if i shift click the links, it should keep on opening to the right without closing the already opened tiddler on the right side.
5. Alt or Ctrl clicking on a link in a tiddler should open that link in the maximised state rather than in the default state.

Sorry for the lengthy post. I think i have mentioned these things in some other places also. I am posting all these together here for easy reference. If you can start the "Discussion" thread of github, i can shift this to discussions.

Awesome work

Just wanted to say thank you for this theme. Fantastic work

[idea] discussion pannel

I would recommend to enable the Discussion board for krystal

The right title is overlapped by the header

Please see my purple rectangle:

Search results don't display when running under TW Release 5.1.23

Note there are 10 matches found, but none shown in the results list. Disabling Krystal returns search results to expected. Image via TiddlyDesktop.

Help wanted

Any one help me figure out wtf I'm actually doing

Feature: add arrow key navigation

I really like the horizontal view but one of its downsides is that it heavily relies on the bottom scroll bar.
When having more than 3 documents opened it would be great if you could navigate using the left/right arrow keys, something like this https://github.com/MaxGyver83/tw5-keyboard-navigation

Let me know what you think!

[bug] "Sidebar" tiddlers not rendered when using w/ TW 5.2.1

Installing plugin into a node-based tw created w/ 5.2.1 results in the following rendering error:

Steps to reproduce.

1. Create a new wiki w/ node cli tiddlywiki mynewwiki --init server
2. Create a plugins directory
3. Copy the plugin into the plugins directory
4. Launch server

I confirmed that if I downgrade to TW 5.1.23, the sidebar is working correctly. I assume that this is a minor incompatibility issue, but I am new to the TW world and haven't been able to track down a changelog that would help me start looking for discrepencies.

Double headers after update to 0.5 version

After the update, my wiki was looking like this. I had to remove the $:/tags/PageTemplate from the $:/plugins/rmnvsl/krystal/header-small to get it removed.

I had done some tweaks in my wiki to make Krystal and captivate theme compatible. Can that be responsible for this. You can see a test wiki at this site - https://krystal.tiddlyhost.com/

Conflict with TiddlyMap

Steps to reproduce :

1. Get a new wiki running
2. Install TiddlyMap http://tiddlymap.org/
3. Install Krystal
4. Click on the Map menu

The problem seems to come from the removed sidebar, and tc-sidebar-scrollable element

Is transcluding of tiddlers in popup windows planned?

I love this theme! Thank you for making it. 😍 I'm going to include this by default to all users of https://learnawesome.org

Any chance that showing tiddler preview on hover will be supported in future? Here's an example of it.

Layout will be broken when we drag scroll too fast

Hello,

I'm not good at English so please see my gif.

This is steps to reproduce:

1. Go to https://crazko.github.io/krystal/ and open these notes like this image:
   
2. Drag horizontal scroll bar from right to left (or left to right), the layout will be:
   

Some compatibility issue with tiddlyclip plug in

When I install tiddlyclip plug-in in Krystal, the bottom part of the tiddler gets cut short. I have attached a screenshot and demo file here
Krystal + tiddlyclip.html.zip

Look at the change in colour at the bottom of the screenshot because the tiddlers are cut short.

Make Krystal a PageLayout

TiddlyWiki now has support for custom page layouts:

https://tiddlywiki.com/#Alternative%20page%20layouts

It'd be great if Krystal were a page layout I could switch to with the page layout shortcut

An option to compare tiddlers by introducing something similar to Two story view or Muuritouch

My current TW is made based on Krystal. I love your concept. Full width view has made it even better.

Only thing I find lacking is its difficult to compare two related Tiddlers side by side. This may be done by introducing something similar to two story view or Muuritouch. A button can be added in the top menu to switch between the horizontal story river and two-story view or something like Muuritouch view. Or else an additional button can be provided in the view toolbar of the tiddlers for shifting their position.

I don't have much technical knowledge in this matter. These are just a few suggestion. Don't know whether its implementable or not.

Error while using with markdown plugin

I have been using this plugin for markdown, but krystal isn't going along with it.
https://github.com/anstosa/tw5-markdown
Can you please look into it?

[IDEA] Header items bad tiddler names

Some shortcuts are put on the header to replicate Tiddlywiki Sidebar items like

• $:/core/ui/SideBar/Open
• $:/core/ui/SideBar/Recent
• etc.

When user click on them and open one of them he/she sees something like below

Look at the ugly tiddler title. In original design of Tiddlywiki, these titles are replaced by captions when they are open at the sidebar

Workaround

• Use other tiddlers for header item for example Open instead of $:/core/ui/SideBar/Open as below
• • create a new tiddler
• • name: Open
• • tag: $:/tags/SideBar
• • text: {{$:/core/ui/SideBar/Open}}

Solution
The sidebar items need to be treated in a better way. In other words Sidebar items should not be opened like an ordinary tiddler in the story river

• One solution can be what https://nicolas.petton.fr/tw/notebook.html uses.
• Other solution can be to open a tiddler contains horizontal tabs each replicate the original sidebar tab!
  A fixed width area at the left to open the sidebar item

Help needed to hide the header of Krystal in mobile only

I am using a hack given by Nicolas Petton in TW google group to enable his NoteBook theme only in mobile (not in desktops). But the header of Krystal is persisting and partly hiding the sidebar when I open the sidebar in mobile (with notebook theme active). Is there any way to hide the header only in mobiles ? I am attaching a demo wiki with relevant tiddlers set as default home page tiddlers.

Demo.html.zip

[IDEA] Krystal on medium screen

While Krystal works best on Large screen, it seems under width=960px Krystal uses vertical layout! Headers accumulate the center in several rows! I may suggest to use a top or bottom row to arrange few header items as in Notebook!

Workaround

• Use a bottom or top ribbon
• put some of essential items on that ribbon not all of them to prevent cluttering
• https://nicolas.petton.fr/tw/notebook.html gives some good ideas

Exported Static Site is broken

I really like this theme, but it seems that the exported html file is not functional. (links give wrong results, etc) Would you please take a look? Thanks

When clicking a link inside the Import tiddler all the other tiddlers close

This happened to me when I tried to import an image

[bug] wrong horizontal scrollWidth property in Firefox browser

Firefox seems not reading the container's scrollWidth correctly, hence every time I scroll from left to right, the story river's scrollWidth increases; and everytime I scroll from right to left, the story river's scrollWidth decreses.

As the screen recording shows, this inconsistent scrollWidth property break the tiddler navigation. i.e. clicking on a stacked tiddler on the right won't navigate to and unfold the tiddler. Tiddler navigation works when clicking on a stacked tiddler on the left, but not the other way around.

Interestingly, I found a hack for it, simply add a placeholder after the ending tiddler with following content:

<section style="position: relative;width: 1px;height: 1px;border: 1px solid #bbb;" id="hack_firefox_horizontal_scroll">
</section>

right before the section.story-frontdrop under section.tc-story-river, would solve the issue. The place holder must have some width & height. I tried, and found out that it won't work if the border is removed (which then has width 0 and height 0).

I have no idea why Firefox behaves like this, and why this hack works out of the box... I'm just guessing it's related to position: sticky and the fix works by adding something with position: relative, which kind of sounds like float and clear: both thing.

Need a better referencing or linking than default

There is a need for a better referencing or linking than the default linking in Krystal.
I will give some examples using 4 different linking plug ins for the same tiddlers

1. Using default linking in Krystal.

Here only the direct backlinks are shown without highlighting of the linked words and without ability to collapse the references.

2. Using stroll or tiddlyblink (found in Goodies for Stroll - https://giffmex.org/stroll/goodies.html)

Here also only the direct backlinks are shown, but there is highlighting of the linked words and ability to collapse the reference.

3. Using TWCrosslinks (found in Drift - https://akhater.github.io/drift/)

Here there is backlinks, free links, tags and keywords with pop up showing highlighting of linked words and ability to collapse the reference. But there pop up could be implemented better I guess.

4. Seen in early version of tiddlyresearch (https://kebifurai.github.io/TiddlyResearch/)

Here they provide 4 types of references - tags, direct backlink, mention in the title of a note, mention in the body text of a node and each of them are colour coded. Then there is pop up mechanism using tobibeer preview on hovering over the links.

I was just sharing my thoughts. I prefer something which is a mix of TWCrosslinks or tiddlyresearch. But tobibeer preview plug in is not compatible with Krystal if we open more than two tidldlers. Hope you can make a better referencing in Krystal.

Manually reorder tiddlers in river

Still loving the theme, by the way. The thought crossed my mind today, though, to raise an issue for a potential enhancement. It's not a major thing, but I thought I'd share and see if it was something you also thought beneficial.

I think it would make my use cases better if I could manually reorder the tiddlers in my river.

Currently, I use Krystal set to not close tiddlers to the right. I often want several related tiddlers open that contain notes and fragments while I'm writing in another tiddler. The ability to move them around in order would be a great benefit so I could compare two specific ones side by side without having to close several and reopen them in a different order.

Optionally, I could switch the setting to close tiddlers to the right if there was an option to override this behavior with a keyboard shortcut (like shift+click). In other words, the default action would be to close tiddlers to the right when clicking a link in a tiddler, but if I had a list of tiddlers and wanted them all open, I could shift+click on each entry in the list and they would all open in the order I clicked.

Let me know if that needs further clarification. I don't know if you would see that as an improvement in behavior, or if it's even possible to implement. But, it crossed my mind today, and I wanted to share.

Thanks again for your work on this!

Unable to view installed tab plugins

I love this template: it is so fun to use! But I am having difficulty viewing plugins that should appear in the top header. For example, the favorite plugin, does not show up beside the Open/Recent/More tab options. The theme seems to not allow tabbed subheadings. Is this a design of the template or something that can be modified to allow?

Stacking of tiddlers on the left side doesn't reveal tiddlers title unlike one the right side [Safari browser]

When multiple tiddlers are opened, stacking of tiddlers on the left side doesn't reveal the tiddlers title unlike on the right side.
I am attaching some images for reference.

In the first image, the first two tiddlers on the left side are in focus while the unfocussed tiddlers one the left side are stacked together with their titles revealed.

In the second image, the last two tiddlers on the left side are in focus, while the unfocussed tiddlers on the left side are neither shown as in stack nor their title are revealed.

This third image is showing that one tiddler stacked on the right is not showing its title (third one from the right) because I had scrolled to the bottom of that tiddler before moving to another tiddler.

Can this be corrected?

Screen doesn't move further to the right when new pages are opened.

As soon as more tiddlers are opened than fit onto the screen, the view remains focussed on the current tiddler instead of moving further to the right. In other words, the newly opened tiddlers are not visible unless one scrolls manually further to the right.

For example, at https://notes.andymatuschak.org/ the view moves automatically further to the right which I think would make a lot of sense.

PS: I really love your implementation so far!

PPS: I just discovered that the newly opened page is scrolled into view if the link is clicked a second time. Clicking it once opens the page. Clicking it a second time scrolls it into view. I'm not sure if this is intentional

[IDEA] Use fixed with for Searchbox

The search box at top right move left when user starts entering keywords and TW found some tiddlers on deleting the inputs the searchbox get smaller again! This expanding/contracting is annoying see below gif.

Suggestion
Use fixed width search box and dropdown or relocate the searchbox as Notebook from Nicolas Petton
https://nicolas.petton.fr/tw/notebook.html

Option for Graph/map view?

Hi! Wondering if anyone has gotten a map/connected graph view working with this plugin.

I've tried TiddlyMap but it ended up breaking the behavior. If anyone has any workarounds or alternatives, it would be much appreciated 😄