pWiki/experiments/outline-editor/generic.js

/**********************************************************************
* 
*
*
**********************************************************************/

HTMLTextAreaElement.prototype.updateSize = function(){
	this.style.height = ''
	this.style.height = this.scrollHeight + 'px' 
	return this }
HTMLTextAreaElement.prototype.autoUpdateSize = function(){
	var that = this
	this.addEventListener('input', 
		function(evt){
			that.updateSize() }) 
	return this }
HTMLTextAreaElement.prototype.getTextGeometry = function(){
	var offset = this.selectionStart
	var text = this.value

	// get the relevant styles...
	var style = getComputedStyle(this)
	var s = {}
	for(var i=0; i < style.length; i++){
		var k = style[i]
		if(k.startsWith('font')
				|| k.startsWith('line')
				|| k.startsWith('white-space')){
			s[k] = style[k] } }

	var carret = document.createElement('span')
	carret.innerText = '|'
	carret.style.margin = '0px'
	carret.style.padding = '0px'

	var span = document.createElement('span')
	span.innerText = text.slice(0, offset)
	Object.assign(span.style, {
		...s,

		position: 'fixed',
		display: 'block',
		top: '-100%',
		left: '-100%',
		width: this.offsetWidth + 'px',
		height: this.scrollHeight + 'px',

		padding: style.padding,

		outline: 'solid 1px red',

		pointerEvents: 'none',
	})
	span.append(carret)

	document.body.append(span)

	var res = {
		length: text.length,
		lines: Math.floor(this.offsetHeight / carret.offsetHeight),
		line: Math.floor(carret.offsetTop / carret.offsetHeight),
		offset: offset,
		offsetLeft: carret.offsetLeft,
		offsetTop: carret.offsetTop,
	}

	span.remove()

	return res }

// calculate number of lines in text area (both wrapped and actual lines)
Object.defineProperty(HTMLTextAreaElement.prototype, 'heightLines', {
	enumerable: false,
	get: function(){
		var style = getComputedStyle(this)
		return Math.floor(
			(this.scrollHeight 
				- parseFloat(style.paddingTop)
				- parseFloat(style.paddingBottom)) 
			/ (parseFloat(style.lineHeight) 
				|| parseFloat(style.fontSize))) }, })
Object.defineProperty(HTMLTextAreaElement.prototype, 'lines', {
	enumerable: false,
	get: function(){
		return this.value
			.split(/\n/g)
			.length }, })
// XXX this does not account for wrapping...
Object.defineProperty(HTMLTextAreaElement.prototype, 'caretLine', {
	enumerable: false,
	get: function(){
		var offset = this.selectionStart
		return offset != null ?
			this.value
				.slice(0, offset)
				.split(/\n/g)
				.length
			: undefined }, })


Object.defineProperty(HTMLTextAreaElement.prototype, 'caretOffset', {
	enumerable: false,
	get: function(){
		var offset = this.selectionStart
		var r = document.createRange()
		r.setStart(this, offset)
		r.setEnd(this, offset)
		var rect = r.getBoundingClientRect()
		return {
			top: rect.top, 
			left: rect.left,
		} },
})




/**********************************************************************
* vim:set ts=4 sw=4 :                                                */