/** * jquery.cnt.accordion.js * * @typedef {function} $.fn.customaccordion * @version 3.3.0 * @date 2014-04-07 * * 【2017-02-23 update】 * アニメーション調整 * * 【2017-06-23 update】 * アクセシビリティ対応追加 * * 【2018-02-26 update】 * イベント登録の重複回避&namespace追加 * * 【2018-03-27 update】 * pritter実行、不要変数削除 * * 【2018-06-07 update】 * esdocに合わせてコメント修正 * * 【2018-09-25 update】 * beforeinit&endinit追加 * * @desc __アコーディオン(jqueryプラグイン)__ * * togglecontentにdisplay: noneが指定されているとデフォルトで閉じた状態、 * そうでなければデフォルトで開いた状態になる * * @example * //トリガーのセレクタを指定 * $('[data-js-accordion-trigger]').customaccordion({ * togglecontent: function() { * //thisはトリガーのエレメント * return $(this).next('[data-js-accordion-content]'); * }, * duration: 'normal', * easing: 'swing', * triggerclass: { * opened: 'is-open', * closed: 'is-close' * }, * toggletriggertxt: { * opened: '閉じる', * closed: '開く' * }, * defaultstatus: 'closed', * accessibilityflag: true, * beforeinit: null, * endinit: null, * beforeopen: null, * endopen: null, * beforeclose: null, * endclose: function() { * alert('endclose'); * } * }); * * @property {object} options - プラグインの引数 * @property {object|function} options.togglecontent - 開閉するコンテンツのjqueryオブジェクト、またはそれを返すfunction * @property {number|string} options.duration='normal' - 'slow'、'normal'、'fast'、もしくは完了までの時間をミリ秒単位で指定 * @property {string} options.easing='swing' - 切り替えアニメーションのeasing設定('swing' or 'linear') * @property {object} options.triggerclass - トリガーに付与するクラス名を格納したオブジェクト * @property {string} options.triggerclass.opened='is-open' - トリガーに付与するopen時のクラス名 * @property {string} options.triggerclass.closed='is-close' - トリガーに付与するclose時のクラス名 * @property {?object} options.toggletriggertxt=null - トリガーのテキストを格納したオブジェクト * @property {string} options.toggletriggertxt.opened - open時のトリガーテキスト * @property {string} options.toggletriggertxt.closed - close時のトリガーテキスト * @property {string} options.defaultstatus='' - デフォルトの開閉状態を指定('' or 'closed') * @property {boolean} options.accessibilityflag=false - アクセシビリティ対応するか否か * @property {?function} options.beforeinit=null - 初期化前の処理 * @property {?function} options.endinit=null - 初期後前の処理 * @property {?function} options.beforeopen=null - 開く前の処理 * @property {?function} options.endopen=null - 開いた後の処理 * @property {?function} options.beforeclose=null - 閉じる前の処理 * @property {?function} options.endclose=null - 閉じた後の処理 */ (function($, undefined) { $.fn.customaccordion = function(options) { if (!this || this.length < 1) return; options = $.extend({}, $.fn.customaccordion.defaults, options); var togglecontent = options.togglecontent; var tiriggerclass = options.triggerclass; var toggletriggertxt = options.toggletriggertxt; var defaultstatus = options.defaultstatus; var beforeinit = options.beforeinit; var endinit = options.endinit; //toggleclass用に連結 var triggerclasstxt = tiriggerclass.opened + ' ' + tiriggerclass.closed; return this.each(function() { //切り替えるクラスをひとまず外す var $trigger = $(this).removeclass(triggerclasstxt); if ($.isfunction(beforeinit)) beforeinit.apply(this, [options]); //togglecontentがfunctionであれば実行してjqueryオブジェクトを取得(そうでなければそのまま) var $togglecontent = $.isfunction(togglecontent) ? togglecontent.apply($trigger, [options]) : togglecontent; //コンテンツの状態によって初期化 if ($togglecontent.is(':hidden') || defaultstatus === 'closed') { $trigger.addclass(tiriggerclass.closed); if (toggletriggertxt) $trigger.text(toggletriggertxt.closed); $togglecontent.hide().data('status', 'closed'); //アクセシビリティ対応 if (options.accessibilityflag) { $trigger.attr('aria-expanded', 'false'); $togglecontent.attr('aria-hidden', 'true'); } } else { $trigger.addclass(tiriggerclass.opened); if (toggletriggertxt) $trigger.text(toggletriggertxt.opened); $togglecontent.show().data('status', 'opened'); //アクセシビリティ対応 if (options.accessibilityflag) { $trigger.attr('aria-expanded', 'true'); $togglecontent.attr('aria-hidden', 'false'); } } //クリックアクション $trigger.off('click.cnt-accordion'); $trigger.on('click.cnt-accordion', function(e) { e.preventdefault(); var $this = $(this); var isopened = $this.hasclass(tiriggerclass.opened); //コンテンツの切り替え togglecontentsarea( isopened ? 'close' : 'open', $togglecontent, options, $this ); //return false; }); if ($.isfunction(endinit)) endinit.apply(this, [options]); }); }; /** * @typedef {function} $.fn.customaccordionmanual * * @desc {@link $.fn.customaccordion}の拡張 * * クリックアクションではなく他のアクションから呼び出したい場合に使用 * * {@link $.fn.customaccordion}と異なり、トグルするコンテンツに対して実行する * * 引数のoptionは基本的に{@link $.fn.customaccordion}と同じだが、トリガーが存在しないのでトリガーに関するoptionは指定しても無効 * * * @example * //トグルするコンテンツのセレクタを指定 * $('[data-js-accordion-content]').customaccordionmanual('close'); * * @property {string} status - 開閉状態を指定('close' or 'open') * @property {object} options - プラグインの引数 */ $.fn.customaccordionmanual = function(status, options) { if (!this || this.length < 1) return; options = $.extend({}, $.fn.customaccordion.defaults, options); return this.each(function() { togglecontentsarea(status, $(this), options); }); }; /** * togglecontentsarea():コンテンツ切り替え * @param {string} status 開閉状態を指定('close' or 'open') * @param {object} $togglecontent 対象の開閉コンテンツ要素 * @param {object} options オプション * @param {object} $trigger 対象のトリガー要素 */ function togglecontentsarea(status, $togglecontent, options, $trigger) { var duration = options.duration; var easing = options.easing; var beforeopen = options.beforeopen; var endopen = options.endopen; var beforeclose = options.beforeclose; var endclose = options.endclose; var open = status === 'open'; if (open) { if ($.isfunction(beforeopen)) beforeopen.apply($trigger, [options]); } else { if ($.isfunction(beforeclose)) beforeclose.apply($trigger, [options]); } if ($trigger) { var tiriggerclass = options.triggerclass; var triggerclassopend = tiriggerclass.opened; var triggerclassclosed = tiriggerclass.closed; var toggletriggertxt = options.toggletriggertxt; if (open) { $trigger.removeclass(triggerclassclosed).addclass(triggerclassopend); } else { $trigger.removeclass(triggerclassopend).addclass(triggerclassclosed); } if (toggletriggertxt) { //トリガーのテキスト切り替え $trigger.html(toggletriggertxt[open ? 'opened' : 'closed']); } } if (duration === 0) { if (open) { $togglecontent.show(); if ($.isfunction(endopen)) endopen.apply($trigger, [options]); } else { $togglecontent.hide(); if ($.isfunction(endclose)) endclose.apply($trigger, [options]); } } else { if ( (open && $togglecontent.data('status') === 'opened') || (!open && $togglecontent.data('status') === 'closed') ) { return; } if (open) { $togglecontent .stop(true, false) .slidedown(duration, easing, function() { if ($.isfunction(endopen)) endopen.apply($trigger, [options]); }); } else { $togglecontent.stop(true, false).slideup(duration, easing, function() { if ($.isfunction(endclose)) endclose.apply($trigger, [options]); }); } } $togglecontent.data('status', open ? 'opened' : 'closed'); //アクセシビリティ対応 if (options.accessibilityflag) { if (open) { if ($trigger) $trigger.attr('aria-expanded', 'true'); $togglecontent.attr('aria-hidden', 'false'); } else { if ($trigger) $trigger.attr('aria-expanded', 'false'); $togglecontent.attr('aria-hidden', 'true'); } } } /** * デフォルトオプション */ $.fn.customaccordion.defaults = { togglecontent: '', duration: 'normal', easing: 'swing', triggerclass: { opened: 'is-open', closed: 'is-close' }, toggletriggertxt: null, defaultstatus: '', accessibilityflag: false, beforeinit: null, endinit: null, beforeopen: null, endopen: null, beforeclose: null, endclose: null }; })(jquery); ;/** * jquery.cnt.localscroll.js * * @typedef {function} $.fn.localsmoothscroll * @version 1.1.0 * @date 2016-03-25 * * 【2018-03-26 update】 * href="#"は拾わない処理を追加 * * 【2018-03-27 update】 * pritter実行、不要変数削除 * * 【2018-06-07 update】 * esdocに合わせてコメント修正 * * @desc __ローカルスクロール(jqueryプラグイン)__ * * @example * //スクロールするトリガーセレクタを指定 * $(data-js-localscroll).find('a[href^="#"]').localsmoothscroll({ * offsettop: 0, * duration: 800, * easing: 'swing', * endscroll: null * }); * * @property {object} options - プラグインの引数 * @property {number} options.offsettop=0 - 目的のエリアへスクロールする際に調整するトップのオフセット値 * @property {object|function} [options.offsetcontent] - 固定ヘッダーの高さなど、オフセット値を補正したいコンテンツがあれば、そのjqueryオブジェクト、またはそれを返すfunctionを指定 * @property {number|string} options.duration=800 - 'slow'、'normal'、'fast'、もしくは完了までの時間をミリ秒単位で指定 * @property {string} options.easing='swing' - スクロールアニメーションのeasing設定('swing' or 'linear') * @property {?function} options.endscroll=null - スクロール後の処理 */ (function($, undefined) { $.fn.localsmoothscroll = function(options) { if (!this || this.length < 1) return; options = $.extend({}, $.fn.localsmoothscroll.defaults, options); var offsettop = options.offsettop; var offsetcontent = options.offsetcontent; var duration = options.duration; var easing = options.easing; var endscroll = options.endscroll; var $scroller = $('html, body'); return this.each(function() { var $trigger = $(this); var $offsetcontent = $.isfunction(offsetcontent) ? offsetcontent.apply($trigger, [options]) : offsetcontent; //クリックイベント $trigger.on('click', function(e) { e.preventdefault(); var url = $trigger.attr('href'); var targetid = url.slice(url.indexof('#') + 1); if (targetid.length > 0) { var $targetblock = $('#' + targetid); if ($targetblock.length > 0) { var targetpos = $targetblock.offset().top; var scrollendflag = false; if (offsettop !== 0) targetpos -= offsettop; if ($offsetcontent.length > 0) targetpos -= $offsetcontent.height(); $scroller .stop() .animate({ scrolltop: targetpos }, duration, easing, function() { if ($.isfunction(endscroll) && !scrollendflag) { scrollendflag = true; endscroll.apply($trigger, [options]); } }); } } //return false; }); }); }; /** * デフォルトオプション */ $.fn.localsmoothscroll.defaults = { offsettop: 0, offsetcontent: '', duration: 800, easing: 'swing', endscroll: null }; })(jquery); ;/** * jquery.cnt.sameheight.js * * @typedef {function} $.fn.sameheight * @version 2.1.0 * @date 2015-09-07 * * 【2017-02-22 update】 * ネガティブマージン対応追加 * * 【2017-12-19 update】 * フォントサイズチェック機能のオプション化 * * 【2018-02-19 update】 * changecolumnの横幅取得方法変更 * * 【2018-03-27 update】 * pritter実行、不要変数削除 * * 【2018-06-07 update】 * esdocに合わせてコメント修正 * * @desc __高さ揃え(jqueryプラグイン)__ * * @example * //高さを揃えるアイテムのラッパーセレクタを指定 * $('[data-js-sameheight]').each(function() { * //高さを揃えるアイテムのセレクタを指定 * var $sameheightitems = $(this).find('[data-js-sameheight-item]'); * $sameheightitems.sameheight({ * columnchangeflag: true, * sameheightwrapper: function() { * return $(this).closest('[data-js-sameheight]'); * } * }); * }); * * @desc __高さ揃え(jqueryプラグイン)__ * * @property {object} options - プラグインの引数 * @property {number} options.column=0 - 設定した数ごとに高さを揃える * @property {boolean} options.columnchangeflag=false - レスポンシブページ対応などでカラム数が可変になるか否か(trueの場合はcolumnの値は無視され、自動計算される) * @property {object|function} options.sameheightwrapper - columnchangeflagがtrueの場合はcolumを計算するためにラッパー要素を必ず指定する * @property {boolean} options.fontsizecheckflag=false - フォントサイズの変更を常に監視するか否か * @property {number} options.interval=1000 - 文字サイズ変更のチェックインターバル(fontsizecheckflagがtrueの場合に有効) * @property {string} options.fontceckappendbox='body' - 文字の大きさを確認するためのエレメントの追加場所(fontsizecheckflagがtrueの場合に有効) * @property {?function} options.endsameheight=null - 高さ揃え後の処理 */ (function($, undefined) { $.fn.sameheight = function(options) { //存在しない場合は終了 if (!this) return this; //トリガ var $self = $(this); //オプション拡張 options = $.extend({}, $.fn.sameheight.defaults, options, true); //変数定義 ---------------------------------- var $jscheckfontsize; var column = options.column; var columnchangeflag = options.columnchangeflag; var sameheightwrapper = options.sameheightwrapper; var interval = options.interval; var endsameheight = options.endsameheight; var fontceckappendbox = options.fontceckappendbox; var timerid = null; var currentfontsize; var $sameheightwrapper = $.isfunction(sameheightwrapper) ? sameheightwrapper.apply($self, [options]) : sameheightwrapper; setboxsameheight($self, column, endsameheight); //フォントサイズの変更を監視する場合 if (options.fontsizecheckflag) { //文字の大きさを確認するためのエレメントを追加 if ($('#js_check_font_size').length) { $jscheckfontsize = $('#js_check_font_size'); } else { $jscheckfontsize = $( '' ); } //タイマー設定 //checkboxheight(); starttimer(); } //カラムが可変になる場合 if (columnchangeflag) { $(window).on('resize orientationchange', function() { changecolumn(); }); changecolumn(); } /** * isfontsizechanged():文字サイズ変更のチェック * @return {boolean} 文字サイズ変更ありなしフラグ */ function isfontsizechanged() { $jscheckfontsize.appendto(fontceckappendbox); var checkfontsize = $jscheckfontsize.outerheight(); $jscheckfontsize.remove(); if (currentfontsize === checkfontsize) { return false; } currentfontsize = checkfontsize; return true; } /** * checkboxheight():文字サイズ変更があれば高さ揃えを実行 */ function checkboxheight() { if (!isfontsizechanged()) { return false; } else { setboxsameheight($self, column, endsameheight); } } /** * changecolumn():レスポンシブによるカラム数変更を反映 */ function changecolumn() { var wrapperwidth = math.floor( parsefloat($sameheightwrapper.css('width')) ); var itemtotalwidth = 0; var marginleft = parsefloat($sameheightwrapper.css('margin-left')); var marginright = parsefloat($sameheightwrapper.css('margin-right')); column = 0; // ネガティブマージン対応 if (marginleft < 0) { wrapperwidth -= math.abs(marginleft); } if (marginright < 0) { wrapperwidth -= math.abs(marginright); } $self.each(function(index) { itemtotalwidth += math.floor(parsefloat($(this).css('width'))); if (itemtotalwidth <= wrapperwidth) { column = index + 1; } else { return false; } }); if (column === 0) column = $self.length; setboxsameheight($self, column, endsameheight); } /** * starttimer():文字サイズ変更チェックのインターバルを開始 */ function starttimer() { timerid = setinterval(checkboxheight, interval); } return this; }; /** * @typedef {function} $.fn.setsameheightmanual * * @desc {@link $.fn.sameheight}の拡張 * * 初期化後、任意のタイミングで高さ揃えを適用させたい場合に使用 * * 引数のoptionは{@link $.fn.sameheight}と同じ * * @example * //高さを揃えるアイテムのセレクタを指定 * $('[data-js-sameheight-item]).setsameheightmanual(); * * @property {object} options - プラグインの引数 */ $.fn.setsameheightmanual = function(options) { //存在しない場合は終了 if (!this) return this; //トリガ var $self = $(this); //オプション拡張 options = $.extend({}, $.fn.sameheight.defaults, options, true); var column = options.column; var endsameheight = options.endsameheight; setboxsameheight($self, column, endsameheight); return this; }; /** * setboxsameheight():高さ揃えの実行 * @param {object} $target 対象の高さ揃え適用要素 * @param {number} column カラム数 * @param {function} endsameheight 高さ揃え後の処理 */ function setboxsameheight($target, column, endsameheight) { var maxheight = 0; var heightlinearray = []; var n = 0; heightlinearray[n] = 0; $target.each(function(index) { var $this = $(this); $this.css('height', 'auto'); //var h = $this.height(); var verticalpadding = 0; if ($this.css('box-sizing') !== 'border-box') { verticalpadding += parsefloat($this.css('border-top-width')) + parsefloat($this.css('border-bottom-width')); verticalpadding += parsefloat($this.css('padding-top')) + parsefloat($this.css('padding-bottom')); } var h = $this.outerheight() - verticalpadding; //設定した数ごとに高さを揃える場合 if (column > 1) { heightlinearray[n] = math.max(h, heightlinearray[n]); if (index > 0 && (index + 1) % column === 0) { n++; heightlinearray[n] = 0; } } else if (column === 1) { // //全ての高さを揃える場合 } else { maxheight = math.max(h, maxheight); } }); //高さの最大値を要素に適用 if (column > 1) { var heightlinearraylength = heightlinearray.length; for (var i = 0; i < heightlinearraylength; i++) { for (var j = 0; j < column; j++) { $target.eq(i * column + j).css('height', heightlinearray[i] + 'px'); } } } else if (column === 1) { // } else { $target.css('height', maxheight + 'px'); } if ($.isfunction(endsameheight)) { var target = $target.get(0); endsameheight.apply(target, [$target]); } } /** * デフォルトオプション */ $.fn.sameheight.defaults = { column: 0, columnchangeflag: false, sameheightwrapper: '', fontsizecheckflag: false, interval: 1000, fontceckappendbox: 'body', endsameheight: null }; })(jquery); ;/** * jquery.cnt.vichanger.js * * @typedef {function} $.fn.vichanger * @version 3.3.1 * @date 2014-08-26 * *【2016-07-06 update】 * レスポンシブ対応追加 * *【2017-02-23 update】 * レスポンシブ対応調整 * *【2017-06-23 update】 * アクセシビリティ対応追加 * *【2017-06-28 update】 * 外部からリセットできる機能を追加 * *【2017-09-22 update】 * イベントリセット追加 * * 【2018-02-20 update】 * アクセシビリティの値をセットするタイミングを変更 * * 【2018-03-26 update】 * タッチデバイスでボタン操作後に自動切り替え機能を再開 * * 【2018-03-27 update】 * pritter実行、不要変数削除 * * 【2018-06-01 update】 * メインリストのカレントクラスをchangetypeがslide以外にも適用 * * 【2018-06-07 update】 * esdocに合わせてコメント修正 * * 【2019-02-01 update】 * $.fn.vichangerresetにremoveclass(data.options.mainactiveclassname)処理を追加 * * 【2019-09-13 update】 * startindexが0でない場合のprevの位置補正の不具合を解消 * * @desc __viのスライド切り替え(jqueryプラグイン)__ * * @example * //viエリアのラッパーセレクタを指定 * $('[data-js-vi]').vichanger({ * mainviewareaselector: function() { * return $(this).find('[data-js-vi_body]'); * }, * mainwrapperselector: function() { * return $(this).find('[data-js-vi_main]'); * }, * naviwrapperselector: function() { * return $(this).find('[data-js-vi_nav]'); * }, * prevbtnselector: function() { * return $(this).find('[data-js-vi_prev]'); * }, * nextbtnselector: function() { * return $(this).find('[data-js-vi_next]'); * }, * pausebtnselector: function() { * return $(this).find('[data-js-vi_pause]'); * }, * changetype: 'slide', * fadetye: '03', * naviactiveclassname: 'c-carousel_dot-active', * mainactiveclassname: 'is-active', * pauseactiveclassname: 'c-carousel_pause-active', * duration: 400, * easing: 'swing', * auto: 5000, * circular: true, * startindex: 0, * swipeflag: true, * visible: 3, * scroll: 1, * centermode: true, * liquidlayoutflag: false, * responsive: [ * { * mediaquerystring: 'screen and (min-width: 856px)', * liquidlayoutflag: false, * maxwidth: 855, * visible: 3, * scroll: 1 * }, * { * mediaquerystring: 'screen and (min-width: 768px) and (max-width: 855px)', * liquidlayoutflag: true, * maxwidth: 855, * visible: 3, * scroll: 1 * }, * { * mediaquerystring: 'screen and (max-width: 767px)', * liquidlayoutflag: true, * maxwidth: 767, * visible: 1, * scroll: 1 * } * ], * accessibilityflag: true, * beforeslidecontent: null, * endslidecontent: function() { * alert('endslidecontent'); * } * }); * * @property {object} options - プラグインの引数 * @property {object|function} options.mainviewareaselector - 表示エリアの横幅を取得するためのjqueryオブジェクト、またはそれを返すfunction(changetype: 'slide'の場合は必須) * @property {object|function} options.mainwrapperselector - メイン画像ラッパーのjqueryオブジェクト、またはそれを返すfunction * @property {object|function} [options.naviwrapperselector] - ナビゲーションラッパーのjqueryオブジェクト、またはそれを返すfunction * @property {object|function} [options.startbtnselector] - startボタンのjqueryオブジェクト、またはそれを返すfunction * @property {object|function} [options.prevbtnselector] - prevボタンのjqueryオブジェクト、またはそれを返すfunction * @property {object|function} [options.nextbtnselector] - nextボタンのjqueryオブジェクト、またはそれを返すfunction * @property {object|function} [options.pausebtnselector] - 一時停止ボタンのjqueryオブジェクト、またはそれを返すfunction * @property {object|function} [options.resetbtnselector] - resetボタンのjqueryオブジェクト、またはそれを返すfunction * @property {boolean} [options.resetbtnfirstviewflag=true] - resetボタンを最初から表示するか否か * @property {string} options.changetype='slide' - メイン画像切り替えタイプ('slide' or 'fade') * @property {string} options.fadetye='03' - フェードタイプ(changetypeがfadeの場合に有効)'01': クロスフェード、'02': カレントを非表示にしてからフェードイン、'03': カレントの上にかぶせてフェードイン、'04': カレントがフェードアウトしてからフェードイン * @property {string} [options.navitriggerevent='click'] - ナビゲーションのトリガイベント('click' or 'mouseover' or 'null') * @property {string} [options.naviactiveclassname='is-active'] - ナビゲーションのアクティブ状態を表すクラス名 * @property {?string} [options.mainactiveclassname=null] - メインリストのアクティブ状態を表すクラス名(nullの場合はクラス付与なし) * @property {string} [options.pauseactiveclassname='is-active'] - 一時停止ボタンのアクティブ状態を表すクラス名 * @property {string} [options.btndisabledclassname='is-disabled'] - next・prevボタン非活性化状態を表すクラス名(circularがfalseの場合に有効) * @property {number|string} options.duration='normal' - 'slow'、'normal'、'fast'、もしくは完了までの時間をミリ秒単位で指定 * @property {string} options.easing='swing' - 切り替えアニメーションのeasing設定('swing' or 'linear') * @property {number} options.auto=5000 - 自動切り替えまでの時間をミリ秒単位で指定。nullの場合は自動切り替えなし。arrayで個別設定も可能。 * @property {number} [options.startautotimercontroll=null] - 任意のタイミングで自動切り替えする際の時間をミリ秒単位で指定(nullの場合は無効) * @property {number} [options.resettimerbytriggerevent=null] - トリガイベントが発生したらタイマーをリセットして再開するまでの時間(nullの場合は無効) * @property {boolean} options.circular=true - 切り替えループ処理 * @property {number} options.startindex=0 - 初期表示画像インデックス * @property {boolean} options.hovertimerstop=true - ホバーアクションによるタイマー停止処理をするか否か * @property {boolean} options.swipeflag=true - スワイプ機能 * @property {number} options.visible=1 - スライドエリアに表示する数 * @property {number} options.scroll=1 - スライドする数 * @property {boolean} [options.centermode=false] - カレントをセンターに配置するか否か(circularがtrueの場合に有効) * @property {boolean} options.liquidlayoutflag=true - リキッドレイアウトにするか否か(メディアクエリ別に設定するoptions.responsiveがnullの場合に有効) * @property {object[]} [options.responsive=null] - メディアクエリ別の設定をarrayで指定 * @property {string} [options.responsive[].mediaquerystring] - window.matchmediaで判定するための条件式 * @property {boolean} [options.responsive[].liquidlayoutflag] - リキッドレイアウトにするか否か * @property {number} [options.responsive[].maxwidth] - 最大の横幅(liquidlayoutflagがfalseの場合に有効) * @property {number} [options.responsive[].visible] - スライドエリアに表示する数 * @property {number} [options.responsive[].scroll] - スライドする数 * @property {boolean} options.accessibilityflag=false - アクセシビリティ対応するか否か * @property {?function} options.beforeslidecontent=null - スライド前の処理 * @property {?function} options.endslidecontent=null - スライド後の処理 */ (function($, undefined) { var changerid = 'vichanger', uuid = 1, anims = []; // ---------- アクション ---------- // var utility = utility(); // ---------- モジュール ---------- // /** * ユーティリティー * @returns {{ * getistouch: getistouch, * setbtnaction: setbtnaction * }} * @constructor */ function utility() { var istouch = 'ontouchstart' in window; // コンストラクタ (function() {})(); return { getistouch: getistouch, setbtnaction: setbtnaction }; // ---------- パブリックメソッド ---------- // //タッチデバイス対応フラグ取得 function getistouch() { return istouch; } /** * setbtnaction():ボタン押下時のイベントを設定 * @param {object} $target イベント対象の要素 * @param {string} namespace 名前空間 * @param {function} callback コールバック関数 */ function setbtnaction($target, namespace, callback) { $target.on('click.' + namespace, function(e) { e.preventdefault(); callback.call($target); //return false; }); } } // ---------- プラグイン ---------- // /** * vichanger */ $.fn.vichanger = function(options) { //存在しない場合は終了 if (!this) return this; //オプション拡張 options = $.extend({}, $.fn.vichanger.defaults, options, true); return this.each(function() { // check pauseid if (!this[changerid]) this[changerid] = uuid++; //変数定義 ---------------------------------- var $wrapper = $(this); //メインの表示エリア var $mainviewarea; if ($.isfunction(options.mainviewareaselector)) { $mainviewarea = options.mainviewareaselector.apply(this); } else { $mainviewarea = $(options.mainviewareaselector); } //メイン画像エリア var $main; if ($.isfunction(options.mainwrapperselector)) { $main = options.mainwrapperselector.apply(this); } else { $main = $(options.mainwrapperselector); } var $mainoriginallist = $main.children(); var $mainlist = $main.children(); var $mainclone = $([]); //ナビゲーションエリア var $navi; if ($.isfunction(options.naviwrapperselector)) { $navi = options.naviwrapperselector.apply(this); } else { $navi = $(options.naviwrapperselector); } var $navilist = $navi.children(); //startボタン var $startbtn; if ($.isfunction(options.startbtnselector)) { $startbtn = options.startbtnselector.apply(this); } else { $startbtn = $(options.startbtnselector); } //prevボタン var $prevbtn; if ($.isfunction(options.prevbtnselector)) { $prevbtn = options.prevbtnselector.apply(this); } else { $prevbtn = $(options.prevbtnselector); } //nextボタン var $nextbtn; if ($.isfunction(options.nextbtnselector)) { $nextbtn = options.nextbtnselector.apply(this); } else { $nextbtn = $(options.nextbtnselector); } //pauseボタン var $pausebtn; if ($.isfunction(options.pausebtnselector)) { $pausebtn = options.pausebtnselector.apply(this); } else { $pausebtn = $(options.pausebtnselector); } //resetボタン var $resetbtn; if ($.isfunction(options.resetbtnselector)) { $resetbtn = options.resetbtnselector.apply(this); } else { $resetbtn = $(options.resetbtnselector); } //その他初期設定 var maininitlength = $mainlist.length; var maintotallength = maininitlength; var maxindex = maininitlength - 1; var slidewidth = $mainviewarea.length > 0 ? $mainviewarea.outerwidth() : null; var slideoffsetx = 0; var slideoffsetlistnum = 0; var mainulsize = 0; var mainlisize = 0; var startautotimerid = null; var overflag = false; var mainoverflag = false; var btnoverflag = false; var pauseflag = false; var prevflag = false; var triggereventflag = false; var auto = options.auto; var startautotimercontroll = options.startautotimercontroll; var liquidlayoutflag = options.liquidlayoutflag; var responsivesettings = options.responsive; var visible = maininitlength < options.visible ? maininitlength : options.visible; var scroll = options.scroll; var clonenum = visible; var startindex = options.circular && options.changetype === 'slide' ? options.startindex + clonenum : options.startindex; var oldindex; var data = (anims[this[changerid]] = { namespace: 'vichanger' + this[changerid], run: true, currentindex: startindex, timerid: null, $main: $main, $mainoriginallist: $mainoriginallist, $navi: $navi, $startbtn: $startbtn, $prevbtn: $prevbtn, $nextbtn: $nextbtn, $pausebtn: $pausebtn, $resetbtn: $resetbtn, options: options }); var navicurrentindex = data.currentindex; //ナビゲーション初期化 ---------------------------------- if ($navi.length) { setnavicurrentindex(data.currentindex); $navilist.each(function(i) { var $this = $(this); var $trigger = $this.find('a'); if ($trigger.length < 1) $trigger = $this; //ナビゲーションカレント表示設定 if (navicurrentindex === i) { $this.addclass(options.naviactiveclassname); if (options.accessibilityflag) { $navilist.attr('aria-selected', 'false'); $navilist.eq(navicurrentindex).attr('aria-selected', 'true'); } } if (options.navitriggerevent) { //ナビゲーションクリックイベント var triggerclickevt = function() { if (navicurrentindex === i) { return; } if (data.timerid) cleartimeout(data.timerid); data.timerid = null; var targetindex = i; if (options.circular && options.changetype === 'slide') { targetindex = clonenum + i; //最初の画像から最後の画像を表示する時 if (navicurrentindex === 0 && i === maxindex) prevflag = true; //最後の画像から最初の画像を表示する時 if (navicurrentindex === maxindex && i === 0) prevflag = false; } triggereventflag = true; onmotion(targetindex); }; if (options.navitriggerevent === 'click') { utility.setbtnaction($trigger, data.namespace, triggerclickevt); if ( auto !== null && auto !== undefined && options.hovertimerstop ) { $trigger.on('mouseover.' + data.namespace, function() { btnoveraction(); }); $trigger.on('mouseout.' + data.namespace, function() { btnoutaction(); }); } } else if (options.navitriggerevent === 'mouseover') { $trigger.on('mouseover.' + data.namespace, function() { triggerclickevt(); }); } } }); } //メインエリア初期化 ---------------------------------- //スライドアニメーション初期化 if (options.changetype === 'slide') { mainlisize = $mainlist.eq(0).outerwidth(); //切り替えループありの場合は前後にクローンを配置 if (options.circular) { $main .prepend($mainlist.slice(maininitlength - clonenum).clone()) .append($mainlist.slice(0, clonenum).clone()); } //メイン画像リストの幅・座標を設定 $mainlist = $main.children(); maintotallength = $mainlist.length; mainulsize = mainlisize * maintotallength; if (options.circular && options.centermode) { if (visible % 2 === 0) { slideoffsetx = -(slidewidth / 2); } else { slideoffsetx = -((slidewidth - mainlisize) / 2); } slideoffsetlistnum = math.ceil(slidewidth / mainlisize / 2); } $main.css({ width: mainulsize + 'px', left: -(data.currentindex * mainlisize + slideoffsetx) + 'px' }); //メインスワイプアクション if (options.swipeflag && utility.getistouch()) { var touchmoveflag = false; var startpagex; var startpagey; var startmainleft; var lasttouchinfo = null; var swipedirection = function() { var distancex = startpagex - lasttouchinfo.pagex; var distancey = startpagey - lasttouchinfo.pagey; var distancer = math.atan2(distancey, distancex); var swipeangle = math.round(distancer * 180 / math.pi); if (swipeangle < 0) { swipeangle = 360 - math.abs(swipeangle); } if (swipeangle <= 45 && swipeangle >= 0) { return 'left'; } if (swipeangle <= 360 && swipeangle >= 315) { return 'left'; } if (swipeangle >= 135 && swipeangle <= 225) { return 'right'; } return 'vertical'; }; $main.on('touchstart.' + data.namespace, function(e) { if (data.timerid) cleartimeout(data.timerid); data.timerid = null; lasttouchinfo = e.originalevent.changedtouches[0]; startpagex = lasttouchinfo.pagex; startpagey = lasttouchinfo.pagey; startmainleft = $(this).position().left; touchmoveflag = false; }); $main.on('touchmove.' + data.namespace, function(e) { lasttouchinfo = e.originalevent.changedtouches[0]; var distancex = startpagex - lasttouchinfo.pagex; var direction = swipedirection(); if (direction === 'vertical') { return; } //スワイプ動作をしているか否か if (math.abs(distancex) > 5) { touchmoveflag = true; } e.preventdefault(); if (scroll === visible) { var changex = startmainleft - (startpagex - lasttouchinfo.pagex); $main.stop(true, false).css({ left: changex }); } }); $main.on('touchend.' + data.namespace, function(e) { var direction = swipedirection(); //縦スクロールの場合は何もしないでタイマー再開 if (direction === 'vertical') { if (auto !== null && auto !== undefined) starttimer(); return; } var movex = e.originalevent.changedtouches[0].pagex; var targetx = -(data.currentindex * mainlisize + slideoffsetx); var distancex = startpagex - movex; //リンクをタップした場合は端末デフォルトの動きを優先 if (!touchmoveflag && math.abs(distancex) <= 5) { return; } e.preventdefault(); touchmoveflag = false; lasttouchinfo = null; if (distancex > 30) { if (navicurrentindex === maxindex && !options.circular) { $main.stop(true, false).animate( { left: targetx }, { duration: options.duration, easing: options.easing, complete: endmotion } ); } else { onchange('next'); } } else if (distancex < -30) { if (navicurrentindex === 0 && !options.circular) { $main.stop(true, false).animate( { left: targetx }, { duration: options.duration, easing: options.easing, complete: endmotion } ); } else { onchange('prev'); } } else { triggereventflag = true; onmotion(data.currentindex); } }); } //フェードイン・フェードアウトアニメーション初期化 } else { $mainlist.hide(); $mainlist.eq(data.currentindex).show(); } //メインリストのアクティブクラス設定 if (options.mainactiveclassname !== null) { $mainlist.removeclass(options.mainactiveclassname); $mainlist.eq(data.currentindex).addclass(options.mainactiveclassname); } //アクセシビリティ対応 if (options.accessibilityflag) { $mainlist.attr('aria-hidden', 'true'); $mainlist.eq(data.currentindex).attr('aria-hidden', 'false'); } //自動切り替えありの場合 if (auto !== null && auto !== undefined) { //ホバーアクションによるタイマー停止処理 if (options.hovertimerstop) { //メインエリアオバーアクション $main.on('mouseover.' + data.namespace, function() { if (!utility.getistouch()) mainoverflag = true; overaction(); }); $main.on('mouseout.' + data.namespace, function() { mainoverflag = false; outaction(); }); //prevボタンボタンオーバーアクション if ($prevbtn.length) { $prevbtn.on('mouseover.' + data.namespace, function() { btnoveraction(); }); $prevbtn.on('mouseout.' + data.namespace, function() { btnoutaction(); }); } //nextボタンボタンオーバーアクション if ($nextbtn.length) { $nextbtn.on('mouseover.' + data.namespace, function() { btnoveraction(); }); $nextbtn.on('mouseout.' + data.namespace, function() { btnoutaction(); }); } //pauseボタンボタンオーバーアクション if ($pausebtn.length) { $pausebtn.on('mouseover.' + data.namespace, function() { btnoveraction(); }); $pausebtn.on('mouseout.' + data.namespace, function() { btnoutaction(); }); } //resetボタンボタンオーバーアクション if ($resetbtn.length) { $resetbtn.on('mouseover.' + data.namespace, function() { btnoveraction(); }); $resetbtn.on('mouseout.' + data.namespace, function() { btnoutaction(); }); } } //タイマー設定 starttimer(); } else { //タイマーを後から設定する場合 if ( startautotimercontroll !== null && startautotimercontroll !== undefined ) { startautotimer(); } } //startボタンクリックアクション if ($startbtn.length) { var startbtnclickevt = function() { onchange('next'); }; utility.setbtnaction($startbtn, data.namespace, startbtnclickevt); } //prevボタンクリックアクション if ($prevbtn.length) { var prevbtnclickevt = function() { onchange('prev'); }; utility.setbtnaction($prevbtn, data.namespace, prevbtnclickevt); //切り替えループなしのprevボタン初期設定 if (!options.circular && data.currentindex === 0) { $prevbtn.addclass(options.btndisabledclassname); } } //nextボタンクリックアクション if ($nextbtn.length) { var nextbtnclickevt = function() { onchange('next'); }; utility.setbtnaction($nextbtn, data.namespace, nextbtnclickevt); //startボタンがある場合、又は切り替えループなしのnextボタン初期設定 if ( $startbtn.length || (!options.circular && data.currentindex === maintotallength - clonenum) ) { $nextbtn.addclass(options.btndisabledclassname); } } //pauseボタンクリックアクション if ($pausebtn.length) { var pausebtnclickevt = function() { if ($pausebtn.hasclass(options.pauseactiveclassname)) { //再生 pauseflag = false; $pausebtn.removeclass(options.pauseactiveclassname); starttimer(); } else { //停止 if (data.timerid) cleartimeout(data.timerid); data.timerid = null; pauseflag = true; $pausebtn.addclass(options.pauseactiveclassname); } }; utility.setbtnaction($pausebtn, data.namespace, pausebtnclickevt); } //resetボタンクリックアクション if ($resetbtn.length) { var resetbtnclickevt = function() { if (data.timerid) cleartimeout(data.timerid); data.timerid = null; triggereventflag = true; onmotion(0); }; utility.setbtnaction($resetbtn, data.namespace, resetbtnclickevt); //最後だけ表示する場合のresetボタン初期設定 if (!options.resetbtnfirstviewflag) { $resetbtn.addclass(options.btndisabledclassname); } } //レスポンシブ設定 if ( (responsivesettings !== null && responsivesettings.length > -1) || liquidlayoutflag ) { $(window).on( 'resize.' + data.namespace + ' orientationchange.' + data.namespace, function() { if (data.run) { changecontentssize(); } } ); changecontentssize(); } /** * changecontentssize():コンテンツのサイズ変更時の処理 */ function changecontentssize() { // スライダー初期化 var initslide = function() { if (data.timerid) cleartimeout(data.timerid); data.timerid = null; mainlisize = slidewidth / visible; mainulsize = mainlisize * maintotallength; //センター配置の場合はoffset値を調整 if (options.centermode) { if (visible % 2 === 0) { slideoffsetx = -(slidewidth / 2); } else { slideoffsetx = -((slidewidth - mainlisize) / 2); } slideoffsetlistnum = math.ceil(slidewidth / mainlisize / 2); } var mainlistwidth; if ($mainlist.eq(0).css('box-sizing') !== 'border-box') { mainlistwidth = mainlisize - parsefloat($mainlist.eq(0).css('padding-left')) - parsefloat($mainlist.eq(0).css('padding-right')); } else { mainlistwidth = mainlisize; } var targetx = -(data.currentindex * mainlisize + slideoffsetx); $mainlist.css('width', mainlistwidth + 'px'); $main .stop(true, false) .css({ width: mainulsize + 'px', left: targetx + 'px' }); if (auto !== null && auto !== undefined) starttimer(); }; // メディアクエリ設定がある場合 if (responsivesettings !== null && responsivesettings.length > -1) { var i = 0, max; for (i = 0, max = responsivesettings.length; i < max; i++) { var settingobj = responsivesettings[i]; var rsmediaquerystring = settingobj.mediaquerystring; var rsliquidlayoutflag = settingobj.liquidlayoutflag; var rsmaxwidth = settingobj.maxwidth; var rsvisible = settingobj.visible; var rsscroll = settingobj.scroll; slidewidth = $mainviewarea.length > 0 ? $mainviewarea.outerwidth() : null; //var vicontentsrate = maxheight / maxwidth; //var slideheight; //window.matchmediaでブレイクポイント判定 if (window.matchmedia(rsmediaquerystring).matches) { visible = rsvisible !== undefined ? rsvisible : visible; scroll = rsscroll !== undefined ? rsscroll : scroll; if (!rsliquidlayoutflag && rsmaxwidth !== undefined) { slidewidth = rsmaxwidth; // *********************************** //【2016-07-07 update】 // cssのpadding-bottomの%指定を優先させるためコメントアウト // // slideheight = maxheight; // if ($mainviewarea.length > 0) { // $mainviewarea.css({ width: slidewidth + 'px', height: slideheight + 'px' }); // } // *********************************** } else { // *********************************** //【2016-07-07 update】 // cssのpadding-bottomの%指定を優先させるためコメントアウト // // slideheight = slidewidth * vicontentsrate; // if ($mainviewarea.length > 0) { // $mainviewarea.css({ width: 'auto', height: slideheight + 'px' }); // } // *********************************** } if (options.changetype === 'slide') { initslide(); } } } // メディアクエリ設定なし&リキッドレイアウトの場合 } else { slidewidth = $mainviewarea.length > 0 ? $mainviewarea.outerwidth() : null; if (options.changetype === 'slide') { initslide(); } } } /** * setnavicurrentindex():ナビゲーションのカレントインデックスを設定 * @param {number} maincurrentindex メインのカレントインデックス */ function setnavicurrentindex(maincurrentindex) { navicurrentindex = maincurrentindex; if (options.circular && options.changetype === 'slide') { if (maincurrentindex < clonenum) { navicurrentindex = maincurrentindex + maininitlength - clonenum; } else if (maincurrentindex >= maininitlength + clonenum) { navicurrentindex = maincurrentindex - maininitlength - clonenum; } else { navicurrentindex = maincurrentindex - clonenum; } } } /** * btnoveraction():ボタンのマウスオーバー処理 */ function btnoveraction() { if (!utility.getistouch()) { btnoverflag = true; overaction(); } } /** * btnoutaction():ボタンのマウスアウト処理 */ function btnoutaction() { btnoverflag = false; outaction(); } /** * overaction():マウスオーバー処理 */ function overaction() { if (data.timerid) cleartimeout(data.timerid); data.timerid = null; overflag = true; } /** * outaction():マウスアウト処理 */ function outaction() { if ( $prevbtn.length || $nextbtn.length || $pausebtn.length || $resetbtn.length || $navi.length ) { if (!btnoverflag && !mainoverflag) { overflag = false; starttimer(); } } else { overflag = false; starttimer(); } } /** * starttimer():自動切り替えタイマー開始 */ function starttimer() { if (!overflag && !pauseflag) { if (data.timerid) cleartimeout(data.timerid); data.timerid = null; var delay; if ($.isarray(auto)) { delay = auto[data.currentindex] ? auto[data.currentindex] : auto[0]; } else { delay = auto; } if (delay === 0) { onchange(); } else { data.timerid = settimeout(onchange, delay); } } } /** * resettimer():リセットタイマー開始 */ function resettimer() { if (!overflag && !pauseflag) { if (data.timerid) cleartimeout(data.timerid); data.timerid = null; data.timerid = settimeout(onchange, options.resettimerbytriggerevent); } } /** * startautotimer():自動切り替え呼び出しタイマー */ function startautotimer() { if (startautotimerid) cleartimeout(data.timerid); startautotimerid = null; if ($wrapper.data('vichangerstartautotimer') === 'true') { auto = startautotimercontroll; starttimer(); } else { startautotimerid = settimeout(startautotimer, 1000); } } /** * onchange():スライドの切り替え決定 * @param {string} changetype 切り替えの種類('next' or 'prev') */ function onchange(changetype) { if (data.timerid) cleartimeout(data.timerid); data.timerid = null; var index; if (changetype === 'prev') { prevflag = true; //切り替えループあり if (options.circular) { //最初の画像から最後の画像を表示する時 if (data.currentindex - scroll - slideoffsetlistnum < 0) { index = maininitlength + (data.currentindex - scroll); } else { index = data.currentindex - scroll; } //切り替えループなし } else { if (data.currentindex - scroll < 0) { index = 0; } else { index = data.currentindex - scroll; } } } else { prevflag = false; //切り替えループあり if (options.circular) { //最後の画像から最初の画像を表示する時の初期化 if (data.currentindex + scroll > maintotallength - clonenum) { index = data.currentindex + scroll - maininitlength; } else { index = data.currentindex + scroll; } //切り替えループなし } else { if (data.currentindex + scroll > maintotallength - clonenum) { index = maintotallength - clonenum; } else { index = data.currentindex + scroll; } } } if (index !== data.currentindex) { triggereventflag = changetype === 'prev' || changetype === 'next' ? true : false; onmotion(index); } } /** * onmotion():スライドの切り替えスタート * @param {number} targetindex 選択された画像インデックス */ function onmotion(targetindex) { //切り替える画像が同じ場合は終了 //if (targetindex === data.currentindex) return; //スライド前の処理 var callbackarg = [ $wrapper, $main, $navi, data.currentindex, targetindex ]; if ($.isfunction(options.beforeslidecontent)) { options.beforeslidecontent.apply(this, callbackarg); } //切り替えループなし if (!options.circular) { //start・next・prevボタン設定 if ($startbtn.length) { $startbtn.addclass(options.btndisabledclassname); if (targetindex === 0) { $startbtn.removeclass(options.btndisabledclassname); } } if ($prevbtn.length) { $prevbtn.removeclass(options.btndisabledclassname); if (targetindex === 0) { $prevbtn.addclass(options.btndisabledclassname); } } if ($nextbtn.length) { $nextbtn.removeclass(options.btndisabledclassname); if ( targetindex === maintotallength - clonenum || ($startbtn.length && targetindex === 0) ) { $nextbtn.addclass(options.btndisabledclassname); } } //最後だけ表示する場合のresetボタン設定 if ($resetbtn.length && !options.resetbtnfirstviewflag) { $resetbtn.addclass(options.btndisabledclassname); if (targetindex === maintotallength - clonenum) { $resetbtn.removeclass(options.btndisabledclassname); } } //切り替えループあり } else { //スライダーアニメーションの場合 if (options.changetype === 'slide') { //最初の画像から最後の画像を表示する時の初期化 if ( data.currentindex - scroll - slideoffsetlistnum < 0 && prevflag ) { $main .stop(true, false) .css( 'left', -((targetindex + scroll) * mainlisize + slideoffsetx) + 'px' ); //最後の画像から最初の画像を表示する時の初期化 } else if ( data.currentindex + scroll > maintotallength - clonenum && !prevflag ) { $main .stop(true, false) .css( 'left', -((targetindex - scroll) * mainlisize + slideoffsetx) + 'px' ); } } } if (!(options.changetype === 'fade' && options.fadetye === '04')) { //メインリストのアクティブクラス設定 if (options.mainactiveclassname !== null) { $mainlist.removeclass(options.mainactiveclassname); $mainlist.eq(targetindex).addclass(options.mainactiveclassname); } //ナビゲーションのアクティブクラス切り替え if ($navi.length) { setnavicurrentindex(targetindex); $navilist.removeclass(options.naviactiveclassname); $navilist .eq(navicurrentindex) .addclass(options.naviactiveclassname); //アクセシビリティ対応 if (options.accessibilityflag) { $navilist.attr('aria-selected', 'false'); $navilist.eq(navicurrentindex).attr('aria-selected', 'true'); } } //アクセシビリティ対応 if (options.accessibilityflag) { $mainlist.attr('aria-hidden', 'true'); $mainlist.eq(targetindex).attr('aria-hidden', 'false'); } } //スライドアニメーション if (options.changetype === 'slide') { var targetx = -(targetindex * mainlisize + slideoffsetx); $main.stop(true, false).animate( { left: targetx }, { duration: options.duration, easing: options.easing, complete: endmotion } ); //フェードイン・フェードアウトアニメーション } else if (options.changetype === 'fade') { if (options.fadetye === '01') { $mainlist .eq(data.currentindex) .stop(true, true) .fadeout(options.duration); $mainlist .eq(targetindex) .stop(true, true) .fadein(options.duration, endmotion); } else if (options.fadetye === '02') { $mainlist .eq(data.currentindex) .stop(true, true) .hide(); $mainlist .eq(targetindex) .stop(true, true) .fadein(options.duration, endmotion); } else if (options.fadetye === '03') { if ($mainclone.length) { $mainlist .eq(oldindex) .stop(true, false) .hide(); $mainlist .eq(data.currentindex) .stop(true, false) .show(); $mainclone.remove(); } $mainclone = $mainlist.eq(targetindex).clone(); $mainclone .appendto($main) .hide() .fadein(options.duration, endmotion); } else { $mainlist.eq(targetindex).stop(true, true); $mainlist .eq(data.currentindex) .stop(true, true) .fadeout(options.duration, function() { //メインリストのアクティブクラス設定 if (options.mainactiveclassname !== null) { $mainlist.removeclass(options.mainactiveclassname); $mainlist .eq(targetindex) .addclass(options.mainactiveclassname); } //ナビゲーションのアクティブクラス切り替え if ($navi.length) { setnavicurrentindex(targetindex); $navilist.removeclass(options.naviactiveclassname); $navilist .eq(navicurrentindex) .addclass(options.naviactiveclassname); //アクセシビリティ対応 if (options.accessibilityflag) { $navilist.attr('aria-selected', 'false'); $navilist .eq(navicurrentindex) .attr('aria-selected', 'true'); } } //アクセシビリティ対応 if (options.accessibilityflag) { $mainlist.attr('aria-hidden', 'true'); $mainlist.eq(targetindex).attr('aria-hidden', 'false'); } $mainlist.eq(targetindex).fadein(options.duration, endmotion); }); } } else { $mainlist.eq(data.currentindex).hide(); $mainlist.eq(targetindex).show(); } //カレント設定 oldindex = data.currentindex; data.currentindex = targetindex; } /** * endmotion():スライド後の処理 */ function endmotion() { if (options.changetype === 'fade' && options.fadetye === '03') { $mainlist.eq(oldindex).hide(); $mainlist.eq(data.currentindex).show(); $mainclone.remove(); } //スライド後の処理 var callbackarg = [$wrapper, $main, $navi, data.currentindex, oldindex]; if ($.isfunction(options.endslidecontent)) { options.endslidecontent.apply(this, callbackarg); } if (auto !== null && auto !== undefined) { if (triggereventflag && options.resettimerbytriggerevent !== null) { resettimer(); } else { starttimer(); } } } }); }; /** * @typedef {function} $.fn.vichangerstartautotimer * * @desc {@link $.fn.vichanger}の拡張 * * 手動でタイマー設定 * * @example * //任意のタイミングで切替タイマーを開始 * $('[data-js-vi]').vichangerstartautotimer(); */ $.fn.vichangerstartautotimer = function() { $(this).data('vichangerstartautotimer', 'true'); }; /** * @typedef {function} $.fn.vichangergetcurrentindex * * @desc {@link $.fn.vichanger}の拡張 * * カレントのインデックスナンバーを取得 * * @example * var currentindex = $('[data-js-vi]').vichangergetcurrentindex(); */ $.fn.vichangergetcurrentindex = function() { var vicurrentindex = null; this.each(function() { if (!this[changerid]) this[changerid] = uuid++; var data = anims[this[changerid]]; if (data && data.run) { vicurrentindex = data.currentindex; } }); return vicurrentindex; }; /** * @typedef {function} $.fn.vichangerreset * * @desc {@link $.fn.vichanger}の拡張 * * viエリアのリセット * * @example * $('[data-js-vi]').vichangerreset(); */ $.fn.vichangerreset = function() { return this.each(function() { if (!this[changerid]) this[changerid] = uuid++; var data = anims[this[changerid]]; if (data && data.run) { //アニメーションタイマー解除 data.$main.stop(true, true); data.$main.children().stop(true, true); cleartimeout(data.timerid); data.timerid = null; data.run = false; //delete anims[this[changerid]]; //イベント解除 $(window).off('.' + data.namespace); data.$main.off('.' + data.namespace); if (data.$navi.length) { var $navili = data.$navi.children(); var $navtrigger = $navili.find('a'); if ($navtrigger.length < 1) $navtrigger = $navili; $navtrigger.off('.' + data.namespace); } if (data.$startbtn.length) data.$startbtn.off('.' + data.namespace); if (data.$prevbtn.length) data.$prevbtn.off('.' + data.namespace); if (data.$nextbtn.length) data.$nextbtn.off('.' + data.namespace); if (data.$pausebtn.length) data.$pausebtn.off('.' + data.namespace); if (data.$resetbtn.length) data.$resetbtn.off('.' + data.namespace); //スタイルリセット data.$main.empty().append(data.$mainoriginallist); data.$main.removeattr('style'); data.$main .children() .removeattr('style') .removeclass(data.options.mainactiveclassname); } }); }; /** * デフォルトオプション */ $.fn.vichanger.defaults = { mainviewareaselector: '', mainwrapperselector: '', naviwrapperselector: '', startbtnselector: '', prevbtnselector: '', nextbtnselector: '', pausebtnselector: '', resetbtnselector: '', resetbtnfirstviewflag: true, changetype: 'slide', fadetye: '03', navitriggerevent: 'click', naviactiveclassname: 'is-active', mainactiveclassname: null, pauseactiveclassname: 'is-active', btndisabledclassname: 'is-disabled', duration: 'normal', easing: 'swing', auto: 5000, startautotimercontroll: null, resettimerbytriggerevent: null, circular: true, startindex: 0, hovertimerstop: true, swipeflag: true, visible: 1, scroll: 1, centermode: false, liquidlayoutflag: true, responsive: null, accessibilityflag: false, beforeslidecontent: null, endslidecontent: null }; })(jquery); ;!function(i){"use strict";"function"==typeof define&&define.amd?define(["jquery"],i):"undefined"!=typeof exports?module.exports=i(require("jquery")):i(jquery)}(function(i){"use strict";var e=window.slick||{};(e=function(){var e=0;return function(t,o){var s,n=this;n.defaults={accessibility:!0,adaptiveheight:!1,appendarrows:i(t),appenddots:i(t),arrows:!0,asnavfor:null,prevarrow:'',nextarrow:'',autoplay:!1,autoplayspeed:3e3,centermode:!1,centerpadding:"50px",cssease:"ease",custompaging:function(e,t){return i('