First pass at hiding JS dependencies from implementation

Create script tags dynamically inside the constructor, pulling the ACE JavaScript libraries from the relative package path. Don't create an instance of the ACE editor until the dynamically created script has loaded. Add a guard in the content setter to prevent calling methods on a JS proxy that might not be up yet. Huge thanks to @santiaago for pairing on this.
eee-c · May 3, 2013 · e84118c · e84118c
1 parent 8eff287
commit e84118c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/example/public/index.html b/example/public/index.html
@@ -1,8 +1,6 @@
 <head>
-  <script src="packages/ice_code_editor/ace/ace.js" type="text/javascript" charset="utf-8"></script>
   <script src="packages/browser/dart.js"></script>
   <script src="main.dart" type="application/dart"></script>
-
 </head>
 <h1>Hello</h1>
-<div style="width:600px; height: 400px" id="ace"></div>
+<div style="width:600px; height: 400px" id="ice"></div>
diff --git a/example/public/main.dart b/example/public/main.dart
@@ -1,7 +1,8 @@
 import 'package:ice_code_editor/editor.dart' as ICE;
 
 main() {
-  var ice = new ICE.Editor('ace');
+  var ice = new ICE.Editor('ice');
+
   ice.content = '''
 main() {
   print("Dart rocks");

diff --git a/lib/editor.dart b/lib/editor.dart
@@ -1,19 +1,36 @@
 library ice;
 
 import 'dart:html';
+import 'dart:async';
 import 'package:js/js.dart' as js;
 
 class Editor {
   bool edit_only, autoupdate;
   String title;
   var _ace;
 
-  Editor(el, {this.edit_only:false, this.autoupdate:true, this.title}) {
-    _ace = js.context.ace.edit(el);
+  Editor(id, {this.edit_only:false, this.autoupdate:true, this.title}) {
+    var script = new ScriptElement();
+    script.src = "packages/ice_code_editor/ace/ace.js";
+    document.head.nodes.add(script);
+
+    script.onLoad.listen((event) {
+      this._ace = js.context.ace.edit(id);
+      js.retain(this._ace);
+    });
   }
 
   set content(String data) {
-    _ace.setValue(data, -1);
+    if (this._ace == null) {
+      // TODO: completer?
+      // this.waitForAce.then(updateAceValue);
+      var wait = new Duration(milliseconds: 50);
+      new Timer(wait, (){ this.content = data;});
+      return;
+    }
+
+    this._ace.setValue(data, -1);
+    this._ace.focus();
   }
 
   String get content => _ace.getValue();

diff --git a/test/index.html b/test/index.html
@@ -1,7 +1,6 @@
 <html>
 <head>
   <title>ICE Test Suite</title>
-  <script src="packages/ice_code_editor/ace/ace.js" type="text/javascript" charset="utf-8"></script>
   <script type="application/dart" src="editor_test.dart"></script>
   <script src="packages/browser/dart.js"></script>
 </head>