clipboard.ts

type PermissionName = "geolocation" | "notifications" | "persistent-storage" | "push" | "screen-wake-lock" | "xr-spatial-tracking" | "clipboard-write" | "clipboard-read";

interface MyPermissionDescriptor {
	name: PermissionName;
}

export class clipboard {
	mode: 'navigator' | 'fallback' | 'notSupport' = 'navigator';
	timeLimit: number                             = 100;
	response?: string;
	permissionWrite: boolean                      = false;
	permissionRead: boolean                       = false;

	constructor() {
		if (Object.hasOwnProperty.call(window, 'navigator') && navigator.clipboard !== undefined) {
			this.mode = 'navigator'
		} else if (typeof document.queryCommandSupported === 'function') {
			this.mode = 'fallback'
		} else {
			this.mode = 'notSupport'
		}
	}


	private async __fallback_write(data = '') {
		const textArea = document.createElement('textarea')
		textArea.value = data

		// Avoid scrolling to bottom
		textArea.style.top      = '0'
		textArea.style.left     = '0'
		textArea.style.position = 'fixed'
		textArea.style.opacity  = '1'

		document.body.appendChild(textArea)
		textArea.focus()
		textArea.select()

		try {
			const successful = document.execCommand('copy')
			this.response    = successful ? data : undefined
		} catch (e) {
			console.warn(e)
			this.response =  undefined
		}

		document.body.removeChild(textArea)
	}


	private async __fallback_read() {
		const textArea          = document.createElement('textarea')
		// Avoid scrolling to bottom
		textArea.style.top      = '0'
		textArea.style.left     = '0'
		textArea.style.position = 'fixed'
		textArea.style.opacity  = '1'

		document.body.appendChild(textArea)
		textArea.focus()
		textArea.select()

		try {
			const successful = document.execCommand('paste')
			if (successful) {
				this.response = textArea.value
			} else {
				this.response = undefined
			}
		} catch (e) {
			console.warn(e)
			this.response = undefined
		}

		document.body.removeChild(textArea)
	}


	private async __navigator_write(data = '') {

		document.body.focus()
		try {
			await navigator.clipboard.writeText(data)
			return this.response = data
		} catch (e) {
			console.warn(e)
			return false
		}

	}


	private async __navigator_read() {
		this.response = undefined
		document.body.focus()
		try {
			return this.response = await navigator.clipboard.readText()
		} catch (e) {
			console.warn(e)
			return false
		}
	}


	private async __notSupport_write(data = '') {
		return false
	}


	private async __notSupport_read() {
		return false
	}


	public async write(data = '') {
		if (!this.permissionWrite) {
			await this.permissions()
		}
		if (this.permissionWrite) {
			try {
				switch (this.mode) {
					case 'navigator':
						return this.__navigator_write(data)
					case 'fallback':
						return this.__fallback_write(data)
					case 'notSupport':
						return this.__notSupport_write(data)
				}
				return false
			} catch (e) {
				return false
			}
		}
		return false
	}


	public async read() {
		if (!this.permissionRead) {
			await this.permissions()
		}
		if (this.permissionRead) {
			try {
				switch (this.mode) {
					case 'navigator':
						return this.__navigator_read()
					case 'fallback':
						return this.__fallback_read()
					case 'notSupport':
						return this.__notSupport_read()
				}
				return false
			} catch (e) {
				return false
			}
		}
		return false;
	}


	public async permissions() {
		try {
			const write = await navigator.permissions.query(<PermissionDescriptor><MyPermissionDescriptor>{name: 'clipboard-write'})
			const read  = await navigator.permissions.query(<PermissionDescriptor><MyPermissionDescriptor>{name: 'clipboard-read'})
			if (write.state == 'granted' || write.state == 'prompt') {
				this.permissionWrite = true
			} else {
				this.permissionWrite = false
			}
			if (read.state == 'granted' || read.state == 'prompt') {
				this.permissionRead = true
			} else {
				this.permissionRead = false
			}
			return true
		} catch (e) {
			return false
		}
	}

}

export default clipboard;