(function ($) {
// ------------------------------------------------ //
// stack init //
// ------------------------------------------------ //
$(window).on('load', function(){
initAccordion_v2();
initAccordionTab_v2();
initTableLayout_v2();
linkBlock();
color_select().init();
});
var lowerAndroid = function(n) {
var bo = false;
var ua = navigator.userAgent.toLowerCase();
var version = ua.substr(ua.indexOf("android") + 8, 3);
if (ua.indexOf("android") > 0) {
if (parseFloat(version) <= n) {
bo = true;
}
}
return bo;
};
var linkBlock = function(n) {
if($('body').hasClass('smt')){
var $linkBlock = $('.js-linkblock-smt');
$linkBlock.addClass('is-js-active')
$linkBlock.on('click',function () {
var link = '';
if($(this).find('a.link-smt').length > 0){
link = $(this).find('a.link-smt').first().attr('href');
} else {
link = $(this).find('a').first().attr('href');
}
location.href = link;
});
}
};
// ------------------------------------------------ //
// initTableLayout_v2 //
// ------------------------------------------------ //
var initTableLayout_v2 = function() {
// $(".js-table-list").each(function() {
// var $this = $(this);
// $this.find("[data-headers]").each(function() {
// var headers = $(this).attr("data-headers").split(" ");
// var headersText1 = $("#" + headers[0]).html();
// var headersText2 = $("#" + headers[1]).html();
// var headersText3 = $("#" + headers[2]).html();
// if (headersText3 != null) {
// $(this).prepend(('"));
// }
// if (headersText2 != null) {
// $(this).prepend(('"));
// }
// if (headersText1 != null) {
// $(this).prepend(('"));
// }
// });
// });
if (lowerAndroid(2.3)) {
$(".table-common__wrap.s-scroll .table-common__in, .table-common__in.js-table-fix").each(function() {
$(this).css("position", "relative").find("table").width("744px");
var element = $(this)[0];
var scroll_x = new iScroll(element,{
hideScrollbar: false,
bounce: false,
onBeforeScrollStart: function() {}
});
});
}
};
// ------------------------------------------------ //
// initAccordion_v2 //
// ------------------------------------------------ //
var initAccordion_v2 = function() {
var $target = $(".js-accordion-v2,.js-accordion-v2-smt");
// アコーディオンヘッダー クリック時の挙動
$target.on("click", function() {
if( $('body').hasClass('pc') && $(this).hasClass('js-accordion-v2-smt')){ return false; }
if( $('body').hasClass('tb') && !$('body').hasClass('view-smt') && $(this).hasClass('js-accordion-v2-smt')){ return false; }
if( $('body').hasClass('view-pc') && $(this).hasClass('js-accordion-v2-smt')){ return false; }
var $this = $(this);
var $panel = $this.next(".js-accordion-body-v2,.js-accordion-body-v2-smt");
var state = $this.attr("aria-expanded") === "false" ? true : false;
var toggle = $this.find(".toggle .txt");
var toggleTxt = toggle.text();
$this.attr("aria-expanded", state);
$panel.attr("aria-hidden", !state);
if (toggleTxt == "\u958b\u304f") {
toggle.text("\u9589\u3058\u308b");
toggle.closest('.toggle').find('img').attr("src", "/images_osp/common/btn/btn_toggle_close01_v2.png");
$panel.addClass('is-active');
} else {
toggle.text("\u958b\u304f");
toggle.closest('.toggle').find('img').attr("src", "/images_osp/common/btn/btn_toggle_open01_v2.png");
$panel.removeClass('is-active');
}
$panel.stop().slideToggle(200, function() {
$(".js-mach, .js-bnr-center .link-cmn-bnr").lineUp();
$(".js-height").heightLine();
$(".js-height-parent").each(function() {
$(this).find(".js-height-child").heightLine();
});
});
return false;
});
// フォーカス + エンター時の挙動
$target.on('focus keydown', function(e){
if( e.key == 'Enter' ){
if( $('body').hasClass('pc') && $(this).hasClass('js-accordion-v2-smt')){ return false; }
if( $('body').hasClass('tb') && !$('body').hasClass('view-smt') && $(this).hasClass('js-accordion-v2-smt')){ return false; }
if( $('body').hasClass('view-pc') && $(this).hasClass('js-accordion-v2-smt')){ return false; }
var $this = $(this);
var $panel = $this.next(".js-accordion-body-v2,.js-accordion-body-v2-smt");
var state = $this.attr("aria-expanded") === "false" ? true : false;
var toggle = $this.find(".toggle .txt");
var toggleTxt = toggle.text();
$this.attr("aria-expanded", state);
$panel.attr("aria-hidden", !state);
if (toggleTxt == "\u958b\u304f") {
toggle.text("\u9589\u3058\u308b");
toggle.closest('.toggle').find('img').attr("src", "/images_osp/common/btn/btn_toggle_close01_v2.png");
$panel.addClass('is-active');
} else {
toggle.text("\u958b\u304f");
toggle.closest('.toggle').find('img').attr("src", "/images_osp/common/btn/btn_toggle_open01_v2.png");
$panel.removeClass('is-active');
}
$panel.stop().slideToggle(200, function() {
$(".js-mach, .js-bnr-center .link-cmn-bnr").lineUp();
$(".js-height").heightLine();
$(".js-height-parent").each(function() {
$(this).find(".js-height-child").heightLine();
});
});
return false;
};
});
$target.each(function(i) {
var anchorId = $(this).parent().attr('id');
if(anchorId){
$(this).attr('data-togglename',anchorId);
}
var $panel = $(this).parent().find(".js-accordion-body-v2,.js-accordion-body-v2-smt");
var isSmt = $('body').hasClass('pc') && $panel.hasClass('js-accordion-body-v2-smt');
var acc_startStatus = $panel.attr('data-acc_startStatus');
var isOpen = acc_startStatus == 'open'
if ($('body').hasClass("view-pc") && $panel.hasClass('js-accordion-body-v2-smt')) {
isSmt = true;
};
var isTab = $('body').hasClass('tb') && !$('body').hasClass('view-smt') && $panel.hasClass('js-accordion-body-v2-smt');
if( isSmt || isTab || isOpen ){
$panel.addClass('is-active');
} else {
$panel.hide().removeClass('is-active');
}
var number = "accordion-" + (i + 1);
if ($panel.hasClass('is-active')) {
$panel.attr({
"id": number,
"aria-hidden": isSmt ? false : false,
});
$(this).attr({
"aria-controls": number,
"aria-expanded": isSmt ? true : true,
});
} else {
$panel.attr({
"id": number,
"aria-hidden": isSmt ? false : true,
});
$(this).attr({
"aria-controls": number,
"aria-expanded": isSmt ? true : false,
});
}
if ($(this).hasClass("is-active")) {
$(this).click();
}
$panel.addClass('is-js-init');
});
$('.js-all-open-v2,.js-all-open-v2-smt').each(function(){
$(this).attr({
'aria-expanded' : false
});
$(this).click(function(){
if( $('body').hasClass('pc') && $(this).hasClass('js-all-open-v2-smt')){ return false; }
if( $('body').hasClass('tb') && !$('body').hasClass('view-smt') && $(this).hasClass('js-all-open-v2-smt')){ return false; }
var state = $(this).attr('aria-expanded') === 'true' ? false : true;
$(this).attr('aria-expanded', state);
//toggleテキスト取得
var toggle = $(this).find('.toggle .txt');
var toggleTxt = toggle.text();
//toggleテキスト スイッチ
if($(this).hasClass('is-active')){
toggle.text('\u958b\u304f');
toggle.closest('.toggle').find('img').attr('src','/images_osp/common/btn/btn_toggle_open01_v2.png');
} else {
toggle.text('\u9589\u3058\u308b');
toggle.closest('.toggle').find('img').attr('src','/images_osp/common/btn/btn_toggle_close01_v2.png');
}
if($(this).hasClass('is-active')){
$(this).parent().find('.js-accordion-v2[aria-expanded="true"],.js-accordion-v2-smt[aria-expanded="true"]').click();
} else {
$(this).parent().find('.js-accordion-v2[aria-expanded="false"],.js-accordion-v2-smt[aria-expanded="false"]').click();
}
$(this).toggleClass('is-active');
return false;
});
});
};
// ------------------------------------------------ //
// initAccordion_v2 //
// ------------------------------------------------ //
var initAccordionTab_v2 = function() {
var $target = $(".js-accordion-tab-v2");
$target.each(function(i) {
var $panel = $(this).next(".js-accordion-body");
var $panelItemDef = $(this).next().find(".js-accordion-body-item:eq(0)");
var $panelItem = $(this).next().find(".js-accordion-body-item:eq(1)");
var number = "accordion-tab-" + (i + 1);
var numberItemDef = "accordion-tab-item-def-" + (i + 1);
var numberItem = "accordion-tab-item-" + (i + 1);
$panel.attr({
"id": number
});
$panelItemDef.attr({
"id": numberItemDef,
"aria-hidden": false,
"aria-labelledby": number
});
$panelItem.attr({
"id": numberItem,
"aria-hidden": true,
"aria-labelledby": number
});
$(this).attr({
"aria-controls": number,
"aria-expanded": true
});
});
$target.on("click", function() {
var $this = $(this);
var $panel = $this.next(".js-accordion-body");
var $panelItemDef = $(this).next().find(".js-accordion-body-item:eq(0)");
var $panelItem = $(this).next().find(".js-accordion-body-item:eq(1)");
var state = $this.attr("aria-expanded") === "false" ? true : false;
var toggle = $this.find(".toggle .txt");
var toggleTxt = toggle.text();
$this.attr("aria-expanded", state);
$panelItemDef.attr("aria-hidden", !state);
$panelItem.attr("aria-hidden", state);
if (toggleTxt == "\u958b\u304f") {
toggle.text("\u9589\u3058\u308b");
toggle.find("+ img").attr("src", "/images_osp/common/btn/btn_toggle_close01_v2.png");
} else {
toggle.text("\u958b\u304f");
toggle.find("+ img").attr("src", "/images_osp/common/btn/btn_toggle_open01_v2.png");
}
$panel.toggleClass("is-active");
return false;
});
};
// ------------------------------------------------ //
// color_select.js
//
// iPhone予約カラーの選択
//
// @create 2019/09/22
// @update 2019/09/22
// ------------------------------------------------ //
var color_select = function () {
ALERT_MESSAGE = "カラーを選択してください。";
retFlg = false;
var checkInput = function(){
if( $('[name="radio-01"]:checked').val() == undefined ){
window.alert( ALERT_MESSAGE );
return false;
}else{
var href = $(this).val();
window.location = href;
return false;
}
};
var initLabel = function() {
var target = ".js-color-select-label";
$(target).each(function() {
var $check = $(this).find("input");
var state = $check.prop("checked");
if ($(this).find("a").length) {
if (state == true) {
var href = $(this).find("a").attr("href");
$(this).attr("data-href", href);
$(this).addClass("is-active");
$(".js-color-select-label-submit-iphone").val(href);
} else {
var href = $(this).find("a").attr("href");
$(this).attr("data-href", href);
}
$(this).find(".js-color-select-txt").unwrap("a");
}
});
//カラー選択と同時にリンクをセット
$(target).click(function() {
var $check = $(this).find("input");
var label = $(this).data("label");
var state = $check.prop("checked");
if (state == true) {
if ($check.attr("type") == "radio") {
$(target + '[data-label="' + label + '"]').removeClass("is-active");
$(this).addClass("is-active");
} else {
if ($check.attr("type") == "checkbox") {
$(this).addClass("is-active");
}
}
var href = $(this).data("href");
$(".js-color-select-label-submit-product").val(href);
} else {
if ($check.attr("type") == "radio") {
$(target + '[data-label="' + label + '"]').removeClass("is-active");
$(this).addClass("is-active");
} else {
if ($check.attr("type") == "checkbox") {
$(this).removeClass("is-active");
}
}
}
});
/*
$(".js-color-select-label-submit").click(function() {
var href = $(this).val();
window.location = href;
return false;
});
*/
$("label").click(function() {});
};
var init = function(){
//カラー選択時
initLabel();
$(".js-color-select-label-submit-product").on("click", checkInput);
};
return({
init : function(){ init(); }
});
};
})(jQuery);
// アコーディオンヘッダーにTabフォーカスを充てるためtabindex属性を付与
function tabfocuse_feasible(){
$(".js-accordion-v2,.js-accordion-v2-smt").each(function(i) {
var target = $(".js-accordion-v2,.js-accordion-v2-smt").eq(i).attr('href');
if( target == undefined ){
$(".js-accordion-v2,.js-accordion-v2-smt").eq(i).attr({'href':'javascript:void(0);'});
};
});
};
$(window).on('load', function(){
tabfocuse_feasible();
});