Update menu layout.
This commit is contained in:
parent
be17e78244
commit
7b3b4b752b
|
@ -447,46 +447,47 @@
|
||||||
orbit.setColumn('.left-column', '.right-column');
|
orbit.setColumn('.left-column', '.right-column');
|
||||||
|
|
||||||
// 自適應網頁使用,當網頁載入時,如果視窗寬度小於769,就執行orbit.nav.setDropdown函數
|
// 自適應網頁使用,當網頁載入時,如果視窗寬度小於769,就執行orbit.nav.setDropdown函數
|
||||||
if ($(window).outerWidth() < 769) {
|
if ($(window).outerWidth() >200) {
|
||||||
// orbit.nav.setDropdown();
|
// orbit.nav.setDropdown();
|
||||||
orbit.MobileMenu();
|
orbit.MobileMenu();
|
||||||
$('.mobile-menu').append($('.modules-menu'));
|
$('.dropdowns').append($('.modules-menus'));
|
||||||
$('.header-buttom').appendTo($('.modules-menu'));
|
$('.mobile-menu').append($('.modules-menus'));
|
||||||
|
$('.header-buttom').appendTo($('.modules-menus'));
|
||||||
$('.outdropdowns').before($('.header-nav'));
|
$('.outdropdowns').before($('.header-nav'));
|
||||||
orbit.ClickMenuHandler();
|
orbit.ClickMenuHandler();
|
||||||
}else{
|
}else{
|
||||||
$('.outdropdowns').before($('.header-nav'));
|
$('.outdropdowns').before($('.header-nav'));
|
||||||
$('.navbar-header').after($('.modules-menu'));
|
$('.navbar-header').after($('.modules-menus'));
|
||||||
}
|
}
|
||||||
|
|
||||||
// 自適應網頁使用,當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數
|
// 自適應網頁使用,當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數
|
||||||
$(window).resize(function() {
|
$(window).resize(function() {
|
||||||
var navFixed = $('.kenjohn.navFixed');
|
var navFixed = $('.kenjohn.navFixed');
|
||||||
window.top_barrier_height = (navFixed.length ? navFixed.height() : 0) + $('#orbit-bar').height();
|
window.top_barrier_height = (navFixed.length ? navFixed.height() : 0) + $('#orbit-bar').height();
|
||||||
if ($(window).outerWidth() < 769) {
|
if ($(window).outerWidth() >200) {
|
||||||
if (resizeTimer) clearTimeout(resizeTimer);
|
if (resizeTimer) clearTimeout(resizeTimer);
|
||||||
$('.outdropdowns').before($('.header-nav'));
|
$('.outdropdowns').before($('.header-nav'));
|
||||||
resizeTimer = setTimeout(function() {
|
resizeTimer = setTimeout(function() {
|
||||||
if ( $('.modules-menu i').length == 0 ) {
|
if ( $('.modules-menus i').length == 0 ) {
|
||||||
orbit.MobileMenu();
|
orbit.MobileMenu();
|
||||||
}
|
}
|
||||||
if( $('.mobile-menu .modules-menu').length == 0 ) {
|
if( $('.mobile-menu .modules-menus').length == 0 ) {
|
||||||
$('.mobile-menu').append($('.modules-menu'));
|
$('.mobile-menu').append($('.modules-menus'));
|
||||||
$('.navbar-toggle').bind(orbit.ClickMenuHandler());
|
$('.navbar-toggle').bind(orbit.ClickMenuHandler());
|
||||||
}
|
}
|
||||||
},500 )} else {
|
},500 )} else {
|
||||||
resizeTimer = setTimeout(function(){
|
resizeTimer = setTimeout(function(){
|
||||||
if( $('.mobile-menu .modules-menu').length > 0 ) {
|
if( $('.mobile-menu .modules-menus').length > 0 ) {
|
||||||
$('.navbar-header').after($('.modules-menu'));
|
$('.navbar-header').after($('.modules-menus'));
|
||||||
}
|
}
|
||||||
orbit.removeDropdown();
|
orbit.removeDropdown();
|
||||||
}, 500);
|
}, 500);
|
||||||
$('.outdropdowns').before($('.header-nav'));
|
$('.outdropdowns').before($('.header-nav'));
|
||||||
$('.navbar-header').after($('.modules-menu'));
|
$('.navbar-header').after($('.modules-menus'));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// if($(window).width()<769){
|
// if($(window).width()<769){
|
||||||
// $('.header-buttom').appendTo($('.modules-menu'));
|
// $('.header-buttom').appendTo($('.modules-menus'));
|
||||||
// }else{
|
// }else{
|
||||||
// $('.header-buttom').appendTo($('.dropdowns'));
|
// $('.header-buttom').appendTo($('.dropdowns'));
|
||||||
// }
|
// }
|
||||||
|
@ -550,7 +551,7 @@
|
||||||
if($('*[data-list] tr td a').eq(i).html().trim()=="")
|
if($('*[data-list] tr td a').eq(i).html().trim()=="")
|
||||||
$('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove();
|
$('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove();
|
||||||
// tab按鍵選到menu,會顯示下層的menu(為了符合無障礙)
|
// tab按鍵選到menu,會顯示下層的menu(為了符合無障礙)
|
||||||
/*
|
/*
|
||||||
$('.nav-level-0>li>a').focus(function(e) {
|
$('.nav-level-0>li>a').focus(function(e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
$(this).parent().focus();
|
$(this).parent().focus();
|
||||||
|
@ -836,10 +837,10 @@ function transdate(){
|
||||||
//
|
//
|
||||||
// //drop down menu
|
// //drop down menu
|
||||||
// $(".dropdown-toggle").hover(function() {
|
// $(".dropdown-toggle").hover(function() {
|
||||||
// $('.modules-menu-level-1').addClass('display-on');
|
// $('.modules-menus-level-1').addClass('display-on');
|
||||||
// });
|
// });
|
||||||
// $(".dropdown-toggle").mouseleave(function() {
|
// $(".dropdown-toggle").mouseleave(function() {
|
||||||
// $('.modules-menu-level-1').removeClass('display-on');
|
// $('.modules-menus-level-1').removeClass('display-on');
|
||||||
// });
|
// });
|
||||||
//
|
//
|
||||||
// });
|
// });
|
||||||
|
@ -887,7 +888,7 @@ function transdate(){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
//$('.modules-menu-level-1').css('left','-'+$('.outdropdowns .dropdowns').offset().left+'px');
|
//$('.modules-menus-level-1').css('left','-'+$('.outdropdowns .dropdowns').offset().left+'px');
|
||||||
$(".downIcon").click(function() {
|
$(".downIcon").click(function() {
|
||||||
var move_to_target=function (stop) {
|
var move_to_target=function (stop) {
|
||||||
var theTop;
|
var theTop;
|
||||||
|
@ -922,23 +923,23 @@ function transdate(){
|
||||||
function calc_menu_pos(){
|
function calc_menu_pos(){
|
||||||
if ($(window).outerWidth() < 769){
|
if ($(window).outerWidth() < 769){
|
||||||
calc_menu_flag = false;
|
calc_menu_flag = false;
|
||||||
$('.outdropdowns .modules-menu-level-1').css('right','')
|
$('.outdropdowns .modules-menus-level-1').css('right','')
|
||||||
$('.outdropdowns .modules-menu-level-1').css('width','')
|
$('.outdropdowns .modules-menus-level-1').css('width','')
|
||||||
}else{
|
}else{
|
||||||
try{
|
try{
|
||||||
var width = $('header #main-nav').outerWidth();
|
var width = $('header #main-nav').outerWidth();
|
||||||
var right = $(window).width() - $('header #main-nav').offset().left - width;
|
var right = $(window).width() - $('header #main-nav').offset().left - width;
|
||||||
if (width>50){
|
if (width>50){
|
||||||
calc_menu_flag = true;
|
calc_menu_flag = true;
|
||||||
$('.outdropdowns .modules-menu-level-1').css('right',right);
|
$('.outdropdowns .modules-menus-level-1').css('right',right);
|
||||||
$('.outdropdowns .modules-menu-level-1').css('width',width);
|
$('.outdropdowns .modules-menus-level-1').css('width',width);
|
||||||
}
|
}
|
||||||
}catch(e){};
|
}catch(e){};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$(window).resize(function() {
|
$(window).resize(function() {
|
||||||
|
|
||||||
//$('.modules-menu-level-1').css('calc_menu_flagleft','-'+$('.outdropdowns .dropdowns').offset().left+'px');
|
//$('.modules-menus-level-1').css('calc_menu_flagleft','-'+$('.outdropdowns .dropdowns').offset().left+'px');
|
||||||
calc_menu_pos();
|
calc_menu_pos();
|
||||||
|
|
||||||
window.has_hover = false;
|
window.has_hover = false;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -21,8 +21,8 @@ $theme-color-third: #ed4c43;
|
||||||
$theme-color-green: #288E8E;
|
$theme-color-green: #288E8E;
|
||||||
|
|
||||||
// Font stacks
|
// Font stacks
|
||||||
$main-font: "IndustryW00-Medium","Barlow", "Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
|
$main-font: "Calibri","Barlow", "Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
|
||||||
$sub-font: "Barlow","Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
|
$sub-font: "Calibri","Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
|
||||||
|
|
||||||
@font-face {font-family: "IndustryW00-Medium"; src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot"); src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff") format("woff"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.svg#IndustryW00-Medium") format("svg"); }
|
@font-face {font-family: "IndustryW00-Medium"; src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot"); src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff") format("woff"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.svg#IndustryW00-Medium") format("svg"); }
|
||||||
|
|
||||||
|
|
|
@ -517,6 +517,15 @@ body{
|
||||||
}
|
}
|
||||||
.internal-page{
|
.internal-page{
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
.site-trigger__text{
|
||||||
|
color: #333;
|
||||||
|
top: -0.4em;
|
||||||
|
right: 1em;
|
||||||
|
text-shadow:none;
|
||||||
|
}
|
||||||
|
.dropdowns{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
.kenjohn {
|
.kenjohn {
|
||||||
//flex-wrap:wrap-reverse;
|
//flex-wrap:wrap-reverse;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -575,6 +584,9 @@ body{
|
||||||
color: $theme-color-main;
|
color: $theme-color-main;
|
||||||
font-size: 0.6em;
|
font-size: 0.6em;
|
||||||
font-family: $main-font;
|
font-family: $main-font;
|
||||||
|
@media(min-width:769px){
|
||||||
|
display: block!important;
|
||||||
|
}
|
||||||
@media (max-width: $screen-sm) {
|
@media (max-width: $screen-sm) {
|
||||||
height: 5em;
|
height: 5em;
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -640,6 +652,7 @@ body{
|
||||||
}
|
}
|
||||||
.navbar-toggle .icon-bar{
|
.navbar-toggle .icon-bar{
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.navbar-header .navbar-brand{
|
.navbar-header .navbar-brand{
|
||||||
@media(max-width: 769px){
|
@media(max-width: 769px){
|
||||||
|
|
|
@ -6,9 +6,7 @@
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.kenjohn{
|
.kenjohn{
|
||||||
@media (min-width: 769px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -162,9 +160,9 @@ a#content{
|
||||||
@media screen and(min-width:$screen-xs) and (max-width:768px){
|
@media screen and(min-width:$screen-xs) and (max-width:768px){
|
||||||
height: 1000px!important;
|
height: 1000px!important;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: $screen-xs){
|
@media screen and (max-width: $screen-xs){
|
||||||
height: 720px!important;
|
height: 720px!important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.jp-jplayer{
|
.jp-jplayer{
|
||||||
|
@ -222,9 +220,7 @@ a#content{
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 75px;
|
height: 75px;
|
||||||
@media (min-width: 769px){
|
|
||||||
display: none!important;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
position:relative!important;
|
position:relative!important;
|
||||||
}
|
}
|
||||||
|
@ -247,7 +243,9 @@ a#content{
|
||||||
height: 5em;
|
height: 5em;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@media (min-width: 769px){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -303,10 +301,9 @@ a#content{
|
||||||
.navbar-toggle {
|
.navbar-toggle {
|
||||||
padding: 0.875em 0.625em;
|
padding: 0.875em 0.625em;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
// border-radius: 0.125em;
|
@media(min-width: 769px){
|
||||||
// border-width: 0.125em;
|
margin-top: 1.8em;
|
||||||
// border-color: lighten($theme-color-main, 30%);
|
}
|
||||||
|
|
||||||
.icon-bar {
|
.icon-bar {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
@ -350,14 +347,42 @@ a#content{
|
||||||
-webkit-transform: rotate(-45deg);
|
-webkit-transform: rotate(-45deg);
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
@media(max-width: 769px){
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.outdropdowns{
|
.outdropdowns{
|
||||||
width:100%;
|
width:100%;
|
||||||
}
|
}
|
||||||
.navFixed{
|
.navFixed{
|
||||||
|
.site-trigger__text{
|
||||||
|
text-shadow: none!important;
|
||||||
|
}
|
||||||
|
.navbar-toggle .icon-bar{
|
||||||
|
box-shadow:none!important;
|
||||||
|
}
|
||||||
|
.home-menu{
|
||||||
|
@media(min-width: 769px){
|
||||||
|
display: block!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
position: fixed!important;
|
position: fixed!important;
|
||||||
top: auto;
|
top: auto;
|
||||||
//top:2.5em;
|
//top:2.5em;
|
||||||
|
.dropdowns{
|
||||||
|
@media (min-width: 769px) {
|
||||||
|
justify-content:center!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-brand{
|
||||||
|
display: block!important;
|
||||||
|
}
|
||||||
|
.site-trigger__text{
|
||||||
|
color: #333;
|
||||||
|
top: -0.32em;
|
||||||
|
right: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.internal-page .kenjohn.navRel,.navRel {
|
.internal-page .kenjohn.navRel,.navRel {
|
||||||
position: relative!important;
|
position: relative!important;
|
||||||
|
@ -405,15 +430,15 @@ a#content{
|
||||||
.navbar-header{
|
.navbar-header{
|
||||||
@media screen and (min-width:769px) {
|
@media screen and (min-width:769px) {
|
||||||
height: 78px;
|
height: 78px;
|
||||||
margin-bottom: 1em;
|
|
||||||
width: 35%;
|
width: 35%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
@media (min-width: 1900px){
|
@media (min-width: 1900px){
|
||||||
height: 90px;
|
height: 90px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width:768px) {
|
@media screen and (max-width:820px) {
|
||||||
.navbar-header{
|
.navbar-header{
|
||||||
height: 75px;
|
height: 75px;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
|
@ -442,10 +467,10 @@ a#content{
|
||||||
max-height: 65%;
|
max-height: 65%;
|
||||||
verflow-y: scroll;
|
verflow-y: scroll;
|
||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
padding:1em 5% 3em;
|
padding:1em 5% 3em;
|
||||||
transition-duration: opacity 0.3s cubic-bezier(0.48, 0.01, 0.5, 0.99),visibility 0.1s linear;
|
transition-duration: opacity 0.3s cubic-bezier(0.48, 0.01, 0.5, 0.99),visibility 0.1s linear;
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
-ms-overflow-style: none; /* IE and Edge */
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
@ -463,12 +488,14 @@ a#content{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (width: 768px) {
|
.navbar-toggle{
|
||||||
.navbar-toggle{
|
|
||||||
display: block!important;
|
display: block!important;
|
||||||
|
@media(min-width: 769px){
|
||||||
|
margin-right: 2em;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
.header-nav{
|
.header-nav{
|
||||||
}
|
}
|
||||||
.outdropdowns{
|
.outdropdowns{
|
||||||
|
@ -510,3 +537,28 @@ a#content{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
left: 5px;
|
left: 5px;
|
||||||
}
|
}
|
||||||
|
.mobile-menu .collapse.navbar-collapse.modules-menu{
|
||||||
|
@media(min-width: 769px){
|
||||||
|
overflow-y: scroll!important;
|
||||||
|
height: 100%!important;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-toggle .icon-bar{
|
||||||
|
@media(min-width: 769px){
|
||||||
|
right:-1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.site-trigger__text{
|
||||||
|
font-weight: bold;
|
||||||
|
@media(min-width: 769px){
|
||||||
|
position: absolute;
|
||||||
|
top: 1em;
|
||||||
|
right: 1em;
|
||||||
|
text-shadow: 2px 2px 4px #00000080;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
@media(max-width: 768px){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -8,7 +8,13 @@
|
||||||
|
|
||||||
// Widget
|
// Widget
|
||||||
// ## gerenral styles
|
// ## gerenral styles
|
||||||
|
.jarallax-video-audio, .jarallax-video-control-play{
|
||||||
|
bottom: 2%!important;
|
||||||
|
top: auto!important;
|
||||||
|
}
|
||||||
|
.jarallax-video-control-play{
|
||||||
|
margin-bottom: 66px!important;
|
||||||
|
}
|
||||||
.w-ba-banner {
|
.w-ba-banner {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
|
|
@ -143,10 +143,7 @@
|
||||||
.card:before{
|
.card:before{
|
||||||
height:100%;
|
height:100%;
|
||||||
}
|
}
|
||||||
.w-annc__subtitle{
|
|
||||||
max-height: 100px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
padding: 0;
|
padding: 0;
|
||||||
flex: 0 0 25%;
|
flex: 0 0 25%;
|
||||||
|
|
|
@ -32,16 +32,34 @@
|
||||||
padding-top: 28px!important;
|
padding-top: 28px!important;
|
||||||
}
|
}
|
||||||
@media (min-width: 769px) {
|
@media (min-width: 769px) {
|
||||||
margin: 0 0 0.8em 0;
|
margin: 0 0 0.8em 0;
|
||||||
-webkit-flex-flow: row wrap;
|
-webkit-flex-flow: row wrap;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
float: left !important;
|
float: left !important;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content:start;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-left: 6em;
|
||||||
|
padding-right: 3em;
|
||||||
|
.mobile-menu1{
|
||||||
|
width: 30%;
|
||||||
|
.dropdown-toggle{
|
||||||
|
border-bottom: 2px solid #288E8E;
|
||||||
|
margin-right: 1em;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modules-menu-level-1{
|
||||||
|
display: flex!important;
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.has-dropdown.level-1.active {
|
.has-dropdown.level-1.active {
|
||||||
.modules-menu-level-1 {
|
.modules-menu-level-1 {
|
||||||
display: block;
|
display: block!important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -66,7 +84,7 @@
|
||||||
|
|
||||||
.menu-drop {
|
.menu-drop {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0.3em;
|
right: 1.3em;
|
||||||
width: 2.5em;
|
width: 2.5em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -74,7 +92,15 @@
|
||||||
font-size: 0.5em;
|
font-size: 0.5em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 0.13em;
|
border-radius: 0.13em;
|
||||||
top: 2em;
|
top: 0.5em;
|
||||||
|
@media(min-width: 769px){
|
||||||
|
right: 0.3em;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 0.13em;
|
||||||
|
top: 2em;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .dropdown-toggle-icon.level-1 {
|
// .dropdown-toggle-icon.level-1 {
|
||||||
|
@ -126,7 +152,6 @@
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|
||||||
.modules-menu-level-1 {
|
.modules-menu-level-1 {
|
||||||
left: auto;
|
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
right: 0.625em;
|
right: 0.625em;
|
||||||
|
@ -172,40 +197,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.modules-menu-level-1 {
|
.modules-menu-level-1 {
|
||||||
background-color:#ffffff;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding:1em;
|
padding:1em;
|
||||||
@media(min-width:769px){
|
@media(min-width:769px){
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
visibility: hidden;
|
|
||||||
position: fixed!important;
|
|
||||||
opacity: 0;
|
|
||||||
width: 60vw;
|
|
||||||
box-shadow: 2px 2px 10px #000000ab;
|
|
||||||
margin: 0.8em 0;
|
margin: 0.8em 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition-duration: 0.5s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& > li {
|
& > li {
|
||||||
position: relative;
|
position: relative;
|
||||||
// & + li {
|
|
||||||
// border-top: 0.0625em solid lighten($theme-gray, 5%);
|
|
||||||
// }
|
|
||||||
|
|
||||||
& > a {
|
& > a {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 1em 1.5em;
|
padding: 1em 1.5em;
|
||||||
font-family: $main-font;
|
font-family: $main-font;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
color: #333;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
// &:hover {
|
// &:hover {
|
||||||
|
@ -215,16 +224,18 @@
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
@media(max-width: 1024px){
|
||||||
|
& > li{
|
||||||
|
width: 100%!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@media (min-width: $screen-sm) {
|
@media (min-width: $screen-sm) {
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
& > li {
|
& > li {
|
||||||
padding-right: 2em;
|
padding-right: 2em;
|
||||||
flex: 0 0 33.3%;
|
width: 50%;
|
||||||
& > a {
|
& > a {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
border-bottom: 2px solid #288E8E;
|
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -312,29 +323,36 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: #ffffff;
|
background:#222222a6;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
}
|
||||||
.modules-menu .modules-menu-level-0 > li > a, .modules-menu .modules-menu-level-0 ,.modules-menu .modules-menu-level-0 > li {color: #000;
|
.modules-menu .modules-menu-level-0 > li > a, .modules-menu .modules-menu-level-0 ,.modules-menu .modules-menu-level-0 > li {color: #fff;
|
||||||
font-size: 18px ;
|
font-size: 18px ;
|
||||||
font-weight: 500; }
|
font-weight: 500; }
|
||||||
.menu-drop{
|
.menu-drop{
|
||||||
font-size: 10px ;
|
font-size: 10px ;
|
||||||
}
|
}
|
||||||
.navbar-toggle {
|
.navbar-toggle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
right: 2.8em;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
top: 0;
|
top: 6.5em;
|
||||||
z-index: 1;
|
z-index: 11111;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
border: 0;
|
||||||
border: 0;
|
-webkit-transition: -webkit-transform 0.3s;
|
||||||
|
transition: -webkit-transform 0.3s;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||||
|
@media(max-width:768px){
|
||||||
|
left: 3em;
|
||||||
|
top:0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cover {
|
.cover {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -377,6 +395,7 @@
|
||||||
.mobile-menu .collapse.navbar-collapse.modules-menu {
|
.mobile-menu .collapse.navbar-collapse.modules-menu {
|
||||||
//overflow-y: scroll;
|
//overflow-y: scroll;
|
||||||
transform: translateX(0%);
|
transform: translateX(0%);
|
||||||
|
|
||||||
}
|
}
|
||||||
.display-on{
|
.display-on{
|
||||||
display:block!important;
|
display:block!important;
|
||||||
|
@ -412,3 +431,109 @@
|
||||||
font-size: 3px;
|
font-size: 3px;
|
||||||
font-weight: 100!important;
|
font-weight: 100!important;
|
||||||
}
|
}
|
||||||
|
.home-menu{
|
||||||
|
display: none;
|
||||||
|
position: relative;
|
||||||
|
height: 100px!important;
|
||||||
|
width: 80%;
|
||||||
|
z-index: -1;
|
||||||
|
.dropdown-toggle{
|
||||||
|
border-bottom: 0!important;
|
||||||
|
}
|
||||||
|
.modules-menu-level-0{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
@media(max-width: 768px){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modules-menu-level-1{
|
||||||
|
overflow-y: scroll !important;
|
||||||
|
}
|
||||||
|
.modules-menu-level-0 .mobile-menu1{
|
||||||
|
@media (min-width: 769px){
|
||||||
|
width: auto!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modules-menu-level-1 {
|
||||||
|
list-style: none;
|
||||||
|
z-index: 1;
|
||||||
|
padding:1em;
|
||||||
|
@media(min-width:769px){
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
left:0;
|
||||||
|
display: flex;
|
||||||
|
visibility: hidden;
|
||||||
|
position: fixed!important;
|
||||||
|
opacity: 0;
|
||||||
|
width: 100vw;
|
||||||
|
box-shadow: 2px 2px 5px #00000033;
|
||||||
|
margin: 0.8em 0;
|
||||||
|
padding: 0;
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > li {
|
||||||
|
position: relative;
|
||||||
|
// & + li {
|
||||||
|
// border-top: 0.0625em solid lighten($theme-gray, 5%);
|
||||||
|
// }
|
||||||
|
|
||||||
|
& > a {
|
||||||
|
display: block;
|
||||||
|
padding: 1em 1.5em;
|
||||||
|
font-family: $main-font;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $screen-sm) {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
& > li {
|
||||||
|
padding-right: 2em;
|
||||||
|
flex: 0 0 33.3%;
|
||||||
|
& > a {
|
||||||
|
padding-left: 1em;
|
||||||
|
border-bottom: 2px solid #288E8E;
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.modules-menu-level-2 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modules-menus{
|
||||||
|
.mobile-menu2{
|
||||||
|
.menu-drop{
|
||||||
|
@media(min-width: 769px){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-toggle .icon-bar{
|
||||||
|
width: 1.75em;
|
||||||
|
box-shadow: 2px 2px 4px #00000080;
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
.navbar-toggle .icon-bar{
|
||||||
|
right:-2em;
|
||||||
|
margin-top: 0.25em!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-toggle .icon-bar+.icon-bar{
|
||||||
|
margin-top: 0.35em;
|
||||||
|
}
|
||||||
|
.navbar-toggle .icon-bar{
|
||||||
|
height: 0.15em;
|
||||||
|
}
|
||||||
|
|
|
@ -26,7 +26,7 @@ div.weather_widget1{
|
||||||
background: unset;
|
background: unset;
|
||||||
}
|
}
|
||||||
.navFixed .modules-menu .modules-menu-level-0 > li:focus-within .modules-menu-level-1, .navRel .modules-menu .modules-menu-level-0 > li:focus-within .modules-menu-level-1{
|
.navFixed .modules-menu .modules-menu-level-0 > li:focus-within .modules-menu-level-1, .navRel .modules-menu .modules-menu-level-0 > li:focus-within .modules-menu-level-1{
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
max-height: 65%;
|
max-height: 65%;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
|
@ -101,17 +101,15 @@ div.extra-box:empty {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.dropdowns{
|
.dropdowns{
|
||||||
@media (min-width: $screen-md) {
|
@media (min-width:769px) {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content:end;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.header-buttom{
|
.header-buttom{
|
||||||
@media (min-width: $screen-md) {
|
@media (min-width: $screen-md) {
|
||||||
|
@ -214,4 +212,4 @@ h3.page-module-title {
|
||||||
.title-wraper{
|
.title-wraper{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
order: 0;
|
order: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,15 +31,18 @@
|
||||||
<span class="icon-bar icon-bar-top"></span>
|
<span class="icon-bar icon-bar-top"></span>
|
||||||
<span class="icon-bar icon-bar-middle"></span>
|
<span class="icon-bar icon-bar-middle"></span>
|
||||||
<span class="icon-bar icon-bar-bottom"></span>
|
<span class="icon-bar icon-bar-bottom"></span>
|
||||||
|
<span class="site-trigger__text">
|
||||||
|
MENU </span>
|
||||||
</button>
|
</button>
|
||||||
<a title="{{site_title_1}}" class="navbar-brand" href="{{home_link_1}}"><img class="site-logo" src="{{logo_url_1}}" alt="site-logo"></a>
|
<a title="{{site_title_1}}" class="navbar-brand" href="{{home_link_1}}"><img class="site-logo" src="{{logo_url_1}}" alt="site-logo"></a>
|
||||||
<script>$(document).ready(function(){var url =$('.site-logo').eq(0).attr('src');if(url == "/assets/default-site-logo.png"){$('.navbar-brand').eq(0).remove();};if($('.navbar-brand').length == 2){$('.site-logo').css('height','auto')};$('.site-logo').eq(0).css('margin-right',0);$('.navbar-brand').css('padding-right',0)})</script>
|
<script>$(document).ready(function(){var url =$('.site-logo').eq(0).attr('src');if(url == "/assets/default-site-logo.png"){$('.navbar-brand').eq(0).remove();};if($('.navbar-brand').length == 2){$('.site-logo').css('height','auto')};$('.site-logo').eq(0).css('margin-right',0);$('.navbar-brand').css('padding-right',0)})</script>
|
||||||
<a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a>
|
<a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="collapse navbar-collapse modules-menu" id="layout-navigation">
|
<div class="collapse navbar-collapse modules-menu modules-menus" id="layout-navigation">
|
||||||
<a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>
|
<a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>
|
||||||
<%= render_menu %>
|
<%= render_menu %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -171,193 +171,193 @@
|
||||||
$("*[data-yt-binded=0]").each(function(){
|
$("*[data-yt-binded=0]").each(function(){
|
||||||
init_yt_banner(this);
|
init_yt_banner(this);
|
||||||
})
|
})
|
||||||
if (typeof onYouTubeIframeAPIReady !== 'function'){
|
if (typeof onYouTubeIframeAPIReady !== 'function'){
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
|
$(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
|
||||||
$(this).trigger('click');
|
$(this).trigger('click');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
if(window.yt_players == undefined)
|
||||||
if(window.yt_players == undefined)
|
window.yt_players = {};
|
||||||
window.yt_players = {};
|
function find_out_yt_event_list_key(yt_player){
|
||||||
function find_out_yt_event_list_key(yt_player){
|
var defalt_key = 'o';
|
||||||
var defalt_key = 'o';
|
var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
|
||||||
var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
|
var prop_nums_thresh = 6;
|
||||||
var prop_nums_thresh = 6;
|
if(all_keys.indexOf(defalt_key) != -1){
|
||||||
if(all_keys.indexOf(defalt_key) != -1){
|
if((yt_player[defalt_key] instanceof Object) && Object.keys(yt_player[defalt_key]).length > prop_nums_thresh){
|
||||||
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)){
|
|
||||||
return defalt_key;
|
return defalt_key;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
var event_key;
|
||||||
var relation_key;
|
all_keys.forEach(function(k){
|
||||||
all_keys.forEach(function(k){
|
if((yt_player[k] instanceof Object) && Object.keys(yt_player[k]).length > prop_nums_thresh){
|
||||||
var tmp = event_dict[k];
|
event_key = k;
|
||||||
if((tmp instanceof Object) && tmp['onStateChange']){
|
|
||||||
if(!is_obj || (tmp['onStateChange'] instanceof Object)){
|
|
||||||
relation_key = k;
|
|
||||||
return false;
|
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");
|
return event_key;
|
||||||
if(iframes.length > 0){
|
}
|
||||||
var id = $banner.attr("data-subpart-id");
|
function find_out_yt_event_list_count_key(yt_player, event_list_key){
|
||||||
if(yt_players[id] == undefined)
|
var defalt_key = 'v';
|
||||||
yt_players[id] = {};
|
var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
|
||||||
var remove_ids = [];
|
var equal_count = yt_player[event_list_key].length;
|
||||||
Object.keys(yt_players[id]).forEach(function(k){
|
if(all_keys.indexOf(defalt_key) != -1){
|
||||||
var yt_player = yt_players[id][k];
|
if(yt_player[defalt_key] == equal_count){
|
||||||
if($(yt_player.getIframe()).length == 0){
|
return defalt_key;
|
||||||
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);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
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){
|
function find_out_yt_event_list_array_key(event_dict){
|
||||||
init_banner(banner);
|
var defalt_key = 'i';
|
||||||
})
|
var all_keys = Object.keys(event_dict);
|
||||||
}
|
if(all_keys.indexOf(defalt_key) != -1){
|
||||||
function onPlayerStateChange(event){
|
var tmp = event_dict[defalt_key];
|
||||||
var iframe = $(event.target.getIframe()),
|
if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
|
||||||
cyclediv = iframe.parents("div.cycle-slideshow");
|
return defalt_key;
|
||||||
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"));
|
var array_key;
|
||||||
cyclediv.cycle("pause");
|
all_keys.forEach(function(k){
|
||||||
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay,.banner-overlay').css('visibility','hidden')
|
var tmp = event_dict[k];
|
||||||
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),false);
|
if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
|
||||||
}else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
|
array_key = k;
|
||||||
if(cyclediv[0].need_resume)
|
return false;
|
||||||
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);
|
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 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);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$(".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(){
|
$(document).ready(function(){
|
||||||
window.onYouTubePlayerAPIReady = function() {
|
window.onYouTubePlayerAPIReady = function() {
|
||||||
onYouTubeIframeAPIReady.apply(this,arguments);
|
onYouTubeIframeAPIReady.apply(this,arguments);
|
||||||
|
|
|
@ -46,6 +46,9 @@
|
||||||
padding: 1em 0 0 0;
|
padding: 1em 0 0 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
.ask-question .controls > input[type="radio"]:not(:first-child) {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<link href="/assets/custom_field.css" media="screen" rel="stylesheet">
|
<link href="/assets/custom_field.css" media="screen" rel="stylesheet">
|
||||||
<script src="/assets/validator"></script>
|
<script src="/assets/validator"></script>
|
||||||
|
|
Loading…
Reference in New Issue