How to limit the execution of an action to a certain screensize / device

[Jan]

Hello everybody, Hi Simon in particular...
I am working on a mobile menu/view for TW (which kan be seen on
smarties.tiddlyspot.com ).
Therefore I would need a button which works differently on Smartphones
than on desktops.
O smartphones when clicking a link in the Menu, it shall be closed
because it would be in the way. On the desktop the menu shall remain.
So far I am doing with two buttons and css which switches their
visibility. But that is an awfull lot of code.
Is there a way to turn of the <action>with something like reveal.

@Simon: Could your viewport thing do something like this?

Yours Jan

[BurningTreeC]

@Jan ,

Yes you can use the viewport-thing for that, it's now bundled in the dynaview plugin from the prerelease page,
I recommend using that. Just enable saving the viewport dimensions in the plugin's settings tab,
then you'll have two tiddlers $:/state/dynaview/viewportdimension/width and $:/state/dynaview/viewportdimensions/height whose values update dynamically every time the viewport size changes

Then you can make your Buttons like that:

\define compareViewportLow()
<$list filter="[{$:/state/DynaView/ViewportDimensions/Width}regexp[^$(lowValue)$$]]">
<$button><$actions when viewport low/><$actions more actions/></$button>
</$list>
\end
\define compareViewportHigh()
<$list filter="[{$:/state/DynaView/ViewportDimensions/Width}regexp[^$(highValue)$$]]">
<$button><$actions when viewport high/></$button>
</$list>
\end
<$list filter="[list[$:/numbers/viewport-low]]" variable="lowValue">
<<compareViewportLow>>
</$list>
<$list filter="[list[$:/numbers/viewport-high]]" variable="highValue">
<<compareViewportHigh>>
</$list>

I'm using two tiddlers here that store values from 1 to the breakpoint for "viewport low" in the list field of $:/numbers/viewport-low and values from the breakpoint for "viewport low + 1" to a high value in the list field of $:/numbers/viewport-high

You can get a tiddler with all numbers from 1 to 9999 here: http://tiddlytouch.tiddlyspot.com/#%24%3A%2Fplugins%2FBTC%2Ftiddly-touch%2Flists%2Fnumbers

Then you can split the list field at the value you choose for your breakpoint and make two tiddlers from it


That's one idea,
The other one is using Riz's version of the reveal widget, which can compare values with lt (less than) gt (greater than) and gteq and lteq (greater/equal, less/equal)
It could also make it to the next tiddlywiki release, but at the moment it's not at the prerelease page as far as I know

You can find it here: https://ibnishak.github.io/Tesseract/pluginsandmacros/index.html#Reveal-Extended%3A%20Adding%20%3C%2C%3E%2C%3C%3D%2C%3E%3D%20types%20to%20reveal%20widget

Using this is easier than my version above - you won't need the two number-tiddlers!


Simon

[Jeremy Ruston]

Hi Jan, BurningTreeC,

Just to let you know that 5.1.16 includes the following features that you can try out in the prerelease at https://tiddlywiki.com/prerelease

* The core now reports the browser screen size in $:/info/browser/screen/width and $:/info/browser/screenheight

* As BurningTreeC notes, a new feature of the DynaView plugin that reports the current viewport size dynamically

* Support for "startup actions": action widgets that are executed at startup — see https://tiddlywiki.com/prerelease/#StartupActions

* Riz’s updates to the reveal widget have landed, too — see https://tiddlywiki.com/prerelease/#RevealWidget

With these features it is possible to build UIs that respond to differences in the screen size by hiding and showing features in wikitext, instead of the usual approach of CSS media queries. (The main advantage of the wikitext approach is performance: features hidden with CSS are still rendered and still incur an overhead).

Startup actions also make it easier to reset configuration settings at startup.

Best wishes

Jeremy.

--
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/dac33f9b-b8f8-4e9b-9e32-2ccedc1258a2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jan Johannpeter]

Hi Simon, Hi Jeremy,
Great, and great how TiddlyWiki constantly evolves. I look forward using this feature this Weekend.
Yours Jan

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/54D0D3FD-A521-4D32-811D-4E828B14CCEB%40gmail.com.