chiu
/
asia-home-b-en
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix accessibility.

This commit is contained in:
rulingcom 2023-07-08 15:48:41 +08:00
parent 923df6f9dc
commit 20a520430e
5 changed files with 177 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
assets/javascripts/app.js
View File

@ -49,6 +49,31 @@
}
window.already_fix_first_element = true;
}
function open_kenjoh(flag){
if(flag){
if (parseInt($('.layout-content').css('margin-top'))==0 && $('.layout-content.topcontent').length != 0 && $('.layout-content.topcontent').offset().top<400){
$('.layout-content').css('margin-top',$('.kenjohn').height()-$('#orbit-bar').height());
}
$('.kenjohn').addClass('navFixed').removeClass('navRel'); /* 幫選單加上固定效果 */
}else{
if ($('.header-banner').html().trim() == "") {
$('.kenjohn').removeClass('navFixed').addClass('navRel');
}else{
$('.kenjohn').removeClass('navRel').removeClass('navFixed'); /* 移除選單固定效果 */
}
$('.layout-content').css('margin-top','');
}
}
function recalc_kenjohn_header(){
$('.layout-header').css('height', '');
var scrollTop = $(window).scrollTop();
var scrollBottom = $('html').height() - $(window).height() - $('.kenjohn').height();
if (scrollTop>5 && scrollBottom>0) { /* 要滑動到選單的距離 */
open_kenjoh(true);
} else {
open_kenjoh(false);
}
}
function initdata1 () {
window.temp_scrollY = window.pageYOffset;
window.temp_scrollX = window.pageXOffset;
@ -61,22 +86,7 @@
}
// if (location.href.search('editmode') == -1 && document.getElementsByClassName('asideright').length != 0) {
if ( $('.header-banner').length != 0) {
$('.layout-header').css('height', '');
var scrollTop = $(window).scrollTop();
var scrollBottom = $('html').height() - $(window).height() - $('.kenjohn').height();
if (scrollTop>5 && scrollBottom>0) { /* 要滑動到選單的距離 */
if (parseInt($('.layout-content').css('margin-top'))==0 && $('.layout-content.topcontent').length != 0 && $('.layout-content.topcontent').offset().top<400){
$('.layout-content').css('margin-top',$('.kenjohn').height()-$('#orbit-bar').height());
}
$('.kenjohn').addClass('navFixed').removeClass('navRel'); /* 幫選單加上固定效果 */
} else {
if ($('.header-banner').html().trim() == "") {
$('.kenjohn').removeClass('navFixed').addClass('navRel');
}else{
$('.kenjohn').removeClass('navRel').removeClass('navFixed'); /* 移除選單固定效果 */
}
$('.layout-content').css('margin-top','');
}
recalc_kenjohn_header();
}
var navFixed = $('.kenjohn.navFixed');
window.top_barrier_height = (navFixed.length ? navFixed.height() : 0) + $('#orbit-bar').height();
@ -406,9 +416,67 @@
},
ClickMenuHandler: function() {
$('.orbit-bar-search-sign-language .logout-btn:eq(-1), #loginbutton').on('focusout', function(){
if(window.is_press_tab){
open_kenjoh(true);
$('#accesskey_top').focus();
}
})
$('#gotocenter').on('focusout', function(){
recalc_kenjohn_header();
})
$('.kenjohn .navbar-toggle').on('focusout', function(){
if(window.is_press_tab){
recalc_kenjohn_header();
}
})
$('#accesskey_top').on('focusout', function(){
if(window.is_press_shift_tab){
recalc_kenjohn_header();
}
})
var focusable_items = $('.mobile-menu').find('a, button');
var focusout_func1 = function(){
if(window.is_press_tab){
focusable_items.eq(0).focus();
}
}
var focusout_func2 = function(){
if(window.is_press_shift_tab){
focusable_items.eq(-1).focus();
}
}
var fix_menu_focus = function(enable){
if(enable){
focusable_items.focus();
focusable_items.eq(-1).on('focusout', focusout_func1);
focusable_items.eq(0).on('focusout', focusout_func2);
}else{
focusable_items.eq(-1).off('focusout', focusout_func1);
focusable_items.eq(0).off('focusout', focusout_func2);
}
}
$('#accesskey_menu').click(function(e){
e.preventDefault();
if(!$('body').hasClass('noscroll')){
$('body').data('org-scrollY', window.temp_scrollY);
$('body').css('top', '-' + window.temp_scrollY.toString() + 'px');
$('body').addClass('noscroll');
$('.mobile-menu').addClass('active');
fix_menu_focus(true);
$('.mobile-menu .navbar-toggle').removeClass('collapsed');
// $menu.slideToggle();
$('.mobile-menu1 > ul').slideUp(500);
$('.mobile-menu1 > .menu-drop').removeClass('opened');
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
$('#layout-navigation').addClass('in');
}
})
$('.navbar-toggle').click(function(e){
e.preventDefault();
if($('body').hasClass('noscroll')){
fix_menu_focus(false);
$('.mobile-menu').removeClass('active');
window.setTimeout(function(){
$('body').removeClass('noscroll');
@ -420,6 +488,7 @@
$('body').css('top', '-' + window.temp_scrollY.toString() + 'px');
$('body').addClass('noscroll');
$('.mobile-menu').addClass('active');
fix_menu_focus(true);
}
$('.mobile-menu .navbar-toggle').removeClass('collapsed');
@ -733,6 +802,10 @@ function transdate(){
if(_this.is('body')){
return;
}
if(_this.is('#gotocenter')){
open_kenjoh(true);
return;
}
if($('body').css('position') != 'fixed' && !_this.hasClass('close-screen-btn') && !_this.hasClass('navbar-toggle')){
var ele_offset = _this[0].getBoundingClientRect().top;
if(_this.parents('.kenjohn.navFixed').length == 0)
@ -750,7 +823,6 @@ function transdate(){
}, 800);
if ($('header>.kenjohn').attr('class') == "kenjohn" && _this.is('a.orbit-bar-logo')){
$('header>.kenjohn').addClass('navRel');
$('#gotocenter').focus();
}
}
});

1
assets/stylesheets/template/base/_global.scss
View File

@ -11,7 +11,6 @@ body {
font-family: $sub-font;
font-size: inherit;
margin-top: 2.5em;
overflow: hidden scroll;
background-color: #F8F8F8;
}

6
assets/stylesheets/template/layout/content.scss
View File

@ -1,7 +1,11 @@
@charset "utf-8";
@import "../initial";
html{
overflow: hidden auto;
}
body{
overflow: hidden;
@media (min-width: 1150px){
.black-screen-social-window.reactable{
.content-social .social_wrap i, .content-social .social_wrap img {
@ -35,7 +39,7 @@ body{
box-sizing: border-box;
}
a:hover span {
a:focus span, a:hover span {
width: 60px;
height: 60px;
margin-left: -30px;

170
assets/stylesheets/template/layout/header.scss
View File

@ -26,7 +26,7 @@
display: flex;
justify-content: center;
}
& > * {
& > *:not(style, script) {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
@ -157,7 +157,7 @@ a#content{
@media screen and (min-width: 769px){
height: 100vh!important;
}
@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;
}
@media screen and (max-width: $screen-xs){
@ -198,102 +198,90 @@ a#content{
}
.layout-header {
position: relative;
margin-bottom: 0;
border: none;
border-radius: 0;
border-bottom: 1px solid #e8e8e8;
color: #fff;
height: auto;
position: relative;
margin-bottom: 0;
border: none;
border-radius: 0;
border-bottom: 1px solid #e8e8e8;
color: #fff;
height: auto;
.container {
@extend .response-container;
}
.header-banner { overflow: hidden; }
.jp-audio, .jp-audio-stream, .jp-video{
border: 0px;
}
.navbar-header {
padding: 0;
margin: 0;
height: 75px;
@media (max-width: 768px) {
position:relative!important;
.container {
@extend .response-container;
}
@media (min-width: $screen-sm) {
height: 150px;
margin:0;
padding: 0;
line-height: 3.75em;
font-size: 1em;
display: flex;
.header-banner {
overflow: hidden;
}
.navbar-brand {
margin: 0;
padding-bottom: 0;
line-height: 2.125em;
color: $theme-color-main;
font-size: 0.6em;
font-family: $main-font;
@media (max-width: $screen-sm) {
height: 5em;
display: none;
}
@media (min-width: 769px){
display: none;
}
@media (max-width: 480px) {
.jp-audio, .jp-audio-stream, .jp-video {
border: 0px;
}
.navbar-header {
padding: 0;
margin: 0;
}
.default_site_h1{
width:100%!important;
}
.site-logo{
width:100%!important;
}
@media(min-width:1900px){
width: 225px;
margin-top: -12px;
}
@media screen and (min-width:1025px) and (max-width:1899px){
width: 181px;
margin-top: -3px;
}
@media screen and (min-width:769px) and (max-width:1025px){
width: 150px;
margin-top: -5px;
}
@media screen and (min-width:$screen-xs) and (max-width:769px){
width: 146px !important;
}
@media screen and (max-width:$screen-xs){
width: 110px !important;
margin-top: 3px;
height: 75px;
@media (max-width: 768px) {
position: relative !important;
}
@media (min-width: $screen-sm) {
height: 150px;
margin: 0;
padding: 0;
line-height: 3.75em;
font-size: 1em;
display: flex;
}
.navbar-brand {
margin: 0;
padding: 0;
line-height: 2.125em;
color: $theme-color-main;
font-size: 0.6em;
font-family: $main-font;
height: auto;
@media (max-width: $screen-sm) {
height: 5em;
display: none;
}
}
.navbar-brand:nth-child(2){
@media(min-width:1900px){
width: 330px!important;
margin-top: -14px;
}
@media screen and (min-width:1025px) and (max-width:1899px){
width: 261px!important;
margin-top: -5px;
}
@media screen and (min-width:769px) and (max-width:1025px){
width: 200px!important;
}
@media screen and (min-width:$screen-xs) and (max-width:769px){
width: 200px!important;
}
@media screen and (max-width:$screen-xs){
width: 150px !important;
}
@media (min-width: 769px) {
display: none;
}
@media (max-width: 480px) {
margin: 0;
}
.default_site_h1 {
width: 100% !important;
}
.site-logo {
width: 100% !important;
}
@media(min-width:1900px) {
width: 330px;
}
@media screen and (min-width:1025px) and (max-width:1899px) {
width: 261px;
}
@media screen and (min-width:$screen-xs) and (max-width:1025px) {
width: 200px;
}
@media screen and (max-width:$screen-xs) {
width: 150px;
}
}
}
}
}
.navbar-toggle {

8
home/header.html.erb
View File

@ -26,17 +26,17 @@
<div class="outdropdowns">
<div class="container dropdowns">
<div class="navbar-header">
<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>
<a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#layout-navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar icon-bar-top"></span>
<span class="icon-bar icon-bar-middle"></span>
<span class="icon-bar icon-bar-bottom"></span>
<span class="site-trigger__text">
MENU </span>
MENU </span>
</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>
<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>
</div>
<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>