Add: Pjax Fade-in Animation and others

1 files changed, 117 insertions, 70 deletions

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');

@@ -270,6 +230,32 @@ function toggleOptions() {
   }

 

 /**

+ *  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

  */

 function toggleDrawer() {

@@ -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