top coatのcss上で動的にhtml formを追加する

css, html, Illustrator, javascript

Adobe extensionを開発しているとformを扱う事が多くなります。jsxから数値を取得して、それをパネル上で表示して、数値を入力またjsxにアクセスしたり。デフォルトのtopcoatのcssは基本の設定が揃っていて便利ですがhtml構造が少し難しくなりがち。

前回説明したようにcheckboxやradiobuttonはlabel要素の中にdivが混じっていたりと少し複雑です。ここら辺のコードは柔軟なCEPを開発しようと思うと何度も触れる部分なので普段からまとめられると便利です。例えば以下のようなリストをjsで作るとしましょう。

各種input要素等を囲ったlabel要素があってその中にinput要素に加えてdiv要素もあったり、さらにjsxから例えばカラーデータを取得する場合なんかはさらにリスト上に表示させるためにul,liでこれらの要素を囲ったりします。これを作成するコードをモジュール化するために一つの関数に落とし込めます。

この例はtopcoat用のラジオボタンの要素作るための関数で、引数に親となる要素を受け取ってそこからラジオボタンを囲むlabelやli要素を作り、作成した要素をオブジェクトにして返します。後々クラス要素やid要素を追加する時に簡単に追加できるように各要素に簡単にアクセスできると便利だからです。例えばjsxで取得したIllustratorのカラーデータをリストで表示する時等にすぐにリストで表示できるようにするためです。具体的にillustrator上で選択したオブジェクトの塗りの色データを取得してパネル上で表示しましょう。

jsxでカラーデータを取得して

モジュール化したform作成関数からcheckboxフォームをカラーリストと共に作成します。

それでこういったコードをモジュール毎に管理する時ですがAdobe CEPだとECMA6のimport exportがなぜか標準で使用できません。勿論babel,webpackを使用すれば動くのですがなぜかthemeManagerが動かなくなったりしたのでモジュール毎に管理する場合はNodeのモジュールシステムを使用する方が良さげ。

結果トランスパイルしなくても動くし、themeManagerが止まる事もなくなったので一応は解決しました。

関数一つでinputフォーマットが作れて尚且つ要素の追加も簡単にできるので便利です。

 

サンプルをgithubに上げています。

Beer 寄付してサイトを応援する。