javascript Issue293：20170831 - 写真一覧ササムネイルサイズ大きく+リキッドレイアウト

Posted 2021-05-04

![](https://user-images.githubusercontent.com/1148232/33466664-cec69712-d692-11e7-9e5d-0d3502e5e4e1.png)

(function($) {

    window.issue293 = {

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

        checkcount: 300,

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

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

            // 既存のphotolistが走るまで待機
            setTimeout(function() {
                if (that.checkcount--) {
                    if ($('#sh-photo-list-wrap .list-unit')[0]) {
                        that.request(target);
                    } else {
                        that.start(target);
                    }
                }
            }, 100);
        },

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

            // 既存のphotoList.jsを丸コピー
            // 必要箇所を微調整, UPDATE: コメント追加

            // 略

            // getJSON
            $.ajax({
                type: 'GET',
                url: set_json_url(),
                dataType: 'json',
                success:function(data){

                    var photoView = new PhotoView({
                        photo_data : data,
                        spacer : '//c-x.gnst.jp/s/v3/common/img/spacer.png'
                    });

                    // 2度目のajaxがsuccessしてから
                    switch (target) {
                        case 1:
                            that.variation1();
                            break;
                        case 2:
                            that.variation2();
                            break;
                    }

                },
                timeout:30000,
                error:function(){
                    alert('データの取得に失敗しました');
                }
            });

            // 略
        },

        variation1: function() {
            $('#sh-photo-list').addClass('l-issue293--v1');
        },

        variation2: function(data) {
            var that = this;

            $('#sh-photo-list').addClass('l-issue293--v2');

            setTimeout(function() {
                if (that.checkcount--) {
                    if ($('.l-issue293--v2 .js-ld')[0]) {
                        that.setGridSize();
                    } else {
                        that.variation2();
                    }
                }
            }, 100);

            // 横向きでは拡大せずに中央寄せ: 実機のみ
            $(window).on('load orientationchange', function() {
                if (Math.abs(window.orientation) === 90) {
                    // 横
                    $('#sh-photo-list-wrap').css('width', '375px');
                    that.setGridSize();
                } else {
                    // 縦
                    $('#sh-photo-list-wrap').css('width', '100%');
                }
            });
        },

        setGridSize: function() {
            var ua = navigator.userAgent;

            var gridSize = $('.l-issue293--v2').find('.pic-box').width();
            var imgSize  = $('.l-issue293--v2').find('.pic-box').width() - 2;  // 枠のborder分

            $('.l-issue293--v2').find('.pic').css({
                'width': gridSize,
                'height': gridSize
            });

            if (ua.search('Android 4') !== -1) {
                $('.l-issue293--v2').find('.pic').find('img').css({
                    'max-width': imgSize,
                    'max-height': imgSize
                });
            }
        }

    }

    // パターン確認用
    // var valiation = location.href.match(/v=(.)/)[1];
    // issue293.start(parseInt(valiation, 10) || null);

})(jQuery);