Version 0.3.4

Added Colour & Started work on theming
Work on Syntax Highlighting in Markdown
Preliminary work on virtual documents and Slideshows
Markdown now supports Heading 3 for selection.

Author: manngo

.DS_Store

@@ -1,3 +1,5 @@
+
+
 /*	Layout
 	================================================ */
 	html {
@@ -16,7 +18,7 @@
 	body {
 		font-family: "Source Sans Pro";
 		font-size: 1em;
-		--color: #2A5F5B;
+		--color: #204564;
 	}
 	code {
 		font-family: "Source Code Pro";

README.css

@@ -1,4 +1,6 @@
+<link rel="stylesheet" href="README.css">
 <style>
+	@import 'README.css';
 	th, td {
 		text-align: left;
 		vertical-align: top;
@@ -8,7 +10,7 @@
 		tab-size: 4 !important;
 	}
 </style>
-#	Document Pager 0.3.3
+#	Document Pager 0.3.4
 
 Document Pager © Mark Simon  
 https://github.com/manngo/document-pager

README.md

@@ -1,5 +1,5 @@
 #	rm -rf ../release-builds/Document\ Pager*;
-
+npx electron-builder build
 #	electron-packager . --overwrite --platform=darwin --arch=x64 --prune=true --extend-info "info.plist" --out="../release-builds/" # --icon ./images/edit-virtual-hosts.icns;
 	electron-packager . --overwrite --platform=darwin --arch=x64 --prune=true --out="../release-builds/" # --icon ./images/edit-virtual-hosts.icns;
 #	electron-packager . --overwrite --platform=win32 --arch=x64 --prune=true --out="../release-builds" # --icon images/edit-virtual-hosts.ico;

compile.sh

@@ -1,4 +1,4 @@
-##	About Text Pager 0.3.3
+##	About Text Pager 0.3.4
 
 Text Pager © Mark Simon
 See also https://pager.internotes.net/

data/about.md

@@ -32,12 +32,16 @@ <h1>Document Pager</h1>
 -->
 			<p><input type="checkbox" name="show-highlight" id="control-show-highlight" checked><label for="control-show-highlight">Show Highlighted</label></p>
 			<hr>
-			<p id="font-size"><button type="button" name="zoom-smaller">-</button><button type="button" name="zoom-default">•</button><button type="button" name="zoom-larger">+</button></p>
+			<p id="font-size"><!-- ▼▲✚ -->
+				<button type="button" name="zoom-smaller" id="control-zoom-smaller">-</button><label for="control-zoom-smaller">⬇︎</label>
+				<button type="button" name="zoom-default" id="control-zoom-default">•</button><label for="control-zoom-default">◼︎</label>
+				<button type="button" name="zoom-larger" id="control-zoom-larger">+</button><label for="control-zoom-larger">⬆︎</label>
+			</p>
 			<p><input type="checkbox" name="show-documents" id="control-show-documents" checked><label for="control-show-documents">Documents</label></p>
 <!--
 			<label for="upload-file">Open or Drop File …</label><input type="file" name="upload" id="upload-file">
 -->
-			<p><button type="button" name="full-screen">Full Screen</button></p>
+			<p><button type="button" name="full-screen" id="control-full-screen">Full Screen</button><label for="control-full-screen">Full Screen</label></p>
 		</form>
 	</header>
 	<aside id="about" data-load="/content/about.html"></aside>

index.html

@@ -1,6 +1,6 @@
 {
 	"name": "document-pager",
-	"version": "0.3.3",
+	"version": "0.3.4",
 	"description": "Document Pager: Displays a text document in tabbed pages.",
 	"main": "main.js",
 	"repository": "https://github.com/manngo/document-pager",

package.json

@@ -453,23 +453,24 @@
 	fs.stat
 	================================================ */
 
-	function addDocument(text,language,fileName,path,css) {
+	function addDocument(text,language,fileName,path,css,extension) {
 		var tab=document.createElement('li');
 			// var css='';
 			tab.textContent=fileName;
 			// if(language=='markdown') var css=`${path}/${fileName.replace(/\..*$/,'')}/styles.css`;
 
-			tab.data={text, language, fileName, path, item: 0, highlighted: 1 , css};
+			tab.data={text, language, fileName, path, item: 0, highlighted: 1 , css,extension};
 			tab.onclick=doTab;
 
 		var close=document.createElement('button');
-			close.innerHTML=`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="8" height="8" viewBox="0, 0, 24, 24"><path d="M3.141,24 L-0,24 L10.332,11.935 L-0,0 L3.401,0 L12,9.06 L20.924,0 L24,0 L13.581,11.935 L24,24 L20.664,24 L12,14.33 z" fill="#000000"/></svg>`;	//	'⨉';	//	✖️
+			//	close.innerHTML=`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="8" height="8" viewBox="0, 0, 24, 24"><path d="M3.141,24 L-0,24 L10.332,11.935 L-0,0 L3.401,0 L12,9.06 L20.924,0 L24,0 L13.581,11.935 L24,24 L20.664,24 L12,14.33 z" fill="#000000"/></svg>`;	//	'⨉';	//	✖️
+			close.innerHTML='×';
 			close.onclick=closeTab.bind(tab,tab);
-			close.id='tab-close';
+			close.className='tab-close';
 		var refresh=document.createElement('button');
 			refresh.innerHTML='↻';
 			refresh.onclick=refreshTab.bind(tab);
-			refresh.id='tab-refresh';
+			refresh.className='tab-refresh';
 
 		//	Add to DOM
 			tab.appendChild(close);
@@ -641,7 +642,7 @@
 				if(!title.length) return;
 
 				li.insertAdjacentHTML('beforeend',`<span>${title}</span>`);
-				if(value.match(headingMiniscule)) li.classList.add('subtitle');
+				if(data.language=='markdown' && value.match(headingMiniscule)) li.classList.add('subtitle');
 				li.next=li.previous=undefined;
 				if(previous) {
 					previous.next=li;
@@ -669,8 +670,6 @@
 				if(!selected) selected=li;
 			});
 
-
-
 			if(selected) selected.click();
 		}
 		else showItem(data.text,data.fileName,true);
@@ -707,7 +706,7 @@
 			var language=['js','javascript','sql','php'].indexOf(data.language)>-1;
 			elements.codeElement.textContent=item;
 
-			elements.codeElement.classList.forEach(className=>{if(className.startsWith('language-')) elements.codeElement.classList.remove(className);});
+			elements.codeElement.	classList.forEach(className=>{if(className.startsWith('language-')) elements.codeElement.classList.remove(className);});
 			elements.codeElement.classList.add(`language-${data.language}`);
 			lineNumbers.style.display='block';
 			elements.codeElement.style.display='block';
@@ -732,6 +731,17 @@
 
 				div.innerHTML=innerHTML;
 
+//				var doEtc = false;	if(doEtc)
+				div.querySelectorAll('pre').forEach(pre=>{
+					var code = pre.querySelector('code');
+					//	var codeDiv = document.createElement('div');
+				    var html = code.innerHTML.replace(/    /g,'\t');
+				    var language = code.className.match(/\blanguage-(.*)\b/)[1];
+				    code.innerHTML=Prism.highlight(html, Prism.languages[language], language);
+				    //	codeDiv.innerHTML=Prism.highlight(html, Prism.languages[language], language);
+					//	lineNumbers=jx.addLineNumbers(codeDiv);
+					//	code.parentNode.replaceChild(codeDiv,code);
+				});
 
 				var h2=div.querySelector('h1,h2,h3');
 				//	var h2=div.querySelector('h2');
@@ -766,7 +776,6 @@
 						},false);
 				});
 
-
 				lineNumbers.style.display='none';
 				elements.codeElement.style.display='none';
 				elements.mdElement.style.display='block';
@@ -837,14 +846,44 @@ console.log(fileName);
 		else result=openPath(fileName,remember);
 		return result;
 
+		function virtualDocument(pathName) {
+			var {path,fileName,extension,css}=pathDetails(pathName);
+			fsp.stat(pathName)
+			.then(()=>{
+				console.log(pathName);
+				return load(`${path}/${fileName}`);
+			})
+			.then(data=>{
+                data=JSON.parse(data);
+				var md=[];
+				fetch(data.data.url)
+				.then(response=>{
+                    console.log(response);
+                    return response.json();
+                })
+				.then(images=>{
+                    images.forEach(image=>{
+						md.push(`#\t${image.title}`);
+						md.push(`![${image.title}](https://javascript101.webcraft101.com/images/slides/${image.src})`);
+					});
+					data = md.join('\n\n');
+				    addDocument(data,extensions['md'],fileName,path,'','md');
+                });
+
+//					doSlides(images,'div#slides');
+				});
+		}
+
 		function openPath(pathName,remember=false) {
+			var {path,fileName,extension,css}=pathDetails(pathName);
+			if(extension=='dpf') return virtualDocument(pathName);
 			return fsp.stat(pathName)
 			.then(()=>{
-				var {path,fileName,extension,css}=pathDetails(pathName);
+//				var {path,fileName,extension,css}=pathDetails(pathName);
 				return fsp.stat(css).catch(()=>css='')
 				.then(()=>load(`${path}/${fileName}`))
 				.then(data=> {
-					addDocument(data,extensions[extension],fileName,path,css);
+					addDocument(data,extensions[extension],fileName,path,css,extension);
 				})
 				.then(()=>{
 					updateDocuments();
@@ -905,7 +944,7 @@ console.log(fileName);
 			})
 			.then((text)=>{
 				if(cancelled) return;
-				addDocument(data,extensions[extension],fileName,path,css);
+				addDocument(data,extensions[extension],fileName,path,css,extension);
 			})
 			.then(()=>{
 				if(cancelled || !remember) return;

scripts/pager.js

@@ -731,13 +731,9 @@
 			var lines=element.textContent.split(/\r?\n/).length;
 			lineNumbers.textContent=Array.from({length: lines},(v,i)=>i+1).join('\n');
 
-
-
 			var styles=['line-height','font-family','padding-top','padding-bottom','font-size'];
 			var computedStyles=window.getComputedStyle(element);
 			styles.forEach(style=>lineNumbers.style[style]=computedStyles[style]);
-
-
 		};
 		return lineNumbers;
 	};

scripts/utilities.js

@@ -1,5 +1,5 @@
 {
-	"version": "0.3.3",
+	"version": "0.3.4",
 	"headings": {
 		"title": "Document Pager",
 		"h1": "Document Pager",

settings.json

@@ -56,25 +56,32 @@
 /*	Prism
 	================================================ */
 
+    div#md>div>pre>code[class*="language-"],
 	div#main-content>code[class*="language-"] {
 		background-color: white;
 	}
 
+	div#md>div>pre>code,
 	div#main-content code {
 height: calc(100vh - 1rem);
 	}
 
+	div#md>div>pre>code .token.tab,
+	div#md>div>pre>code .token.crlf,
+	div#md>div>pre>code .token.lf,
+	div#md>div>pre>code .token.cr,
 	div#main-content .token.tab,
 	div#main-content .token.crlf,
 	div#main-content .token.lf,
 	div#main-content .token.cr {
 		visibility: hidden;
     }
 
+	div#md>div>pre>code[class*="language-"],
 	div#main-content>code[class*="language-"] {
 		font-family: "Source Code Pro", monospace;
 		font-size: .8em;
-		padding: .5em 0;
+		qpadding: .5em 0;
 		line-height: 1.5;
 	}