mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-24 00:50:28 +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/
|
||||
|
||||
Optisizer: no
|
||||
Optisizer/Text: ABCDEFGHIJKLMnopqrstuvwxyzABCDEFGHIJKLMnopqrstuvwxyz
|
||||
ViewportDimensions: 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
|
||||
* 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
|
||||
|
||||
!! Document Body Zoom Classes
|
||||
|
||||
@ -28,7 +28,6 @@ exports.startup = function() {
|
||||
window.addEventListener("scroll",onScroll,false);
|
||||
window.addEventListener("resize",onResize,false);
|
||||
$tw.hooks.addHook("th-page-refreshed",function() {
|
||||
optisizeFonts();
|
||||
checkTopmost();
|
||||
checkVisibility();
|
||||
saveViewportDimensions();
|
||||
@ -58,7 +57,6 @@ function onResize(event) {
|
||||
|
||||
function worker() {
|
||||
if(isWaitingForAnimationFrame & (ANIM_FRAME_CAUSED_BY_RESIZE | ANIM_FRAME_CAUSED_BY_LOAD)) {
|
||||
optisizeFonts();
|
||||
saveViewportDimensions();
|
||||
}
|
||||
setZoomClasses();
|
||||
@ -67,55 +65,6 @@ function worker() {
|
||||
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() {
|
||||
var zoomFactor = document.body.scrollWidth / window.innerWidth,
|
||||
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 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:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user