From 3f85c120d73691c64fee5143a646358e58531531 Mon Sep 17 00:00:00 2001
From: Bohung <bohung@rulingcom.com>
Date: Sun, 3 Jul 2022 15:49:30 +0800
Subject: [PATCH] Update template.

---
 modules/ad_banner/_ad_banner_widget1.html.erb |   8 +-
 .../_ad_banner_widget2_video.html.erb         | 117 ++++++++++++------
 2 files changed, 81 insertions(+), 44 deletions(-)

diff --git a/modules/ad_banner/_ad_banner_widget1.html.erb b/modules/ad_banner/_ad_banner_widget1.html.erb
index 75ebbba..d5c4f38 100644
--- a/modules/ad_banner/_ad_banner_widget1.html.erb
+++ b/modules/ad_banner/_ad_banner_widget1.html.erb
@@ -29,10 +29,10 @@
     </div>
   </div>
   <div class="w-ad-banner__caption ad-overlay w-ba-banner__caption w-ad-banner__caption w-ad-banner__overlay_{{subpart-id}}"></div>
-    <div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
-      <li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
-    </div>
-    <ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i></a></ul>
+  <div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
+    <li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
+  </div>
+  <ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i></a></ul>
   <ul class="button-mid">
     <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
     <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
diff --git a/modules/ad_banner/_ad_banner_widget2_video.html.erb b/modules/ad_banner/_ad_banner_widget2_video.html.erb
index 532db45..95637b5 100644
--- a/modules/ad_banner/_ad_banner_widget2_video.html.erb
+++ b/modules/ad_banner/_ad_banner_widget2_video.html.erb
@@ -25,13 +25,12 @@
     {{html}}
   </div>
   <div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
-    <div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
-    <ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i></a></ul>
-    <ul class="button-mid">
-      <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
-      <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
-    </ul>
-  </div>
+  <div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
+  <ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i></a></ul>
+  <ul class="button-mid">
+    <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
+    <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
+  </ul>
 </div>
 <script type="text/javascript">
   var ad_trigger_time;
@@ -88,11 +87,19 @@
     var firstScriptTag = document.getElementsByTagName('script')[0];
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
   }
+  if(window.init_yt_banner == undefined){
+    function init_yt_banner(banner__slide){
+      var $banner__slide = $(banner__slide);
+      if( $banner__slide.data("yt-binded")== "0" ){
+        $banner__slide.data("yt-binded","1");
+        var obj = $banner__slide.find("iframe");
+        obj.attr("id", $banner__slide.data("youtube-id") + "_" + ad_banners_count);
+        ad_banners_count++;
+      }
+    }
+  }
   $("*[data-yt-binded=0]").each(function(){
-    $(this).attr("data-yt-binded","1");
-    var obj = $(this).find("iframe");
-    obj.attr("id",$(this).data("youtube-id") + "_" + ad_banners_count);
-    ad_banners_count++;
+    init_yt_banner(this);
   })
 if (typeof onYouTubeIframeAPIReady !== 'function'){
   $(document).ready(function() {
@@ -142,41 +149,56 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
     var defalt_key = 'i';
     var all_keys = Object.keys(event_dict);
     if(all_keys.indexOf(defalt_key) != -1){
-      if(Array.isArray(event_dict[defalt_key]) && event_dict[defalt_key].indexOf('onStateChange') != -1){
+      var tmp = event_dict[defalt_key];
+      if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
         return defalt_key;
       }
     }
     var array_key;
     all_keys.forEach(function(k){
-      if(Array.isArray(event_dict[k]) && event_dict[k].indexOf('onStateChange') != -1){
+      var tmp = event_dict[k];
+      if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
         array_key = k;
         return false;
       }
     })
     return array_key;
   }
-  function find_out_yt_event_relation_key(event_dict){
+  function find_out_yt_event_relation_key(event_dict, is_obj){ // is_obj = true => store event idx array. false => store whether event init(true or false)
     var defalt_key = 'j';
     var all_keys = Object.keys(event_dict);
     if(all_keys.indexOf(defalt_key) != -1){
-      if((event_dict[defalt_key] instanceof Object) && event_dict[defalt_key]['onStateChange']){
-        return defalt_key;
+      var tmp = event_dict[defalt_key];
+      if((tmp instanceof Object) && tmp['onStateChange']){
+        if(!is_obj || (tmp['onStateChange'] instanceof Object)){
+          return defalt_key;
+        }
       }
     }
     var relation_key;
     all_keys.forEach(function(k){
-      if((event_dict[k] instanceof Object) && event_dict[k]['onStateChange']){
-        relation_key = k;
-        return false;
+      var tmp = event_dict[k];
+      if((tmp instanceof Object) && tmp['onStateChange']){
+        if(!is_obj || (tmp['onStateChange'] instanceof Object)){
+          relation_key = k;
+          return false;
+        }
       }
     })
     return relation_key;
   }
   function onYouTubeIframeAPIReady(){
-    $(".w-ba-banner").each(function(i,banner){
-      var iframes = $(banner).find("iframe");
+    $(".w-ba-banner").on('cycle-post-initialize', function(){
+      init_banner(banner);
+    });
+    function init_banner(banner){
+      var $banner = $(banner);
+      $banner.find('.w-ad-banner__slide').each(function(j, banner__slide){
+        init_yt_banner(banner__slide);
+      })
+      var iframes = $banner.find("iframe");
       if(iframes.length > 0){
-        var id = $(banner).attr("data-subpart-id");
+        var id = $banner.attr("data-subpart-id");
         if(yt_players[id] == undefined)
           yt_players[id] = {};
         var remove_ids = [];
@@ -191,25 +213,35 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
           delete yt_players[id][k];
         })
         iframes.each(function(i,iframe){
+          var yt_id = $(iframe).attr("id");
           var yt_player = yt_players[id][$(iframe).attr("id")];
           if(yt_player){
           }else{
             yt_player = new YT.Player($(iframe).attr("id"), {
                 events: {
                   'onReady': function(event){
-                    var height = $(event.target.getIframe()).height();
+                    var yt_player = event.target;
+                    var height = $(yt_player.getIframe()).height();
                     var banner_wrap = $(iframe).parents('.w-ba-banner__wrap').eq(0);
+                    var carousel_wrap = banner_wrap.find(".cycle-carousel-wrap");
+                    if(carousel_wrap.length){
+                      carousel_wrap.css("top","3em");
+                      height += parseInt(carousel_wrap.css('font-size')) * 3;
+                    }
                     banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
-                    banner_wrap.find(".cycle-carousel-wrap").css("top","3em");
-                    try{
-                      delete (event.target.B || event.target.H || event.target.I).onStateChange;
-                    }catch(e){console.log("{onReady: true, onStateChange: true} missing!")};
-                    var event_list_key = find_out_yt_event_list_key(event.target);
+                    var init_key = find_out_yt_event_relation_key(yt_player, false);
+                    if(init_key){
+                      delete yt_player[init_key].onStateChange;
+                    }
+                    else{
+                      console.log("{onReady: true, onStateChange: true} missing!");
+                    }
+                    var event_list_key = find_out_yt_event_list_key(yt_player);
                     if(event_list_key){
-                      var event_dict = event.target[event_list_key];
+                      var event_dict = yt_player[event_list_key];
                       var array_key = find_out_yt_event_list_array_key(event_dict);
                       var count_key = find_out_yt_event_list_count_key(event_dict, array_key);
-                      var relation_key = find_out_yt_event_relation_key(event_dict);
+                      var relation_key = find_out_yt_event_relation_key(event_dict, true);
                       var onStateChange_idx = event_dict[relation_key].onStateChange;
                       onStateChange_idx.reverse();
                       var event_size = 3;
@@ -218,7 +250,7 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
                       });
                       event_dict[relation_key].onStateChange = [];
                       event_dict[count_key] = event_dict[array_key].length;
-                      event.target.addEventListener('onStateChange',onPlayerStateChange);
+                      yt_player.addEventListener('onStateChange',onPlayerStateChange);
                     }else{
                       console.log("YT player changes its variables!")
                     }
@@ -232,6 +264,9 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
           }
         })
       }
+    }
+    $(".w-ba-banner").each(function(i,banner){
+      init_banner(banner);
     })
   }
   function onPlayerStateChange(event){
@@ -241,12 +276,12 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
     if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
       cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
       cyclediv.cycle("pause");
-      widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','hidden')
+      widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay,.banner-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','')
+      widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay,.banner-overlay').css('visibility','')
       ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true);
     }
     {{extra_state_chnage_script}}
@@ -266,10 +301,12 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
       }
     })
     banner_wrap.on('cycle-resumed',function(opts){
-      var controlplay = $(this).nextAll(".controlplay");
-      if(controlplay.length != 0){
-        controlplay.find(".resume-slide").addClass("active");
-        controlplay.find(".pause-slide").removeClass("active");
+      if(!($(this).data('paused'))){
+        var controlplay = $(this).nextAll(".controlplay");
+        if(controlplay.length != 0){
+          controlplay.find(".resume-slide").addClass("active");
+          controlplay.find(".pause-slide").removeClass("active");
+        }
       }
     })
     /*
@@ -278,12 +315,12 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
     banner_wrap.css("padding-bottom","");
     {{extra_document_ready_script}}
     $('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
-      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
+      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").data('paused', true).cycle('pause');
       $(this).addClass('active');
       $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active');
     });
     $('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
-      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
+      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").data('paused', false).cycle('resume');
       $(this).addClass('active');
       $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active');
     });
@@ -354,4 +391,4 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
   .next-button,.prev-button{
     cursor: pointer;
   }
-</style>
+</style>
\ No newline at end of file