Merge pull request #24 from Yanrishatum/feature_css_plugins

Add support for stylsheet plugins

README.md

@@ -21,59 +21,101 @@ In your project's resource folder, you can create a `props.json` configuration f
 ### Custom plugin
 
 In your project, create an hxml configuration for building the plugin. Example:
-
-    # hide-plugin.hxml
-    -cp src
-    -lib hide
-    -lib hxnodejs
-    -lib castle
-    --macro hide.Plugin.init()
-    -js hide-plugin.js
-    -debug
-    HideImports
-
+```hxml
+# hide-plugin.hxml
+-cp src
+-lib hide
+-lib hxnodejs
+-lib castle
+--macro hide.Plugin.init()
+-js hide-plugin.js
+-debug
+HideImports
+```
 `HideImports.hx` here is just a file that lists all the classes you want to embed in your plugin. Example:
-
-    // HideImports.hx
-    import prefabs.MyPrefab1;
-    import prefabs.MyPrefab2;
-
+```haxe
+// HideImports.hx
+import prefabs.MyPrefab1;
+import prefabs.MyPrefab2;
+```
 Running `haxe hide-plugin.hxml` should now generate a `hide-plugin.js` plugin file.
 
 In your project configuration file (`res/props.json`) you can now include this file like so:
-
-    {
-        "plugins": ["../hide-plugin.js"]
-    }
-
+```json
+{
+    "plugins": ["../hide-plugin.js"]
+}
+```
+Aside from javascript plugins, you can add your own stylsheets:
+```json
+{
+    "plugins": ["../hide-plugin-style.css"]
+}
+```
 
 ### Custom prefab
 
 Example of a project-specific custom prefab:
+```haxe
+import hrt.prefab.Context;
+import hrt.prefab.Library;
+
+class MyPrefab extends hrt.prefab.Object3D {
+    
+    public function new(?parent) {
+        super(parent);
+        type = "myprefab";
+    }
 
-    import hrt.prefab.Context;
-    import hrt.prefab.Library;
+    override function make(ctx:Context):Context {
+        var ret = super.make(ctx);
+        // Custom code...
+        return ret;
+    }
 
-    class MyPrefab extends hrt.prefab.Object3D {
-        
-        public function new(?parent) {
-            super(parent);
-            type = "myprefab";
-        }
+    #if editor
 
-        override function make(ctx:Context):Context {
-            var ret = super.make(ctx);
-            // Custom code...
-            return ret;
-        }
+    override function getHideProps() : hide.prefab.HideProps {
+        return { icon : "cog", name : "MyPrefab" };
+    }
 
-        #if editor
+    #end
 
-        override function getHideProps() : hide.prefab.HideProps {
-            return { icon : "cog", name : "MyPrefab" };
-        }
+    static var _ = Library.register("myprefab", MyPrefab);
+}
+```
 
-        #end
+### Custom file views
+You can add your own viewers/editors for files, by extending `hide.view.FileView` class:
 
-        static var _ = Library.register("myprefab", MyPrefab);
-    }
+```haxe
+import hide.view.FileView;
+
+class CustomView extends FileView {
+    
+    // onDisplay should create html layout of your view. It is also called each when file is changed externally.
+    override public function onDisplay()
+    {
+        // Example of initial layout setup.
+        element.html('
+          <div class="flex vertical">
+            <div class="toolbar"></div>
+            <div class="content"></div>
+          </div>
+        ');
+        var tools = new hide.comp.Toolbar(null, element.find(".toolbar"));
+        var content = element.find(".content"));
+        // Importantly, use `getPath()` to obtain file path that you can use for filesystem access.
+        var path = getPath();
+        // ... your code to fill content
+  }
+  
+  // Register the view with specific extensions.
+  // Extensions starting with `json.` refer to `.json` files with `type` at root
+  // object being second part of extension ("type": "customView" in this sample).
+  // Otherwise it is treated as regular file extension.
+  // Providing icon and createNew is optional. If createNew set, HIDE file tree will have a context menu item to create new file that FileView represents.
+  static var _ = hide.view.FileTree.registerExtension(CustomView, ["json.customView", "customview"], { icon: "snowflake-o", createNew: "Dialog Context" });
+  
+}
+```

hide/Ide.hx

@@ -490,8 +490,8 @@ class Ide {
 		];
 
 		var plugins : Array<String> = config.current.get("plugins");
-		for( file in plugins )
-			loadScript(file, function() {});
+		for ( plugin in plugins )
+			loadPlugin(plugin, function() {});
 
 		databaseFile = config.project.get("cdb.databaseFile");
 		loadDatabase();
@@ -568,7 +568,7 @@ class Ide {
 		return false;
 	}
 
-	function loadScript( file : String, callb : Void -> Void ) {
+	function loadPlugin( file : String, callb : Void -> Void, ?forceType : String ) {
 		file = getPath(file);
 		var wait = scripts.get(file);
 		if( wait != null ) {
@@ -580,8 +580,7 @@ class Ide {
 		}
 		wait = [callb];
 		scripts.set(file, wait);
-		var e = js.Browser.document.createScriptElement();
-		e.addEventListener("load", function() {
+		function onLoad() {
 			scripts.set(file, []);
 			for( w in wait )
 				w();
@@ -590,17 +589,37 @@ class Ide {
 				scripts.set("",[]);
 				for( w in wait ) w();
 			}
-		});
-		e.addEventListener("error", function(e) {
+		}
+		function onError() {
 			error("Error while loading "+file);
-		});
-		e.async = false;
-		e.type = "text/javascript";
-		e.src = "file://"+file.split("\\").join("/");
-		js.Browser.document.body.appendChild(e);
+		}
+		var type = forceType == null ? haxe.io.Path.extension(file).toLowerCase() : forceType;
+		switch ( type ) {
+			case "js":
+				var e = js.Browser.document.createScriptElement();
+				e.addEventListener("load", onLoad);
+				e.addEventListener("error", onError);
+				e.async = false;
+				e.type = "text/javascript";
+				e.src = "file://"+file.split("\\").join("/");
+				js.Browser.document.body.appendChild(e);
+			case "css":
+				var e = js.Browser.document.createLinkElement();
+				e.addEventListener("load", onLoad);
+				e.addEventListener("error", onError);
+				e.rel = "stylesheet";
+				e.type = "text/css";
+				e.href = "file://" + file.split("\\").join("/");
+				js.Browser.document.body.appendChild(e);
+			default: error('Unknown plugin type $type for file $file');
+		}
 		fileWatcher.register(file,reload);
 	}
 
+	inline function loadScript( file : String, callb : Void -> Void ) {
+		loadPlugin(file, callb);
+	}
+
 	public function reload() {
 		hasReloaded = true;
 		fileWatcher.dispose();