Merge pull request #62 from paviro/master

Added external css and js dependencies to module loader

README.md

@@ -10,7 +10,7 @@ Runs as a php script on a web server with basically no external dependencies. *C
 
 ##Configuration
 
-Modify `js/config.js` to change some general variables (language, weather location, compliments, news feed RSS and to add your own ICS calendar)
+Modify `js/config.js` to change some general variables (language, weather location, compliments, news feed RSS and to add your own ICS calendars)
 
 To use the OpenWeatherMap API, you'll need a free API key. Checkout [this blogpost](http://michaelteeuw.nl/post/131504229357/what-happened-to-the-weather) for more information.
 
@@ -44,9 +44,9 @@ Checks the git version and refreshes if a new version has been pulled.
 
 Takes the user's inserted location, language, unit type, and OpenWeatherMap API key and grabs the five day weather forecast from OpenWeatherMap. You need to set the API key in the config for this to work. (See *configuration*.)
 
-##Extensions
+##Modules
 
-###[MagicMirror-Extensions by PaViRo](https://github.com/paviro/MagicMirror-Extensions)
+###[MagicMirror-Modules by PaViRo](https://github.com/paviro/MagicMirror-Modules)
 
 **Current features:** FRITZ!Box Callmonitor <br>
 **Future features:** Faceregognition, personalized views, online banking through HBCI and multiple calenders based on faceregognition.

controllers/modules.php

@@ -1,11 +1,43 @@
 <?php
-	$modules = array_filter(glob('modules/*'), 'is_dir');
+	$modules_folder = 'modules/';
-	foreach ($modules as &$module) {
+	$modules = array_filter(glob($modules_folder."*"), 'is_dir');
-		//Add JS file of module
+	foreach ($modules as $module) {
+		//Add container arround module
+		print_r( '<div id="'.substr($module, strlen($modules_folder)).'">' );
+		
+		//Load files to include
+		$include_files = include($module."/include.php");
+		//Add Javascript files
+		foreach ($include_files["js_files"] as $file) {
+			//Check if js file is hosted on a remote server
+			if (preg_match('#^https?://#i', $file) === 1) {
+				print_r('<script src="'.$file.'"></script>'."\xA");
+			}
+			//add local path to module folder
+			else{
+				print_r('<script src="modules/'.$module.'/'.$file.'"></script>'."\xA");
+			}
+		};
+		//Add CSS files
+		foreach ($include_files["css_files"] as $file) {
+			//Check if css file is hosted on a remote server
+			if (preg_match('#^https?://#i', $file) === 1) {
+				print_r('<link rel="stylesheet" type="text/css" href="'.$file.'">'."\xA");
+			}
+			//add local path to module folder
+			else{
+				print_r('<link rel="stylesheet" type="text/css" href="/modules/'.$module.'/'.$file.'">'."\xA");
+			}
+		};
+	
+		//Add the modules JS file
 		print_r('<script src="'.$module.'/main.js" type="text/javascript"></script>'."\xA");
-		//Add CSS file of module
+		//Add the modules CSS file
 		print_r('<link rel="stylesheet" type="text/css" href="'.$module.'/style.css">'."\xA");
 		//Get and add HTML Elements
-		print_r(file_get_contents($module.'/elements.html'));
+		print_r(str_replace("[module]",$module ,file_get_contents($module.'/elements.html')));
+		
+		//Close module container
+		print_r("</div>");
 	}
 ?>

modules/README.md

@@ -2,14 +2,21 @@ MagicMirror
 ===========
 
 ##Modules
-A module has to contain three files: main.js, style.css and elements.html
+A module has to contain four files: `main.js`, `style.css`, `elements.html` and `include.php`.
 Other files can be loaded from within those.
 
+### include.php
+If you happen to need any other css or js file from remote host or a local file you can add it in `include.php`.
+It will be loaded before the module's main javascript, the module's css and the module's elements.
+
+Local files starting without `http` or `https` will be loaded from the `root` of the module folder. 
+If you have a file called `test.js` in your module just add `test.js` if you have the same file but in a folder called `js` inside your module folder add `js/test.js`. Same is valid for css files. Remote files will be loaded normally from the remote host, no need to specify anything.
+
 ### elements.html
-Put your custom divs and other html elements in this file (don't include any body or header tags)
+Put your custom divs and other html elements in this file (don't include any body or header tags). Any refrence of `[module]` will be replaced with the path to the module's root. `[module]/img/test.png` for example becomes `modules/name_of_module/img/test.png`.
 
 ### main.js
-Your plugins JavaScript.
+Your plugin's JavaScript.
 
 ### style.css
-CSS for your HTML elements.
+CSS for your HTML elements. All module elements get loaded into a `div`. The `id` is the name of the module's folder, which acts as the module's name.

modules/test-module/elements.html

@@ -1 +1 @@
-<!--<div id="example"> </div>-->
+<!--<div id="example"> </div><img src="[module]/test.png">-->

modules/test-module/include.php

@@ -0,0 +1,13 @@
+<?php
+//Local files starting without http or https will be loaded from the root of the module folder. If you have a file called test.js in your module just add test.js if you have the same file but in a folder called js inside your module folder add js/test.js. Same is valid for css files. Remote files will be loaded normally from the remote host, no need to specify anything.
+return array(
+	'js_files' => array(
+		//"http://spiegel.local:1234/socket.io/socket.io.js",
+		//"js/somefile.js"
+	),
+	'css_files' => array(
+		//"css/randomfile.css",
+		//"https://example.com/test.css"
+	)
+);
+?>

modules/test-module/style.css

@@ -0,0 +1,3 @@
+#test-module{
+	
+}