@webhandle/tree-file-browser 1.0.0

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

@@ -0,0 +1,190 @@
+import condense from '@dankolz/webp-detection/lib/condense-image-variants.js'
+
+export function createVariantValues(info) {
+	let variants = condense(info.children)
+	let variantValues = Object.values(variants)
+
+	let used = []
+	for (let variant of variantValues) {
+		used.push(...this._getAssociatedRealFiles(variant).map(variant => variant.name))
+	}
+
+	let remainingChildren = info.children.filter(item => {
+		return !used.includes(item.name)
+	})
+		.filter(item => !item.directory)
+
+	// Add thumbnails
+	for (let child of variantValues) {
+		child.thumbnailIcon = 'image'
+		if (child.preview) {
+			child.thumbnail = this._createAccessUrl(child.preview.file)
+		}
+	}
+
+	if (!this.imagesOnly) {
+		for (let file of remainingChildren) {
+			let info = {
+				file: file
+				, thumbnailIcon: 'description'
+			}
+			let name = file.name
+			info.ext = name.substring(name.lastIndexOf('.') + 1)
+			info.baseName = name.substring(0, name.lastIndexOf('.'))
+			variantValues.push(info)
+		}
+	}
+
+
+	// Determine extensions
+	for (let item of variantValues) {
+		item.extensions = this._determineExtensions(item)
+		item.sizes = this._determineSizes(item)
+		if (item.sizes[0] == item.sizes[1]) {
+			item.size = this._formatBytes(item.sizes[0])
+		}
+		else {
+			item.size = this._formatBytes(item.sizes[0]) + ' - ' + this._formatBytes(item.sizes[1])
+		}
+	}
+
+	variantValues.sort(this._compareVariants)
+	return variantValues
+}
+
+export async function _getFilesFromEvent(evt) {
+	let files = []
+
+	// items is the new interface we should use if that's available
+	if (evt.dataTransfer.items) {
+		let foundItems = [];
+		[...evt.dataTransfer.items].forEach((item, i) => {
+			foundItems.push(item)
+		})
+		for (let item of foundItems) {
+			if (item.kind === "file") {
+				if (item.webkitGetAsEntry) {
+					let entry = item.webkitGetAsEntry()
+					if (entry) {
+						// if there's no entry, it's probably not a file, so we'll just ignore
+						if (entry.isDirectory) {
+							continue
+
+							// Evenually we'll want to handle directories too, but for now we'll just go
+							// on with the other items
+
+							// var dirReader = entry.createReader()
+							// dirReader.readEntries(function (entries) {
+							// 	console.log(entries)
+							// })
+						}
+						else {
+							files.push(item.getAsFile())
+						}
+
+					}
+				}
+				else {
+					files.push(item.getAsFile())
+				}
+			}
+			else if (item instanceof File) {
+				// Maybe from a file input element
+				files.push(item)
+			}
+		}
+	} else {
+		[...evt.dataTransfer.files].forEach((file, i) => {
+			files.push(file)
+		})
+	}
+	return files
+}
+
+export function _getAssociatedRealFiles(variant) {
+	let files = []
+	if (variant.variants) {
+		files.push(...variant.variants.map(variant => variant.file))
+	}
+	else {
+		files.push(variant.file)
+	}
+	if (variant.definitionFile) {
+		files.push(variant.definitionFile)
+	}
+
+	return files
+}
+
+export function _createAccessUrl(file) {
+	return file.accessUrl
+}
+
+
+export function getSelectedFiles() {
+	let result = {
+		boxes: []
+		, variants: []
+		, files: []
+		, names: []
+	}
+	let currentSelected = this.el.querySelectorAll('.choice-boxes .variant-choice-box.selected')
+	if (currentSelected.length > 0) {
+		for (let sel of currentSelected) {
+			result.boxes.push(sel)
+			result.variants.push(sel.variant)
+			result.files.push(...this._getAssociatedRealFiles(sel.variant))
+		}
+		let names = result.files.map(file => file.name)
+		result.names.push(...names)
+	}
+
+	return result
+}
+
+export function _transformRelativeUrlToPublic(url) {
+	if(url.startsWith('/') == false) {
+		url = '/' + url
+	}
+	return url	
+}
+
+export async function getSelectedUrl(selectedFiles) {
+	if(!selectedFiles) {
+		selectedFiles = this.getSelectedFiles()
+	}
+	
+	if(selectedFiles.variants.length == 0) {
+		return
+	}
+	
+	let variant = selectedFiles.variants[0]
+	let chosen
+	if(variant.primary) {
+		chosen = variant.primary.file
+	}
+	else {
+		chosen = variant.file
+	}
+	
+	let base = this._transformRelativeUrlToPublic(chosen.relPath)
+	
+	if(variant.definitionFile) {
+		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)
+			}
+		}
+		catch(e) {
+
+		}
+	}
+	
+	return base
+
+}

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

@@ -0,0 +1,20 @@
+
+export async function _uploadData(name, data) {
+	let path = this.currentNode.file.relPath + '/' + this.sanitizeFileName(name)
+	await this.sink.write(path, data)
+}
+
+export async function findDirectories() {
+	return new Promise((resolve, reject) => {
+		let results = []
+		let events = this.sink.find({
+			file: false
+		})
+		events.on('data', (item) => {
+			results.push(item)
+		})
+		events.on('done', () => {
+			resolve(results)
+		})
+	})
+}

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

@@ -0,0 +1,159 @@
+import { FormAnswerDialog } from '../form-answer-dialog.mjs'
+import baseImageName from '../base-image-name.mjs'
+import makeImageSet from '../make-image-set.mjs'
+import nameParts from '../name-parts.mjs'
+import getFileImageStats from '../get-file-image-stats.mjs'
+import { guidedImageUploadForm, guidedFileUploadForm } from '../../views/load-browser-views.js'
+
+
+export async function _uploadGuidedImageFile(file) {
+	let baseFileName = baseImageName(file)
+	let stats = await getFileImageStats(file)
+
+	let data = {
+		nativeName: file.name
+		, name: baseFileName
+		, outputFormat: file.type
+		, stats: stats
+		, width: Math.floor(stats.width / 2)
+	}
+
+
+	let dialog = new FormAnswerDialog({
+		title: 'Upload File'
+		, body: guidedImageUploadForm(data)
+		, data: data
+		, dialogFrameClass: 'webhandle-file-tree-image-browser'
+	})
+	let prom = dialog.open()
+	let result = await prom
+
+	if (result) {
+		let makeImageData = {
+			baseFileName: result.name
+			, outputFormat: result.outputFormat
+			, singleDensityWidth: parseInt(result.width)
+			, altText: result.altText
+		}
+
+		let note = this._addPending(file)
+		let files = await makeImageSet(file, makeImageData)
+
+		for (let fileName of Object.keys(files)) {
+			await this._uploadData(fileName, files[fileName])
+		}
+
+		if (note) {
+			note.remove()
+		}
+		return true
+	}
+}
+
+export async function _uploadGuidedFile(file) {
+	let parts = nameParts(file)
+
+	let data = {
+		nativeName: file.name
+		, name: parts.join('.')
+	}
+
+
+	let dialog = new FormAnswerDialog({
+		title: 'Upload File'
+		, body: guidedFileUploadForm(data)
+		, data: data
+		, dialogFrameClass: 'webhandle-file-tree-image-browser'
+	})
+	let prom = dialog.open()
+	let result = await prom
+
+	if (result) {
+		let note = this._addPending(file)
+
+		await this._uploadData(result.name, file)
+
+		if (note) {
+			note.remove()
+		}
+		return true
+	}
+}
+
+export async function _uploadAutomaticImageFile(file) {
+	let note = this._addPending(file)
+	let parts = nameParts(file)
+	let baseFileName = parts[0]
+
+	let files = await makeImageSet(file, {
+		baseFileName: baseFileName,
+		outputFormat: file.type
+	})
+
+	for (let fileName of Object.keys(files)) {
+		await this._uploadData(fileName, files[fileName])
+	}
+
+	if (note) {
+		note.remove()
+	}
+	return true
+}
+
+export async function uploadFiles(files, { uploadType } = {}) {
+	for (let file of files) {
+
+		let uploaded = false
+		if (uploadType === 'guided' && this._isImageFile(file)) {
+			uploaded = await this._uploadGuidedImageFile(file)
+		}
+		else if (uploadType === 'guided') {
+			uploaded = await this._uploadGuidedFile(file)
+		}
+		else if (uploadType === 'automatic' && this._isImageFile(file)) {
+			uploaded = await this._uploadAutomaticImageFile(file)
+		}
+		else {
+			let note = this._addPending(file)
+			if (uploadType === 'automatic') {
+				let parts = nameParts(file)
+				await this._uploadData(parts.join('.'), file)
+			}
+			else {
+				await this._uploadData(file.name, file)
+			}
+			if (note) {
+				note.remove()
+			}
+			uploaded = true
+		}
+		if (this.eventNotificationPanel && uploaded) {
+			this.eventNotificationPanel.addNotification({
+				model: {
+					status: 'success',
+					headline: `uploaded ${file.name}`
+				}
+				, ttl: 2000
+			})
+		}
+	}
+	this.setCurrentNode(this.currentNode)
+}
+
+
+export function _uploadFileButton(evt, selected) {
+	this.el.querySelector(this.fileUploadSelector).click()
+}
+
+export async function _uploadFile(evt, selected) {
+	evt.preventDefault()
+	let input = this.el.querySelector(this.fileUploadSelector)
+	evt.dataTransfer = {
+		files: input.files
+	}
+	let files = await this._getFilesFromEvent(evt)
+	if(files.length > 0) {
+		this.uploadFiles(files, { uploadType: 'guided' })
+		input.value = ''
+	}
+}

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

@@ -0,0 +1,108 @@
+
+export function _join(...parts) {
+	parts = parts.filter(part => !!part)
+	let path = parts.join('/')
+	return path
+}
+
+export function _determineParentPath(path) {
+	if(!path) {
+		return ''
+	}
+	let parts = path.split('/')
+	parts.pop()
+	return parts.join('/')
+}
+
+export function _fileToKalpaNode(file) {
+	let node = {
+		id: this.idInd++
+		, label: file.name
+		, directory: file.directory
+		, file: file
+		, loaded: false
+	}
+
+	let parent = this.nodes[this._determineParentPath(file.relPath)]
+	this.nodes[file.relPath] = node
+
+	if (parent) {
+		node.parentId = parent.id
+		node.path = file.relPath
+	}
+
+	file.path = node.path
+	return node
+}
+
+export function _determineExtensions(variant) {
+	let extensions = new Set()
+	if (variant.variants) {
+		for (let imgVariant of variant.variants) {
+			extensions.add(imgVariant.ext)
+		}
+	}
+	else {
+		extensions.add(variant.ext)
+	}
+
+	let result = Array.from(extensions).filter(item => !!item)
+	result.sort((a, b) => {
+		return a.toLowerCase().localeCompare(b.toLowerCase())
+	})
+
+	return result
+}
+
+export function _determineSizes(variant) {
+	let min = 2000000000
+	let max = 0
+	if (variant.variants) {
+		for (let imgVariant of variant.variants) {
+			let size = imgVariant.file.stat.size
+			if (size > max) {
+				max = size
+			}
+			if (size < min) {
+				min = size
+			}
+		}
+	}
+	else {
+		let size = variant.file.stat.size
+		if (size > max) {
+			max = size
+		}
+		if (size < min) {
+			min = size
+		}
+	}
+	return [min, max]
+}
+
+export function _sortFiles(files) {
+	files.sort((one, two) => {
+		return one.relPath.toLowerCase().localeCompare(two.relPath.toLowerCase())
+	})
+
+	return files
+}
+
+export function _compareVariants(one, two) {
+	return one.baseName.toLowerCase().localeCompare(two.baseName.toLowerCase())
+}
+
+export function sanitizeFileName(name) {
+	return name.split('/').join('-').split('..').join('-')
+}
+
+
+export function _isImageFile(file) {
+	if (!file.type.startsWith('image')) {
+		return false
+	}
+	if (file.type.includes('jpeg') || file.type.includes('png') || file.type.includes('webp')) {
+		return true
+	}
+	return false
+}

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

@@ -0,0 +1,96 @@
+import { InfoDialog } from '../info-dialog.mjs'
+
+export function changeFilesView(evt, selected) {
+	let choiceBoxes = this.el.querySelector('.choice-boxes')
+	let classes = [...selected.closest('.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'))
+}
+
+export function applyFilter(evt, selected) {
+	setTimeout(() => {
+		let value = this.el.querySelector('[name="filter"]').value
+		let allVariants = this.el.querySelectorAll('.choice-boxes .variant-choice-box')
+		for (let variant of allVariants) {
+			variant.classList.remove('hidden')
+			if (value) {
+				let searchString = variant.variant.baseName + variant.variant.extensions.join()
+				if (searchString.indexOf(value) < 0) {
+					variant.classList.add('hidden')
+				}
+			}
+		}
+	})
+}
+
+export function clearFilter(evt, selected) {
+	this.el.querySelector('[name="filter"]').value = ''
+	this.applyFilter()
+}
+
+export function selectVariant(evt, selected) {
+	let currentSelected = this.el.querySelectorAll('.choice-boxes .variant-choice-box.selected')
+	if (!evt.ctrlKey && !evt.shiftKey) {
+		for (let sel of currentSelected) {
+			sel.classList.remove('selected')
+		}
+	}
+
+	if (evt.shiftKey) {
+		let cur = selected
+		do {
+			if (cur.classList.contains('selected')) {
+				break
+			}
+			cur.classList.add('selected')
+			cur = cur.previousElementSibling
+		}
+		while (cur);
+	}
+	else {
+		selected.classList.toggle('selected')
+	}
+
+
+	let sel = this.getSelectedFiles()
+	this.emitter.emit('select', {
+		type: 'select'
+		, selected: sel
+	})
+}
+
+
+
+export function showVariantDetails(evt, selected) {
+	let choiceBox = selected.closest('.variant-choice-box')
+	let variant = choiceBox.variant
+
+	let files = this._getAssociatedRealFiles(variant)
+
+	let content = '<ul>'
+	for (let file of files) {
+		content += '<li><a target="_blank" href="' + file.accessUrl + '">'
+		content += file.name + '</a> - ' + this._formatBytes(file.stat.size)
+		content += '</li>'
+	}
+	content += '</ul>'
+
+	let dialog = new InfoDialog({
+		title: 'File Details: ' + variant.baseName
+		, body: content
+		, buttons: [
+			{
+				classes: 'btn btn-primary btn-ok',
+				label: 'OK'
+			}
+		]
+	})
+	let prom = dialog.open()
+	prom.then(async data => {
+		if (data) {
+		}
+	})
+
+}