ripple effect
クリックエフェクト
詳しい導入事例は導入方法を参照してください。
クリックしたボタンに波紋のエフェクトをかける。
- DEMO
- 色指定
使い方
エフェクトをかける対象に[data-ripple]の属性を追加。
波紋の色は[data-ripple]属性が空の場合は半透明の白、カラーコードを入れることで色の指定可能。
他のクリックイベントと競合して遅れて表示される場合あり。
- HTML
- CSS
- Script
.ripple {
position: absolute;
top:0; left:0; bottom:0; right:0;
overflow: hidden;
transform: translateZ(0);
border-radius: inherit;
pointer-events: none;
}
.rippleWave {
backface-visibility: hidden;
position: absolute;
border-radius: var(--radius-circle);
transform: scale(.7);
background: rgb(255 255 255 / .5);
opacity: .45;
animation: ripple 1s forwards;
}
@keyframes ripple {
to {transform: scale(24); opacity:0;}
}
-----------------------
// tableFit
//==============================
function mod_tableFit(){
$('.mod_tableFit-tb').each(function(){
if($(this).is(':hidden')){return true;}
let $td = $('.mod_tableFit-td',this);
$td.removeAttr('style');
let leng = $('.mod_tableFit-tr:first-child',this).children('.mod_tableFit-td').length;
for(let i = 0; i < leng+1; i++){
let wList = new Array();
$(this).find('.mod_tableFit-td:nth-child('+i+')').each(function(is){
wList[is] = $(this).width()+1;
});
let maxW = Math.max.apply(null, wList);
$(this).find('.mod_tableFit-td:nth-child('+i+')').css({'width':maxW+'px'});
}
let tw = $(this).parent().width();
let sw = $('.mod_tableFit-tr',this).get(0).scrollWidth;
if(tw < sw){
let wLists = new Array();
$td.each(function(i){
wLists[i] = $(this).width();
});
let maxW = Math.max.apply(null, wLists);
let ss = sw-tw;
$td.css({"max-width":maxW - ss+"px"});
}
});
}
$win.load(function(){
mod_tableFit();
});
/* ed tableFit ===============*/
// js
// ---------------------------------------------------------------
// accordion
//==============================
$('.mod_acc').each(function(){
$(this).children('.mod_acc-head').append('<button class="mod_acc-btn"><i class="ico-mui"></i></button>');
if($(this).hasClass('open')){$(this).children('.mod_acc-body').show();}
});
$bd.on('click','.mod_acc-head',function(){
let $papa = $(this).closest('.mod_acc');
let $accBody = $papa.children('.mod_acc-body');
$papa.toggleClass('open');
if($accBody.is(':hidden')){
$accBody.slideDown('normal');
} else {
$accBody.slideUp('normal');
}
});
/* ed accordion ===============*/
// slider
//==============================
var frag_slider = false;
var frag_scroll = false;
var frag_resize = false;
function sliderSet(){
let $slider = $('.mod_slider');
$slider.each(function(){
let w = $win.width();
let $li = $(this).children('li');
let i = $li.size();
$li.addClass('slider-li');
if(($li.width() + 8) * i > $(this).parent().width() && w > 769 && !$(this).hasClass('set')){
let obj = '<div class="slider-nav"><button class="slider-nav-btn prev"><i class="ico-mui"></i></button><button class="slider-nav-btn next"><i class="ico-mui"></i></button></div>';
if($(this).data('scrollber') === 'set'){
obj = '<div class="slider-nav"><button class="slider-nav-btn prev"><i class="ico-mui"></i></button><div class="slider-scrollbar"><div class="slider-scrollbar-btn"></div></div><button class="slider-nav-btn next"><i class="ico-mui"></i></button></div>';
}
$(this).addClass('set').wrap('<div class="mod_slider-wrap"></div>').parent('.mod_slider-wrap').append(obj).find('.slider-scrollbar-btn').width(100 / i + '%');
}
});
}
// 戻る
$bd.on({
'mousedown': function(){
let $slider = $(this).parents('.slider-nav').prev('.mod_slider');
frag_slider=setInterval(function(){
$slider.scrollLeft($slider.scrollLeft() - 12);
},1);
},
'mouseup': function(){
let $slider = $(this).parents('.slider-nav').prev('.mod_slider');
$slider.animate({
scrollLeft: $slider.scrollLeft() - 24
},200, 'swing');
clearInterval(frag_slider);
}
}, '.slider-nav-btn.prev');
// 進む
$bd.on({
'mousedown': function(){
let $slider = $(this).parents('.slider-nav').prev('.mod_slider');
frag_slider=setInterval(function(){
$slider.scrollLeft($slider.scrollLeft() + 12);
},1);
},
'mouseup': function(){
let $slider = $(this).parents('.slider-nav').prev('.mod_slider');
$slider.animate({
scrollLeft: $slider.scrollLeft() + 24
},200, 'swing');
clearInterval(frag_slider);
}
}, '.slider-nav-btn.next');
// スクロール同期
$('.mod_slider').scroll(function(){
let $slideWrap = $(this).parents('.mod_slider-wrap');
let $slide = $slideWrap.find('.mod_slider');
let $barBtn = $slideWrap.find('.slider-scrollbar-btn');
let disp_width = $slide.width();
// スクロールバー移動可能量(スライダー表示幅 - スライダー幅) / スクロール可能量(スライダー全幅 - スライダー表示幅)
let offset = $(this).scrollLeft() * (disp_width - $barBtn.width()) / ($slide.get(0).scrollWidth - disp_width);
$barBtn.css('transform', 'translateX(' + offset + 'px)');
});
// スクロールバードラッグ
$bd.on({
'mousedown': function(e){
tar = $(this);
frag_scroll = true;
scrollbar_x = (e.pageX - tar.offset().left) * 4;
tar.parents('.mod_slider-wrap').addClass('moveing');
}
}, '.slider-scrollbar-btn');
$bd.on('mousemove', function(e){
if(!frag_scroll) return;
let $slideWrap = tar.parents('.mod_slider-wrap');
let $slide = $slideWrap.find('.mod_slider');
let $bar = tar.parents('.slider-scrollbar');
let bar_left = $bar.offset().left;
let disp_width = $slide.width();
let scrollbar_track = disp_width - tar.width(); // スクロールバー移動可能量
let scroll_move = ((e.pageX - bar_left) * 4 / scrollbar_track * scrollbar_track) - scrollbar_x;
if (scroll_move < 0) {scroll_move = 0;}
else if (scroll_move > scrollbar_track * 2) {return;}
tar.css('transform', 'translateX(' + scroll_move + 'px)');
$slide.scrollLeft(((tar.offset().left - bar_left) / scrollbar_track * ($slide.get(0).scrollWidth - disp_width)));
});
$bd.on('mouseup', function(){
frag_scroll = false;
$('.mod_slider-wrap').removeClass('moveing');
});
// リストドラッグ
$.prototype.mousedragscrollable = function(){
let target;
$(this).each(function(i, e){
$(e).mousedown(function (event) {
event.preventDefault();
target = $(e);
$(e).data({
down: true,
move: false,
x: event.clientX,
y: event.clientY,
scrollleft: $(e).scrollLeft(),
scrolltop: $(e).scrollTop(),
});
return false;
});
$(e).click(function(event){
if($(e).data('move')){return false;}
});
});
$(document)
.mousemove(function(event){
if($(target).data('down')){
event.preventDefault();
let move_x = $(target).data('x') - event.clientX;
let move_y = $(target).data('y') - event.clientY;
if(move_x !== 0 || move_y !== 0){
$(target).data('move', true);
} else {
return;
}
$(target).scrollLeft($(target).data('scrollleft') + move_x);
$(target).scrollTop($(target).data('scrolltop') + move_y);
return false;
}
})
.mouseup(function(){
$(target).data('down', false);
return false;
});
};
$('.mod_slider[data-drag]').mousedragscrollable();
$win.load(function(){
sliderSet();
});
$win.on('orientationchange , resize', function(){
if (frag_resize !== false) {clearTimeout(frag_resize);}
frag_resize = setTimeout(function(){
sliderSet();
}, 300);
});
/* ed slider ===============*/
// confirm
//==============================
$bd.on('click', '[data-confirm]', function(e){
if(!confirm($(this).data('confirm'))){
e.stopImmediatePropagation();
return false;
}
});
/* ed confirm ===============*/
// copy
//==============================
$bd.on('click','.mod_copy',function(){
if($('#mod_copy-alert')[0]){$('#mod_copy-alert').remove();}
let $copyarea = $('<textarea></textarea>');
let copyTxt = $(this).data('copy');
if(copyTxt == undefined){copyTxt = $(this).text();}
let $copyalert = $('<div id="mod_copy-alert"><p class="mod_copy-alert-txt"><span class="mod_copy-alert-tar">[ '+copyTxt+' ]</span>クリップボードにコピーしました</p></div>');
$copyarea.text(copyTxt);
$bd.append($copyarea).append($copyalert);
$copyarea.select();
document.execCommand('copy');
$copyarea.remove();
$copyalert.fadeIn();
setTimeout(function(){
$copyalert.fadeOut().queue(function(){
this.remove();
});
},1000);
});
/* ed copy ===============*/
// drawer
//==============================
$bd.on('click','.mod_drawer-btn',function(){
let $posi = $(this).data('drawer_position');
let $type = $(this).data('drawer_type');
let $size = $(this).data('drawer_size');
let slide = '';
let overlay = '';
if($type == 'temporary'){
slide = '<div class="mod_drawer-slider-bar"><div class="mod_drawer-slider-bar-btn"></div></div>';
overlay = '<div class="overlay drawer"></div>';
}
if($size.match('xs|xm|xl')){
$bd.append('<section id="mod_drawer" class="'+$posi+' '+$type+' '+$size+'" style="display:none;" data-position="'+$posi+'" data-type="'+$type+'" data-size="'+$size+'">\
<div class="mod_drawer-sec">\
'+slide+'\
<button class="mod_drawer-close center ico-mui">keyboard_double_arrow_up</button>\
<div class="mod_drawer-set"></div>\
</div>\
'+overlay+'\
</section>');
} else {
let size = '';
if($posi == 'top' || $posi == 'bottom'){size = 'width:100%; height:'+$size+';'}
else if($posi == 'left' || $posi == 'right'){size = 'width:'+$size+'; height:100%; top: 0;'}
$bd.append('<section id="mod_drawer" class="'+$posi+'" style="display:none;" data-position="'+$posi+'" data-type="'+$type+'" data-size="'+$size+'">\
<div class="mod_drawer-sec" style="'+size+'">\
<div class="mod_drawer-slider-bar"><div class="mod_drawer-slider-bar-btn"></div></div>\
<button class="mod_drawer-close center ico-mui">keyboard_double_arrow_up</button>\
<div class="mod_drawer-set"></div>\
</div>\
<div class="overlay drawer"></div>\
</section>');
}
$rt.toggleClass('drawerDisp');
$('.overlay').fadeIn(200);
//スライドバー
$('.mod_drawer-set').scroll(function(){
let $wrap = $(this).parents('#mod_drawer');
let $slide = $(this);
let $barBtn = $wrap.find('.mod_drawer-slider-bar-btn');
let disp_height = $slide.height();
// スクロールバー移動可能量(スライダー表示幅 - スライダー幅) / スクロール可能量(スライダー全幅 - スライダー表示幅)
let offset = $(this).scrollTop() * (disp_height - $barBtn.height()) / ($slide.get(0).scrollHeight - disp_height);
$barBtn.css('transform', 'translateY(' + offset + 'px)');
});
});
function drawerOpen(obj){
let $drawer = $('#mod_drawer');
let $sec = $('.mod_drawer-sec');
let posi = $drawer.data('position');
let trans = 'transX';
if(posi == 'top' || posi == 'bottom'){trans = 'transY';}
$('.mod_drawer-set').append(obj);
$drawer.fadeIn(250);
$sec.addClass(trans);
if($('.mod_drawer-set').children().height() > $sec.height()){
$('.mod_drawer-slider-bar').show();
}
if($drawer.data('type') == 'persistent'){
let ws = $win.scrollTop();
$rt.addClass('drawer').css('transition','.25s');
let scale = $sec.height();
if(posi == 'top'){
$rt.css({
'height':'calc(100vh - '+scale+'px)',
'margin-top':scale
})
if(ws>scale){
$rt.css('transition','0s').scrollTop(ws+scale);
} else {
$rt.scrollTop(ws);
}
} else if(posi == 'bottom'){
$rt.css('height','calc(100vh - '+scale+'px)').scrollTop(ws);
} else if(posi == 'left'){
$rt.css('padding-left',$sec.width()).scrollTop(ws);
} else if(posi == 'right'){
$rt.css('width','calc(100% - '+$sec.width()+'px)').scrollTop(ws);
}
} else {
noscroll();
}
}
function drawerClose(){
$('.mod_drawer-sec').removeClass('transY transX');
$('.overlay').fadeOut(250);
let close = function(){
$('#mod_drawer').remove();
$rt.removeClass('drawer');
}
if(!$('.noscroll')[0]){
let rs = $rt.scrollTop();
$rt.removeAttr('style').toggleClass('drawerDisp');
setTimeout(function(){
close();
$('body,html').scrollTop(rs);
},300);
} else {
setTimeout(function(){
noscroll();
close();
},300);
}
}
$bd.on('click','.overlay.drawer ,.mod_drawer-close',function(){drawerClose();});
/* ed drawer ===============*/
// dropdown
//==============================
$('.mod_drop').each(function(){
$('li',this).addClass('mod_drop-li').attr('data-ripple','rgb(0 0 0 / .1)');
$(this).wrap('<div class="mod_dropOuter">');
});
$bd.on('click','[data-drop]',function(){
if($('.dropDisp')[0]){
dropClose();
return false;
}
noscroll();
$rt.addClass('dropDisp');
let t = $(this);
let td = t.data('drop');
let $tar = $('.mod_drop[data-drop='+td+']');
let $par = $tar.parent();
//下部・右部 空きスペース確認
let dropHeight = $par.innerHeight();
let winHeight = $win.height();
let offsetTop = t.offset().top;
let scroll = $win.scrollTop();
let ot = '';
if(winHeight < offsetTop-scroll+dropHeight+t.innerHeight()){
ot = offsetTop - dropHeight - 8;
} else {
ot = offsetTop + t.innerHeight();
}
let dropWidth = $par.width();
let winWidth = $win.width();
let offsetLeft = t.offset().left;
let leftPosi = offsetLeft+dropWidth;
let ol = '';
if(winWidth < leftPosi){
ol = offsetLeft - (leftPosi - winWidth + 16);
} else {
ol = offsetLeft;
}
$par.css({
'top':ot,
'left':ol,
}).fadeIn(130);
$tar.css('transform','scale(1)');
});
$bd.on('click','.mod_drop-li',function(){
let href = $(this).attr('href');
if(href != undefined){
if($(this).attr('target') == '_blank'){
window.open(href, '_blank')
} else {
window.location.href = href;
}
}
dropClose();
});
function dropClose(){
if($('.dropDisp')[0]){
$('.mod_dropOuter').fadeOut(130);
$('.mod_drop').removeAttr('style');
noscroll();
$rt.removeClass('dropDisp');
}
}
$bd.on('click','.dropDisp',function(){dropClose();});
/* ed dropdown ===============*/
// imgGzoom
//==============================
//初期設定
$('.mod_imgGzoom img').each(function(){
$(this).addClass('mod_imgGzoom-img');
let wrapOBJ = '<span class="mod_imgGzoom-wrap ico-aft"></span>';
if($(this).siblings('img')[0] || $(this).parents('.mod_imgGzoom').find('img').length > 1){
//複数画像
wrapOBJ = '<span class="mod_imgGzoom-wrap list ico-aft"></span>';
}
if(!$(this).parents('.mod_imgGzoom-wrap')[0]){
$(this).wrap(wrapOBJ);
}
});
//ズームアクション
$bd.on('click','.mod_imgGzoom-wrap',function(){
let $Mod = $(this).parents('.mod_imgGzoom');
let imgleng = $Mod.find('.mod_imgGzoom-wrap').length;
let $i = $Mod.find('.mod_imgGzoom-wrap').index($(this));
let $img = $(this).find('.mod_imgGzoom-img');
let src = $img.attr('src');
if($img.data('suffix') != ''){
let suffix = 'zoom';
if($img.data('suffix') != undefined){
suffix = $img.data('suffix');
}
src = src.replace('.','_'+suffix +'.');
}
let obj = '<div class="mod_imgGzooms"><figure class="mod_imgGzooms-imgset-fig"><img class="mod_imgGzooms-imgset-img" src="' + src + '" alt=""></figure></div>';
if($(this).hasClass('list')){
//複数画像
obj = '<div class="mod_imgGzooms"><ul class="mod_imgGzooms-imgset"></ul><div class="mod_imgGzooms-pager"><ul class="mod_imgGzooms-pager-dot"></ul><button class="mod_imgGzooms-pager-btn prev"><i class="ico-mui"></i></button><button class="mod_imgGzooms-pager-btn next"><i class="ico-mui"></i></button></div></div>';
modalOpen(obj,'swip-zoom','zoom','','hug');
//画像・ドット作成
for(var i = 0; i < imgleng; i++) {
let t = $Mod.find('.mod_imgGzoom-img').eq(i);
let src = t.attr('src');
if(t.data('suffix') != ''){
let suffix = 'zoom';
if(t.data('suffix') != undefined){
suffix = t.data('suffix');
}
src = src.replace('.','_'+suffix +'.');
}
$('.mod_imgGzooms-imgset').append('<li class="mod_imgGzooms-imgset-li"><figure class="mod_imgGzooms-imgset-fig"><img class="mod_imgGzooms-imgset-img" src="' + src + '" alt=""></figure></li>');
$('.mod_imgGzooms-pager-dot').append('<li class="mod_imgGzooms-pager-dot-li"><button class="mod_imgGzooms-pager-dot-btn"></button></li>');
}
$('.mod_imgGzooms-imgset-li').css('transform',translateX($i));
$('.mod_imgGzooms-pager-dot-li').eq($i).addClass('act');
} else {
//単体画像
modalOpen(obj,'swip','zoom','','fill');
}
});
//ページングアクション
$bd.on('click','.mod_imgGzooms-pager-btn',function(){
let $li = $('.mod_imgGzooms-imgset-li');
let $dot = $('.mod_imgGzooms-pager-dot-li');
let full = $dot.length;
let now = $('.mod_imgGzooms-pager-dot-li.act').index() + 1;
$('.mod_imgGzooms-pager-dot-li.act').removeClass('act');
if($(this).hasClass('next')){
//次へ
if(full == now){
//最後なら
$dot.eq(0).addClass('act');
$li.css('transform','translateX(0)');
} else {
$dot.eq(now).addClass('act');
$li.css('transform',translateX(now));
}
} else if($(this).hasClass('prev')){
//前へ
if(now == 1){
//最初なら
$dot.last().addClass('act');
$li.css('transform',translateX(full - 1));
} else {
let Num = Number(now - 2);
$dot.eq(Num).addClass('act');
$li.css('transform',translateX(Num));
}
}
});
//ドットアクション
$bd.on('click','.mod_imgGzooms-pager-dot-btn',function(){
let $papa = $(this).parent();
let $i = $papa.index();
$('.mod_imgGzooms-pager-dot-li.act').removeClass('act');
$papa.addClass('act');
$('.mod_imgGzooms-imgset-li').css('transform',translateX($i));
});
//移動量計算
function translateX(num){
return 'translateX(calc(-' + num + '00% - ' + 24 * num + 'px))';
}
//スワイプ
$bd.on({
'touchstart': function(e){
this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
this.touchedTree = true;
this.touched = false;
},
'touchmove': function(e){
if(!this.touchedTree){return;}
this.pageXm = (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.pageYm = (isTouch ? event.changedTouches[0].pageY : e.pageY);
if(this.pageXm != 0){
var act = $('.mod_imgGzooms-pager-dot-li.act').index();
//最初もしくは最後のアイテムの場合は動かさない
if(this.pageXm - this.pageX > 0 && act === 0 || this.pageXm - this.pageX < 0 && act + 1 == $('.mod_imgGzooms-pager-dot-li').length){
this.touchedTree = false;
return;
}
//移動量計算
if(act === 0){var X = 0;} else {var X = -(act * 100);}
let Y = this.pageXm - this.pageX;
let yc = Y + X;
if(Y > 100 || Y < -108 - (act * 8)){
return;
} else {
$('.mod_imgGzooms-imgset-li').css({
'transform':'translateX(' + yc + '%)',
'transition':'none'
});
}
nowTouch = true;
}
},
'touchend': function(e){
if(!this.touchedTree){return;}
this.touchedTree = false;
this.left = this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.top = this.pageY - (isTouch ? event.changedTouches[0].pageY : e.pageY);
let act = $('.mod_imgGzooms-pager-dot-li.act').index();
if(this.top == 0 && this.left == 0){
return;
} else if(this.left > 30){
let Xm = act + 1;
if(act == 0){Xm = 1;}
$('.mod_imgGzooms-imgset-li').css('transform',translateX(Xm));
$('.mod_imgGzooms-pager-dot-li.act').removeClass('act');
$('.mod_imgGzooms-pager-dot-li').eq(act + 1).addClass('act');
nowTouch = false;
} else if(this.left < -30){
let Xm = act - 1;
if(act == 0){Xm = 100;}
$('.mod_imgGzooms-imgset-li').css('transform',translateX(Xm));
$('.mod_imgGzooms-pager-dot-li.act').removeClass('act');
$('.mod_imgGzooms-pager-dot-li').eq(act - 1).addClass('act');
nowTouch = false;
} else {
let tX = '-' + act + '00%';
if(act == 0){tX = 0;}
$('.mod_imgGzooms-imgset-li').css({'transform':translateX(tX)});
}
$('.mod_imgGzooms-imgset-li').css({'transition':'0.2s'});
}
}, '.mod_modal-sec.swip-zoom');
/* ed imgGzoom ===============*/
// imgZoom
//==============================
//初期設定
$('.mod_imgZoom').each(function(){
$(this).wrap('<span class="mod_imgZoom-wrap ico-aft"></span>');
});
$bd.on('click','.mod_imgZoom-wrap',function(){
let $img = $('.mod_imgZoom',this);
//閉じる
if($('.zooming')[0]){
zoomClose();
return false;
}
//計算
let w = $img.width();
let h = $img.height();
let ww = $win.width();
let wh = $win.height();
let sw = (ww - 80) / w;
let sh = (wh - 80) / h;
let scale = sw;
if(h*sw > wh){scale = sh;}
let ol = $(this).offset().left;
let ml = (ww-(w*scale))/2;
let translateX = (ol/scale)-(ml/scale);
let ot = $(this).offset().top;
let mt = (wh-(h*scale))/2;
let translateY = (ot/scale)-(mt/scale)-($win.scrollTop()/scale);
//下処理
$img.width(w).height(h);
if($img.data('suffix') != ''){
let suffix = 'zoom';
if($img.data('suffix') != undefined){
suffix = $img.data('suffix');
}
$img.attr('src',$img.attr('src').replace('.','_'+suffix +'.'));
}
$bd.append('<div class="overlay zoom"></div>');
noscroll();
$('.overlay').fadeIn(200);
$(this).css({
'width':w,
'height':h
}).addClass('zooming');
//拡大
$img.css('transform','scale('+scale+') translate('+-(translateX)+'px, '+-(translateY)+'px)');
});
$bd.on('click','.overlay.zoom',function(){zoomClose();});
function zoomClose(){
$('.overlay').remove();
noscroll();
let $img = $('.zooming').children();
if($img.data('suffix') != ''){
let suffix = 'zoom';
if($img.data('suffix') != undefined){
suffix = $img.data('suffix');
}
$img.attr('src',$img.attr('src').replace('_'+suffix +'.','.'))
}
$img.removeAttr('style').css('z-index','1001');
$('.zooming').removeAttr('style').removeClass('zooming');
setTimeout(function(){
$img.removeAttr('style');
},200);
}
/* ed imgZoom ===============*/
// modal
//==============================
var modal_frag = false;
//モーダル設置
function modalOpen(obj,swip,cl,act,size){
$bd.append('<div id="mod_modal"><section class="mod_modal-sec"><ul class="mod_modal-action"><li class="mod_modal-action-li"><button class="mod_modal-action-btn close"><i class="ico-mui"></i></button></li></ul><div class="mod_modal-body"></div></section><div class="mod_modal-bg"></div></div>');
$('.mod_modal-body').append(obj);
let $mod_modal = $('#mod_modal');
let $mod_modalSec = $('.mod_modal-sec');
let $mod_modalBody = $('.mod_modal-body');
//スワイプタイプ追加
if(swip !== ''){$mod_modalSec.addClass(swip);}
//bodyにclass追加
if(cl !== ''){
$bd.addClass(cl);
$rt.data('dellClass', cl);
}
//アクションボタン追加
if(act !== ''){
for(var i = 0; i < act.length; i++) {
$('.mod_modal-action').prepend('<li class="mod_modal-action-li"><button class="mod_modal-action-btn ' + act[i] + '"><i class="ico-mui"></i></button></li>');
}
}
//サイズ設定
if(size === 'fill' || size === 'hug'){
$mod_modal.addClass(size);
} else if($.isNumeric(size)){
$mod_modalSec.width(size);
}
//実行・表示
if(modal_frag != true){noscroll();}
$mod_modal.fadeIn(200).css('display','flex');
//スクロールバー追加
let secHeight = $mod_modalSec.height()
let objHeight = $mod_modalBody.children().height();
if(objHeight > secHeight){
$mod_modal.addClass('scrl');
if($win.width() > 769){
let scrollerHeight = parseInt(secHeight * secHeight / objHeight);
$mod_modal.addClass('scrl');
$mod_modalBody.wrap('<div class="mod_modal-scroller"></div>');
$mod_modalSec.append('<div class="mod_modal-scrollbar"><div class="mod_modal-scrollbar-btn"></div></div>');
$('.mod_modal-scrollbar-btn').height(scrollerHeight + 'px');
let scrollerTrack = secHeight - scrollerHeight;
$('.mod_modal-scroller').on('scroll', function(){
let offset = $(this).scrollTop() * scrollerTrack / (objHeight - secHeight);
$('.mod_modal-scrollbar-btn').css('transform','translateY(' + offset + 'px)');
});
}
};
}
//クローズトリガー
$bd.on('click','.mod_modal-action-btn.close , .mod_modal-bg',function(){modalClose();});
//クローズアクション
function modalClose(){
$('#mod_modal').fadeOut();
if(modal_frag != true){noscroll();}
modal_frag = true;
setTimeout(function(){
$('#mod_modal').remove();
if($rt.data('dellClass') !== ''){
$bd.removeClass($rt.data('dellClass'));
}
modal_frag = false;
},600);
}
//スワイプ 縦横
var isTouch = ('ontouchstart' in window);
$bd.on({
'touchstart': function(e){
if($('#mod_modal.scrl')[0]){return;}
this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
this.touched = true;
},
'touchmove': function(e){
if(!this.touched){return;}
this.pageXm = (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.pageYm = (isTouch ? event.changedTouches[0].pageY : e.pageY);
if(this.pageYm != 0){
var yc = this.pageYm - this.pageY + 1;
var yco = yc / 160;
var ycod = Math.sqrt(Math.pow(yco,2));
var opc = 1 - ycod;
$('.mod_modal-sec').css({
'transform':'translateY(' + yc + 'px)',
'opacity':opc,
'transition':'none'
});
nowTouch = true;
}
},
'touchend': function(e){
if(!this.touched){return;}
this.touched = false;
this.left = this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.top = this.pageY - (isTouch ? event.changedTouches[0].pageY : e.pageY);
if(this.top == 0 && this.left == 0){
modalClose();
return false;
} else if(this.top > 60){
$('.mod_modal-sec').css('transform','translateY(-150%)');
modalClose();
nowTouch = false;
} else if(this.top < -60){
$('.mod_modal-sec').css('transform','translateY(150%)');
modalClose();
nowTouch = false;
} else {
$('.mod_modal-sec').css({
'transform':'translateY(0)',
'opacity':'1',
'transition':'0.1s'
});
}
}
}, '.mod_modal-sec.swip');
/* ed modal ===============*/
// sortAsc
//==============================
function sorts(tar,order){
if(!$('mod_sortAsc-li')[0]){
$('.mod_sortAsc').each(function(){
$(this).children().addClass('mod_sortAsc-li');
});
}
let $sortLi = $(tar).children('.mod_sortAsc-li');
let Adata = '';
let Bdata = '';
$(tar).html(
$sortLi.sort(function(a,b){
if($sortLi.data('sort') === undefined || $sortLi.data('sort') === ''){
//data属性なし
Adata = $(a).text();
Bdata = $(b).text();
} else {
//data属性あり
Adata = $(a).data('sort');
Bdata = $(b).data('sort');
}
if($.isNumeric(Adata)){ //数字
if(order === 'big'){
return Number(Bdata) - Number(Adata); //大きい順
} else if(order === 'small'){
return Number(Adata) - Number(Bdata); //小さい順
}
} else { //文字列
if(order === 'big'){
if(Adata < Bdata){return 1;} //逆順
} else if(order === 'small'){
if(Adata > Bdata){return 1;} //正順
}
}
})
);
}
/* ed sortAsc ===============*/
// sortManual
//==============================
$('.mod_sortManual').each(function(){
$('li',this).addClass('mod_sortManual-li').append('<i class="mod_sortManual-handle ico-mui"></i>');
});
if($('.mod_sortManual')[0]){
$('.mod_sortManual').sortable({
tolerance: 'intersect', //入れ替わる重なり具合
containment: '.mod_sortManual', //ドラッグ可能範囲
axis: 'y', //移動方向
items: '.mod_sortManual-li', //並び替え機能対象
handle: '.mod_sortManual-handle', //ドラッグ開始ハンドル
opacity: '0.8', //ドラッグ要素の透過
revert: '300', //アニメーション
stop: function(event, ui){
//移動後の処理
}
});
}
/* ed sortManual ===============*/
// sortRandom
//==============================
function mod_sortRandom(tars,ele){
let Arr = [];
let set1 = '';
let set2 = '';
let tar = $(tars);
let Num = tar.find(ele).length;
tar.find(ele).each(function(){
Arr.push($(this).html());
});
Arr.sort(function(){
return Math.random() - Math.random();
});
tar.empty();
if(ele.match(/\./)){
let cn = ele.split('.');
set1 = cn[0] + ' class="' + cn[1] + '"';
set2 = cn[0];
} else {
set1 = ele;
set2 = ele;
}
for(var i = 0; i < Num; i++){
tar.append('<'+set1+'>' + Arr[i] + '</'+set2+'>');
}
}
/* ed sortRandom ===============*/
// tabDef
//==============================
//初期設定
$('.mod_tab').each(function(){
//関連付け
let name = $(this).data('name');
let search = $(this).data('search');
let $btn_papa = $(this).children('.mod_tab-list');
let $btn = $btn_papa.children('.mod_tab-btn');
let $itm_papa = $(this).children('.mod_tab-sec');
let $itm = $itm_papa.children('.mod_tab-item');
$btn.each(function(i){
$(this).data('name',name);
});
if(search == 'index'){
//index
$btn.each(function(i){
$(this).data('tar',i);
});
$itm.each(function(i){
$(this).addClass('tar_'+i);
});
} else if(search == 'id'){
//id
$itm.each(function(){
$(this).addClass('tar_'+$(this).attr('id'));
});
} else if(search == 'name'){
//name
$itm.each(function(){
$(this).addClass('tar_'+$(this).attr('name'));
});
}
//初期表示
if($btn_papa.children('.mod_tab-btn.act')[0]){
let i = $btn_papa.children('.mod_tab-btn.act').index();
$itm.eq(i).addClass('act');
} else {
let $t = $btn.eq(0);
$t.addClass('act');
$itm_papa.children('.tar_'+$t.data('tar')).addClass('act');
}
});
$('.mod_tab-btn').click(function(){
if($(this).hasClass('act')){return false;}
let name = $(this).data('name');
let tar = $(this).data('tar');
let $mod = $('.mod_tab[data-name='+name+']');
let $sec = $mod.children('.mod_tab-sec');
//ボタン切替
$(this).addClass('act').siblings().removeClass('act');
//表示切替
$sec.children('.mod_tab-item').fadeOut().removeClass('act');
$sec.children('.mod_tab-item.tar_'+tar).hide().addClass('act').fadeIn();
});
/* ed tabDef ===============*/
// tabAnime
//==============================
var isTouch = ('ontouchstart' in window);
$('.mod_tabAnime').each(function(){
let $list = $('.mod_tabAnime-list',this);
let $btn = $list.children();
let $sec = $('.mod_tabAnime-sec',this);
let $itm = $sec.children();
$btn.addClass('mod_tabAnime-btn').wrapInner('<div class="mod_tabAnime-btn-in"></div>');
$itm.addClass('mod_tabAnime-item');
$sec.show();
//初期表示
if($list.children('.act')[0]){
let i = $list.children('.mod_tabAnime-btn.act').index();
let mgn = 0;
if(i != 0){mgn = 16*i}
$itm.css('transform','translateX(calc(-'+ i +'00% - '+mgn+'px))');
$sec.height($('.mod_tabAnime-item').eq(i).children().height());
} else {
let $t = $btn.eq(0);
$t.addClass('act');
}
});
$bd.on('click','.mod_tabAnime-btn-in',function(){
if($(this).hasClass('act')){return false;}
let $btn = $(this).parent();
let $Mod = $(this).parents('.mod_tabAnime');
let $sec = $Mod.find('.mod_tabAnime-sec');
let $itm = $Mod.find('.mod_tabAnime-item');
let i = $btn.index();
let mgn = 0;
if(i != 0){mgn = 16*i}
$btn.addClass('act').siblings().removeClass('act');
$itm.css('transform','translateX(calc(-'+ i +'00% - '+mgn+'px))');
$sec.height($itm.eq(i).children().height());
});
$('.mod_tabAnime-sec').bind({
'touchstart': function(e){
this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
this.touchedTabSec = true;
this.touched = false;
},
'touchmove': function(e){
if(!this.touchedTabSec){return;}
this.pageXm = (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.pageYm = (isTouch ? event.changedTouches[0].pageY : e.pageY);
if(this.pageXm != 0){
let i = $('.mod_tabAnime-btn.act').index();
if(this.pageXm - this.pageX > 0 && i == 0 || this.pageXm - this.pageX < 0 && i + 1 == $('.mod_tabAnime-btn').length){
this.touchedTabSec = false;
return;
}
if(i == 0){var X = 0;}
else {var X = -(i * 100);}
let yc = this.pageXm - this.pageX + 1 + X;
$('.mod_tabAnime-item').css({
'transform':'translateX(' + yc + '%)',
'transition':'0.1s'
});
nowTouch = true;
}
},
'touchend': function(e){
if(!this.touchedTabSec){return;}
this.touchedTabSec = false;
this.left = this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.top = this.pageY - (isTouch ? event.changedTouches[0].pageY : e.pageY);
if(this.top == 0 && this.left == 0){return;}
let $btn = $('.mod_tabAnime-btn');
let $act = $('.mod_tabAnime-btn.act');
let $itm = $('.mod_tabAnime-item');
let i = $act.index();
let mgn = 16;
let Xm = 100;
if(this.left > 24){// NEXT Move
if(i != 0){
Xm = i + 1 + '00';
mgn = 16 * (i + 1);
}
$itm.css('transform','translateX(calc(-' + Xm + '% - '+mgn+'px))');
$act.removeClass('act');
$btn.eq(i + 1).addClass('act');
$('.mod_tabAnime-sec').height($itm.eq(i + 1).children().height());
nowTouch = false;
} else if(this.left < -24){// PREV Move
if(i != 0){
Xm = i - 1 + '00';
mgn = 16 * (i - 1);
}
$itm.css('transform','translateX(calc(-' + Xm + '% - '+mgn+'px))');
$act.removeClass('act');
$btn.eq(i - 1).addClass('act');
$('.mod_tabAnime-sec').height($itm.eq(i - 1).children().height());
nowTouch = false;
} else {// BACK Move
let tX = 0;
if(i != 0){tX = '-' + i + '00%';}
$itm.css({
'transform':'translateX(' + tX + ')',
'transition':'0.1s'
});
}
}
});
/* ed tabAnime ===============*/
// tooltip
//==============================
$bd.on({
'mouseover': function(){tooltip_disp($(this),$(this).data('tip'));},
'mouseout': function(){tooltip_remove();}
}, '[data-tip]');
$bd.on('click','[data-tip_click]',function(){
tooltip_disp($(this),$(this).data('tip_click'));
$rt.addClass('tooltip');
});
$bd.on('click','.tooltip',function(){
tooltip_remove();
$rt.removeClass('tooltip');
});
function tooltip_disp(me,obj){
$bd.append('<div class="mod_tooltip-obj">' + obj + '</div>');
let $tip = $('.mod_tooltip-obj');
let tipHeight = $tip.innerHeight();
let offsetTop = me.offset().top;
let offsetLeft = me.offset().left;
let t = '';
let tb = '';
let l = '';
//上部空きスペース確認
if(offsetTop < tipHeight + 8){
t = offsetTop + me.innerHeight() + 8;
tb = 'bottom';
} else {
t = offsetTop - (tipHeight + me.innerHeight() - 10);
tb = 'top';
}
//左右空きスペース確認
if(offsetLeft < $tip.innerWidth() / 2) {
l = 8;
$bd.append('<style class="mod_tooltip-style">.mod_tooltip-obj::after {left: ' + (offsetLeft + (me.innerWidth() / 2) - 8 - 3) + 'px; right: auto;}</style>');
} else {
l = offsetLeft - ($tip.innerWidth() / 2) + (me.innerWidth() / 2);
}
$tip.addClass(tb).css({'top':t + 'px','left':l + 'px'}).fadeIn(200);
}
function tooltip_remove(){
$('.mod_tooltip-obj , .mod_tooltip-style').remove();
}
/* ed tooltip ===============*/
//LazyLoad
//-----------------------------------------
function LazyLoad(wst){
$('img[lz] , video[lz]').each(function(){
let lz = $(this).attr('lz');
if(wst + $win.height() > $(this).offset().top - 200){
$(this).attr('src',lz).removeAttr('lz');
$(this).on('load', function(){$(this).removeClass('lz');});
}
if(lz != undefined){$(this).addClass('lz');}
});
}
$win.load(function(){
LazyLoad($win.scrollTop());
});
$win.sc