javascript Issue267：20171113 - no56。共通ヘッダーに「最近见たお店」导线追加

Posted 2021-05-04

(function($) {

    window.issue267 = {

        ghistoryObjs: function() {
            return this.getGhistories($.cookie('GHistory'));
        },

        ghistoryReserveObjs: function() {
            return this.getGhistories($.cookie('ghistory_reserve'));
        },

        currentSid: JSON.parse($('body').attr('data-r')).sid,

        GHistoryBalloonDOM: function() {
            var that = this;

            var GHistoryBalloonDOM =
                '<div class="issue267-history-balloon">' +
                '<a href="http://my.gnavi.co.jp/history/?sc_lid=r-history_balloon">ネット予約ができるお店</a>' +
                '<a href="http://my.gnavi.co.jp/history/?sc_lid=r-history_balloon" class="issue267-history-balloon--count">' + that.ghistoryReserveObjs().length + '件</a>' +
                '<span class="close-baloon js-history-balloon-close"></span>' +
                '</div>'
            ;

            return {
                dom:      $(GHistoryBalloonDOM),
                selector: $('.issue267-history-balloon')
            }
        },

        balloonFlag: false,

        setClass: function() {
            var that = this;

            // TODO: 後で消す
            // ローカルで直近4日のcookieを明示的にセット
            // テスト環境以降ではサーバーサイドで処理
            $.cookie('GHistory',         'a460202:110:1508471184,p735402:110:1508471180,i924718:110:1508465246,g725415:110:1508464740,a236419:110:1508464635,g501210:110:1508464589,gfpw300:110:1508464578,a046600:110:1508464499,a042600:110:1508464434,a046600:110:1508464499');
            $.cookie('ghistory_reserve', 'abc1234:1508314800,b029500:1508314800');
            // TODO: 後で消す

            if (
                !that.ghistoryReserveObjs() ||
                that.ghistoryReserveObjs().length === 1 && that.ghistoryReserveObjs()[0].sid === that.currentSid
            ) {
                return false;
            }

            // cookieチェックでOKだったらclassを付与
            // Optimizelyから、このclassの有無でテスト店舗の判別。
            $('body').addClass('js-issue267-cookie-is-valid');
        },

        start: function(pattern) {
            var that = this;

            switch(pattern) {
                case 1:
                    $('#gn-un').addClass('issue267');
                    that.setDOM();
                    break;
            }
        },

        getGhistories: function(ghistory) {
            if (!ghistory) {
                return null;
            }

            var histories = ghistory.split(',');

            return histories.map(function(history) {
                var item = history.split(':');

                return {
                    sid:       item[0],
                    timestamp: item[1]
                }
            });
        },

        setDOM: function() {
            var that = this;

            var $GHistoryDOM =
                '<div class="issue267-history">' +
                '<div class="issue267-history__inner">' +
                '<a href="http://my.gnavi.co.jp/history/?sc_lid=r-history_icon" class="issue267-history__icon"></a>' +
                '<span class="issue267-history__count">' + that.ghistoryObjs().length + '</span>' +
                '</div>'
                '</div>'
            ;

            $($GHistoryDOM).insertBefore('#newsEventWrapper');

            that.GHistoryBalloonDOM().dom.appendTo('.issue267-history');
            that.showBalloon();

            $('.js-history-balloon-close').on('click', function() {
                that.hideBalloon();
                that.balloonFlag = false;
            });

            $(window).scroll(function() {
                that.setOffset();
            });
        },

        setOffset: function() {
            var that = this;

            var windowOffset = $(window).scrollTop();
            var headerOffset = $('#header').offset().top;

            if (!that.balloonFlag && windowOffset === 1) {
                that.hideBalloon();
            }

            if (windowOffset > headerOffset) {
                that.balloonFlag = true;
            }

            if (that.balloonFlag && windowOffset < headerOffset) {
                that.showBalloon();
            } else {
                that.hideBalloon();
            }
        },

        showBalloon: function() {
            var that = this;

            that.GHistoryBalloonDOM().selector.stop().animate({
                'top': '53px',
                'opacity': 1
            }, 800, 'easeInOutBack');
        },

        hideBalloon: function() {
            var that = this;

            that.GHistoryBalloonDOM().selector.stop().animate({
                'top': '23px',
                'opacity': 0
            }, 0);
        }

    }

    // cookieチェックとclass付与はOptimizelyの実行より先（オリジナルにも付与）
    window.issue267.setClass();

    if (
        location.href.match(/ab_pattern=(.)/) &&
        location.hostname.match(/localhost|test-|frontend/)
    ) {
        window.issue267.start(parseInt(location.href.match(/ab_pattern=(\d+)/)[1], 10));
    }

})(jQuery);