前提・実現したいこと
Piskelというブラウザ上で無料で利用できるドット絵ソフトがあるのですが
オープンソースがあり、それをiframe埋め込み型に変更してくれている人がいます。
それをどうにかスマホ用に移行したいと考えています。
スマホ用の画面にしたいため、必要なものだけ全画面表示にし
常に使うものじゃければボタンを押さない限り出てこないようにしようと考えています。
(divのdisplay設定のblock、noneでいけると思っています)
Buttonをクリックしたらtool iconの一覧を表示させたい為。
そのため、とりあえず「選択しているtool iconを取得したい」です。
取得したらBUTTONに同じものを表示させようと思っています。
発生している問題・エラーメッセージ
ToolIconの画面は以下で設定していることは分かりました。
editor/index.html
html
1<iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display" ></iframe>
editor/css/piskel-style-packaged-2015-09-02-11-47.css
上記にはツールアイコンや選択された後の金枠などの設定がされていることが分かっています。
css
1.tool-icon { 2 position : relative; 3 cursor : pointer; 4 width: 46px; 5 height: 46px; 6 margin: 1px; 7 background-color: #3a3a3a; 8 background-repeat: no-repeat; 9 background-position: 12px 12px; 10 background-size: 24px 24px; 11} 12 13.tool-icon.selected { 14 cursor: default; 15 background-color: #444; 16} 17 18.tool-icon.selected:before { 19 content:""; 20 position : absolute; 21 height : 100%; 22 width : 100%; 23 border: 3px solid gold; 24 box-sizing: border-box; 25 -moz-box-sizing: border-box; 26} 27 28.tool-icon:hover { 29 background-color: #444; 30}
pngファイル等は上記cssファイルで設定しているのは分かりましたが、
selectedで枠をgoldにするというのは共通で
現在選択されている画像等をどうやって取得するのかは分かりませんでした。
toolIDというものを取得すれば良いのかと思い以下調べましたが、分かりませんでした。
editor/js/piskel-packaged-2015-09-02-11-47.js
javascript
1 ns.ToolController.prototype.onSelectToolEvent_ = function(event, toolId) { 2 var tool = this.getToolById_(toolId); 3 if (tool) { 4 this.selectTool_(tool); 5 } 6 }; 7 8 9 /** 10 * @public 11 */ 12 ns.ToolController.prototype.init = function() { 13 this.createToolsDom_(); 14 this.addKeyboardShortcuts_(); 15 16 // Initialize tool: 17 // Set SimplePen as default selected tool: 18 this.selectTool_(this.tools[0]); 19 20 // Activate listener on tool panel: 21 $('#tool-section').mousedown($.proxy(this.onToolIconClicked_, this)); 22 23 $.subscribe(Events.SELECT_TOOL, this.onSelectToolEvent_.bind(this)); 24 };
試したこと
「this.tools[0]」が左上のただのペンアイコンなので、
これを利用すればBUTTONに表示も可能なのかと思いましたが、alertに何も表示されず。「getToolById」などのところにalertも追加しましたが何も表示されず。
キーワードで検索し、関係ありそうなところに色々実施しましたが、
収穫はゼロでした。
Piskelのスマホ向けアプリが出てくれれば良いのですが
まだ出来る予定もなさそうなのでスマホ向けに改変できないか検討しています。
出来ないのであれば出来ないで良く、とりあえず他の作業を進めようと思います。
ヒントでもなんでもいいのでわかる方がいらっしゃいましたら教えてください。
補足情報(FW/ツールのバージョンなど)
Win10
Monaca(HTML5ハイブリッドアプリ開発プラットフォーム)
あなたの回答
tips
プレビュー