[tw5] Re: Sticky toolbar doesn't work with preview

[Ton Gerner]

Hi Ittay,

>
> Well, in chrome, if I move the tc-editor-toolbar div outside of the 
> tc-tiddler-preview div, then it works as expected. I think this is just a 
> case of it being part of the editor tiddler and then the preview tiddler 
> transcludes the editor tiddler as a whole rather than (if possible) 
> separating the edit pane from whatever else is in that tiddler. The 
> relevant code that creates tc-editor-toolbar is in EditTextWidget in 
> $:/core/modules/editor/factory.js (which I couldn't locate in your 
> explorer preset filters)
>

As far as I can see, it is there (see attachment). Even if I overwrite the 
shadow tidller I do see it. Anyhow, for easier finding you just edit the 
filter manually.
 

> and the creation of the preview div is in $:/core/ui/EditTemplate/body 
> (which I couldn't find in your explorer preset filters either), which 
> transcludes $:/core/ui/EditTemplate/body/editor
>
> I don't know what I can/should override and what I cannot. But if I can't 
> override, is there a way to run after the widget rendered (or any other 
> suitable hook) to fix the dom? 
>
> Sorry I am not a programmer and cannot help further. But a long time ago I 
made a PR ; give it a 
thumbs up.

>  
>
>>
>> I created a small toolbar (below the tags) for e.g. toggling the editor 
>> toolbar on/off, preview on/off, scrollable preview on/off.
>> See the tab Code tiddlers at 'My playground' at [3]
>>
>
> Installed it, 'scrollable preview' doesn't seem to change anything? Am I 
> missing something? 
>  
>
My fault, I changed the name of the stylesheet but forgot to change the 
name in the checkbox widget. I uploaded a new - working - version'.

Cheers,

Ton

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/1ac2182f-eb01-4375-89d4-01895ad19bde%40googlegroups.com.

[tw5] Re: Sticky toolbar doesn't work with preview

[Ittay Dror]

Hi Ton,

First, thanks for replying, since I remembered vaguely there's an 
exploration plugin somewhere and couldn't find it and visiting your site I 
found it, it is now installed, so thank you!. 

More inline

On Sunday, 2 February 2020 14:03:10 UTC+2, Ton Gerner wrote:
>
> The problem with the sticky editor is well known. See e.g. [1]
> As far as I know the problem stems from the fact that the editor is used 
> in an iFrame. See e.g. [2]
>

Well, in chrome, if I move the tc-editor-toolbar div outside of the 
tc-tiddler-preview div, then it works as expected. I think this is just a 
case of it being part of the editor tiddler and then the preview tiddler 
transcludes the editor tiddler as a whole rather than (if possible) 
separating the edit pane from whatever else is in that tiddler. The 
relevant code that creates tc-editor-toolbar is in EditTextWidget in 
$:/core/modules/editor/factory.js (which I couldn't locate in your explorer 
preset filters) and the creation of the preview div is 
in $:/core/ui/EditTemplate/body (which I couldn't find in your explorer 
preset filters either), which transcludes 
$:/core/ui/EditTemplate/body/editor

I don't know what I can/should override and what I cannot. But if I can't 
override, is there a way to run after the widget rendered (or any other 
suitable hook) to fix the dom? 

 

> Another problem is that (caused by the iFrame) bookmarklets don't work 
> (they work with the editor toolbar switched off!)
> I created a small toolbar (below the tags) for e.g. toggling the editor 
> toolbar on/off, preview on/off, scrollable preview on/off.
> See the tab Code tiddlers at 'My playground' at [3]
>

Installed it, 'scrollable preview' doesn't seem to change anything? Am I 
missing something? 
 

>  
>
>> (For future reference, how can I see the code of shadow tiddlers? Finding 
>> them on github is tedious and in TiddlyWiki I see them as empty. Maybe 
>> there's a plugin that allows exploration of other plugins that are 
>> installed? )
>>
>
> See [3] under the tabs Guides > Exploration and under the tab Plugins > 
> Exploration.
>
> Cheers,
>
> Ton
>
> [1] 
> https://groups.google.com/forum/#!msg/tiddlywiki/QcKMCNWeRpY/m5sPjM2TAwAJ
> [2] 
> https://groups.google.com/forum/#!msg/tiddlywiki/5TInPo-HidU/8-9Oi4q-EAAJ
> [3] http://tongerner.tiddlyspot.com/
>  
>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/61f068f5-4b8e-43ae-8119-497da54c9722%40googlegroups.com.

[tw5] Re: Sticky toolbar doesn't work with preview

[Ton Gerner]

Hi Ittay,

On Sunday, February 2, 2020 at 10:27:39 AM UTC+1, Ittay Dror wrote:
>
> Sorry if the question I have is not phrased with the proper terms. 
>
> I'd like to have the 'tc-editor-toolbar' div have a sticky position. This 
> works when it is under tc-reveal, but when I use preview, it gets 
> transcluded under tc-tiddler-preview. 
>
> What is the best way to have it stay under tc-reveal when preview mode is 
> on? I understand transclusion happens in $:/core/ui/EditTemplate/body, 
> should I override it? How? Maybe have some other code move it in place 
> after the transclusion? Again, how? 
>
> The problem with the sticky editor is well known. See e.g. [1]
As far as I know the problem stems from the fact that the editor is used in 
an iFrame. See e.g. [2]
Another problem is that (caused by the iFrame) bookmarklets don't work 
(they work with the editor toolbar switched off!)
I created a small toolbar (below the tags) for e.g. toggling the editor 
toolbar on/off, preview on/off, scrollable preview on/off.
See the tab Code tiddlers at 'My playground' at [3]
 

> (For future reference, how can I see the code of shadow tiddlers? Finding 
> them on github is tedious and in TiddlyWiki I see them as empty. Maybe 
> there's a plugin that allows exploration of other plugins that are 
> installed? )
>

See [3] under the tabs Guides > Exploration and under the tab Plugins > 
Exploration.

Cheers,

Ton

[1] 
https://groups.google.com/forum/#!msg/tiddlywiki/QcKMCNWeRpY/m5sPjM2TAwAJ
[2] 
https://groups.google.com/forum/#!msg/tiddlywiki/5TInPo-HidU/8-9Oi4q-EAAJ
[3] http://tongerner.tiddlyspot.com/
 

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/c80b1b60-1c1e-443e-a914-d71319779ef1%40googlegroups.com.

[tw5] Re: Sticky toolbar doesn't work with preview

[Mat]

I'd say that most people here are not very familiar with the css definition 
names so it is better if you express your question using names of the TW 
parts, if possible. 

However, I have myself hidden the editor toolbar to have it appear on 
hover. Here's the css for this. (It is not elegantly done, it's just for 
me.) Maybe it'll help you, maybe not:

title: whateveryouwant
tags: $:/tags/Stylesheet
type: text/css
text:
.tc-editor-toolbar {
  position:sticky;
  position: -webkit-sticky;
  position: sticky;
  top: 0px; /* distance to stick from top, e.g if you use top bar */
  left:0;
  width:100%;
  font-size:0; 
  line-height:0;
  padding:0;
  border:6px solid transparent;
  margin-top:-11px; /* pull it up */
  Xoutline:1px solid blue; /* remove the X to peek where it all resides */
}
.tc-editor-toolbar:hover {
  font-size:1em;
  border-color:white;
  background:white;
}
.tc-editor-toolbar button {
  display:none;
  padding:0px; 
}
.tc-editor-toolbar:hover button {
 display:inline-block;
}

<:-)

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/d40ca0da-013e-4189-a686-157b0c28236c%40googlegroups.com.

[tw5] Re: Sticky toolbar doesn't work with preview

[Ittay Dror]

So, some more exploration it looks like tc-editor-toolbar is added in 
EditTextWidget.prototype.render 
which adds the div before the edit text widget. So maybe a check should be 
made if in preview mode and if so add it to the parent's parent ? Is this 
something I can override or requires a fix in the core code? 

On Sunday, 2 February 2020 11:27:39 UTC+2, Ittay Dror wrote:
>
> Sorry if the question I have is not phrased with the proper terms. 
>
> I'd like to have the 'tc-editor-toolbar' div have a sticky position. This 
> works when it is under tc-reveal, but when I use preview, it gets 
> transcluded under tc-tiddler-preview. 
>
> What is the best way to have it stay under tc-reveal when preview mode is 
> on? I understand transclusion happens in $:/core/ui/EditTemplate/body, 
> should I override it? How? Maybe have some other code move it in place 
> after the transclusion? Again, how? 
>
> (For future reference, how can I see the code of shadow tiddlers? Finding 
> them on github is tedious and in TiddlyWiki I see them as empty. Maybe 
> there's a plugin that allows exploration of other plugins that are 
> installed? )
>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/a1a39a89-4e9c-4715-9581-5351f9a0c893%40googlegroups.com.