Compatibility with krystal horizontal layout plug in

[arunnbabu81]

Thanks for this excellent theme. You might not have released it for public use yet. So take these as just my suggestions.

I use krystal horizontal layout plug-in in some of my my wikis. I wish to use this theme in those wikis. But topbar contents in krystal and this theme are different. I like the the way its done in krystal to open 'Open' 'Recent' tiddlers as dropdown as suggested in these links 1 and 2 . Can this be done if i am using your theme. Even if this is not added into the theme, can you suggest some hacks so that, i can implement it?

[cdruan]

Do you want to use krystal layout but would like to incorporate colors generated by this theme? If so, here are two easy options:

• Import both theme/plugins in one wiki. From my theme, press Ctrl-Shift-L to switch the active layout to "Default Page Template". (Make sure you close the sidebar first by clicking the "hamburger" button at the top-left corner, or krystal's story-river width will be reduced.) Or,

• To lighten the size of your wiki, you can use a separate wiki that contains only this theme to create a color palette to your liking, then import the desired palette tiddler(s)—search for $:/palettes/CaptivateDark, $:/palettes/CaptivateLight, and $:/palettes/CaptivateTan tiddlers—into wikis that contain the krystal plugin only. Switch the palette from the Control Panel > Appearance > Palette. This approach may not work as well as above because it lacks some of the theme tweaks, but you may find that it's sufficient for your purpose.

There are probably CSS adjustments you might need to make in either case. For example, if you'd like to color the topbar, you can create a tiddler tagged with $:/tags/Stylesheet and add the following:

.krystal-header { 
  background-color: <<colour primary>>; 
}

.krystal-header .tc-site-title, 
.krystal-header .tc-site-subtitle,
.krystal-header .tc-btn-invisible svg, 
.krystal-header .tc-tiddlylink { 
    fill: <<colour on-primary>>;
    color: <<colour on-primary>>;
} 

Would these suggestions work for you?

[arunnbabu81]

The first suggestion works for me. Also i modified the topbar as suggested by you. Thanks for both.

Further i liked the search box in the topbar of your theme. I tried to change the default search in the topbar of krystal ($:/plugins/rmnvsl/krystal/search) with yours ($:/themes/cdr/captivate/ui/TopBar/Search)

But if I type something in that search box, the focus is lost from the search box while typing. Can you help about that. I have attached a demo wiki krystal.zip

[cdruan]

The focus is stolen by another input box in the search dropdown. The fix is to prevent it from displaying. So here's the fix:

Add to your stylesheet:

.krystal-header .cv-search-bar .tc-search { 
    display: none !important; 
}

[arunnbabu81]

Thank you for the help. It works perfectly

[arunnbabu81]

@cdruan

I have tweaked my wiki for using krystal horizontal layout plug in and captivate theme together with the help of tips you have given before.

For desktop use, I have applied the captivate theme along with the default page layout instead of the captivate left sidebar layout You can see the implementation in this demo wiki - https://krystal.tiddlyhost.com/

In mobile, I want to hide the Krystal header and show the captivate left sidebar and bottom bar.

I was able to hide krystal header in mobile by using this tip

Now I want to know how to apply the captivate sidebar and bottom bar( ie the captivate left sidebar layout ) in mobile automatically.

[cdruan]

Hi @arunnbabu81

You can use Nicolas Petton's strategy you mentioned in the tip, but instead of setting the default theme, you set the default layout depending on the size of the screen. Since you already have a mystartup.js, you can insert the following code:

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

Sets plugin behavior

\*/
(function () {

...

exports.platforms = ["browser"];
exports.before = ["render"];

var mobileLayout = "$:/themes/cdr/captivate/ui/PageLayout";
var desktopLayout = "$:/core/ui/PageTemplate";

var breakpoint = 960;

exports.startup = function() {
    ...

    var layout;
    if (document.documentElement.clientWidth <= breakpoint) {
        layout = mobileLayout;
    } else {
        layout = desktopLayout;
    }

    $tw.wiki.addTiddler({title: "$:/layout", text: layout});
};

...
})();

Note that timing of mystartup.js is changed to run before the render module.

[arunnbabu81]

I tried these two

/*\
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;
  }

})();

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

Sets plugin behavior

\*/
(function () {

...

exports.platforms = ["browser"];
exports.before = ["render"];

var mobileLayout = "$:/themes/cdr/captivate/ui/PageLayout";
var desktopLayout = "$:/core/ui/PageTemplate";

var breakpoint = 960;

exports.startup = function() {
    ...

    var layout;
    if (document.documentElement.clientWidth <= breakpoint) {
        layout = mobileLayout;
    } else {
        layout = desktopLayout;
    }

    $tw.wiki.addTiddler({title: "$:/layout", text: layout});
};

...
})();

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

Sets plugin behavior

\*/
(function () {

...

exports.platforms = ["browser"];
exports.before = ["render"];

var mobileLayout = "$:/themes/cdr/captivate/ui/PageLayout";
var desktopLayout = "$:/core/ui/PageTemplate";

var breakpoint = 960;

exports.startup = function() {
    ...

    var layout;
    if (document.documentElement.clientWidth <= breakpoint) {
        layout = mobileLayout;
    } else {
        layout = desktopLayout;
    }

    $tw.wiki.addTiddler({title: "$:/layout", text: layout});
};

...
})();

But both were not working.

[cdruan]

@arunnbabu81

Seems that I wasn't clear about the instruction. Previous example needs to be "merged" into your existing tiddler. Try replacing your current mystartup.js body with the following:

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

Sets plugin behavior

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

  var mobileLayout = "$:/themes/cdr/captivate/ui/PageLayout";
  var desktopLayout = "$:/core/ui/PageTemplate";

  var breakpoint = 960;

  exports.platforms = ["browser"];
  exports.before = ["render"];

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

    // determine layout programmatically
    var layout;
    if (document.documentElement.clientWidth <= breakpoint) {
        layout = mobileLayout;
    } else {
        layout = desktopLayout;
    }

    $tw.wiki.addTiddler({title: "$:/layout", text: layout});
  };

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

})();

I've tested the code on a local copy of your wiki. It should work...

[arunnbabu81]

@arunnbabu81

Seems that I wasn't clear about the instruction. Previous example needs to be "merged" into your existing tiddler. Try replacing your current mystartup.js body with the following:

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

Sets plugin behavior

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

  var mobileLayout = "$:/themes/cdr/captivate/ui/PageLayout";
  var desktopLayout = "$:/core/ui/PageTemplate";

  var breakpoint = 960;

  exports.platforms = ["browser"];
  exports.before = ["render"];

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

    // determine layout programmatically
    var layout;
    if (document.documentElement.clientWidth <= breakpoint) {
        layout = mobileLayout;
    } else {
        layout = desktopLayout;
    }

    $tw.wiki.addTiddler({title: "$:/layout", text: layout});
  };

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

})();

I've tested the code on a local copy of your wiki. It should work...

This one works. Thank you.