From c287d9d6d00ca342b48664e04bc1e53abdf5b54c Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Mon, 1 Apr 2013 19:06:39 +0100 Subject: [PATCH] First pass at a widget for importing tiddlers --- core/modules/widgets/import.js | 196 ++++++++++++++++++ core/styles/base.tid | 17 +- core/templates/ControlPanel.tid | 6 + core/templates/PageTemplate.tid | 9 + editions/tw5.com/tiddlers/Improvements.tid | 6 +- .../tiddlers/features/ImportTiddlers.tid | 11 + 6 files changed, 242 insertions(+), 3 deletions(-) create mode 100644 core/modules/widgets/import.js create mode 100644 editions/tw5.com/tiddlers/features/ImportTiddlers.tid diff --git a/core/modules/widgets/import.js b/core/modules/widgets/import.js new file mode 100644 index 000000000..077fda023 --- /dev/null +++ b/core/modules/widgets/import.js @@ -0,0 +1,196 @@ +/*\ +title: $:/core/modules/widget/import.js +type: application/javascript +module-type: widget + +Implements the import widget. + +``` +<$import> +Import using the "browse..." button or drag files onto this text + +``` + +\*/ +(function(){ + +/*jslint node: true, browser: true */ +/*global $tw: false */ +"use strict"; + +var ImportWidget = function(renderer) { + // Save state + this.renderer = renderer; + // Generate child nodes + this.generate(); +}; + +ImportWidget.prototype.generate = function() { + // Get the parameters from the attributes + this.browse = this.renderer.getAttribute("browse","yes"); + this["class"] = this.renderer.getAttribute("class"); + // Compute classes + var classes = ["tw-import"]; + if(this["class"]) { + $tw.utils.pushTop(classes,this["class"]); + } + // Create the file input and container elements + var fileInput = { + type: "element", + tag: "input", + attributes: { + type: {type: "string", value: "file"}, + style: {type: "string", value: this.browse === "no" ? "display: none;" : "display: block;"} + }, + events: [{name: "change", handlerObject: this, handlerMethod: "handleChangeEvent"}] + }, + container = { + type: "element", + tag: "div", + children: this.renderer.parseTreeNode.children, + events: [ + {name: "dragenter", handlerObject: this, handlerMethod: "handleDragEnterEvent"}, + {name: "dragover", handlerObject: this, handlerMethod: "handleDragOverEvent"}, + {name: "dragleave", handlerObject: this, handlerMethod: "handleDragLeaveEvent"}, + {name: "drop", handlerObject: this, handlerMethod: "handleDropEvent"}, + {name: "paste", handlerObject: this, handlerMethod: "handlePasteEvent"}] + }; + // Set the return element + this.tag = "div"; + this.attributes = { + "class": classes.join(" ") + }; + this.children = this.renderer.renderTree.createRenderers(this.renderer.renderContext,[fileInput,container]); +}; + +ImportWidget.prototype.handleChangeEvent = function(event) { + event.stopPropagation(); + this.importFiles(event.target.files); +}; + +ImportWidget.prototype.handleDragEnterEvent = function(event) { + this.renderer.domNode.classList.add("tw-dragover"); +}; + +ImportWidget.prototype.handleDragOverEvent = function(event) { + event.stopPropagation(); + event.preventDefault(); + event.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. +}; + +ImportWidget.prototype.handleDragLeaveEvent = function(event) { + this.renderer.domNode.classList.remove("tw-dragover"); +}; + +ImportWidget.prototype.handleDropEvent = function(event) { + this.renderer.domNode.classList.remove("tw-dragover"); + event.stopPropagation(); + event.preventDefault(); + this.importFiles(event.dataTransfer.files); + return false; +}; + +ImportWidget.prototype.handlePasteEvent = function(event) { + var self = this, + items = event.clipboardData.items; + for(var t = 0; tNew Tiddler +--- + +Import: <$import/> + +--- + <$button message="tw-save-wiki" class="btn btn-mini btn-primary">Save Changes --- diff --git a/core/templates/PageTemplate.tid b/core/templates/PageTemplate.tid index 32371bfe0..6ee5d5279 100644 --- a/core/templates/PageTemplate.tid +++ b/core/templates/PageTemplate.tid @@ -3,6 +3,13 @@ title: $:/templates/PageTemplate <$navigator story="$:/StoryList" history="$:/HistoryList"> + +<$import browse="no"> + +
+Drop files here to import them as tiddlers +
+
@@ -21,5 +28,7 @@ title: $:/templates/PageTemplate + + diff --git a/editions/tw5.com/tiddlers/Improvements.tid b/editions/tw5.com/tiddlers/Improvements.tid index a320c75f5..de328a38d 100644 --- a/editions/tw5.com/tiddlers/Improvements.tid +++ b/editions/tw5.com/tiddlers/Improvements.tid @@ -1,6 +1,7 @@ -title: Improvements -modifier: JeremyRuston tags: docs introduction +modifier: JeremyRuston +title: Improvements +modified: 201304011801 TiddlyWiki5 is a complete rewrite of the original TiddlyWiki. It is now based on an elegant [[microkernel architecture|PluginMechanism]], that allows infinite customisation by replacing and augmenting the core modules. The new code is much easier to work with, and will hopefully prove an even more fertile ground for the community of open source developers around TiddlyWiki. @@ -11,5 +12,6 @@ For end users, the important improvements include: * TiddlyWiki can now be run under [[node.js]] as well as in the browser, allowing it to be used as a personal web server * Tiddlers containing images are now supported just like WikiText tiddlers, including integrated editing of bitmap and SVG images * TiddlyWiki5 can directly build both itself and previous (2.x.x) versions of TiddlyWiki from their constituent separate files, without needing external tools +* Easily [[import|ImportTiddlers]] content via drag and drop, copy and paste, or browsing for local files The internal changes mean that TiddlyWiki5 is not compatible with previous versions, using different plugins, themes and so on. The changes to the WikiText have been carefully developed to try to maximise backwards compatibility but content prepared for previous versions of TiddlyWiki will need massaging to work properly in TiddlyWiki5. diff --git a/editions/tw5.com/tiddlers/features/ImportTiddlers.tid b/editions/tw5.com/tiddlers/features/ImportTiddlers.tid new file mode 100644 index 000000000..bb8928941 --- /dev/null +++ b/editions/tw5.com/tiddlers/features/ImportTiddlers.tid @@ -0,0 +1,11 @@ +title: ImportTiddlers +tags: docs features +modified: 201304011804 + +You can import content into a TiddlyWiki file in several ways: + +* Use the ''browse'' button to select one or more local files +* Drag and drop files from Windows Explorer or Mac OS X Finder into the TiddlyWiki5 browser window +* Paste content directly from the clipboard using the keyboard shortcut (control-V or command-V) +** Pasting is currently only supported in GoogleChrome +