kopia lustrzana https://github.com/miklobit/TiddlyWiki5
Dynaview: Add support for updating the address bar when scrolling
We add an attribute to tiddler frames in the DOM giving the title of the corresponding tiddlerprint-window-tiddler
rodzic
c0569849d2
commit
de6e0d1c1e
|
@ -11,7 +11,7 @@ title: $:/core/ui/EditTemplate
|
||||||
\define frame-classes()
|
\define frame-classes()
|
||||||
tc-tiddler-frame tc-tiddler-edit-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$
|
tc-tiddler-frame tc-tiddler-edit-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$
|
||||||
\end
|
\end
|
||||||
<div class=<<frame-classes>>>
|
<div class=<<frame-classes>> data-tiddler-title=<<currentTiddler>>>
|
||||||
<$fieldmangler>
|
<$fieldmangler>
|
||||||
<$set name="storyTiddler" value=<<currentTiddler>>>
|
<$set name="storyTiddler" value=<<currentTiddler>>>
|
||||||
<$keyboard key="((cancel-edit-tiddler))" message="tm-cancel-tiddler">
|
<$keyboard key="((cancel-edit-tiddler))" message="tm-cancel-tiddler">
|
||||||
|
|
|
@ -6,6 +6,6 @@ tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerCl
|
||||||
\define folded-state()
|
\define folded-state()
|
||||||
$:/state/folded/$(currentTiddler)$
|
$:/state/folded/$(currentTiddler)$
|
||||||
\end
|
\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>
|
</div>
|
||||||
</$tiddler></$set></$set>
|
</$tiddler></$set></$set>
|
||||||
|
|
|
@ -3,3 +3,4 @@ title: $:/config/DynaView/
|
||||||
Optisizer: no
|
Optisizer: no
|
||||||
Optisizer/Text: ABCDEFGHIJKLMnopqrstuvwxyzABCDEFGHIJKLMnopqrstuvwxyz
|
Optisizer/Text: ABCDEFGHIJKLMnopqrstuvwxyzABCDEFGHIJKLMnopqrstuvwxyz
|
||||||
ViewportDimensions: no
|
ViewportDimensions: no
|
||||||
|
UpdateAddressBar: no
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
title: $:/plugins/tiddlywiki/dynaview/config
|
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>
|
||||||
|
|
||||||
|
|
|
@ -13,8 +13,14 @@ The components of this plugin include:
|
||||||
|
|
||||||
! Scroll Features
|
! 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.
|
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 Features
|
||||||
|
|
||||||
!! Viewport Size Tracking
|
!! Viewport Size Tracking
|
||||||
|
|
|
@ -29,6 +29,7 @@ exports.startup = function() {
|
||||||
window.addEventListener("resize",onResize,false);
|
window.addEventListener("resize",onResize,false);
|
||||||
$tw.hooks.addHook("th-page-refreshed",function() {
|
$tw.hooks.addHook("th-page-refreshed",function() {
|
||||||
optisizeFonts();
|
optisizeFonts();
|
||||||
|
checkTopmost();
|
||||||
checkVisibility();
|
checkVisibility();
|
||||||
saveViewportDimensions();
|
saveViewportDimensions();
|
||||||
});
|
});
|
||||||
|
@ -61,6 +62,7 @@ function worker() {
|
||||||
saveViewportDimensions();
|
saveViewportDimensions();
|
||||||
}
|
}
|
||||||
setZoomClasses();
|
setZoomClasses();
|
||||||
|
checkTopmost();
|
||||||
checkVisibility();
|
checkVisibility();
|
||||||
isWaitingForAnimationFrame = 0;
|
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() {
|
function saveViewportDimensions() {
|
||||||
if($tw.wiki.getTiddlerText("$:/config/DynaView/ViewportDimensions") === "yes") {
|
if($tw.wiki.getTiddlerText("$:/config/DynaView/ViewportDimensions") === "yes") {
|
||||||
var viewportWidth = window.innerWidth || document.documentElement.clientWidth,
|
var viewportWidth = window.innerWidth || document.documentElement.clientWidth,
|
||||||
|
|
|
@ -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
|
* 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 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 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:
|
Some points to note about the zoom features:
|
||||||
|
|
||||||
|
|
Ładowanie…
Reference in New Issue