|
|
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */
| |
| /**
| |
| * Keep code in MediaWiki:Common.js to a minimum as it is unconditionally
| |
| * loaded for all users on every wiki page. If possible create a gadget that is
| |
| * enabled by default instead of adding it here (since gadgets are fully
| |
| * optimized ResourceLoader modules with possibility to add dependencies etc.)
| |
| *
| |
| * Since Common.js isn't a gadget, there is no place to declare its
| |
| * dependencies, so we have to lazy load them with mw.loader.using on demand and
| |
| * then execute the rest in the callback. In most cases these dependencies will
| |
| * be loaded (or loading) already and the callback will not be delayed. In case a
| |
| * dependency hasn't arrived yet it'll make sure those are loaded before this.
| |
| */
| |
|
| |
| /* global mw, $ */
| |
| /* jshint strict:false, browser:true */
| |
|
| |
| mw.loader.using( [ 'mediawiki.util' ] ).done( function () {
| |
| /* Begin of mw.loader.using callback */
| |
|
| |
| /**
| |
| * Main Page layout fixes
| |
| *
| |
| * Description: Adds an additional link to the complete list of languages available.
| |
| * Maintainers: [[User:AzaToth]], [[User:R. Koot]], [[User:Alex Smotrov]]
| |
| */
| |
| if ( mw.config.get( 'wgPageName' ) === 'Main_Page' || mw.config.get( 'wgPageName' ) === 'Talk:Main_Page' ) {
| |
| $( function () {
| |
| mw.util.addPortletLink( 'p-lang', '//meta.bharatmedia.org/wiki/List_of_Bharatpedias',
| |
| 'Complete list', 'interwiki-completelist', 'Complete list of Bharatpedias' );
| |
| } );
| |
| }
| |
|
| |
| /**
| |
| * Map addPortletLink to mw.util
| |
| * @deprecated: Use mw.util.addPortletLink instead.
| |
| */
| |
| mw.log.deprecate( window, 'addPortletLink', mw.util.addPortletLink, 'Use mw.util.addPortletLink instead' );
| |
|
| |
| /**
| |
| * Extract a URL parameter from the current URL
| |
| * @deprecated: Use mw.util.getParamValue with proper escaping
| |
| */
| |
| mw.log.deprecate( window, 'getURLParamValue', mw.util.getParamValue, 'Use mw.util.getParamValue instead' );
| |
|
| |
| /**
| |
| * Test if an element has a certain class
| |
| * @deprecated: Use $(element).hasClass() instead.
| |
| */
| |
| mw.log.deprecate( window, 'hasClass', function ( element, className ) {
| |
| return $( element ).hasClass( className );
| |
| }, 'Use jQuery.hasClass() instead' );
| |
|
| |
| /**
| |
| * @source www.mediawiki.org/wiki/Snippets/Load_JS_and_CSS_by_URL
| |
| * @rev 6
| |
| */
| |
| var extraCSS = mw.util.getParamValue( 'withCSS' ),
| |
| extraJS = mw.util.getParamValue( 'withJS' );
| |
|
| |
| if ( extraCSS ) {
| |
| if ( extraCSS.match( /^MediaWiki:[^&<>=%#]*\.css$/ ) ) {
| |
| mw.loader.load( '/index.php?title=' + extraCSS + '&action=raw&ctype=text/css', 'text/css' );
| |
| } else {
| |
| mw.notify( 'Only pages from the MediaWiki namespace are allowed.', { title: 'Invalid withCSS value' } );
| |
| }
| |
| }
| |
|
| |
| if ( extraJS ) {
| |
| if ( extraJS.match( /^MediaWiki:[^&<>=%#]*\.js$/ ) ) {
| |
| mw.loader.load( '/index.php?title=' + extraJS + '&action=raw&ctype=text/javascript' );
| |
| } else {
| |
| mw.notify( 'Only pages from the MediaWiki namespace are allowed.', { title: 'Invalid withJS value' } );
| |
| }
| |
| }
| |
|
| |
| /**
| |
| * Collapsible tables; reimplemented with mw-collapsible
| |
| * Styling is also in place to avoid FOUC
| |
| *
| |
| * Allows tables to be collapsed, showing only the header. See [[Help:Collapsing]].
| |
| * @version 3.0.0 (2018-05-20)
| |
| * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-collapsibleTables.js
| |
| * @author [[User:R. Koot]]
| |
| * @author [[User:Krinkle]]
| |
| * @author [[User:TheDJ]]
| |
| * @deprecated Since MediaWiki 1.20: Use class="mw-collapsible" instead which
| |
| * is supported in MediaWiki core. Shimmable since MediaWiki 1.32
| |
| *
| |
| * @param {jQuery} $content
| |
| */
| |
| function makeCollapsibleMwCollapsible( $content ) {
| |
| var $tables = $content
| |
| .find( 'table.collapsible:not(.mw-collapsible)' )
| |
| .addClass( 'mw-collapsible' );
| |
|
| |
| $.each( $tables, function ( index, table ) {
| |
| // mw.log.warn( 'This page is using the deprecated class collapsible. Please replace it with mw-collapsible.');
| |
| if ( $( table ).hasClass( 'collapsed' ) ) {
| |
| $( table ).addClass( 'mw-collapsed' );
| |
| // mw.log.warn( 'This page is using the deprecated class collapsed. Please replace it with mw-collapsed.');
| |
| }
| |
| } );
| |
| if ( $tables.length > 0 ) {
| |
| mw.loader.using( 'jquery.makeCollapsible' ).then( function () {
| |
| $tables.makeCollapsible();
| |
| } );
| |
| }
| |
| }
| |
| mw.hook( 'wikipage.content' ).add( makeCollapsibleMwCollapsible );
| |
|
| |
| /**
| |
| * Add support to mw-collapsible for autocollapse, innercollapse and outercollapse
| |
| *
| |
| * Maintainers: TheDJ
| |
| */
| |
| function mwCollapsibleSetup( $collapsibleContent ) {
| |
| var $element,
| |
| $toggle,
| |
| autoCollapseThreshold = 2;
| |
| $.each( $collapsibleContent, function ( index, element ) {
| |
| $element = $( element );
| |
| if ( $element.hasClass( 'collapsible' ) ) {
| |
| $element.find( 'tr:first > th:first' ).prepend( $element.find( 'tr:first > * > .mw-collapsible-toggle' ) );
| |
| }
| |
| if ( $collapsibleContent.length >= autoCollapseThreshold && $element.hasClass( 'autocollapse' ) ) {
| |
| $element.data( 'mw-collapsible' ).collapse();
| |
| } else if ( $element.hasClass( 'innercollapse' ) ) {
| |
| if ( $element.parents( '.outercollapse' ).length > 0 ) {
| |
| $element.data( 'mw-collapsible' ).collapse();
| |
| }
| |
| }
| |
| // because of colored backgrounds, style the link in the text color
| |
| // to ensure accessible contrast
| |
| $toggle = $element.find( '.mw-collapsible-toggle' );
| |
| if ( $toggle.length ) {
| |
| // Make the toggle inherit text color
| |
| if ( $toggle.parent()[ 0 ].style.color ) {
| |
| $toggle.find( 'a' ).css( 'color', 'inherit' );
| |
| }
| |
| }
| |
| } );
| |
| }
| |
|
| |
| mw.hook( 'wikipage.collapsibleContent' ).add( mwCollapsibleSetup );
| |
|
| |
| /**
| |
| * Dynamic Navigation Bars (experimental)
| |
| *
| |
| * Description: See [[Wikipedia:NavFrame]].
| |
| * Maintainers: UNMAINTAINED
| |
| */
| |
|
| |
| var collapseCaption = 'hide';
| |
| var expandCaption = 'show';
| |
|
| |
| // Set up the words in your language
| |
| var navigationBarHide = '[' + collapseCaption + ']';
| |
| var navigationBarShow = '[' + expandCaption + ']';
| |
|
| |
| /**
| |
| * Shows and hides content and picture (if available) of navigation bars.
| |
| *
| |
| * @param {number} indexNavigationBar The index of navigation bar to be toggled
| |
| * @param {jQuery.Event} event Event object
| |
| * @return {boolean}
| |
| */
| |
| function toggleNavigationBar( indexNavigationBar, event ) {
| |
| var navToggle = document.getElementById( 'NavToggle' + indexNavigationBar );
| |
| var navFrame = document.getElementById( 'NavFrame' + indexNavigationBar );
| |
| var navChild;
| |
|
| |
| if ( !navFrame || !navToggle ) {
| |
| return false;
| |
| }
| |
|
| |
| // If shown now
| |
| if ( navToggle.firstChild.data === navigationBarHide ) {
| |
| for ( navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling ) {
| |
| if ( $( navChild ).hasClass( 'NavContent' ) ) {
| |
| navChild.style.display = 'none';
| |
| }
| |
| }
| |
| navToggle.firstChild.data = navigationBarShow;
| |
|
| |
| // If hidden now
| |
| } else if ( navToggle.firstChild.data === navigationBarShow ) {
| |
| for ( navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling ) {
| |
| if ( $( navChild ).hasClass( 'NavContent' ) ) {
| |
| navChild.style.display = 'block';
| |
| }
| |
| }
| |
| navToggle.firstChild.data = navigationBarHide;
| |
| }
| |
|
| |
| event.preventDefault();
| |
| }
| |
|
| |
| /**
| |
| * Adds show/hide-button to navigation bars.
| |
| *
| |
| * @param {jQuery} $content
| |
| */
| |
| function createNavigationBarToggleButton( $content ) {
| |
| var j, navChild, navToggle, navToggleText, isCollapsed,
| |
| indexNavigationBar = 0;
| |
| // Iterate over all < div >-elements
| |
| var $divs = $content.find( 'div.NavFrame:not(.mw-collapsible)' );
| |
| $divs.each( function ( i, navFrame ) {
| |
| indexNavigationBar++;
| |
| navToggle = document.createElement( 'a' );
| |
| navToggle.className = 'NavToggle';
| |
| navToggle.setAttribute( 'id', 'NavToggle' + indexNavigationBar );
| |
| navToggle.setAttribute( 'href', '#' );
| |
| $( navToggle ).on( 'click', $.proxy( toggleNavigationBar, null, indexNavigationBar ) );
| |
|
| |
| isCollapsed = $( navFrame ).hasClass( 'collapsed' );
| |
| /**
| |
| * Check if any children are already hidden. This loop is here for backwards compatibility:
| |
| * the old way of making NavFrames start out collapsed was to manually add style="display:none"
| |
| * to all the NavPic/NavContent elements. Since this was bad for accessibility (no way to make
| |
| * the content visible without JavaScript support), the new recommended way is to add the class
| |
| * "collapsed" to the NavFrame itself, just like with collapsible tables.
| |
| */
| |
| for ( navChild = navFrame.firstChild; navChild !== null && !isCollapsed; navChild = navChild.nextSibling ) {
| |
| if ( $( navChild ).hasClass( 'NavPic' ) || $( navChild ).hasClass( 'NavContent' ) ) {
| |
| if ( navChild.style.display === 'none' ) {
| |
| isCollapsed = true;
| |
| }
| |
| }
| |
| }
| |
| if ( isCollapsed ) {
| |
| for ( navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling ) {
| |
| if ( $( navChild ).hasClass( 'NavPic' ) || $( navChild ).hasClass( 'NavContent' ) ) {
| |
| navChild.style.display = 'none';
| |
| }
| |
| }
| |
| }
| |
| navToggleText = document.createTextNode( isCollapsed ? navigationBarShow : navigationBarHide );
| |
| navToggle.appendChild( navToggleText );
| |
|
| |
| // Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked)
| |
| for ( j = 0; j < navFrame.childNodes.length; j++ ) {
| |
| if ( $( navFrame.childNodes[ j ] ).hasClass( 'NavHead' ) ) {
| |
| navToggle.style.color = navFrame.childNodes[ j ].style.color;
| |
| navFrame.childNodes[ j ].appendChild( navToggle );
| |
| }
| |
| }
| |
| navFrame.setAttribute( 'id', 'NavFrame' + indexNavigationBar );
| |
| } );
| |
| }
| |
|
| |
| mw.hook( 'wikipage.content' ).add( createNavigationBarToggleButton );
| |
|
| |
| /**
| |
| * Magic editintros ****************************************************
| |
| *
| |
| * Description: Adds editintros on disambiguation pages and BLP pages.
| |
| * Maintainers: [[User:RockMFR]]
| |
| *
| |
| * @param {string} name
| |
| */
| |
| function addEditIntro( name ) {
| |
| $( '.mw-editsection, #ca-edit, #ca-ve-edit' ).find( 'a' ).each( function ( i, el ) {
| |
| el.href = $( this ).attr( 'href' ) + '&editintro=' + name;
| |
| } );
| |
| }
| |
|
| |
| if ( mw.config.get( 'wgNamespaceNumber' ) === 0 ) {
| |
| $( function () {
| |
| if ( document.getElementById( 'disambigbox' ) ) {
| |
| addEditIntro( 'Template:Disambig_editintro' );
| |
| }
| |
| } );
| |
|
| |
| $( function () {
| |
| var cats = mw.config.get( 'wgCategories' );
| |
| if ( !cats ) {
| |
| return;
| |
| }
| |
| if ( $.inArray( 'Living people', cats ) !== -1 || $.inArray( 'Possibly living people', cats ) !== -1 ) {
| |
| addEditIntro( 'Template:BLP_editintro' );
| |
| }
| |
| } );
| |
| }
| |
|
| |
| /* Actions specific to the edit page */
| |
| if ( mw.config.get( 'wgAction' ) === 'edit' || mw.config.get( 'wgAction' ) === 'submit' ) {
| |
| /**
| |
| * Fix edit summary prompt for undo
| |
| *
| |
| * Fixes the fact that the undo function combined with the "no edit summary prompter"
| |
| * complains about missing editsummary, if leaving the edit summary unchanged.
| |
| * Added by [[User:Deskana]], code by [[User:Tra]].
| |
| * See also [[phab:T10912]].
| |
| */
| |
| $( function () {
| |
| if ( document.location.search.indexOf( 'undo=' ) !== -1 && document.getElementsByName( 'wpAutoSummary' )[ 0 ] ) {
| |
| document.getElementsByName( 'wpAutoSummary' )[ 0 ].value = '1';
| |
| }
| |
| } );
| |
| }
| |
|
| |
| /* End of mw.loader.using callback */
| |
| } );
| |
|
| |
| mw.hook('wikipage.content').add(function(){ | | mw.hook('wikipage.content').add(function(){ |
|
| |
|
| Line 315: |
Line 9: |
| return; | | return; |
| } | | } |
|
| |
| buildBharatpediaHomepage();
| |
|
| |
| });
| |
|
| |
| async function buildBharatpediaHomepage(){
| |
|
| |
|
| const root = | | const root = |
| Line 331: |
Line 19: |
| root.innerHTML = ` | | root.innerHTML = ` |
|
| |
|
| <div class="bp-shell"> | | <div style=" |
| | | background:#fff; |
| <main class="bp-main"> | | padding:40px; |
| | | border-radius:20px; |
| <div id="bp-hero"></div>
| | font-size:40px; |
| | | "> |
| <div id="bp-good-grid"></div>
| |
| | |
| <div id="bp-feed"></div>
| |
| | |
| </main> | |
| | |
| <aside class="bp-sidebar"> | |
| | |
| <div class="bp-side-card">
| |
| | |
| <div class="bp-side-head">
| |
| | |
| <h3>
| |
| On this day
| |
| </h3>
| |
| | |
| <div class="bp-arrows">
| |
| | |
| <button id="bp-otd-prev">
| |
| ←
| |
| </button>
| |
| | |
| <button id="bp-otd-next">
| |
| →
| |
| </button>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| <div id="bp-on-this-day">
| |
| | |
| <div class="bp-otd-item">
| |
| | |
| <b>1975</b>
| |
| | |
| Sikkim officially became
| |
| a state of India.
| |
| | |
| </div>
| |
| | |
| <div class="bp-otd-item">
| |
| | |
| <b>1861</b>
| |
| | |
| Rabindranath Tagore
| |
| was born in Kolkata.
| |
| | |
| </div>
| |
| | |
| <div class="bp-otd-item">
| |
| | |
| <b>2008</b>
| |
| | |
| India expanded its
| |
| lunar mission programme.
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| <div class="bp-side-card">
| |
| | |
| <h3>
| |
| Bookmarks
| |
| </h3>
| |
| | |
| <div class="bp-side-text">
| |
| | |
| Sign in to save articles
| |
| and read them later.
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| <div class="bp-side-card">
| |
|
| |
|
| <h3>
| | JS WORKING |
| Top categories
| |
| </h3>
| |
| | |
| <div id="bp-categories"></div>
| |
| | |
| </div>
| |
| | |
| </aside> | |
|
| |
|
| </div> | | </div> |
| Line 431: |
Line 32: |
| `; | | `; |
|
| |
|
| buildHero();
| | }); |
| buildGoodCards();
| |
| | |
| await buildTrendingFeed();
| |
| await buildRecentFeed();
| |
| | |
| buildCategories();
| |
| initOnThisDay();
| |
| | |
| }
| |
| | |
| function randomItems(sourceId,count){
| |
| | |
| const source =
| |
| document.querySelector(sourceId);
| |
| | |
| if(!source){
| |
| return [];
| |
| }
| |
| | |
| const items = [
| |
| ...source.querySelectorAll(
| |
| 'li'
| |
| )
| |
| ];
| |
| | |
| return items
| |
| .sort(()=>0.5-Math.random())
| |
| .slice(0,count);
| |
| | |
| }
| |
| | |
| function buildHero(){
| |
| | |
| const items =
| |
| randomItems(
| |
| '#bp-featured-source',
| |
| 1
| |
| );
| |
| | |
| if(!items.length){
| |
| return;
| |
| }
| |
| | |
| const item = items[0];
| |
| | |
| const img =
| |
| item.querySelector('img')?.src || '';
| |
| | |
| const title =
| |
| item.querySelector('a')?.textContent ||
| |
| 'Featured article';
| |
| | |
| const text =
| |
| item.textContent
| |
| .trim()
| |
| .substring(0,280);
| |
| | |
| document.querySelector(
| |
| '#bp-hero'
| |
| ).innerHTML = `
| |
| | |
| <article class="bp-hero">
| |
| | |
| <div class="bp-hero-content">
| |
| | |
| <div class="bp-label">
| |
| | |
| Featured article
| |
| | |
| </div>
| |
| | |
| <h1 class="bp-hero-title">
| |
| | |
| ${title}
| |
| | |
| </h1>
| |
| | |
| <div class="bp-desc">
| |
| | |
| ${text}...
| |
| | |
| </div>
| |
| | |
| <div class="bp-meta">
| |
| | |
| <span>
| |
| Bharatpedia
| |
| </span>
| |
| | |
| <span>
| |
| Featured
| |
| </span>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| <div class="bp-hero-image">
| |
| | |
| <img src="${img}">
| |
| | |
| </div>
| |
| | |
| </article>
| |
| | |
| `;
| |
| | |
| }
| |
| | |
| function buildGoodCards(){
| |
| | |
| const items =
| |
| randomItems(
| |
| '#bp-good-source',
| |
| 2
| |
| );
| |
| | |
| let html =
| |
| '<div class="bp-two-grid">';
| |
| | |
| items.forEach(item=>{
| |
| | |
| const img =
| |
| item.querySelector('img')?.src || '';
| |
| | |
| const title =
| |
| item.querySelector('a')?.textContent ||
| |
| 'Article';
| |
| | |
| const text =
| |
| item.textContent
| |
| .trim()
| |
| .substring(0,120);
| |
| | |
| html += `
| |
| | |
| <article class="bp-card">
| |
| | |
| <div class="bp-card-img">
| |
| | |
| <img src="${img}">
| |
| | |
| </div>
| |
| | |
| <div class="bp-label">
| |
| | |
| Good article
| |
| | |
| </div>
| |
| | |
| <div class="bp-card-title">
| |
| | |
| ${title}
| |
| | |
| </div>
| |
| | |
| <div class="bp-desc">
| |
| | |
| ${text}...
| |
| | |
| </div>
| |
| | |
| </article>
| |
| | |
| `;
| |
| | |
| });
| |
| | |
| html += '</div>';
| |
| | |
| document.querySelector(
| |
| '#bp-good-grid'
| |
| ).innerHTML = html;
| |
| | |
| }
| |
| | |
| async function buildTrendingFeed(){
| |
| | |
| const feed =
| |
| document.querySelector('#bp-feed');
| |
| | |
| const res =
| |
| await fetch(
| |
| | |
| mw.util.wikiScript('api') +
| |
| | |
| '?action=query&list=recentchanges' +
| |
| '&rcnamespace=0' +
| |
| '&rclimit=6' +
| |
| '&format=json' +
| |
| '&origin=*'
| |
| | |
| );
| |
| | |
| const data =
| |
| await res.json();
| |
| | |
| data.query.recentchanges.forEach((item,i)=>{
| |
| | |
| const large =
| |
| i % 4 === 0;
| |
| | |
| feed.innerHTML += `
| |
| | |
| <article class="${
| |
| large
| |
| ? 'bp-feed-large'
| |
| : 'bp-feed-card'
| |
| }">
| |
| | |
| <div class="${
| |
| large
| |
| ? 'bp-feed-large-content'
| |
| : 'bp-feed-content'
| |
| }">
| |
| | |
| <div class="bp-label">
| |
| | |
| Trending
| |
| | |
| </div>
| |
| | |
| <div class="${
| |
| large
| |
| ? 'bp-feed-large-title'
| |
| : 'bp-feed-title'
| |
| }">
| |
| | |
| ${item.title}
| |
| | |
| </div>
| |
| | |
| <div class="bp-desc">
| |
| | |
| Trending across Bharatpedia
| |
| readers today.
| |
| | |
| </div>
| |
| | |
| <div class="bp-meta">
| |
| | |
| <span>
| |
| Popular now
| |
| </span>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| <div class="${
| |
| large
| |
| ? 'bp-feed-large-img'
| |
| : 'bp-feed-img'
| |
| }">
| |
| | |
| <img src="
| |
| https://picsum.photos/900/700?random=${
| |
| Math.random()
| |
| }
| |
| ">
| |
| | |
| </div>
| |
| | |
| </article>
| |
| | |
| `;
| |
| | |
| });
| |
| | |
| } | |
| | |
| async function buildRecentFeed(){
| |
| | |
| const feed =
| |
| document.querySelector('#bp-feed');
| |
| | |
| const res =
| |
| await fetch(
| |
| | |
| mw.util.wikiScript('api') +
| |
| | |
| '?action=query&list=recentchanges' +
| |
| '&rctype=new' +
| |
| '&rcnamespace=0' +
| |
| '&rclimit=6' +
| |
| '&format=json' +
| |
| '&origin=*'
| |
| | |
| );
| |
| | |
| const data =
| |
| await res.json();
| |
| | |
| const items =
| |
| randomItems(
| |
| '#bp-featured-list-source',
| |
| 2
| |
| );
| |
| | |
| let html =
| |
| '<div class="bp-two-grid">';
| |
| | |
| items.forEach(item=>{
| |
| | |
| const img =
| |
| item.querySelector('img')?.src || '';
| |
| | |
| const title =
| |
| item.querySelector('a')?.textContent ||
| |
| 'Featured list';
| |
| | |
| const text =
| |
| item.textContent
| |
| .trim()
| |
| .substring(0,120);
| |
| | |
| html += `
| |
| | |
| <article class="bp-card">
| |
| | |
| <div class="bp-card-img">
| |
| | |
| <img src="${img}">
| |
| | |
| </div>
| |
| | |
| <div class="bp-label">
| |
| | |
| Featured list
| |
| | |
| </div>
| |
| | |
| <div class="bp-card-title">
| |
| | |
| ${title}
| |
| | |
| </div>
| |
| | |
| <div class="bp-desc">
| |
| | |
| ${text}...
| |
| | |
| </div>
| |
| | |
| </article>
| |
| | |
| `;
| |
| | |
| });
| |
| | |
| html += '</div>';
| |
| | |
| feed.innerHTML += html;
| |
| | |
| data.query.recentchanges.forEach(item=>{
| |
| | |
| feed.innerHTML += `
| |
| | |
| <article class="bp-feed-card">
| |
| | |
| <div class="bp-feed-content">
| |
| | |
| <div class="bp-label">
| |
| | |
| New article
| |
| | |
| </div>
| |
| | |
| <div class="bp-feed-title">
| |
| | |
| ${item.title}
| |
| | |
| </div>
| |
| | |
| <div class="bp-desc">
| |
| | |
| Recently created article
| |
| on Bharatpedia.
| |
| | |
| </div>
| |
| | |
| <div class="bp-meta">
| |
| | |
| <span>
| |
| Recently created
| |
| </span>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| <div class="bp-feed-img">
| |
| | |
| <img src="
| |
| https://picsum.photos/700/500?random=${
| |
| Math.random()
| |
| }
| |
| ">
| |
| | |
| </div>
| |
| | |
| </article>
| |
| | |
| `;
| |
| | |
| });
| |
| | |
| }
| |
| | |
| function buildCategories(){
| |
| | |
| const cats = [
| |
| | |
| ['Politics',1200],
| |
| ['History',980],
| |
| ['Science',850],
| |
| ['Culture',760],
| |
| ['Biography',650]
| |
| | |
| ];
| |
| | |
| const max =
| |
| Math.max(...cats.map(c=>c[1]));
| |
| | |
| let html='';
| |
| | |
| cats.forEach(cat=>{
| |
| | |
| html += `
| |
| | |
| <div class="bp-cat">
| |
| | |
| <div class="bp-cat-row">
| |
| | |
| <span>
| |
| ${cat[0]}
| |
| </span>
| |
| | |
| <span>
| |
| ${cat[1]}
| |
| </span>
| |
| | |
| </div>
| |
| | |
| <div class="bp-bar">
| |
| | |
| <span style="
| |
| width:${
| |
| (cat[1]/max)*100
| |
| }%;
| |
| "></span>
| |
| | |
| </div>
| |
| | |
| </div>
| |
| | |
| `;
| |
| | |
| });
| |
| | |
| document.querySelector(
| |
| '#bp-categories'
| |
| ).innerHTML = html;
| |
| | |
| }
| |
| | |
| function initOnThisDay(){
| |
| | |
| const items = [
| |
| | |
| ...document.querySelectorAll(
| |
| '.bp-otd-item'
| |
| )
| |
| | |
| ];
| |
| | |
| let index = 0;
| |
| | |
| items.forEach((item,i)=>{
| |
| | |
| item.style.display =
| |
| i === 0
| |
| ? 'block'
| |
| : 'none';
| |
| | |
| });
| |
| | |
| function show(){
| |
| | |
| items.forEach((item,i)=>{
| |
| | |
| item.style.display =
| |
| i === index
| |
| ? 'block'
| |
| : 'none';
| |
| | |
| });
| |
| | |
| }
| |
| | |
| document.querySelector(
| |
| '#bp-otd-next'
| |
| ).onclick = function(){
| |
| | |
| index++;
| |
| | |
| if(index >= items.length){
| |
| index = 0;
| |
| }
| |
| | |
| show();
| |
| | |
| };
| |
| | |
| document.querySelector(
| |
| '#bp-otd-prev'
| |
| ).onclick = function(){
| |
| | |
| index--;
| |
| | |
| if(index < 0){
| |
| index = items.length-1;
| |
| }
| |
| | |
| show();
| |
| | |
| };
| |
| | |
| }
| |
| /* DO NOT ADD CODE BELOW THIS LINE */
| |
