✨ 增加模块点击水波纹效果

Licoy · Jan 7, 2023 · 245b63c · 245b63c
1 parent 90f0756
commit 245b63c
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 18 deletions.
diff --git a/assets/dist/js/libs.min.js b/assets/dist/js/libs.min.js
diff --git a/assets/dist/js/puock.min.js b/assets/dist/js/puock.min.js
diff --git a/assets/dist/style/libs.min.css b/assets/dist/style/libs.min.css
diff --git a/assets/js/puock.js b/assets/js/puock.js
@@ -277,6 +277,23 @@ class Puock {
         }
     }
 
+    rippleInit(){
+        const args ={
+            debug: false,
+            on: 'mousedown',
+            opacity: 0.4,
+            color: "var(--pk-c-light)",
+            multi: false,
+            duration: 0.6,
+            rate: function(pxPerSecond) {
+                return pxPerSecond;
+            },
+            easing: 'linear'
+        }
+        $.ripple(".btn", args);
+        $.ripple(".ww", args);
+    }
+
     eventShareStart() {
         $(document).on("click", ".share-to", (e) => {
             const id = $(this.ct(e)).attr("data-id");
@@ -409,8 +426,9 @@ class Puock {
         this.keyUpHandle();
         this.loadHitokoto();
         this.asyncCacheViews();
-        this.swiperInit()
-        this.validateInit()
+        this.swiperInit();
+        this.validateInit();
+        this.rippleInit();
         if (this.data.params.use_post_menu) {
             this.generatePostMenuHTML()
         }

diff --git a/assets/libs/basic/ripple/ripple.min.css b/assets/libs/basic/ripple/ripple.min.css
diff --git a/assets/libs/basic/ripple/ripple.min.js b/assets/libs/basic/ripple/ripple.min.js
diff --git a/category.php b/category.php
@@ -9,7 +9,7 @@
                     <div class="mt10 row pl-3 child-cat">
                         <?php foreach ($cats as $catItem): ?>
                             <div class="col-lg-2 col-md-3 col-sm-4 col-6 pl-0 text-center">
-                                <a href="<?php echo $catItem['url'] ?>" class="a-link t-md ta3 p-block pt-2 pb-2 d-inline-block w-100 abhl">
+                                <a href="<?php echo $catItem['url'] ?>" class="a-link t-md ta3 p-block pt-2 pb-2 d-inline-block w-100 abhl ww">
                                     <span><?php echo $catItem['item']->name ?></span>
                                 </a>
                             </div>

diff --git a/inc/fun/core.php b/inc/fun/core.php
@@ -694,7 +694,7 @@ function pk_get_menu_obj_to_html($menus, &$out, $mobile = false, $dpath_cur = 1,
         $cur = $menu->current ? 'menu-current' : '';
         $out .= "<li id='menu-item-{$menu->ID}' class='menu-item-{$menu->ID} {$classes} {$child_class} {$cur}'>";
         if (!$mobile) {
-            $out .= "<a {$target} href='{$menu->url}'>{$menu->title}";
+            $out .= "<a class='ww' data-color='auto' {$target} href='{$menu->url}'>{$menu->title}";
         } else {
             $out .= '<span><a ' . $target . ' href="' . $menu->url . '">' . $menu->title . '</a>';
         }

diff --git a/inc/fun/widget.php b/inc/fun/widget.php
@@ -179,7 +179,7 @@ public function comment_post_output($instance, $posts){
                 $img = pk_get_lazy_img_info(get_post_images($post), '', 120,80);
                 $out .= '<div class="mt10">
                     <div class="widget-common-media-post">
-                        <a class="img" title="'.$title.'" '.$target.' href="'.$link.'"><img '.$img.' alt="'.$title.'"/></a>
+                        <a class="img ww" title="'.$title.'" '.$target.' href="'.$link.'"><img '.$img.' alt="'.$title.'"/></a>
                         <div class="info">
                         <h2 class="t-lg t-line-1"><a class="a-link t-w-400 t-md" title="'.$title.'" '.$target.'
                          href="'.$link.'">'.$title.'</a></h2>

diff --git a/templates/module-cms.php b/templates/module-cms.php
@@ -32,7 +32,7 @@
                             <?php foreach ($posts as $post) : setup_postdata($post); ?>
                                 <?php if ($post_index == 0): ?>
                                     <div class="mtb10 magazine-media-item">
-                                        <a class="img" <?php pk_link_target() ?> href="<?php the_permalink() ?>">
+                                        <a class="img ww" <?php pk_link_target() ?> href="<?php the_permalink() ?>">
                                             <img title="<?php the_title() ?>"
                                                  alt="<?php the_title() ?>" <?php echo pk_get_lazy_img_info(get_post_images(), 'w-100 round-3', 120, 80) ?>/>
                                         </a>

diff --git a/templates/module-post.php b/templates/module-post.php
@@ -2,7 +2,7 @@
 <?php if (pk_post_style_list()): ?>
     <article class="block card-plain post-item p-block post-item-list">
         <a class="t-sm thumbnail" <?php pk_link_target() ?> href="<?php the_permalink() ?>">
-            <div class="thumbnail-inner">
+            <div class="thumbnail-inner ww">
                 <img title="<?php the_title() ?>"
                      alt="<?php the_title() ?>" <?php echo pk_get_lazy_img_info(get_post_images(), '', 280, 160) ?> />
             </div>
@@ -50,7 +50,7 @@ class="fa-regular fa-clock"></i> <?php pk_get_post_date() ?></span>
         <div class="p-block post-item-card-box">
             <div class="thumbnail">
                 <div class="thumbnail-inner">
-                    <a class="t-sm" <?php pk_link_target() ?> href="<?php the_permalink() ?>">
+                    <a class="t-sm ww" <?php pk_link_target() ?> href="<?php the_permalink() ?>">
                         <img title="<?php the_title() ?>"
                              alt="<?php the_title() ?>" <?php echo pk_get_lazy_img_info(get_post_images(), '', 400, 200) ?> />
                     </a>