ব্যবহারকারী:মোহাম্মদ মারুফ/tag.js

TwinkleLite = window.TwinkleLite || {};
(function ($) {
  //namespace of that page
  const namespace = mw.config.get("wgNamespaceNumber");
  // Create a Twinkle Box container and append it to the body of the HTML document
  var twinkleBox = $("<div id='twinkleBox'></div>").appendTo("body");

  // Define the base URL for fetching data
  const baseurl = "/w/index.php?title=ব্যবহারকারী:মোহাম্মদ মারুফ/";

  // Define the main Twinkle function
  TwinkleLite.twinkle = function (callback) {
    // Fetch data from the base URL
    fetch(baseurl + "meta.json&action=raw")
      .then((res) => res.json())
      .then((data) => {
        //apper twinkle
        twinkleBox.css("display", "grid");
        // Define a mapping of data types to their corresponding labels
        const map = [
          ["tag", "sdlist", "dlist"],
          ["ট্যাগ", "দ্রুত অপসারণ প্রস্তাবনা", "অপসারণ প্রস্তাবনা"],
        ];

        // Create a close button for the Twinkle Box
        var closebtn = $(
          `<a href="#" class="oo-ui-buttonElement-frameless oo-ui-widget-enabled oo-ui-flaggedElement-destructive" role="button"><span class="oo-ui-buttonElement-button">বাতিল</span></a>`
        );

        // Append the close button to the Twinkle Box
        twinkleBox.append(
          $(
            `<div class="tw-title"><span class="morebits-dialog-scriptname">টুইংকল লাইট</span></div>`
          ).append(closebtn)
        );

        // Create a radio button for selecting "other" options
        const otherradio = $(
          `<li><input type='radio' name='tw-radio' id='tw-otherradio'><span>অন্য কারণ</span></li>`
        );

        // Create an input box for entering custom text
        var inputBox = $('<input type="text">').attr("class", "otherinp hide");

        // Loop through each data type and create a corresponding section in the Twinkle Box
        for (var i = 0; i < 3; i++) {
          // Create a container for the current data type
          var bdbox = $(
            `<div id='${map[0][i]}' class='tw-bdbox'></div>`
          ).appendTo(twinkleBox);

          // Add a header for the current data type
          $(`<h4>${map[1][i]}</h4>`).appendTo(bdbox);

          // Create an unordered list for the current data type
          const ul = $("<ul></ul>").appendTo(bdbox);

          // Loop through each option for the current data type
          for (j in data[map[0][i]]) {
            // Create a list item for the current option
            const elem = data[map[0][i]][j];
            if (
              elem.namespace.includes(namespace) ||
              elem.namespace.includes("All")
            ) {
              var type = i > 0 ? "radio" : "checkbox";
              var option = $(
                `<li><input type='${type}' value='${j}' name='tw-radio'><span title='${elem.description}'>${elem.title}</span></li>`
              );
              // Append the list item to the unordered list
              option.appendTo(ul);
            }
          }

          // If this is the last data type, add the "other" radio button and input box
          if (i == 2) {
            ul.append(otherradio);
            ul.append(inputBox);
          }
        }

        // Add an event listener to the "dlist" section to toggle the visibility of the input box
        $("#dlist").on("click", () => {
          if (document.getElementById("tw-otherradio").checked) {
            inputBox.attr("class", "otherinp show");
          } else {
            inputBox.attr("class", "otherinp hide");
          }
        });
        // Create a submit button for the Twinkle Box
        const subBtn = $(
          `<span class="oo-ui-buttonElement-framed oo-ui-widget-enabled oo-ui-flaggedElement-primary oo-ui-flaggedElement-progressive"><input type="submit" tabindex="6" title="জমা দিন" name="wpSave" id="wpSave" value="জমা দিন" class="oo-ui-buttonElement-button"></span>`
        );

        // Append the submit button to the Twinkle Box
        $('<div class="subbtncnt"></div>').appendTo(twinkleBox).append(subBtn);
        var twbdbox = $(".tw-bdbox");
        twbdbox[Math.floor(Math.random() * 3)].classList.add("active");
        closebtn.on("click", () => {
          TwinkleLite.manage();
        });
        //activation
        twbdbox.on("click", (e) => {
          // Toggle active class on twbdbox elements
          if (!e.currentTarget.classList.contains("active")) {
            document
              .querySelector(".tw-bdbox.active")
              .classList.remove("active");
            e.currentTarget.classList.add("active");
          }
        });

        subBtn.on("click", () => {
          // Get active twbdbox and selected inputs
          var selector = document.querySelectorAll("div.tw-bdbox.active")[0];
          var selecteds = selector.querySelectorAll("input:checked");
          var result = { type: "", array: [] };

          // Process selected inputs
          for (var i = 0; i < selecteds.length; i++) {
            if (selecteds[i].id == "tw-otherradio") {
              // Handle "other" radio button
              result.type = "other";
              if (inputBox.val().length > 3) {
                result.array.push(inputBox.val());
              } else {
                alert("অপসারণের কারণ লিখুন");
              }
            } else {
              result.type = selector.id;
              // Add selected value to result array
              result.array.push(data[selector.id][selecteds[i].value]);
            }
          }
          // Call callback and close dialog if valid inputs found
          if (result.array.length) {
            callback(result);
            TwinkleLite.manage();
          }
        });
      });
  };
  TwinkleLite.manage = function (newmsg) {
    twinkleBox.empty();
    if (newmsg) {
      twinkleBox.append("<div class='msg'>" + newmsg + "</div>");
      twinkleBox.css("display", "flex");
    } else {
      twinkleBox.css("display", "none");
    }
  };
})(jQuery);