도와주세요

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

이니스프리2019.08.23 20:50조회 수 69댓글 5

  • 3
    • 글자 크기

안녕하세요?


어느덧 금요일이네요!


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


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



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


항상 감사드립니다 ^-^


즐거운 주말 되세요~

ཇོ་མོ་གླང་མ

  • 3
    • 글자 크기
Beautifulsoup 로그인 문제 (by Hanam09) Jquery 사용 시 $(window).load( function() 를 사용하시나요? (by 로우지)
  • 2019.8.24 01:21

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

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

     

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

  • @Hanam09
    이니스프리글쓴이
    2019.8.24 06:30

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

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

    이모지 플러그인에는 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가 있다는 내용만 나오는데

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

     

    그럼 좋은 주말 되세요!

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

  • 이니스프리글쓴이
    2019.8.24 07:21

    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의 크기를 측정하는 방법에 대해 좀 더 공부를 해야겠네요~

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

  • @이니스프리
    2019.8.24 07:26

    혹시,

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

  • @Hanam09
    이니스프리글쓴이
    2019.8.24 07:33

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

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

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

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

댓글 달기

번호 제목 글쓴이 날짜 조회 수
공지 사이트 정보 등록에 경고로 변경된 분들 참고하세요.7 마스터 2019.06.19 1798
공지 [중요 공지 포함] 사이트가 복구 되었습니다.42 마스터 2019.06.18 1995
공지 호스팅 신청이 다시 가능합니다.18 마스터 2019.04.18 2607
공지 회원 전용 페이지가 생겼습니다.15 마스터 2018.03.20 8577
공지 [필독] 질문하는 방법6 마스터 2018.02.23 1104
614 리눅스에서.. 무선랜카드 활성화?켜기?2 홀민 2019.09.10 31
613 [미디어위키] 시각편집기 no vrs Piedots 2019.09.03 31
612 호스팅패널에서 서브도메인 사용하시는 분 계신가요?2 joyfuI 2019.08.28 52
611 스포어에서 허용하는 이미지 업로드 확장자 및 ios에서의 input 태그 줌과 관련하여 여쭤봅니다2 이니스프리 2019.08.27 43
610 Nginx 이미지 외부링크 방지 설정 여부를 확인하는 방법2 이니스프리 2019.08.26 41
609 Beautifulsoup 로그인 문제18 Hanam09 2019.08.24 187
부트스트랩 모달의 사이즈를 구해서 사이즈에 맞게 이모지 n개/행을 출력하려고 하는데요.5 이니스프리 2019.08.23 69
607 Jquery 사용 시 $(window).load( function() 를 사용하시나요?5 로우지 2019.08.20 49
606 ftp.studyforus.com은 서비스를 중지하신건가요?2 Piedots 2019.08.19 44
605 출첵을 했는데 처리가 제대로 안됐어요! title: 마휘핑왕뚠뚠돈까스라이츄 2019.08.19 23
604 imgur 사용하시는분.... 잘아시는분...질문!5 홀민 2019.08.18 44
603 a태그를 특정 조건에서만 비활성화시키고 싶은데... +사소한 기능 문제6 title: 마휘핑왕뚠뚠돈까스라이츄 2019.08.08 87
602 이거 도메인 사용 가능한 거 맞죠?13 title: 마휘핑왕뚠뚠돈까스라이츄 2019.08.08 85
601 자바스크립트는 왜 이럴까요...5 title: 마휘핑왕뚠뚠돈까스라이츄 2019.08.07 51
600 창 크기에 따라서 표의 크기가 달라지는 태그는 없나요?6 title: 마휘핑왕뚠뚠돈까스라이츄 2019.08.05 76
599 자바스크립트 FormData와 관련된 메서드의 IE 호환성과 관련하여 질문 드립니다 ^^6 이니스프리 2019.08.05 83
598 프로알라 에디터를 사용하면 클라이언트단에서 이미지 리사이징을 할 수 있는가요?6 이니스프리 2019.08.02 67
597 IE11에서 이미지가 깨지는 현상을 해결할 수 있을까요?2 이니스프리 2019.08.02 100
596 야후재팬 메일 이용하시는분 계신가요?2 슬기 2019.07.29 49
595 Composer 설치 가능한 웹호스팅 추천 부탁드립니다4 이니스프리 2019.07.29 49
이전 1 2 3 4 5 6 7 8 9 10... 31다음
첨부 (3)
summernote-ext-github-emojis.js
10.4KB / Download 6
image 20190823204130.png
316.9KB / Download 2
Screenshot_20190823-204318_Chrome.jpg
139.7KB / Download 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...