syannu
7/12/2017 - 7:45 AM

Issue284

ajax, returnで複数の返り値をオブジェクトで, filterで配列の操作, url判別で処理の分岐

(function ($, util) {

    window.ISSUE284 = {

        pageID: $('body').attr('data-pageid'),

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

            if (this.pageID !== 'photo') {
                return;
            }

            this.request().done(function(data) {
                switch (target) {
                    case 1:
                        that.variation1();
                        break;
                    case 2:
                        that.variation2(data);
                        break;
                    case 3:
                        that.variation3(data);
                        break;
                }
            });
        },

        removeLabel: function() {
            $('dt:contains("絞り込み")').remove();
        },

        request: function() {
            var d = $.Deferred();
            var domain = location.href.match(/^https?:\/\/[^\/]+/)[0];
            var shop_id = $('body').data('r').sid;
            var set_json_url = function() {
                var u;

                if (domain === null) {
                    u = 'js/test-photo.json';
                } else if (domain === 'http://localhost:8000') {
                    u = domain + '/build/js/test-photo.json';
                } else if (domain === 'http://test-mobile.vi.co.jp' || domain === 'http://frontend.vi.co.jp') {
                    u = 'js/test-photo.json';
                } else {
                    u = domain + '/' + shop_id +'/list/photo.json';
                }

                return u;
            };

            $.ajax({
                type: 'get',
                url: set_json_url(),
                dataType: 'json',
                cache : false,
                timeout : 10000
            })
                .done(function(data) {
                    d.resolve(data);
                })
                .fail(function() {
                    d.reject(alert('データの取得に失敗しました'));
                });

            return d.promise();
        },

        countPhoto: function(data) {
            var photoAll      = data.length;
            var photoMenu     = data.filter(function(data) {return (data.pageId === 'd-menu');}).length;
            var photoExterior = data.filter(function(data) {return (data.pageId === 'd-exterior');}).length;
            var photoInterior = data.filter(function(data) {return (data.pageId === 'd-interior');}).length;
            var photoPrivate  = data.filter(function(data) {return (data.pageId === 'd-private');}).length;
            var photoStaff    = data.filter(function(data) {return (data.staff);}).length;
            var photoReview   = data.filter(function(data) {return (data.review);}).length;
            var photoOther    = data.filter(function(data) {return (data.pageId === 'd-other');}).length;

            return {
                all         : photoAll,
                menu        : photoMenu,
                exterior    : photoExterior,
                interior    : photoInterior,
                privateroom : photoPrivate,
                staff       : photoStaff,
                review      : photoReview,
                other       : photoOther
            };
        },

        addNumPulldown: function(data) {
            var photoNum = this.countPhoto(data);

            $('#sh-photo-sort [data-pageid="l-all"]').text('すべて(' + photoNum.all + ')');
            $('#sh-photo-sort [data-pageid="l-menu"]').text('料理・ドリンク(' + photoNum.menu + ')');
            $('#sh-photo-sort [data-pageid="l-exterior"]').text('外観(' + photoNum.exterior + ')');
            $('#sh-photo-sort [data-pageid="l-interior"]').text('店内(' + photoNum.interior + ')');
            $('#sh-photo-sort [data-pageid="l-private"]').text('個室(' + photoNum.privateroom + ')');
            $('#sh-photo-sort [data-pageid="l-staff"]').text('スタッフ(' + photoNum.staff + ')');
            $('#sh-photo-sort [data-pageid="l-review"]').text('応援フォト(' + photoNum.review + ')');
            $('#sh-photo-sort [data-pageid="l-other"]').text('その他(' + photoNum.other + ')');
        },

        addNumTitle: function(data) {
            var that = this;
            var photoNum = this.countPhoto(data);
            var urlParam = location.search.substring(1);

            var $title = $('.titlebar .heading--big');
            var titleText = '写真一覧';

            function addNum(num) {
                $title.text(titleText + '(' + num + ')');
            }

            if (urlParam.match(/cate=all/)) {
                addNum(photoNum.all);
            } else if (urlParam.match(/cate=menu/)) {
                addNum(photoNum.menu);
            } else if (urlParam.match(/cate=exterior/)) {
                addNum(photoNum.exterior);
            } else if (urlParam.match(/cate=interior/)) {
                addNum(photoNum.interior);
            } else if (urlParam.match(/cate=private/)) {
                addNum(photoNum.privateroom);
            } else if (urlParam.match(/cate=staff/)) {
                addNum(photoNum.staff);
            } else if (urlParam.match(/cate=review/)) {
                addNum(photoNum.review);
            } else if (urlParam.match(/cate=other/)) {
                addNum(photoNum.other);
            }

            $('#sh-photo-sort [name="cate"]').on('change', function() {
                setTimeout(function() {
                    that.addNumTitle(data);
                }, 100);
            });
        },

        variation1: function() {
            this.removeLabel();
        },

        variation2: function(data) {
            this.removeLabel();
            this.addNumPulldown(data);
        },

        variation3: function(data) {
            this.removeLabel();
            this.addNumTitle(data);
        }

    }

})(jQuery, util);