Spelam embedded

JavascriptベースのフロントエンドシステムからSpelamを呼び出す方法について。

検討事項

sandboxとは?

プレビューとエラー

2. 関数インターフェース

 var spelam;

 let ctrl = spelam.createController();
 ctrl.setRule(ruleSrc, fileName);
 ctrl.setData(dataSRc, dataType, fileName);
 ctrl.scale(scale);
 ctrl.repeat(repeacCount);
 ctrl.completionHandler = function(){
  ...
 };
 ctrl.build();

spelam

spelam.createController

ctrl.setRule

ctrl.setData

ctrl.scale

ctrl.repeat

ctrl.clear ### ctrl.reset

ctrl.build

-> 未処理? すぐにエラーが発生したとき setTimeout(competionHandler,0);

competionHandelr

エラー

progressHandelr

Cancel

 ctrl.cancel();

3. iframe版

iframeを使うとスタイルシートの干渉、class名やID等の重複等の問題を避けることができる。

ローカルファイルで起動している場合ダメ file://localhost/...

通常版とiframe版の違い

iframe側のグローバル変数の取り出し
リサイズ時の処理
印字

3.1 フロントエンドシステム側のhtmlの書き方

大きさが固定の場合は以下のようにすればよい。

  <iframe id="iframe" src="spelam-embedded.html"
   width="800" height="600"></iframe>

本体spelam-embedded.htmlはフロントエンドシステムと同じディレクトリにコピーしておくこと。

ウインドゥの大きさにしたがてiframeの大きさを変えたい場合は、 iframeはリサイズしたときに、CSSだけで自動的に大きさを変更することができないようなのでJavascriptを用いて設定する。

親にdiv要素を入れておいてリサイズされたらその大きさに合わせる。

 <style>
  .iframeContainer{
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   overflow: hiddedn;
  }
  iframe{
   border: none;
  }
 </style>

 <div class="iframeContainer">
  <iframe id="iframe" src="spelam-embedded.html"></iframe>
 </div>

 window.addEventListener(resize,onresize,false);
 function onresize(){
   let iframe = document.getElementById('iframe');
   let container = iframe.parentNode;
   iframe.setAttribute('width', container.offsetWidth);
   iframe.setAttribute('height', container.offsetHeight);
  }
 }

3.2 グローバル変数の取り出し

以下のようにしてグローバル変数を取り出せる。

 let iframe = document.getElementById('iframe');
 let spelam = iframe.contentWindow.spelam;

3.3 印字

ブラウザのメニューから印字するとうまくいかない。

 iframe.contentWindow.print();