mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 03:57:21 +00:00
Code Issues Releases Wiki Activity

Dynaview: Add support for updating the address bar when scrolling

Browse Source 
We add an attribute to tiddler frames in the DOM giving the title of the corresponding tiddler
This commit is contained in:
Jermolene 2018-03-13 14:07:29 +00:00
parent c0569849d2
commit de6e0d1c1e
7 changed files with 38 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/ui/EditTemplate.tid
View File

@ -11,7 +11,7 @@ title: $:/core/ui/EditTemplate
\define frame-classes()
tc-tiddler-frame tc-tiddler-edit-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$
\end
<div class=<<frame-classes>>>
<div class=<<frame-classes>> data-tiddler-title=<<currentTiddler>>>
<$fieldmangler>
<$set name="storyTiddler" value=<<currentTiddler>>>
<$keyboard key="((cancel-edit-tiddler))" message="tm-cancel-tiddler">

2
core/ui/ViewTemplate.tid
View File

@ -6,6 +6,6 @@ tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerCl
\define folded-state()
$:/state/folded/$(currentTiddler)$
\end
<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>><div class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>><div class=<<frame-classes>> data-tiddler-title=<<currentTiddler>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
</div>
</$tiddler></$set></$set>

1
plugins/tiddlywiki/dynaview/config.multids
View File

@ -3,3 +3,4 @@ title: $:/config/DynaView/
Optisizer: no
Optisizer/Text: ABCDEFGHIJKLMnopqrstuvwxyzABCDEFGHIJKLMnopqrstuvwxyz
ViewportDimensions: no
UpdateAddressBar: no

3
plugins/tiddlywiki/dynaview/config.tid
View File

@ -1,5 +1,6 @@
title: $:/plugins/tiddlywiki/dynaview/config
<$checkbox tiddler="$:/config/DynaView/ViewportDimensions" field="text" checked="yes" unchecked=""> Enable dynamic saving of the viewport [[width|$:/state/DynaView/ViewportDimensions/Width]] and [[height|$:/state/DynaView/ViewportDimensions/Height]]</$checkbox>
<$checkbox tiddler="$:/config/DynaView/ViewportDimensions" field="text" checked="yes" unchecked="no" default="no"> Enable dynamic saving of the viewport [[width|$:/state/DynaView/ViewportDimensions/Width]] and [[height|$:/state/DynaView/ViewportDimensions/Height]]</$checkbox>
<$checkbox tiddler="$:/config/DynaView/UpdateAddressBar" field="text" checked="yes" unchecked="no" default="no"> Update address bar while scrolling</$checkbox>

6
plugins/tiddlywiki/dynaview/docs.tid
View File

@ -13,8 +13,14 @@ The components of this plugin include:
! Scroll Features
!! Set tiddler field when visible
The background task detects when elements with the class `tc-dynaview-set-tiddler-when-visible` scroll into view. The first time that they do, the background task assigns the value in the attribute `data-dynaview-set-value` to the tiddler whose title is in the attribute `data-dynaview-set-tiddler`. This assignment can be tied to a reveal widget to cause content to be displayed when it becomes visible. If the class `tc-dynaview-expand-viewport` is set then the viewport is expanded so that the processing occurs when elements move near the viewport.
!! Update address bar when scrolling
The background task detects the tiddler at the top of the viewport and sets the address bar location hash to the title of that tiddler.
! Viewport Size Features
!! Viewport Size Tracking

26
plugins/tiddlywiki/dynaview/dynaview.js
View File

@ -29,6 +29,7 @@ exports.startup = function() {
window.addEventListener("resize",onResize,false);
$tw.hooks.addHook("th-page-refreshed",function() {
optisizeFonts();
checkTopmost();
checkVisibility();
saveViewportDimensions();
});
@ -61,6 +62,7 @@ function worker() {
saveViewportDimensions();
}
setZoomClasses();
checkTopmost();
checkVisibility();
isWaitingForAnimationFrame = 0;
}
@ -165,6 +167,30 @@ function checkVisibility() {
});
}
function checkTopmost() {
if($tw.wiki.getTiddlerText("$:/config/DynaView/UpdateAddressBar") === "yes") {
var elements = document.querySelectorAll(".tc-tiddler-frame[data-tiddler-title]"),
topmostElement = null,
topmostElementTop = 1 * 1000 * 1000;
$tw.utils.each(elements,function(element) {
// Check if the element is visible
var elementRect = element.getBoundingClientRect();
if((elementRect.top < topmostElementTop) && (elementRect.bottom > 0)) {
topmostElement = element;
topmostElementTop = elementRect.top;
}
});
if(topmostElement) {
var title = topmostElement.getAttribute("data-tiddler-title"),
hash = "#" + encodeURIComponent(title) + ":" + encodeURIComponent("[list[$:/StoryList]]");
if(title && $tw.locationHash !== hash) {
$tw.locationHash = hash;
window.location.hash = hash;
}
}
}
}
function saveViewportDimensions() {
if($tw.wiki.getTiddlerText("$:/config/DynaView/ViewportDimensions") === "yes") {
var viewportWidth = window.innerWidth || document.documentElement.clientWidth,

1
plugins/tiddlywiki/dynaview/readme.tid
View File

@ -8,6 +8,7 @@ This plugin makes it possible to build user interfaces that dynamically respond
* CSS classes that allow the opacity of DOM elements to vary according to the current zoom level
* A daemon that can dynamically update a pair of state tiddlers with the current dimensions of the browser viewport
* A daemon that can dynamically adjust the size of text to yield a particular number of characters per line
* A daemon that can dynamically update the address bar with the title of the tiddler at the top of the viewport
Some points to note about the zoom features: