From 5ae85a8216bcc4ccf67c3e3a867f677d03aa3d09 Mon Sep 17 00:00:00 2001 From: Eltrac <45323514+BigCoke233@users.noreply.github.com> Date: Fri, 23 Aug 2019 14:28:18 +0800 Subject: Add: Pjax Fade-in Animation and others --- assets/js/miracles.min.js | 187 +++++++++++++++++++++++++++++----------------- 1 file changed, 117 insertions(+), 70 deletions(-) (limited to 'assets') diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js index 992c0df..edfd152 100644 --- a/assets/js/miracles.min.js +++ b/assets/js/miracles.min.js @@ -1,7 +1,8 @@ /* * The main JavaScript file for Theme Miracles - * Author: Eltrac - * License: MIT + * + * @Author: Eltrac + * @License: MIT */ /** @@ -161,56 +162,15 @@ function bodyScroll(event){ event.preventDefault(); } function banScroll() { - $('html').css({'overflow':'hidden'}); + $('html').css({'overflow':'hidden','padding-right':'9px'}); } function allowScroll() { - $('html').css({'overflow':'auto'}); -} - -/** - * Open pannel - */ -//Search -function Search() { - $(".search").toggleClass("ready"); - $(".search-close").toggleClass("ready"); - //Ban or allow scroll - if($(".search").hasClass("ready")) { - allowScroll(); - }else{ - banScroll(); - } -} -//mobileMenu -function toggleMobileMenu() { - $(".mobile-menu").toggleClass("ready"); - $(".mobile-menu-close").toggleClass("ready"); - //Ban or allow scroll - if($(".mobile-menu").hasClass("ready")) { - allowScroll(); - }else{ - banScroll(); - } -} -//Login -function Login() { - $(".login").toggleClass("ready"); - $(".login-close").toggleClass("ready"); - //Ban or allow scroll - if($(".login").hasClass("ready")) { - allowScroll(); - }else{ - banScroll(); - } + $('html').css({'overflow':'auto','padding-right':'0'}); } /** * Front Options Pannel */ -//FrontOptions -function toggleOptions() { - $(".options").toggleClass("ready"); -} //FontFamily function ChangeToSerif() { $('body').addClass('body-serif'); @@ -269,6 +229,32 @@ function toggleOptions() { $('.options-sizelarge').addClass('options-button-active'); } +/** + * Open pannel + */ +//Search +function Search() { + $(".search").toggleClass("ready"); + $(".search-close").toggleClass("ready"); + //Ban or allow scroll + if($(".search").hasClass("ready")) { + allowScroll(); + }else{ + banScroll(); + } +} +//Login +function Login() { + $(".login").toggleClass("ready"); + $(".login-close").toggleClass("ready"); + //Ban or allow scroll + if($(".login").hasClass("ready")) { + allowScroll(); + }else{ + banScroll(); + } +} + /** * Drawer */ @@ -309,31 +295,66 @@ $(document).ready(function() { }); /** - * Load Live2D + * Event Listeners */ -var config = { - model: { - jsonPath: modelJson // 加载模型的json路径 - }, - display: { - superSample: 1, // 超采样等级 - width: modelWidth, // canvas的宽度 - height: modelHeight, // canvas的高度 - position: 'left', // 显示位置：左或右 - hOffset: 12, // canvas水平偏移 - vOffset: 0, // canvas垂直偏移 - }, - mobile: { - show: false, // 是否在移动设备上显示 - scale: 0.6, // 移动设备上的缩放 - motion: false, // 移动设备是否开启重力感应 - }, - react: { - opacityDefault: 1, // 默认透明度 - opacityOnHover: 1 // 鼠标移上透明度 - } +/* GetElementById */ +function idGetEl(id) { + var el = document.getElementById(id); + return el; } -L2Dwidget.init(config); + +/* Find Elements */ +var goTopButton = idGetEl("gotop"); +var fullMask = idGetEl("full-mask"); +var searchCloseButton = idGetEl("search-close-button"); +var searchOpenButton = idGetEl("search-open-button"); +var searchOpenMobile = idGetEl("search-open-mobile"); +var loginCloseButton = idGetEl("login-close"); +var loginOpenButton = idGetEl("login-open"); +var loginOpenMobile = idGetEl("login-open-mobile"); +var toggleMobileMenuClose = idGetEl("toggle-mobile-menu-close"); +var toggleMobileMenu = idGetEl("toggle-mobile-menu-button"); +var toggleOptions = idGetEl("toggle-options-button"); +var toggleOptionsMobile = idGetEl("toggle-options-mobile"); +var alertCloseButton = idGetEl("alert-close"); +var drawerButton = idGetEl("drawer-button"); + +/* Add Listeners */ +//返回顶部按钮 +goTopButton.addEventListener("click", GoTop); +//全屏遮罩（抽屉栏） +fullMask.addEventListener("click", function(){ + toggleDrawer(); + $('.options').addClass('ready'); +}); +//打开/关闭搜索面板 +searchCloseButton.addEventListener("click", Search); +searchOpenButton.addEventListener("click", Search); +searchOpenMobile.addEventListener("click", Search); +//打开/关闭登录面板 +loginCloseButton.addEventListener("click", Login); +loginOpenButton.addEventListener("click", Login); +loginOpenMobile.addEventListener("click", Login); +//开关移动端导航 +toggleMobileMenuClose.addEventListener("click", function(){ + $(".mobile-menu").toggleClass("ready"); + $(".mobile-menu-close").toggleClass("ready"); + allowScroll(); +}); +toggleMobileMenu.addEventListener("click", function(){ + $(".mobile-menu").toggleClass("ready"); + $(".mobile-menu-close").toggleClass("ready"); + banScroll(); +}); +//开关设置面板 +toggleOptions.addEventListener("click", function(){ + $(".options").toggleClass("ready"); +}); +toggleOptionsMobile.addEventListener("click", function(){ + $(".options").toggleClass("ready"); +}); +//关闭 Alert +alertCloseButton.addEventListener("click", alertClose); /** * Load Pjax @@ -343,15 +364,41 @@ if(loadPjax = true) { container: '#pjax-container',fragment: '#pjax-container',timeout: 8000 }).on('pjax:send', function () { GoTop(); + //Others beforePjax(); }).on('pjax:complete', function () { + //Front-end Login $('form#login-form').addClass('need-refresh'); + //Close Mobile Menu after pjax finishes + $(".mobile-menu").addClass("ready"); + $(".mobile-menu-close").addClass("ready"); + allowScroll(); + //Animation + $(".post-list").addClass("fadein").hide().fadeIn(300); + $(".post-body").addClass("fadein").hide().fadeIn(300); + $(".comment").addClass("fadein").hide().fadeIn(300); + $("#pjax-container").css({'height':'auto'}); + //NProgress NProgress.done(); + //Reload LazyLoad(); PrismReload(); - afterPjax(); panguLoad(); + //Others + afterPjax(); }); } -console.info("© This site powered by Typecho used by Theme Miracles"); \ No newline at end of file +/** + * Comply First + */ +(function() { + panguLoad(); + LazyLoad(); + PrismLoad(); +})(); + +/** + * Copyright + */ +console.log("%c 🎉 Theme Miracles %c by Eltrac %c 仓库: https://github.com/BigCoke233/miracles %c 演示：https://guhub.cn","color: #fff; margin: 1em 0; padding: 5px 0; background: #29c75f;","margin: 1em 0; padding: 5px 0; background: #efefef;","display: block;margin-left:-0.5em;","display: block;margin-left:-0.5em;margin-bottom:1em"); \ No newline at end of file -- cgit v1.2.3