/*********************************************
* common.js
* -------------------------------------------
* @namespace
* - EPOS_FORM
* @constructor
* - Util(variable/method)
* :variable
* - $win
* - $doc
* - ua
* - SMART_UA
* - pagePath
* - pageW
* - breakPoint1
* - breakPoint2
* - responsive
* :method
* - isRangeSP
* - isRangeTL
* - isRangePC
* - isNotPC
* - isSmartphone
* - isiPhone
* - isAndroid
* - isTablet
* - isTouch
* - isFontSizeCheck
* - isWindowSizeCheck
* - resizeEvent
* @module
* - respondDevice
* - respondBrowser
* - smartView
* - smoothScroll
* - accordion
* - pageTopControl
* - sizeFix
* - equalHeight
* @init
* @requires
* - jquery.js
*********************************************/
/* -------------------------------------------
* @namespace
------------------------------------------- */
var EPOS_FORM = EPOS_FORM || {};
/* -------------------------------------------
* @constructor
------------------------------------------- */
EPOS_FORM.Util = function(){
this.$win = $(window);
this.$doc = $(document);
this.ua = navigator.userAgent.toLowerCase();
this.SMART_UA = ["iphone","ipad","android","windows phone"];
this.pagePath = location.pathname.replace('index.html', '');
this.pageW = 950;
this.breakPoint1 = 640;
this.breakPoint2 = 768;
this.responsive = false;
};
EPOS_FORM.Util.prototype = {
/*
* @method isRangeSP
* @return {Boolean}
*/
isRangeSP: function(){
var winW = this.$win.width(),
innerW = window.innerWidth ? window.innerWidth: this.$win.width(),
outerW = window.outerWidth;
return (winW <= this.breakPoint1) ? true : false;
//return (innerW <= this.breakPoint1 && outerW <= this.breakPoint1) ? true : false;
},
/*
* @method isRangeTL
* @return {Boolean}
*/
isRangeTL: function(){
var winW = this.$win.width(),
innerW = window.innerWidth ? window.innerWidth: this.$win.width(),
outerW = window.outerWidth;
return ((this.breakPoint1 < winW) && (winW <= this.breakPoint2)) ? true : false;
//return ((this.breakPoint1 < innerW && this.breakPoint1 < outerW) && (innerW <= this.breakPoint2 && outerW <= this.breakPoint2)) ? true : false;
},
/*
* @method isRangePC
* @return {Boolean}
*/
isRangePC: function(){
var winW = this.$win.width(),
innerW = window.innerWidth ? window.innerWidth: this.$win.width(),
outerW = window.outerWidth;
return (this.breakPoint2 < winW) ? true : false;
//return (this.breakPoint2 < innerW && this.breakPoint2 < outerW) ? true : false;
},
/*
* @method isNotPC
* @return {Boolean}
*/
isNotPC: function(){
var uaArray = new RegExp(this.SMART_UA.join("|"),"i");
return uaArray.test(this.ua);
},
/*
* @method isSmartphone
* @return {Boolean}
*/
isSmartphone: function(){
var UA = {
iPhone: this.ua.indexOf('iphone') !== -1,
iPod: this.ua.indexOf('ipod') !== -1,
Android: this.ua.indexOf('android') !== -1 && this.ua.indexOf('mobile') !== -1,
WindowsPhone: this.ua.indexOf('windows phone') !== -1
};
return (UA.iPhone || UA.iPod || UA.Android || UA.WindowsPhone) ? true : false;
},
/*
* @method isiPhone
* @return {Boolean}
*/
isiPhone: function(){
var UA = {
iPhone: this.ua.indexOf('iphone') !== -1,
iPod: this.ua.indexOf('ipod') !== -1,
};
return (UA.iPhone || UA.iPod) ? true : false;
},
/*
* @method isAndroid
* @return {Boolean}
*/
isAndroid: function(){
return (this.ua.indexOf('android') != -1) ? true : false;
},
/*
* @method isTablet
* @return {Boolean}
*/
isTablet: function(){
var UA = {
iPad: this.ua.indexOf('ipad') !== -1,
Android: this.ua.indexOf('android') !== -1 && this.ua.indexOf('mobile') === -1
};
return (UA.iPad || UA.Android) ? true : false;
},
/*
* @method isTouch
* @return {Boolean}
*/
isTouch: function(){
return ('ontouchstart' in window) ? true : false;
},
/*
* @method isFontSizeCheck
* @param {function} callback
* - フォントサイズが変更されたら、callbackを実行
*/
isFontSizeCheck: function(callback){
var $elm,
HTML_FS_WATCHER = $('
'),
watcherCssObj = {
position: "absolute",
top: "0",
display: "block",
padding: "0",
visibility: "hidden"
},
currentSize = 0,
interval = 500;
// 監視用HTMLを生成する
HTML_FS_WATCHER.css(watcherCssObj).appendTo("body");
$elm = $("#fontSizeWatcher");
// 要素の高さを取得
var getSize = function($elm){ return $elm.height(); };
// 要素の高さを比較して、異なればcallbackを実行
var fontSizeCheck = function(){
var h = getSize($elm);
if(h === currentSize){
return false;
} else {
currentSize = h;
callback();
}
};
setInterval(fontSizeCheck, interval);
},
/*
* @method isWindowSizeCheck
* @param {function} callback
* - windowのリサイズ処理が完了したら、callbackを実行
*/
isWindowSizeCheck: function(callback){
var resize = false,
interval = 500;
this.$win.on("resize", function(){
// リサイズされている間は何もしない
if(resize !== false){ clearTimeout(resize); }
resize = setTimeout(function(){
callback();
}, interval);
});
}
};
/* -------------------------------------------
* @module
------------------------------------------- */
EPOS_FORM.module = function(){
var u = new EPOS_FORM.Util();
return {
/*
* @method initialize
* - 初期化
*/
initialize: function(){
this.respondDevice();
this.respondBrowser();
this.smoothScroll();
this.accordion();
this.pageTopControl();
this.sizeFix();
this.rowEgdeCheck();
//this.equalHeight(true, true); ※ロード時に実行
},
/*
* @method respondDevice
* - デバイス対応
*/
respondDevice: function(){
/* スマホ以外の場合 */
if(!u.isSmartphone()){
// 電話番号のリンク削除
$('a[href^="tel:"]').each(function(){
$(this).find("> *").unwrap();
});
}
/* iPhoneの場合 */
if(u.isiPhone()){
$(".ua-iPhone-only").css("display","inherit");
}
/* Androidの場合 */
if(u.isAndroid()){
$(".ua-Android-only").css("display","inherit");
/* Xperiaの場合 */
if(u.ua.indexOf("so-") !== -1 && u.ua.indexOf("build") !== -1){
// フォーム画面のみ拡大・縮小させない
if($("#formFlow").size()){
$("meta[name='viewport']").attr("content", "width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no");
}
}
/* Android4.0の場合 */
if(u.ua.indexOf("android 4.0") !== -1){
$("body").addClass("android4_0");
}
}
},
/*
* @method respondBrowser
* - ブラウザ対応
*/
respondBrowser: function(){
/* PC、タブレットの場合 */
if(!u.isSmartphone()){
// UA判別による要素削除
$(".ua_spOnly").remove();
}
/* PC以外の場合 */
if(u.isNotPC()){
// UA判別による要素削除
$(".ua_pcOnly").remove();
}
if(u.isSmartphone()){
// 電話リンク付与
$('.telLink').each(function(){
var telNum = j$(this).text();
$(this).html(j$('').attr('href', 'tel:' + telNum.replace(/\s+|-/g, '')).append(telNum + ''));
});
}
// UA判別による要素の出し分け
if(u.isiPhone()){
$(".ua-iPhoneOnly").show();
$(".ua-AndroidOnly").remove();
}
if(u.isAndroid()){
$(".ua-AndroidOnly").show();
$(".ua-iPhoneOnly").remove();
}
},
/*
* @method smoothScroll
* - スムーススクロール
*/
smoothScroll: function(){
/* vars
------------------------------- */
var noScrollClass = ".noScroll",
disableName = "disabled",
href,
anc,
position,
webkit = /webkit/,
speed = 300,
easing = "swing";
/* trigger
------------------------------- */
/* スクロール制御 */
$("a[href^=#], area[href^=#]").not("a[href=#], a[href^=#tab], a[href^=#cb_inline], " + noScrollClass + "").on("click", function(){
href = $(this).attr("href");
anc = $(href);
position = anc.offset().top;
// 遷移無効
if($(this).hasClass(disableName)){
return false;
}
$("html, body").animate({
scrollTop: position
}, speed, easing);
return false;
});
},
/**
* @method accordion
*/
accordion: function(config){
var $elm = $(".accBox");
if ($elm.length === 0){ return false}
var c = $.extend({
switchClass: ".accBtn",
boxClass: ".detailsBox",
activeClass: "open"
}, config);
$elm.each(function(){
var box = $(c.boxClass, this),
accordSwitch = $(c.switchClass, this);
box.hide();
accordSwitch.show();
/* 開閉 */
var accordion = function(){
if (box.is(":hidden")){
box.stop(true).slideToggle(300);
accordSwitch.toggleClass(c.activeClass);
} else {
box.stop(true).slideToggle(300);
accordSwitch.toggleClass(c.activeClass);
}
EPOS_FORM.module.equalHeight();
};
$(accordSwitch).on({
click: function(){
accordion();
EPOS_FORM.module.equalHeight();
}
});
});
},
/*
* @method pageTopControl
* - 「ページトップ」ボタン制御
*/
pageTopControl: function(){
/* vars
------------------------------- */
var $elm = $("#pageTopBtn"),
fixedName = "fixed",
footerH = $("#footer").outerHeight(),
winH,
docH,
scrollY,
posY,
fadeSpeed = 500;
if($elm.length === 0){
return false;
}
/* setting
------------------------------- */
// 初期非表示
$elm.hide();
/* trigger
------------------------------- */
// スクロール制御
u.$win.on("scroll", function(){
winH = u.$win.height();
docH = u.$doc.height();
// スクロールした高さ取得
scrollY = $(this).scrollTop();
// 現在のトップからの位置取得
posY = winH + scrollY;
// 表示設定
if($(this).scrollTop() > 100){
$elm.fadeIn(fadeSpeed);
} else {
$elm.fadeOut(fadeSpeed);
}
// 配置設定
if(docH - posY <= footerH){
$elm.addClass(fixedName);
} else {
$elm.removeClass(fixedName);
}
});
},
/*
* @method sizeFix
* - 幅固定
*/
sizeFix: function(){
/* vars
------------------------------- */
var $elm = $(".sizeFix"),
baseName = "baseSize",
captionName = "txCaption",
setW;
if($elm.length === 0){
return false;
}
if(u.responsive && u.isSmartphone()){
return false;
}
/* function
------------------------------- */
var sizeSet = function(target){
if(u.isSmartphone()){
setW = "auto";
} else {
if(target.find("img").hasClass(baseName)){
setW = $("." + c.baseName, target).width();
} else {
setW = $("img", target).width();
}
}
$('[class*="' + captionName + '"]', target).css("width", setW);
target.css("width", setW);
};
/* trigger
------------------------------- */
$elm.each(function(){
var self = $(this);
// ロード時
u.$win.on("load", function(){
sizeSet(self);
});
// リサイズ時
u.$win.on(u.resizeEvent(), function(){
sizeSet(self);
});
});
},
/*
* @method rowEgdeCheck
* - 横並びの端制御
*/
rowEgdeCheck: function(config){
/* options
------------------------------- */
var c = $.extend({
targetElm: ".listRow[class*='space']",
childElm: "> li",
edgeName: "edgeRight"
}, config);
/* vars
------------------------------- */
var $elm = $(c.targetElm);
if($elm.length === 0){
return false;
}
/* function
------------------------------- */
var init = function(){
$elm.each(function(){
var $target = $(c.childElm, this),
num = $target.length,
eOffset,
gOffset;
$target.removeClass(c.edgeName);
$target.eq(num-1).addClass(c.edgeName);
$target.each(function(){
var self = $(this);
eOffset = parseInt(self.offset().top);
if(gOffset !== eOffset){
self.prev().addClass(c.edgeName);
gOffset = eOffset;
}
});
});
};
/* init
------------------------------- */
u.isFontSizeCheck(init);
},
/*
* @method equalHeight
* - 高さ揃え
* @param {Boolean}
* - 文字可変・リサイズに対応するかどうか
*/
equalHeight: function(fsCheck, wsCheck){
/* vars
------------------------------- */
var $elm = $(".equalHeight"),
$children = $elm.children(),
childBaseName = "eqChild",
cancelName = "smart-cancel",
fsCheck = fsCheck || false,
wsCheck = wsCheck || false;
if($elm.length === 0 || $children.length < 2){
return false;
}
/* function
------------------------------- */
/* 各要素ごとにグループ化 */
var grouping = function(){
var $groupedChildren = $elm.find('*[class*=' + childBaseName + ']'),
classNames = {},groups = [];
$groupedChildren.each(function(){
var splitClass = $(this).attr("class").split(" "),
splitClassNum = splitClass.length,
newClassName;
for(var i = 0; i < splitClassNum; i++){
newClassName = splitClass[i].match(RegExp(childBaseName + "[a-z0-9]+", 'i'));
if(!newClassName){
continue;
} else {
newClassName.toString();
classNames[newClassName] = newClassName;
}
}
});
for(var c in classNames){
groups.push($elm.find("." + c));
}
groups.push($children);
return groups;
};
/* 各要素の高さを揃える */
var equalHeight = function(elm){
var maxHeight = 0;
elm.css("height", "auto");
// スマートデバイスの時は高さをautoに設定
if((u.isNotPC()) && (elm.parents(".equalHeight").hasClass(cancelName))){
maxHeight = "auto";
} else {
elm.each(function(){
if($(this).height() > maxHeight){
maxHeight = $(this).height();
}
});
}
return elm.height(maxHeight);
};
/* init */
var init = function(){
var groups = grouping(),
h = [],
child = [],
maxHeight = 0,
top = 0;
$.each(groups, function(){
var $group = $(this);
$group.each(function(i){
$(this).css("height", "auto");
h[i] = $(this).height();
if(top != Math.round($(this).position().top) && top != Math.round($(this).position().top) + 1 && top != Math.round($(this).position().top) - 1){
equalHeight($(child));
child = [];
top = Math.round($(this).position().top);
}
child.push(this);
});
});
if(child.length > 1){ equalHeight($(child)); }
};
/* init
------------------------------- */
// 文字可変・リサイズへの対応可否
fsCheck ? u.isFontSizeCheck(init) : init();
wsCheck ? u.isWindowSizeCheck(init) : init();
}
};
}();
/* -------------------------------------------
* @init
------------------------------------------- */
$(function(){
var u = new EPOS_FORM.Util();
EPOS_FORM.module.initialize();
/* ロード時 */
u.$win.on("load", function(){
EPOS_FORM.module.equalHeight(true, true);
});
$(".js-amount_or_number .input-area--radio label").on("click", function(){
if($(this).attr('class') == "amount_or_number01"){
$("#js-amount").fadeIn();
$("#js-number").hide();
}else{
$("#js-amount").hide();
$("#js-number").fadeIn();
}
});
});