User:Mikevoir/betterCodeMirror.js

mw.loader.using('mediawiki.api').then(function {	var lib = this._LIB;	var $textbox = $( '#wpTextbox1' );	var betterCodeMirror = {		config: mw.config.get(['wgAction']),		row: document.querySelector('.group-insert'),		init: function {			if (this.config.wgAction && ['edit', 'submit'].includes(this.config.wgAction)) {				lib.waitFor('.CodeMirror', this.quickOL);				lib.waitFor('.CodeMirror', this.templateDataShow);			}		},		addButton: function(query, content, handler) {			var addTo = document.querySelector(query);			if (addTo) {				var container = document.createElement('span');				container.classList.add('tool', 'oo-ui-widget', 'oo-ui-widget-enabled', 'oo-ui-buttonElement', 'oo-ui-buttonElement-frameless', 'oo-ui-iconElement', 'oo-ui-buttonWidget');				var button = document.createElement('a');				button.classList.add('oo-ui-buttonElement-button');				button.innerHTML = content;				button.role = 'button'; button.addEventListener('mouseup', handler); container.appendChild(button); addTo.insertBefore(container, addTo.children[0]); }		},		quickOL: function { // Add buttons betterCodeMirror.addButton('.group-insert', 'OL_tl', addOL); betterCodeMirror.addButton('.group-insert', 'OL', addOL); // Add call when clicked function addOL(event) { // OL call without TL params if (event.target.innerHTML == 'OL'){ $textbox.textSelection(						'replaceSelection',						''); // OL call with TL params }else if (event.target.innerHTML == 'OL_tl'){ $textbox.textSelection(						'replaceSelection',						''); }			}		},		templateDataShow: function { var $textbox = $textbox || $( '#wpTextbox1' ); var api = api || new mw.Api; var TDSmethods = { init: function(event) { $textbox = $( '#wpTextbox1' ); var checkTemplate = /^[\s\S]*\{\{([^\}\{\|]+)(\|.+$|\}\}.+$|$)/g; var uptoCaret = $textbox.textSelection('getContents').substring(0, $textbox.textSelection('getCaretPosition')); if (uptoCaret && checkTemplate.test(uptoCaret)) { var template = uptoCaret.replace(checkTemplate, '$1'); this.getTD(template); }				},				getTD: function(template) { console.log('reached getTD: ', template); var tdRegex = / ([\s\S]+)<\/templatedata>/g; api.get({						action: 'parse',						page: 'Template:'+template+'/doc',						prop: 'wikitext|categories|sections'					}).then(function(data){						console.log('api data: ', data);						if ( data && data.parse && data.parse.wikitext && data.parse.wikitext['*'] && tdRegex.test(data.parse.wikitext['*']) ){							var raw_templateData = data.parse.wikitext['*'].match(tdRegex)[0].replace(' ', ).replace(' ', );							var templateData = JSON.parse(raw_templateData);							templateData.TEMPLATE = template;							TDSmethods.proofTD(templateData);						}					}); },				proofTD: function(data) { console.log('reached proofTD: ', data); if (!data.paramOrder && data.params) { data.paramOrder = []; Object.keys(data.params).forEach(function(key) {							data.paramOrder.push(key);						}); }					if (!data.format) {data.format='inline';} this.renderTD(data); },				renderTD: function(data) { console.log('reached post frame: ', this); /*					//	// Load VE-only window styling //	var styleEl = document.createElement('style'); //	document.head.appendChild(styleEl); //	styleEl.sheet.insertRule(					//		'.oo-ui-dialog.oo-ui-window-setup {\n'+					//		 'opacity: 1;\n'+					//		'}\n'+					//		'.oo-ui-dialog.oo-ui-window-active {\n'+					//		  'width: auto;\n'+					//		  'height: auto;\n'+					//		  'top: 0;\n'+					//		  'right: 0;\n'+					//		  'bottom: 0;\n'+					//		  'left: 0;\n'+					//		  'padding: 1em;\n'+					//		'}\n'+					//		'.oo-ui-dialog {\n'+					//		  'background-color: rgba(0,0,0,0.5);\n'+					//		  'opacity: 0;\n'+					//		  'z-index: inherit;\n'+					//		  'transition: opacity 300ms;\n'+					//		'}\n'+					//		'.oo-ui-dialog {\n'+					//		  'position: fixed;\n'+					//		  'width: 0;\n'+					//		  'height: 0;\n'+					//		  'overflow: hidden;\n'+					//		  'z-index: 4;\n'+					//		'}\n'+					//		'.oo-ui-window-focusTrap {\n'+					//		  'display: block;\n'+					//		'}\n',					//		0					//	); */					//Initalize window //var container = this.nestElements(document.querySelector('body'),					//	[					//	]					//); var frame = this.nestElements(document.querySelector('body'),						[							{								classNames: [ "ve-ui-overlay-global", "ve-ui-overlay-global-desktop", "ve-ui-overlay" ]							},							{								classNames: [ "oo-ui-windowManager", "oo-ui-windowManager-modal", "ve-ui-dir-block-ltr", "oo-ui-windowManager-floating" ],								attributes: {									role: 'dialog'								}							},							{								classNames: [ "oo-ui-window", "oo-ui-dialog", "oo-ui-processDialog", "ve-ui-mwTemplateDialog-ready", "ve-ui-mwTransclusionDialog-single-transclusion", "oo-ui-window-active", "oo-ui-window-setup", "oo-ui-window-ready" ],								attributes: {									role: 'dialog'								}							},							{								classNames: ['oo-ui-window-frame'],								styles: {									width: '900px',									height: '90%'								}							},						]					); //Starting trap this.addElement({						addTo: frame,						classNames: ['oo-ui-window-focusTrap'],						attributes: {tabindex: '0'},						noreturn: true					}); var main = this.addElement({						addTo: frame,						classNames: [ 'oo-ui-window-content', 'oo-ui-dialog-content', 'oo-ui-processDialog-content', 'oo-ui-window-content-setup', 'oo-ui-window-content-ready' ],						attributes: {tabindex: '-1'}					}); //Ending trap this.addElement({						addTo: frame,						classNames: ['oo-ui-window-focusTrap'],						attributes: {tabindex: '0'},						noreturn: true					}); // Head container var head = this.nestElements(main, 						[							{ classNames: [ 'oo-ui-window-head' ] },							{ classNames: [ 'oo-ui-processDialog-navigation' ] }						]					); // Head 1 this.nestElements(head, 						[							{ 								classNames: [ 'oo-ui-processDialog-location' ],								styles: {									'padding-left': '77.7167px',									'padding-right': '77.7167px'								}							},							{								node: 'label',								classNames: [ 'oo-ui-widget', 'oo-ui-widget-enabled', 'oo-ui-labelElement-label', 'oo-ui-labelWidget', 'oo-ui-processDialog-title', 'oo-ui-labelElement' ],								content: 'Template Data: ' + data.TEMPLATE							}						]					); // Head 2 var head2 = this.nestElements(						head,						[							{ classNames: [ 'oo-ui-processDialog-actions-safe' ] },							{								node: 'span',								classNames: [ 'oo-ui-widget', 'oo-ui-widget-enabled', 'oo-ui-buttonElement', 'oo-ui-buttonElement-framed', 'oo-ui-iconElement', 'oo-ui-flaggedElement-safe', 'oo-ui-flaggedElement-close', 'oo-ui-buttonWidget', 'oo-ui-actionWidget' ]							},							{								node: 'a',								classNames: [ 'oo-ui-buttonElement-button' ],								attributes: {									role: 'button',									tabindex: '0',									rel: 'nofollow'								}							}						]					); this.addElement({						addTo: head2,						node: 'span',						classNames: [ 'oo-ui-iconElement-icon', 'oo-ui-icon-close' ],						noreturn: true					}); this.addElement({						addTo: head2,						node: 'span',						classNames: [ 'oo-ui-labelElement-label', 'oo-ui-labelElement-invisible' ],						content: 'Cancel',						noreturn: true					}); this.addElement({						addTo: head2,						node: 'span',						classNames: [ 'oo-ui-indicatorElement-indicator', 'oo-ui-indicatorElement-noIndicator' ],						noreturn: true					}); // Window body var body = this.nestElements(						main,						[							{ classNames: [ 'oo-ui-window-body' ], styles: { bottom: '52px' } },							{ classNames: [ 'oo-ui-layout', 'oo-ui-menuLayout', 'oo-ui-menuLayout-before', 'oo-ui-menuLayout-showMenu', 've-ui-mwTwoPaneTransclusionDialogLayout' ] },							{ classNames: [ 'oo-ui-menuLayout-content' ] },							{ classNames: [ 'oo-ui-layout', 'oo-ui-panelLayout', 'oo-ui-panelLayout-scrollable', 'oo-ui-panelLayout-expanded', 've-ui-mwVerticalLayout', 've-ui-mwTwoPaneTransclusionDialogLayout-stackLayout' ] }						]					); // Body title var body_title = this.nestElements(						body,						[							{ classNames: [ 'oo-ui-layout', 'oo-ui-panelLayout', 'oo-ui-panelLayout-expanded', 'oo-ui-pageLayout', 've-ui-mwTemplatePage' ] },							{ 								classNames: [ 'oo-ui-layout', 'oo-ui-iconElement', 'oo-ui-labelElement', 'oo-ui-fieldsetLayout' ],								node: 'fieldset',								content: this.listElements( null, [										{ 											classNames: [ 'oo-ui-layout', 'oo-ui-iconElement', 'oo-ui-labelElement', 'oo-ui-fieldsetLayout' ], node: 'legend', content: this.listElements(null, [												{ classNames: [ 'oo-ui-iconElement-icon', 'oo-ui-icon-puzzle' ], node: 'span' },												{ classNames: [ 'oo-ui-labelElement-label' ], node: 'span', content: data.TEMPLATE },											]) },										{ classNames: [ 'oo-ui-fieldsetLayout-group' ] }, { 											classNames: [ 've-ui-mwTemplatePage-description' ], content: data.description || 'No template description.' },									]								)							},						]					);					data.paramOrder.forEach(function(param){						TDSmethods.addElement({ addTo: body, classNames: [ 'oo-ui-layout', 'oo-ui-panelLayout', 'oo-ui-panelLayout-expanded', 'oo-ui-pageLayout', 've-ui-mwParameterPage' ], content: TDSmethods.parseParam(data.params[param], param) });					});					// Close popup document.addEventListener('mouseup', function(event){						console.log(event);						if (event.target.closest('.oo-ui-processDialog-navigation a.oo-ui-buttonElement-button')){							document.querySelector('.ve-ui-overlay-global.ve-ui-overlay-global-desktop.ve-ui-overlay').remove;						}					}); },				addElement: function(options) { if (!options.node){options.node = 'div';} var newNode; console.log('addElement options: ', options); if (options.node !== 'text') { newNode = document.createElement(options.node); if (options.classNames) { options.classNames.forEach(function(className){								if ('string' == typeof className && className.length > 0) {									newNode.classList.add(className);								}							}); }						console.log('classNames check'); if (options.styles) { Object.keys(options.styles).forEach(function(key) {								newNode.style[key] = options.styles[key];							}); }						console.log('styles check'); if (options.attributes) { Object.keys(options.attributes).forEach(function(key) {								newNode.setAttribute(key, options.attributes[key]);							}); }						console.log('attributes check'); if (Array.isArray(options.content) && options.content.length>0) { options.content.forEach(function(content){								if ('string' == typeof content) {									newNode.appendChild(document.createTextNode(content));								}else if ('object' == typeof content && content.ownerDocument) {									newNode.appendChild(content);								}							}); } else if ('string' == typeof options.content) { newNode.appendChild(document.createTextNode(options.content)); }else if ('object' == typeof options.content && options.content.ownerDocument) { newNode.appendChild(options.content); }						console.log('content check'); } else { newNode = document.createTextNode(options.content); } console.log('options.addTo', options.addTo); if (options.addTo) { options.addTo.appendChild(newNode); }					console.log('newNode', newNode); if (!options.noreturn) { return newNode; }				},				nestElements: function(startNode, optionsArray) { var oldNode = startNode; optionsArray.forEach(function(options){						options.addTo = oldNode;						oldNode = TDSmethods.addElement(options);					}); return oldNode; },				listElements: function(parentNode, optionsArray) { var newNodes = []; optionsArray.forEach(function(options){						if (parentNode) {options.addTo = parentNode;}						var newNode = TDSmethods.addElement(options);						if (!parentNode && newNode) {newNodes.push(newNode);}					}); return parentNode || newNodes; },				parseParam: function(data, param) { var param_desc = []; if (data.description) { param_desc.push({							content: data.description,							node: 'p'						}); }					if (data.default) { param_desc.push({							content: 'Default: ' + data.default,							classNames: ['ve-ui-mwParameterPage-doc-default'],							node: 'p'						});} if (data.example) { param_desc.push({							content: 'Example:' + data.example,							classNames: ['ve-ui-mwParameterPage-doc-example'],							node: 'p'						}); }					return TDSmethods.listElements(null,						[							{								classNames: [ 've-ui-mwParameterPage-info' ],								content: TDSmethods.addElement({ classNames: [ 've-ui-mwParameterPage-label', 'oo-ui-widget', 'oo-ui-widget-enabled', 'oo-ui-labelElement', 'oo-ui-labelElement-label', 'oo-ui-labelWidget' ], node: 'label', content: data.label || param })							},							{								classNames: [ 've-ui-mwParameterPage-inlineDescription' ],								content: TDSmethods.listElements(null,param_desc)							},						]					); }			};			document.querySelector('.CodeMirror-code').addEventListener('auxclick', function(event){				TDSmethods.init(event);			}); },	};

betterCodeMirror.init; });