Merge pull request #1 from marioninc/gh-pages

demo用のスクリプトを分離・popoverの幅指定の対応
marioninc · Jan 14, 2022 · e8139fa · e8139fa
2 parents c121339 + d2bc7f7
commit e8139fa
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/demo.html b/demo.html
@@ -13,6 +13,18 @@
     </style>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
     <script src="./js/fontawesome6-icon-picker.js"></script>
+    <script type="text/javascript">
+        document.addEventListener('DOMContentLoaded', init);
+        function init(){
+            iconPicker = new Fa6IconPicker({
+                title: 'アイコンを選択',
+                disableIcons : ['fa-2'],
+                targetInput : document.querySelector('input[name=icon_input]'),
+                showBtnElement: document.getElementById('select_btn'),
+                targetViewIcon: document.getElementById('view_icon'),
+            });
+        }
+    </script>
 </head>
 <body>
     <div class="container m-3">

diff --git a/js/fontawesome6-icon-picker.js b/js/fontawesome6-icon-picker.js
@@ -1,14 +1,3 @@
-function init(){
-    iconPicker = new Fa6IconPicker({
-        title: 'アイコンを選択',
-        disableIcons : ['fa-2'],
-        targetInput : document.querySelector('input[name=icon_input]'),
-        showBtnElement: document.getElementById('select_btn'),
-        targetViewIcon: document.getElementById('view_icon'),
-    });
-    // iconPicker.create();
-}
-
 class Fa6IconPicker {
     title = null; // title popoverに渡されるタイトル
     targetInput = null; // 結果を返すinput要素
@@ -22,6 +11,7 @@ class Fa6IconPicker {
     popoverOptions = { // popoverのオプション bootstrapに依存
         placement: 'bottom',
     };
+    maxWidth = '320px'; // popoverの最大幅
     isDispose = true; // 破壊されているかどうか
     extProps = {}; // 任意に追加された変数
 
@@ -67,6 +57,7 @@ class Fa6IconPicker {
             html: true,
             trigger: 'manual',
         },...this.popoverOptions});
+        this.popover.getTipElement().style.maxWidth = this.maxWidth; 
         this.toggleHandler = this.toggle.bind(this);
         if(this.isTargetInputClickEvent){
             this.targetInput.addEventListener('click', this.toggleHandler);
@@ -136,7 +127,7 @@ class Fa6IconPicker {
             let i = document.createElement("i");
             i.classList.add(zFlag ? 'fa-brands' : 'fa-solid',iconName.split(', .')[0]);
             const btn = document.createElement('button');
-            btn.classList.add('btn','btn-outline-secondary','mb-1','me-1');
+            btn.classList.add('btn','btn-outline-secondary','mb-1','me-1','mr-1');
             btn.setAttribute('data-fapc-icon-name',iconName.split(', .')[0]);
             btn.setAttribute('data-fapc-icon-type',zFlag ? 'fa-brands' : 'fa-solid');
             btn.style.width = "3em";
@@ -193,4 +184,3 @@ class Fa6IconPicker {
         this.isDispose = true;
     }
 }
-document.addEventListener('DOMContentLoaded', init);