User:Indic-TechCom/Script/infoboxInWikidata.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/*
	@Author:
		* [[User:Swayam Agrahari]],
		* [[User:Pirajesh00]]
		* [[User:Kirtisikka]]
		* [[User:Akshaya108]]
		* [[User:Harigovind C B]]
*/

(function (mw, $) {
  "use strict";

  $(document).ready(function () {
  	// Stop when page is not Wikidata item
  	if(mw.config.get("wgPageName")[0] !== 'Q' ){
  		return ;
  	}
    // Create a new div element for the sidebar
    var sidebar = $('<div>', {
      class: 'customSidebar'
    }).appendTo('body');

    var arrow = $('<div>', {
      class: 'toggleArrow',
      html: '&#60;' // Left arrow HTML entity
    }).appendTo('body');

    sidebar.css({
      'position': 'fixed',
      'top': '90px',
      'right': '-400px', // Initially off-screen
      'width': '400px',
      'max-height': '80vh', // Limit height to 80% of viewport height
      'background-color': '#f0f0f0',
      'padding': '20px',
      'box-shadow': '2px 0 5px rgba(0,0,0,0.1)',
      'z-index': '1000',
      'overflow-y': 'scroll', // Allow vertical scrolling
      'display': 'none',
      'transition': 'right 0.4s' // Smooth transition for sidebar
    });

    arrow.css({
      'position': 'fixed',
      'top': '80px',
      'right': '10px',
      'padding': '10px',
      'background-color': '#E0E0E0',
      'color': '#000',
      'border': 'none',
      'border-radius': '50%', // Circular button
      'cursor': 'pointer',
      'z-index': '1001',
      'font-size': '24px',
      'font-weight': 'bold',
      'width': '40px',
      'height': '40px',
      'display': 'flex',
      'align-items': 'center',
      'justify-content': 'center',
      'transition': 'right 0.4s' // Smooth transition for arrow
    });

    function toggleSidebar() {
      if (sidebar.css('right') === '0px') {
        sidebar.css('right', '-500px'); // Hide sidebar
        arrow.css('right', '10px'); // Move arrow to original position
        arrow.html('&#60;'); // Change to left arrow
      } else {
        sidebar.css('right', '0'); // Show sidebar
        arrow.css('right', '410px'); // Move arrow with sidebar
        arrow.html('&#62;'); // Change to right arrow
      }
    }

    // Bind the toggle function to the arrow
    arrow.click(toggleSidebar);

    // Fetch the label from Wikidata API and then fetch the infobox from Wikipedia API
    const id = mw.config.get("wgPageName"); // Replace with the desired Wikidata ID
    const wikidataUrl = `https://www.wikidata.org/w/api.php?action=wbgetentities&format=json&ids=${id}&formatversion=2&origin=*`;

    fetch(wikidataUrl)
      .then(response => response.json())
      .then(data => {
        const label = data.entities[id].labels.en.value;

        const wikiUrl = `https://en.wikipedia.org/w/api.php?action=parse&page=${label}&format=json&origin=*`;
        return fetch(wikiUrl);
      })
      .then(response => response.json())
      .then(data => {
        const parsedHTML = data.parse.text['*'];

        // Create a jQuery object from the parsed HTML
        const $parsedHTML = $(parsedHTML);

        // Find the table with class "infobox" and append it to the sidebar
        const infoboxTable = $parsedHTML.find('.infobox');
        sidebar.append(infoboxTable);
        sidebar.show(); // Show sidebar once content is loaded
      })
      .catch(error => console.error("Error fetching data:", error));
  });
}(mediaWiki, jQuery));