Dynaview and header behavior: Hide on scrolldown Show on scroll up.

[Jan]

Hi everybody, and a very special hi to Simon.
Can I use the dynaview plugin to hav this effect?
http://jsfiddle.net/mariusc23/s6mLJ/31/
Hiding the header on scrolldown and showing it on Show on scroll up.
This would be very practical for small screens of mobile devices...

Ahoi Jan

[TonyM]

Jan,

I cant be sure, but I thought I saw this behaviour in one of the mobile themes.

Regards

Tony

 

[Jan]

Hi Tony,
please tell me in which one, I am longing for it.

Greetings Jan

--
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+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/0a7348e4-916d-4400-8b10-444577929dcf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[BurningTreeC]

Hi Jan, yes I believe you can do this with the dynaview plugin

See the dynaview demo on the prerelease: https://tiddlywiki.com/prerelease/plugins/tiddlywiki/dynaview/

If you have an element somewhere with the class "tc-dynaview-set-tiddler-when-visible" and the data-tags "data-dynaview-set-tiddler","data-dynaview-set-value", "data-dynaview-unset-tiddler", "data-dynaview-unset-value" and "data-dynaview-has-triggered" you can build all kinds of dynamic things

In your case I could imagine a tiddler tagged "$:/tags/PageTemplate" with an absolute positioned div with those tags that will be at the top of the story river and scroll out of view when you scroll down. We give it z-index -1 and keep it invisible:

<div class="tc-dynaview-set-tiddler-when-visible" data-dynaview-set-tiddler="$:/state/header" data-dynaview-set-value="true" data-dynaview-unset-tiddler="$:/state/header" data-dynaview-unset-value="false" data-dynaview-has-triggered={{{ [[$:/state/header]get[text]] }}} style="position: absolute; width: 100%; top: 0; left: 0; height: 42px; z-index: -1;"/>

Then make another "$:/tags/PageTemplate" tiddler with your header and reveal it when "$:/state/header" ist true, hide it when it's false:

<$reveal state="$:/state/header" type="match" text="true" animate="yes" retain="yes">

Header

</$reveal>

Hope this helps,

greetings to Hamburg!

[BurningTreeC]

P.S. for Header, try a div with "fixed" position:

<div style="position: fixed; width: 100%; top: 0; left: 0; height: 42px; background-color: #333333; text-align: center; color: white;">

coolest header

</div>

On Thursday, November 29, 2018 at 11:36:08 PM UTC+1, Jan wrote:

[Jan]

Hello Simon,
many thanks, with your intructions i managed to do this (even with only one pageTemplate Tiddler):
http://szenio.de/dyna/

But I want more:
1)The Header now only appears when you have scrolled to the top of the storylist. I would like to make it appear even when I scroll up a little at the bottom of the storylist.
2)It would be nice if the animation was sliding down from the top. ( I guess I can find out how to do this myself)
3)It would be nice to have this behaviour also for the Titlebars of Tiddlers...especialy in editmode. The normal sticky-behaviour is eating too much space on my small screen.

So thanks again for the new possibilities you furnished with this plugin...
Wiederschaun
 Jan

--

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+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/64422908-054b-4905-8797-4f84ae430065%40googlegroups.com.

[BurningTreeC]

Hi Jan, first of all I have to pass kudos to Jeremy who made the plugin. But I take kudos for an idea extending it 8-)

to 3):

first clone your $:/core/ui/ViewTemplate/title and $:/core/ui/EditTemplate/controls tiddlers and call the clones $:/core/ui/ViewTemplate/header-title and $:/core/ui/EditTemplate/header-controls

replace your $:/core/ui/ViewTemplate/title with this:

\define title-styles()
fill:$(foregroundColor)$;
\end
\define config-title()
$:/config/ViewToolbarButtons/Visibility/$(listItem)$
\end
\define title-state()
$:/state/templates/title/visibility/$(currentTiddler)$
\end
<$set name="titleState" value=<<title-state>>>
<div class="tc-tiddler-title tc-dynaview-set-tiddler-when-visible" data-dynaview-set-tiddler=<<titleState>> data-dynaview-set-value="true" data-dynaview-unset-tiddler=<<titleState>> data-dynaview-unset-value="false" data-dynaview-has-triggered={{{ [<titleState>get[text]] }}}>
<div class="tc-titlebar">
<span class="tc-tiddler-controls">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewToolbar]!has[draft.of]]" variable="listItem"><$reveal type="nomatch" state=<<config-title>> text="hide"><$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]"><$transclude tiddler=<<listItem>>/></$set></$reveal></$list>
</span>
<$set name="tv-wikilinks" value={{$:/config/Tiddlers/TitleLinks}}>
<$link>
<$set name="foregroundColor" value={{!!color}}>
<span class="tc-tiddler-title-icon" style=<<title-styles>>>
<$transclude tiddler={{!!icon}}/>
</span>
</$set>
<$list filter="[all[current]removeprefix[$:/]]">
<h2 class="tc-title" title={{$:/language/SystemTiddler/Tooltip}}>
<span class="tc-system-title-prefix">$:/</span><$text text=<<currentTiddler>>/>
</h2>
</$list>
<$list filter="[all[current]!prefix[$:/]]">
<h2 class="tc-title">
<$view field="title"/>
</h2>
</$list>
</$link>
</$set>
</div>

<$reveal type="nomatch" text="" default="" state=<<tiddlerInfoState>> class="tc-tiddler-info tc-popup-handle" animate="yes" retain="yes">

<$list filter="[all[shadows+tiddlers]tag[$:/tags/TiddlerInfoSegment]!has[draft.of]] [[$:/core/ui/TiddlerInfo]]" variable="listItem"><$transclude tiddler=<<listItem>> mode="block"/></$list>

</$reveal>
</div>
</$set>

replace $:/core/ui/EditTemplate/controls with this:

\define config-title()
$:/config/EditToolbarButtons/Visibility/$(listItem)$
\end
\define title-state()
$:/state/templates/title/visibility/$(currentTiddler)$
\end
<$set name="titleState" value=<<title-state>>>
<div class="tc-tiddler-title tc-tiddler-edit-title tc-dynaview-set-tiddler-when-visible" data-dynaview-set-tiddler=<<titleState>> data-dynaview-set-value="true" data-dynaview-unset-tiddler=<<titleState>> data-dynaview-unset-value="false" data-dynaview-has-triggered={{{ [<titleState>get[text]] }}}>
<$view field="title"/>
<span class="tc-tiddler-controls tc-titlebar"><$list filter="[all[shadows+tiddlers]tag[$:/tags/EditToolbar]!has[draft.of]]" variable="listItem"><$reveal type="nomatch" state=<<config-title>> text="hide"><$transclude tiddler=<<listItem>>/></$reveal></$list></span>
<div style="clear: both;"></div>
</div>
</$set>

Then create a tiddler tagged $:/tags/PageTemplate and put this inside:

<div style="position: fixed; width: 100%; height: 42px; background-color: #333333; color: white; top: 0; left: 0;">
<$set name="storyList" filter="[list[$:/StoryList]]">
<$list filter="[enlist<storyList>addprefix[$:/state/templates/title/visibility/]contains:text[true]nth[1]removeprefix[$:/state/templates/title/visibility/]]" variable="topmostVisible">
<$list filter="[enlist<storyList>allbefore<topmostVisible>last[]!has[draft.of]]" template="$:/core/ui/ViewTemplate/header-title"/>
<$list filter="[enlist<storyList>allbefore<topmostVisible>last[]has[draft.of]]" template="$:/core/ui/EditTemplate/header-controls"/>
</$list>
</$set>
</div>

Now, if a tiddler scrolls out on top its controls should show up within the header

[BurningTreeC]

But I want more:
1)The Header now only appears when you have scrolled to the top of the storylist. I would like to make it appear even when I scroll up a little at the bottom of the storylist.

For this you'll have to experiment a bit. I think it's doable but I don't have a solution for you. The mechanism works through detecting when a div with the class "tc-dynaview-set-tiddler-when-visible" scrolls into view or out of view. It sets the tiddler(s) defined with the data-tags "data-dynaview-set-tiddler" and "data-dynaview-unset-tiddler" to the values in "data-dynaview-set-value" / "data-dynaview-unset-value". "data-dynaview-has-triggered" should be "true" when the div is visible and "false" if the div is out of view in order for the mechanism to set it again to "true" when it comes back into view.

to 3):

remove the div from the tiddler with $:/tags/PageTemplate I posted above and put it on top of the header-title and header-controls tiddlers so that they look like this:

\define title-styles()
fill:$(foregroundColor)$;
\end
\define config-title()
$:/config/ViewToolbarButtons/Visibility/$(listItem)$
\end

<div style="position: fixed; width: 100%; height: 42px; background-color: #333333; color: white; top: 0; left: 0; z-index: 500;">
<div class="tc-tiddler-title">

</div>

note I've also added z-index: 500 ... add the div also for the header-controls tiddler and remove the tags $:/tags/ViewTemplate and $:/tags/EditTemplate from both tiddlers

[Jan]

Hi Simon,
thanks for the detailed instructions... but I am not sure wheter I executed them correctly here http://szenio.de/dyna/test3.html .

After your explanation, I ask myself whether dynaview is the best way to achieve my goal 1. ( The Menubar appearing on scrollup.) . Does the Swipe macro still catch all actions on the y-axis if applied to the storyriver so that you could not scroll anymore when it is active or could you do both things at the same time scrolling and swiping down the controls?

For the goal 3 hiding the Tiddlercontols (and the editToolbar) is much more important in the editmode on the mobile. I think I will do may next run on that.

Tschö
Jan

--
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+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5b0729c1-01e8-47c7-bdd2-85760fb948ba%40googlegroups.com.

[BurningTreeC]

Hi Jan, I've corrected some things in your test3.html, attached it below

[BurningTreeC]

@Jan , I had to correct one thing, file attached

[Jan]

Hi Simon,
Thanks, I uploaded the correct version http://szenio.de/dyna/Titlebar.html

Meanwhile I did an experiment with your Hammerwidgets that I would like to show you. http://szenio.de/hammer/
It is turning all fields prefixed move_ into movable content with a litte extension of your $:/macro/move-tiddler-content

\define movdef() <$transclude field="move_$(fnumber)$" mode="block"/>

<$list filter="[all[current]fields[]removeprefix[move_]]" variable="fnumber">
<$macrocall $name="move" number=<<fnumber>> text=<<movdef>>/>
<br>
</$list>

I think I would be nice to upgrade this to achieve the same effect as in your resizable pan-demo 3 which has the advantage of beiing resizable and of beiing movable also outside the tiddler.

My problem at the moment is that I could not find out what exactly is necessary to make it work because i could not get it to work just with the hammer-plugin and the macro. Does it still neet the formula-plugin?

Greetings Jan

Am 02.12.2018 um 11:33 schrieb BurningTreeC:

Hi Jan, I've corrected some things in your test3.html, attached it below

--
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+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/fb2d314f-7846-40ab-ad37-60b3d3411e4f%40googlegroups.com.