• 목록
  • 아래로
  • 위로

안녕하세요?


어느덧 금요일이네요!


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


이상하게 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에서는 제대로 작동되는데, 스마트폰에서는 위와 같이 출력되는지 도저히 원인을 알 수 없네요 ㅠㅠ



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


항상 감사드립니다 ^-^


즐거운 주말 되세요~

작성자
이니스프리 119 Lv. (0%) 1876250/115200000EXP

당분간 일신상의 사정으로 쪽지나 댓글로 답변을 드리기 어렵습니다. 죄송합니다.

 

CSVpuymXAAAVVpd.jpg

댓글 5

Hanam09
profile image

이모지 자체에 적용된 반응형 스타일 시트가 있나요?

지금 주신 소스만으론 문제의 원인을 정확히 파악할 수 없을 것 같습니다.

 

크롬 개발자도구로 한번 문제를 직접 찾아보세요!

comment menu
2019.08.24. 01:21

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리 작성자 → Hanam09
profile image

옙 주말인데 답변해주셔서 감사합니다 ^^

에디터 자체가 부트스트랩에 의존하고 있어서 그런지

이모지 플러그인에는 CSS 파일이 따로 없고, 플러그인의 파일에서

저같은 초보는 더욱 더 감을 잡을 수가 없네요 ㅠㅠ

 

개발자도구에서 Toggle Device Toolbar로 보면 770px 까지는 제대로 출력이 되고,

그 이하에서는 1줄로 나오는 문제가 있네요 ㅜㅜ

개발자도구에서 에러가 뜨는 것은 없고, 다만 console에서 로그를 찍어 확인해보면 모달의 폭이 0으로 나오는데요 ㅠㅠ

(부트스트랩 모달의 div의 클래스 명이 바뀌는 것은 없습니다)

 

혹시 스마트폰을 연결하여 크롬에서 원격디버깅을 하는 것과 그냥 에뮬레이팅을 하는 것이 다른가요?

https://stackoverflow.com/questions/21925992/chrome-devtools-devices-does-not-detect-device-when-plugged-in

여기에 기술된대로 연결을 시도해보고 있는데 잘 안 되네요 ㅠㅠ

 

부트스트랩 홈페이지에서는 modal-lg와 modal-sm가 있다는 내용만 나오는데

아마도 이 부분과 관련된 것 같은데 좀 더 공부해볼게요~

 

그럼 좋은 주말 되세요!

다시 한 번 감사드립니다 ^-^

comment menu
2019.08.24. 06:30

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리 작성자 → 이니스프리
profile image
+1

jQuery 버전에 따라서 모바일 디바이스에서 크기를 제대로 측정하지 못한다는 언급이 있군요 ㄷㄷ

https://stackoverflow.com/questions/14094890/jquerywindow-height-doesnt-work-on-mobile-browsers

프론트엔드는 디바이스에 따라 고려할 것이 많아서 정말 어렵네요.

 

그런데 바닐라 자바스크립트로 바꿔봐도 결과가 달라지지는 않네요 ㅠㅠ

약간 주먹구구식이지만 아래와 같은 방법으로 해결을 하기는 했네요.

 

var dialog = document.querySelector('div.modal-dialog');

var modal_width = dialog.clientWidth - 30;

if (modal_width <= 0) {

modal_width = window.innerWidth - 30;

}

COLUMN_LENGTH = Math.floor(modal_width / 35);

 

제 실력에서는 정확히 어떤 문제인지 파악이 어렵네요 ㅠㅠ

모바일에서 element의 크기를 측정하는 방법에 대해 좀 더 공부를 해야겠네요~

다시 한 번 감사드립니다! 즐거운 주말 되세요 ^-^

comment menu
2019.08.24. 07:21

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 → 이니스프리
profile image

혹시,

dialog.clientWidth 라는 속성이 있나요?

comment menu
2019.08.24. 07:26

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리 작성자 → Hanam09
profile image

죄송합니다 ㅠㅠ 제가 주말인데도 5시에 일어났더니 정신이 없네요~

모바일만 확인했더니 PC에서 깨지는군요 ㅠㅠ

말씀해주신 덕분에 var modal_width = $(dialog).width() - 30; 이렇게 수정했네요!

PC와 모바일에서 모두 잘 보이네요~ 감사합니다!!

comment menu
2019.08.24. 07:33

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 24.02.11.17:21 394
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 4075
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4465
922 히어로 무비 추천 부탁드립니다! 30 이니스프리 19.10.29.13:48 307
921 흠.. 여기가 빠른 답변이 가능할까요? 3 워시 19.02.26.15:21 220
920 후이즈 도메인 3년 연장 하자마자 이상한일이... 3 참비 18.10.21.01:09 235
919 회원만 댓글창이 보이고 작성가능한 게시판의 코드를 비회원도 볼수있게 수정하고싶습니다 2 손가락개 20.09.21.01:59 211
918 회원가입 이 외안되는거애요? 5 핫슈 16.10.14.19:01 262
917 확장자 HTML 파일에서 PHP 사용하기? 4 GsusWeb 20.06.29.18:09 205
916 홈페이지 디자인을 바꾼 후부터 게시판 스킨 적용이 이상하게 됩니다 image 손가락개 20.12.04.02:56 66
915 홈페에지가 구글에서 검색되도록 봇이 수집하게 설정했는데 API도 수집하도록 설정해도 되나요? 4 손가락개 21.12.06.03:45 278
914 홈서버용 CPU 좀 봐주시면 감사하겠습니다~ ㅠㅠ 7 image 이니스프리 20.02.24.22:40 218
913 홈... 이런게 가능할까요? 21 모니터 17.10.10.18:37 401
912 홈 서버 운영과 관련하여 사소한 질문 몇 가지가 있습니다. 8 image 제르엘 21.11.22.01:54 340
911 혹시.. 3 막시모 18.02.27.15:13 177
910 혹시 호스트 차원에서 IP차단도 지원이 되나요? 2 Nodeulnaru 17.02.27.23:29 355
909 혹시 파이어베이스 사용하고 계시는 분 있으실까요? 공부에 도움될 만한 개발자 문서가 따로 있을까요? 3 제목학원장 22.01.07.13:57 244
908 혹시 크롬 '개발자 도구' 잘 사용하시는 분이 있을까요? 질문이 있어서요. 16 image JAVA 17.11.10.17:31 745
907 혹시 지금 호스팅 신청이 안되는건가요? 2 Doge아시.. 17.07.23.00:07 222
906 혹시 이런건 호스팅 규칙에서 어긋납니까? 2 출사로 22.12.23.07:38 336
905 혹시 이거 툴 프로그램 뭔지 아시는분 계신가요? 6 image JAVA 17.11.13.14:30 341
904 혹시 워드프레스 메인페이지 위젯 출력 어캐하나요? 4 핫슈 17.09.05.04:12 337
903 혹시 반디캠으로 찍은 영상 도 올릴수잇습니까? 3 핫슈 18.04.09.17:37 213