I just want to know how to transclude the current tiddler text without losing wikitext formatting. Currently i am using {{!!text}}. But the wikitext formatting is lost when using {{!!text}}as shown in these images. I think that’s not related to echarts or theBrain.
I had already about asked this in the echart plug in github repo. But they suggested to ask in the forum since its about viewtemplate.
try this
<$transclude field=text mode=block/>
and let me now if it works
I guess the issue is something related to the viewtemplate i was using.
Wikitext formatting is not lost when i used another viewtemplate.
I will investigate and ask for help if needed.
Could you setup a minimal demo wiki (with all those plugins installed) and share the link here!
This way one can better understand the issue and give a try for possible solution!
Its solved now.
<div class="flex-col text-justify">
{{!!text}}
</div>
I assume that the wikitesxt formatting was not preserved because I didn’t used line break before and after {{!!text}}
Sttot was planning to write a grid layout plugin, but he is busy writing his paper recently!
Please find attached a simple example called RHS-include
rhs-include-body.json (1003 Bytes)
It makes use of the new cascade for the viewBody template, and works on tiddlywiki.com.
Basically if a tiddler has the field rhs-include containing a tiddler, it will transclude that tiddler on the righthand side of a two column table ands transclude the current tiddlers body in the left hand side.
You could change it to detect is there is a matching echart and instead transclude that, then it will only occur for tiddlers with an echart.
Alternatively your original filter can be rewritten, like I suggested elsewhere
as simply
[all[current]is[tiddler]!tag[$:/tags/SideBar]!TheBrain[no]!tag[Journal]]
Possibly even
[all[current]![system]![shadow]!TheBrain[no]!tag[Journal]]
as the current tiddler is not set in the sidebar.
But I would have thought
[all[current]TheBrain[yes]]
Could include the echart ?
I want to clarify a few things
I use Krystal horizontal layout plug in in almost all my wikis (some things may not work in Krystal like in the classic layout of TW).
One day when I was experimenting with my wiki, I thought of changing the backlinks (reference) section at the bottom of the tiddler. I thought it would be better to use node-explorer of Shiraz instead of the TOC Generic plug in I was using since node-explorer can edit the referenced/backlink tiddlers within the reference section itself. Then I thought I will add TheBrain Echarts also to the reference section along with the node-explorer using the tab macro to give a side by side graph view also. Then I thought why I have to keep the reference section at the bottom of the tiddler. Instead keep it to the right side of tiddler body which was inspired by Subpages concept by Jeremy in AMBIT. But in Krystal horizontal story river, the right float of Subpages was not working. So I used Shiraz Flexigrid option and transcluded the reference section ( including node-explorer of Shiraz and TheBrain echarts using a tab macro) to the right side of the tiddler and tiddler body to the left side of the tiddler. And it was working OK.
Here you can see tiddler body (text) to the left and reference section ( including node-explorer of Shiraz and TheBrain echarts using a tab macro) to the right.
Given below is the code I am using now.
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]]">
<div class="flex-row justify-content-center">
<$list filter="[range[1]]" variable="ignore">
<div class="flex-col text-justify">
{{!!text}}
</div>
</$list>
<div class="flex-col">
{{||Bottom Tabs viewtemplate - without folding}}
</div>
</div>
Only problem with this approach for me was that the $:/core/ui/ViewTemplate/body will also display the tiddler body and will result in duplication of the tiddler body. This is what I am trying to avoid.
See the duplicated tiddler body (text) above and below.
I could add hide-body field to the tiddlers with the new viewtemplate for References (inlcuding node explorer and TheBrain) and set it to yes. But I want almost all the tiddlers in my wiki to have the new viewtemplate for References except for system, shadow tiddlers and a few specified tiddlers i create which can be marked by a specific tag or field. Its not feasible to manually add hide-body field to all tiddlers I create. For making this easier , I can create a custom new tiddler button which will add hide-body field automatically. But I was checking whether I can avoid creating a custom new tiddler button . That’s when I started thinking about the ways to hide the $:/core/ui/ViewTemplate/body for all tiddlers except the once I mentioned before. It would have been easier if there is a way to hide one viewtemplate when another another viewtemplate is used on the same tiddler.` May be it should be feature request
I don’t think your solution remove this obstacle of duplicating the tiddler body contents in view mode. Correct me if I am missing something.
This thread was created when I had doubts about how to use the Flexgrid of Shiraz in a viewtemplate for References to float the node-explorer and TheBrain Echarts to the right of tiddler body.
What i need now is way to avoid duplication of the tiddler body contents wherever the new custom viewtemplate for References is applied . That’s why I had to create one more thread regarding the ways to hide the $:/core/ui/ViewTemplate/body
I have I belive shared all you need to get this done. I have shared the method and techiques but since I dont have your configuration I could not build the actual solution.
You can
Basicaly you should be able to move what was in your view template to the body template.
By the way your filter can be shortened.
May be I don’t have enough knowledge to understand it . For the time being I am not going to pursue further with this project. I have wasted soo much time behind it. Will revisit when my mind is fresh. Thank you for the help.
Sharing demo wiki into discourse is not easy like in github.
Yes, because you are in the text field, transcluding the text field.
IMO, the way around it is to add a new and conditional viewtemplate with your mindmap. Then style the text field and this new template to show side by side. I would put this styling inside the very new viewtemplate because it will need to dynamically use the current tiddlers title.
This shows the basic idea :
title: braintemplate
tags: $:/tags/ViewTemplate
text:
<$list filter='[all[current]has[SOMECONDITION]]'>
<div class="rightside">
{{TheBrain}}
</div>
<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
border:1px solid red;
width:50%;
clear:left;
}
[data-tiddler-title='{{!!title}}'] .rightside {
border:1px solid red;
width:50%;
float:right;
}
</style>
</$list>
Position this template above the bodytemplate, i.e by clicking the $:/tags/ViewTemplate tag and dragging it to above the bodytemplate.
@twMat Did you edited the code after posting initially. When I first used your code .rightside was floating at the right top of the tiddler overlapping the viewtoolbar buttons. So i added margin-top:146px; to [data-tiddler-title='{{!!title}}'] .rightside { and then both .tc-tiddler-body and .rightside came at the same level side by side. I thought finally I got it working and was happy. But when I viewed the tiddler in the maximized state (only seen in krystal horizontal plug in), although .tc-tiddler-body and .rightside where at the same level, the nodes of the TheBrain graph were moving out of the screen/tiddler to the right.
So I deleted the initial code and copied the code from the forum again. Now the .tc-tiddler-body and .rightside are seen one above the other with graph view on the top.
I forgot to take a snap of initial code which almost worked.
Here is the code I am using now.(I am not sure whether both are the same or not, that why asked it)
<$list filter='[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[$:/tags/ViewTemplate]!tag[Journal]!tag[tweaks]!TheBrain[no]]'>
<div class="rightside">
{{TheBrain}}
</div>
<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
border:1px solid red;
width:50%;
clear:left;
}
[data-tiddler-title='{{!!title}}'] .rightside {
border:1px solid red;
width:50%;
float:right;
}
</style>
</$list>
Thank you for taking time to help. Hope to solve this soon.
When you’re doing a lot of chopping and changing, Ctrl-C everything. Then…
Ah, yes I did. I thought I realized a somewhat better solution even though the first also worked. I think the initial styling was like this:
<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
border:1px solid red;
width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
border:1px solid red;
width:50%;
position:absolute;
right:0;
}
</style>
But, in my edited code, you can see if just removing clear:left; will position them correctly. You can also see what happens if the widths are set to 49% instead.
This the code I am using now
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]!tag[$:/tags/ViewTemplate]!tag[$:/tags/Stylesheet]!tag[tweaks]!TheBrain[no]]">
<div class="rightside">
{{TheBrain}}
</div>
<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
border:1px solid red;
width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
border:1px solid red;
width:50%;
position: absolute;
right:0;
margin-top: 146px;
}
</style>
</$list>
I don’t know whether it’s the right to use margin-top:146px; , it somehow works.
float:right; never used to work in krystal horizontal layout plug in.
Non maximized state of tiddler
Maximized state of tiddler
Another thing that i noticed is when the filter used was smaller, i had to use margin-top:164px;. Any idea why is it so?
<$list filter="[all[current]tag[hi]]">
<div class="rightside">
{{TheBrain}}
</div>
<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
border:1px solid red;
width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
border:1px solid red;
width:50%;
position: absolute;
right:0;
margin-top: 164px;
}
</style>
</$list>
Edit: When i reverted back to the first code, I had to use margin-top: 164px; there also.
Anyways it works as I intended. Thank you so much for your help @twMat
I had a small problem with the above code. When the tiddlerinfo viewtoolbar button is clicked, the thebrain on the right side will overlap the opened tiddlerinfo section like shown in the below image.
As a work around, I added the tiddlerinfo into the braintemplate using a tab macro like this.
Is there any other workaround for this?
Also can I incorporate your side-editor into this tabs for easy editing of tiddlers (If yes, can you suggest how to do it) Side-editor wont work easily with krystal horizontal story view. That why I am thinking in that direction.
You can try to set the z-index for the popup and the Brain side, i.e in the style parts defined previously, you can see if this works
[data-tiddler-title='{{!!title}}'] .rightside { z-index:10; }
[data-tiddler-title='{{!!title}}'] .tc-titlebar .tc-popup { z-index:20; }
(that first z-index:10can be directly inserted in the previous definitions, it does not have to be a new definition).
What do you mean with “into this tabs”? Where?
Check the second image in my today’s post. On the right side, you can see a tab instead theBrain graph view
This is my current setup.
This the braintemplate used currently
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]!tag[$:/tags/ViewTemplate]!tag[$:/tags/Stylesheet]!tag[tweaks]!TheBrain[no]!has[page-cover]]">
<div class="rightside">
{{||Bottom Tabs for viewtemplate - without folding}}
</div>
<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
border:1px solid transparent;
width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
border:1px solid transparent;
width:50%;
position: absolute;
right:0;
margin-top: 146px;
}
</style>
</$list>
Bottom Tabs for viewtemplate - without folding is the tab macro used.
<<tabs "[[TheBrain]] [[Node-explorer]] [[$:/sq/ui/ViewTemplate/rename-tiddler]][[Text editor for tabs]] [[$:/core/ui/TiddlerInfo/Fields]] [[$:/plugins/jd/plainrevs/TiddlerInfo/Revisions]]" "default:[[TheBrain]] ">>
Contents of the tab macro include a text editor tab, field tab and revisions tab also.
I cloned the core text editor tiddler and removed the editor toolbar buttons to create Text editor for tabs. Is it ok to do so?
Field tab was taken from Saq’s UI experiments wiki.
Revisions tab is taken from JD’s revisions plug in.
These are just some experiments I am doing. Not my main wiki.
I have some questions
Is it possible to hide the .rightside using some button so that it seen only when the button is pressed. The .tc-tiddler-body shall occupy the entire width of the screen when the .rightside is hidden. Is it possible ? Not an urgent thing. Was just exploring some UI ideas which came to my mind.
Is it possible to hide the .rightside when the wiki is opened in mobile phone. Or is it possible to bring the .rightside to the bottom of the tiddler by using another viewtemplate when the wiki is opened in mobile phone.
z-index thing didn’t worked. I will check later once more.