Dashboard : ajout js / css de widgets

plugin/dashboard/DashboardWidget.class.php

@@ -78,7 +78,23 @@ class DashboardWidget extends Entity{
 	function toData(){
 		$row = $this->toArray();
 		$model = DashboardWidget::model($this->model);
+
 		$finalRow = $model->toArray();
+
+		if(isset($model->css)){
+			if(!isset($finalRow['cssUrl'])) $finalRow['cssUrl'] = array();
+			foreach($model->css as $css){
+				$finalRow['cssUrl'][] = ROOT_URL.'/'.str_replace(array('\\','/'),SLASH,str_replace(__ROOT__,'',$css));
+			}
+		}
+
+		if(isset($model->js)){
+			if(!isset($finalRow['jsUrl'])) $finalRow['jsUrl'] = array();
+			foreach($model->js as $js){
+				$finalRow['jsUrl'][] = ROOT_URL.'/'.str_replace(array('\\','/'),SLASH,str_replace(__ROOT__,'',$js));
+			}
+		}
+
 		foreach($row as $attribute=>$value){
 			if(isset($value)) $finalRow[$attribute] = $value;
 		}

plugin/dashboard/action.php

@@ -151,9 +151,9 @@ Action::register('dashboard_widget_refresh',function(&$response){
 	}
 
 	foreach(DashboardWidget::model() as $model){
-		if(!isset($model->refresh) || !isset($widgets[$model->model]) ) continue;
+		if(!isset($model->content) || is_string($model->content) || !isset($widgets[$model->model]) ) continue;
 		
-		$method = $model->refresh;
+		$method = $model->content;
 		foreach($widgets[$model->model] as $currentWidget)
 			$method($currentWidget);
 			$response['rows'][] = $currentWidget;

plugin/dashboard/css/widget-clock.css

@@ -0,0 +1,4 @@
+.widget-clock-content{
+	font-size: 40px;
+	color: #cecece;
+}

plugin/dashboard/dashboard.plugin.php

@@ -205,13 +205,14 @@ Plugin::addHook('widget',function(&$models){
 		$model->headerBackground = 'rgb(0, 123, 255)';
 		$model->description = 'Une Horloge toute couillone';
 		$model->label = 'Horloge';
-		$model->content = '<div class="text-center m-auto">13:37</div>';
 		$model->width = 3;
 		$model->height = 3;
 		$model->model = 'clock';
-		$model->refresh = function(&$widget){
-			$widget->content = '<div class="text-center m-auto">'.date('H:i:s').'</div>';
-			$widget->label = 'Horloge '.date('d-m-Y H:i:s').'';
+		$model->css = array(__DIR__.'/css/widget-clock.css?v='.time());
+		$model->js = array(__DIR__.'/js/widget-clock.js?v='.time());
+		$model->content = function(&$widget){
+			$widget->content = '<div class="text-center m-auto widget-clock-content">'.date('H:i:s').'</div>';
+			$widget->label = 'Horloge '.date('d-m-Y H:i:s');
 		};
 		$model->configure = function($widget,$form){
 			//conf form @todo

plugin/dashboard/js/dashboard.js

@@ -203,12 +203,58 @@ class Dashboard {
 		this.renderPositions();
 	}
 
+	loadJs(files,iteration,callback){
+		var object = this;
+		var js = files[iteration];
+
+		if($('script[src="'+js+'"]').length!=0 || js==null) {
+			if(files.length > iteration) object.loadJs(files,iteration+1,callback);
+			if((files.length-1) == iteration) if(callback) callback();
+			return;
+		}
+		//on supprime tout autre js ayant la même base mais des versions plus vielles
+		var baseJs = js.replace(/\?v=.*/gm,'');
+		$('script[src^="'+baseJs+'?"]').remove();
+
+		var jsFile = document.createElement('script');
+		jsFile.setAttribute("type","text/javascript");
+		document.getElementsByTagName("body")[0].appendChild(jsFile);
+		jsFile.onload = function() {
+			if(files.length > iteration) object.loadJs(files,iteration+1,callback);
+			if((files.length-1) == iteration) if(callback) callback();
+		};
+		jsFile.src =  js;
+	}
+
 	//Ajout d'un widget en fonction de paramètre
-	addWidget(widgetOptions){
+	addWidget(widgetOptions,callback){
 		var object = this;
 		//Ajout du widget au tableau de widgets interne
 		object.widgets[widgetOptions.id] = widgetOptions;
 
+		//Ajout de css tiers si définits
+		if(widgetOptions.cssUrl && widgetOptions.cssUrl.length>0){
+			for (var k in widgetOptions.cssUrl) {
+				var url = widgetOptions.cssUrl[k];
+				if($('link[href="'+url+'"]').length!=0) continue;
+				//on supprime tout autre css ayant la même base mais des versions plus vielles
+				var baseCss = url.replace(/\?v=.*/gm,'');
+				$('link[href^="'+baseCss+'"]').remove();
+				var cssFile = document.createElement('link');
+				cssFile.setAttribute("rel","stylesheet");
+				cssFile.setAttribute("type","text/css");
+				cssFile.setAttribute("href", url);
+				document.getElementsByTagName("body")[0].appendChild(cssFile);
+			}
+		}
+
+		//Ajout de js tiers si définits
+		if(widgetOptions.jsUrl && widgetOptions.jsUrl.length>0){
+			object.loadJs(widgetOptions.jsUrl,0,function(){
+				if(callback) callback(data);
+			});
+		}
+
 		//Render de la template pour les propriétés du widget courant
 		object.renderContent(widgetOptions.id);
 
@@ -292,7 +338,6 @@ class Dashboard {
 	renderContent(id) {
 		
 		var widget = this.widgets[id];
-		console.log(id,widget);
 		var widgetElement = widget.element!=null ? widget.element : $(Mustache.render(this.widgetTemplate, widget));
 		
 		if(widget.label !== null) widgetElement.find('.widget-header-title').html(widget.label);

plugin/dashboard/js/widget-clock.js

@@ -0,0 +1 @@
+alert('hello world');