מדיה ויקי:Gadget-validate-template-params.js

// window.pvem_first = true;
window.mw.hook( 'wikipage.content' ).add( function( content ) {
	if ( $( '.paramvalidator-wrapper',  content ).length ) // page contains errors - let's get to work.
		mw.loader.using( ['mediawiki.util', 'mediawiki.storage', 'oojs-ui', 'site', 'user'] ).done( function() {
			const
				docuPage = 'חב"דפדיה:מערכת בדיקת פרמטרים/תיקון שגיאות',
				exposeVal = 'expose',
				firstVal = 'first',
				stickyVal = 'sticky',
				stickyKey = 'pvemLastState';
			var
				behavior = window.pvem_behavior,
				$allErrors = $('.paramvalidator-wrapper').addClass('pvem-wrapper'),
				numErrors = $allErrors.length,
				tooltip = numErrors > 1 
						? 'יש בדף שגיאות פרמטריות ב-' + numErrors + ' תבניות ' 
						: 'יש בדף שגיאה פרמטרית בתבנית',
				buttonsOfActions = {},
				popupButton = new OO.ui.PopupButtonWidget( {
					label: '{{' + numErrors + '}}',
					title: tooltip,
					flags: [
						'primary',
						'destructive'
					],
					indicator: 'down',
					classes: ['pvem-main-button'],
					popup: {
						padded: true,
						expanded: true,
        				align: 'center',
						classes: ['pven-popup'],
						width: 800,
						head: true,
						label: 'שגיאות ממערכת בקרת הפרמטרים',
						$content: $('<div>')
							.append(createButtons())
							.append($('<p>'))
							.append(buildContent())
					}
				} );

			function adjustVisible() {
				if (buttonsOfActions[expose]) {
					var visible = $('.pvem-wrapper.pvem-visible').length;
					buttonsOfActions[hide].setDisabled(!visible);
					buttonsOfActions[expose].setDisabled(visible);
				}
			}
			
			function exposeOrHide(toExpose) {
				$allErrors
					.toggleClass('pvem-visible', toExpose)
					.nextAll()
						.toggleClass('pvem-faulty-template', toExpose);
				adjustVisible();
				mw.storage.set(stickyKey, toExpose ? exposeVal : '');
			}
				
			function expose() {
				// find collapsed elements containing warnings, and expand them
				$('.mw-collapsible:has(.paramvalidator-wrapper)')
					.find('.mw-collapsible-toggle-collapsed a')
						.click();
				exposeOrHide(true); 
			}
			
			function hide() { exposeOrHide(false); }
				
			function goto_error(n) {
				expose();
				window.location.href = '#pvem-' + n;
			}
				
			function first() { goto_error(1); }
			
			function gotoDocuPage() { window.location.href = mw.util.getUrl(docuPage); }
			
			function confirmdOptOut() {
				if (OO.ui.confirm($('<div>')
						.append($('<p>').text("אם תאשרו את הפעולה, יבוטל הגאדג'ט בהעדפות שלכם, ולא תראו יותר את ההודעות הללו.")
						).append($('<p>').text("תוכלו להפעילו שוב בכל זמן, דרך העדפות => גאדג'טים."))
				   	))
					opt_out();
			}
			
			function createButtons() {
				function makeButton(label, action) {
					var button = new OO.ui.ButtonWidget( {
							label: label
						} )
						.on('click', action);
					buttonsOfActions[action] = button;
					return button.$element;
				}
				
				return $('<div>')
					.addClass('pvem-buttons')
					.append(makeButton('חשיפת השגיאות', expose))
					.append(makeButton('הסתרת השגיאות', hide))
					.append(makeButton('הסבר והנחיות', gotoDocuPage))
					.append(makeButton('להפסיק לקבל הודעות', confirmdOptOut));
			}
			
			function buildContent() {
				var 
					idPrefix = 'pvem-',  //ParamValidatorErrorMessage
					current = 1,
					div = $('<div>').addClass('pvem-errorlist');
					
				function addMessage($message, anchor) {
					var $processed;
					$message.find('p, input').remove(); //todo:remove this once common.js is cleaned
					try {
						$processed = $($message.html());
					} catch(ex) {
						$processed = $('<span>').text($message.text());
					}
					$processed.find('br').remove();
					$('<p>')
						.append($('<a>', { href: anchor, title: 'לשגיאה' })
							.text('לשגיאה ↓')
							.click(function() {
								expose();
								mw.storage.set(stickyKey, firstVal);
							})
							.addClass('pvem-message-link')
						)
						.append($processed)
						.appendTo(div);
				}
				
				$allErrors.
					each(function() {
						var 
							id =  idPrefix + current++,
							anchor = '#' + id,
							$message = $(this).attr('id', id);
								
						addMessage($message, anchor);
					});
				return div;
			}
				
			function opt_out() {
				mw.loader.using(['mediawiki.api', 'mediawiki.user']).done(function() {
					new mw.Api().post( {
						action: 'options',
						optionname: "gadget-validate-template-params",
						optionvalue: 0,
						token: mw.user.tokens.get('csrfToken')
					}); // post
				}); // using
			}
			
			$( mw.util.addPortletLink('p-views', '#', 'שגיאות פרמטריות',  'ca-paramerrors') )
				.addClass( 'validator-portlet' )
				.empty()
				.append(popupButton.$element);
			
			function behave(behavior) {
				switch (behavior) {
					case exposeVal: 
						expose();
						break;
					case firstVal:
						setTimeout(first, 200);
						break;
					case stickyVal:
						behave(mw.storage.get(stickyKey));
						break;
				}
			}
			
			importStylesheet('Mediawiki:Gadget-validate-template-params.css'); 
			adjustVisible();
			behave(behavior);
		} );
} );