「FontAwesome」絵文字の入力パレット（3）/ JavaScript

「記事タイトル」で Enterを入力するとパレットが表示される 

コードに大きな不完全を抱えていました。 時々、予想外の時に専用パレットが表示されるので「何で？」と思っていたのですが、やっと理由が判りました。

先ず最初に判ったのは、「記事タイトル」の入力枠で「Enter」を入力すると、パレットが表示される事でした。

更に調べると「テーマ作成」のダイアログで「Enter」を押しても、やはりパレットが表示されます。

でコードの何処に問題があるのか判らず、あがいて変な代替コードを書いてテストしていると、問題は改善されずに「Enter」で「記事の投稿完了」画面が表示されました。 これで気付いた事が、「form」内で「Enter」を入力すると、それを正しく受け止めるコードが無い時に、「formの送信」になるという経験でした。

「ブログ編集画面」は大規模なひとつの「form」です。 この formで「submit」の反応をする間違いがあるらしいと、漸く気付きました。

問題点 

結局、専用パレットを表示するスイッチの Htmlに、不備がある事が判りました。

下は「button要素」のコードです。

「FontAwesome Palette」ver. 0.2　18行

'<li class="p-sideModule__subNavItem aw_button">'+
'<button class="p-sideModule__subNavItem__button" '+
'style="font-weight: bold">FAw</button></li>';

この「button要素」には「type属性」を指定していなかったのが原因でした。

ブログ編集画面の殆ど全ての部分が「form」で、編集した内容をブログシステムに「送信」する事を目的に作られています。 

▪専用パネルスイッチを「button要素」として生成している

▪「type属性」を省略した結果になり「type="submit"」として扱われる

ここからは私が判らない事ですが、例えば「タイトル入力枠」で「Enter」が押されると、この「button要素」は自分も押された事になる様です。 調べると form内の多くの入力に反応していて、投稿日付指定のダイアログで「input要素」に「日付を指定して Enter」を押しても、専用パレットが表示されます。

結局、「type="button"」を指定すれば、改善されました。

ちなみに、「type="submit"」を指定した場合は、この問題は同様に生じます。「form」内の「button要素」「input要素」は、「Enter」入力に対してそういう「供連れ」の動作仕様なのかも知れません。 この癖は覚えておいた方が良さそうです。

コード全体の整理をしました 

今回の修復と合わせて、コード全体の整理を行いました。

「FontAwesome」のパレット編成を指定する「li要素」を、コードの先頭に持って来ました。 カスタマイズ時にも便利だと思います。

「FontAwesome Palette」の扱い方

このツールは、アメブロ絵文字と同じ操作で直感的に扱えますが、パレットのカスタマイズなど、詳細については以下の操作マニュアルを参照ください。

「FontAwesome Palette」 操作マニュアル

「FontAwesome Palette」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 FontAwesome Palette 〕 ver. 0.3

// ==UserScript==
// @name          FontAwesome Palette
// @namespace  http://tampermonkey.net/
// @version      0.3
// @description  FontAwesome絵文字の記入ツール
// @author       Ameba Blog User
// @match        https://blog.ameba.jp/ucs/entry/srventry*
// @exclude      https://blog.ameba.jp/ucs/entry/srventrylist.do*
// @grant         none
// ==/UserScript==


pannel();

function pannel(){

    // 🟠🟠 以下のリストの行を編集・追加して、専用パネルのリストをカスタマイズできます。

    let FontAwesome_list=
        '<li><i class="fa-solid fa-arrow-rotate-right"></i></li>'+
        '<li><i class="fa-solid fa-arrows-rotate"></i></li>'+
        '<li><i class="fas fa-external-link-alt fa-sm"></i></li>'+
        '<li><i class="fa-solid fa-bars"></i></li>'+
        '<li><i class="fa-solid fa-gear"></i> </li>'+
        '<li><i class="fa-solid fa-house"></i></li>'+
        '<li><i class="fa-solid fa-magnifying-glass"></i></li>'+
        '<li><i class="fa-solid fa-circle-info"></i></li>'+

        '<li><i class="fa-solid fa-pen"></i></li>'+
        '<li><i class="fa-solid fa-pen-to-square"></i></li>'+
        '<li><i class="fa-regular fa-circle-question"></i></li>'+
        '<li><i class="fa-solid fa-circle-question"></i></li>'+

        '<li><i class="fa-solid fa-tag"></i> </li>'+
        '<li><i class="fa-solid fa-palette"></i></li>'+
        '<li><i class="fa-solid fa-chart-simple"></i></li>'+
        '<li><i class="fa-solid fa-user"></i> </li>'+

        '<li><i class="fa-solid fa-circle-user"></i></li>'+
        '<li><i class="fa-brands fa-facebook"></i> </li>'+
        '<li><i class="fa-brands fa-twitter"></i> </li>'+
        '<li><i class="fa-brands fa-instagram"></i> </li>'+
        '<li><i class="fa-brands fa-github"></i> </li>'+
        '<li><i class="fa-brands fa-wordpress"></i></li>'+
        '<li><i class="fa-brands fa-apple"></i> </li>'+
        '<li><i class="fa-brands fa-youtube"></i></li>'+

        '<li><i class="fa-solid fa-music"></i> </li>'+
        '<li><i class="fa-solid fa-circle-xmark"></i></li>'+
        '<li><i class="fa-regular fa-circle-xmark"></i></li>'+
        '<li><i class="fa-solid fa-paperclip"></i></li>'+
        '<li><i class="fa-solid fa-file"></i></li>'+
        '<li><i class="fa-regular fa-file"></i></li>'+
        '<li><i class="fa-regular fa-copy"></i></li>'+
        '<li><i class="fa-regular fa-folder-open"></i></li>'+

        '<li><i class="fa-solid fa-mug-hot"></i></li>'+
        '<li><i class="fa-solid fa-lock"></i> </li>'+
        '<li><i class="fa-solid fa-unlock"></i> </li>'+
        '<li><i class="fa-solid fa-camera"></i></li>'+
        '<li><i class="fa-solid fa-video"></i></li>'+
        '<li><i class="fa-brands fa-amazon"></i></li>'+
        '<li><i class="fa-brands fa-cc-amazon-pay"></i></li>'+
        '<li><i class="fa-solid fa-triangle-exclamation"></i></li>'+

        '<li><i class="fa-solid fa-share-from-square"></i></li>'+
        '<li><i class="fa-solid fa-wifi"></i></li>'+
        '<li><i class="fa-brands fa-line"></i></li>'+
        '<li><i class="fa-solid fa-street-view"></i></li>'+
        '<li><i class="fa-solid fa-expand"></i></li>'+
        '<li><i class="fa-solid fa-compress"></i></li>'+
        '<li><i class="fa-solid fa-toggle-on"></i></li>'+
        '<li><i class="fa-solid fa-toggle-off"></i></li>'+

        '<li><i class="fa-solid fa-power-off"></i></li>'+
        '<li><i class="fa-solid fa-microphone"></i></li>'+
        '<li><i class="fa-solid fa-thumbtack"></i></li>'+
        '<li><i class="fa-regular fa-face-smile"></i></li>'+
        '<li><i class="fa-solid fa-utensils"></i></li>';


    let css=
        '.fap_menu_wrapp { position: fixed; top: 15px; left: calc(100% - 310px); '+
        'z-index: 20; box-shadow: 20px 20px 60px 0 rgb(0 0 0 / 20%); display: none; } '+
        '.fap_menu { '+
        'font-family: Meiryo; font-size: 16px; line-height: 1.6; width: 276px; '+
        'padding: 8px; border: 1px solid #009688; border-radius: 4px; '+
        'background: #fff; box-shadow: inset 0 0 0 8px #eee; } '+
        '.fap_title { display: flex; justify-content: space-between; align-items: center; '+
        'padding: 4px 12px 2px; border-bottom: 8px solid #eee; '+
        'color: #fff; font: 16px Meiryo; background: #2196f3; } '+
        '.fap_close { display: inline-block; border: 1px solid #fff; border-radius: 2px; '+
        'height: 19px; line-height: 21px; padding: 0 3px; margin-bottom: 1px; '+
        'cursor: pointer; } '+
        '.fap_close:hover { color: #2196f3; background: #fff; } '+
        '.fap_ul { display: flex; flex-wrap: wrap; padding: 4px 0 4px 2px; } '+
        '.fap_ul li { width: 30px; margin: 4px 2px; padding: 4px 0 0; text-align: center; '+
        'font-size: 20px; line-height: 26px; } '+
        '.fap_ul li:hover { cursor: pointer; outline: 1px solid #2196f3; }';

    let menu_wrapp=
        '<div class="fap_menu_wrapp"><div class="fap_menu">'+
        '<div class="fap_title">'+
        '<b>FontAwesome　</b>'+
        '貼付：Click　　　　'+
        '<span class="fap_close">✖</span>'+
        '</div>'+
        '<div>'+
        '<ul class="fap_ul">'+
        FontAwesome_list +
        '</ul>'+
        '</div></div>'+
        '<style>'+ css +'<.style></div>';

    if(!document.querySelector('.fap_menu_wrapp')){
        document.body.insertAdjacentHTML('beforeend', menu_wrapp); }

} // pannel()




function disp_pannel(){
    let fap_menu_wrapp=document.querySelector('.fap_menu_wrapp');
    if(fap_menu_wrapp){
        fap_menu_wrapp.style.display='block'; }}


function hide_pannel(){
    let fap_menu_wrapp=document.querySelector('.fap_menu_wrapp');
    if(fap_menu_wrapp){
        fap_menu_wrapp.style.display='none'; }}



let aw_pict=document.querySelector('#sidepanel-accessoryTab-content-pictograph > ul');
if(aw_pict){
    let aw_b=
        '<li class="aw_button p-sideModule__subNavItem">'+
        '<button class="p-sideModule__subNavItem__button" '+
        'type="button"><b>FAw</b></button></li>';
    if(!aw_pict.querySelector('.aw_button')){
        aw_pict.insertAdjacentHTML('afterBegin', aw_b); }

    let aw_button=aw_pict.querySelector('.aw_button');
    if(aw_button){
        aw_button.onclick=function(event){
            event.preventDefault();
            disp_pannel(); }}}



let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
let iframe_doc;
if(editor_iframe){
    iframe_doc=editor_iframe.contentWindow.document;
    iframe_doc.addEventListener("keydown", menu_key_1); }

document.addEventListener("keydown", menu_key_1);


function menu_key_1(event){
    let fap_menu_wrapp=document.querySelector('.fap_menu_wrapp');
    if(event.keyCode==27 && fap_menu_wrapp){ //「Esc」
        event.preventDefault();
        hide_pannel(); }}


let fap_close=document.querySelector('.fap_close');
if(fap_close){
    fap_close.onclick=function(event){
        event.preventDefault();
        hide_pannel(); }}




let aw_li=document.querySelectorAll('.fap_ul li');
for(let k=0; k<aw_li.length; k++){
    let aw_class=aw_li[k].querySelector('i').className;
    aw_li[k].addEventListener("click", function(){
        set_aw(aw_class); }); }


function set_aw(aw_c){
    let selection;
    let range;
    let insert_node;

    editor_iframe=document.querySelector('.cke_wysiwyg_frame');
    if(editor_iframe){
        iframe_doc=editor_iframe.contentWindow.document;
        iframe_doc.body.focus(); // キャレットを表示

        selection=iframe_doc.getSelection();
        range=selection.getRangeAt(0);

        let insert_node_b=iframe_doc.createTextNode('\u00A0');
        range.insertNode(insert_node_b);
        range.setStartAfter(insert_node_b);

        insert_node=iframe_doc.createElement('i');
        insert_node.appendChild(iframe_doc.createTextNode('\u0020'));
        insert_node.setAttribute('class', aw_c);
        range.insertNode(insert_node);

        let insert_node_a=iframe_doc.createTextNode('\u00A0');
        insert_node.parentNode.insertBefore(insert_node_a, insert_node.nextSibling);
        range.setStartAfter(insert_node_a);
        range.collapse(); }}

「FontAwesome Palette」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「FontAwesome Palette」の最新バージョンのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）