無料ブログ「rentafree.net」の管理人ブログ

ブログエディターのポップアップ座標を調整しました

前回に引き続きブログエディターのポップアップの座標を調整しました。

Firefox以外ではコンテキストメニューを拡張できないので右クリック時に独自UIのコンテキストメニューを出し、
通常は右下方向に表示し画面からてはみ出す場合に左又は上に出現させるようにしていましたが、その際に画面が小さい場合に反対方向にはみ出してしまう事があったので左又は上方向にはみ出さないようにしました。

Firefox以外の独自UIのコンテキストメニューと、Firefoxを含むその他ポップアップについて、
表示されている間に画面サイズが変更された場合で画面からはみ出す場合に座標調整を行うようにしました。

Firefoxでポップアップが出ている際にポップアップ要素を右端に移動した場合にレイアウトが崩れる場合があったので調整しました。


今回の変更で、一応はAndroid版のGoogle Chromeでコンテキストメニュー(長押し)から操作が可能になっています。
文字やボタンが小さいので拡大しないと操作が難しい場合がありますが、拡大した場合はポップアップ要素がはみ出す場合があります。

現時点でIEとEdgeは動作確認しておりません。
近いうちに確認します。

ブログエディターのポップアップ座標を変更しました

ブログエディターでポップアップが出る箇所の座標を調整しました。

これまではイベント発生時のマウス座標が左上頂点になる感じで表示するようにしていましたが、
ポップアップ表示する要素の高さの半分↑にずらしました。

表示位置が↓すぎることが多いと感じたので変更しましたが、微妙・・・

ブラウザ対応表に Pale Moon を追加しました。

Pale Moonというブラウザが独自レンダリングエンジンを採用しているようなので、バージョン27.5で作確認をしてブラウザ対応表に追加しました。
GoannaレンダリングエンジンがGeckoベースなので当サービスの全ての機能が利用できそうでしたが、マイナーブラウザであまり動作確認できませんので推薦はしません。

それと、
IEの動作確認が10で止まっていて、Microsoft Edgeがブラウザ対応表に載っていないのでEdgeも近いうちに動作確認しておきます。
IE11は変化ないはずでEdgeはIEと変わらないはずです。

Androidブラウザの対応状況について

最新ブラウザの更新チェックはやらなくなっていましたが、
Androidブラウザ動作確認を行ったところ状況が変化していました。

Google Chrome
コンテキストメニューが独自UIとなります。
コンテキストメニューが出しにくいです。
ブラウザ対応表に記載しておりましたが、
現在のバージョン61で確認したところ、コンテキストメニューとテキストセレクターが同時に出るようで、両方共確実に出る感じでした。
ただし、コンテキストメニューが独自UIになるのはPC版Chromeと同じで<menu>に対応していないためどうにもならず、
独自UIのコンテキストメニューがソフトキーボードと重なって欠けてしまい操作できない部分が生じる場合があるのと、
テキストセレクターとコンテキストメニューが重なってしまう場合があるので選択範囲の調整がしにくい。
という問題がありました。
テキストセレクターとコンテキストメニューが重なってしまうのは対応難しそうなのですが、ソフトキーボードと重なるのは対策できそうな気がしますので、近日中に改善を試みます。

Firefox
エディタ上でコンテキストメニューが出せません。
上部ボタンによる選択範囲へのタグ適用ができません。
ブラウザ対応表に記載しておりましたが、
現在のバージョン56で確認したところ、上部ボタンによる選択範囲へのタグ適用はできるようになっていました。
テキストのある行で長押しするとテキストセレクターだけが出てきてしまうので、コンテキストメニューの方は相変わらずダメです。


現状でもChromeの方がマシかな・・・
と思ったのですが、テキストセレクターとコンテキストメニューが重なってしまうと選択範囲の変更がし難いですから、むしろコンテキストメニューが出ないFirefoxの方が上部ボタンでの操作がしやすくて良いような気も・・・

Chromeのコンテキストメニューの位置改善を試みると記載しましたが、むしろ現状はスマホではコンテキストメニューを出さないほうが良い気も・・・
テキストセレクターのメニューに<menu>タグで項目追加ができれば良いのだが・・・