From 2c65d99c19edf91108790f474b17e5aec783eeda Mon Sep 17 00:00:00 2001
From: rulingcom <orbit@rulingcom.com>
Date: Sat, 11 Mar 2023 11:14:35 +0800
Subject: [PATCH] update template

---
 modules/ad_banner/_ad_banner_widget1.html.erb |   7 +-
 .../_ad_banner_widget2_video.html.erb         | 466 ++++++++++--------
 modules/archive/_archive_widget3.html.erb     |  29 ++
 modules/archive/_archive_widget4.html.erb     |  51 ++
 modules/archive/archive_index1.html.erb       |   2 +-
 modules/archive/archive_index12.html.erb      |  10 +-
 modules/archive/archive_index13.html.erb      |   7 +-
 modules/archive/archive_index14.html.erb      |  36 ++
 modules/archive/archive_index15.html.erb      |  41 ++
 modules/archive/archive_index2.html.erb       |  17 +-
 modules/archive/archive_index3.html.erb       |   2 +-
 modules/archive/archive_index4.html.erb       |  10 +-
 modules/archive/archive_index9.html.erb       |   6 +-
 modules/archive/info.json                     |  36 +-
 modules/ask/_ask_widget_form.html.erb         |  12 +-
 modules/calendar/_calendar_widget1.html.erb   | 124 ++---
 modules/calendar/_calendar_widget2.html.erb   | 156 +++---
 modules/calendar/index.html.erb               |  80 +--
 modules/calendar/index2.html.erb              | 108 ++--
 modules/calendar/index3.html.erb              | 140 +++---
 modules/calendar/info.json                    |  90 ++--
 modules/gallery/_gallery_widget4.html.erb     |   2 +-
 .../personal_journal/index_by_author.html.erb |  13 +
 modules/personal_journal/info.json            |   8 +
 modules/video_pro/_video_pro_widget1.html.erb |  42 ++
 .../_video_pro_widget_jqcloud1.html.erb       |  20 +
 modules/video_pro/info.json                   |  54 ++
 modules/video_pro/thumbs/thumb.png            | Bin 0 -> 4075 bytes
 modules/video_pro/video_pro_index1.html.erb   |  43 ++
 modules/video_pro/video_pro_index2.html.erb   | 141 ++++++
 modules/video_pro/video_pro_index3.html.erb   |  70 +++
 .../video_pro_index_post_agency1.html.erb     |  97 ++++
 .../web_resource/_web_res_widget1.html.erb    |   2 +-
 .../web_resource/_web_res_widget2.html.erb    |   4 +-
 .../web_resource/_web_res_widget3.html.erb    |   2 +-
 .../web_resource/_web_res_widget4.html.erb    |  14 +-
 .../web_resource/_web_res_widget5.html.erb    |  17 +-
 .../web_resource/_web_res_widget6.html.erb    |  15 +-
 modules/web_resource/web_res_index1.html.erb  |   2 +-
 modules/web_resource/web_res_index2.html.erb  |   2 +-
 .../_site_menu_widget1.html.erb               |   4 +-
 .../_site_menu_widget2.html.erb               |   4 +-
 42 files changed, 1376 insertions(+), 610 deletions(-)
 create mode 100644 modules/archive/_archive_widget3.html.erb
 create mode 100644 modules/archive/_archive_widget4.html.erb
 create mode 100644 modules/archive/archive_index14.html.erb
 create mode 100644 modules/archive/archive_index15.html.erb
 create mode 100644 modules/personal_journal/index_by_author.html.erb
 create mode 100644 modules/video_pro/_video_pro_widget1.html.erb
 create mode 100644 modules/video_pro/_video_pro_widget_jqcloud1.html.erb
 create mode 100644 modules/video_pro/info.json
 create mode 100644 modules/video_pro/thumbs/thumb.png
 create mode 100644 modules/video_pro/video_pro_index1.html.erb
 create mode 100644 modules/video_pro/video_pro_index2.html.erb
 create mode 100644 modules/video_pro/video_pro_index3.html.erb
 create mode 100644 modules/video_pro/video_pro_index_post_agency1.html.erb

diff --git a/modules/ad_banner/_ad_banner_widget1.html.erb b/modules/ad_banner/_ad_banner_widget1.html.erb
index d5c4f38..410f3b7 100644
--- a/modules/ad_banner/_ad_banner_widget1.html.erb
+++ b/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%;
-    top: 0;
-    left: 0;
+    height: 0;
+    top: 50%;
   }
   .next-button,.prev-button{
     cursor: pointer;
diff --git a/modules/ad_banner/_ad_banner_widget2_video.html.erb b/modules/ad_banner/_ad_banner_widget2_video.html.erb
index 5b94332..5d45b10 100644
--- a/modules/ad_banner/_ad_banner_widget2_video.html.erb
+++ b/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'){
-  $(document).ready(function() {
-    $(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
-      $(this).trigger('click');
+  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 = {};
-  function find_out_yt_event_list_key(yt_player){
-    var defalt_key = 'o';
-    var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
-    var prop_nums_thresh = 6;
-    if(all_keys.indexOf(defalt_key) != -1){
-      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)){
+    if(window.yt_players == undefined)
+      window.yt_players = {};
+    function find_out_yt_event_list_key(yt_player){
+      var defalt_key = 'o';
+      var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
+      var prop_nums_thresh = 6;
+      if(all_keys.indexOf(defalt_key) != -1){
+        if((yt_player[defalt_key] instanceof Object) && Object.keys(yt_player[defalt_key]).length > prop_nums_thresh){
           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;
+      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 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 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);
-          }
-        })
+      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;
     }
-    $(".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);
+    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 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;
   }
diff --git a/modules/archive/_archive_widget3.html.erb b/modules/archive/_archive_widget3.html.erb
new file mode 100644
index 0000000..45ffc79
--- /dev/null
+++ b/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>
diff --git a/modules/archive/_archive_widget4.html.erb b/modules/archive/_archive_widget4.html.erb
new file mode 100644
index 0000000..7791aee
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/modules/archive/archive_index1.html.erb b/modules/archive/archive_index1.html.erb
index 6efc360..af52014 100644
--- a/modules/archive/archive_index1.html.erb
+++ b/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>
diff --git a/modules/archive/archive_index12.html.erb b/modules/archive/archive_index12.html.erb
index a078919..32aaf84 100644
--- a/modules/archive/archive_index12.html.erb
+++ b/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>
\ No newline at end of file
diff --git a/modules/archive/archive_index13.html.erb b/modules/archive/archive_index13.html.erb
index 9339ea5..42e6dc3 100644
--- a/modules/archive/archive_index13.html.erb
+++ b/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;
   }
diff --git a/modules/archive/archive_index14.html.erb b/modules/archive/archive_index14.html.erb
new file mode 100644
index 0000000..d1c7762
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/modules/archive/archive_index15.html.erb b/modules/archive/archive_index15.html.erb
new file mode 100644
index 0000000..862df0c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/modules/archive/archive_index2.html.erb b/modules/archive/archive_index2.html.erb
index 70fe62e..454f049 100644
--- a/modules/archive/archive_index2.html.erb
+++ b/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>
-                <span class="label label-primary">{{file-type}}</span>
+                <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>
           </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>
\ No newline at end of file
diff --git a/modules/archive/archive_index3.html.erb b/modules/archive/archive_index3.html.erb
index 21fb229..bbd7caf 100644
--- a/modules/archive/archive_index3.html.erb
+++ b/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>
diff --git a/modules/archive/archive_index4.html.erb b/modules/archive/archive_index4.html.erb
index 48ebcf4..e4c39a4 100644
--- a/modules/archive/archive_index4.html.erb
+++ b/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>
-                <span class="label label-primary">{{file-type}}</span>
+                <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>
           </dl>
         </div>
       </div>
     </div>
-        {{link_to_edit}}
+    {{link_to_edit}}
   </div>
 </div>
\ No newline at end of file
diff --git a/modules/archive/archive_index9.html.erb b/modules/archive/archive_index9.html.erb
index 839160f..02056ec 100644
--- a/modules/archive/archive_index9.html.erb
+++ b/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>
diff --git a/modules/archive/info.json b/modules/archive/info.json
index 701b777..b052589 100644
--- a/modules/archive/info.json
+++ b/modules/archive/info.json
@@ -99,8 +99,24 @@
     {
       "filename": "archive_index13",
       "name": {
-        "zh_tw": "13. 頁籤式 ( 模組標題, 類別標題, 標題, 檔案名稱, 下載連結, 描述 )",
-        "en": "13. Tab list  (widget-title, category, title, filename, download link, description)"
+        "zh_tw": "13. 頁籤式 ( 模組標題, 類別標題, 標題, 下載連結, 描述 )",
+        "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"
     }
   ]
 }
\ No newline at end of file
diff --git a/modules/ask/_ask_widget_form.html.erb b/modules/ask/_ask_widget_form.html.erb
index 7f677b5..55f4880 100644
--- a/modules/ask/_ask_widget_form.html.erb
+++ b/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>
diff --git a/modules/calendar/_calendar_widget1.html.erb b/modules/calendar/_calendar_widget1.html.erb
index f691295..163bb6e 100644
--- a/modules/calendar/_calendar_widget1.html.erb
+++ b/modules/calendar/_calendar_widget1.html.erb
@@ -1,63 +1,63 @@
-<div class="w-calendar widget-calendar-1" data-module="calendar">
-    <div class='month_template'>
-            <h4 class="widget-title ">
-                <span class="text"><span style="display: none;">placeholder</span></span>
-                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
-            </h4>
-        <div class="w-calendar-nav">
-            <a href="#" class="w-calendar-nav-prev">
-                <i class="fa fa-chevron-left"></i>
-                <span class="w-calendar-nav-prev-text hide">Prev</span>
-            </a>
-            <a href="#" class="w-calendar-nav-next">
-                <i class="fa fa-chevron-right"></i>
-                <span class="w-calendar-nav-next-text hide">Next</span>
-            </a>
-        </div>
-        <table class="table table-condensed w-calendar-table">
-            <thead>
-                <tr data-list="week_title" data-level="0">
-                    <th>{{week_title}}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {{default_column}}
-            </tbody>
-        </table>
-    </div>
-    <div class="calendar-events" style="display: none;">
-        <div class="close_box">X</div>
-        <div class="event-header"></div>
-        <div class="event-containers">
-            
-        </div>
-    </div> 
-</div>
-<%= stylesheet_link_tag "calendar_widget1" %>
-<script>
-    $(document).ready(function(){
-        if(document.getElementById("calendar-widget_module") == null){
-            var tag = document.createElement('script');
-            tag.setAttribute("id", "calendar-widget_module");
-            tag.src = "<%= asset_path('calendar_widget.js') %>";
-            tag.onload = function(){
-                $('div.widget-calendar-1[data-module=calendar][data-subpart-id="{{subpart-id}}"]').each(function(index){
-                    var calendar = $(this),
-                        cmi = new CalendarModuleMonth1(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}",false);
-                    cmi.currentMonth();
-                    calendar.find("div.w-calendar-nav a").on("click",function(){
-                        var el = $(this);
-                        if(el.hasClass("w-calendar-nav-prev")){
-                            cmi.prevMonth();
-                        }else if(el.hasClass("w-calendar-nav-next")){
-                            cmi.nextMonth();
-                        }
-                        return false;
-                    })
-                })
-            }
-            var head = document.getElementsByTagName("head");
-            head[0].appendChild(tag);
-        }
-    });
+<div class="w-calendar widget-calendar-1" data-module="calendar">
+    <div class='month_template'>
+            <h4 class="widget-title ">
+                <span class="text"><span style="display: none;">placeholder</span></span>
+                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
+            </h4>
+        <div class="w-calendar-nav">
+            <a href="#" class="w-calendar-nav-prev">
+                <i class="fa fa-chevron-left"></i>
+                <span class="w-calendar-nav-prev-text hide">Prev</span>
+            </a>
+            <a href="#" class="w-calendar-nav-next">
+                <i class="fa fa-chevron-right"></i>
+                <span class="w-calendar-nav-next-text hide">Next</span>
+            </a>
+        </div>
+        <table class="table table-condensed w-calendar-table">
+            <thead>
+                <tr data-list="week_title" data-level="0">
+                    <th>{{week_title}}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{default_column}}
+            </tbody>
+        </table>
+    </div>
+    <div class="calendar-events" style="display: none;">
+        <div class="close_box">X</div>
+        <div class="event-header"></div>
+        <div class="event-containers">
+            
+        </div>
+    </div> 
+</div>
+<%= stylesheet_link_tag "calendar_widget1" %>
+<script>
+    $(document).ready(function(){
+        if(document.getElementById("calendar-widget_module") == null){
+            var tag = document.createElement('script');
+            tag.setAttribute("id", "calendar-widget_module");
+            tag.src = "<%= asset_path('calendar_widget.js') %>";
+            tag.onload = function(){
+                $('div.widget-calendar-1[data-module=calendar][data-subpart-id="{{subpart-id}}"]').each(function(index){
+                    var calendar = $(this),
+                        cmi = new CalendarModuleMonth1(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}",false);
+                    cmi.currentMonth();
+                    calendar.find("div.w-calendar-nav a").on("click",function(){
+                        var el = $(this);
+                        if(el.hasClass("w-calendar-nav-prev")){
+                            cmi.prevMonth();
+                        }else if(el.hasClass("w-calendar-nav-next")){
+                            cmi.nextMonth();
+                        }
+                        return false;
+                    })
+                })
+            }
+            var head = document.getElementsByTagName("head");
+            head[0].appendChild(tag);
+        }
+    });
 </script>
\ No newline at end of file
diff --git a/modules/calendar/_calendar_widget2.html.erb b/modules/calendar/_calendar_widget2.html.erb
index 4313f12..f1fa761 100644
--- a/modules/calendar/_calendar_widget2.html.erb
+++ b/modules/calendar/_calendar_widget2.html.erb
@@ -1,79 +1,79 @@
-<div class="w-calendar widget-calendar-2" data-module="calendar">
-    <div class="w-calendar-title {{widget_title_class}}">
-        <span>{{calendar_title}}</span>
-        <span>{{widget_title}}</span>
-    </div>
-    <div class='month_template'>
-        <h4 class="widget-title">
-            <span class="text"><span style="display: none;">placeholder</span></span>
-            <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
-        </h4>
-        <div class="w-calendar-nav">
-            <a href="#" class="w-calendar-nav-prev">
-                <i class="fa fa-chevron-left"></i>
-                <span class="w-calendar-nav-prev-text hide">Prev</span>
-            </a>
-            <a href="#" class="w-calendar-nav-next">
-                <i class="fa fa-chevron-right"></i>
-                <span class="w-calendar-nav-next-text hide">Next</span>
-            </a>
-        </div>
-        <table class="table table-condensed w-calendar-table">
-            <thead>
-                <tr data-list="week_title" data-level="0">
-                    <th>{{week_title}}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {{default_column}}
-            </tbody>
-        </table>
-    </div>
-    <div class="calendar-events" style="display: none;">
-        <div class="event">
-            <div class="event-header">
-                <div class="date">
-                    <div class="day"></div>
-                    <div class="month"></div>
-                </div>
-                <div class="event-title">
-                    <div class="event-inner-title"></div>
-                    <div class="duration"></div>
-                </div>
-            </div>
-            <div class="event-wraper">
-                <div class="event-containers">
-                    
-                </div>
-            </div>
-        </div>
-    </div> 
-</div>
-<%= stylesheet_link_tag "calendar_widget2" %>
-<script>
-    $(document).ready(function(){
-        if(document.getElementById("calendar-widget_module2") == null){
-            var tag = document.createElement('script');
-            tag.setAttribute("id", "calendar-widget_module2");
-            tag.src = "<%= asset_path('calendar_widget2.js') %>";
-            tag.onload = function(){
-                $('div.widget-calendar-2[data-module="calendar"][data-subpart-id="{{subpart-id}}"]').each(function(index){
-                    var calendar = $(this),
-                        cmi = new CalendarModuleMonth2(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}",false);
-                    cmi.currentMonth();
-                    calendar.find("div.w-calendar-nav a").on("click",function(){
-                        var el = $(this);
-                        if(el.hasClass("w-calendar-nav-prev")){
-                            cmi.prevMonth();
-                        }else if(el.hasClass("w-calendar-nav-next")){
-                            cmi.nextMonth();
-                        }
-                        return false;
-                    })
-                })
-            }
-            var head = document.getElementsByTagName("head");
-            head[0].appendChild(tag);
-        }
-    });
+<div class="w-calendar widget-calendar-2" data-module="calendar">
+    <div class="w-calendar-title {{widget_title_class}}">
+        <span>{{calendar_title}}</span>
+        <span>{{widget_title}}</span>
+    </div>
+    <div class='month_template'>
+        <h4 class="widget-title">
+            <span class="text"><span style="display: none;">placeholder</span></span>
+            <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
+        </h4>
+        <div class="w-calendar-nav">
+            <a href="#" class="w-calendar-nav-prev">
+                <i class="fa fa-chevron-left"></i>
+                <span class="w-calendar-nav-prev-text hide">Prev</span>
+            </a>
+            <a href="#" class="w-calendar-nav-next">
+                <i class="fa fa-chevron-right"></i>
+                <span class="w-calendar-nav-next-text hide">Next</span>
+            </a>
+        </div>
+        <table class="table table-condensed w-calendar-table">
+            <thead>
+                <tr data-list="week_title" data-level="0">
+                    <th>{{week_title}}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{default_column}}
+            </tbody>
+        </table>
+    </div>
+    <div class="calendar-events" style="display: none;">
+        <div class="event">
+            <div class="event-header">
+                <div class="date">
+                    <div class="day"></div>
+                    <div class="month"></div>
+                </div>
+                <div class="event-title">
+                    <div class="event-inner-title"></div>
+                    <div class="duration"></div>
+                </div>
+            </div>
+            <div class="event-wraper">
+                <div class="event-containers">
+                    
+                </div>
+            </div>
+        </div>
+    </div> 
+</div>
+<%= stylesheet_link_tag "calendar_widget2" %>
+<script>
+    $(document).ready(function(){
+        if(document.getElementById("calendar-widget_module2") == null){
+            var tag = document.createElement('script');
+            tag.setAttribute("id", "calendar-widget_module2");
+            tag.src = "<%= asset_path('calendar_widget2.js') %>";
+            tag.onload = function(){
+                $('div.widget-calendar-2[data-module="calendar"][data-subpart-id="{{subpart-id}}"]').each(function(index){
+                    var calendar = $(this),
+                        cmi = new CalendarModuleMonth2(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}",false);
+                    cmi.currentMonth();
+                    calendar.find("div.w-calendar-nav a").on("click",function(){
+                        var el = $(this);
+                        if(el.hasClass("w-calendar-nav-prev")){
+                            cmi.prevMonth();
+                        }else if(el.hasClass("w-calendar-nav-next")){
+                            cmi.nextMonth();
+                        }
+                        return false;
+                    })
+                })
+            }
+            var head = document.getElementsByTagName("head");
+            head[0].appendChild(tag);
+        }
+    });
 </script>
\ No newline at end of file
diff --git a/modules/calendar/index.html.erb b/modules/calendar/index.html.erb
index 37a4a1b..37e7cf8 100644
--- a/modules/calendar/index.html.erb
+++ b/modules/calendar/index.html.erb
@@ -1,41 +1,41 @@
-<div id="orbit_calendar">
-  <div id="sec1">
-    <div class="btn-toolbar" id="navigation">
-      <div id="calendar-nav">
-        <div class="btn-group">
-          <button class="btn btn-default btn-sm" id="prev_month_btn">
-            <i class="icon-chevron-left"></i>
-          </button>
-          <button class="btn btn-default btn-sm" id="next_month_btn">
-            <i class="icon-chevron-right"></i>
-          </button>
-          <button class="btn btn-default btn-sm" id="today_btn"><%=t('calendar.today')%></button>
-        </div>
-      </div>
-    </div>
-    <div class="form-inline" id="range_selection"></div>
-  </div>
-  <div id='sec3' class="btn-toolbar">
-    <div class="btn-group calendar_mode">
-      <div data-list="modes_info" data-level="0">
-        <button class="btn btn-default mode_switch btn-sm {{active_class}}" data-mode="{{mode}}" >{{trans}}</button>
-      </div>
-    </div>
-    <button id="refresh_btn" class="btn btn-default btn-sm">
-      <i class="icons-cycle"></i>
-    </button>
-  </div>
-  <div id="view_holder">
-    <h3 id="current_title" class="current_day_title">
-      <span style="display: none;">placeholder</span>
-    </h3>
-    <div id="calendar"></div>
-    <div id="calendar_agenda"></div>
-  </div>
-</div>
-<div id="event_quick_view" class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>
-<div id="calendar-loading"></div>
-
-<script type="text/javascript">
-  var calendar = new Calendar("#calendar","{{page_id}}");
+<div id="orbit_calendar">
+  <div id="sec1">
+    <div class="btn-toolbar" id="navigation">
+      <div id="calendar-nav">
+        <div class="btn-group">
+          <button class="btn btn-default btn-sm" id="prev_month_btn">
+            <i class="icon-chevron-left"></i>
+          </button>
+          <button class="btn btn-default btn-sm" id="next_month_btn">
+            <i class="icon-chevron-right"></i>
+          </button>
+          <button class="btn btn-default btn-sm" id="today_btn"><%=t('calendar.today')%></button>
+        </div>
+      </div>
+    </div>
+    <div class="form-inline" id="range_selection"></div>
+  </div>
+  <div id='sec3' class="btn-toolbar">
+    <div class="btn-group calendar_mode">
+      <div data-list="modes_info" data-level="0">
+        <button class="btn btn-default mode_switch btn-sm {{active_class}}" data-mode="{{mode}}" >{{trans}}</button>
+      </div>
+    </div>
+    <button id="refresh_btn" class="btn btn-default btn-sm">
+      <i class="icons-cycle"></i>
+    </button>
+  </div>
+  <div id="view_holder">
+    <h3 id="current_title" class="current_day_title">
+      <span style="display: none;">placeholder</span>
+    </h3>
+    <div id="calendar"></div>
+    <div id="calendar_agenda"></div>
+  </div>
+</div>
+<div id="event_quick_view" class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>
+<div id="calendar-loading"></div>
+
+<script type="text/javascript">
+  var calendar = new Calendar("#calendar","{{page_id}}");
 </script>
\ No newline at end of file
diff --git a/modules/calendar/index2.html.erb b/modules/calendar/index2.html.erb
index b2d63e0..6ffa18b 100644
--- a/modules/calendar/index2.html.erb
+++ b/modules/calendar/index2.html.erb
@@ -1,55 +1,55 @@
-<script type="text/javascript" src="<%= asset_path('calendar_widget.js') %>" id="calendar-index_module"></script>
-{{style_tag}}
-<div class="w-calendar widget-calendar-1 index2" data-module="calendar" data-page-id="{{page_id}}">
-    <div class='month_template'>
-            <h4 class="widget-title">
-                <span class="text"><span style="display: none;">placeholder</span></span>
-                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
-            </h4>
-        <div class="w-calendar-nav">
-            <a href="#" class="w-calendar-nav-prev">
-                <i class="fa fa-chevron-left"></i>
-                <span class="w-calendar-nav-prev-text hide">Prev</span>
-            </a>
-            <a href="#" class="w-calendar-nav-next">
-                <i class="fa fa-chevron-right"></i>
-                <span class="w-calendar-nav-next-text hide">Next</span>
-            </a>
-        </div>
-        <table class="table table-condensed w-calendar-table">
-            <thead>
-                <tr data-list="week_title" data-level="0">
-                    <th>{{week_title}}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {{default_column}}
-            </tbody>
-        </table>
-    </div>
-    <div class="calendar-events" style="display: none;">
-        <div class="close_box">X</div>
-        <div class="event-header"></div>
-        <div class="event-containers">
-            
-        </div>
-    </div> 
-</div>
-<script>
-    $(document).ready(function(){
-        $("div.index2[data-module=calendar]").each(function(index){
-            var calendar = $(this),
-                cmi = new CalendarModuleMonth1(new Date(), calendar,calendar.data("page-id"),"",true);
-            cmi.currentMonth();
-            calendar.find("div.w-calendar-nav a").on("click",function(){
-                var el = $(this);
-                if(el.hasClass("w-calendar-nav-prev")){
-                    cmi.prevMonth();
-                }else if(el.hasClass("w-calendar-nav-next")){
-                    cmi.nextMonth();
-                }
-                return false;
-            })
-        })
-    })
+<script type="text/javascript" src="<%= asset_path('calendar_widget.js') %>" id="calendar-index_module"></script>
+{{style_tag}}
+<div class="w-calendar widget-calendar-1 index2" data-module="calendar" data-page-id="{{page_id}}">
+    <div class='month_template'>
+            <h4 class="widget-title">
+                <span class="text"><span style="display: none;">placeholder</span></span>
+                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
+            </h4>
+        <div class="w-calendar-nav">
+            <a href="#" class="w-calendar-nav-prev">
+                <i class="fa fa-chevron-left"></i>
+                <span class="w-calendar-nav-prev-text hide">Prev</span>
+            </a>
+            <a href="#" class="w-calendar-nav-next">
+                <i class="fa fa-chevron-right"></i>
+                <span class="w-calendar-nav-next-text hide">Next</span>
+            </a>
+        </div>
+        <table class="table table-condensed w-calendar-table">
+            <thead>
+                <tr data-list="week_title" data-level="0">
+                    <th>{{week_title}}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{default_column}}
+            </tbody>
+        </table>
+    </div>
+    <div class="calendar-events" style="display: none;">
+        <div class="close_box">X</div>
+        <div class="event-header"></div>
+        <div class="event-containers">
+            
+        </div>
+    </div> 
+</div>
+<script>
+    $(document).ready(function(){
+        $("div.index2[data-module=calendar]").each(function(index){
+            var calendar = $(this),
+                cmi = new CalendarModuleMonth1(new Date(), calendar,calendar.data("page-id"),"",true);
+            cmi.currentMonth();
+            calendar.find("div.w-calendar-nav a").on("click",function(){
+                var el = $(this);
+                if(el.hasClass("w-calendar-nav-prev")){
+                    cmi.prevMonth();
+                }else if(el.hasClass("w-calendar-nav-next")){
+                    cmi.nextMonth();
+                }
+                return false;
+            })
+        })
+    })
 </script>
\ No newline at end of file
diff --git a/modules/calendar/index3.html.erb b/modules/calendar/index3.html.erb
index de8cabd..2ab0863 100644
--- a/modules/calendar/index3.html.erb
+++ b/modules/calendar/index3.html.erb
@@ -1,71 +1,71 @@
-<script type="text/javascript" src="<%= asset_path('calendar_widget2.js') %>" id="calendar-index_module2"></script>
-{{style_tag}}
-<div class="w-calendar widget-calendar-2 index3" data-module="calendar" data-page-id="{{page_id}}">
-    <div class="w-calendar-title {{widget_title_class}}">
-        <span>{{calendar_title}}</span>
-        <span>{{widget_title}}</span>
-    </div>
-    <div class='month_template'>
-            <h4 class="widget-title ">
-                <span class="text"><span style="display: none;">placeholder</span></span>
-                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
-            </h4>
-        <div class="w-calendar-nav">
-            <a href="#" class="w-calendar-nav-prev">
-                <i class="fa fa-chevron-left"></i>
-                <span class="w-calendar-nav-prev-text hide">Prev</span>
-            </a>
-            <a href="#" class="w-calendar-nav-next">
-                <i class="fa fa-chevron-right"></i>
-                <span class="w-calendar-nav-next-text hide">Next</span>
-            </a>
-        </div>
-        <table class="table table-condensed w-calendar-table">
-            <thead>
-                <tr data-list="week_title" data-level="0">
-                    <th>{{week_title}}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {{default_column}}
-            </tbody>
-        </table>
-    </div>
-    <div class="calendar-events" style="display: none;">
-        <div class="event">
-            <div class="event-header">
-                <div class="date">
-                    <div class="day"></div>
-                    <div class="month"></div>
-                </div>
-                <div class="event-title">
-                    <div class="event-inner-title"></div>
-                    <div class="duration"></div>
-                </div>
-            </div>
-            <div class="event-wraper">
-                <div class="event-containers">
-                    
-                </div>
-            </div>
-        </div>
-    </div> 
-</div>
-<script>
-    $(document).ready(function(){
-        $("div.index3[data-module=calendar]").each(function(index){
-            var calendar = $(this),
-                cmi = new CalendarModuleMonth2(new Date(), calendar,calendar.data("page-id"),"",true);
-            cmi.currentMonth();
-            calendar.find("div.w-calendar-nav a").on("click",function(){
-                var el = $(this);
-                if(el.hasClass("w-calendar-nav-prev")){
-                    cmi.prevMonth();
-                }else if(el.hasClass("w-calendar-nav-next")){
-                    cmi.nextMonth();
-                }
-                return false;
-            })
-        })
-    })
+<script type="text/javascript" src="<%= asset_path('calendar_widget2.js') %>" id="calendar-index_module2"></script>
+{{style_tag}}
+<div class="w-calendar widget-calendar-2 index3" data-module="calendar" data-page-id="{{page_id}}">
+    <div class="w-calendar-title {{widget_title_class}}">
+        <span>{{calendar_title}}</span>
+        <span>{{widget_title}}</span>
+    </div>
+    <div class='month_template'>
+            <h4 class="widget-title ">
+                <span class="text"><span style="display: none;">placeholder</span></span>
+                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
+            </h4>
+        <div class="w-calendar-nav">
+            <a href="#" class="w-calendar-nav-prev">
+                <i class="fa fa-chevron-left"></i>
+                <span class="w-calendar-nav-prev-text hide">Prev</span>
+            </a>
+            <a href="#" class="w-calendar-nav-next">
+                <i class="fa fa-chevron-right"></i>
+                <span class="w-calendar-nav-next-text hide">Next</span>
+            </a>
+        </div>
+        <table class="table table-condensed w-calendar-table">
+            <thead>
+                <tr data-list="week_title" data-level="0">
+                    <th>{{week_title}}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{default_column}}
+            </tbody>
+        </table>
+    </div>
+    <div class="calendar-events" style="display: none;">
+        <div class="event">
+            <div class="event-header">
+                <div class="date">
+                    <div class="day"></div>
+                    <div class="month"></div>
+                </div>
+                <div class="event-title">
+                    <div class="event-inner-title"></div>
+                    <div class="duration"></div>
+                </div>
+            </div>
+            <div class="event-wraper">
+                <div class="event-containers">
+                    
+                </div>
+            </div>
+        </div>
+    </div> 
+</div>
+<script>
+    $(document).ready(function(){
+        $("div.index3[data-module=calendar]").each(function(index){
+            var calendar = $(this),
+                cmi = new CalendarModuleMonth2(new Date(), calendar,calendar.data("page-id"),"",true);
+            cmi.currentMonth();
+            calendar.find("div.w-calendar-nav a").on("click",function(){
+                var el = $(this);
+                if(el.hasClass("w-calendar-nav-prev")){
+                    cmi.prevMonth();
+                }else if(el.hasClass("w-calendar-nav-next")){
+                    cmi.nextMonth();
+                }
+                return false;
+            })
+        })
+    })
 </script>
\ No newline at end of file
diff --git a/modules/calendar/info.json b/modules/calendar/info.json
index 529ac5a..b189381 100644
--- a/modules/calendar/info.json
+++ b/modules/calendar/info.json
@@ -1,46 +1,46 @@
-{
-    "frontend": [
-        {
-            "filename" : "index",
-            "name" : {
-                "zh_tw" : "1. 行事曆",
-                "en" : "1. Calendar"
-                },
-            "thumbnail" : "thumb.png"
-        },
-        {
-            "filename" : "index2",
-            "name" : {
-                "zh_tw" : "2. 行事曆(和widget樣式1同)",
-                "en" : "2. Calendar(same as widget style 1)"
-                },
-            "thumbnail" : "thumb.png"
-        },
-        {
-            "filename" : "index3",
-            "name" : {
-                "zh_tw" : "3. 行事曆加公告",
-                "en" : "3. Calendar with announcement"
-                },
-            "thumbnail" : "thumb.png"
-        }
-    ],
-    "widgets" : [
-        {
-            "filename" : "calendar_widget1",
-            "name" : {
-                "zh_tw" : "1. 行事曆",
-                "en" : "1. Calendar"
-            },
-            "thumbnail" : "thumb.png"
-        },
-        {
-            "filename" : "calendar_widget2",
-            "name" : {
-                "zh_tw" : "2. 行事曆加公告",
-                "en" : "2. Calendar with announcement"
-            },
-            "thumbnail" : "thumb2.png"
-        }
-    ]
+{
+    "frontend": [
+        {
+            "filename" : "index",
+            "name" : {
+                "zh_tw" : "1. 行事曆",
+                "en" : "1. Calendar"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "index2",
+            "name" : {
+                "zh_tw" : "2. 行事曆(和widget樣式1同)",
+                "en" : "2. Calendar(same as widget style 1)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "index3",
+            "name" : {
+                "zh_tw" : "3. 行事曆加公告",
+                "en" : "3. Calendar with announcement"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ],
+    "widgets" : [
+        {
+            "filename" : "calendar_widget1",
+            "name" : {
+                "zh_tw" : "1. 行事曆",
+                "en" : "1. Calendar"
+            },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "calendar_widget2",
+            "name" : {
+                "zh_tw" : "2. 行事曆加公告",
+                "en" : "2. Calendar with announcement"
+            },
+            "thumbnail" : "thumb2.png"
+        }
+    ]
 }
\ No newline at end of file
diff --git a/modules/gallery/_gallery_widget4.html.erb b/modules/gallery/_gallery_widget4.html.erb
index 2b56d73..fc6ec94 100644
--- a/modules/gallery/_gallery_widget4.html.erb
+++ b/modules/gallery/_gallery_widget4.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">
diff --git a/modules/personal_journal/index_by_author.html.erb b/modules/personal_journal/index_by_author.html.erb
new file mode 100644
index 0000000..972a947
--- /dev/null
+++ b/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}}
\ No newline at end of file
diff --git a/modules/personal_journal/info.json b/modules/personal_journal/info.json
index bdb0c2c..b3b2ea3 100644
--- a/modules/personal_journal/info.json
+++ b/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"
         }
     ]
 }
\ No newline at end of file
diff --git a/modules/video_pro/_video_pro_widget1.html.erb b/modules/video_pro/_video_pro_widget1.html.erb
new file mode 100644
index 0000000..07be0c6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/modules/video_pro/_video_pro_widget_jqcloud1.html.erb b/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
new file mode 100644
index 0000000..1d48386
--- /dev/null
+++ b/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>
diff --git a/modules/video_pro/info.json b/modules/video_pro/info.json
new file mode 100644
index 0000000..2d2056a
--- /dev/null
+++ b/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"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/modules/video_pro/thumbs/thumb.png b/modules/video_pro/thumbs/thumb.png
new file mode 100644
index 0000000000000000000000000000000000000000..266af5606742714c262a949cd58aedc2b84b1959
GIT binary patch
literal 4075
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
NZElK1ml$8T`hP=tBcK2P

literal 0
HcmV?d00001

diff --git a/modules/video_pro/video_pro_index1.html.erb b/modules/video_pro/video_pro_index1.html.erb
new file mode 100644
index 0000000..0b1cac0
--- /dev/null
+++ b/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}}
\ No newline at end of file
diff --git a/modules/video_pro/video_pro_index2.html.erb b/modules/video_pro/video_pro_index2.html.erb
new file mode 100644
index 0000000..165ec8d
--- /dev/null
+++ b/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}}
\ No newline at end of file
diff --git a/modules/video_pro/video_pro_index3.html.erb b/modules/video_pro/video_pro_index3.html.erb
new file mode 100644
index 0000000..5068e81
--- /dev/null
+++ b/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}}
\ No newline at end of file
diff --git a/modules/video_pro/video_pro_index_post_agency1.html.erb b/modules/video_pro/video_pro_index_post_agency1.html.erb
new file mode 100644
index 0000000..ce74a1d
--- /dev/null
+++ b/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}}
\ No newline at end of file
diff --git a/modules/web_resource/_web_res_widget1.html.erb b/modules/web_resource/_web_res_widget1.html.erb
index 80c965b..3822492 100644
--- a/modules/web_resource/_web_res_widget1.html.erb
+++ b/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>
diff --git a/modules/web_resource/_web_res_widget2.html.erb b/modules/web_resource/_web_res_widget2.html.erb
index 017ce7f..5299a37 100644
--- a/modules/web_resource/_web_res_widget2.html.erb
+++ b/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>
diff --git a/modules/web_resource/_web_res_widget3.html.erb b/modules/web_resource/_web_res_widget3.html.erb
index 70cfa0d..6fddc5d 100644
--- a/modules/web_resource/_web_res_widget3.html.erb
+++ b/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>
diff --git a/modules/web_resource/_web_res_widget4.html.erb b/modules/web_resource/_web_res_widget4.html.erb
index 22e7870..b249470 100644
--- a/modules/web_resource/_web_res_widget4.html.erb
+++ b/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%;
-    top: 0;
-    left: 0;
+    height: 0;
+    top: 50%;
   }
   .widget-link.widget-4 .button-mid .fa{
   	cursor: pointer;
diff --git a/modules/web_resource/_web_res_widget5.html.erb b/modules/web_resource/_web_res_widget5.html.erb
index 42c479b..af23e36 100644
--- a/modules/web_resource/_web_res_widget5.html.erb
+++ b/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}}">
-              <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}"><br />
-              {{title}}
-            </a>
+          <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 />
+            {{title}}
+          </a>
 	      </div>
 	    </li>
 
@@ -40,9 +42,8 @@
   .widget-link.widget-5 .button-mid{
     position: absolute;
     width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+    height: 0;
+    top: 50%;
   }
   .widget-link.widget-5 .button-mid .fa{
   	cursor: pointer;
diff --git a/modules/web_resource/_web_res_widget6.html.erb b/modules/web_resource/_web_res_widget6.html.erb
index 989df1a..08e12ba 100644
--- a/modules/web_resource/_web_res_widget6.html.erb
+++ b/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}}">
-              <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}"><br />
-            </a>
+          <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 />
+          </a>
 	      </div>
 	    </li>
 
@@ -41,9 +43,8 @@
   .widget-link.widget-6 .button-mid{
     position: absolute;
     width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+    height: 0;
+    top: 50%;
   }
   .widget-link.widget-6 .button-mid .fa{
   	cursor: pointer;
diff --git a/modules/web_resource/web_res_index1.html.erb b/modules/web_resource/web_res_index1.html.erb
index 040dde9..25e4849 100644
--- a/modules/web_resource/web_res_index1.html.erb
+++ b/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}}">
diff --git a/modules/web_resource/web_res_index2.html.erb b/modules/web_resource/web_res_index2.html.erb
index 86db2aa..f21f8fc 100644
--- a/modules/web_resource/web_res_index2.html.erb
+++ b/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>
diff --git a/widgets/site_menu_widget/_site_menu_widget1.html.erb b/widgets/site_menu_widget/_site_menu_widget1.html.erb
index 149b3a0..b9d4353 100644
--- a/widgets/site_menu_widget/_site_menu_widget1.html.erb
+++ b/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>
diff --git a/widgets/site_menu_widget/_site_menu_widget2.html.erb b/widgets/site_menu_widget/_site_menu_widget2.html.erb
index 9b5f716..409b469 100644
--- a/widgets/site_menu_widget/_site_menu_widget2.html.erb
+++ b/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>