Suggestions for more functionality,about crazko/krystal

Comments (17)

cdruan commented on June 7, 2024 2

Can you please implement the suggestion numbered as “1”.

Until the feature you're asking is implemented, here's a solution you can try. Didn't do extensive testing, but seems OK... Create a tiddler called "mystartup.js" with the following body:

/*\
title: mystartup.js
type: application/javascript
module-type: startup

Sets plugin behavior

\*/
(function () {
  const MAXIMIZED_TIDDLER_CLASS = "krystal-tiddler__frame--maximized";

  exports.after = ["render"];

  exports.startup = function () {
    $tw.hooks.addHook("th-navigating", restoreFromTiddler);
  };

  function tiddlerRestoreSize(tiddlerTitle) {
    const tiddler = document.querySelector(
      `div[data-tiddler-title="${tiddlerTitle}"]`
    );
    if (tiddler) {
      tiddler.classList.remove(MAXIMIZED_TIDDLER_CLASS);
    }
  }

  function restoreFromTiddler(event) {
    const navigateFrom = event.navigateFromTitle;

    if (!event.navigateSuppressNavigation && navigateFrom !== undefined) {
        tiddlerRestoreSize(navigateFrom);
    }

    return event;
  }

})();

You also need to:

change type of this tiddler to application/javascript
add a new field module-type with the value startup
save and reload your wiki

Hope this helps.

from krystal.

cdruan commented on June 7, 2024 2

@arunnbabu81

Try this one. Replace your "mystartup.js" tiddler content with the following:

/*\
title: mystartup.js
type: application/javascript
module-type: startup

Sets plugin behavior

\*/
(function () {
  const MAXIMIZED_TIDDLER_CLASS = "krystal-tiddler__frame--maximized";

  exports.after = ["render"];

  exports.startup = function () {
    $tw.hooks.addHook("th-navigating", restoreMaximizedTiddler);
    $tw.hooks.addHook("th-new-tiddler", restoreMaximizedTiddler);
  };

  function restoreMaximizedTiddler(event) {
    const tiddler = document.querySelector(
      `div[class~="${MAXIMIZED_TIDDLER_CLASS}"]`
    );
    if (tiddler) {
      tiddler.classList.remove(MAXIMIZED_TIDDLER_CLASS);
    }
    return event;
  }

})();

Again, not tested extensively. The code assumes there will be at most one maximized tiddler at any time. It will restore the maximized tiddler to the default size on any navigation and new-tiddler events. If you find more instances needing this functionality, try to see if you can add a hook (or event listener) in exports.startup(). For more info, search for "hook" in TiddlyWiki's developer documentation.

from krystal.

crazko commented on June 7, 2024 1

I tried this, it worked except that it appeared to the right of the search bar in the header.

Sorry, bad list-before field value, should be $:/plugins/rmnvsl/krystal/headertools. I'll update my original comment for future visitors.

Also can you suggest some sample styling and where to insert the code

This could be a good starting point :)

Create a new tiddler
Add tag $:/tags/Stylesheet
Add following content

.krystal-header .tc-sidebar-tab-open a,
.krystal-header .tc-sidebar-tab-open button {
  display: initial;
  padding: 0;
  width: auto;
}

.krystal-header .tc-sidebar-tab-open > div {
  padding: 0 14px;
}

Update: do not affect other dropdowns in the header, add padding

from krystal.

arunnbabu81 commented on June 7, 2024 1

Thanks for the prompt reply. Dropdown now works perfectly.

from krystal.

crazko commented on June 7, 2024 1

I have one problem after i started using the code for dropdown menu for Open tiddlers...

Thanks for the source files. I've updated the CSS snippet above; please update it in your TiddlyWiki.

Also when the current active tiddler is in maximized state, dropdown option of the page control buttons like palette selection button and “open” tiddlers gets hidden behind the maximized tiddler.

Update Krystal to version 0.3.3, I fixed that.

from krystal.

crazko commented on June 7, 2024 1

Not really. I've only played with some of the implementations, but haven't had enough time to finish any of them.

from krystal.

crazko commented on June 7, 2024

Hi, thanks for your suggestions.

I think i have mentioned these things in some other places also. I am posting all these together here for easy reference.

Great, you tidied it up for me :)

If you can start the "Discussion" thread of github, i can shift this to discussions.

I think with Discussions we would move this "problem" to a different place. It'd be better to create a new issue for every point in your list or at least for every cluster (maximized state + shortcuts, dropdown for open tiddlers, close tiddlers the right).

That way it'd be easier to have a discussion for every topic independently. But, you can leave those here. I'd like to ask you to do it for any future cases, thanks :)

I'll leave the feedback for your list here soon.

from krystal.

crazko commented on June 7, 2024

Dropdown option for the header tools especially the "Open" tiddler

I think this should not be part of the plugin as you can add this easily manually.

create new tiddler (any name is good)
add following content:

<$button popup="$:/OpenTiddlersPopupState" class="tc-btn-invisible tc-tiddlylink">Open</$button>

<$reveal type="popup" state="$:/OpenTiddlersPopupState">
<div class="tc-drop-down">

{{$:/core/ui/SideBar/Open}}

</div>
</$reveal>

add tag $:/plugins/rmnvsl/krystal/header
add field list-before with value $:/plugins/rmnvsl/krystal/headertools
Remove tag $:/tags/SideBar from $:/core/ui/SideBar/Open tiddler

Some styling should be udpated, but this should help.

EDIT: udpated field value in 4th point.

from krystal.