From 110001a9e2ab33079e375859d5542264f975c36f Mon Sep 17 00:00:00 2001
From: rulingcom <orbit@rulingcom.com>
Date: Mon, 15 Nov 2021 09:02:21 +0000
Subject: [PATCH] update template

---
 .../_ad_banner_widget2_video.html.erb         |  92 ++++++++++++++++--
 modules/announcement/_annc_widget15.html.erb  |  15 ++-
 modules/announcement/_annc_widget19.html.erb  |  32 ++++++
 modules/announcement/info.json                |   8 ++
 .../thumbs/annc_index19_thumbs.png            | Bin 0 -> 3511 bytes
 modules/archive/archive_index1.html.erb       |   2 +-
 modules/archive/archive_index3.html.erb       |   2 +-
 7 files changed, 137 insertions(+), 14 deletions(-)
 create mode 100644 modules/announcement/_annc_widget19.html.erb
 create mode 100644 modules/announcement/thumbs/annc_index19_thumbs.png

diff --git a/modules/ad_banner/_ad_banner_widget2_video.html.erb b/modules/ad_banner/_ad_banner_widget2_video.html.erb
index 949e906..a9ed01e 100644
--- a/modules/ad_banner/_ad_banner_widget2_video.html.erb
+++ b/modules/ad_banner/_ad_banner_widget2_video.html.erb
@@ -34,10 +34,53 @@
   </div>
 </div>
 <script type="text/javascript">
+  var ad_trigger_time;
   if (typeof ad_banners_count === 'undefined'){
     var ad_banners_count = 0;
   }
-
+  function ad_audio_button(ele,is_stop){
+    var $self = $(ele);
+    var button_container = $self.parents('.ba-banner-widget-youtube').eq(0);
+    if (is_stop){
+      $self.find('.jarallax-video-audio').remove();
+    }else{
+      var audio_div;
+      if ($self.hasClass('have-audio')){
+        audio_div = $('<div class="jarallax-video-audio"><i class="fas fa-volume-up"></i></div>');
+      }else{
+        audio_div = $('<div class="jarallax-video-audio"><i class="fas fa-volume-mute"></i></div>');
+      }
+      audio_div.click(function(event) {
+        var currentTime = new Date();
+        if (ad_trigger_time&&currentTime-ad_trigger_time<500){
+          return false;
+        }else{
+          ad_trigger_time = currentTime;
+        }
+        event.stopPropagation();
+        var $video = $self.find('video');
+        if ($self.hasClass('have-audio')){
+          $self.removeClass('have-audio');
+          $(this).find('i.fas').attr('class','fas fa-volume-mute');
+        }else{
+          $self.addClass('have-audio');
+          $(this).find('i.fas').attr('class','fas fa-volume-up');
+        }
+        if ($video.length>0){
+          $self.jPlayer("mute", !$self.data().jPlayer.options.muted);
+        }else{//youtube
+          var player = $self.find('iframe').data("yt_player");
+          if (player.isMuted()){
+            player.unMute();
+          }else{
+            player.mute();
+          }
+        }
+      });
+      button_container.find('.jarallax-video-audio').remove();
+      button_container.append(audio_div);
+    }
+  }
   if(document.getElementById("youtube-iframe-api") == null){
     var tag = document.createElement('script');
     tag.setAttribute("id", "youtube-iframe-api");
@@ -52,9 +95,13 @@
     ad_banners_count++;
   })
 if (typeof onYouTubeIframeAPIReady !== 'function'){
+  $(document).ready(function() {
+    $(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
+      $(this).trigger('click');
+    });
+  });
   if(window.yt_players == undefined)
     window.yt_players = {};
-  $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
   function onYouTubeIframeAPIReady(){
     $(".w-ba-banner").each(function(i,banner){
       var iframes = $(banner).find("iframe");
@@ -74,7 +121,6 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
           delete yt_players[id][k];
         })
         iframes.each(function(i,iframe){
-          console.log($(iframe).attr("id"))
           var yt_player = yt_players[id][$(iframe).attr("id")];
           if(yt_player){
           }else{
@@ -82,8 +128,8 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
                 events: {
                   'onReady': function(event){
                     var height = $(event.target.getIframe()).height();
-                    var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
-                    banner_wrap.height(height).css({"padding-bottom":"4em","padding-top":""});
+                    var banner_wrap = $(iframe).parents('.w-ba-banner__wrap').eq(0);
+                    banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
                     banner_wrap.find(".cycle-carousel-wrap").css("top","3em");
                     delete (event.target.B || event.target.H).onStateChange;
                     var onStateChange_idx = event.target.l.i.onStateChange;
@@ -107,7 +153,6 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
       }
     })
   }
-
   function onPlayerStateChange(event){
     var iframe = $(event.target.h),
         cyclediv = iframe.parents("div.cycle-slideshow");
@@ -116,13 +161,16 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
       cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
       cyclediv.cycle("pause");
       widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','hidden')
+      ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),false);
     }else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
       if(cyclediv[0].need_resume)
         cyclediv.cycle("resume");
       widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','')
+      ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true);
     }
     {{extra_state_chnage_script}}
   }
+}
   $(document).ready(function(){
     window.onYouTubePlayerAPIReady = function() {
       onYouTubeIframeAPIReady.apply(this,arguments);
@@ -143,8 +191,10 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
         controlplay.find(".pause-slide").removeClass("active");
       }
     })
+    /*
     var height = opts.slides.filter('.active').height() || opts.slides.height();
-    banner_wrap.height(height).css("padding-bottom","");
+    banner_wrap.height(height)*/
+    banner_wrap.css("padding-bottom","");
     {{extra_document_ready_script}}
     $('.pause-slide').off('click').click(function(){
       $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
@@ -175,9 +225,35 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
       },300);
     })
   })
-}
 </script>
 <style type="text/css">
+  .jarallax-video-audio{
+    z-index: 201;
+    font-size: 36px;
+    color: #FFF;
+    text-align: center;
+    position: absolute;
+    top: 2%;
+    right: 2%;
+    height: 66px;
+    width: 66px;
+    border-radius: 50%;
+    line-height: 1.8;
+    cursor: pointer;
+    border: 2px solid rgba(255,255,255,.6);
+    background-color: rgba(0,0,0,.6);
+    transition: all 1.2s ease;
+  }
+  @media (max-width: 768px){
+    .jarallax-video-audio{
+      top: 50%;
+    }
+  }
+  .jarallax-video-audio:hover{
+    color: #FFC500;
+    transition: all 0.6s ease;
+  }
+
   .w-ba-banner .controlplay .resume-slide.active i{
     color: #32D9C3;
   }
diff --git a/modules/announcement/_annc_widget15.html.erb b/modules/announcement/_annc_widget15.html.erb
index 908b2bc..f6ab3de 100644
--- a/modules/announcement/_annc_widget15.html.erb
+++ b/modules/announcement/_annc_widget15.html.erb
@@ -6,13 +6,20 @@
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
   <div style="position: absolute;top: 50%;bottom: 50%;width:100%;">
-	<button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: url(/assets/left-01.png) no-repeat;border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;"><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
-	<button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background: url(/assets/right-01.png) no-repeat;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%;"><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
-  </div>
+    <button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;color: #ffffff;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 50%;
+      border: none;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
+    <button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%;color: #ffffff;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 50%;
+      border: none;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
+    </div>
   <ul class="w-annc__list  row" data-level="0" data-list="announcements">
     <li class="w-annc__item  col-md-4">
     <div class="w-annc__img-wrap bullseye">
       <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+      <div class="transitionfade"></div>
     </div>
     <div class="w-annc__content-wrap">
       <div class="w-annc__meta">
@@ -121,7 +128,7 @@
 			num=1;
 		}
 	var flag=false;
-	$('.btn-left').click(function(){	
+	$('.btn-left').click(function(){
 		if(!flag){
 			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
 			var ul_length = uls.length;
diff --git a/modules/announcement/_annc_widget19.html.erb b/modules/announcement/_annc_widget19.html.erb
new file mode 100644
index 0000000..aac7d96
--- /dev/null
+++ b/modules/announcement/_annc_widget19.html.erb
@@ -0,0 +1,32 @@
+<div class="i-annc index-announcement-18">
+  <style>
+    @media (min-width: 992px){
+      li.i-annc__item.col-md-4:nth-child(3n) {
+        clear: left;
+      }
+    }
+  </style>
+  <h3 class="i-annc__page-title">{{widget-title}}</h3>
+  <ul class="i-annc__list  row" data-level="0" data-list="announcements">
+    <li class="i-annc__item col-md-4">
+    <div class="i-annc__content-wrap">  
+      <div class="i-annc__meta">
+        <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
+          <span class="i-annc__postdate">{{postdate}}</span>
+        </span>
+        <span class="i-annc__category-wrap">
+          <i class="fa fa-clone"></i>
+          <span class="i-annc__category">{{category}}</span>
+        </span>
+        <span class="i-annc__status-wrap" data-list="statuses" data-level="1">
+          <span class="i-annc__status label status {{status-class}}">{{status}}</span>
+        </span>
+      </div>
+      <h4 class="i-annc__entry-title">
+        <a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
+      </h4>
+      <p class="i-annc__subtitle">{{subtitle}}</p>
+    </div>
+    </li>
+  </ul>
+</div>
\ No newline at end of file
diff --git a/modules/announcement/info.json b/modules/announcement/info.json
index 561f63b..bbfca8e 100644
--- a/modules/announcement/info.json
+++ b/modules/announcement/info.json
@@ -273,6 +273,14 @@
         "en": "18. Simple Title List-2 (widget-title, postdate, status, title), including search"
       },
       "thumbnail": "annc_widget11_thumbs.png"
+    },
+    {
+      "filename": "annc_widget19",
+      "name": {
+        "zh_tw": "19. 標準文字列表三欄 ( 模組標題, 日期, 類別, 狀態, 標題, 副標題 )",
+        "en": "19. 3-Column Standard Text List (widget-title, postdate, category, status, title, subtitle)"
+      },
+      "thumbnail": "annc_index19_thumbs.png"
     }
   ]
 }
\ No newline at end of file
diff --git a/modules/announcement/thumbs/annc_index19_thumbs.png b/modules/announcement/thumbs/annc_index19_thumbs.png
new file mode 100644
index 0000000000000000000000000000000000000000..21bb4c9ec8bdbce625bea8ba35b23be17989e5c5
GIT binary patch
literal 3511
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
D6Fd%z

literal 0
HcmV?d00001

diff --git a/modules/archive/archive_index1.html.erb b/modules/archive/archive_index1.html.erb
index 725165d..b96a830 100644
--- a/modules/archive/archive_index1.html.erb
+++ b/modules/archive/archive_index1.html.erb
@@ -1,5 +1,5 @@
 <div class="i-archive  index-archive-1">
-  <h3 class="i-archive__page-title">{{page-title}}</h3>
+  <h3 class="i-archive-title">{{page-title}}</h3>
   <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
     <li class="i-archive__item">
       <h4 class="i-archive__category-title">{{category-title}}</h4>
diff --git a/modules/archive/archive_index3.html.erb b/modules/archive/archive_index3.html.erb
index fc78836..ad5e1ad 100644
--- a/modules/archive/archive_index3.html.erb
+++ b/modules/archive/archive_index3.html.erb
@@ -1,5 +1,5 @@
 <div class="i-archive  index-archive-3">
-  <h3 class="i-archive__page-title">{{page-title}}</h3>
+  <h3 class="i-archive-title">{{page-title}}</h3>
   <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
     <li class="i-archive__item">
       <h4 class="i-archive__category-title">{{category-title}}</h4>