Merge pull request #65 from ondras/master

sync with master - implementing the editor PR
ondras · Oct 9, 2020 · 955d0a0 · 955d0a0
2 parents c119cf8 + 5ce8ce3
commit 955d0a0
Show file tree

Hide file tree

Showing 16 changed files with 403 additions and 20 deletions.
diff --git a/Makefile b/Makefile
@@ -41,6 +41,7 @@ SOURCES =	src/mm.js \
 			src/ui.color.js \
 			src/ui.icon.js \
 			src/ui.help.js \
+			src/ui.notes.js \
 			src/ui.io.js \
 			src/ui.backend.js \
 			src/ui.backend.file.js \

diff --git a/css/item.css b/css/item.css
@@ -72,6 +72,21 @@ canvas {
 	top: 0;
 }
 
+.notes-indicator {
+	width: 16px;
+	height: 100%;
+	background: url("../icons/notes-indicator.png") right center no-repeat;
+	position: absolute;
+	top: -8px;
+	right: 0;
+	opacity: 0.4;
+	display: none;
+}
+
+.notes-indicator-visible {
+	display: block;
+}
+
 .toggle {
 	position: absolute;
 	width: 12px;

diff --git a/css/ui.css b/css/ui.css
@@ -9,6 +9,7 @@ button:not(:disabled) {
 	height: 100%;
 	background-color: #fff;
 	width: 200px;
+	max-width: 600px;
 	box-shadow: 0 0 2px 2px #666;
 	-webkit-transition: -webkit-transform 500ms;
 	transition: transform 500ms;
@@ -82,6 +83,12 @@ button:not(:disabled) {
 	top: 5px;
 }
 
+.ui button[data-command=Notes] {
+	position: absolute;
+	left: -90px;
+	top: 5px;
+}
+
 .ui table {
 	width: 100%;
 	border-collapse: collapse;
@@ -125,6 +132,20 @@ button:not(:disabled) {
 	border-color: #000;
 }
 
+#notes {
+	width: 50%;
+}
+
+#notes-editor {
+	border: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.pell-content {
+	height: calc(100% - 60px);
+}
+
 .ui #github {
 	position: absolute;
 	right: 8px;

diff --git a/editor.html b/editor.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/pell/dist/pell.min.css">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="notes-content"></div>
+    <script>
+
+        var sendMessage = function(action, value) {
+            window.parent.postMessage({
+                action: action,
+                value: value
+            }, '*');
+        };
+
+        window.addEventListener("message", function(e) {
+            if (e.data && e.data.action) {
+                switch (e.data.action) {
+                    case "setContent":
+                        window.editor.content.innerHTML = e.data.value;
+                        break;
+
+                    case "getContent":
+                        sendMessage('setContent', window.editor.content.innerHTML);
+                        break;
+                }
+            }
+        }, false);
+
+        window.onload = function() {
+
+            window.editor = window.pell.init({
+                element: document.getElementById('notes-content'),
+                onChange: function(html) {
+                    sendMessage('setContent', html);
+                },
+                defaultParagraphSeparator: 'div',
+                styleWithCSS: false,
+                actions: [
+                    'bold',
+                    'italic',
+                    'underline',
+                    'strikethrough',
+                    'heading1',
+                    'heading2',
+                    'paragraph',
+                    'quote',
+                    'olist',
+                    'ulist',
+                    'code',
+                    'line',
+                    {
+                        name: 'link',
+                        result: function() {
+                            const url = window.prompt('Enter the link URL');
+                            if (url) {
+                                window.pell.exec('createLink', url);
+                            }
+                        }
+                    },
+                    {
+                        name: 'close',
+                        icon: 'Close',
+                        title: 'Close Notes',
+                        result: function() {
+                            sendMessage('closeEditor', true);
+                        }
+                    }
+                ],
+                classes: {
+                    actionbar: 'pell-actionbar',
+                    button: 'pell-button',
+                    content: 'pell-content',
+                    selected: 'pell-button-selected'
+                }
+            })
+        }
+    </script>
+    <script src="https://unpkg.com/pell"></script>
+</body>
+</html>
diff --git a/icons/notes-indicator.png b/icons/notes-indicator.png
diff --git a/icons/notes.png b/icons/notes.png
diff --git a/index.html b/index.html
@@ -5,6 +5,9 @@
 		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />
 		<title>My Mind</title>
 		<link rel="icon" href="favicon.ico" />
+
+		<link rel="stylesheet" type="text/css" href="/vendor/pell/css/pell.min.css">
+
 		<script src="my-mind.js"></script>
 		<script src="https://www.gstatic.com/firebasejs/5.5.2/firebase-app.js"></script>
 		<script src="https://www.gstatic.com/firebasejs/5.5.2/firebase-database.js"></script>
@@ -889,6 +892,7 @@ <h3>My Mind</h3>
 			<a id="privacy" href="http://my-mind.github.io/PRIVACY.txt">Privacy policy</a>
 			<button id="toggle" title="Toggle UI"></button>
 			<button data-command="Help" title="Help"><img src="icons/help.png" alt="Help" /></button>
+			<button data-command="Notes" title="Notes"><img src="icons/notes.png" alt="Notes" /></button>
 
 			<div id="throbber"></div>
 		</div>
@@ -999,8 +1003,15 @@ <h3>Help</h3>
 			<p><span>Other</span></p>
 			<table class="other"></table>
 		</div>
+
+		<div id="notes" class="ui">
+			<h3>Topic Notes</h3>
+			<iframe id="notes-editor" sandbox="allow-scripts" src="editor.html"></iframe>
+		</div>
 
 		<div id="menu">
+			<button data-command="Notes"></button>
+			<span></span>
 			<button data-command="InsertChild"></button>
 			<button data-command="InsertSibling"></button>
 			<button data-command="Delete"></button>
@@ -1016,8 +1027,26 @@ <h3>Help</h3>
 			window.onload = function() {
 				MM.App.init();
 				MM.App.io.restore();
+
+				window.editor = {
+					postMessage: function(action, value) {
+						var iframeElm = document.getElementById('notes-editor');
+						iframeElm.contentWindow.postMessage({
+							action: action,
+							value: value
+						}, '*');
+					},
+					setContent: function(html) {
+						this.postMessage('setContent', html);
+					},
+					getContent: function() {
+						return this.postMessage('getContent');
+					}
+				};
+
 			}
 		</script>
+		<script src="/vendor/pell/src/pell.min.js"></script>
 <!--
 TODO:
   shortterm: