@webhandle/tree-file-browser 1.0.0

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

@@ -0,0 +1,227 @@
+import { View } from '@webhandle/backbone-view'
+import { imageBrowserFrame, variantChoiceBox } from '../views/load-browser-views.js'
+import KalpaTreeOnPage from 'kalpa-tree-on-page'
+import formatBytes from './format-bytes.mjs'
+
+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
+} 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 { 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 { _uploadGuidedImageFile, _uploadGuidedFile, _uploadAutomaticImageFile, uploadFiles, _uploadFileButton, _uploadFile } from './image-browser-view-methods/upload.mjs'
+import { _uploadData, findDirectories } from './image-browser-view-methods/sink.mjs'
+
+
+export default class ImageBrowserView extends View {
+	/**
+	 * 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
+	 */
+	constructor(options) {
+		super(options)
+	}
+	preinitialize() {
+		this.className = 'image-browser'
+		this.idInd = 1
+		this.nodes = {}
+		this.events = {
+			'click .create-directory': 'createDirectory'
+			, 'click .upload-file': '_uploadFileButton'
+			, 'change [name="fileUpload"]': '_uploadFile'
+			, 'click .delete-file': 'deleteFile'
+			, 'click .delete-directory': 'deleteDirectory'
+			, 'click .variant-choice-box .details': 'showVariantDetails'
+			, 'dblclick .variant-choice-box': 'showVariantDetails'
+			, 'click .variant-choice-box': 'selectVariant'
+			, 'click .view-icons button': 'changeFilesView'
+			, 'keyup [name="filter"]': 'applyFilter'
+			, 'change [name="filter"]': 'applyFilter'
+			, 'click .clear-filter': 'clearFilter'
+			, 'dragenter .': 'dragEnter'
+			, 'dragleave .': 'dragLeave'
+			, '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))
+	}
+	
+	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 = []
+
+		this.rootDirectory = await this.sink.getFullFileInfo('')
+		this.rootDirectory.name = "Files"
+		let rootNode = this.rootNode = this._fileToKalpaNode(this.rootDirectory)
+		this.data.push(rootNode)
+
+		let directories = await this.findDirectories()
+		this._sortFiles(directories)
+
+		this.data.push(...directories.map(this._fileToKalpaNode.bind(this)))
+		KalpaTreeOnPage({
+			treeContainerSelector: `#${this.id} .treebox`
+			, data: this.data
+		}).then(tree => {
+			this.tree = tree
+			tree.on('select', (node) => {
+				this.setCurrentNode(node)
+			})
+			tree.on('selected', (node) => {
+				// There's a bug, either in the browser or kalpa tree that causes it
+				// not to examine if a scroll bar is needed for the tree if the content
+				// area changes in a big way. Part of this bug may be that it's being
+				// used in a grid which has some weird width/height effects
+				// Anyway, we need to make sure the browser knows to examine the tree so
+				// we change the height then change it back.
+				// This event is triggered when kalpa-tree thinks it's done with transitions
+
+				let tree = this.el.querySelector('.tree')
+				tree.style.height = '99.99999%'
+				setTimeout(() => {
+					tree.style.height = '100%'
+				}, 100)
+			})
+			if (this.startingDirectory) {
+				for (let node of Object.values(this.tree.nodes)) {
+					if (node.file && node.file.relPath && node.file.relPath == this.startingDirectory) {
+						tree.select(node.id)
+						break
+					}
+				}
+			}
+			else {
+				tree.select(1)
+			}
+		})
+	}
+
+	async setCurrentNode(node) {
+		this.currentNode = node
+		let info = await this.sink.getFullFileInfo(node.file.relPath)
+		let variantValues = this.createVariantValues(info)
+
+
+		let content = ''
+		for (let child of variantValues) {
+			content += variantChoiceBox(child)
+		}
+
+
+		let choicesBoxes = this.el.querySelector('.choice-boxes')
+		choicesBoxes.innerHTML = ''
+		choicesBoxes.insertAdjacentHTML('beforeend', content)
+
+		for (let i = 0; i < choicesBoxes.children.length; i++) {
+			choicesBoxes.children[i].variant = variantValues[i]
+		}
+		this.el.querySelector('.box-holder').scrollTop = 0
+		this.applyFilter()
+	}
+
+	// uploads
+	_uploadGuidedImageFile = _uploadGuidedImageFile
+	_uploadGuidedFile = _uploadGuidedFile
+	_uploadAutomaticImageFile = _uploadAutomaticImageFile
+	uploadFiles = uploadFiles
+	_uploadFileButton = _uploadFileButton
+	_uploadFile = _uploadFile
+
+	// file-obj-manipulation
+	createVariantValues = createVariantValues
+	_getFilesFromEvent = _getFilesFromEvent
+	_getAssociatedRealFiles = _getAssociatedRealFiles
+	_createAccessUrl = _createAccessUrl
+	getSelectedFiles = getSelectedFiles
+	_transformRelativeUrlToPublic = _transformRelativeUrlToPublic
+	getSelectedUrl = getSelectedUrl
+
+	// create-directory 
+	createDirectory = createDirectory
+
+	// drag-and-drop
+	getDropCoverSelector = getDropCoverSelector
+	handleDrop = handleDrop
+	isFileTypeDrag = isFileTypeDrag
+	dragEnter = dragEnter
+	dragLeave = dragLeave
+	dragOver = dragOver
+	_cleanupDropDone = _cleanupDropDone
+
+	// view-interactions
+	changeFilesView = changeFilesView
+	applyFilter = applyFilter
+	clearFilter = clearFilter
+	selectVariant = selectVariant
+	showVariantDetails = showVariantDetails
+
+	// utils
+	sanitizeFileName = sanitizeFileName
+	_sortFiles = _sortFiles
+	_compareVariants = _compareVariants
+	_determineExtensions = _determineExtensions
+	_determineSizes = _determineSizes
+	_join = _join
+	_determineParentPath = _determineParentPath
+	_fileToKalpaNode = _fileToKalpaNode
+	_formatBytes = formatBytes
+	_isImageFile = _isImageFile
+
+	// delete
+	deleteFile = deleteFile
+	deleteDirectory = deleteDirectory
+
+	// sink
+	_uploadData = _uploadData
+	findDirectories = findDirectories
+
+}

package/client-lib/image-resize.mjs

@@ -0,0 +1,32 @@
+import dataToImage from "./data-to-image.mjs"
+
+/*image, base64 encoded data of image, blob, file, or arraybuffer */
+export default async function resizeImage(imageData,
+	{ maxWidth = 1920, quality = .7, outputFormat = "image/png" } = {}) {
+	return new Promise(async (resolve, reject) => {
+
+		try {
+			let resizeImg = await dataToImage(imageData)
+			let ratio = resizeImg.naturalWidth / maxWidth
+			let maxHeight = resizeImg.naturalHeight / ratio
+
+			var resizeCanvas = document.createElement('canvas');
+			resizeCanvas.width = maxWidth;
+			resizeCanvas.height = maxHeight;
+
+			var ctx = resizeCanvas.getContext('2d');
+			ctx.clearRect(0, 0, resizeCanvas.width, resizeCanvas.height);
+			ctx.drawImage(resizeImg, 0, 0, resizeCanvas.width, resizeCanvas.height);
+
+
+			resizeCanvas.toBlob((blob) => {
+				resolve(blob)
+			}, outputFormat, quality);
+		} catch (e) {
+			if (console && console.log) {
+				console.log('error resizing image: ' + e);
+			}
+			reject(e)
+		}
+	})
+}

package/client-lib/info-dialog.mjs

@@ -0,0 +1,36 @@
+import Dialog from 'ei-dialog'
+
+export class InfoDialog extends Dialog {
+	constructor(options) {
+		super(Object.assign({}, options,
+			{
+				on: {
+					'.btn-ok': () => {
+						this.resolve()
+						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/load-styles.mjs

@@ -0,0 +1,14 @@
+import areStylesLoaded from "./styles-loaded.mjs";
+import ensureIcons from '@dankolz/webhandle-admin-icons/client-js/ensure-styles-are-loaded.js'
+
+export default function loadStyles() {
+	if(!areStylesLoaded()) {
+		let link = document.createElement('link')
+		link.href = '/@webhandle/tree-file-browser/resources/css/tree-browser.css'
+		link.rel = 'stylesheet'
+		document.head.appendChild(link)
+		
+	}
+	ensureIcons()
+
+}

package/client-lib/make-image-set.mjs

@@ -0,0 +1,75 @@
+import resizeImage from '../client-lib/image-resize.mjs'
+import dataToImage from '../client-lib/data-to-image.mjs'
+import getImageStats from '../client-lib/get-image-stats.mjs'
+import getExtension from './get-extension-from-mime.mjs'
+
+let webpMime = 'image/webp'
+
+export default async function makeImageSet(data,
+	{ 
+		singleDensityWidth = null
+		, quality = .7
+		, outputFormat = "image/png"
+		, doubleDensityInput = true
+		, baseFileName 
+		, altText		
+	} = {}
+) {
+	let source = await dataToImage(data)
+	let stats = await getImageStats(source)
+	let ratio = stats.width / stats.height
+
+	if (!baseFileName) {
+		baseFileName = "" + (new Date().getTime())
+	}
+	if (!singleDensityWidth) {
+		if (doubleDensityInput) {
+			singleDensityWidth = stats.width / 2
+		}
+		else {
+			singleDensityWidth = stats.width
+		}
+	}
+	let doubleDensityWidth = singleDensityWidth * 2
+
+	let suffixes = {
+		'-2x': doubleDensityWidth
+		, '': singleDensityWidth
+		, '-half': Math.floor(singleDensityWidth / 2)
+		, '-quarter': Math.floor(singleDensityWidth / 4)
+	}
+
+	let files = {}
+
+	for (let key of Object.keys(suffixes)) {
+		let width = suffixes[key]
+		let data = await resizeImage(source, {
+			maxWidth: width
+			, quality: quality
+			, outputFormat: outputFormat
+		})
+		files[baseFileName + key + '.' + getExtension(outputFormat)] = data
+
+		data = await resizeImage(source, {
+			maxWidth: width
+			, quality: quality
+			, outputFormat: webpMime
+		})
+		files[baseFileName + key + '.' + getExtension(webpMime)] = data
+	}
+
+
+	let info = {
+		"name": baseFileName,
+		"size": doubleDensityWidth + "x" + (doubleDensityWidth / ratio),
+		"displaySize": singleDensityWidth + "x" + (singleDensityWidth / ratio),
+		"fallback": getExtension(outputFormat),
+		"altText": altText || baseFileName
+	}
+	
+	
+	files[baseFileName + '.json'] = JSON.stringify(info, null, '\t')
+
+	return files
+
+}

package/client-lib/name-parts.mjs

@@ -0,0 +1,24 @@
+import baseImageName from "./base-image-name.mjs"
+
+/**
+ * 
+ * @param {File,string} file 
+ */
+export default function nameParts(file) {
+	let name
+	if(typeof file === 'string') {
+		name = file
+	}
+	else if(file instanceof File) {
+		name = file.name
+	}
+	
+	let result = [baseImageName(name)]
+	
+	let parts = name.split('.')
+	if(parts.length > 1) {
+		result.push(parts.pop())
+	}
+	
+	return result
+}

package/client-lib/styles-loaded.mjs

@@ -0,0 +1,18 @@
+
+/**
+ * Returns true if the styles for the image browser have been loaded
+ */
+export default function areStylesLoaded() {
+	let d = document.createElement('div')
+	d.classList.add('webhandle-file-tree-image-browser-test')
+	
+	d.style.position = 'absolute'
+	d.style.left = '-10000px'
+	
+	
+	document.body.appendChild(d)
+	let color = window.getComputedStyle(d)['background-color'] 
+	d.remove()
+
+	return color === 'rgb(101, 105, 99)'
+}