グローバルJavaScript入力欄をAceエディタ化 & jQueryライクにオブジェクトスタイルを編集 [geoEditor-1-4]
下記記事で紹介したスクリプトの改良版です(v.4)。
v.3からの改善点
- GeoGebraオブジェクトを、jQueryライクにセレクトして、スタイル情報を参照・変更できるようになりました(後述)。
機能紹介
グローバルJavaScript入力欄を綺麗なエディターにする
本スクリプトを導入すると、下図のように、グローバルJavaScript入力欄が、綺麗なエディター(Aceエディター)になる。
コードの色分け、自動補完、構文エラー警告、自動整形(エディタをダブルクリック)などの機能があるので、サクサク入力できる。
GeoGebraオブジェクトをjQueryライクにセレクトする
g$(セレクタ)
で、GeoGebraオブジェクトをjQueryライクに選択できる。
たとえば、
g$('#A') → Aという名前のオブジェクト
g$('.point') → すべての点
g$('@:not(#A)') → A以外の全てのオブジェクト
というように使う。
g$の使い方は、後日詳細に解説したいと考えているが、さしあたり、下記記事を参照。
g$を利用すれば、セレクトしたGeoGebraオブジェクトのスタイル変更が、容易に可能である。
たとえば、
で、全ての点を非表示にできる。
さらに、
で、すべての青色の点を対象に、「色を赤くし、ラベルを非表示にし、on click スクリプトをセットする」という操作を実行できる。
下記に示されているXML属性は、基本的にすべて編集可能である(オブジェクトタイプによって、そもそも使用できない属性は、もちろん除く)。
https://wiki.geogebra.org/en/Reference:Common_XML_tags_and_types#Element:_element
導入方法
グローバルJavaScript記述欄に、本記事末尾のスクリプトをコピペする。
エディター導入前に、すでにグローバルJavaScript欄にスクリプトを記述している場合は、そのスクリプトを一旦メモ帳などにコピーしておき、エディター導入後に、再びペーストしてください。
アプレットを保存し、ブラウザを更新することで、アプレットを再読み込みすれば、グローバルJavaScript記述欄がJSエディタ化する。
入力後、アプレットを保存して再読み込みすれば、記述したスクリプトが使えるようになる。
デフォルトでは、エラー行番号とエディタ上の行番号が一致しません。
一致させたい場合は、下記スクリプト中「// firstLineNumber: ...」をコメントインしてください。
無効化の方法
①エディタの任意の箇所に「// disable_usiusi」とコメントする(カギカッコ不要) 。
②アプレットを保存する。
③アプレットを再読込して、グローバルJS入力欄が元に戻っていることを確認する。
④グローバルJS入力欄に書かれたスクリプトを全て削除する。これまでエディタに記述したスクリプトを引き続き使用したい場合は、それをグローバルJS入力欄にコピペする。そして、アプレットを保存する。
再導入したい場合
上記ステップ③まで実行した段階で、エディタを再導入したい場合は、グローバルJS入力欄のコメント「// disable_usiusi」を削除して、アプレットを再読み込みしてください。
ステップ④まで実行した段階で、エディタを再導入したい場合は、本記事上述「導入方法」に従って再導入してください。
スクリプト
See the Pen geoEditor-1-4 by うし (@usi_desu) on CodePen.