u2ui 1.0.0

package/js/rte/old/NodeCleaner.js

@@ -0,0 +1,315 @@
+/* Copyright (c) 2016 Tobias Buschor https://goo.gl/gl0mbf | MIT License https://goo.gl/HgajeK */
+
+var defaultConf = {
+	tags                   :null,
+	tagsRemove             :null,
+	styles                 :null,
+	attributes             :null,
+	removeHiddenElements   :false,
+	removeComments         :true,
+	removeEmptyInlineSpans :true,
+	removeEmptyElements    :false,
+	removeUnusedElements   :false,
+	removeUnusedStyles     :true,
+	removeNbsp             :false,
+	replaceCombiningChars  :true,
+};
+
+class NodeCleaner {
+	constructor (conf) {
+		this.conf = c1.ext(defaultConf, conf);
+	}
+	cleanContents(el, andChildren) {
+		if (!el) return;
+		Array.from(el.childNodes).forEach(child => this.clean(child, andChildren))
+		//for (let child of el.childNodes) this.clean(child, andChildren);
+
+	}
+	clean(el, andChildren) {
+		if (el.nodeType === 1) {
+			andChildren && this.cleanContents(el, true); // can clean all content => then cleanTag can clean el too.
+			el = this.cleanTag(el);
+			if (!el) return;
+			this.cleanAttributes(el);
+			this.cleanStyle(el);
+			this.conf['removeUnusedStyles'] && removeUnusedStyles(el);
+			// this.cleanClass(el); // todo
+			removeUnusedAttributes(el);
+			this.conf['removeEmptyInlineSpans'] && removeEmptyInlineSpans(el);
+			this.conf['removeUnusedElements'] && removeUnusedElements(el);
+		} else if (el.nodeType === 3) {
+			if (this.conf['removeNbsp']) el.data = el.data.replace(/\u00a0/g,' ');
+			if (this.conf['replaceCombiningChars']) nodeReplaceCombiningDiaeresis(el);
+			// if (el.previousSibling && el.previousSibling.nodeType === 3) { // verbinden
+			// 	el.previousSibling.data += el.data;
+			// 	el.remove();
+			// }
+			// if (el.data === '') el.remove();
+		} else {
+			this.conf['removeComments'] && el.remove();
+		}
+	}
+	cleanTag(el) {
+		el = modernize(el);
+
+		var display = getComputedStyle(el).getPropertyValue('display');
+
+		if (this.conf['removeEmptyElements']
+			&& !{IMG:1,BR:1,HR:1}[el.tagName]
+			&& el.textContent.trim() === '' // trim ok?
+			&& !el.querySelector('img') // no textContent nevertheless can have img!
+		) { el.remove(); return; }
+		if (this.conf['removeHiddenElements'] && display==='none'                   ) { el.remove(); return; }
+		if (this.conf['tagsRemove']           && this.conf['tagsRemove'][el.tagName]) { el.remove(); return; }
+
+		if (!this.conf['tags'])            return el;
+		if (this.conf['tags'][el.tagName]) return el;
+
+		if (!display) {
+			display = blockLikeTags[el.tagName] ? 'block' : 'inline';
+		}
+
+		const nEl = document.createElement(notInline[display] ? 'div' : 'span');
+		/* dont loose computed styles. Problem?: links keep colored */
+		var computed = getComputedStyle(el);
+		var beforeComputed = {};
+		for (var i=0, style; style = computed[i++];) {
+			beforeComputed[style] = computed.getPropertyValue(style);
+		}
+		el.hasAttribute('class') && nEl.setAttribute('class', el.getAttribute('class'));
+		nEl.className = el.className; // copy each attribute?
+		el.replaceWith(nEl);
+		nEl.appendChild(el);
+		el.removeNode();
+		computed = getComputedStyle(nEl);
+		for (i=0; style = computed[i++];) {
+			if (beforeComputed[style] !== computed.getPropertyValue(style)) {
+				nEl.style.setProperty(style, beforeComputed[style]);
+			}
+		}
+		return nEl;
+	}
+	cleanAttributes(el) {
+		if (!this.conf['attributes']) return;
+		const attributes = c1.ext(el.attributes);
+		for (var i=0, attr; attr = attributes[i++];) {
+			const name = attr.name;
+			var value = attr.value;
+			var allowed = this.conf['attributes'][name];
+			if (!allowed) { el.removeAttribute(name); continue; }
+			if (allowed === true || allowed === 1) continue;
+			// values allowed
+			if (allowed[value] || allowed.includes(value)) {
+				continue;
+			}
+            el.removeAttribute(name);
+		}
+	}
+	cleanStyle(el) {
+		if (!this.conf['styles']) return;
+		for (var i=0, style; style = el.style[i++];) {
+			var allowed = this.conf['styles'][style];
+			if (!allowed) {
+				el.style.removeProperty(style); continue;
+			}
+			if (allowed === true || allowed === 1) continue;
+			// values allowed
+			var value = el.style.getPropertyValue(style);
+			if (style === 'font-family') value = value.replace(/^["']/,'').replace(/["']$/,'');
+			//if (allowed.includes) { // isArray (array with allowed values)
+				if (allowed[value] || allowed.includes(value)) {
+					continue;
+				} else {
+					el.style.removeProperty(style);
+				}
+			//}
+		}
+	}
+	/*
+	cleanClass(el) {
+		if (!el.className) return;
+		var allowed = this.conf['classes'];
+		if (allowed === undefined) return;
+		if (allowed.length < 1) {
+			el.className = '';
+			return;
+		}
+		var classes = el.className.split(' ');
+		var nClasses = [];
+		for (var i=0, cl; cl=classes[i++];) {
+			allowed.includes(cl) && nClasses.push(cl);
+		}
+		el.className = nClasses.join(' ');
+	}
+	*/
+}
+
+c1.NodeCleaner = NodeCleaner;
+
+function removeUnusedStyles(el) {
+	// be sure the node is attached to the document
+	var computed = getComputedStyle(el),
+		beforeOriginal = {},
+		beforeComputed = {},
+		i=0, style;
+	while (style = el.style[i++]) {
+		beforeOriginal[style] = el.style.getPropertyValue(style);
+		if ({IMG:1,VIDEO:1}[el.tagName] && {width:1,'max-width':1,height:1}[style]) continue; // reponsive, leave this styles
+		beforeComputed[style] = computed.getPropertyValue(style);
+	}
+	el.style.cssText = '';
+	for (style in beforeOriginal) {
+		if (beforeComputed[style] !== computed.getPropertyValue(style)) {
+			el.style.setProperty(style, beforeOriginal[style]);
+		}
+	}
+}
+function removeUnusedAttributes(el) {
+	el.hasAttribute('style') && el.getAttribute('style').trim() === '' && el.removeAttribute('style');
+	el.hasAttribute('class') && el.getAttribute('class').trim() === '' && el.removeAttribute('class');
+	if (el.tagName === 'IMG') {
+		if (!(el.getAttribute('height')+'').match(/^[0-9]+/)) { el.removeAttribute('height'); }
+		if (!(el.getAttribute('width')+'') .match(/^[0-9]+/)) { el.removeAttribute('width');  }
+	}
+}
+function removeEmptyInlineSpans(el) {
+	if (el.attributes.length) return;
+	var display = getComputedStyle(el).getPropertyValue('display');
+	if (display === 'inline' && el.tagName === 'SPAN') {
+		 el.removeNode();
+	}
+}
+function removeUnusedElements(el) {
+	if (el.tagName === 'A' && el.innerHTML.trim().length) {
+		//el.removeNode(); return;
+	}
+	// divs containing only block-likes
+	if (el.attributes.length === 0 && el.tagName === 'DIV') {
+		let onlyBlocks = true;
+		for (let child of el.childNodes) {
+			//if (child.nodeType === 2) continue; // comment
+			if (child.nodeType === 3) {
+				if (child.data.trim() === '') continue;
+				else { onlyBlocks = false; break; }
+			}
+			if (!blockLikeTags[child.tagName]) { onlyBlocks = false; break; }
+		}
+		if (onlyBlocks) { el.removeNode(); return; };
+	}
+	// single col tables
+	if (el.tagName === 'TABLE') {
+		const tr = el.firstElementChild.firstElementChild;
+		if (tr.children.length === 1) {
+			console.log(el)
+			Array.from(el.children).forEach(tbody => {
+				Array.from(tbody.children).forEach(tr => {
+					Array.from(tr.children).forEach(td => {
+						replaceNode(td, document.createElement('div'));
+					});
+					tr.removeNode();
+				});
+				tbody.removeNode();
+			});
+			el.removeNode();
+			return;
+		}
+	}
+	// remove Ps inside LIs, todo:better solution?
+	if (el.tagName === 'P') {
+		if (el.parentNode.tagName === 'LI') {
+			el.removeNode();
+			return;
+		}
+	}
+}
+const notInline = {block:1,table:1,flex:1,grid:1,'list-item':1,'table-cell':1};
+const blockLikeTags = {DIV:1,P:1,UL:1,OL:1,TABLE:1,HR:1,H1:1,H2:1,H3:1,H4:1,H5:1,H6:1,NAV:1,MAIN:1,SECTION:1,ARTICLE:1,HEADER:1,FOOTER:1}
+
+// others? http://donsnotes.com/tech/charsets/ascii.html
+// todo: rename to problematic chars
+const combininedChars = [
+	['ü','u\u0308'], // COMBINING DIAERESIS (combined chars)
+	['ü','u\u0308'],
+	['Ü','U\u0308'],
+	['ä','a\u0308'],
+	['Ä','A\u0308'],
+	['ö','o\u0308'],
+	['Ö','O\u0308'],
+	['⚫','\x1D'], // can not be showed, found on pdf text it was "ff"
+].map(data => [data[0], new RegExp(data[1], 'g')] );
+function nodeReplaceCombiningDiaeresis(textNode){
+
+	//textNode.data = textNode.data.normalize(); todo!
+
+	var string = textNode.data
+	for (let [char,regexp] of combininedChars) {
+		if (string.match(regexp)) { // only replace string if found => otherways cursor position will no be restored
+			textNode.data = string.replace(regexp, char);
+		}
+	}
+}
+
+function modernize(n) {
+	if (n.hasAttribute('bgcolor')) {
+		n.style.backgroundColor = n.getAttribute('bgcolor');
+		n.removeAttribute('bgcolor');
+	}
+	if (n.tagName==='FONT') {
+		const span = document.createElement('span');
+		const color = n.getAttribute('color');
+		const face = n.getAttribute('face');
+		const size = n.getAttribute('size');
+		color && (span.style.color = color);
+		face  && (span.style.fontFamily = face);
+		size  && (span.style.fontSize = (parseInt(size)+0.6)/2+'em');
+		n.after(span);
+		span.append(n);
+		n.removeNode();
+		return span;
+	}
+	if (n.tagName==='CENTER') {
+		const div = document.createElement('div');
+		div.style.textAlign = 'center';
+		n.after(div);
+		div.append(n);
+		n.removeNode();
+		return div;
+	}
+	return n;
+}
+
+function replaceNode(el, newEl){
+	el.replaceWith(newEl);
+	newEl.appendChild(el);
+	el.removeNode();
+}
+
+/* example *
+var conf = {
+	tags:{
+		DIV:true,
+		SPAN:true,
+	},
+	tagsRemove: {
+		'FONT':  1,
+		'O:P':   1,
+		'STYLE': 1,
+		'SCRIPT':1,
+		'META':  1,
+		'LINK':  1,
+		'TITLE': 1
+	}
+	styles: {
+		'color':       true,
+		'font-weight': true,
+		'font-family': {Arial:true, Times:true},
+		'font-size':   true,
+		'font-style':  true,
+	},
+	//classes: ['myclass', 'yourClass'], // class:[]
+};
+var cleaner = new c1.NodeCleaner(conf);
+cleaner.clean(el, bool_incContainings );
+*/
+
+

package/js/rte/old/Rte/Rte.mjs

@@ -0,0 +1,316 @@
+/* Copyright (c) 2016 Tobias Buschor https://goo.gl/gl0mbf | MIT License https://goo.gl/HgajeK */
+import '../c1/rte.mjs?qgUniq=7f19b4a';
+import '../c1/NodeCleaner.mjs?qgUniq=c086a19';
+import './crossbrowser.mjs?qgUniq=f9716a5';
+
+window.Rte = {
+	// range : {},
+	// rangeStaticValues : {},
+	// checkSelection() {
+	// 	/*
+	// 	 * Problem:
+	// 	 * Es sollte auch nach neuem element geprüft werden wenn eltern elemente geändert werden
+	// 	 * jetzt ist es so, dass die Selection und das element gleich bleiben obwohl sich die dom struktur geänder hat.
+	// 	 *
+	// 	 * In webkit ist das Element dann z.T nicht mehr das selbe. dann gehts... (ul maker)
+	// 	 *  */
+	// 	const sel = getSelection();
+	// 	if (!sel.rangeCount) return;
+	// 	/* new selection? */
+	// 	const newRange = sel.getRangeAt(0).cloneRange(); // cloneRange() needed?
+	// 	/* use compareBoundaryPoints? (god example: http://help.dottoro.com/ljxgoxcb.php) */
+	// 	const same = newRange.startContainer === Rte.rangeStaticValues.startContainer
+	// 			&& newRange.startOffset === Rte.rangeStaticValues.startOffset
+	// 			&& newRange.endContainer === Rte.rangeStaticValues.endContainer
+	// 			&& newRange.endOffset === Rte.rangeStaticValues.endOffset;
+	// 	if (same) return;
+	// 	Rte.range = newRange;
+	// 	Rte.rangeStaticValues = c1.ext(newRange);
+
+	// 	/* new element? */
+	// 	let tmp = qgSelection.element(); // todo
+
+	// 	if (tmp.tagName !== 'IMG') {
+	// 		tmp = Rte.range.commonAncestorContainer.data !== undefined ? Rte.range.commonAncestorContainer.parentNode : Rte.range.commonAncestorContainer;
+	// 	}
+	// 	let newElement = tmp;
+	// 	if (newElement === Rte.active) newElement = false;
+	// 	if (Rte.element !== newElement) {
+	// 		Rte.element = newElement;
+	// 		Rte.trigger('elementchange');
+	// 	}
+	// 	Rte.trigger('selectionchange');
+	// },
+	manipulate(fn) {
+		setTimeout(function() {
+			getSelection().c1SetRange(Rte.range);
+			fn && fn();
+			Rte.checkSelection();
+	        Rte.trigger('input');
+			Rte.active.focus(); // firefox
+		}, 80);
+	},
+	/*
+	modifySelection(fn) {
+		var els = [Rte.element];
+		if (!Rte.range.collapsed) {
+			console.log(Rte.range)
+			if (rangeIsElement(Rte.range)) {
+				els = [Rte.range.commonAncestorContainer];
+			} else {
+				els = rangeGetElements(Rte.range);
+			}
+		} else if (els[0] === Rte.active) {
+			rangeExpandToElements(Rte.range);
+			el = document.createElement('span');
+			Rte.range.surroundContents(el);
+			Rte.range.selectNodeContents(el);
+		}
+		fn(els);
+
+		Rte.trigger('input');
+
+		setTimeout(function() {
+			var s = getSelection();
+			s.c1SetRange(Rte.range);
+			Rte.checkSelection();
+		},90);
+	},
+	*/
+	addUiElement(el) { // really needed?
+		const activate = function(e) {
+			Rte.dontBlur = true;
+			const gMousedown = function(e) {
+				if (el.contains(e.target)) return;
+				document.removeEventListener('mousedown',gMousedown);
+				Rte.dontBlur = false;
+				if (!Rte.active) return;
+				if (Rte.active.contains(e.target)) return;
+				Rte.trigger('deactivate');
+	            Rte.active = false;
+			};
+			document.addEventListener('mousedown',gMousedown);
+			e.stopPropagation();
+		};
+		el.addEventListener('mousedown',activate);
+	},
+	isTarget(el) {
+		return el.isContentEditable && el.tagName!=='INPUT' && el.tagName!=='TEXTAREA' && el.tagName!=='SELECT';
+	},
+	init() {
+		const root = window;
+		root.addEventListener('focus',e=>{
+	        if (!Rte.isTarget(e.target)) return;
+	        if (Rte.active !== e.target) {
+		        Rte.active = e.target;
+	            Rte.trigger('activate');
+		        Rte.checkSelection();
+	        }
+		},true);
+		root.addEventListener('blur',e=>{
+	        if (!Rte.isTarget(e.target)) return;
+	        if (!Rte.dontBlur && Rte.active) {
+	            Rte.trigger('deactivate');
+	            Rte.active = false;
+	        }
+		},true);
+		root.addEventListener('keyup',e=>{ // use selectionchange?
+	        if (!Rte.isTarget(e.target)) return;
+			if (e.key === 'Escape') {
+				document.body.focus();
+				document.activeElement.blur();
+				window.getSelection().removeAllRanges();
+				return;
+			}
+	        Rte.checkSelection();
+	        Rte.trigger('input',e);
+		},true);
+		root.addEventListener('mouseup',e=>{ // use selectionchange?
+			if (!Rte.active) return; // new 15.7.17 // zzz, if used: "root.addEventListener('selectionchange',e=>{"
+            if (!Rte.isTarget(e.target)) return;
+	        Rte.checkSelection();
+		},true);
+		root.addEventListener('beforeunload',()=>{ // blur before unload (save), needed?
+			if (Rte.active) {
+				Rte.active.blur();
+				// let event = new Event('blur',{'bubbles': true,'cancelable': true});
+				// Rte.active.dispatchEvent(event);
+			}
+		},true);
+	}
+};
+c1.ext(c1.Eventer,Rte);
+
+Rte.init();
+
+
+
+// // fake Selection
+// {
+// 	let el = c1.dom.fragment(`<style>.qgRte_fakeSelection {}</style>`).firstChild;
+// 	document.head.append(el);
+// 	let style = el.sheet.cssRules[0].style;
+// 	style.background = 'rgba(150,150,150,.9)';
+// 	style.color = '#fff';
+// 	Rte.fakeSelection = {
+// 		addClass   (el){ el.classList.add   ('qgRte_fakeSelection'); },
+// 		removeClass(el){ el.classList.remove('qgRte_fakeSelection'); },
+// 	}
+// }
+
+
+
+
+// // //ie: prevent resizable handle bug: if i move the image, it will show the handles
+// // /*
+// // document.addEventListener('mouseup', e=>{
+// // 	if (e.button!==0) return;
+// // 	if (e.target.isContentEditable && e.target.tagName === 'IMG' && !getSelection().isCollapsed && getSelection().toString() === '') {
+// // 		qgSelection.toElement(e.target);
+// // 		setTimeout(function() {
+// // 			qgSelection.toElement(e.target);
+// // 			Rte.checkSelection();
+// // 		});
+// // 	}
+// // });
+// // */
+
+
+// // qgExecCommand('enableInlineTableEditing', false, false); // bug: if i first click in the table the nativ handles appear
+// // document.addEventListener('DOMContentLoaded',function(){
+// // 	qgExecCommand('enableObjectResizing', false, false);
+// // });
+
+// // /* prevent select on contextmenu */
+// // document.addEventListener('mousedown', e =>
+// // 	e.button === 2 && e.target.isContentEditable && e.preventDefault()
+// // );
+
+// // /* cleaner */
+// // {
+// // 	let Cleaner;
+// // 	Rte.on('input', function() {
+// // 		if (!Cleaner) Cleaner = new c1.NodeCleaner();
+// // 		Cleaner.cleanContents(Rte.active, true);
+// // 	});
+// // }
+
+// // /* force li's in contenteditable uls */
+// // {
+// // 	let check = function(e){
+// // 		let child;
+// // 		for (child of Rte.active.childNodes) {
+// // 			if (child.tagName === 'LI') continue;
+// // 			if (child.nodeType === 3 && !child.textContent.trim()) continue;
+// // 			if (child.nodeName === 'UL') {
+// // 				child.removeNode();
+// // 				continue;
+// // 			}
+// // 			let li = document.createElement('li');
+// // 			child.before(li);
+// // 			li.append(child);
+// // 		}
+// // 	}
+// // 	Rte.on('activate',()=>{
+// // 		if (Rte.active.tagName !== 'UL') return;
+// // 		check()
+// // 		Rte.active.addEventListener('input', check);
+// // 	});
+// // 	Rte.on('deactivate',()=>{
+// // 		if (Rte.active.tagName !== 'UL') return;
+// // 		Rte.active.removeEventListener('input', check);
+// // 	});
+// // }
+// // /* force p tag inside contenteditable divs */
+// // document.addEventListener('input',function(e){
+// // 	if (!e.target.isContentEditable) return;
+// // 	if (e.target.tagName !== 'DIV') return;
+// // 	const sel = getSelection();
+// // 	const range = sel.c1GetRange();
+// // 	const text = range.startContainer;
+// // 	const offset = range.startOffset;
+// // 	if (text.nodeType !== 3) return; /* text-node */
+// // 	if (text.parentNode === e.target) { // warp blank text-nodes with p
+// // 		const p = document.createElement('p');
+// // 		text.after(p);
+// // 		p.append(text);
+// // 		range.setStart(text, offset);
+// // 		sel.c1SetRange(range);
+// // 	} else { // replace every div with a p
+// // 		const div = text.parentNode;
+// // 		if (div.tagName !== 'DIV') return;
+// // 		//if (div.parentNode !== e.target) return;
+// // 		const p = document.createElement('p');
+// // 		div.after(p);
+// // 		p.append(div)
+// // 		div.removeNode();
+// // 		range.setStart(text, offset);
+// // 		sel.c1SetRange(range);
+// // 	}
+// // });
+// // /* force p's to not contain a ul */
+// // document.addEventListener('input',function(e){
+// // 	if (!e.target.isContentEditable) return;
+// // 	if (e.target.tagName !== 'DIV') return;
+// // 	const sel = getSelection();
+// // 	const range = sel.c1GetRange();
+// // 	const text = range.startContainer;
+// // 	const offset = range.startOffset;
+// // 	if (text.nodeType !== 3) return; // text-node
+// // 	const ul = text.parentNode.parentNode;
+// // 	if (ul.tagName !== 'UL') return;
+// // 	const p = ul.parentNode;
+// // 	if (p.tagName !== 'P') return;
+// // 	if (p.childNodes.length !== 1) return;
+// // 	p.removeNode();
+// // 	range.setStart(text, offset);
+// // 	sel.c1SetRange(range);
+// // });
+
+// // /* force br's tag inside contenteditable if not a DIV/TD/TH/UL, (todo, should it be p,h1,h2...?) */
+// // document.addEventListener('keydown',function(e){
+// // 	if (!e.target.isContentEditable) return;
+// // 	if (e.target.tagName === 'DIV') return;
+// // 	if (e.target.tagName === 'TD') return;
+// // 	if (e.target.tagName === 'TH') return;
+// // 	if (e.target.tagName === 'UL') return;
+// // 	if (e.code === 'Enter') {
+// // 		const br = document.createElement('br');
+// // 		let range = getSelection().c1GetRange();
+// // 		range.insertNode(br);
+// // 		br.append(document.createTextNode(' \n\n'))
+// // 		range.setStartAfter(br)
+// // 		getSelection().c1SetRange(range);
+// // 		e.preventDefault();
+// // 	}
+// // });
+
+// // /* prevent links inside links */
+// // document.addEventListener('input',function(e){
+// // 	if (!e.target.isContentEditable) return;
+// // 	if (!e.target.closest('A')) return;
+// // 	let a;
+// // 	while (a = e.target.c1Find('a')) a.removeNode();
+// // });
+
+// // /* prevent phx inside phx */
+// // {
+// // 	let PHX = {P:1,H1:1,H2:1,H3:1,H4:1,H5:1,H6:1,};
+// // 	document.addEventListener('input',function(e){
+// // 		if (!e.target.isContentEditable) return;
+// // 		const check = function(node) {
+// // 			Array.from(node.children).forEach(check); // for of will skip nodes (if some removed)
+// // 			if (isPHX(node.parentNode) && isPHX(node)) {
+// // 				if (node.nextElementSibling) {
+// // 					node.after(document.createElement('br'));
+// // 				}
+// // 				node.removeNode();
+// // 			}
+// // 		}
+// // 		function isPHX (node){
+// // 			return PHX[node.tagName];
+// // 		}
+// // 		check(e.target)
+// // 	});
+// // }
+// // /* */