From 1fef272388e2224c0d499f8b6684ab6d9bdbc061 Mon Sep 17 00:00:00 2001 From: Jermolene Date: Thu, 17 Sep 2015 08:41:21 +0100 Subject: [PATCH] Text-slicer: starting to support images --- editions/text-slicer/tiddlers/Sample Text.tid | 176 +++++++++++------- .../tiddlywiki/text-slicer/modules/slicer.js | 52 ++++-- .../text-slicer/modules/slicers/anchor.js | 4 +- .../text-slicer/modules/slicers/heading.js | 39 ++-- .../text-slicer/modules/slicers/image.js | 34 ++++ .../text-slicer/modules/slicers/item.js | 11 +- .../text-slicer/modules/slicers/list.js | 2 +- .../text-slicer/modules/slicers/paragraph.js | 7 +- .../text-slicer/modules/slicers/text.js | 23 +++ 9 files changed, 239 insertions(+), 109 deletions(-) create mode 100644 plugins/tiddlywiki/text-slicer/modules/slicers/image.js create mode 100644 plugins/tiddlywiki/text-slicer/modules/slicers/text.js diff --git a/editions/text-slicer/tiddlers/Sample Text.tid b/editions/text-slicer/tiddlers/Sample Text.tid index 41e21ada6..305e594dc 100644 --- a/editions/text-slicer/tiddlers/Sample Text.tid +++ b/editions/text-slicer/tiddlers/Sample Text.tid @@ -1,126 +1,176 @@ title: Sample Text +type: text/html -! Introduction to TiddlyWiki + + + + -@@.intro +

Introduction to TiddlyWiki

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-@@ - -!! What is TiddlyWiki used for? - -@@.intro +

What is TiddlyWiki used for?

+

Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-@@ - -!! What's with all the < angle brackets +

What's with all the < angle brackets

+

An opportunity to see how characters that need HTML encoding (like < angle brackets) are dealt with. +

-!!! Who uses TiddlyWiki? - -@@.intro +

Who uses TiddlyWiki?

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-@@ - +

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-!! Who makes TiddlyWiki? +

Who makes TiddlyWiki?

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-!!! How open source projects work - -@@.intro +

How open source projects work

+

Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-@@ - +

Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur qui officia deserunt mollit anim id est laborum. +

+

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-!!! How GitHub works +

How GitHub works

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-!! Tiddlers - -@@.intro +

Tiddlers

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-@@ - -!!! Tiddler types +

Tiddler types

+

Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-!!! Fields - -@@.intro +

Fields

+

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-@@ - +

Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur qui officia deserunt mollit anim id est laborum. +

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-!!!! Tags +

Tags

+

Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur qui officia deserunt mollit anim id est laborum. +

-!! Lists and Stories +

Lists and Stories

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-!!! List widget +

List widget

+

Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-!!! Story +

Story

-@@.intro + +

Plugins

+ +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

-!!! Browser Same Domain Origin Policy +

Saving changes and generating HTML files

+

+Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ + + +

TiddlyFox

+ +

+Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ +

Syncing tiddlers with servers

+ +

+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ +

Browser Same Domain Origin Policy

+ +

Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur qui officia deserunt mollit anim id est laborum. +

+ + diff --git a/plugins/tiddlywiki/text-slicer/modules/slicer.js b/plugins/tiddlywiki/text-slicer/modules/slicer.js index 92463a966..580cb25fe 100644 --- a/plugins/tiddlywiki/text-slicer/modules/slicer.js +++ b/plugins/tiddlywiki/text-slicer/modules/slicer.js @@ -20,7 +20,8 @@ function Slicer(wiki,sourceTitle) { this.iframe = null; // Reference to iframe used for HTML parsing this.stopWordList = "the and a of on i".split(" "); this.tiddlers = {}; - this.parentStack = []; + this.parentStack = []; // Stack of parent heading or list + this.containerStack = []; // Stack of elements containing other elements this.sliceTitle = null; this.slicers = $tw.modules.applyMethods("slicer"); this.anchors = Object.create(null); // Hashmap of HTML anchor ID to tiddler title @@ -63,6 +64,20 @@ Slicer.prototype.popParentStackUntil = function(type) { return this.parentStack[this.parentStack.length - 1].title; }; +Slicer.prototype.getTopContainer = function() { + return this.containerStack[this.containerStack.length-1]; +}; + +Slicer.prototype.appendToCurrentContainer = function(newText) { + var title = this.containerStack[this.containerStack.length-1]; + if(title) { + var tiddler = this.tiddlers[title] || {}, + text = tiddler.text || ""; + this.addTiddler($tw.utils.extend({title: title},tiddler,{text: text + newText})); + } + + else {debugger;} +}; Slicer.prototype.convertTypeToLevel = function(type) { if(type.charAt(0) === "h") { @@ -73,7 +88,7 @@ Slicer.prototype.convertTypeToLevel = function(type) { }; Slicer.prototype.isBlank = function(s) { - return (/^[\s\xA0]*$/mg).test(s); + return (/^[\s\xA0]*$/g).test(s); }; Slicer.prototype.getSourceHtmlDocument = function(tiddler) { @@ -147,36 +162,37 @@ Slicer.prototype.processNodeList = function(domNodeList) { } Slicer.prototype.processNode = function(domNode) { - var nodeType = domNode.nodeType; - if(nodeType === 1) { // DOM element nodes - var tagName = domNode.tagName.toLowerCase(), - hasProcessed = false; - for(var slicerTitle in this.slicers) { - var slicer = this.slicers[slicerTitle]; - if(slicer.bind(this)(domNode,tagName)) { - hasProcessed = true; - break; - } + var nodeType = domNode.nodeType, + tagName = (domNode.tagName || "").toLowerCase(), + hasProcessed = false; + for(var slicerTitle in this.slicers) { + var slicer = this.slicers[slicerTitle]; + if(slicer.bind(this)(domNode,tagName)) { + hasProcessed = true; + break; } - if(!hasProcessed) { - if(domNode.hasChildNodes()) { - this.processNodeList(domNode.childNodes); - } + } + if(!hasProcessed) { + if(domNode.hasChildNodes()) { + this.processNodeList(domNode.childNodes); } } }; // Slice a tiddler into individual tiddlers Slicer.prototype.sliceTiddler = function(title) { - this.sliceTitle = title; + this.sliceTitle = "Sliced up " + title; var domNode = this.getSourceDocument(); this.parentStack.push({type: "h0", title: this.addTiddler({ - title: "Sliced up " + title, + title: this.sliceTitle, text: "Document sliced at " + (new Date()), list: [], "toc-type": "document" })}); + this.currentTiddler = title; + this.containerStack.push(this.sliceTitle); this.processNodeList(domNode.childNodes); + this.containerStack.pop(); }; // Output directly to the output tiddlers diff --git a/plugins/tiddlywiki/text-slicer/modules/slicers/anchor.js b/plugins/tiddlywiki/text-slicer/modules/slicers/anchor.js index e090bb930..d5701d5e5 100644 --- a/plugins/tiddlywiki/text-slicer/modules/slicers/anchor.js +++ b/plugins/tiddlywiki/text-slicer/modules/slicers/anchor.js @@ -13,12 +13,12 @@ Handle slicing anchor nodes "use strict"; exports.processAnchorNode = function(domNode,tagName) { - if(tagName === "a") { + if(domNode.nodeType === 1 && tagName === "a") { var id = domNode.getAttribute("id"); if(id) { this.registerAnchor(id); + return true; } - return true; } return false; }; diff --git a/plugins/tiddlywiki/text-slicer/modules/slicers/heading.js b/plugins/tiddlywiki/text-slicer/modules/slicers/heading.js index ef7fdbe90..cdc9ff1c5 100644 --- a/plugins/tiddlywiki/text-slicer/modules/slicers/heading.js +++ b/plugins/tiddlywiki/text-slicer/modules/slicers/heading.js @@ -13,27 +13,28 @@ Handle slicing heading nodes "use strict"; exports.processHeadingNode = function(domNode,tagName) { - if(tagName === "h1" || tagName === "h2" || tagName === "h3" || tagName === "h4") { + if(domNode.nodeType === 1 && (tagName === "h1" || tagName === "h2" || tagName === "h3" || tagName === "h4")) { var text = $tw.utils.htmlEncode(domNode.textContent); - if(!this.isBlank(text)) { - var title = this.makeUniqueTitle("heading",text), - parentTitle = this.popParentStackUntil(tagName), - tags = []; - if(domNode.className.trim() !== "") { - tags = tags.concat(domNode.className.split(" ")); - } - this.addToList(parentTitle,title); - this.parentStack.push({type: tagName, title: this.addTiddler({ - "toc-type": "heading", - "toc-heading-level": tagName, - title: title, - text: text, - list: [], - tags: tags - })}); - this.currentTiddler = title; - return true; + var title = this.makeUniqueTitle("heading",text), + parentTitle = this.popParentStackUntil(tagName), + tags = []; + if(domNode.className.trim() !== "") { + tags = tags.concat(domNode.className.split(" ")); } + this.addToList(parentTitle,title); + this.parentStack.push({type: tagName, title: this.addTiddler({ + "toc-type": "heading", + "toc-heading-level": tagName, + title: title, + text: "", + list: [], + tags: tags + })}); + this.currentTiddler = title; + this.containerStack.push(title); + this.processNodeList(domNode.childNodes); + this.containerStack.pop(); + return true; } return false; }; diff --git a/plugins/tiddlywiki/text-slicer/modules/slicers/image.js b/plugins/tiddlywiki/text-slicer/modules/slicers/image.js new file mode 100644 index 000000000..572efb82c --- /dev/null +++ b/plugins/tiddlywiki/text-slicer/modules/slicers/image.js @@ -0,0 +1,34 @@ +/*\ +title: $:/plugins/tiddlywiki/text-slicer/modules/slicers/image.js +type: application/javascript +module-type: slicer + +Handle slicing img nodes + +\*/ +(function(){ + +/*jslint node: true, browser: true */ +/*global $tw: false */ +"use strict"; + +exports.processImageNode = function(domNode,tagName) { + if(domNode.nodeType === 1 && tagName === "img") { + var src = domNode.getAttribute("src"); + if(src && src.substr(0,5) === "data:") { + var parts = src.toString().substr(5).split(";base64,"), + containerTitle = this.getTopContainer(), + title = this.makeUniqueTitle("image",containerTitle); + this.addTiddler({ + title: title, + type: parts[0], + text: parts[1] + }); + this.appendToCurrentContainer("[img[" + title + "]]"); + } + return true; + } + return false; +}; + +})(); diff --git a/plugins/tiddlywiki/text-slicer/modules/slicers/item.js b/plugins/tiddlywiki/text-slicer/modules/slicers/item.js index 2502fbb47..e8c772310 100644 --- a/plugins/tiddlywiki/text-slicer/modules/slicers/item.js +++ b/plugins/tiddlywiki/text-slicer/modules/slicers/item.js @@ -14,8 +14,8 @@ Handle slicing list item nodes exports.processListItemNode = function(domNode,tagName) { var text = $tw.utils.htmlEncode(domNode.textContent); - if(tagName === "li") { - if(!this.isBlank(text)) { + if(domNode.nodeType === 1 && tagName === "li") { + // if(!this.isBlank(text)) { var title = this.makeUniqueTitle("list-item",text), parentTitle = this.parentStack[this.parentStack.length - 1].title, tags = []; @@ -26,14 +26,17 @@ exports.processListItemNode = function(domNode,tagName) { this.addTiddler({ "toc-type": "item", title: title, - text: text, + text: "", list: [], tags: tags }); this.currentTiddler = title; + this.containerStack.push(title); + // this.containerStack.push("Just testing" + new Date()); this.processNodeList(domNode.childNodes); + this.containerStack.pop(); return true; - } + // } } return false; }; diff --git a/plugins/tiddlywiki/text-slicer/modules/slicers/list.js b/plugins/tiddlywiki/text-slicer/modules/slicers/list.js index ab545eaa8..1e203b772 100644 --- a/plugins/tiddlywiki/text-slicer/modules/slicers/list.js +++ b/plugins/tiddlywiki/text-slicer/modules/slicers/list.js @@ -13,7 +13,7 @@ Handle slicing list nodes "use strict"; exports.processListNode = function(domNode,tagName) { - if(tagName === "ul" || tagName === "ol") { + if(domNode.nodeType === 1 && (tagName === "ul" || tagName === "ol")) { var title = this.makeUniqueTitle("list-" + tagName), parentTitle = this.parentStack[this.parentStack.length - 1].title, tags = []; diff --git a/plugins/tiddlywiki/text-slicer/modules/slicers/paragraph.js b/plugins/tiddlywiki/text-slicer/modules/slicers/paragraph.js index 39cac0052..db28ad902 100644 --- a/plugins/tiddlywiki/text-slicer/modules/slicers/paragraph.js +++ b/plugins/tiddlywiki/text-slicer/modules/slicers/paragraph.js @@ -14,7 +14,7 @@ Handle slicing paragraph nodes exports.processParagraphNode = function(domNode,tagName) { var text = $tw.utils.htmlEncode(domNode.textContent); - if(tagName === "p") { + if(domNode.nodeType === 1 && tagName === "p") { if(!this.isBlank(text)) { var parentTitle = this.parentStack[this.parentStack.length - 1].title, tags = [], @@ -25,10 +25,13 @@ exports.processParagraphNode = function(domNode,tagName) { this.addToList(parentTitle,this.addTiddler({ "toc-type": "paragraph", title: title, - text: text, + text: "", tags: tags })); this.currentTiddler = title; + this.containerStack.push(title); + this.processNodeList(domNode.childNodes); + this.containerStack.pop(); return true; } } diff --git a/plugins/tiddlywiki/text-slicer/modules/slicers/text.js b/plugins/tiddlywiki/text-slicer/modules/slicers/text.js new file mode 100644 index 000000000..d238b26c4 --- /dev/null +++ b/plugins/tiddlywiki/text-slicer/modules/slicers/text.js @@ -0,0 +1,23 @@ +/*\ +title: $:/plugins/tiddlywiki/text-slicer/modules/slicers/text.js +type: application/javascript +module-type: slicer + +Handle slicing text nodes + +\*/ +(function(){ + +/*jslint node: true, browser: true */ +/*global $tw: false */ +"use strict"; + +exports.processTextNode = function(domNode,tagName) { + if(domNode.nodeType === 3) { + this.appendToCurrentContainer($tw.utils.htmlEncode(domNode.textContent)); + return true; + } + return false; +}; + +})();