User:Mikevoir/betterCodeMirror.js

mw.loader.using('mediawiki.api').then(function {	var lib = this._LIB;	var api = new mw.Api;	var $textbox = $( '#wpTextbox' );	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 TDSmethods = { init: function(event) { console.log('reached init: ', event); var checkTemplate = /\{\{([^\}\{\|]+)\|?$/g; $textbox.textSelection('setSelection'); console.log('reached init: ', $textbox); var uptoCaret = $textbox.textSelection('getContent').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){						if ( data && data.parse && data.parse.wikitext && data.parse.wikitext['*'] && tdRegex.test(data.parse.wikitext['*']) ){							console.log('TDSmethods: ', this);							var raw_templateData = data.parse.wikitext['*'].match[0].replace(' ', ).replace(' ', );							var templateData = JSON.parse(raw_templateData);							templateData.TEMPLATE = template;							this.renderTD(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.loadContainer(data); this.loadData(data); },				loadContainer: function(data) { console.log('reached loadContainer: ', data); // 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'					); //Initalize window var frame = this.addElement({						addTo: document.querySelector('body'),						classNames: ['oo-ui-window-frame'],						styles: {							width: '900px',							height: '90%'						}					}); document.body.insertBefore(frame, document.body.children[0]); //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[param], param) });					});				},				addElement: function(options) { options.node = options.node || 'div'; var newNode; 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);								}							}); }						if (options.styles) { Object.keys(data.styles).forEach(function(key) {								newNode.style[key] = data.styles[key];							}); }						if (options.attributes) { Object.keys(data.attributes).forEach(function(key) {								newNode.setAttribute(key, data.attributes[key]);							}); }						if (Array.isArray(options.content) && options.content.length>0) { options.content.forEach(function(content){								if ('string' == typeof content) {									newNode.append(document.createTextNode(content));								}else if ('object' == typeof content && content.ownerDocument) {									newNode.append(content);								}							}); } else if ('string' == typeof options.content) { newNode.append(document.createTextNode(options.content)); }else if ('object' == typeof options.content && options.content.ownerDocument) { newNode.append(options.content); }					} else { newNode = document.createTextNode(options.content); } if (!options.addTo) { options.addTo.append(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) { console.log('reached loadContainer: ', data); var param_desc = []; if (data.description) { param_desc.push({							content: data.description,							node: 'p'						}); }					if (data.default) { param_desc.push({							content: data.default,							classNames: ['ve-ui-mwParameterPage-doc-default'],							node: 'p'						});} if (data.example) { param_desc.push({							content: 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').addEventListener('mouseup', function(event){				TDSmethods.init(event);			}); },	};

betterCodeMirror.init; });