mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-23 10:07:19 +00:00
DynaView: Remove optisizer functionality
It was slow and clunky, and turned out to be easier to do in CSS.
This commit is contained in:
Jermolene
parent
4ec8881c2b
commit
25727df649
@ -1,6 +1,4 @@
|
|||||||
title: $:/config/DynaView/
|
title: $:/config/DynaView/
|
||||||
|
|
||||||
Optisizer: no
|
|
||||||
Optisizer/Text: ABCDEFGHIJKLMnopqrstuvwxyzABCDEFGHIJKLMnopqrstuvwxyz
|
|
||||||
ViewportDimensions: no
|
ViewportDimensions: no
|
||||||
UpdateAddressBar: no
|
UpdateAddressBar: no
|
||||||
|
|||||||
@ -34,23 +34,6 @@ The background task can optionally dynamically update a pair of state tiddlers w
|
|||||||
* Set the configuration tiddler $:/config/DynaView/ViewportDimensions to the text "yes" to enable this feature
|
* Set the configuration tiddler $:/config/DynaView/ViewportDimensions to the text "yes" to enable this feature
|
||||||
* The viewport dimensions can be found in $:/state/DynaView/ViewportDimensions/Width and $:/state/DynaView/ViewportDimensions/Height
|
* The viewport dimensions can be found in $:/state/DynaView/ViewportDimensions/Width and $:/state/DynaView/ViewportDimensions/Height
|
||||||
|
|
||||||
!! Font "Optisizer"
|
|
||||||
|
|
||||||
The background task can optionally dynamically optimise the font size of a passage of text to match a desired line length.
|
|
||||||
|
|
||||||
* Set the configuration tiddler $:/config/DynaView/Optisizer to the text "yes" to enable this feature
|
|
||||||
* Optionally, update the configuration tiddler $:/config/DynaView/Optisizer/Text with the "maquette" -- a character string matchng the desired length (this string should not include spaces).
|
|
||||||
* Assign the following CSS classes to appropriate elements on the page:
|
|
||||||
** `.tc-dynaview-optisizer-site` for an HTML element whose `offsetWidth` property gives the desired output width
|
|
||||||
** `.tc-dynaview-optisizer-maquette` for an HTML element that will contain the maquette
|
|
||||||
* The computed optimum font size can be found in the tiddler $:/state/DynaView/Optisizer/FontSize
|
|
||||||
|
|
||||||
The tiddler $:/plugins/tiddlywiki/dynaview/optisizer-maquette contains an example configuration that can be used to adjust the size of tiddler body text. To use it:
|
|
||||||
|
|
||||||
* Set $:/config/DynaView/Optisizer to the text "yes"
|
|
||||||
* Set $:/themes/tiddlywiki/vanilla/metrics/bodyfontsize to `{{$:/state/DynaView/Optisizer/FontSize}}`
|
|
||||||
* Set $:/themes/tiddlywiki/vanilla/metrics/bodylineheight to `1.5` to ensure that the line height matches the font size
|
|
||||||
|
|
||||||
! Zoom Features
|
! Zoom Features
|
||||||
|
|
||||||
!! Document Body Zoom Classes
|
!! Document Body Zoom Classes
|
||||||
|
|||||||
@ -28,7 +28,6 @@ exports.startup = function() {
|
|||||||
window.addEventListener("scroll",onScroll,false);
|
window.addEventListener("scroll",onScroll,false);
|
||||||
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();
|
|
||||||
checkTopmost();
|
checkTopmost();
|
||||||
checkVisibility();
|
checkVisibility();
|
||||||
saveViewportDimensions();
|
saveViewportDimensions();
|
||||||
@ -58,7 +57,6 @@ function onResize(event) {
|
|||||||
|
|
||||||
function worker() {
|
function worker() {
|
||||||
if(isWaitingForAnimationFrame & (ANIM_FRAME_CAUSED_BY_RESIZE | ANIM_FRAME_CAUSED_BY_LOAD)) {
|
if(isWaitingForAnimationFrame & (ANIM_FRAME_CAUSED_BY_RESIZE | ANIM_FRAME_CAUSED_BY_LOAD)) {
|
||||||
optisizeFonts();
|
|
||||||
saveViewportDimensions();
|
saveViewportDimensions();
|
||||||
}
|
}
|
||||||
setZoomClasses();
|
setZoomClasses();
|
||||||
@ -67,55 +65,6 @@ function worker() {
|
|||||||
isWaitingForAnimationFrame = 0;
|
isWaitingForAnimationFrame = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
var lastSiteWidth, lastMaquetteString;
|
|
||||||
|
|
||||||
function optisizeFonts() {
|
|
||||||
if($tw.wiki.getTiddlerText("$:/config/DynaView/Optisizer") === "yes") {
|
|
||||||
var domSite = document.querySelector(".tc-dynaview-optisizer-site"),
|
|
||||||
domMaquette = document.querySelector(".tc-dynaview-optisizer-maquette");
|
|
||||||
if(domSite && domMaquette) {
|
|
||||||
// Check that we're not at the same size as last time
|
|
||||||
if(domSite.offsetWidth === lastSiteWidth && $tw.wiki.getTiddlerText("$:/config/DynaView/Optisizer/Text") === lastMaquetteString) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Get the current font size
|
|
||||||
domMaquette.style.fontSize = "";
|
|
||||||
var initialFontSize = parseInt(window.getComputedStyle(domMaquette).fontSize,10),
|
|
||||||
minFontSize = 1,
|
|
||||||
maxFontSize = 100,
|
|
||||||
adjustFontSize = maxFontSize,
|
|
||||||
newFontSize = initialFontSize,
|
|
||||||
maquetteWidth;
|
|
||||||
lastSiteWidth = domSite.offsetWidth;
|
|
||||||
lastMaquetteString = $tw.wiki.getTiddlerText("$:/config/DynaView/Optisizer/Text");
|
|
||||||
while(domMaquette.firstChild) {
|
|
||||||
domMaquette.removeChild(domMaquette.firstChild);
|
|
||||||
}
|
|
||||||
domMaquette.appendChild(document.createTextNode(lastMaquetteString));
|
|
||||||
// We use a binary search algorithm to find the optimum size
|
|
||||||
do {
|
|
||||||
// Apply the size we're considering
|
|
||||||
domMaquette.style.fontSize = newFontSize + "px";
|
|
||||||
// Measure the width of the maquette
|
|
||||||
maquetteWidth = domMaquette.offsetWidth;
|
|
||||||
// Adjust bigger or smaller
|
|
||||||
if(maquetteWidth < lastSiteWidth) {
|
|
||||||
newFontSize += adjustFontSize;
|
|
||||||
} else {
|
|
||||||
newFontSize -= adjustFontSize;
|
|
||||||
}
|
|
||||||
newFontSize = Math.min(newFontSize,maxFontSize);
|
|
||||||
newFontSize = Math.max(newFontSize,minFontSize);
|
|
||||||
adjustFontSize = adjustFontSize / 2;
|
|
||||||
} while (adjustFontSize > 0.5);
|
|
||||||
var newFontSizeString = newFontSize + "px";
|
|
||||||
if($tw.wiki.getTiddlerText("$:/state/DynaView/Optisizer/FontSize") !== newFontSizeString) {
|
|
||||||
$tw.wiki.setText("$:/state/DynaView/Optisizer/FontSize",undefined,undefined,newFontSizeString,undefined);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setZoomClasses() {
|
function setZoomClasses() {
|
||||||
var zoomFactor = document.body.scrollWidth / window.innerWidth,
|
var zoomFactor = document.body.scrollWidth / window.innerWidth,
|
||||||
classList = document.body.classList;
|
classList = document.body.classList;
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
title: $:/plugins/tiddlywiki/dynaview/examples/font-optisizer
|
|
||||||
tags: $:/tags/dynaviewExamples
|
|
||||||
caption: Font Optisizer
|
|
||||||
|
|
||||||
<$button>
|
|
||||||
<$action-setfield $tiddler="$:/config/DynaView/Optisizer" $value="yes"/>
|
|
||||||
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize" $value="{{$:/state/DynaView/Optisizer/FontSize}}"/>
|
|
||||||
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodylineheight" $value="1.5"/>
|
|
||||||
Enable font optisizer for tiddler body text
|
|
||||||
</$button>
|
|
||||||
|
|
||||||
<$button>
|
|
||||||
<$action-setfield $tiddler="$:/config/DynaView/Optisizer" $value="no"/>
|
|
||||||
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize" $value="14px"/>
|
|
||||||
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodylineheight" $value="20px"/>
|
|
||||||
Disable font optisizer
|
|
||||||
</$button>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
title: $:/plugins/tiddlywiki/dynaview/optisizer-maquette
|
|
||||||
tags: $:/tags/AboveStory
|
|
||||||
|
|
||||||
<div class="tc-tiddler-frame" style="border: none; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; ">
|
|
||||||
|
|
||||||
<div class="tc-tiddler-body tc-dynaview-optisizer-site" style="margin-top: -3em; visibility: hidden;">
|
|
||||||
|
|
||||||
X
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="position: relative;">
|
|
||||||
|
|
||||||
<div style="position: absolute; visibility: hidden;">
|
|
||||||
|
|
||||||
<div class="tc-dynaview-optisizer-maquette" style="white-space: nowrap;">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
@ -7,7 +7,6 @@ This plugin makes it possible to build user interfaces that dynamically respond
|
|||||||
* CSS classes that allow rendering to be deferred until the output is scrolled into view
|
* 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
|
* 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 update the address bar with the title of the tiddler at the top of the viewport
|
* 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:
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user