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

---
 modules/ad_banner/_ad_banner_widget1.html.erb |   7 +-
 .../_ad_banner_widget2_video.html.erb         | 466 ++++++++++--------
 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      |   2 +-
 modules/archive/archive_index15.html.erb      |   4 +-
 modules/archive/archive_index2.html.erb       |  27 +-
 modules/archive/archive_index3.html.erb       |   2 +-
 modules/archive/archive_index4.html.erb       |  17 +-
 modules/archive/archive_index9.html.erb       |   6 +-
 modules/archive/info.json                     |  52 +-
 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 |  11 +-
 modules/personal_journal/info.json            |   8 +
 .../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 +-
 32 files changed, 773 insertions(+), 626 deletions(-)

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_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
index 01fb3bc..1325e3f 100644
--- a/modules/archive/archive_index14.html.erb
+++ b/modules/archive/archive_index14.html.erb
@@ -21,7 +21,7 @@
                </span>
             </div>
             <div class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
-              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}">
+              <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>
             </div>
diff --git a/modules/archive/archive_index15.html.erb b/modules/archive/archive_index15.html.erb
index b2b343d..ae83f3e 100644
--- a/modules/archive/archive_index15.html.erb
+++ b/modules/archive/archive_index15.html.erb
@@ -17,7 +17,7 @@
               <div class="head col-sm-7">
                 <dl class="i-archive__file" data-list="files"  data-level="2">
                 <div class="file-name">
-                  <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__status-wrap" data-list="statuses" data-level="2">
                   <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
                   </span>
@@ -26,7 +26,7 @@
               </div>
               <div class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
               <div class="file-item">
-                <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}}">{{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>
               </div>
               </div>
             </div>
diff --git a/modules/archive/archive_index2.html.erb b/modules/archive/archive_index2.html.erb
index 4d781b5..454f049 100644
--- a/modules/archive/archive_index2.html.erb
+++ b/modules/archive/archive_index2.html.erb
@@ -1,30 +1,30 @@
 <div class="i-archive index-archive-2">
-  <h3 class="i-archive-title">
+  <h1 class="i-archive-title">
     <span>{{page-title}}</span>
-  </h3>
+  </h1>
   <div class="panel-group" id="index-archive-group" data-list="categories" data-level="0">
     <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title">
-          <i class="fa fa-th-list"></i>
-          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed">
-            {{category-title}}
+          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}">
+             <i class="fa fa-th-list"></i>
+             {{category-title}}
           </a>
         </h4>
       </div>
-      <div id="collapse" class="panel-collapse collapse in">
+      <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">
+            <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" 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">{{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 2fbed3d..e4c39a4 100644
--- a/modules/archive/archive_index4.html.erb
+++ b/modules/archive/archive_index4.html.erb
@@ -6,30 +6,29 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title">
-          <i class="fa fa-th-list"></i>
-          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed">
-            {{category-title}}
+          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}">
+            <i class="fa fa-th-list"></i>{{category-title}}
           </a>
         </h4>
       </div>
-      <div id="collapse" class="panel-collapse collapse in">
+      <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">
+            <dt class="i-archive-item-list col-sm-5">
               <span data-list="statuses" data-level="2">
                 <span class="label status {{status-class}}">{{status}}</span>
               </span>
             </dt>
-            <dl class="i-archive-files-list" data-list="files"  data-level="2">
+            <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">{{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 8f4652f..401c8b7 100644
--- a/modules/archive/info.json
+++ b/modules/archive/info.json
@@ -83,8 +83,40 @@
     {
       "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. Table list (widget-title, category, filename, download link)"
+      },
+      "thumbnail": "ar5.png"
+    },
+    {
+      "filename": "archive_index15",
+      "name": {
+        "zh_tw": "15. 表格列表 ( 模組標題, 檔案名稱, 下載連結 )",
+        "en": "15. Table list (widget-title, filename, download link)"
+      },
+      "thumbnail": "ar5.png"
+    },
+    {
+      "filename": "archive_index16",
+      "name": {
+        "zh_tw": "16. 手風琴式列表 - 有下拉 - 針對各筆資料 ( 模組標題, 標題, 檔案名稱, 下載連結 )",
+        "en": "16. Accordion list - with drop down - For every data  (widget-title, title, filename, download link)"
+      },
+      "thumbnail": "ar2.png"
+    },
+    {
+      "filename": "archive_index17",
+      "name": {
+        "zh_tw": "17. 頁籤式 ( 模組標題, 類別標題, 標題, 完整檔案名稱, 下載連結, 描述 )",
+        "en": "17. Tab list  (widget-title, category, title, full filename, download link, description)"
       },
       "thumbnail": "ar-tab1.png"
     }
@@ -105,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
index 806bd68..972a947 100644
--- a/modules/personal_journal/index_by_author.html.erb
+++ b/modules/personal_journal/index_by_author.html.erb
@@ -1,10 +1,13 @@
 <h3 class="page-module-title">{{page-title}}</h3>
 <article>
 <div data-level="0" data-list="journal_papers">
-  <h4>{{name}}</h4>
-  <ul data-level="1" data-list="jps">
-    <li>{{title}}</li>
-  </ul>
+  <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/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>