javascript Issue302：20171018 - 动画商品トライアル

Posted 2021-05-04

(function($) {

    window.issue302 = {

        $movieSection: $('h2:contains("お店の動画")').closest('.section'),
        $newTitle: $('h2:contains("お店の最新情報")'),
        shopID: $('body').data('r').sid,
        $movie: null,

        start: function(abType) {
            if (abType === 1) {
                this.setMovie();
                // グロナビ下に新規動画枠を差し込み、不要要素の削除
                $('.globalNav').after('<div class="shopMovie">' + this.$movie);
                this.removeMain();
            }

            if (abType === 2) {
                // TODO: frontend確認用なので納品時は不要
                // 最新情報枠の有無をパラメータで上書きしてDOMも削除
                if (info === '0') {
                    this.$newTitle.length = 0;
                    $('h2:contains("お店の最新情報")').closest('.titlebar').next().remove();
                    $('h2:contains("お店の最新情報")').closest('.titlebar').remove();
                }
                // frontend確認用なので納品時は不要

                this.setMovie();

                var $movieDOM =
                    '<div class="section">' +
                    '<div class="titlebar titlebar--tint-l">' +
                    '<div class="titlebar__body">' +
                    '<h2 class="heading--default">お店の動画</h2>' +
                    '</div>' +
                    '</div>' +
                    '<div class="shopMovie -mt8">' + this.$movie + '</div>' +
                    '</div>'
                ;

                // 最新情報枠の次かheaderCVの次に新規動画枠を差し込み
                if (this.$newTitle.length) {
                    this.$newTitle.closest('.titlebar').next().after($movieDOM);
                } else {
                    $('.headerCV').next('.panel').after($movieDOM);
                }

                this.$movieSection.remove();
            }
        },

        setMovie: function() {
            // TODO: frontend確認用なので納品時は不要
            // 店舗IDをパラメータで上書き
            this.shopID = sid;
            // frontend確認用なので納品時は不要

            var map = {
                // 20店舗ほどになる予定
                'ge89400': '-Gxy8dpLihc',
                'ge89401': 'Y950RBS2Oto'
            }

            this.$movie = this.setYoutubeTag(map[this.shopID]);
        },

        setYoutubeTag: function(youtubeID) {
            return '<iframe width="640" height="360" src="https://www.youtube.com/embed/' + youtubeID + '?rel=0&amp;showinfo=0&amp;autohide=1&amp;cc_load_policy=1" frameborder="0" allowfullscreen></iframe>';
        },

        removeMain: function() {
            $('#js-sptop-carousel, .inlineActionBar').remove();
        }

    }

    // TODO: パターン確認用なので納品時は不要
    var sid     = location.href.match(/sid=(.*?)(&|$)/)[1];
    var info    = location.href.match(/info=(.?)(&|$)/)[1];
    var pattern = location.href.match(/pattern=(.?)(&|$)/)[1];
    issue302.start(parseInt(pattern, 10) || null);
    // パターン確認用なので納品時は不要

})(jQuery);