Pengguna:Kenrick95/idwp-gpu.js

//<nowiki>
function IdwpGpuHelper() {
	mw.loader.using("mediawiki.api", function () {
		var api = new mw.Api();
		var text = "{{GP%year%/Usul\n"
		+ "| terpilih = <!-- JANGAN UBAH BARIS INI -->\n"
		+ "| gbr  = %gbr%\n"
		+ "| head = %head%\n"
		+ "| des  = %des%\n"
		+ "| ttd  = ~~~~\n"
		+ "| vote = <!-- BERIKAN SUARA ANDA DI BAWAH BARIS INI -->\n"
		+ "\n"
		+ "}}\n";
		var pageName = "Wikipedia:Gambar_pilihan/Usulan/%year%/Periode_%period%";
		// bind "action" to .idwp-gpu-vote and .idwp-gpu-nom
		// store "period" & "year" at "data-..." attribute
		$(".idwp-gpu-nom").on("click", nominate);
		
		function nominate() {
			var year = $(this).data("year");
			var period = parseInt($(this).data("period"), 10);
			var section = parseInt($(this).data("section"), 10);
			var endslot = "{{GP%year%/Slot}}".replace(/%year%/, year);
			var currentPageName = pageName.replace(/%year%/, year).replace(/%period%/, period);
			
			mw.loader.using('oojs-ui', function() {
			var windowManager = new OO.ui.WindowManager();
	
	        var input = [];
	        input[0] = new OO.ui.TextInputWidget( { 
	        	placeholder: 'Contoh.jpg'
	        } );
	        input[1] = new OO.ui.TextInputWidget( { 
	        	placeholder: 'Contoh nama berkas'
	        } );
	        input[2] = new OO.ui.TextInputWidget( { 
	        	placeholder: 'Deskripsi contoh nama berkas, bla bla bla...'
	        } );
		 
	        // Create a FieldsetLayout.
	        var fieldset = new OO.ui.FieldsetLayout( { 
	        label: 'Formulir untuk mengusulkan gambar pilihan di periode %period% tahun %year%'.replace(/%year%/, year).replace(/%period%/, period),
	        classes: [ "container" ]
	        } );
		 
	        // Use the addItems() method to add FieldLayouts that contain the form 
	        // elements (the text inputs and submit button) to the FieldsetLayout:
	        fieldset.addItems( [ 
	        new OO.ui.FieldLayout( input[0], {
	            label: 'Nama berkas (tanpa awalan "Berkas:")', 
	            align: 'top' 
	        } ),
	        new OO.ui.FieldLayout( input[1], { 
	            label: 'Deskripsi singkat (tanpa markah wiki)',
	            align: 'top' 
	        } ),
	        new OO.ui.FieldLayout( input[2], { 
	            label: 'Deskripsi panjang (memperbolehkan markah wiki)',
	            align: 'top' 
	        } )
	        ] );
	        // /w/api.php?action=opensearch&format=json&search=example&namespace=6&suggest=1
	        // https://www.mediawiki.org/wiki/OOjs_UI/Windows/Process_Dialogs
		 
	        // Add the FieldsetLayout to a FormLayout. 
	        var form = new OO.ui.FormLayout(  {
	        	items: [ fieldset ]
	        } );
	
			// Subclass ProcessDialog.
	        function ProcessDialog( config ) {
	            ProcessDialog.super.call( this, config );
	        }
	        OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog );
	
	        // Specify a static title and actions.
	        ProcessDialog.static.name = 'GPU-nom';
	        ProcessDialog.static.title = 'Pengusulan Gambar Pilihan';
	        ProcessDialog.static.actions = [
	    		{ action: 'save', label: 'Selesai', flags: 'primary' },
	        	{ label: 'Batal', flags: 'safe' }
	        ];
	
	        // Use the initialize() method to add content to the dialog's $body, 
	        // to initialize widgets, and to set up event handlers. 
	        ProcessDialog.prototype.initialize = function () {
	        ProcessDialog.super.prototype.initialize.apply( this, arguments );
	
	        this.content = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } );
	        this.content.$element.append( form.$element );
	            
	        this.$body.append( this.content.$element );    
	        };
	
	        // Use the getActionProcess() method to specify a process to handle the 
	        // actions (for the 'save' action, in this example).
	        ProcessDialog.prototype.getActionProcess = function ( action ) {
	        	
		        var dialog = this;
		        if ( action ) {
		            return new OO.ui.Process( function () {
	        			var gbr = input[0].getValue();
	        			var head = input[1].getValue();
	        			var des = input[2].getValue();
	        			if (!gbr || gbr.length === 0) {
	        				alert("Mohon isikan kolom gambar!");
	        				return;
	        			}
	        			if (!head || head.length === 0) {
	        				alert("Mohon isikan kolom deskripsi singkat!");
	        				return;
	        			}
	        			if (!des || des.length === 0) {
	        				alert("Mohon isikan kolom deskripsi panjang!");
	        				return;
	        			}
	        			
	        			var filled_text = text.replace(/%head%/, head);
	        			filled_text = filled_text.replace(/%gbr%/, gbr);
	        			filled_text = filled_text.replace(/%des%/, des);
	        			filled_text = filled_text.replace(/%year%/, year);
	        			console.log(filled_text);
	        			
	        			api.get({
							action: "query",
							meta: "tokens",
							format: "json",
							prop: "revisions",
							rvprop: "content",
							rvsection: section,
							titles: currentPageName
						}).done(function (data) {
							var token = data.query.tokens.csrftoken,
								pageid = Object.keys(data.query.pages)[0],
								content = data.query.pages[pageid].revisions[0]['*'];
							console.log('content', content);
							var newText = content.replace(endSlot, "");
							newText = nextText + '\n' + filled_text + '\n' + endSlot;
							api.post({
								action: "edit",
								title: currentPageName,
								summary: "Mengusulkan gambar pilihan periode ke-" + period + " tahun " + year,
								section: section,
								token: token,
								appendtext: newText
							}).done(function() {
								alert("Terima kasih telah mengusulkan gambar pilihan!");
							});
						});
	        			
		            	dialog.close( { action: action } );
		            } );
		        }
		        // Fallback to parent handler.
		        return ProcessDialog.super.prototype.getActionProcess.call( this, action );
	        };
	
	        // Get dialog height.
	        ProcessDialog.prototype.getBodyHeight = function () {
	        	return this.content.$element.outerHeight( true );
	        };
	
	        // Create and append the window manager.
	        $( 'body' ).append( windowManager.$element );
	
	        // Create a new dialog window.
	        var processDialog = new ProcessDialog({
	        size: 'small'
	        });
	
	        // Add windows to window manager using the addWindows() method.
	        windowManager.addWindows( [ processDialog ] );
	
	        // Open the window.
	        windowManager.openWindow( processDialog );
			processDialog.setSize("large");
		});
		}
	});
}
//Belum mengerjakan apa-apa
$(IdwpGpuHelper);
//</nowiki>