부트스트랩 모달의 사이즈를 구해서 사이즈에 맞게 이모지 n개/행을 출력하려고 하는데요.

안녕하세요?

어느덧 금요일이네요!

부트스트랩 모달의 사이즈를 구해서 그 사이즈에 맞는 이모지 개수를 구하여 출력하려고 하는데요.

이상하게 PC나 iPad에서는 잘 작동하는데 스마트폰에서는 의도한대로 잘 되지 않아서 질문 드립니다.

썸머노트에서 부트스트랩3 모달을 이용하여 이모지를 사용할 수 있게 해주는 플러그인인데요.

summernote-ext-github-emojis.js 

원래는 다음과 같이 비반응형으로 한 행에 출력될 이모지의 개수를 고정하여 출력합니다.

      var COLUMN_LENGTH = 10; // 한 행에 출력될 이모지의 개수
      var COLUMN_WIDTH = 30; // 이모지가 출력될 사이즈(px)

이렇게 원본 파일대로 출력하면 모바일에서는 PC보다 모달창이 작게 열려서 이모지가 짤려서 출력되는 문제가 있더군요.

그래서 다음과 같이 수정을 해봤거든요.

위에 올려드린 파일에서 일부를 발췌한 것인데 "두 줄을 추가하였습니다!" 주석 밑에 두 줄을 추가하였습니다.

      /**
      * Make Emojis Table
      *
      * @private
      * @return {jQuery}
      */
      function makeEmojisSetTable () {
        var $table = $('<table/>');

        $.each(emojis, function (idx, emoji) {
          var $td = $('<td/>').addClass('note-specialchar-node');
          var $tr = (idx % COLUMN_LENGTH === 0) ? $('<tr/>') : $table.find('tr').last();

          // 두 줄을 추가하였습니다!
          var modal_width = $(".modal-dialog").width() - 30; // 모달창 사이즈를 구하고 양쪽의 padding을 뺌
          COLUMN_LENGTH = Math.floor(modal_width / 35); // 구한 값을 35로 나눠서 버림

          var $button = ui.button({
            callback : function ($node) {
              var content = emojiUrls[emoji];

              $node.html('<img src="' + content + '" width="20" style="margin-left:-6px"/>');
              $node.attr('title', ':'+emoji);
              $node.attr('data-value', encodeURIComponent(emojiUrls[emoji]));
              $node.css({
                width: COLUMN_WIDTH,
                height: COLUMN_WIDTH,
                'margin-right' : '5px',
                'margin-bottom' : '5px'
              });
            }
          }).render();

          $td.append($button);
          $tr.append($td);
          if (idx % COLUMN_LENGTH === 0) {
            $table.append($tr);
          }
        });

        totalRow = $table.find('tr').length;
        totalColumn = COLUMN_LENGTH;

        return $table;
      };

      /**
      * Plugin initialize
      */
      this.initialize = function () {
        var $container = options.dialogsInBody ? $(document.body) : $editor;

        var emojisHint = {
          match: /:([\-+\w]+)$/,
          search: function (keyword, callback) {
            callback($.grep(emojis, function (item) {
              return item.indexOf(keyword)  === 0;
            }));
          },
          template: function (item) {
            var content = emojiUrls[item];
            return '<img src="' + content + '" width="20" /> :' + item + ':';
          },
          content: function (item) {
            var url = emojiUrls[item];
            if (url) {
              return $('<img />').attr('src', url).css('width', 20)[0];
            }
            return '';
          }
        };

        if(options.hint){
          if(Array.isArray(options.hint)){
            options.hint.push(emojisHint);
          }else{
            var temp = options.hint;
            options.hint = [];
            options.hint.push(temp);
            options.hint.push(emojisHint);
          }
        }

        $.ajax({
          url: 'https://api.github.com/emojis',
          async: true
        }).done(function(data) {
          emojis = Object.keys(data);
          emojiUrls = data;
          var body = '<div class="form-group row-fluid">' + makeEmojisSetTable()[0].outerHTML + '</div>';
          self.$dialog = ui.dialog({
            title: lang.emojis.select,
            body: body
          }).render().appendTo($container);
        });

      };

첨부사진처럼 PC와 iPad에서는 제대로 작동하는데요.

이상하게 스마트폰(안드로이드 & iOS)에서는 1줄로만 출력되네요.

PC의 개발자도구에서 console로 로그를 찍어보면 모달의 폭이 제대로 구해지는 것을 확인할 수 있는데요.

제가 실력이 부족해서 착각하는 것인지는 모르겠지만... 모바일에서도 동일하게 작동을 할 것으로 생각되는데요.

왜 PC와 iPad에서는 제대로 작동되는데, 스마트폰에서는 위와 같이 출력되는지 도저히 원인을 알 수 없네요 ㅠㅠ

그럼 고수님들의 답변을 부탁드립니다!

항상 감사드립니다 ^-^

즐거운 주말 되세요~