From 4f3fc30773c6e9ccfc530e684478efb1705321d0 Mon Sep 17 00:00:00 2001
From: rulingcom <orbit@rulingcom.com>
Date: Fri, 7 Jul 2023 09:47:45 +0800
Subject: [PATCH] Updated.

---
 modules/video_pro/_video_pro_widget1.html.erb |  12 +-
 .../_video_pro_widget_jqcloud1.html.erb       |  58 +++++--
 modules/video_pro/info.json                   |  15 ++
 modules/video_pro/video_pro_index1.html.erb   |  13 +-
 modules/video_pro/video_pro_index2.html.erb   |  13 +-
 .../video_pro/video_pro_index2_tag.html.erb   | 146 ++++++++++++++++++
 modules/video_pro/video_pro_index3.html.erb   |   9 +-
 .../video_pro_index_post_agency1.html.erb     |   2 +-
 8 files changed, 239 insertions(+), 29 deletions(-)
 create mode 100644 modules/video_pro/video_pro_index2_tag.html.erb

diff --git a/modules/video_pro/_video_pro_widget1.html.erb b/modules/video_pro/_video_pro_widget1.html.erb
index 07be0c6..e0253f6 100644
--- a/modules/video_pro/_video_pro_widget1.html.erb
+++ b/modules/video_pro/_video_pro_widget1.html.erb
@@ -1,11 +1,11 @@
 <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}}">
+  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
+    <li class="video_data col-xs-12 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 data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
           <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
           <div class="view_info">
@@ -18,10 +18,14 @@
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_data_wrap{
+      display: flex;
+      flex-wrap: wrap;
+    }
     .video_group_time{
       color: #4487cb;
     }
-    .video_category{
+    .video_tag{
       color: #e4374a;
     }
     .video_title h4{
diff --git a/modules/video_pro/_video_pro_widget_jqcloud1.html.erb b/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
index 1d48386..baf2cdb 100644
--- a/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
+++ b/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
@@ -1,20 +1,50 @@
 <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>
+  <%= javascript_include_tag 'video_pro/wordcloud2.js' %>
+  <div style="width: 100%; height: 40vw; max-height: 17em;" class="my_favorite_latin_words jqcloud wordcloud2"><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');
-            })
-          }
+    var container_{{subpart-id}} = $('[data-subpart-id="{{subpart-id}}"] .my_favorite_latin_words');
+    var jqcloud_words_{{subpart-id}} = {{jqcloud_words}};
+    var text_map_{{subpart-id}} = {};
+    var max_value_{{subpart-id}} = 1;
+    $.each(jqcloud_words_{{subpart-id}}, function(i, v){
+      if (max_value_{{subpart-id}} < v.weight){
+        max_value_{{subpart-id}} = v.weight;
+      }
+    });
+    var list_{{subpart-id}} = $.map(jqcloud_words_{{subpart-id}}, function(v){
+      text_map_{{subpart-id}}[v.text] = v.link;
+
+
+      return [[v.text, Math.ceil(v.weight/max_value_{{subpart-id}}*3), v.link]];
+    });
+    container_{{subpart-id}}.on('wordcloudstop', function (e) {
+      $(this).children('span').each(function (i, v) {
+        var text = $(this).html();
+        $(this).html('<a title="'+ list_{{subpart-id}}[i][0] + '" style="color: inherit" href="' + list_{{subpart-id}}[i][2]  +'">' + text + '</a>');
       });
+    });
+    function wordCloud_{{subpart-id}}(){
+      var width = container_{{subpart-id}}.width();
+      var height = container_{{subpart-id}}.height();
+      container_{{subpart-id}}.attr('width', width);
+      WordCloud(container_{{subpart-id}}[0], {
+        list: list_{{subpart-id}},
+        gridSize: 3,
+        weightFactor: jqcloud_words_{{subpart-id}}.length * Math.min(width, 1200) / 770,
+        rotateRatio: 0,
+        shuffle: false,
+        drawOutOfBound: false,
+        shrinkToFit: true,
+        shape: 'square',
+        color: 'random-dark',
+        ellipticity: height/(width-40)
+      });
+    }
+    $(window).resize(function(){
+      wordCloud_{{subpart-id}}();
     })
+    $(document).ready(function(){
+     wordCloud_{{subpart-id}}();
+    });
   </script>
 </div>
diff --git a/modules/video_pro/info.json b/modules/video_pro/info.json
index 2d2056a..5c1b39b 100644
--- a/modules/video_pro/info.json
+++ b/modules/video_pro/info.json
@@ -2,6 +2,7 @@
     "widgets" : [
         {
             "filename" : "video_pro_widget1",
+            "force_cover": "true",
             "name" : {
                 "zh_tw" : "1. 影片列表1 ( 縮圖, 影片資訊, 頁面連結)",
                 "en" : "1. Video List 1 ( snapshot, video info, page link)"
@@ -10,6 +11,7 @@
         },
         {
             "filename" : "video_pro_widget_jqcloud1",
+            "force_cover": "true",
             "name" : {
                 "zh_tw" : "2. 影片文字雲(標籤)",
                 "en" : "2. Video Word Cloud(tags)"
@@ -20,6 +22,7 @@
     "frontend" : [
         {
             "filename" : "video_pro_index1",
+            "force_cover": "true",
             "name" : {
                 "zh_tw" : "1. 影片列表1 ( 縮圖, 影片資訊, 頁面連結)",
                 "en" : "1. Video List 1 ( snapshot, video info, page link)"
@@ -28,14 +31,25 @@
         },
         {
             "filename" : "video_pro_index2",
+            "force_cover": "true",
             "name" : {
                 "zh_tw" : "2. 影片列表1 + 類別 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)",
                 "en" : "2. Video List 1 + Category filter + Search ( snapshot, video info, page link)"
                 },
             "thumbnail" : "thumb.png"
         },
+        {
+            "filename" : "video_pro_index2_tag",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "2-1. 影片列表1 + 標籤 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "2-1. Video List 1 + Tag filter + Search ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
         {
             "filename" : "video_pro_index3",
+            "force_cover": "true",
             "name" : {
                 "zh_tw" : "3. 影片列表2 + 懸浮框 ( 縮圖, 影片資訊)",
                 "en" : "3. Video List 2 + Modal window ( snapshot, video info)"
@@ -44,6 +58,7 @@
         },
         {
             "filename" : "video_pro_index_post_agency1",
+            "force_cover": "true",
             "name" : {
                 "zh_tw" : "4. 影片列表3 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
                 "en" : "4. Video List 3 + Post Agency filter ( snapshot, video info, keyword, page link)"
diff --git a/modules/video_pro/video_pro_index1.html.erb b/modules/video_pro/video_pro_index1.html.erb
index 0b1cac0..d3004c6 100644
--- a/modules/video_pro/video_pro_index1.html.erb
+++ b/modules/video_pro/video_pro_index1.html.erb
@@ -1,11 +1,12 @@
 <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}}">
+  <h3 class="i-annc__page-title">{{page-title}}</h3>
+  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
+    <li class="video_data col-xs-12 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 data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
           <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
           <div class="view_info">
@@ -18,10 +19,14 @@
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_data_wrap{
+      display: flex;
+      flex-wrap: wrap;
+    }
     .video_group_time{
       color: #4487cb;
     }
-    .video_category{
+    .video_tag{
       color: #e4374a;
     }
     .video_title h4{
diff --git a/modules/video_pro/video_pro_index2.html.erb b/modules/video_pro/video_pro_index2.html.erb
index 165ec8d..fdaa92b 100644
--- a/modules/video_pro/video_pro_index2.html.erb
+++ b/modules/video_pro/video_pro_index2.html.erb
@@ -1,4 +1,5 @@
 <div class="i-video_data video_data-index-2">
+  <h3 class="i-annc__page-title">{{page-title}}</h3>
   <div class="video_filter_area col-sm-12">
     <form>
       <div class="category_box col-sm-6">
@@ -20,13 +21,13 @@
       <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}}">
+  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
+    <li class="video_data col-xs-12 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 data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
           <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
           <div class="view_info">
@@ -39,6 +40,10 @@
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_data_wrap{
+      display: flex;
+      flex-wrap: wrap;
+    }
     .video_filter_area {
       margin-bottom: 20px;
     }
@@ -114,7 +119,7 @@
     .video_group_time {
       color: #4487cb;
     }
-    .video_category {
+    .video_tag {
       color: #e4374a;
     }
     .video_title h4 {
diff --git a/modules/video_pro/video_pro_index2_tag.html.erb b/modules/video_pro/video_pro_index2_tag.html.erb
new file mode 100644
index 0000000..c918582
--- /dev/null
+++ b/modules/video_pro/video_pro_index2_tag.html.erb
@@ -0,0 +1,146 @@
+<div class="i-video_data video_data-index-2">
+  <h3 class="i-annc__page-title">{{page-title}}</h3>
+  <div class="video_filter_area col-sm-12">
+    <form>
+      <div class="category_box col-sm-6">
+        <select name="tag" id="filter_category_box" data-list="tags" 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 col-sm-12" data-list="videos" data-level="0">
+    <li class="video_data col-xs-12 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 data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></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_data_wrap{
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .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_tag {
+      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
index 5068e81..da719a8 100644
--- a/modules/video_pro/video_pro_index3.html.erb
+++ b/modules/video_pro/video_pro_index3.html.erb
@@ -12,8 +12,9 @@
       </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}}">
+  <h3 class="i-annc__page-title">{{page-title}}</h3>
+  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
+    <li class="video_data col-xs-12 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}}"/>
@@ -29,6 +30,10 @@
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_data_wrap{
+      display: flex;
+      flex-wrap: wrap;
+    }
     .video_title h4{
       font-size: 1.1em;
       font-weight: bold;
diff --git a/modules/video_pro/video_pro_index_post_agency1.html.erb b/modules/video_pro/video_pro_index_post_agency1.html.erb
index ce74a1d..726f002 100644
--- a/modules/video_pro/video_pro_index_post_agency1.html.erb
+++ b/modules/video_pro/video_pro_index_post_agency1.html.erb
@@ -70,7 +70,7 @@
     .video_group_time {
       color: #4487cb;
     }
-    .video_category {
+    .video_tag {
       color: #e4374a;
     }
     .video_title h4 {