@webhandle/tree-file-browser 1.0.0

package/README.md

@@ -0,0 +1,144 @@
+# Webhandle / Tree Image Browser
+
+Mostly client side html/css/js components to browse, select, upload, and delete files
+on a server from a browser. It uses the [File Sink](https://www.npmjs.com/package/file-sink)
+family of packages to provide access to server files.
+
+
+## Install
+
+```bash
+npm install @webhandle/tree-file-browser
+```
+
+## Usage
+
+This package can be used either as something built into a single page app or as a piece of
+code loaded on demand. 
+
+### Single page app
+
+Set up a file manager
+
+```js
+import { ImageBrowserView, FileSelectDialog, loadStyles  } from '@webhandle/tree-file-browser/client-lib/dynamic-load.mjs'
+
+let treeHolder = document.querySelector('.webhandle-file-tree-image-browser')
+if(treeHolder) {
+	loadStyles()
+	let imageBrowserView = new ImageBrowserView({
+		// The source of the files
+		sink: the file sink
+		// optional, an panel to post events
+		, eventNotificationPanel: eventPanel
+		// optional, the directory which to open to
+		, startingDirectory: 'img/empty'
+	})
+	imageBrowserView.appendTo(treeHolder)
+	imageBrowserView.render()
+}
+
+```
+
+`loadStyles` causes css to be added to the page which support the browser. Different setups are possible,
+but by default, the styles expect the content to be a child of an element with a class `webhandle-file-tree-image-browser`.
+Alternatively, the styles can be built into the pages stylesheet by including the file 
+`@webhandle/tree-file-browser/less/components.less`. `loadStyles` attempts to determine if the css is already in place,
+so there's no harm in calling it if the css has already been included.
+
+Loading the css dynamically or loading the file browser dynamically requires that the compiled resources have been added to
+files available to the browser. These are at `@webhandle/tree-file-browser/resources` and must be available at the url
+`/@webhandle/tree-file-browser/resources`
+
+If you're using webhandle, you can set up all the server side resources, including kapla-tree-on-page and the material icons,
+by using:
+
+```js
+import webhandle from "webhandle"
+import initializeTreeBrowserResources from "@webhandle/tree-file-browser/server-lib/initialize-tree-browser-resources.mjs"
+initializeTreeBrowserResources(webhandle)
+```
+
+or the equivalent common js include:
+
+```js
+const webhandle = require('webhandle')
+const initializeTreeBrowserResources = require("@webhandle/tree-file-browser/server-lib/initialize-tree-browser-resources.cjs")
+initializeTreeBrowserResources(webhandle)
+```
+
+This code can also be used as a file selection dialog like:
+
+```js
+import { ImageBrowserView, FileSelectDialog, loadStyles  } from '@webhandle/tree-file-browser/client-lib/dynamic-load.mjs'
+let selectButton = document.querySelector('.select-image')
+if(selectButton) {
+	selectButton.addEventListener('click', async function(evt) {
+		evt.preventDefault()
+		let diag = new FileSelectDialog({
+			sink: the-file-sink
+			, startingDirectory: 'img'
+			, imagesOnly: true
+		})
+		let result = await diag.open()
+		console.log(result)
+	})
+}
+
+```
+
+
+### Dynmaically load
+
+Using it independently on a single page is also pretty easy
+
+```html
+	<script type="module">
+		import { ImageBrowserView, loadStyles } from '/@webhandle/tree-file-browser/resources/js/tree-file-browser.js'
+		loadStyles()
+
+		let treeHolder = document.querySelector('.webhandle-file-tree-image-browser')
+		if(treeHolder) {
+			let imageBrowserView = new ImageBrowserView({
+				sink: the-file-sink
+				, startingDirectory: 'img'
+			})
+			imageBrowserView.appendTo(treeHolder)
+			imageBrowserView.render()
+			
+			imageBrowserView.emitter.on('select', async function(evt) {
+				console.log(await imageBrowserView.getSelectedUrl())
+			})
+		}
+	</script>
+
+```
+
+### Selections
+
+You can listen for selections like:
+
+```js
+	imageBrowserView.emitter.on('select', async function(evt) {
+		console.log(await imageBrowserView.getSelectedUrl())
+	})
+```
+
+### Options
+
+```js
+	/**
+	 * Construct a new file browser
+	 * @param {object} options 
+	 * @param {FileSink} options.sink The file to use as a file source
+	 * @param {boolean} [options.imagesOnly] Set to true if you would like to display only images
+	 * @param {boolean} [options.allowFileSelection] Set to true so that selected files are marked
+	 * @param {EventNotificationPanel} [options.eventNotificationPanel] The panel which status messages will be added to.
+	 * @param {string} [options.startingDirectory] Opens to that directory path if it exists
+	 * @param {boolean} [options.deleteWithoutConfirm] False by default
+	 * @param {boolean} [options.ignoreGlobalEvents] False by default, if true it will not listen to events like paste or keypresses
+	 * which occur on the document
+	 * @param {Emitter} [options.emitter] Emitter for various file events
+	 */
+
+```

package/client-lib/base-image-name.mjs

@@ -0,0 +1,41 @@
+
+/**
+ * 
+ * @param {File,string} file 
+ */
+export default function baseImageName(file) {
+	let name
+	if(typeof file === 'string') {
+		name = file
+	}
+	else if(file instanceof File) {
+		name = file.name
+	}
+	
+	let parts = name.split('.')
+	
+	if(parts.length > 1) {
+		parts.pop()
+	}
+	name = parts.join('.')
+	name = name.replace(/-@2x$/, '')
+	name = name.replace(/@2x$/, '')
+	name = name.replace(/-2x$/, '')
+	name = name.replace(/2x$/, '')
+
+	let chars = [name.substring(0, 1)]
+	for(let char of name.substring(1)) {
+		if(char.match(/[A-Z]/)) {
+			chars.push('-')
+		}
+		chars.push(char)
+	}
+	name = chars.join('')
+
+	name = name.toLowerCase()
+	name = name.replace(/[^1234567890a-z-]/g, '-')
+	name = name.replace(/--+/g, '-')
+	
+
+	return name
+}

package/client-lib/data-to-image.mjs

@@ -0,0 +1,45 @@
+
+/**
+ * Takes data, perhaps even an image, and resolves to a fully 
+ * loaded image.
+ * @param {Blob,ArrayBuffer,string,Image} data 
+ */
+export default async function dataToImage(data) {
+	return new Promise((resolve, reject) => {
+		let finalImage
+		let objectUrl
+		if (data instanceof Image) {
+			finalImage = data
+		}
+		else if (typeof data === 'string') {
+			finalImage = new Image();
+			finalImage.src = data;
+		}
+		// ArrayBuffer.isView(data) might be true or could be a Blob or File
+		else {
+			// let's make a blob first. This works if it's an ArrayBuffer of a Blob
+			let imageBlob = new Blob([data])
+			objectUrl = URL.createObjectURL(imageBlob)
+
+			finalImage = new Image()
+			finalImage.src = objectUrl
+		}
+
+		function finish() {
+			if (objectUrl) {
+				URL.revokeObjectURL(objectUrl)
+			}
+			resolve(finalImage)
+		}
+		if (finalImage.complete) {
+			finish()
+		}
+		else {
+			// we'll have to wait till it's loaded
+			finalImage.addEventListener('load', () => {
+				finish()
+			})
+		}
+	})
+
+}

package/client-lib/dynamic-load.mjs

@@ -0,0 +1,21 @@
+import ibv from './image-browser-view.mjs';
+import { FileSelectDialog as fsd } from './file-select-dialog.mjs'
+
+import ls from './load-styles.mjs'
+
+
+
+export let ImageBrowserView = ibv
+export let FileSelectDialog = fsd
+export let loadStyles = ls
+
+if(typeof window !== 'undefined') {
+	window['@webhandle/tree-file-browser'] = {
+		ImageBrowserView
+		, FileSelectDialog
+		, loadStyles
+	}
+}
+export default ImageBrowserView
+
+

package/client-lib/file-select-dialog.mjs

@@ -0,0 +1,70 @@
+import Dialog from 'ei-dialog'
+import ImageBrowserView from './image-browser-view.mjs'
+
+export class FileSelectDialog extends Dialog {
+	constructor(options) {
+		super(Object.assign({
+			title: 'Select A File'
+			, body: `<div class="webhandle-file-tree-image-browser" style="width: 87vw;"> </div>`
+			, afterOpen: function (bodyElement, dialog) {
+
+				let treeHolder = bodyElement.querySelector('.webhandle-file-tree-image-browser')
+				if (treeHolder) {
+					let options = {
+						sink: dialog.sink
+						, imagesOnly: dialog.imagesOnly
+						, eventNotificationPanel: dialog.eventNotificationPanel
+						, startingDirectory: dialog.startingDirectory
+						, deleteWithoutConfirm: dialog.deleteWithoutConfirm
+					}
+					
+					let imageBrowserView = this.imageBrowserView = new ImageBrowserView(options)
+					if(dialog._createAccessUrl) {
+						imageBrowserView._createAccessUrl = dialog._createAccessUrl
+					}
+					if(dialog._transformRelativeUrlToPublic) {
+						imageBrowserView._transformRelativeUrlToPublic = dialog._transformRelativeUrlToPublic
+					}
+					imageBrowserView.appendTo(treeHolder)
+					imageBrowserView.render()
+
+					imageBrowserView.emitter.on('select', async function (evt) {
+
+					})
+				}
+			}
+		}, options,
+			{
+				on: {
+					'.btn-ok': async () => {
+						let result = {
+							selection: this.imageBrowserView.getSelectedFiles()
+						}
+						result.url = await this.imageBrowserView.getSelectedUrl(result.selection)
+						this.resolve(result)
+
+						return true
+					},
+					'.mask': () => {
+						this.resolve()
+						return true
+					},
+					'.btn-cancel': () => {
+						this.resolve()
+						return true
+					}
+				}
+			}
+		))
+	}
+
+	async open() {
+		this.promise = new Promise((resolve, reject) => {
+			this.resolve = resolve
+			this.reject = reject
+		})
+		super.open()
+
+		return this.promise
+	}
+}

package/client-lib/form-answer-dialog.mjs

@@ -0,0 +1,65 @@
+import Dialog from 'ei-dialog'
+import formValueInjector from 'form-value-injector'
+import gatherFormData from '@webhandle/gather-form-data'
+
+
+export class FormAnswerDialog extends Dialog {
+	/**
+	 * 
+	 * @param {Object} options Properties to create the dialog box. In addition to the properties from Dialog
+	 * there those below.
+	 * @param {Object} options.data The data which will be used to populate the controls in the dialog
+	 */
+	constructor(options) {
+		super(Object.assign({}, options,
+			{
+				on: {
+					'.btn-ok': () => {
+						this.resolve(this.gatherData())
+						return true
+					},
+					'.mask': () => {
+						this.resolve()
+						return true
+					},
+					'.btn-cancel': () => {
+						this.resolve()
+						return true
+					}
+				}
+
+			}
+		))
+		if (this.afterOpen) {
+			this.afterOpenOriginal = this.afterOpen
+		}
+		this.afterOpen = function (bodyElement, self) {
+			if (this.data) {
+				bodyElement.innerHTML = formValueInjector(bodyElement.innerHTML, this.data)
+			}
+			let firstInput = bodyElement.querySelector('input, textarea')
+			if (firstInput) {
+				firstInput.focus()
+			}
+
+			if (this.afterOpenOriginal) {
+				this.afterOpenOriginal(bodyElement, self)
+			}
+		}
+	}
+	gatherData() {
+		let dialogBody = document.querySelector(this.getBodySelector())
+		return gatherFormData(dialogBody)
+	}
+
+	async open() {
+		this.promise = new Promise((resolve, reject) => {
+			this.resolve = resolve
+			this.reject = reject
+		})
+		super.open()
+
+		return this.promise
+	}
+
+}

package/client-lib/format-bytes.mjs

@@ -0,0 +1,10 @@
+
+export default function formatBytes(bytes, decimals) {
+	if (bytes == 0)
+		return '0 Bytes'
+	var k = 1024,
+		dm = decimals || 2,
+		sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+		i = Math.floor(Math.log(bytes) / Math.log(k))
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}

package/client-lib/get-extension-from-mime.mjs

@@ -0,0 +1,17 @@
+
+let types = {
+	"image/png": "png"
+	, "image/jpeg": "jpg"
+	, "image/jpg": "jpg"
+	, "image/webp": "webp"
+}
+
+
+export default function getExtension(mime) {
+	if (mime in types) {
+		return types[mime]
+	}
+
+	let ext = mime.split('/').pop()
+	return ext
+}

package/client-lib/get-file-image-stats.mjs

@@ -0,0 +1,17 @@
+import dataToImage from './data-to-image.mjs'
+import getImageStats from './get-image-stats.mjs'
+import getExtension from './get-extension-from-mime.mjs'
+
+/**
+ * 
+ * @param {File} file 
+ * @returns 
+ */
+export default async function getFileImageStats(file) {
+	let source = await dataToImage(file)
+	let stats = await getImageStats(source)
+	stats.ratio = stats.width / stats.height
+	stats.ext = getExtension(file.type)
+
+	return stats
+}

package/client-lib/get-image-stats.mjs

@@ -0,0 +1,11 @@
+import dataToImage from "./data-to-image.mjs";
+
+export default async function getImageStats(data) {
+	let img = await dataToImage(data)
+	return {
+		width: img.naturalWidth
+		, height: img.naturalHeight
+
+	}
+
+}

package/client-lib/image-browser-view-methods/create-directory.mjs

@@ -0,0 +1,23 @@
+import { FormAnswerDialog } from '../form-answer-dialog.mjs'
+
+export function createDirectory(evt, selected) {
+	let dialog = new FormAnswerDialog({
+		title: 'Create Directory'
+		, body: '<label>Directory name <input type="text" name="name" /></label>'
+	})
+	let prom = dialog.open()
+	prom.then(async data => {
+		if (data) {
+			let directoryPath = this.currentNode.file.relPath + '/' + data.name
+			await this.sink.mkdir(directoryPath)
+			let file = await this.sink.getFullFileInfo(directoryPath)
+			let node = this._fileToKalpaNode(file)
+			this.tree.options.stream.emit('data', node)
+			let cur = this.tree.selected()
+			if (cur) {
+				this.tree.expand(cur.id)
+			}
+		}
+	})
+
+}

package/client-lib/image-browser-view-methods/delete.mjs

@@ -0,0 +1,100 @@
+import { FormAnswerDialog } from '../form-answer-dialog.mjs'
+
+export async function deleteFile(evt, selected) {
+	let sel = this.getSelectedFiles()
+
+	if (sel.files.length > 0) {
+
+		let files = sel.files
+		let names = sel.names
+
+		if (!this.deleteWithoutConfirm) {
+			let dialog = new FormAnswerDialog({
+				title: 'Delete File' + (files.length > 1 ? 's' : '')
+				, body: '<p>' + names.join(', ') + '</p>'
+			})
+			let prom = dialog.open()
+			let ans = await prom
+			if (!ans) {
+				return
+			}
+		}
+
+		for (let file of files) {
+			let path = file.relPath
+			let note
+			if (this.eventNotificationPanel) {
+				note = this.eventNotificationPanel.addNotification({
+					model: {
+						status: 'pending',
+						headline: `deleting ${file.name}`
+					}
+				})
+			}
+			await this.sink.rm(path)
+			if (this.eventNotificationPanel) {
+				note.remove()
+				note = this.eventNotificationPanel.addNotification({
+					model: {
+						status: 'success',
+						headline: `removed ${file.name}`
+					}
+					, ttl: 2000
+				})
+			}
+		}
+		for (let item of sel.boxes) {
+			item.remove()
+		}
+	}
+	this.emitter.emit('delete', {
+		type: 'delete'
+		, selected: sel
+	})
+}
+
+export async function deleteDirectory(evt, selected) {
+	let path = this.currentNode.file.relPath
+	let name = this.currentNode.file.name
+
+	if (!path) {
+		// probably the root, just cancel
+		return
+	}
+
+	let dialog = new FormAnswerDialog({
+		title: 'Delete Directory'
+		, body: '<p>' + name + '</p>'
+	})
+	let prom = dialog.open()
+	let ans = await prom
+	if (!ans) {
+		return
+	}
+	let note
+	if (this.eventNotificationPanel) {
+		note = this.eventNotificationPanel.addNotification({
+			model: {
+				status: 'pending',
+				headline: `deleting ${name}`
+			}
+		})
+	}
+	await this.sink.rm(path, { recursive: true })
+	let curSelected = this.tree.selected()
+	let parent = this.tree.parent(curSelected)
+
+	this.tree.removeNode(curSelected)
+	this.tree.select(parent.id)
+
+	if (this.eventNotificationPanel) {
+		note.remove()
+		note = this.eventNotificationPanel.addNotification({
+			model: {
+				status: 'success',
+				headline: `removed ${name}`
+			}
+			, ttl: 2000
+		})
+	}
+}

package/client-lib/image-browser-view-methods/drag-and-drop.mjs

@@ -0,0 +1,57 @@
+
+export function getDropCoverSelector() {
+	return '.img-drop-cover'
+}
+
+export async function handleDrop(evt, selected) {
+	let uploadType = 'literal'
+	let dropSquare = evt.target.closest('.drop-type')
+	if (dropSquare) {
+		if (dropSquare.classList.contains('guided-upload')) {
+			uploadType = 'guided'
+		}
+		else if (dropSquare.classList.contains('automatic')) {
+			uploadType = 'automatic'
+		}
+	}
+
+	this._cleanupDropDone()
+	evt.preventDefault()
+	let files = await this._getFilesFromEvent(evt)
+	this.uploadFiles(files, { uploadType })
+}
+
+export function isFileTypeDrag(evt) {
+	let fileType = true
+	if (evt.dataTransfer) {
+		if (evt.dataTransfer.items[0].kind === 'string') {
+			fileType = false
+		}
+	}
+
+	return fileType
+}
+
+export function dragEnter(evt, selected) {
+	let overlay = this.isFileTypeDrag(evt)
+	if (overlay) {
+		this.overCount++
+		this.el.querySelector(this.getDropCoverSelector()).classList.add('file-dropping')
+	}
+}
+export function dragLeave(evt, selected) {
+	if (this.isFileTypeDrag(evt)) {
+		this.overCount--
+		if (this.overCount == 0) {
+			this._cleanupDropDone()
+		}
+	}
+}
+export function dragOver(evt, selected) {
+	evt.preventDefault()
+}
+
+export function _cleanupDropDone() {
+	this.overCount = 0;
+	[...this.el.querySelectorAll('.file-dropping')].forEach(cover => cover.classList.remove('file-dropping'))
+}