From 0482fd055d42afa569e681856d351c6c8959be98 Mon Sep 17 00:00:00 2001
From: Bohung <bohung@rulingcom.com>
Date: Tue, 14 Jun 2022 10:47:41 +0800
Subject: [PATCH] Upload banner templates.

---
 .../web_resource/_web_res_widget3.html.erb    | 174 ++++++++++++++++++
 .../web_resource/_web_res_widget4.html.erb    |  49 +++++
 .../web_resource/_web_res_widget5.html.erb    |  52 ++++++
 modules/web_resource/info.json                |  26 ++-
 4 files changed, 300 insertions(+), 1 deletion(-)
 create mode 100644 modules/web_resource/_web_res_widget3.html.erb
 create mode 100644 modules/web_resource/_web_res_widget4.html.erb
 create mode 100644 modules/web_resource/_web_res_widget5.html.erb

diff --git a/modules/web_resource/_web_res_widget3.html.erb b/modules/web_resource/_web_res_widget3.html.erb
new file mode 100644
index 0000000..70cfa0d
--- /dev/null
+++ b/modules/web_resource/_web_res_widget3.html.erb
@@ -0,0 +1,174 @@
+
+<div class="widget-link  widget-3" style="position: relative;">
+  <div class="widget-link__more-wrap clearfix">
+    <h2 class="widget-link__widget-title">
+      <span>{{widget-title}}</span>
+    </h2>
+  </div>
+  
+  <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}}">
+      </div>
+    </li>
+  </ul>
+  <div style="position: absolute;top: 55%;bottom: 50%;width:100%;">
+	<button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: url(/assets/link-left.png) no-repeat;border: 0;background-size: contain;position: absolute;transition:.3s; left: -1%;"></button>
+	<button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background: url(/assets/link-right.png) no-repeat;background-size: contain;border: 0;position: absolute;transition:.3s;right: -2%;"></button>
+  </div>
+  <a class="widget-link__more btn" href="{{more_url}}"><%= t("web_link.more") %></a>
+</div>
+
+<style>
+  ul.widget-link__list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .widget-3 li {
+    background-color: #fff;
+    padding: 3px;
+    min-height: 97px;
+    max-height: 97px;
+  }
+  .widget-link__more {
+    background-color: #811515;
+    font-size: 1.4em;
+    color: white !important;
+    display: block;
+    width: 200px;
+    text-align: center;
+    border-radius: 5px;
+    bottom: 8px;
+    margin: 50px auto 0 auto !important;
+    padding: 15px 10px;
+  }
+  .widget-link__more:hover {
+    background-color: #6b1111;
+  }
+</style>
+<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script>
+	function combineul_{{subpart-id}}(){
+		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').parent();
+		parents.each(function(i,v){
+			for(var i=1;i<$(v).find('ul.widget-link__list').length;i++)
+				$(v).find('ul.widget-link__list').eq(0).find('>li').eq(-1).after($(v).find('ul.widget-link__list').eq(i).html());
+			var ullength = $(v).find('ul.widget-link__list').length;
+			for(var i = 1;i < ullength;i++)
+				$(v).find('ul.widget-link__list').eq(-1).remove();
+		})
+	};
+	var num;
+	var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.widget-link__item').length;
+	function reorganize_{{subpart-id}}(num){
+		var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').toArray();
+		var currentul = uls.findIndex(function(v){
+			return $(v).hasClass("active") && !$(v).hasClass("hidden_item");
+		})
+		if(currentul == -1)
+			currentul = 0;
+		var li_active_idx = 0;
+		if(currentul != 0)
+			li_active_idx = $(uls[currentul]).find("li.widget-link__item").eq(0).index("li.widget-link__item");
+		combineul_{{subpart-id}}();
+		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').parent();
+		parents.each(function(i,v){
+			var lilength = $(v).find('li.widget-link__item').length;
+			var ul_length = Math.ceil(lilength/num);
+			for(var ii=1;ii< ul_length;ii++){
+				var clone_ul = $(v).find('ul.widget-link__list').eq(-1).clone();
+				clone_ul.empty();
+				clone_ul.removeClass("active");
+				clone_ul.css("display","");
+				$(v).find('ul.widget-link__list').eq(-1).after(clone_ul.prop("outerHTML"));
+				var lihtml="";
+				if(ii != (ul_length-1)){
+					for(var j=0;j<num;j++){
+						lihtml += $(v).find('li.widget-link__item').eq(ii*num+j).prop("outerHTML");
+					};
+				}else{
+					for(var j=0;j< lilength - num *(ul_length-1) ;j++){
+						lihtml += $(v).find('li.widget-link__item').eq(ii*num+j).prop("outerHTML");
+					};
+				};
+				$(v).find('ul.widget-link__list').eq(-1).html(lihtml);
+			}
+			if(ul_length != 1 )
+				for(var i=0;i< lilength -num ; i++)
+					$(v).find('ul.widget-link__list').eq(0).find("li.widget-link__item").eq(num).remove();
+		})
+		$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css("display","none");
+		$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css('padding','0 1.125em');
+		$('[data-subpart-id=\"{{subpart-id}}\"] button').css('z-index','10');
+		$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
+	  	//$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list >li').css('float','left');
+	  	var active_ul = $("[data-subpart-id=\"{{subpart-id}}\"] li.widget-link__item").eq(li_active_idx).parents("ul.widget-link__list");
+		active_ul.addClass("active");
+		active_ul.removeClass("hidden_item");
+		active_ul.css("display","");
+	};
+	$(window).resize(function(){
+		if($(window).width()>1024){
+			reorganize_{{subpart-id}}(4);
+			num=4;
+		}else if($(window).width()>576){
+			reorganize_{{subpart-id}}(2);
+			num=2;
+		}else{
+			reorganize_{{subpart-id}}(1);
+			num=1;
+		}
+	})
+	$(document).ready(function(){
+		if($(window).width()>1024){
+			reorganize_{{subpart-id}}(4);
+			num=4;
+		}else if($(window).width()>576){
+			reorganize_{{subpart-id}}(2);
+			num=2;
+		}else{
+			reorganize_{{subpart-id}}(1);
+			num=1;
+		}
+	var flag=false;
+	$('.btn-left').click(function(){	
+		if(!flag){
+			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').toArray();
+			var ul_length = uls.length;
+			var currentul = uls.findIndex(function(v){
+				return $(v).hasClass("active");
+			})
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css('display','none');
+			if(currentul - 1 < 0)
+				currentul += ul_length;
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').removeClass("active");
+			var active_item = $(uls[currentul-1]);
+			active_item.addClass("active");
+			active_item.find("li").css("display","block");
+			flag=true;
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
+		};
+	});
+	$('.btn-right').click(function(){
+		var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.widget-link__item').length;
+		if(!flag){
+			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').toArray();
+			var ul_length = uls.length;
+			var currentul = uls.findIndex(function(v){
+				return $(v).hasClass("active");
+			})
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list').css('display','none');
+			if(currentul + 1 > ul_length - 1)
+				currentul -= ul_length;
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list:not(.hidden_item)').removeClass("active");
+			var active_item = $(uls[currentul+1]);
+			active_item.addClass("active");
+			active_item.find("li").css("display","block");
+			flag=true;
+			$('[data-subpart-id=\"{{subpart-id}}\"] ul.widget-link__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
+		};
+	});
+	});
+</script>
diff --git a/modules/web_resource/_web_res_widget4.html.erb b/modules/web_resource/_web_res_widget4.html.erb
new file mode 100644
index 0000000..22e7870
--- /dev/null
+++ b/modules/web_resource/_web_res_widget4.html.erb
@@ -0,0 +1,49 @@
+<div class="widget-link widget-4">
+  <div class="widget-link__more-wrap clearfix">
+    <h2 class="widget-link__widget-title">
+      <span>{{widget-title}}</span>
+    </h2>
+  </div>
+  <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">
+	    <li class="widget-link__item">
+	      <div class="liWrapper">
+	            <img class="widget-link__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+	      </div>
+	    </li>
+
+	  </div>
+	  <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>
+	  </ul>
+	</div>
+</div>
+
+
+
+<script>
+  $('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
+    $(this).parent("ul").siblings('.widget-content').cycle("next");
+  })
+  $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
+    $(this).parent("ul").siblings('.widget-content').cycle("prev");
+  })
+</script>
+<style type="text/css">
+	.widget-link_wrapper{
+		position: relative;
+	}
+  .widget-link.widget-4 .button-mid{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+  .widget-link.widget-4 .button-mid .fa{
+  	cursor: pointer;
+  }
+</style>
\ No newline at end of file
diff --git a/modules/web_resource/_web_res_widget5.html.erb b/modules/web_resource/_web_res_widget5.html.erb
new file mode 100644
index 0000000..e4414dd
--- /dev/null
+++ b/modules/web_resource/_web_res_widget5.html.erb
@@ -0,0 +1,52 @@
+<div class="widget-link widget-5">
+  <div class="widget-link__more-wrap clearfix">
+    <h2 class="widget-link__widget-title">
+      <span>{{widget-title}}</span>
+    </h2>
+  </div>
+  <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">
+	    <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>
+	      </div>
+	    </li>
+
+	  </div>
+	  <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>
+	  </ul>
+	</div>
+</div>
+
+
+
+<script>
+  $('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
+    $(this).parent("ul").siblings('.widget-content').cycle("next");
+  })
+  $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
+    $(this).parent("ul").siblings('.widget-content').cycle("prev");
+  })
+</script>
+<style type="text/css">
+	.widget-link_wrapper{
+		position: relative;
+	}
+  .widget-link.widget-5 .button-mid{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+  .widget-link.widget-5 .button-mid .fa{
+  	cursor: pointer;
+  }
+</style>
\ No newline at end of file
diff --git a/modules/web_resource/info.json b/modules/web_resource/info.json
index df326f5..1d82439 100644
--- a/modules/web_resource/info.json
+++ b/modules/web_resource/info.json
@@ -33,6 +33,30 @@
                 "en" : "2. Horizontal List (widget-title, link)"
                 },
             "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "web_res_widget3",
+            "name" : {
+                "zh_tw" : "3. 輪播1(slide)",
+                "en" : "3. Banner 1(slide)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "web_res_widget4",
+            "name" : {
+                "zh_tw" : "4. 輪播2(carousel 4)",
+                "en" : "4. Banner 2(carousel 4)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "web_res_widget5",
+            "name" : {
+                "zh_tw" : "5. 輪播3(carousel 5)",
+                "en" : "5. Banner 3(carousel 5)"
+                },
+            "thumbnail" : "thumb.png"
         }
     ]
-}
\ No newline at end of file
+}