@webhandle/tree-file-browser 1.0.0 → 1.0.2

package/client-lib/add-soft-breaks.mjs

@@ -0,0 +1,25 @@
+
+function breakOnChars(chrs, txt) {
+	for (let c of chrs) {
+		txt = txt.split(c).join('<wbr>' + c)
+	}
+	return txt
+}
+
+export default function addSoftBreaks(txt) {
+	if(!txt || typeof txt !== 'string') {
+		return txt
+	}
+	
+	let chars = [...txt]
+	txt = ''
+	for(let i = 0; i < chars.length; i++) {
+		txt += chars[i]
+		if(i % 10 === 0) {
+			txt += '<wbr>'
+		}
+	}
+	txt = breakOnChars(['_'], txt)
+
+	return txt
+}

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

@@ -1,6 +1,13 @@
 import Dialog from 'ei-dialog'
 import ImageBrowserView from './image-browser-view.mjs'
 
+/**
+ * Selects a file.
+ * @param {Object} [options]
+ * @param {string} [options.title] The dialog box title
+ * @param {boolean} [options.chooseOnUpload] If true, uploading a file causes the dialog to close and the URL of uploaded
+ * file to be returned
+ */
 export class FileSelectDialog extends Dialog {
 	constructor(options) {
 		super(Object.assign({
@@ -31,8 +38,17 @@ export class FileSelectDialog extends Dialog {
 					imageBrowserView.emitter.on('select', async function (evt) {
 
 					})
+					imageBrowserView.emitter.on('upload', async function (evt) {
+						if(dialog.chooseOnUpload) {
+							dialog.close()
+							dialog.resolve({
+								url: evt.accessUrls[0]
+							})
+						}
+					})
 				}
 			}
+			, chooseOnUpload: true
 		}, options,
 			{
 				on: {

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

@@ -54,4 +54,14 @@ export function dragOver(evt, selected) {
 export function _cleanupDropDone() {
 	this.overCount = 0;
 	[...this.el.querySelectorAll('.file-dropping')].forEach(cover => cover.classList.remove('file-dropping'))
+}
+
+export async function handlePaste(evt) {
+	if (this.ignoreGlobalEvents) {
+		return
+	}
+	evt.preventDefault()
+	if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length > 0) {
+		this.uploadFiles(evt.clipboardData.files, { uploadType: 'guided' })
+	}
 }

package/client-lib/image-browser-view-methods/file-obj-manipulation.mjs

@@ -1,4 +1,6 @@
 import condense from '@dankolz/webp-detection/lib/condense-image-variants.js'
+import escapeHtmlAttributeValue from '@dankolz/escape-html-attribute-value'
+import addSoftBreaks from '../add-soft-breaks.mjs'
 
 export function createVariantValues(info) {
 	let variants = condense(info.children)
@@ -19,6 +21,7 @@ export function createVariantValues(info) {
 		child.thumbnailIcon = 'image'
 		if (child.preview) {
 			child.thumbnail = this._createAccessUrl(child.preview.file)
+			child.safeThumbnail = escapeHtmlAttributeValue(child.thumbnail)
 		}
 	}
 
@@ -36,7 +39,7 @@ export function createVariantValues(info) {
 	}
 
 
-	// Determine extensions
+	// Determine extensions, add additional top level info (safeBaseName)
 	for (let item of variantValues) {
 		item.extensions = this._determineExtensions(item)
 		item.sizes = this._determineSizes(item)
@@ -46,6 +49,7 @@ export function createVariantValues(info) {
 		else {
 			item.size = this._formatBytes(item.sizes[0]) + ' - ' + this._formatBytes(item.sizes[1])
 		}
+		item.safeBaseName = addSoftBreaks(escapeHtmlAttributeValue(item.baseName))
 	}
 
 	variantValues.sort(this._compareVariants)
@@ -117,7 +121,18 @@ export function _getAssociatedRealFiles(variant) {
 }
 
 export function _createAccessUrl(file) {
-	return file.accessUrl
+	return this.escapeAccessUrl(file.accessUrl)
+}
+
+function urlEscapeChars(chrs, url) {
+	for (let c of chrs) {
+		url = url.split(c).join(encodeURIComponent(c))
+	}
+	return url
+}
+
+export function escapeAccessUrl(url) {
+	return urlEscapeChars(['%', ' ', '#', '?',  '<', '>', '$', '@', '^', '&'], url)
 }
 
 
@@ -173,12 +188,7 @@ export async function getSelectedUrl(selectedFiles) {
 		let defData = await this.sink.read(variant.definitionFile.relPath)
 		try {
 			let data = JSON.parse(defData)
-			let sizes = data.displaySize.split('x')
-			base += `#format=webp2x&width=${sizes[0]}&height=${sizes[1]}`
-			
-			if(data.altText) {
-				base += '&alt=' + encodeURIComponent(data.altText)
-			}
+			base += this.getSelectedUrlExtFromMeta(data)
 		}
 		catch(e) {
 
@@ -187,4 +197,16 @@ export async function getSelectedUrl(selectedFiles) {
 	
 	return base
 
-}
+}
+
+export function getSelectedUrlExtFromMeta(data) {
+	let url = ''
+	let sizes = data.displaySize.split('x')
+	url += `#format=webp2x&width=${sizes[0]}&height=${sizes[1]}`
+	
+	if(data.altText) {
+		url += '&alt=' + encodeURIComponent(data.altText)
+	}
+	
+	return url
+}

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

@@ -2,6 +2,7 @@
 export async function _uploadData(name, data) {
 	let path = this.currentNode.file.relPath + '/' + this.sanitizeFileName(name)
 	await this.sink.write(path, data)
+	return path
 }
 
 export async function findDirectories() {

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

@@ -33,20 +33,32 @@ export async function _uploadGuidedImageFile(file) {
 			baseFileName: result.name
 			, outputFormat: result.outputFormat
 			, singleDensityWidth: parseInt(result.width)
+			, quality: parseFloat(result.quality)
 			, altText: result.altText
 		}
 
 		let note = this._addPending(file)
 		let files = await makeImageSet(file, makeImageData)
+		let meta = JSON.parse(files[baseFileName + '.json'])
 
+		let mainUrl
 		for (let fileName of Object.keys(files)) {
-			await this._uploadData(fileName, files[fileName])
+			let path = await this._uploadData(fileName, files[fileName])
+			if(fileName === meta.name + '.' + meta.fallback) {
+				mainUrl = path
+			}
 		}
 
+		let base = this._transformRelativeUrlToPublic(mainUrl)
+		
+		let ext = this.getSelectedUrlExtFromMeta(meta)
+		base += ext
+
 		if (note) {
 			note.remove()
 		}
-		return true
+
+		return base
 	}
 }
 
@@ -71,12 +83,13 @@ export async function _uploadGuidedFile(file) {
 	if (result) {
 		let note = this._addPending(file)
 
-		await this._uploadData(result.name, file)
+		let mainUrl = await this._uploadData(result.name, file)
+		let base = this._transformRelativeUrlToPublic(mainUrl)
 
 		if (note) {
 			note.remove()
 		}
-		return true
+		return base
 	}
 }
 
@@ -89,18 +102,27 @@ export async function _uploadAutomaticImageFile(file) {
 		baseFileName: baseFileName,
 		outputFormat: file.type
 	})
+	let meta = JSON.parse(files[baseFileName + '.json'])
 
+	let mainUrl
 	for (let fileName of Object.keys(files)) {
-		await this._uploadData(fileName, files[fileName])
+		let path = await this._uploadData(fileName, files[fileName])
+		if(fileName === meta.name + '.' + meta.fallback) {
+			mainUrl = path
+		}
 	}
+	let base = this._transformRelativeUrlToPublic(mainUrl)
+	let ext = this.getSelectedUrlExtFromMeta(meta)
+	base += ext
 
 	if (note) {
 		note.remove()
 	}
-	return true
+	return base
 }
 
 export async function uploadFiles(files, { uploadType } = {}) {
+	let uploadedAccessUrls = []
 	for (let file of files) {
 
 		let uploaded = false
@@ -115,17 +137,19 @@ export async function uploadFiles(files, { uploadType } = {}) {
 		}
 		else {
 			let note = this._addPending(file)
+			let path
 			if (uploadType === 'automatic') {
 				let parts = nameParts(file)
-				await this._uploadData(parts.join('.'), file)
+				path = await this._uploadData(parts.join('.'), file)
 			}
 			else {
-				await this._uploadData(file.name, file)
+				path = await this._uploadData(file.name, file)
 			}
+			uploaded = this._transformRelativeUrlToPublic(path)
+			
 			if (note) {
 				note.remove()
 			}
-			uploaded = true
 		}
 		if (this.eventNotificationPanel && uploaded) {
 			this.eventNotificationPanel.addNotification({
@@ -136,8 +160,14 @@ export async function uploadFiles(files, { uploadType } = {}) {
 				, ttl: 2000
 			})
 		}
+		uploadedAccessUrls.push(uploaded)
 	}
 	this.setCurrentNode(this.currentNode)
+	this.emitter.emit('upload', {
+		type: 'upload'
+		, accessUrls: uploadedAccessUrls
+	})
+	return uploadedAccessUrls
 }
 
 
@@ -153,7 +183,8 @@ export async function _uploadFile(evt, selected) {
 	}
 	let files = await this._getFilesFromEvent(evt)
 	if(files.length > 0) {
-		this.uploadFiles(files, { uploadType: 'guided' })
+		let result = this.uploadFiles(files, { uploadType: 'guided' })
 		input.value = ''
+		return result
 	}
 }

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

@@ -106,3 +106,22 @@ export function _isImageFile(file) {
 	}
 	return false
 }
+
+export function setIfNotSet(key, value) {
+	if (!(key in this)) {
+		this[key] = value
+	}
+}
+
+export function _addPending(file) {
+	let note
+	if (this.eventNotificationPanel) {
+		note = this.eventNotificationPanel.addNotification({
+			model: {
+				status: 'pending',
+				headline: `uploading ${file.name}`
+			}
+		})
+	}
+	return note
+}

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

@@ -1,12 +1,18 @@
 import { InfoDialog } from '../info-dialog.mjs'
+import escapeHtmlAttributeValue from '@dankolz/escape-html-attribute-value'
 
 export function changeFilesView(evt, selected) {
+	let className = selected.getAttribute('data-show-class')
+	this.changeFilesViewToClass(className)
+}
+
+export function changeFilesViewToClass(className) {
 	let choiceBoxes = this.el.querySelector('.choice-boxes')
-	let classes = [...selected.closest('.view-icons').querySelectorAll('button')].map(button => button.getAttribute('data-show-class'))
+	let classes = [...this.el.querySelector('.view-icons').querySelectorAll('button')].map(button => button.getAttribute('data-show-class'))
 	classes.forEach(item => {
 		choiceBoxes.classList.remove(item)
 	})
-	choiceBoxes.classList.add(selected.getAttribute('data-show-class'))
+	choiceBoxes.classList.add(className)
 }
 
 export function applyFilter(evt, selected) {
@@ -16,12 +22,14 @@ export function applyFilter(evt, selected) {
 		for (let variant of allVariants) {
 			variant.classList.remove('hidden')
 			if (value) {
-				let searchString = variant.variant.baseName + variant.variant.extensions.join()
+				value = value.toLowerCase()
+				let searchString = variant.variant.baseName.toLowerCase() + variant.variant.extensions.map(ext => ext.toLowerCase()).join()
 				if (searchString.indexOf(value) < 0) {
 					variant.classList.add('hidden')
 				}
 			}
 		}
+		this.setFolderInfo()
 	})
 }
 
@@ -69,14 +77,23 @@ export function showVariantDetails(evt, selected) {
 
 	let files = this._getAssociatedRealFiles(variant)
 
-	let content = '<ul>'
+	let content = '<div class="variant-details-information">'
+	if (variant.safeThumbnail) {
+		content += `<div class="details-preview-image">
+		<img loading="lazy" src="${variant.safeThumbnail}" />
+		</div>`
+	}
+
+	content += '<ul class="variants">'
 	for (let file of files) {
-		content += '<li><a target="_blank" href="' + file.accessUrl + '">'
-		content += file.name + '</a> - ' + this._formatBytes(file.stat.size)
+		content += '<li><a target="_blank" href="' + escapeHtmlAttributeValue(this.escapeAccessUrl(file.accessUrl)) + '">'
+		content += escapeHtmlAttributeValue(file.name) + '</a> - ' + this._formatBytes(file.stat.size)
 		content += '</li>'
 	}
 	content += '</ul>'
 
+	content += '</div>'
+
 	let dialog = new InfoDialog({
 		title: 'File Details: ' + variant.baseName
 		, body: content
@@ -92,5 +109,46 @@ export function showVariantDetails(evt, selected) {
 		if (data) {
 		}
 	})
+}
+
+export function setFolderInfo() {
+	let fileCount = 0
+	let variantCount = 0
+	let byteCount = 0
+	let nonImages = 0
+	let allVariants = this.el.querySelectorAll('.choice-boxes .variant-choice-box')
+	for (let variant of allVariants) {
+		if (variant.classList.contains('hidden')) {
+			continue
+		}
+		variantCount++
+
+		if (variant.variant.variants) {
+			variant.variant.variants.forEach(variant => {
+				fileCount++
+				byteCount += variant.file.stat.size
+			})
 
-}
+		}
+		else {
+			fileCount++
+			byteCount += variant.variant.file.stat.size
+			nonImages++
+		}
+	}
+	this.el.querySelector('.folder-info').innerHTML = `${variantCount} items / ${fileCount} files / ${this._formatBytes(byteCount)} `
+	if (variantCount > this.listTriggerSize) {
+		this.changeFilesViewToClass('list-text')
+	}
+	this.el.querySelector('.view-icons').classList.remove('no-img')
+	if (variantCount - nonImages > this.listLockSize) {
+		this.el.querySelector('.view-icons').classList.add('no-img')
+	}
+}
+
+export function cleanFileInfo() {
+	this.el.querySelector('.folder-info').innerHTML = ''
+	let choicesBoxes = this.el.querySelector('.choice-boxes')
+	choicesBoxes.innerHTML = '<div class="loading-info">Loading Information Now</div>'
+	this.el.querySelector('.view-icons').classList.add('no-img')
+}

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

@@ -8,14 +8,14 @@ import Emitter from '@webhandle/minimal-browser-event-emitter'
 // method imports
 import { deleteFile, deleteDirectory } from './image-browser-view-methods/delete.mjs'
 import {
-	_join, _determineParentPath, _fileToKalpaNode, _determineExtensions,
-	_determineSizes, _sortFiles, _compareVariants, sanitizeFileName, _isImageFile
+	_join, _determineParentPath, _fileToKalpaNode, _determineExtensions, _addPending,
+	_determineSizes, _sortFiles, _compareVariants, sanitizeFileName, _isImageFile, setIfNotSet
 } from './image-browser-view-methods/utils.mjs'
-import { changeFilesView, applyFilter, clearFilter, selectVariant, showVariantDetails } from './image-browser-view-methods/view-interactions.mjs'
-import { getDropCoverSelector, handleDrop, isFileTypeDrag, dragEnter, dragLeave, dragOver, _cleanupDropDone } from './image-browser-view-methods/drag-and-drop.mjs'
+import { changeFilesView, changeFilesViewToClass, applyFilter, clearFilter, selectVariant, showVariantDetails, setFolderInfo, cleanFileInfo } from './image-browser-view-methods/view-interactions.mjs'
+import { getDropCoverSelector, handleDrop, isFileTypeDrag, dragEnter, dragLeave, dragOver, _cleanupDropDone, handlePaste } from './image-browser-view-methods/drag-and-drop.mjs'
 import { createDirectory } from './image-browser-view-methods/create-directory.mjs'
-import { createVariantValues, _getFilesFromEvent, _getAssociatedRealFiles, _createAccessUrl, 
-	getSelectedFiles, _transformRelativeUrlToPublic, getSelectedUrl } from './image-browser-view-methods/file-obj-manipulation.mjs'
+import { createVariantValues, _getFilesFromEvent, _getAssociatedRealFiles, _createAccessUrl, escapeAccessUrl,
+	getSelectedFiles, _transformRelativeUrlToPublic, getSelectedUrl, getSelectedUrlExtFromMeta } from './image-browser-view-methods/file-obj-manipulation.mjs'
 import { _uploadGuidedImageFile, _uploadGuidedFile, _uploadAutomaticImageFile, uploadFiles, _uploadFileButton, _uploadFile } from './image-browser-view-methods/upload.mjs'
 import { _uploadData, findDirectories } from './image-browser-view-methods/sink.mjs'
 
@@ -33,10 +33,18 @@ export default class ImageBrowserView extends View {
 	 * @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
+	 * @param {int} [options.listTriggerSize] If the number of items are over this limit, they are shown as a plain list by default
+	 * @param {int} [options.listLockSize] If the number of items are over this limit, they can't use anyting other than the plain list
 	 */
 	constructor(options) {
 		super(options)
+		this.setIfNotSet('overCount', 0)
+		this.setIfNotSet('emitter', new Emitter())
+		this.setIfNotSet('fileUploadSelector', 'input[name="fileUpload"]')
+		this.setIfNotSet('listTriggerSize', 100)
+		this.setIfNotSet('listLockSize', 200)
 	}
+
 	preinitialize() {
 		this.className = 'image-browser'
 		this.idInd = 1
@@ -59,42 +67,11 @@ export default class ImageBrowserView extends View {
 			, 'dragover .': 'dragOver'
 			, 'drop .': 'handleDrop'
 		}
-		this.overCount = 0
-
-		if (!this.emitter) {
-			this.emitter = new Emitter()
-		}
-		
-		this.fileUploadSelector = 'input[name="fileUpload"]'
-		
-		
-		document.addEventListener('paste', this.handlePaste.bind(this))
+		document.addEventListener('paste', handlePaste.bind(this))
 	}
 	
-	async handlePaste(evt) {
-		if(this.ignoreGlobalEvents) {
-			return
-		}
-		evt.preventDefault()
-		if(evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length > 0) {
-			this.uploadFiles(evt.clipboardData.files, { uploadType: 'guided' })
-		}
-	}
 	
 
-	_addPending(file) {
-		let note
-		if (this.eventNotificationPanel) {
-			note = this.eventNotificationPanel.addNotification({
-				model: {
-					status: 'pending',
-					headline: `uploading ${file.name}`
-				}
-			})
-		}
-		return note
-	}
-
 	async render() {
 		this.el.innerHTML = imageBrowserFrame(this.model)
 		this.data = []
@@ -147,17 +124,22 @@ export default class ImageBrowserView extends View {
 
 	async setCurrentNode(node) {
 		this.currentNode = node
+		this.cleanFileInfo()
+		let choicesBoxes = this.el.querySelector('.choice-boxes')
 		let info = await this.sink.getFullFileInfo(node.file.relPath)
 		let variantValues = this.createVariantValues(info)
 
 
+		if(variantValues.length > this.listTriggerSize) {
+			this.changeFilesViewToClass('list-text')
+		}	
+
 		let content = ''
 		for (let child of variantValues) {
 			content += variantChoiceBox(child)
 		}
 
 
-		let choicesBoxes = this.el.querySelector('.choice-boxes')
 		choicesBoxes.innerHTML = ''
 		choicesBoxes.insertAdjacentHTML('beforeend', content)
 
@@ -181,9 +163,11 @@ export default class ImageBrowserView extends View {
 	_getFilesFromEvent = _getFilesFromEvent
 	_getAssociatedRealFiles = _getAssociatedRealFiles
 	_createAccessUrl = _createAccessUrl
+	escapeAccessUrl = escapeAccessUrl
 	getSelectedFiles = getSelectedFiles
 	_transformRelativeUrlToPublic = _transformRelativeUrlToPublic
 	getSelectedUrl = getSelectedUrl
+	getSelectedUrlExtFromMeta = getSelectedUrlExtFromMeta
 
 	// create-directory 
 	createDirectory = createDirectory
@@ -195,14 +179,18 @@ export default class ImageBrowserView extends View {
 	dragEnter = dragEnter
 	dragLeave = dragLeave
 	dragOver = dragOver
+	handlePaste = handlePaste
 	_cleanupDropDone = _cleanupDropDone
 
 	// view-interactions
 	changeFilesView = changeFilesView
+	changeFilesViewToClass = changeFilesViewToClass
 	applyFilter = applyFilter
 	clearFilter = clearFilter
 	selectVariant = selectVariant
 	showVariantDetails = showVariantDetails
+	setFolderInfo = setFolderInfo
+	cleanFileInfo = cleanFileInfo
 
 	// utils
 	sanitizeFileName = sanitizeFileName
@@ -215,6 +203,8 @@ export default class ImageBrowserView extends View {
 	_fileToKalpaNode = _fileToKalpaNode
 	_formatBytes = formatBytes
 	_isImageFile = _isImageFile
+	setIfNotSet = setIfNotSet
+	_addPending = _addPending
 
 	// delete
 	deleteFile = deleteFile

package/less/components.less

@@ -109,6 +109,14 @@
 				}
 			}
 		}
+		
+		.view-icons {
+			&.no-img {
+				.show-large-tiles, .show-small-tiles, .show-list-rows {
+					display: none;
+				}
+			}
+		}
 
 		
 		.node-content {
@@ -181,6 +189,13 @@
 					}
 				}
 			}
+			
+			.loading-info {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
 		}
 		
 		.variant-choice-box {
@@ -355,3 +370,17 @@
 	
 }
 
+.variant-details-information {
+	.details-preview-image {
+		img {
+			display: block;
+			margin: auto;
+			max-width: 300px;
+		}
+	}
+	.variants {
+		list-style: none;
+		padding: 10px 0;
+		margin: 0;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webhandle/tree-file-browser",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "",
 	"main": "client-lib/image-browser-view.mjs",
 	"scripts": {

package/public/tree-file-browser/resources/css/tree-browser.css

@@ -86,6 +86,11 @@
 .webhandle-file-tree-image-browser .image-browser .image-browser-frame > .directory-side .directory-controls {
   background-color: #393C40;
 }
+.webhandle-file-tree-image-browser .image-browser .view-icons.no-img .show-large-tiles,
+.webhandle-file-tree-image-browser .image-browser .view-icons.no-img .show-small-tiles,
+.webhandle-file-tree-image-browser .image-browser .view-icons.no-img .show-list-rows {
+  display: none;
+}
 .webhandle-file-tree-image-browser .image-browser .node-content {
   position: relative;
 }
@@ -256,6 +261,12 @@
 .webhandle-file-tree-image-browser .image-browser .choice-boxes.list-text .img .thumbnail-icon {
   font-size: 0;
 }
+.webhandle-file-tree-image-browser .image-browser .choice-boxes .loading-info {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 .webhandle-file-tree-image-browser .image-browser .variant-choice-box {
   padding: 10px;
   border-radius: 5px;
@@ -391,4 +402,14 @@
   left: -10000px;
   top: 0;
 }
+.variant-details-information .details-preview-image img {
+  display: block;
+  margin: auto;
+  max-width: 300px;
+}
+.variant-details-information .variants {
+  list-style: none;
+  padding: 10px 0;
+  margin: 0;
+}
 /*# sourceMappingURL=tree-browser.css.map */