1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-27 07:43:14 +00:00
TiddlyWiki5/plugins/tiddlywiki/dynaview
BurningTreeC 042e9185a9 DynaView plugin: make viewport dimensions available in state tiddlers (#3126)
* add export-viewport-dimensions functionality

* add config.tid

* add config to plugin.info list

* typo

* update docs.tid

* change default tiddler to $:/state/viewport

* change default to $:/state/viewport

* Update dynaview.js

* changes as discussed - lingo missing
2018-02-18 12:04:35 +00:00
..
examples Introduce new dynaview plugin 2018-01-05 09:18:19 +00:00
above-story.tid Introduce new dynaview plugin 2018-01-05 09:18:19 +00:00
config.tid DynaView plugin: make viewport dimensions available in state tiddlers (#3126) 2018-02-18 12:04:35 +00:00
docs.tid DynaView plugin: make viewport dimensions available in state tiddlers (#3126) 2018-02-18 12:04:35 +00:00
dynaview.js DynaView plugin: make viewport dimensions available in state tiddlers (#3126) 2018-02-18 12:04:35 +00:00
examples.tid Introduce new dynaview plugin 2018-01-05 09:18:19 +00:00
macros.tid Introduce new dynaview plugin 2018-01-05 09:18:19 +00:00
plugin.info DynaView plugin: make viewport dimensions available in state tiddlers (#3126) 2018-02-18 12:04:35 +00:00
readme.tid Introduce new dynaview plugin 2018-01-05 09:18:19 +00:00
styles.tid Introduce new dynaview plugin 2018-01-05 09:18:19 +00:00

title: $:/plugins/tiddlywiki/dynaview/readme

! Dynaview

This plugin makes it possible to build user interfaces that dynamically respond to changes in the browser viewport via scrolling or zooming:

* CSS classes that allow rendering to be deferred until the output is scrolled into view
* CSS classes that allow the opacity of DOM elements to vary according to the current zoom level

Some points to note about the zoom features:

* The zoom level currently only works on Safari, both on Mac OS and on the iPhone/iPad
* The zoom level tracked by the plugin is the pinch-zoom level, and not the text-zoom level
* Rather than being progressively rendered as needed, hidden item are rendered with zero opacity. Which means that they can still be interacted with

This is really just a proof of concept to allow the user experience to be evaluated. A production version would need to work in all browsers, which would mean adopting a polyfill such as [[Hammer.js|http://hammerjs.github.io/]] to give us manual pan and zoom support. It would also allow deeper levels of zoom.