add new index

app/controllers/video_pros_controller.rb

@@ -40,6 +40,17 @@ class VideoProsController < ApplicationController
     categories += categories_for_page.map do |c|
       {:name=>c.title, :value=>c.id.to_s}
     end
+
+    page_tags = OrbitHelper.page_tags
+    tags = [{:name=>I18n.t("video_pro.all_tag"), :value=>"all"}]
+    if page_tags.blank? || page_tags.include?('all')
+      tags_for_page = Tag.where(:module_app_id=>ModuleApp.where(:key=>'video_pro').pluck(:id).first)
+    else
+      tags_for_page = Tag.where(:id=>page_tags)
+    end
+    tags += tags_for_page.map do |c|
+      {:name=>c.title, :value=>c.id.to_s}
+    end
     selected_category = params["category"]
     if selected_category.present? && selected_category != 'all'
       categories.each do |h|
@@ -100,8 +111,24 @@ class VideoProsController < ApplicationController
       page_tabs[0]["klass"] = "now_view"
     end
     selected_tag = params['tags']
+    page_title = page.title
+
+
+    tags = tags.map do |tag|
+      {"option"=>"<option value=\"#{tag[:value]}\" #{tag[:is_selected]}>#{tag[:name]}</option>"}
+    end
     if selected_tag.present?
+      tags.each do |h|
+        if h[:value] == selected_tag
+          h[:is_selected] = "selected"
+          break
+        end
+      end
       filter_tags = [selected_tag]
+      tag = Tag.where(selected_tag).first
+      if tag
+        page_title = tag.title
+      end
     else
       filter_tags = OrbitHelper.page_tags
     end
@@ -138,8 +165,10 @@ class VideoProsController < ApplicationController
         "hd_icon_url" => hd_icon_url,
         "view_icon_url" => view_icon_url,
         "more" => "More",
+        "page-title" => page_title
       },
       "categories" => categories,
+      "tags" => tags,
       "post_agencies" => post_agencies,
       "page_tabs" => page_tabs,
       "videos" => videos,

config/locales/en.yml

@@ -9,6 +9,7 @@ en:
     search_text1: "Search"
     search_text2: "Search"
     all_category: "All Category"
+    all_tag: "All Tag"
     view_count: "View Count"
     the_same_as_publisher: "The same as Publisher"
     other: "Other"

config/locales/zh_tw.yml

@@ -9,6 +9,7 @@ zh_tw:
     search_text1: "搜尋"
     search_text2: "查詢"
     all_category: "全部類別"
+    all_tag: "全部標籤"
     view_count: "觀看人數"
     the_same_as_publisher: "同發佈人"
     other: "其他"

modules/video_pro/info.json

@@ -38,6 +38,15 @@
                 },
             "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",

modules/video_pro/video_pro_index1.html.erb

@@ -1,4 +1,5 @@
 <div class="i-video_data video_data-index-1">
+  <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}}">

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">

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 class="video_category">{{video_category}}</div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_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_category {
+      color: #e4374a;
+    }
+    .video_title h4 {
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info {
+      float: right;
+    }
+    .view_info img {
+      margin-right: 5px;
+    }
+  </style>
+  <script>
+    $('#filter_category_box').on('change', function(){
+      $(this).prop('form').submit();
+    })
+  </script>
+</div>
+{{pagination_goes_here}}

modules/video_pro/video_pro_index3.html.erb

@@ -12,6 +12,7 @@
       </div>
     </div>
   </div>
+  <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}}">