MediaWiki:Common.js: различия между версиями

Текущая версия на 17:10, 23 апреля 2024

// functions
var fnLoad = {
  module: function( name ) {
    mw.loader.load( name );
  },
  script: function( name ) {
    mw.loader.load( '/wiki/index.php?title=mediawiki:scripts/' + name + '.js&ctype=text%2Fjavascript&action=raw' );
  },
  style: function ( name ) {
    DOMhead.append( '<link rel="stylesheet" href="/wiki/index.php?title=mediawiki:styles/' + name + '.css&ctype=text%2Fcss&action=raw">' );
  }
};

// date
var date = new Date();

// common dom elements
var DOMhtml,
    DOMhead,
    DOMbody,
    DOMcontent,
    DOMmwNavigation,
    DOMfirstHeading;
$( function() {
  DOMhtml = $( 'html' );
  DOMhead = $( 'head' );
  DOMbody = $( 'body' );
  DOMcontent = $( '#content' );
  DOMmwNavigation = $( '#mw-navigation' );
  DOMfirstHeading = $( '#firstHeading, .firstHeading' );
} );

// user info
var user = {
  anonymous: undefined,
  id: mw.config.get( 'wgUserId' )
};
if ( user.id != null ) {
  user.anonymous = false;
} else {
  user.anonymous = true;
};

// redirect anonymous users from special pages
$( function() {
  if (
    user.anonymous &&
    mw.config.get( 'wgNamespaceNumber' ) != 0 && 
    mw.config.get( 'wgNamespaceNumber' ) != 10 && 
    mw.config.get( 'wgCanonicalSpecialPageName' ) != 'Search'
  ) {
    window.location.replace( '/wiki/' );
  };
} );

// modules customization 
$( function() {
  $( 'link[href*="skins.vector.styles"]' ).each( function() {
    var href = $( 'link[href*="skins.vector.styles"]' ).attr( 'href' );
    href = href.replace( /skins.vector.styles/i, '' );
    href = href.replace( /mediawiki.toc.styles/i, '' );
    href = href.replace( /mediawiki.skinning.interface/i, '' );
    href = href.replace( /mediawiki.legacy.commonPrint%2Cshared/i, '' );
    $( this ).attr( 'href', href );
  } );
} );

// design system
var breakpoint = {
  width: {
    game: 1012,
    desktop: 1280,
    tablet: 720,
    mobile: 320
  },
  height: {
    game: 682
  }
};
var device;
$( window ).resize( function() {
  device = {
    width: $( window ).width(),
    height: $( window ).height(),
    type: undefined
  };
  if (
    device.width == breakpoint.width.game &&
    device.height <= breakpoint.height.game
  ) {
    device.type = 'game';
  } else if ( device.width < breakpoint.width.tablet ) {
    device.type = 'mobile';
  } else if ( device.width < breakpoint.width.desktop ) {
    device.type = 'tablet';
  } else {
    device.type = 'desktop';
  };
} );
$( window ).resize();

// add html/css/js to the page
$( function() {
  $( '.add_html' ).each( function() {
    $( this )
      .after( $( this ).text() )
      .remove();
  } );
  $( '.add_css' ).each( function() {
    $( this )
      .after( '<style>' + $( this ).text() + '</style>' )
      .remove();
  } );
  $( '[data-style]' ).each( function() {
    var attrStyle = $( this ).attr( 'style' ),
        attrDataStyle = $( this ).attr( 'data-style' ),
        attrStyleNew;
    if ( attrStyle != undefined ) {
      attrStyleNew = attrStyle + ' ' + attrDataStyle;
    } else {
      attrStyleNew = attrDataStyle;
    };
    $( this )
      .attr( 'style', attrStyleNew )
      .removeAttr( 'data-style' );
  } );
  $( '.add_js' ).each( function() {
    fnLoad.script( $( this ).text() );
    $( this ).remove();
  } );
} );

// google analytics
var googleAnalytics = {
  constructor: function() {
    var html =
        '<noscript>'
      + '<iframe src="//www.googletagmanager.com/ns.html?id=GTM-NLDGMH4" height="0" width="0" style="display: none; visibility: hidden;"></iframe>'
      + '</noscript>';
    DOMbody.prepend( html );
  }
};
$( googleAnalytics.constructor );

// meta
var meta = {
  constructor: function() {
    var html =
        '<meta http-equiv="X-UA-Compatible" content="IE=edge">'
      + '<meta name="viewport" content="width=device-width, initial-scale=1.0">'
      + '<meta name="HandheldFriendly" content="true">'
      + '<meta name="MobileOptimized" content="width">'
      + '<meta name="apple-mobile-web-app-capable" content="yes">'
      + '<link rel="apple-touch-icon" sizes="57x57" href="/wiki/images/9/9d/Apple-touch-icon-57x57.png">'
      + '<link rel="apple-touch-icon" sizes="60x60" href="/wiki/images/0/03/Apple-touch-icon-60x60.png">'
      + '<link rel="apple-touch-icon" sizes="72x72" href="/wiki/images/1/15/Apple-touch-icon-72x72.png">'
      + '<link rel="apple-touch-icon" sizes="76x76" href="/wiki/images/e/e2/Apple-touch-icon-76x76.png">'
      + '<link rel="apple-touch-icon" sizes="114x114" href="/wiki/images/1/15/Apple-touch-icon-114x114.png">'
      + '<link rel="apple-touch-icon" sizes="120x120" href="/wiki/images/8/85/Apple-touch-icon-120x120.png">'
      + '<link rel="apple-touch-icon" sizes="144x144" href="/wiki/images/a/a2/Apple-touch-icon-144x144.png">'
      + '<link rel="apple-touch-icon" sizes="152x152" href="/wiki/images/5/5d/Apple-touch-icon-152x152.png">'
      + '<link rel="apple-touch-icon" sizes="180x180" href="/wiki/images/4/49/Apple-touch-icon-180x180.png">'
      + '<link rel="icon" type="image/png" sizes="16x16" href="/wiki/images/c/c5/Favicon-16x16.png">'
      + '<link rel="icon" type="image/png" sizes="32x32" href="/wiki/images/4/46/Favicon-32x32.png">'
      + '<link rel="icon" type="image/png" sizes="96x96" href="/wiki/images/4/43/Favicon-96x96.png">'
      + '<link rel="shortcut icon" href="//la-static.prod-my.games/static/images/favicon/favicon.ico" type="image/x-icon">'
      + '<link rel="icon" href="//la-static.prod-my.games/static/images/favicon/favicon.ico" type="image/x-icon">';
    DOMhead.prepend( html );
  }
};
$( meta.constructor );

// preloader (start)
var preloader = {
  constructor: function() {
    var html =
        '<div class="preloader">'
      + '<img class="preloader__img preloader__img--0" src="https://la-static.prod-my.games/static/images/preloader/preloader_00.png">'
      + '<img class="preloader__img preloader__img--1" src="https://la-static.prod-my.games/static/images/preloader/preloader_01.png">'
      + '<img class="preloader__img preloader__img--2" src="https://la-static.prod-my.games/static/images/preloader/preloader_02.png">'
      + '<img class="preloader__img preloader__img--3" src="https://la-static.prod-my.games/static/images/preloader/preloader_03.png">'
      + '<img class="preloader__img preloader__img--4" src="https://la-static.prod-my.games/static/images/preloader/preloader_04.png">'
      + '</div>';
    DOMbody
      .prepend( html )
      .addClass( 'body--preloader_active' )
      .show();
  },
  hide: function() {
    $( '.preloader' ).hide();
    DOMbody.removeClass( 'body--preloader_active' );
  }
};
$( preloader.constructor );

// navigation
var DOMnavigation,
    DOMnavigationHamburger,
    DOMnavigationMenu,
    DOMnavigationMenuLink;
var navigation = {
  constructor: function() {
    var html =
        '<section class="navigation-section">'
      + '<div class="user-header flex align-i--center">'
      + '<div class="user-header__left-side flex">'
      + '<a class="user-header__link" href="/l/support" target="_blank">Поддержка</a>'
      + '<a class="user-header__link" href="/promocode">Активировать промокод</a>'
      + '<a class="user-header__link" href="/inventory">Мои предметы</a>'
      + '</div>'
      + '<div class="user-header__right-side"></div>'
      + '</div>'
      + '<div class="navigation">'
      + '<a class="navigation__logo" href="/"></a>'
      + '<button class="navigation__hamburger"></button>'
      + '<div class="navigation__mobile">'
      + '<nav class="navigation__menu"></nav>'
      + '<div class="navigation__button flex flex--center"><a class="button button--medium" href="/download">Скачать игру</a></div>'
      + '</div>'
      + '</div>'
      + '</section>';
    DOMbody.prepend( html );
    DOMnavigation = $( '.navigation' );
    DOMnavigationHamburger = $( '.navigation__hamburger' );
    DOMnavigationMenu = $( '.navigation__menu' );
    DOMnavigationMenu.load( '/ .navigation__menu-list', function( response, status, xhr ) {
      if ( status == 'success' ) {
        DOMnavigationMenuLink = $( '.navigation__menu-link' );
        DOMnavigationMenuLink.on( 'click', function() {
          if ( device.type == 'mobile' ) {
            $( this )
              .parent()
              .toggleClass( 'is-open' );
            return false;
          };
        } );
      };
    } );
    DOMnavigationHamburger.on( 'click', function() {
      DOMnavigation.toggleClass( 'is-open' );
    } );
  }
};
$( navigation.constructor );

// header
var header = {
  constructor: function() {
    var html =
        '<div class="header">'
      + '<img class="header__img" src="/wiki/images/9/98/Bg.jpg">'
      + '</div>';
    DOMbody.prepend( html );
  }
};
$( header.constructor );

// footer
var footer = {
  constructor: function() {
    var html =
        '<footer class="footer">'
      + '<div class="footer__socials flex flex--center">'
      + '<a class="footer__social" href="https://vk.com/lostark" target="_blank"><i class="icon icon-social-vkontakte"></i></a>'
      + '<a class="footer__social" href="https://www.youtube.com/LOSTARKRU" target="_blank"><i class="icon icon-social-youtube"></i></a>'
      + '<a class="footer__social" href="https://discord.com/invite/lostarkru" target="_blank"><i class="icon icon-social-discord"></i></a>'
      + '<a class="footer__social" href="https://ok.ru/group/54524030353588" target="_blank"><i class="icon icon-social-odnoklassniki"></i></a>'
      + '<a class="footer__social" href="https://www.twitch.tv/lostark_ru" target="_blank"><i class="icon icon-social-twitch"></i></a>'
      + '<a class="footer__social" href="https://t.me/playlostark_ru" target="_blank"><i class="icon icon-social-telegram"></i></a>'
      + '</div>'
      + '<div class="footer__logos flex flex--center">'
      + '<img class="footer__logo" src="//la-static.vkplay.ru/static/images/common/footer-logo-smilegate.svg" width="147px">'
      + '<a href="https://astrum-entertainment.ru/" target="_blank"><img class="footer__logo" src="//la-static.vkplay.ru/static/images/common/footer-logo-astrum.svg" width="147px"></a>'
      + '<a href="https://vkplay.ru/" target="_blank"><img class="footer__logo" src="//la-static.vkplay.ru/static/images/common/footer-logo-vkplay.svg" width="146px"></a>'
      + '</div>'
      + '<div class="footer__copyright">'
      + '<p>©' + date.getFullYear() + ' Smilegate RPG, Inc. Published by <a href="https://astrum-entertainment.ru/" target="_blank">ООО "АСТРУМ"</a>.</p>'
      + '<p>All rights reserved. All trademarks are the property of their respective owners.</p>'
      + '</div>'
      + '<div class="footer__links flex flex--center">'
      + '<a class="footer__link" href="/l/support" target="_blank">Поддержка</a>'
      + '<a class="footer__link" href="/documents">Документы</a>'
      + '<div class="footer__pegi-wrap">'
      + '<div class="footer__pegi flex align-i--center justify-c--end">12+</div>'
      + '</div>'
      + '</div>'
      + '</footer>';
    DOMbody.append( html );
    $( '#footer' ).remove();
  }
};
$( footer.constructor );

// error page
var errorPage = {
  constructor: function() {
    if( $( '#error-page' ).length ) {
      var html =
          '<section class="error-page">'
        + '<div class="error-page__wrap flex align-i--center flex-dir--col">'
        + '<h1 class="error-page__title">Страница не существует или удалена</h1>'
        + '<p class="error-page__text"><a href="/wiki/">Вернуться на главную страницу</a></p>'
        + '<div class="error-page__num">404</div>'
        + '</div>'
        + '</section>';
      DOMbody
        .prepend( html )
        .addClass( 'body--error-page_active' );
    };
  }
};
$( errorPage.constructor );

// page heading
var heading = {
  constructor: function() {
    if( $( '.heading' ).length ) {
      DOMfirstHeading.remove();
    };
  }
};
$( heading.constructor );

// toc
var toc = {
  constructor: function() {
    var html = '<i class="icon icon-arrow-decor pagedetail__toc-icon"></i>';
    if ( $( '#toc, .toc' ).length ) {
      $( '.toctitle h2' ).append( html );
    };
  }
};
$( toc.constructor );


/*--[navigation wiki]--*/
var DOMnavigationWiki;
var navigationWiki = {
  constructor: function() {
    DOMnavigationWiki = $( '.navigation-wiki' );
    DOMnavigationWiki.removeAttr( 'style' );
  }
};
$( navigationWiki.constructor );
/*--[/navigation wiki]--*/


/*--[search]--*/
var DOMsearchForm,
    DOMsearchInput,
    DOMsuggestions,
    DOMnavigationWikiIconSearch,
    DOMnavigationWikiIconSearchCross,
    DOMsearchSection;
var search = {
  constructor: function() {
    DOMsearchForm = $( '#searchform' );
    DOMsearchInput = $( '#searchInput' );
    DOMnavigationWikiIconSearch = $( '.navigation-wiki__icon--search' );
    DOMnavigationWikiIconSearchCross = $( '.navigation-wiki__icon--search-cross' );
    DOMsearchInput.removeAttr( 'title' );
    if ( mw.config.get( 'wgPageName' ) == 'Main' ) {
      DOMsearchSection = $( '.section-search' );
      DOMsearchSection.append( DOMsearchForm );
      DOMsearchInput.on( 'click', function() {
        $( this ).off( 'click' );
        DOMsuggestions = $( '.suggestions' );
        DOMsuggestions.addClass( 'suggestions--main' );
      } );
    } else {
      DOMnavigationWiki.prepend( DOMsearchForm );
      search.searchOpen();
      search.searchClose();
      DOMsearchInput.on( 'click', function() {
        $( this ).off( 'click' );
        DOMsuggestions = $( '.suggestions' );
        DOMsuggestions.addClass( 'suggestions--navigation-wiki' );
      } );
    };
  },
  searchOpen: function() {
    DOMnavigationWikiIconSearch.on( 'click', function() {
      $( this ).addClass( 'is-open' );
      DOMsearchForm.addClass( 'is-open' );
      DOMnavigationWikiIconSearchCross.addClass( 'is-open' );
      DOMsearchInput.focus();
    } );
  },
  searchClose: function() {
    DOMnavigationWikiIconSearchCross.on( 'click', function() {
      $( this ).removeClass( 'is-open' );
      DOMsearchForm.removeClass( 'is-open' );
      DOMnavigationWikiIconSearch.removeClass( 'is-open' );
      DOMsearchInput.val( '' );
    } );
  }
};
$( search.constructor );
/*--[/search]--*/


// read also
var readAlso = {
  constructor: function() {
    if( $( '.read-also' ).length ) {
      var html = '<div class="read-also-section"></div>';
      DOMcontent.after( html );
      $( '.read-also-section' ).html( $( '.read-also' ) );
    };
  }
};
$( readAlso.constructor );

// spoiler
var spoiler = {
  constructor: function() {
    DOMbody.on( 'click', '.spoiler__title', function() {
      $( this )
        .parent()
        .toggleClass( 'is-open' );
    } );
  }
};
$( spoiler.constructor );

/*--[youtube]--*/
var youtubeIframe = {
  constructor: function() {
  if( device.type == 'game' ) {
    $( 'iframe[src*="youtube"]' )
    .attr( 'sandbox', 'allow-same-origin allow-scripts' )
    .wrap('<div class="iframe-wrap--youtube"></div>');
    $( '.iframe-wrap--youtube' ).each( function() {
      $( this ).after( $( '.iframe-wrap--youtube' ).text() );
    } );
  };
  }
};
$( youtubeIframe.constructor );
/*--[/youtube]--*/

// web iframe
var webIframe = {
  constructor: function() {
    if ( $( '.web-iframe' ).length ) {
      DOMbody.addClass( 'body--web-iframe' );
    };
  }
};
$( webIframe.constructor );

// legasy
$( function() {
  var html = $('html'),
    head = $('head'),
    body = $('body');
  var jsPopup = $('.js-popup').parent();
  jsPopup.on('click', function() {
    body
      .addClass('popup-opened')
      .append('<div class="popup"><div class="popup__overlay"><div class="popup__wrap"><div class="popup__image-wrapper"><div class="popup__image"><img src="' + $(this).attr('href') + '"></div></div><div class="popup__closer controller-close"></div></div></div></div>');
    return false;
  });
  body.on('click', '.popup__overlay, .popup__closer', function() {
    body.removeClass('popup-opened');
    $('.popup').remove();
  });
  $('.link_target_blank').on('click', 'a', function() {
    $(this).attr('target', '_blank');
  });
  if ($('.itemdic').length) {
    head.append('<link rel="stylesheet" href="/wiki/index.php?title=MediaWiki:Itemdic.css&ctype=text%2Fcss&action=raw">');
    $.getScript('/wiki/index.php?title=MediaWiki:Itemdic.js&ctype=text%2Fjavascript&action=raw');
  };

  if ($('[data-key]').length) {
    $.getScript('/wiki/index.php?title=MediaWiki:Data-json.js&ctype=text%2Fjavascript&action=raw');
  };

  if ($('[data-filter-target]').length) {
    $('[data-filter-target]').on('click', function() {
        var filterTarget = $(this).attr('data-filter-target'),
          filterParent = $(this).closest('[data-filter-parent='+filterTarget+']'),
            filterValue = $(this).attr('data-filter-value');
      filterParent.attr('data-filter-active', filterValue);
      filterParent.find('[data-filter-target='+filterTarget+']').removeClass('type-active');
      filterParent.find('[data-filter-target-'+filterTarget+']').hide();
      $(this).addClass('type-active');
      filterParent.find('[data-filter-target-'+filterTarget+'='+filterValue+']').show();
    });
  };

  if ($('#web-iframe').length) {
    html.addClass('web-iframe');
  };

  function cssDictionary() {
    head.append('<link rel="stylesheet" href="/wiki/index.php?title=Template:Css/dictionary&ctype=text%2Fcss&action=raw">');
  };
  function cssInfobox() {
    head.append('<link rel="stylesheet" href="/wiki/index.php?title=Template:Css/infobox&ctype=text%2Fcss&action=raw">');
  };
  function cssItem() {
    head.append('<link rel="stylesheet" href="/wiki/index.php?title=Template:Css/item&ctype=text%2Fcss&action=raw">');
  };
  function jsDictionary() {
    $.getScript('/wiki/index.php?title=MediaWiki:Js/dictionary&ctype=text%2Fjavascript&action=raw');
  };
  if ($('.dictionary').length) {
    cssDictionary();
    cssInfobox();
    cssItem();
    jsDictionary();
  };
  if ($('.infobox').length) {
    cssInfobox();
    cssItem();
  };
  if ($('.itembox').length) {
    cssItem();
  };

  $('[data-sort]').on('click', function() {
    var sortSelect = $(this),
        sortSelects = sortSelect.parent(),
        sortTarget = sortSelect.attr('data-sort'),
        sortValue = sortSelect.attr('data-sort-value'),
        sortParent = sortSelect.closest('[data-sort-parent="' + sortTarget + '"]');
    sortSelects.children('.is-active').removeClass('is-active');
    sortSelect.addClass('is-active');
    sortParent.find('[data-sort-' + sortTarget + ']').hide();
    if (sortValue > 0) {
      sortParent.find('[data-sort-' + sortTarget + '*="' + sortValue + '"]').show();
    } else {
      sortParent.find('[data-sort-' + sortTarget + ']').show();
    };
  });
  if (document.getElementById('la-iframe')) {
    document.querySelector('body').classList.add("la-iframe");
  };
} );

// preloader (end)
$( function() {
  if ( user.anonymous ) {
    preloader.hide();
  } else {
    preloader.hide();
  };
} );