Make more core strings be translateable

Now we’re translating strings that occur in JavaScript modules.

Partially fixing #491

core/language/en-GB/Docs/PaletteColours.multids

@@ -0,0 +1,100 @@
+title: $:/language/Docs/PaletteColours/
+
+alert-background: Alert background
+alert-border: Alert border
+alert-highlight: Alert highlight
+alert-muted-foreground: Alert muted foreground
+background: General background
+blockquote-bar: Blockquote bar
+code-background: Code background
+code-border: Code border
+code-foreground: Code foreground
+download-background: Download button background
+download-foreground: Download button foreground
+dragger-background: Dragger background
+dragger-foreground: Dragger foreground
+dropdown-background: Dropdown background
+dropdown-border: Dropdown border
+dropdown-tab-background-selected: Dropdown tab background for selected tabs
+dropdown-tab-background: Dropdown tab background
+dropzone-background: Dropzone background
+external-link-background-hover: External link background hover
+external-link-background-visited: External link background visited
+external-link-background: External link background
+external-link-foreground-hover: External link foreground hover
+external-link-foreground-visited: External link foreground visited
+external-link-foreground: External link foreground
+foreground: General foreground
+message-background: Message box background
+message-border: Message box border
+message-foreground: Message box foreground
+modal-backdrop: Modal backdrop
+modal-background: Modal background
+modal-border: Modal border
+modal-footer-background: Modal footer background
+modal-footer-border: Modal footer border
+modal-header-border: Modal header border
+muted-foreground: General muted foreground
+notification-background: Notification background
+notification-border: Notification border
+page-background: Page background
+pre-background: Preformatted code background
+pre-border: Preformatted code border
+primary: General primary
+sidebar-button-foreground: Sidebar button foreground
+sidebar-controls-foreground-hover: Sidebar controls foreground hover
+sidebar-controls-foreground: Sidebar controls foreground
+sidebar-foreground-shadow: Sidebar foreground shadow
+sidebar-foreground: Sidebar foreground
+sidebar-muted-foreground-hover: Sidebar muted foreground hover
+sidebar-muted-foreground: Sidebar muted foreground
+sidebar-tab-background-selected: Sidebar tab
+sidebar-tab-background: Sidebar tab background
+sidebar-tab-border-selected: Sidebar tab border for selected tabs
+sidebar-tab-border: Sidebar tab border
+sidebar-tab-divider: Sidebar tab divider
+sidebar-tab-foreground-selected: Sidebar tab foreground for selected tabs
+sidebar-tab-foreground: Sidebar tab foreground
+sidebar-tiddler-link-foreground-hover: Sidebar tiddler link foreground hover
+sidebar-tiddler-link-foreground: Sidebar tiddler link foreground
+static-alert-foreground: Static alert foreground
+tab-background-selected: Tab background for selected tabs
+tab-background: Tab background
+tab-border-selected: Tab border for selected tabs
+tab-border: Tab border
+tab-divider: Tab divider
+tab-foreground-selected: Tab foreground for selected tabs
+tab-foreground: Tab foreground
+table-border: Table border
+table-footer-background: Table footer background
+table-header-background: Table header background
+tag-background: Tag background
+tag-foreground: Tag foreground
+tiddler-background: Tiddler background
+tiddler-border: Tiddler border
+tiddler-controls-foreground-hover: Tiddler controls foreground hover
+tiddler-controls-foreground-selected: Tiddler controls foreground for selected controls
+tiddler-controls-foreground: Tiddler controls foreground
+tiddler-editor-background: Tiddler editor background
+tiddler-editor-border-image: Tiddler editor border image
+tiddler-editor-border: Tiddler editor border
+tiddler-editor-fields-even: Tiddler editor background for even fields
+tiddler-editor-fields-odd: Tiddler editor background for odd fields
+tiddler-info-background: Tiddler info panel background
+tiddler-info-border: Tiddler info panel border
+tiddler-info-tab-background: Tiddler info panel tab background
+tiddler-link-background: Tiddler link background
+tiddler-link-foreground: Tiddler link foreground
+tiddler-subtitle-foreground: Tiddler subtitle foreground
+tiddler-title-foreground: Tiddler title foreground
+toolbar-new-button: Toolbar 'new tiddler' button foreground
+toolbar-options-button: Toolbar 'options' button foreground
+toolbar-save-button: Toolbar 'save' button foreground
+toolbar-info-button: Toolbar 'info' button foreground
+toolbar-edit-button: Toolbar 'edit' button foreground
+toolbar-close-button: Toolbar 'close' button foreground
+toolbar-delete-button: Toolbar 'delete' button foreground
+toolbar-cancel-button: Toolbar 'cancel' button foreground
+toolbar-done-button: Toolbar 'done' button foreground
+untagged-background: Untagged pill background
+very-muted-foreground: Very muted foreground

core/language/en-GB/Misc.multids

@@ -1,8 +1,26 @@
 title: $:/language/
 
-RecentChanges/DateFormat: DDth MMM YYYY
-CloseAll/Button: close all
-MissingTiddler/Hint: Missing tiddler "<$text text=<<currentTiddler>>/>" - click {{$:/core/images/edit-button}} to create
-SystemTiddler/Tooltip: This is a system tiddler
 ClassicWarning/Hint: This tiddler is written in TiddlyWiki Classic wiki text format, which is not fully compatible with TiddlyWiki version 5. See http://tiddlywiki.com/static/Upgrading.html for more details. 
 ClassicWarning/Upgrade/Caption: upgrade
+CloseAll/Button: close all
+ConfirmDeleteTiddler: Do you wish to delete the tiddler "<$text text=<<title>>/>"?
+ConfirmOverwriteTiddler: Do you wish to overwrite the tiddler "<$text text=<<title>>/>"?
+MissingTiddler/Hint: Missing tiddler "<$text text=<<currentTiddler>>/>" - click {{$:/core/images/edit-button}} to create
+RecentChanges/DateFormat: DDth MMM YYYY
+RelativeDate/Future/Days: <<period>> days from now
+RelativeDate/Future/Hours: <<period>> hours from now
+RelativeDate/Future/Minutes: <<period>> minutes from now
+RelativeDate/Future/Months: <<period>> months from now
+RelativeDate/Future/Seconds: <<period>> seconds from now
+RelativeDate/Future/Years: <<period>> years from now
+RelativeDate/Past/Days: <<period>> days ago
+RelativeDate/Past/Hours: <<period>> hours ago
+RelativeDate/Past/Minutes: <<period>> minutes ago
+RelativeDate/Past/Months: <<period>> months ago
+RelativeDate/Past/Seconds: <<period>> seconds ago
+RelativeDate/Past/Years: <<period>> years ago
+SystemTiddler/Tooltip: This is a system tiddler
+TagManager/Tag/Heading: Tag
+TagManager/Count/Heading: Count
+TagManager/Colour/Heading: Colour
+TagManager/Icon/Heading: Icon

core/modules/language.js

@@ -0,0 +1,37 @@
+/*\
+title: $:/core/modules/language.js
+type: application/javascript
+module-type: global
+
+The $tw.Language() manages translateable strings
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+/*
+Create an instance of the language manager. Options include:
+wiki: wiki from which to retrieve translation tiddlers
+*/
+function Language(options) {
+	options = options || "";
+	this.wiki = options.wiki || $tw.wiki;
+}
+
+/*
+Return a single translateable string. The title is automatically prefixed with "$:/language/"
+Options include:
+variables: optional hashmap of variables to supply to the language wikification
+*/
+Language.prototype.getString = function(title,options) {
+	options = options || {};
+	title = "$:/language/" + title;
+	return this.wiki.renderTiddler("text/plain",title,{variables: options.variables});
+};
+
+exports.Language = Language;
+
+})();

core/modules/startup.js

@@ -36,8 +36,9 @@ exports.startup = function() {
 	$tw.wiki.initParsers();
 	// Set up the command modules
 	$tw.Commander.initCommands();
-	// Kick off the language manager
-	$tw.languageManager = new $tw.PluginSwitcher({
+	// Kick off the language manager and switcher
+	$tw.language = new $tw.Language();
+	$tw.languageSwitcher = new $tw.PluginSwitcher({
 		wiki: $tw.wiki,
 		pluginType: "language",
 		controllerTitle: "$:/language",

core/modules/utils/utils.js

@@ -214,32 +214,36 @@ exports.getRelativeDate = function(delta) {
 		futurep = true;
 	}
 	var units = [
-		{name: "years",   duration:      365 * 24 * 60 * 60 * 1000},
-		{name: "months",  duration: (365/12) * 24 * 60 * 60 * 1000},
-		{name: "days",    duration:            24 * 60 * 60 * 1000},
-		{name: "hours",   duration:                 60 * 60 * 1000},
-		{name: "minutes", duration:                      60 * 1000},
-		{name: "seconds", duration:                           1000}
+		{name: "Years",   duration:      365 * 24 * 60 * 60 * 1000},
+		{name: "Months",  duration: (365/12) * 24 * 60 * 60 * 1000},
+		{name: "Days",    duration:            24 * 60 * 60 * 1000},
+		{name: "Hours",   duration:                 60 * 60 * 1000},
+		{name: "Minutes", duration:                      60 * 1000},
+		{name: "Seconds", duration:                           1000}
 	];
 	for(var t=0; t<units.length; t++) {
 		var result = Math.floor(delta / units[t].duration);
 		if(result >= 2) {
-			var desc = result + " " + units[t].name;
-			if(futurep) {
-				desc = desc + " from now";
-			} else {
-				desc = desc + " ago";
-			}
 			return {
 				delta: delta,
-				description: desc,
+				description: $tw.language.getString(
+					"RelativeDate/" + (futurep ? "Future" : "Past") + "/" + units[t].name,
+					{variables:
+						{period: result.toString()}
+					}
+				),
 				updatePeriod: units[t].duration
 			};
 		}
 	}
 	return {
 		delta: delta,
-		description: "1 second ago",
+		description: $tw.language.getString(
+			"RelativeDate/" + (futurep ? "Future" : "Past") + "/Seconds",
+			{variables:
+				{period: "1"}
+			}
+		),
 		updatePeriod: 1000
 	};
 };

core/modules/widgets/navigator.js

@@ -204,7 +204,12 @@ NavigatorWidget.prototype.handleDeleteTiddlerEvent = function(event) {
 		// Delete the original tiddler
 		var originalTitle = tiddler.fields["draft.of"];
 		// Ask for confirmation if the tiddler has changed
-		if(!confirm("Do you wish to delete the tiddler '" + originalTitle + "'")) {
+		if(!confirm($tw.language.getString(
+					"ConfirmDeleteTiddler",
+					{variables:
+						{title: originalTitle}
+					}
+				))) {
 			return false;
 		}
 		this.wiki.deleteTiddler(originalTitle);
@@ -277,7 +282,12 @@ NavigatorWidget.prototype.handleSaveTiddlerEvent = function(event) {
 			var isRename = draftOf !== draftTitle,
 				isConfirmed = true;
 			if(isRename && this.wiki.tiddlerExists(draftTitle)) {
-				isConfirmed = confirm("Do you wish to overwrite the tiddler '" + draftTitle + "'?");
+				isConfirmed = confirm($tw.language.getString(
+					"ConfirmOverwriteTiddler",
+					{variables:
+						{title: draftTitle}
+					}
+				));
 			}
 			if(isConfirmed) {
 				// Save the draft tiddler as the real tiddler

core/ui/TagManager.tid

@@ -1,5 +1,6 @@
 title: $:/TagManager
 
+\define lingo-base() $:/language/TagManager/
 \define iconEditor(title)
 <$edit-text field="icon" tag="input"/> <$button popup=<<qualify "$:/state/iconDropdown/$title$">> class="btn-invisible btn-dropdown">{{$:/core/images/down-arrow}}</$button>
 <div class="tw-block-dropdown-wrapper">
@@ -19,10 +20,10 @@ title: $:/TagManager
 <table>
 <tbody>
 <tr>
-<th>Tag</th>
-<th>Count</th>
-<th>Colour</th>
-<th>Icon</th>
+<th><<lingo Tag/Heading>></th>
+<th><<lingo Count/Heading>></th>
+<th><<lingo Colour/Heading>></th>
+<th><<lingo Icon/Heading>></th>
 </tr>
 <$list filter="[tags[]!is[system]sort[title]]">
 <tr>

core/wiki/paletteeditor.tid

@@ -1,6 +1,9 @@
 title: $:/snippets/paletteeditor
 
 \define lingo-base() $:/language/ControlPanel/Appearance/Palette/Editor/
+\define describePaletteColour(colour)
+{{$:/language/Docs/PaletteColours/$colour$}}
+\end
 <$set name="currentTiddler" value={{$:/palette}}>
 
 <<lingo Prompt>> <$link to={{$:/palette}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
@@ -16,9 +19,19 @@ title: $:/snippets/paletteeditor
 
 <$button message="tw-new-tiddler" param={{$:/palette}}><<lingo Clone/Caption>></$button>
 
-<table><tbody><$list filter="[is[current]indexes[]]" variable="colourName"><tr><td><$macrocall $name="colourName" $output="text/plain"/></td>
-<td><$edit-text index=<<colourName>> tag="input"/></td>
-<td><$edit-text index=<<colourName>> type="color" tag="input"/></td>
+<table>
+<tbody>
+<$list filter="[is[current]indexes[]]" variable="colourName">
+<tr>
+<td>
+''<$macrocall $name="describePaletteColour" colour=<<colourName>>/>''<br/>
+<$macrocall $name="colourName" $output="text/plain"/>
+</td>
+<td>
+<$edit-text index=<<colourName>> tag="input"/>
+<br>
+<$edit-text index=<<colourName>> type="color" tag="input"/>
+</td>
 </tr>
 </$list>
 </tbody>