mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-05 09:36:18 +00:00
Code Issues Releases Wiki Activity

Merge branch 'master' into single-tiddler-mode

Browse Source
This commit is contained in:
Jermolene 2018-08-29 19:03:50 +01:00
commit 33aa37f7dc
8 changed files with 3 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/tiddlywiki/codemirror/files/codemirror.js
View File

File diff suppressed because one or more lines are too long

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

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

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

@ -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

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

@ -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;

17
plugins/tiddlywiki/dynaview/examples/font-optisizer.tid
View File

@ -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>

24
plugins/tiddlywiki/dynaview/optisizer-maquette.tid
View File

@ -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>

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

@ -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:

4
plugins/tiddlywiki/dynaview/styles.tid
View File

@ -1,5 +1,5 @@
title: $:/plugins/tiddlywiki/help/styles
tags: [[$:/tags/Stylesheet]]
title: $:/plugins/tiddlywiki/dynaview/styles
tags: $:/tags/Stylesheet
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline