Load resources in WebView and put todos on top

ReactNativeClient/lib/components/screens/note.js

@@ -3,6 +3,7 @@ import { BackHandler, View, Button, TextInput, WebView, Text, StyleSheet, Linkin
 import { connect } from 'react-redux'
 import { Log } from 'lib/log.js'
 import { Note } from 'lib/models/note.js'
+import { Resource } from 'lib/models/resource.js'
 import { Folder } from 'lib/models/folder.js'
 import { BaseModel } from 'lib/base-model.js'
 import { ActionButton } from 'lib/components/action-button.js';
@@ -13,6 +14,7 @@ import { Checkbox } from 'lib/components/checkbox.js'
 import { _ } from 'lib/locale.js';
 import marked from 'lib/marked.js';
 import { reg } from 'lib/registry.js';
+import { shim } from 'lib/shim.js';
 import { BaseScreenComponent } from 'lib/components/base-screen.js';
 import { dialogs } from 'lib/dialogs.js';
 import { globalStyle } from 'lib/components/global-style.js';
@@ -71,6 +73,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 			folder: null,
 			lastSavedNote: null,
 			isLoading: true,
+			resources: {},
 		};
 
 		this.bodyScrollTop_ = 0;
@@ -244,6 +247,15 @@ class NoteScreenComponent extends BaseScreenComponent {
 		this.refreshNoteMetadata(true);
 	}
 
+	async loadResource(id) {
+		const resource = await Resource.load(id);
+		resource.base64 = await shim.readLocalFileBase64(Resource.fullPath(resource));
+
+		let newResources = Object.assign({}, this.state.resources);
+		newResources[id] = resource;
+		this.setState({ resources: newResources });
+	}
+
 	async showOnMap_onPress() {
 		if (!this.state.note.id) return;
 
@@ -353,6 +365,9 @@ class NoteScreenComponent extends BaseScreenComponent {
 					hr {
 						border: 1px solid ` + style.htmlDividerColor + `;
 					}
+					img {
+						width: 100%;
+					}
 				`;
 
 				let counter = -1;
@@ -365,10 +380,32 @@ class NoteScreenComponent extends BaseScreenComponent {
 				}
 
 				const renderer = new marked.Renderer();
+
 				renderer.link = function (href, title, text) {
-					const js = "postMessage(" + JSON.stringify(href) + "); return false;";
-					let output = "<a href='#' onclick='" + js + "'>" + text + '</a>';
-					return output;
+					if (Resource.isResourceUrl(href)) {
+						return '[Resource not yet supported: ' + href + ']'; // TODO: add title
+					} else {
+						const js = "postMessage(" + JSON.stringify(href) + "); return false;";
+						let output = "<a title='" + title + "' href='#' onclick='" + js + "'>" + text + '</a>';
+						return output;
+					}
+				}
+
+				renderer.image = (href, title, text) => {
+					const resourceId = Resource.urlToId(href);
+					if (!this.state.resources[resourceId]) {
+						this.loadResource(resourceId);
+						return '';
+					}
+
+					const r = this.state.resources[resourceId];
+					if (r.mime == 'image/png' || r.mime == 'image/jpg' || r.mime == 'image/gif') {
+						const src = 'data:' + r.mime + ';base64,' + r.base64;
+						let output = '<img src="' + src + '"/>';
+						return output;
+					}
+					
+					return '[Image: ' + r.title + '(' + r.mime + ')]';
 				}
 
 				let html = note ? '<style>' + normalizeCss + "\n" + css + '</style>' + marked(body, { gfm: true, breaks: true, renderer: renderer }) : '';
@@ -376,7 +413,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 				let elementId = 1;
 				while (html.indexOf('°°JOP°') >= 0) {
 					html = html.replace(/°°JOP°CHECKBOX°([A-Z]+)°(\d+)°°/, function(v, type, index) {
-						const js = "postMessage('checkboxclick:" + type + '_' + index + "'); this.textContent = this.textContent == '☐' ? '☑' : '☐'; return false;";
+						const js = "postMessage('checkboxclick:" + type + ':' + index + "'); this.textContent = this.textContent == '☐' ? '☑' : '☐'; return false;";
 						return '<a href="#" onclick="' + js + '" class="checkbox">' + (type == 'NOTICK' ? '☐' : '☑') + '</a>';
 					});
 				}
@@ -395,7 +432,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 						onMessage={(event) => {
 							let msg = event.nativeEvent.data;
 
-							reg.logger().info('postMessage received: ' + msg);
+							//reg.logger().info('postMessage received: ' + msg);
 
 							if (msg.indexOf('checkboxclick:') === 0) {
 								msg = msg.split(':');

ReactNativeClient/lib/components/screens/notes.js

@@ -26,8 +26,7 @@ class NotesScreenComponent extends BaseScreenComponent {
 	}
 
 	async componentWillReceiveProps(newProps) {
-		if (newProps.notesOrder.orderBy != this.props.notesOrder.orderBy ||
-		    newProps.notesOrder.orderByDir != this.props.notesOrder.orderByDir ||
+		if (newProps.notesOrder !== this.props.notesOrder ||
 		    newProps.selectedFolderId != this.props.selectedFolderId ||
 		    newProps.selectedTagId != this.props.selectedTagId ||
 		    newProps.notesParentType != this.props.notesParentType) {
@@ -39,8 +38,8 @@ class NotesScreenComponent extends BaseScreenComponent {
 		if (props === null) props = this.props;
 
 		let options = {
-			orderBy: props.notesOrder.orderBy,
-			orderByDir: props.notesOrder.orderByDir,
+			order: props.notesOrder,
+			uncompletedTodosOnTop: props.uncompletedTodosOnTop,
 		};
 
 		const parent = this.parentItem(props);
@@ -153,6 +152,7 @@ const NotesScreen = connect(
 			notes: state.notes,
 			notesOrder: state.notesOrder,
 			notesSource: state.notesSource,
+			uncompletedTodosOnTop: state.settings.uncompletedTodosOnTop,
 		};
 	}
 )(NotesScreenComponent)