main.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /*
  2. Localization
  3. To add more locales, add to the html file with // (translated text)
  4. after each DOM elements with attr i18n
  5. And then add the language ISO key to the list below.
  6. */
  7. let languages = ['en', 'zh', 'jp', 'zh-cn'];
  8. //Bind language change dropdown events
  9. $(".dropdown").dropdown();
  10. $("#language").on("change",function(){
  11. let newLang = $("#language").parent().dropdown("get value");
  12. i18n.changeLanguage(newLang);
  13. $("body").attr("class", newLang);
  14. });
  15. //Initialize the i18n dom library
  16. var i18n = domI18n({
  17. selector: '[i18n]',
  18. separator: ' // ',
  19. languages: languages,
  20. defaultLanguage: 'en'
  21. });
  22. i18n.changeLanguage('en');
  23. /* Main Menu */
  24. $("#rwdmenubtn").on("click", function(){
  25. $("#mainmenu").slideToggle("fast");
  26. })
  27. //Handle resize
  28. $(window).on("resize", function(){
  29. if (window.innerWidth > 960){
  30. $("#mainmenu").show();
  31. }else{
  32. $("#mainmenu").hide();
  33. }
  34. })
  35. /*
  36. Slideshow rendering routine
  37. */
  38. const slides = document.querySelector('.slides');
  39. const slideCount = document.querySelectorAll('.slide').length;
  40. let dots = document.querySelectorAll('.dot');
  41. let currentIndex = 0;
  42. let slideInterval;
  43. //Generate the dots per slides
  44. function initSlideshowDots(){
  45. let imageSlides = $(".slideshow").find(".slide");
  46. for(var i=0; i<imageSlides.length; i++){
  47. $(".slideshow").find(".dots").append(`<span class="${i==0?"active":""} dot" onclick="currentSlide(${i})"></span>`);
  48. }
  49. dots = document.querySelectorAll('.dot');;
  50. }
  51. initSlideshowDots();
  52. function showNextSlide() {
  53. currentIndex = (currentIndex + 1) % slideCount;
  54. updateSlidePosition();
  55. }
  56. function currentSlide(index) {
  57. currentIndex = index;
  58. updateSlidePosition();
  59. resetInterval();
  60. }
  61. function updateSlidePosition() {
  62. const offset = -currentIndex * 100;
  63. slides.style.transform = `translateX(${offset}%)`;
  64. updateDots();
  65. }
  66. function updateDots() {
  67. dots.forEach((dot, index) => {
  68. dot.classList.toggle('active', index === currentIndex);
  69. });
  70. }
  71. function resetInterval() {
  72. clearInterval(slideInterval);
  73. slideInterval = setInterval(showNextSlide, 5000);
  74. }
  75. slideInterval = setInterval(showNextSlide, 5000);
  76. dots.forEach((dot, index) => {
  77. dot.addEventListener('click', () => currentSlide(index));
  78. });
  79. /*
  80. Download
  81. */
  82. $('.menu .item').tab();
  83. //Download webpack and binary at the same time
  84. function handleDownload(releasename){
  85. let binaryURL = "https://github.com/tobychui/arozos/releases/latest/download/" + releasename;
  86. window.open(binaryURL);
  87. }
  88. function handleGetWebpack(){
  89. let webpackURL = "https://github.com/tobychui/arozos/releases/latest/download/web.tar.gz";
  90. window.open(webpackURL);
  91. }
  92. /* RWD */
  93. window.addEventListener('scroll', function() {
  94. var scrollPosition = window.scrollY || window.pageYOffset;
  95. var windowHeight = window.innerHeight;
  96. var hiddenDiv = document.querySelector('#backToTopBtn');
  97. if (scrollPosition > windowHeight / 2) {
  98. hiddenDiv.style.display = 'block';
  99. } else {
  100. hiddenDiv.style.display = 'none';
  101. }
  102. });
  103. function backToTop(){
  104. $('html, body').animate({scrollTop : 0},800, function(){
  105. window.location.hash = "";
  106. });
  107. }