First pass at hiding JS dependencies from implementation

eee-c · eee-c · commit e84118c948d9 · 2013-05-03T00:37:28.000-04:00
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.
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>
