update template

modules/ad_banner/_ad_banner_widget1.html.erb

@@ -32,7 +32,7 @@
   <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="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><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></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><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></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>
@@ -70,9 +70,8 @@
   .w-ba-banner .button-mid{
     position: absolute;
     width: 100%;
-    height: 100%;
+    height: 0;
-    top: 0;
+    top: 50%;
-    left: 0;
   }
   .next-button,.prev-button{
     cursor: pointer;

modules/ad_banner/_ad_banner_widget2_video.html.erb

@@ -26,7 +26,7 @@
   </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="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><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></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><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></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>
@@ -37,17 +37,46 @@
   if (typeof ad_banners_count === 'undefined'){
     var ad_banners_count = 0;
   }
+  var control_play_btn_pause = function(){
+    this.attr('aria-label', '<%= I18n.t("ad_banner.resume") %>');
+    this.attr('title', '<%= I18n.t("ad_banner.resume") %>');
+    this.find('p').text('<%= I18n.t("ad_banner.resume") %>');
+    this.find('i.fa-pause').removeClass('fa-pause').addClass('fa-play');
+  }
+  var control_play_btn_play = function(){
+    this.attr('aria-label', '<%= I18n.t("ad_banner.pause") %>');
+    this.attr('title', '<%= I18n.t("ad_banner.pause") %>');
+    this.find('p').text('<%= I18n.t("ad_banner.pause") %>');
+    this.find('i.fa-play').removeClass('fa-play').addClass('fa-pause');
+  }
   function ad_audio_button(ele,is_stop){
     var $self = $(ele);
     var button_container = $self.parents('.ba-banner-widget-youtube').eq(0);
+    var append_class = "";
     if (is_stop){
       button_container.find('.jarallax-video-audio').remove();
+      var control_play_btn = $('.jarallax-video-control-play');
+      if(control_play_btn.length){
+        control_play_btn_pause.call(control_play_btn);
+      }
     }else{
+      var control_play_btn = null;
+      if(window.accessibility_mode){
+        append_class = " accessibility_mode_btn";
+        var control_play_btn = $('.jarallax-video-control-play');
+        if(control_play_btn.length){
+
+          control_play_btn_play.call(control_play_btn);
+          control_play_btn = null;
+        }else{
+          control_play_btn = $('<button title="<%= I18n.t("ad_banner.pause") %>" class="jarallax-video-control-play"><i class="fas fa-pause" aria-label="<%= I18n.t("ad_banner.pause") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.pause") %></p></button>');
+        }
+      }
       var audio_div;
       if ($self.hasClass('have-audio')){
-        audio_div = $('<button title="<%= I18n.t("ad_banner.muted") %>" class="jarallax-video-audio"><i class="fas fa-volume-up" aria-label="<%= I18n.t("ad_banner.muted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.muted") %></p></button>');
+        audio_div = $('<button title="<%= I18n.t("ad_banner.muted") %>" class="jarallax-video-audio'+append_class+'"><i class="fas fa-volume-up" aria-label="<%= I18n.t("ad_banner.muted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.muted") %></p></button>');
       }else{
-        audio_div = $('<button title="<%= I18n.t("ad_banner.unmuted") %>" class="jarallax-video-audio"><i class="fas fa-volume-mute" aria-label="<%= I18n.t("ad_banner.unmuted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.unmuted") %></p></button>');
+        audio_div = $('<button title="<%= I18n.t("ad_banner.unmuted") %>" class="jarallax-video-audio'+append_class+'"><i class="fas fa-volume-mute" aria-label="<%= I18n.t("ad_banner.unmuted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.unmuted") %></p></button>');
       }
       audio_div.find('p').css('display','none'); //fix CSP
       audio_div.click(function(event) {
@@ -79,7 +108,47 @@
       });
       button_container.find('.jarallax-video-audio').remove();
       button_container.append(audio_div);
+      if(control_play_btn != null){
+        audio_div.after(control_play_btn);
+        control_play_btn.click(function(){
+          var cycle_slideshow = button_container.find('.cycle-slideshow');
+          var opts = cycle_slideshow.data('cycle.opts');
+          var active_slide = opts.slides.filter('.'+opts.slideActiveClass);
+          if(active_slide.length){
+            var yt_iframe = active_slide.find('iframe');
+            if(yt_iframe.length == 0){
+              var jplayer = active_slide.find('.jp-jplayer').data('jPlayer');
+              if(jplayer){
+                if(jplayer.htmlElement.video.paused){
+                  jplayer.play();
+                }else{
+                  jplayer.pause();
+                }
+              }
+            }else{
+              if(window.yt_players){
+                var subpart_id = button_container.attr('data-subpart-id');
+                var subpart_yt_players = window.yt_players[subpart_id];
+                if(subpart_yt_players){
+                  var yt_player = subpart_yt_players[yt_iframe.attr('id')];
+                  var play_state = yt_player.getPlayerState();
+                  if(play_state == YT.PlayerState.PLAYING || play_state == YT.PlayerState.BUFFERING){
+                    yt_player.pauseVideo();
+                  }else if(play_state == YT.PlayerState.UNSTARTED || play_state == YT.PlayerState.PAUSED || play_state == YT.PlayerState.ENDED || play_state == YT.PlayerState.CUED){
+                    yt_player.playVideo();
+                    play_state = yt_player.getPlayerState();
+                    if(play_state == YT.PlayerState.UNSTARTED || play_state == YT.PlayerState.PAUSED || play_state == YT.PlayerState.ENDED || play_state == YT.PlayerState.CUED){
+                      yt_player.mute().playVideo();
+                    }
+                  }
+                }
+              }
+            }
+          }
+        })
+      }
     }
+
   }
   if(document.getElementById("youtube-iframe-api") == null){
     var tag = document.createElement('script');
@@ -102,193 +171,198 @@
   $("*[data-yt-binded=0]").each(function(){
     init_yt_banner(this);
   })
-if (typeof onYouTubeIframeAPIReady !== 'function'){
+  if (typeof onYouTubeIframeAPIReady !== 'function'){
-  $(document).ready(function() {
+    $(document).ready(function() {
-    $(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
+      $(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
-      $(this).trigger('click');
+        $(this).trigger('click');
+      });
     });
-  });
+    if(window.yt_players == undefined)
-  if(window.yt_players == undefined)
+      window.yt_players = {};
-    window.yt_players = {};
+    function find_out_yt_event_list_key(yt_player){
-  function find_out_yt_event_list_key(yt_player){
+      var defalt_key = 'o';
-    var defalt_key = 'o';
+      var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
-    var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
+      var prop_nums_thresh = 6;
-    var prop_nums_thresh = 6;
+      if(all_keys.indexOf(defalt_key) != -1){
-    if(all_keys.indexOf(defalt_key) != -1){
+        if((yt_player[defalt_key] instanceof Object) && Object.keys(yt_player[defalt_key]).length > prop_nums_thresh){
-      if((yt_player[defalt_key] instanceof Object) && Object.keys(yt_player[defalt_key]).length > prop_nums_thresh){
-        return defalt_key;
-      }
-    }
-    var event_key;
-    all_keys.forEach(function(k){
-      if((yt_player[k] instanceof Object) && Object.keys(yt_player[k]).length > prop_nums_thresh){
-        event_key = k;
-        return false;
-      }
-    })
-    return event_key;
-  }
-  function find_out_yt_event_list_count_key(yt_player, event_list_key){
-    var defalt_key = 'v';
-    var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
-    var equal_count = yt_player[event_list_key].length;
-    if(all_keys.indexOf(defalt_key) != -1){
-      if(yt_player[defalt_key] == equal_count){
-        return defalt_key;
-      }
-    }
-    var count_key;
-    all_keys.forEach(function(k){
-      if(yt_player[k] == equal_count){
-        count_key = k;
-        return false;
-      }
-    })
-    return count_key;
-  }
-  function find_out_yt_event_list_array_key(event_dict){
-    var defalt_key = 'i';
-    var all_keys = Object.keys(event_dict);
-    if(all_keys.indexOf(defalt_key) != -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){
-      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, 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){
-      var tmp = event_dict[defalt_key];
-      if((tmp instanceof Object) && tmp['onStateChange']){
-        if(!is_obj || (tmp['onStateChange'] instanceof Object)){
           return defalt_key;
         }
       }
-    }
+      var event_key;
-    var relation_key;
+      all_keys.forEach(function(k){
-    all_keys.forEach(function(k){
+        if((yt_player[k] instanceof Object) && Object.keys(yt_player[k]).length > prop_nums_thresh){
-      var tmp = event_dict[k];
+          event_key = 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").on('cycle-post-initialize', function(){
-      init_banner(this);
-    });
-    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");
+      return event_key;
-      if(iframes.length > 0){
+    }
-        var id = $banner.attr("data-subpart-id");
+    function find_out_yt_event_list_count_key(yt_player, event_list_key){
-        if(yt_players[id] == undefined)
+      var defalt_key = 'v';
-          yt_players[id] = {};
+      var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
-        var remove_ids = [];
+      var equal_count = yt_player[event_list_key].length;
-        Object.keys(yt_players[id]).forEach(function(k){
+      if(all_keys.indexOf(defalt_key) != -1){
-          var yt_player = yt_players[id][k];
+        if(yt_player[defalt_key] == equal_count){
-          if($(yt_player.getIframe()).length == 0){
+          return defalt_key;
-            yt_player.destroy();
+        }
-            remove_ids.push(k);
-          }
-        })
-        remove_ids.forEach(function(k){
-          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 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":""});
-                    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 = 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, true);
-                      var onStateChange_idx = event_dict[relation_key].onStateChange;
-                      onStateChange_idx.reverse();
-                      var event_size = 3;
-                      onStateChange_idx.forEach(function(start_idx){
-                        event_dict[array_key].splice(start_idx,event_size);
-                      });
-                      event_dict[relation_key].onStateChange = [];
-                      event_dict[count_key] = event_dict[array_key].length;
-                      yt_player.addEventListener('onStateChange',onPlayerStateChange);
-                      banner_wrap.trigger('resize');
-                    }else{
-                      console.log("YT player changes its variables!")
-                    }
-                    {{extra_ready_script}}
-                  },
-                  'onStateChange': onPlayerStateChange
-                }
-            });
-            yt_players[id][$(iframe).attr("id")] = yt_player;
-            $(iframe).data("yt_player",yt_player);
-          }
-        })
       }
+      var count_key;
+      all_keys.forEach(function(k){
+        if(yt_player[k] == equal_count){
+          count_key = k;
+          return false;
+        }
+      })
+      return count_key;
     }
-    $(".w-ba-banner").each(function(i,banner){
+    function find_out_yt_event_list_array_key(event_dict){
-      init_banner(banner);
+      var defalt_key = 'i';
-    })
+      var all_keys = Object.keys(event_dict);
-  }
+      if(all_keys.indexOf(defalt_key) != -1){
-  function onPlayerStateChange(event){
+        var tmp = event_dict[defalt_key];
-    var iframe = $(event.target.getIframe()),
+        if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
-        cyclediv = iframe.parents("div.cycle-slideshow");
+          return defalt_key;
-    var widget = cyclediv.parents('.ba-banner-widget-youtube');
+        }
-    if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
+      }
-      cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
+      var array_key;
-      cyclediv.cycle("pause");
+      all_keys.forEach(function(k){
-      widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay,.banner-overlay').css('visibility','hidden')
+        var tmp = event_dict[k];
-      ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),false);
+        if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
-    }else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
+          array_key = k;
-      if(cyclediv[0].need_resume)
+          return false;
-        cyclediv.cycle("resume");
+        }
-      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);
+      return array_key;
+    }
+    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){
+        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){
+        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").on('cycle-post-initialize', function(){
+        init_banner(this);
+      });
+      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");
+          if(yt_players[id] == undefined)
+            yt_players[id] = {};
+          var remove_ids = [];
+          Object.keys(yt_players[id]).forEach(function(k){
+            var yt_player = yt_players[id][k];
+            if($(yt_player.getIframe()).length == 0){
+              yt_player.destroy();
+              remove_ids.push(k);
+            }
+          })
+          remove_ids.forEach(function(k){
+            delete yt_players[id][k];
+          })
+          iframes.each(function(i,iframe){
+            var $iframe = $(iframe);
+            var yt_id = $iframe.attr("id");
+            var yt_player = yt_players[id][yt_id];
+            if(yt_player){
+            }else{
+              yt_player = new YT.Player(yt_id, {
+                  events: {
+                    'onReady': function(event){
+                      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;
+                      }
+                      var overlay_in_slide = $iframe.parent().siblings('.ad-overlay,.banner-overlay');
+                      if(overlay_in_slide.length != 0){
+                        height += overlay_in_slide.outerHeight(true);
+                      }
+                      banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
+                      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 = 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, true);
+                        var onStateChange_idx = event_dict[relation_key].onStateChange;
+                        onStateChange_idx.reverse();
+                        var event_size = 3;
+                        onStateChange_idx.forEach(function(start_idx){
+                          event_dict[array_key].splice(start_idx,event_size);
+                        });
+                        event_dict[relation_key].onStateChange = [];
+                        event_dict[count_key] = event_dict[array_key].length;
+                        yt_player.addEventListener('onStateChange',onPlayerStateChange);
+                        banner_wrap.trigger('resize');
+                      }else{
+                        console.log("YT player changes its variables!")
+                      }
+                      {{extra_ready_script}}
+                    },
+                    'onStateChange': onPlayerStateChange
+                  }
+              });
+              yt_players[id][yt_id] = yt_player;
+              $iframe.data("yt_player",yt_player);
+            }
+          })
+        }
+      }
+      $(".w-ba-banner").each(function(i,banner){
+        init_banner(banner);
+      })
+    }
+    function onPlayerStateChange(event){
+      var iframe = $(event.target.getIframe()),
+          cyclediv = iframe.parents("div.cycle-slideshow");
+      var widget = cyclediv.parents('.ba-banner-widget-youtube');
+      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,.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,.banner-overlay').css('visibility','')
+        ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true);
+      }
+      {{extra_state_chnage_script}}
     }
-    {{extra_state_chnage_script}}
   }
-}
   $(document).ready(function(){
     window.onYouTubePlayerAPIReady = function() {
       onYouTubeIframeAPIReady.apply(this,arguments);
@@ -332,22 +406,10 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
     $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
       $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
     })
-    var resize_timeout_id;
-    $(window).resize(function(){
-      if(resize_timeout_id){
-        window.clearTimeout(resize_timeout_id);
-      }
-      resize_timeout_id = window.setTimeout(function(){
-        var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
-        var opts = banner_wrap.data('cycle.opts');
-        var height = opts.slides.filter('.active').height() || opts.slides.height();
-        banner_wrap.height(height).css("padding-bottom","");
-      },300);
-    })
   })
 </script>
 <style type="text/css">
-  .jarallax-video-audio{
+  .jarallax-video-audio, .jarallax-video-control-play{
     z-index: 201;
     font-size: 2em;
     color: #FFF;
@@ -364,12 +426,21 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
     background-color: rgba(0,0,0,.6);
     transition: all 1.2s ease;
   }
+  .jarallax-video-control-play{
+    margin-top: 66px;
+  }
   @media (max-width: 768px){
-    .jarallax-video-audio{
+    .jarallax-video-audio, .jarallax-video-control-play{
       top: 50%;
     }
+    .jarallax-video-audio.accessibility_mode_btn{
+      margin-top: -33px;
+    }
+    .jarallax-video-control-play{
+      margin-top: 33px;
+    }
   }
-  .jarallax-video-audio:hover,.jarallax-video-audio:focus{
+  .jarallax-video-audio:hover,.jarallax-video-audio:focus,.jarallax-video-control-play:hover,.jarallax-video-control-play:focus {
     color: #FFC500;
     transition: all 0.6s ease;
   }
@@ -383,13 +454,6 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
   .w-ba-banner .controlplay{
     width: auto;
   }
-  .w-ba-banner .button-mid{
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
   .next-button,.prev-button{
     cursor: pointer;
   }

modules/archive/_archive_widget3.html.erb

@@ -0,0 +1,29 @@
+<div class="w-archive widget-archive-1 widget-archive-3" module="archive" data-ps="">
+  <h3 class="w-archive__widget-title">{{widget-title}}</h3>
+  <ul class="w-archive__list level-1 list-unstyled"  data-list="categories" data-level="0">
+    <li class="w-archive__item level-1">
+      <h4 class="w-archive__item-heading">{{category-title}}</h4>
+        <li class="w-archive__item level-2">
+          <ul class="w-archive__list level-3" data-list="archives" data-level="1">
+            <li class="w-archive__item level-3">
+              <span class="w-archive__title" href="{{archive_url}}">{{archive-title}}</span>
+              <ul class="w-archive__list level-4" data-list="files" data-level="2">
+                <li class="w-archive__item level-4">
+                  <a href="{{file-url}}" class="widget-archive-files-item w-archive__link" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
+                  <span class="label label-primary {{file-type}}">{{file-type}}</span>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+    </li>
+  </ul>
+  <p class="more">
+    <a class="btn btn-sm btn-primary" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多資訊" : "More" %></a>
+  </p>
+  <style>
+    .widget-archive-3 .w-archive__item-heading {
+      font-size: 1.2em;
+    }
+  </style>
+</div>

modules/archive/_archive_widget4.html.erb

@@ -0,0 +1,51 @@
+<div class="w-archive widget-archive-2 widget-archive-4">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="panel-group" id="widget-archive-group" data-list="categories" data-level="0">
+    <div class="panel panel-default">
+      <div class="panel-heading" style="padding: 0.625em 0.9375em;">
+        <h4 class="panel-title">
+          <i class="fa fa-file-text" aria-hidden="true"></i>
+          <a data-toggle="collapse" data-parent="#widget-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
+            {{category-title}}
+            <i class="fa fa-chevron-down" aria-hidden="true"></i>
+          </a>
+
+        </h4>
+      </div>
+      <div id="collapse" class="panel-collapse collapse {{in_class}}">
+        <div class="panel-body">
+          <dl class="dl-horizontal widget-archive-item-group" data-list="archives" data-level="1">
+            <dt class="widget-archive-item-list">
+              <sapn class="widget-archive-item-title">{{archive-title}}</span>
+              <span data-list="statuses" data-level="2">
+                <span class="label status {{status-class}}">{{status}}</span>
+              </span>
+            </dt>
+            <dl class="widget-archive-files-list" data-list="files"  data-level="2">
+              <dd>
+                <a href="{{file-url}}" class="widget-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
+                <span class="label label-primary {{file-type}}">{{file-type}}</span>
+              </dd>
+            </dl>
+          </dl>
+        </div>
+      </div>
+    </div>
+        {{link_to_edit}}
+  </div>
+  <p class="more">
+    <a class="btn btn-sm btn-primary" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多資訊" : "More" %></a>
+  </p>
+  <style>
+    .widget-archive-4 dt.widget-archive-item-list {
+      float: none;
+      width: auto;
+      text-align: left;
+    }
+    .widget-archive-4 .widget-archive-files-list dd {
+      margin-left: 0;
+    }
+  </style>
+</div>

modules/archive/archive_index1.html.erb

@@ -13,7 +13,7 @@
           </dt>
           <dl class="i-archive__file-list" data-list="files"  data-level="2">
             <dd class="i-archive__file-wrap">
-              <a class="i-archive__file-name" href="{{file-url}}" target="_blank" title="{{file-name}}">{{file-name}}</a>
+              <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
               <span class="i-archive__file-type  label label-primary {{file-type}}">{{file-type}}</span>
             </dd>
           </dl>

modules/archive/archive_index12.html.erb

@@ -1,4 +1,4 @@
-<div class="i-archive index-archive-2">
+<div class="i-archive index-archive-2 index-archive-12">
   <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
@@ -25,7 +25,7 @@
             </dt>
             <dl class="i-archive-files-list" data-list="files"  data-level="2">
               <dd>
-                <a href="{{file-url}}" class="i-archive-files-item" target="_blank" title="{{file-name}}">{{file-name}}</a>
+                <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
                 <span class="label label-primary {{file-type}}">{{file-type}}</span>
               </dd>
             </dl>
@@ -35,4 +35,10 @@
     </div>
         {{link_to_edit}}
   </div>
+  <style>
+    .index-archive-12 dt.i-archive-item-list{
+      float: none;
+      width: auto;
+    }
+  </style>
 </div>

modules/archive/archive_index13.html.erb

@@ -15,11 +15,11 @@
             <span data-list="statuses" data-level="2">
               <span class="label status {{status-class}}">{{status}}</span>
             </span>
-            <a href="{{archive-file-url}}" target="_blank" title="{{archive-title}}">
+            <a href="{{archive-file-url}}" target="{{target}}" title="{{archive-title}}">
               {{archive-title}}
             </a>
             <span class="i-archive-files-list" data-list="files" data-level="2">
-              <a href="{{file-url}}" class="i-archive-files-item" title="{{file-name}}" data-toggle="tooltip" data-placement="bottom">
+              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}" data-toggle="tooltip" data-placement="bottom">
                 <span class="label label-primary {{file-type}}">{{file-type}}</span>
               </a>
             </span>
@@ -32,6 +32,9 @@
   </div>
 </div>
 <style>
+  .i-archive.index-archive-13 .i-archive-files-item{
+    white-space: inherit;
+  }
   .index-archive-13 .archives-ul .archive-li{
     list-style-type: disc;
   }

modules/archive/archive_index14.html.erb

@@ -0,0 +1,36 @@
+<div class="i-archive index-archive-2 index-archive-14">
+  <h3 class="i-archive-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <div class="panel-group" id="index-archive-group" data-list="categories" data-level="0">
+    <div class="panel panel-default" data-list="archives" data-level="1">
+      <div class="panel-heading" style="padding: 0.625em 0.9375em;">
+        <h4 class="panel-title">
+          <i class="fa fa-file-text" aria-hidden="true"></i>
+          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
+            {{archive-title}}
+            <i class="fa fa-chevron-down" aria-hidden="true"></i>
+          </a>
+
+        </h4>
+      </div>
+      <div id="collapse" class="panel-collapse collapse {{in_class}}">
+        <div class="panel-body">
+          <ul class="i-archive-files-list" data-list="files"  data-level="2">
+            <li>
+              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
+              <span class="label label-primary {{file-type}}">{{file-type}}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+        {{link_to_edit}}
+  </div>
+  <style>
+    .index-archive-12 dt.i-archive-item-list{
+      float: none;
+      width: auto;
+    }
+  </style>
+</div>

modules/archive/archive_index15.html.erb

@@ -0,0 +1,41 @@
+<div class="i-archive index-archive-13 index-archive-15">
+  <h3 class="i-archive-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <ul class="archive-categories nav nav-tabs" role="tablist" data-list="categories" data-level="0" data-no-edit="true">
+    <li class="nav-item {{active_class}}" role="presentation">
+      <a href="#{{category-id}}" role="tab" data-toggle="tab" title="{{category-title}}" >{{category-title}}</a>
+    </li>
+  </ul>
+  <div class="tab-content" data-list="categories" data-level="0">
+    <div class="tab-pane {{active_class}}" id="{{category-id}}" role="tabpanel" aria-labelledby="{{category-id}}-tab">
+      <ul class="archives-ul" data-list="archives" data-level="1">
+        <li class="archive-li">
+          <p>
+            <span data-list="statuses" data-level="2">
+              <span class="label status {{status-class}}">{{status}}</span>
+            </span>
+            <a href="{{archive-file-url}}" target="{{target}}" title="{{archive-title}}">
+              {{archive-title}}
+            </a>
+            <span class="i-archive-files-list" data-list="files" data-level="2">
+              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}" data-toggle="tooltip" data-placement="bottom">
+                {{file-name}}<span class="label label-primary {{file-type}}">{{file-type}}</span>
+              </a>
+            </span>
+          </p>
+          <div class="archive-description">{{description}}</div>
+        </li>
+      </ul>
+      {{link_to_edit}}
+    </div>
+  </div>
+</div>
+<style>
+  .index-archive-13 .archives-ul .archive-li{
+    list-style-type: disc;
+  }
+  .index-archive-13 .archive-description{
+    color: #9b9b9b;
+  }
+</style>

modules/archive/archive_index2.html.erb

@@ -12,19 +12,19 @@
           </a>
         </h4>
       </div>
-      <div id="collapse" class="panel-collapse collapse">
+      <div id="collapse" class="panel-collapse collapse {{in_class}}">
         <div class="panel-body">
           <dl class="dl-horizontal i-archive-item-group" data-list="archives" data-level="1">
-            <dt class="i-archive-item-list col-sm-5">
+            <dt class="i-archive-item-list col-sm-3">
               <sapn class="i-archive-item-title">{{archive-title}}</span>
               <span data-list="statuses" data-level="2">
                 <span class="label status {{status-class}}">{{status}}</span>
               </span>
             </dt>
-            <dl class="i-archive-files-list col-sm-7" data-list="files"  data-level="2">
+            <dl class="i-archive-files-list col-sm-9" data-list="files"  data-level="2">
               <dd>
-                <a href="{{file-url}}" class="i-archive-files-item" target="_blank" title="{{file-name}}">{{file-name}}</a>
+                <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                <span class="label label-primary">{{file-type}}</span>
+                <span class="label label-primary {{file-type}}">{{file-type}}</span>
               </dd>
             </dl>
           </dl>
@@ -33,4 +33,11 @@
     </div>
         {{link_to_edit}}
   </div>
+  <style>
+    @media (min-width: 769px){
+      .index-archive-2 .dl-horizontal dt.col-sm-3{
+        width: 25%;
+      }
+    }
+  </style>
 </div>

modules/archive/archive_index3.html.erb

@@ -12,7 +12,7 @@
           </dt>
           <dl class="i-archive__file-list" data-list="files"  data-level="2">
             <dd class="i-archive__file-wrap">
-              <a class="i-archive__file-name" href="{{file-url}}" target="_blank" title="{{file-name}}">{{file-name}}</a>
+              <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
               <span class="i-archive__file-type  label label-primary {{file-type}}">{{file-type}}</span>
             </dd>
           </dl>

modules/archive/archive_index4.html.erb

@@ -3,7 +3,7 @@
     <span>{{page-title}}</span>
   </h3>
   <div class="panel-group" id="index-archive-group" data-list="categories" data-level="0">
-  <div class="panel panel-default">
+    <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title">
           <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}">
@@ -11,7 +11,7 @@
           </a>
         </h4>
       </div>
-      <div id="collapse" class="panel-collapse collapse">
+      <div id="collapse" class="panel-collapse collapse {{in_class}}">
         <div class="panel-body">
           <dl class="dl-horizontal i-archive-item-group" data-list="archives" data-level="1">
             <dt class="i-archive-item-list col-sm-5">
@@ -21,14 +21,14 @@
             </dt>
             <dl class="i-archive-files-list col-sm-7" data-list="files"  data-level="2">
               <dd>
-                <a href="{{file-url}}" class="i-archive-files-item" target="_blank" title="{{file-name}}">{{file-name}}</a>
+                <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                <span class="label label-primary">{{file-type}}</span>
+                <span class="label label-primary {{file-type}}">{{file-type}}</span>
               </dd>
             </dl>
           </dl>
         </div>
       </div>
     </div>
-        {{link_to_edit}}
+    {{link_to_edit}}
   </div>
 </div>

modules/archive/archive_index9.html.erb

@@ -12,14 +12,14 @@
         </th>
       </thead>  
       <tbody class="tbody" >
-        <span data-list="archives" data-level="1">
+        <span class="archives" data-list="archives" data-level="1">
           <span data-list="files" data-level="2">
             <tr class="archive-items">
               <td class="col-sm-8">
-                <a class="i-archive__file-name" href="{{file-url}}" target="_blank" title="{{file-name}}">{{file-name}}</a>
+                {{file-name}}
               </td>
               <td class="col-sm-4">
-                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+                <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
               </td>
             </tr>
           </span>

modules/archive/info.json

@@ -99,8 +99,24 @@
     {
       "filename": "archive_index13",
       "name": {
-        "zh_tw": "13. 頁籤式 ( 模組標題, 類別標題, 標題, 檔案名稱, 下載連結, 描述 )",
+        "zh_tw": "13. 頁籤式 ( 模組標題, 類別標題, 標題, 下載連結, 描述 )",
-        "en": "13. Tab list  (widget-title, category, title, filename, download link, description)"
+        "en": "13. Tab list  (widget-title, category, title, download link, description)"
+      },
+      "thumbnail": "ar-tab1.png"
+    },
+    {
+      "filename": "archive_index14",
+      "name": {
+        "zh_tw": "14. 手風琴式列表 - 有下拉 - 針對各筆資料 ( 模組標題, 標題, 檔案名稱, 下載連結 )",
+        "en": "14. Accordion list - with drop down - For every data  (widget-title, title, filename, download link)"
+      },
+      "thumbnail": "ar2.png"
+    },
+    {
+      "filename": "archive_index15",
+      "name": {
+        "zh_tw": "15. 頁籤式 ( 模組標題, 類別標題, 標題, 完整檔案名稱, 下載連結, 描述 )",
+        "en": "15. Tab list  (widget-title, category, title, full filename, download link, description)"
       },
       "thumbnail": "ar-tab1.png"
     }
@@ -121,6 +137,22 @@
         "en": "2. Accordion list (widget-title, category, link of download page)"
       },
       "thumbnail": "thumb.png"
+    },
+    {
+      "filename": "archive_widget3",
+      "name": {
+        "zh_tw": "3. 列表 ( 模組標題, 類別標題, 檔案名稱, 包含檔案 )",
+        "en": "3. List (widget-title, category, and files)"
+      },
+      "thumbnail": "thumb.png"
+    },
+    {
+      "filename": "archive_widget4",
+      "name": {
+        "zh_tw": "4. 手風琴式列表 - 有下拉 ( 模組標題, 類別標題, 包含檔案 )",
+        "en": "4. Accordion list - with drop down (widget-title, category, and files)"
+      },
+      "thumbnail": "thumb.png"
     }
   ]
 }

modules/ask/_ask_widget_form.html.erb

@@ -10,7 +10,7 @@
       flex-wrap: wrap;
       display: flex;
       width: 100%;
-      align-items: center;
+      align-items: flex-start;
     }
     .ask-question .controls > *{
       display: block;
@@ -28,7 +28,7 @@
     .ask-question .form-horizontal .control-group .controls{
       margin: 0;
       display: inline-flex;
-      align-items: center;
+      align-items: flex-start;
       overflow: hidden;
       position: relative;
       min-width: 10em;
@@ -36,16 +36,22 @@
       padding-left: 0;
       width: 100%;
       padding: 0.5em;
-      justify-content: center;
+      justify-content: flex-start;
     }
     .ask-question .form-horizontal input[type="text"],.ask-question  .form-horizontal select{
       width: 97%;
     }
+    .ask-question .form-horizontal input[type="text"].hasDatepicker{
+      width: auto;
+    }
     .ask-question .form-horizontal .form-actions{
       position: relative;
       padding: 1em 0 0 0;
       text-align: center;
     }
+    .ask-question .controls > input[type="radio"]:not(:first-child) {
+      margin-left: 0.5em;
+    }
   </style>
   <link href="/assets/custom_field.css" media="screen" rel="stylesheet">
   <script src="/assets/validator"></script>

modules/gallery/_gallery_widget5.html.erb

@@ -2,7 +2,7 @@
   <h3 class="widget-title">
     <span>{{widget-title}}</span>
   </h3>
-  <link rel="stylesheet" type="text/css" href="/assets/gallery_card.css">
+  <% OrbitHelper.render_css_in_head(["gallery_card.css"]) %>
   <div class="row widget-content" data-level="0" data-list="images">
     <div class="card card-flip h-100">
       <div class="card-front">

modules/personal_journal/index_by_author.html.erb

@@ -0,0 +1,13 @@
+<h3 class="page-module-title">{{page-title}}</h3>
+<article>
+<div data-level="0" data-list="journal_papers">
+  <h3 class="year">{{year}}</h3>
+  <div data-level="1" data-list="jps_list">
+    <h4>{{name}}</h4>
+    <ul data-level="2" data-list="jps">
+      <li>{{title}}</li>
+    </ul>
+  </div>
+</div>
+</article>
+{{pagination_goes_here}}

modules/personal_journal/info.json

@@ -15,6 +15,14 @@
                 "en" : "2. List which includes search"
                 },
             "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "index_by_author",
+            "name" : {
+                "zh_tw" : "3. 作者論文",
+                "en" : "3. List by Author"
+                },
+            "thumbnail" : "thumb.png"
         }
     ]
 }

modules/video_pro/_video_pro_widget1.html.erb

@@ -0,0 +1,42 @@
+<div class="w-video_data video_data-widget-1">
+  <ul class="video_data__wrap" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div class="video_category">{{video_category}}</div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_group_time{
+      color: #4487cb;
+    }
+    .video_category{
+      color: #e4374a;
+    }
+    .video_title h4{
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info{
+      float: right;
+    }
+    .view_info img{
+      margin-right: 5px;
+    }
+  </style>
+</div>

modules/video_pro/_video_pro_widget_jqcloud1.html.erb

@@ -0,0 +1,20 @@
+<div class="w-video_data video_data-widget-2">
+  <%= javascript_include_tag 'video_pro/jqcloud.min' %>
+  <%= stylesheet_link_tag 'video_pro/jqcloud.min' %>
+  <div class="my_favorite_latin_words jqcloud" style="height: 100px;"></div>
+  <script>
+    $(document).ready(function(){
+      $('[data-subpart-id="{{subpart-id}}"] .my_favorite_latin_words').jQCloud({{jqcloud_words}}, {
+          autoResize: true,
+          afterCloudRender: function(){
+            var is_chinese = (window.I18n && I18n.locale == "zh_tw" || I18n.locale == "zh_cn");
+            $(this).find('a').each(function(i,v){
+              var $v = $(v);
+              $v.attr('title', is_chinese ? ('另開新視窗前往' + $v.text()) : ('Open ' + $v.text() + ' in new tab'));
+              $v.attr('target', '_blank');
+            })
+          }
+      });
+    })
+  </script>
+</div>

modules/video_pro/info.json

@@ -0,0 +1,54 @@
+{
+    "widgets" : [
+        {
+            "filename" : "video_pro_widget1",
+            "name" : {
+                "zh_tw" : "1. 影片列表1 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "1. Video List 1 ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_widget_jqcloud1",
+            "name" : {
+                "zh_tw" : "2. 影片文字雲(標籤)",
+                "en" : "2. Video Word Cloud(tags)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ],
+    "frontend" : [
+        {
+            "filename" : "video_pro_index1",
+            "name" : {
+                "zh_tw" : "1. 影片列表1 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "1. Video List 1 ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_index2",
+            "name" : {
+                "zh_tw" : "2. 影片列表1 + 類別 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "2. Video List 1 + Category filter + Search ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_index3",
+            "name" : {
+                "zh_tw" : "3. 影片列表2 + 懸浮框 ( 縮圖, 影片資訊)",
+                "en" : "3. Video List 2 + Modal window ( snapshot, video info)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_index_post_agency1",
+            "name" : {
+                "zh_tw" : "4. 影片列表3 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
+                "en" : "4. Video List 3 + Post Agency filter ( snapshot, video info, keyword, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}

modules/video_pro/video_pro_index1.html.erb

@@ -0,0 +1,43 @@
+<div class="i-video_data video_data-index-1">
+  <ul class="video_data__wrap" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div class="video_category">{{video_category}}</div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_group_time{
+      color: #4487cb;
+    }
+    .video_category{
+      color: #e4374a;
+    }
+    .video_title h4{
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info{
+      float: right;
+    }
+    .view_info img{
+      margin-right: 5px;
+    }
+  </style>
+</div>
+{{pagination_goes_here}}

modules/video_pro/video_pro_index2.html.erb

@@ -0,0 +1,141 @@
+<div class="i-video_data video_data-index-2">
+  <div class="video_filter_area col-sm-12">
+    <form>
+      <div class="category_box col-sm-6">
+        <select name="category" id="filter_category_box" data-list="categories" data-level="0">
+          {{option}}
+        </select>
+      </div>
+      <div class="search_box col-sm-6">
+        <div class="search_input">
+          <div class="search_keyword"><input accesskey="S" type="text" id="search" name="search" value="{{search_value}}" placeholder="{{search_placeholder}}"></div>
+          <div class="search_submit"><input type="submit" value="{{search_text1}}" title="{{search_text2}}"></div>
+        </div>
+      </div>
+    </form>
+    <div class="clearfix"></div>
+  </div>
+  <div class="page_tab_box col-sm-12">
+    <ul class="video_tablist" data-list="page_tabs" data-level="0">
+      <li class="{{klass}}"><a title="{{title}}" href="{{url}}">{{title}}</a></li>
+    </ul>
+  </div>
+  <ul class="video_data_wrap" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div class="video_category">{{video_category}}</div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_filter_area {
+      margin-bottom: 20px;
+    }
+    #filter_category_box {
+      width: 100%;
+      line-height: 50px;
+      height: 50px;
+      max-width: none;
+      border: none;
+      padding: 0 1em;
+    }
+    .category_box {
+      padding: 0;
+    }
+    .search_box {
+      padding-right: 0;
+    }
+    @media (max-width: 767px){
+      .search_box {
+        padding: 0;
+        margin-top: 0.5em;
+      }
+    }
+    .search_keyword {
+      margin-right: 50px;
+    }
+    .search_input input[type=text] {
+      padding: 0 1em;
+      line-height: 50px;
+    }
+    .search_input input {
+      max-width: none;
+      width: 100%;
+      height: 50px;
+      border: none;
+    }
+    .search_submit {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 50px;
+      height: 100%;
+    }
+    .search_input input[type=submit] {
+      background: url(/assets/video_pro/search_btn.png) center center no-repeat #c9c9c9;
+      font-size: 0;
+    }
+    .video_tablist {
+      overflow: hidden;
+      letter-spacing: 0.1em;
+      margin-bottom: 15px;
+      padding: 0;
+    }
+    .video_tablist>li, .album_tablist>li {
+      width: 50%;
+      float: left;
+    }
+    .video_tablist li.now_view a {
+      background-color: #c47f27;
+    }
+    .video_tablist a {
+      display: block;
+      padding: 10px 0;
+      text-align: center;
+      background-color: #8d681e;
+      color: #fff;
+      text-decoration: none;
+      font-size: 120%;
+    }
+    .video_data_wrap {
+      padding-left: 0;
+    }
+    .video_group_time {
+      color: #4487cb;
+    }
+    .video_category {
+      color: #e4374a;
+    }
+    .video_title h4 {
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info {
+      float: right;
+    }
+    .view_info img {
+      margin-right: 5px;
+    }
+  </style>
+  <script>
+    $('#filter_category_box').on('change', function(){
+      $(this).prop('form').submit();
+    })
+  </script>
+</div>
+{{pagination_goes_here}}

modules/video_pro/video_pro_index3.html.erb

@@ -0,0 +1,70 @@
+<div class="i-video_data video_data-index-3 video_data-modal-view">
+  <div class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" title="<%= I18n.t(:close) %>" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body video_goes_here">
+        </div>
+      </div>
+    </div>
+  </div>
+  <ul class="video_data__wrap" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="javascript:void(0)" title="{{video_title_escape}}" data-api-url="{{api_url}}">
+        <div class="video_snapshot_wrap">
+          <img class="video_snapshot" src="{{snapshot_url}}"/>
+          <img src="/assets/video_pro/btn-play.png" alt="" class="play_icon">
+        </div>
+        <div class="video_info">
+          <div class="video_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_title h4{
+      font-size: 1.1em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .video_snapshot_wrap {
+      position: relative;
+    }
+    .video_data-modal-view .modal-dialog {
+      width: 80%;
+    }
+    .video_data-modal-view .play_icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -webkit-transform: translateX(-50%) translateY(-50%);
+      -moz-transform: translateX(-50%) translateY(-50%);
+      transform: translateX(-50%) translateY(-50%);
+      width: 55px;
+    }
+  </style>
+  <script>
+    $(".video_data-modal-view .video_link").off('click').on('click', function(){
+      var _this = $(this);
+      var modal_window = _this.parents('.video_data-modal-view').find('.modal');
+      if(modal_window.length != 0){
+        var api_url = _this.data('api-url');
+        $.get(api_url).done(function(html){
+          modal_window.find('.video_goes_here').html(html);
+          modal_window.modal('show');
+        })
+      }
+    })
+  </script>
+</div>
+{{pagination_goes_here}}

modules/video_pro/video_pro_index_post_agency1.html.erb

@@ -0,0 +1,97 @@
+<div class="i-video_data video_data-post-agency-1">
+  <div class="video_filter_area col-sm-12">
+    <form>
+      <div class="category_box col-sm-12">
+        <select name="poster" id="filter_category_box" data-list="post_agencies" data-level="0">
+          {{option}}
+        </select>
+      </div>
+    </form>
+    <div class="clearfix"></div>
+  </div>
+  <ul class="video_data_wrap" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div class="video_keyword">{{keyword_trans}}: {{video_keyword}}</div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_filter_area {
+      margin-bottom: 20px;
+    }
+    #filter_category_box {
+      width: 100%;
+      line-height: 50px;
+      height: 50px;
+      max-width: none;
+      border: none;
+      padding: 0 1em;
+    }
+    .category_box {
+      padding: 0;
+    }
+    .video_tablist {
+      overflow: hidden;
+      letter-spacing: 0.1em;
+      margin-bottom: 15px;
+      padding: 0;
+    }
+    .video_tablist>li, .album_tablist>li {
+      width: 50%;
+      float: left;
+    }
+    .video_tablist li.now_view a {
+      background-color: #c47f27;
+    }
+    .video_tablist a {
+      display: block;
+      padding: 10px 0;
+      text-align: center;
+      background-color: #8d681e;
+      color: #fff;
+      text-decoration: none;
+      font-size: 120%;
+    }
+    .video_data_wrap {
+      padding-left: 0;
+    }
+    .video_group_time {
+      color: #4487cb;
+    }
+    .video_category {
+      color: #e4374a;
+    }
+    .video_title h4 {
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info {
+      float: right;
+    }
+    .view_info img {
+      margin-right: 5px;
+    }
+  </style>
+  <script>
+    $('#filter_category_box').on('change', function(){
+      $(this).prop('form').submit();
+    })
+  </script>
+</div>
+{{pagination_goes_here}}

modules/web_resource/_web_res_widget1.html.erb

@@ -7,7 +7,7 @@
       <div class="link-img-wrap{{display_image}}">
         <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
       </div>
-      <a class="widget-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">{{title}}</a>
+      <a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</a>
       <span data-list="statuses" data-level="1">
         <span class="label status {{status-class}}">{{status}}</span>
       </span>

modules/web_resource/_web_res_widget2.html.erb

@@ -1,4 +1,4 @@
-<div class="widget-link widget1">
+<div class="widget-link widget1 widget2">
   <h3 class="widget-title">
     <span>{{widget-title}}</span>
   </h3>
@@ -7,7 +7,7 @@
       <div class="link-img-wrap{{display_image}}">
         <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
       </div>
-      <a class="widget-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">{{title}}</a>
+      <a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</a>
       <span data-list="statuses" data-level="1">
         <span class="label status {{status-class}}">{{status}}</span>
       </span>

modules/web_resource/_web_res_widget3.html.erb

@@ -9,7 +9,7 @@
   <ul class="widget-link__list row" data-level="0" data-list="web_link" style="position:relative; z-index: 3">
     <li class="widget-link__item  col-md-3">
       <div class="liWrapper">
-            <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+        <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
       </div>
     </li>
   </ul>

modules/web_resource/_web_res_widget4.html.erb

@@ -7,13 +7,16 @@
   <div class="widget-link_wrapper">
 	  <div class="cycle-slideshow widget-content" style="margin: 0em 3.125em;"
 	    data-level="0" data-list="web_link" data-cycle-slides="> li"
-	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="4" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
+	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="4"
+      data-cycle-carousel-rwd-json="{768: 1}"
+      data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
 	    <li class="widget-link__item">
 	      <div class="liWrapper">
-	            <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+          <a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
+            <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+          </a>
 	      </div>
 	    </li>
-
 	  </div>
 	  <ul class="button-mid">
 	    <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
@@ -39,9 +42,8 @@
   .widget-link.widget-4 .button-mid{
     position: absolute;
     width: 100%;
-    height: 100%;
+    height: 0;
-    top: 0;
+    top: 50%;
-    left: 0;
   }
   .widget-link.widget-4 .button-mid .fa{
   	cursor: pointer;

modules/web_resource/_web_res_widget5.html.erb

@@ -7,13 +7,15 @@
   <div class="widget-link_wrapper">
 	  <div class="cycle-slideshow widget-content" style="margin: 0em 3.125em;"
 	    data-level="0" data-list="web_link" data-cycle-slides="> li"
-	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="5" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
+	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="5"
+      data-cycle-carousel-rwd-json="{768: 1}"
+      data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
 	    <li class="widget-link__item">
 	      <div class="liWrapper">
-            <a class="widget-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">
+          <a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
-              <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}"><br />
+            <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}"><br />
-              {{title}}
+            {{title}}
-            </a>
+          </a>
 	      </div>
 	    </li>
 
@@ -40,9 +42,8 @@
   .widget-link.widget-5 .button-mid{
     position: absolute;
     width: 100%;
-    height: 100%;
+    height: 0;
-    top: 0;
+    top: 50%;
-    left: 0;
   }
   .widget-link.widget-5 .button-mid .fa{
   	cursor: pointer;

modules/web_resource/_web_res_widget6.html.erb

@@ -7,12 +7,14 @@
   <div class="widget-link_wrapper">
 	  <div class="cycle-slideshow widget-content" style="margin: 0em 3.125em;"
 	    data-level="0" data-list="web_link" data-cycle-slides="> li"
-	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="5" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
+	    data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-carousel-visible="5"
+      data-cycle-carousel-rwd-json="{768: 1}"
+      data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
 	    <li class="widget-link__item">
 	      <div class="liWrapper">
-            <a class="widget-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">
+          <a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
-              <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}"><br />
+            <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}"><br />
-            </a>
+          </a>
 	      </div>
 	    </li>
 
@@ -41,9 +43,8 @@
   .widget-link.widget-6 .button-mid{
     position: absolute;
     width: 100%;
-    height: 100%;
+    height: 0;
-    top: 0;
+    top: 50%;
-    left: 0;
   }
   .widget-link.widget-6 .button-mid .fa{
   	cursor: pointer;

modules/web_resource/web_res_index1.html.erb

@@ -4,7 +4,7 @@
   </h1>
   <ul class="list-unstyled" data-list="web_link" data-level="0">
     <li class="index-content">
-      <a class="index-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">
+      <a class="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
         <h4>
           <div class="link-img-wrap{{display_image}}">
             <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">

modules/web_resource/web_res_index2.html.erb

@@ -4,7 +4,7 @@
   </h1>
   <ul class="list-unstyled" data-list="web_link" data-level="0">
     <li class="index-content col-md-4 col-sm-4">
-      <a class="index-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">
+      <a class="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
         <div class="link-img-wrap{{display_image}}">
           <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
         </div>

widgets/site_menu_widget/_site_menu_widget1.html.erb

@@ -5,10 +5,10 @@
 	<ul data-list="pages" class="sitemenu-list level-1 list-unstyled" data-level="0">
 		<li class="sitemenu-item level-1 {{active_class}}">
 			<a class="sitemenu-link level-1" href="{{url}}" target="{{target}}">{{page_name}}</a>
-			<ul class="sitemenu-list level-2" data-list="children" data-level="1">
+			<ul class="sitemenu-list level-2 {{dropdown}}" data-list="children" data-level="1">
 				<li class="sitemenu-item level-2" style="position: relative;">
 					<a class="sitemenu-link level-2" href="{{url}}" target="{{target}}">{{page_name}}</a>
-					<ul class="sitemenu-list level-2" data-list="children" data-level="2">
+					<ul class="sitemenu-list level-2 {{dropdown}}" data-list="children" data-level="2">
 						<li class="sitemenu-item level-3" style="position: relative;">
 							<a class="sitemenu-link level-3" href="{{url}}" target="{{target}}">{{page_name}}</a>
 						</li>

widgets/site_menu_widget/_site_menu_widget2.html.erb

@@ -5,10 +5,10 @@
 	<ul data-list="pages" class="sitemenu-list level-1 list-unstyled" data-level="0">
 		<li class="sitemenu-item level-1 {{active_class}}">
 			<a class="sitemenu-link level-1" href="{{url}}" target="{{target}}">{{page_name}}</a>
-			<ul class="sitemenu-list level-2" data-list="children" data-level="1">
+			<ul class="sitemenu-list level-2 {{dropdown}}" data-list="children" data-level="1">
 				<li class="sitemenu-item level-2" style="position: relative;">
 					<a class="sitemenu-link level-2" href="{{url}}" target="{{target}}">{{page_name}}</a>
-					<ul class="sitemenu-list level-2" data-list="children" data-level="2">
+					<ul class="sitemenu-list level-2 {{dropdown}}" data-list="children" data-level="2">
 						<li class="sitemenu-item level-3" style="position: relative;">
 							<a class="sitemenu-link level-3" href="{{url}}" target="{{target}}">{{page_name}}</a>
 						</li>