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 filledText = text.replace(/%head%/, head);
              filledText = filledText.replace(/%gbr%/, gbr);
              filledText = filledText.replace(/%des%/, des);
              filledText = filledText.replace(/%year%/, year);

              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]["*"];
                  var newText = content.replace(endSlot, "");
                  newText = newText + filledText + endSlot;
                  api
                    .post({
                      action: "edit",
                      title: currentPageName,
                      summary:
                        "Mengusulkan gambar pilihan periode ke-" +
                          period +
                          " tahun " +
                          year,
                      section: section,
                      token: token,
                      text: 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");
      });
    }
  });
}
$(IdwpGpuHelper);
//</nowiki>