<?php 


ce("jstreeload")
->js(function(){
?>
<script>
	app.directive('jstreeload', function ($compile) {
		return {
			restrict: 'EA',
			scope:{ngModel:"=",current:"=",accept:"="},
			link: function ($scope, iElement, iAttrs) {
				var elm = iElement;
				var plugins = ["dnd", "contextmenu", "wholerow", "checkbox", "massload", "search", "sort", "state", "types", "unique", "changed", "conditionalselect"];
				var s = "";
				for (var i = 0; i < plugins.length; i++) {
					if(iAttrs[plugins[i]]){
						s += " "+plugins[i]+"=\""+iAttrs[plugins[i]]+'"';
					}
				}
				$scope.$watch("ngModel",function(){
					if ($scope.ngModel) {
						var ee = $compile('<jstree jstree="jstree" ng-model="ngModel" current="current" accept="accept" '+s+'></jstree>')($scope);
						$(elm).replaceWith(ee);
						elm = ee;
					}else{
						$scope.jstree.deselect_all();
					}
				});
				if ($scope.ngModel) {
					var ee = $compile('<jstree jstree="jstree" ng-model="ngModel" current="current" accept="accept" '+s+'></jstree>')($scope);
					$(elm).replaceWith(ee);
					elm = ee;
				}
			}
		};
	});
</script>
<?php
});
ce("jstree")
->js(function(){
?>
<script>
	app.directive('jstree', [function () {
		return {
			restrict: 'E',
			template:'<div></div>',
			replace:true,
			scope:{ngModel:"=",current:"=?",accept:"=?",addnew:"=?",jstree:"=?",onselected:"&?"},
			controller:function($scope){
				$scope.stopwtach = false;
				$scope.initNode = function(node){
					if (node && node.state && node.state.selected) node.state.selected = false;
					
				}
				$scope.RinitAllNode = function(list){
					if (list && list.length){
						for (var i = 0; i < list.length; i++) {
							$scope.initNode(list[i]);
							$scope.RinitAllNode(list[i].children);
						}
					}
				}
				$scope.$watch("ngModel", function(){
					if($scope.stopwtach || !$scope.ngModel){
						$scope.stopwtach = false;
						return;
					}
					if ($scope.jstree) {
						$scope.RinitAllNode($scope.ngModel);
						setTimeout(function(){
							if ($scope.ngModel) {
								$scope.jstree.settings.core.data = $scope.ngModel;
							}else{
								$scope.jstree.settings.core.data = [];
							}
							$scope.jstree.refresh();
						},10);
					}
				});
				$scope.save = function(){

				}
				$scope.affectData = function(name){
					$scope.affectArray($scope.ngModel,$scope.jstree.get_json('#', { 'flat': true }));
					setTimeout(function(){ $scope.$apply(); },10);
				}
				$scope.clearArray = function(a){
					if(a) a.splice(0,a.length);
					return a;
				}
				$scope.affectArray = function(ref,arr){
					$scope.clearArray(ref);
					for (var i = 0; i < arr.length; i++) {
						ref.push(arr[i]);
					}
					return ref;
				}
				setTimeout(function(){
					$scope.accept = function(callback){
						$scope.stopwtach = true;
						$scope.affectArray($scope.ngModel,$scope.jstree.get_json('#', { 'flat': true }));
						$scope.jstree.settings.core.data = $scope.ngModel;
						$scope.jstree.refresh();
						if(callback) callback($scope.ngModel);
					}
					$scope.addnew = function(name){
						$scope.jstree.create_node('#', {
					      "text": name
					  	}, "last", function() {
					  	  $scope.accept();
					  	  setTimeout(function(){ $scope.$apply(); },10);
					  	});
					}
				},10);
			},
			link:function($scope,iElement,attrs){
				loadjs(window.$.jstree,{
					js:["//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"],
					css:["//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"]
					},function(){
						var elm = $(iElement);
						if(!attrs.dnd) attrs.dnd = "true";
						if(!attrs.contextmenu) attrs.contextmenu = "true";
						if(!attrs.wholerow) attrs.wholerow = "true";
						if(!attrs.checkbox) attrs.checkbox = "false";
						if(!attrs.massload) attrs.massload = "false";
						if(!attrs.search) attrs.search = "false";
						if(!attrs.sort) attrs.sort = "false";
						if(!attrs.state) attrs.state = "false";
						if(!attrs.types) attrs.types = "false";
						if(!attrs.unique) attrs.unique = "false";
						if(!attrs.changed) attrs.changed = "false";
						if(!attrs.conditionalselect) attrs.conditionalselect = "false";
						var plugins = ["dnd", "contextmenu", "wholerow", "checkbox", "massload", "search", "sort", "state", "types", "unique", "changed", "conditionalselect"];
						var m = [];
						for (var i = 0; i < plugins.length; i++) {
							if (attrs[plugins[i]] == "true") {
								m.push(plugins[i]);
							}
						}
						$scope.RinitAllNode($scope.ngModel?$scope.ngModel:[]);
						elm.jstree({
							plugins : m,
							core : {
								"check_callback" : true,
								data : $scope.ngModel?$scope.ngModel:[]
							},
						}).on("changed.jstree",function(e,data){
							$scope.affectData("changed:"+data.action);
						}).on("rename_node.jstree",function(e,data){
		 					$scope.affectData("rename_node");
						}).on("move_node.jstree",function(e,data){
		 					$scope.affectData("move_node");
						}).on("delete_node.jstree",function(e,data){
		 					$scope.affectData("delete_node");
						}).on("create_node.jstree",function(e,data){
		 					$scope.affectData("create_node");
						}).on("select_node.jstree",function(e,data){
							$scope.current = data.node;
							if($scope.current.data instanceof Array) $scope.current.data = {};
							$scope.current.data = $scope.current.data || {};
		 					if($scope.onselected) $scope.onselected()
		 					$scope.affectData("select_node");
						});
						$scope.jstree = $.jstree.reference(elm);
						$scope.jstree.deselect_all(true);
						setTimeout(function(){ $scope.$apply(); },10);
				});
			}
		};
	}])
</script>
<?php
});










ce("panelTree")
->tpl(function(){
?>
<div class="panel {{class}}">
	<div class="panel-heading" ng-show="titre && titre!=''">
		{{titre}}
	</div>
	<div class="panel-body">
		<div style="display: flex;">
			<div style="margin: -15px;width:{{hidefrom == 'true'?'100%':width1+';margin-right: 15px'}};flex:1;background: #f5f5f5;border-right: 1px solid #ddd;min-height: {{minHeight}};">
				<jstree onselected="onselected" ng-model="ngModel" current="current" accept="accept" addnew="addnew" jstree="jstree" contextmenu="{{contextmenu}}" dnd="{{dnd}}"></jstree>
			</div>
			<div style="width:{{width2}};" ng-hide="hidefrom == 'true'">
				<div item-directive></div>
			</div>
		</div>		
	</div>
	<div class="panel-footer" ng-show="footerhtml">
		<div bind-html-compile="footerhtml"></div>
		<div style="clear:both"></div>
	</div>
</div>
<?php
})
->js(function(){
?>
<script>
	app.directive('itemDirective', function($compile) {
	  return {
	    restrict:"A",
	    replace:true,
	    link: {
	      pre: function(scope, element, attr, ctrl, transclude) {
	        scope.scopename  = "itemDirective";
	        if (transclude) {
	          transclude(scope, function(clone) {
	            element.replaceWith(clone); 
	          }); 
	        } 
	      } 
	    } 
	  }; 
	});
	app.directive('paneltree', [function () {
		return {
			restrict: 'EA',
			replace:true,
			transclude:true,
			template:{{inject-tpl}},
			scope:{ngModel:"=?",current:"=?",class:"@",width1:"@",width2:"@",minHeight:"@",titre:"@",accept:"=?",addnew:"=?",jstree:"=?",contextmenu:"@?",dnd:"@?",onselected:"&?",hidefrom:"@?"},
			controller:function($scope){
				$scope.scopename="paneltree";
				$scope.footerhtml = $scope.footerhtml || null;
				$scope.width1 = $scope.width1 || "30%";
				$scope.width2 = $scope.width2 || "70%";
				$scope.hidefrom = $scope.hidefrom || "false";
				$scope.ctrl = $scope.$parent;
			},
			link: function (scope, iElement, iAttrs) {
				
			}
		};
	}]);
	app.directive('paneltreeFooter', [function () {
		return {
			restrict: 'EA',
			transclude:true,
			template:"<span item-directive></span>",
			scope:{},
			controller:function($scope){
				$scope.scopename="paneltreeFooter";
			},
			link: function ($scope, iElement, iAttrs) {
				if(!iAttrs.minHeight) iAttrs.minHeight = "100px";
				$scope.$parent.footerhtml = $(iElement).html();
				$(iElement).html("");
			}	
		};
	}]);

</script>
<?php
});












ce("jstreeElement")
->tpl(function(){
?>
<div>
	<div style="display:flex;cursor:pointer;" class="jstreeitem">
		<input type="checkbox" ng-model="ngData.ok"> <div style="flex:2;padding-left:5px;" ng-click="ngData.ok=!ngData.ok" >{{ngData.titre}}</div>
	</div>
	<ul>
		<li ng-repeat="item in ngData.children">
			<jstree-element ng-data="item"></jstree-element>
		</li>
	</ul>
</div>
<?php
})
->js(function(){
?>
<script>
	app.directive('jstreeElement', function ($compile) {
		var tpl = {{inject-tpl}};
		return {
			restrict: 'EA',
			scope:{ngData:"="},
			controller:function($scope){
				$scope.scopename = "jstreeElement";
				$scope.changed = function(){
					console.log($scope.elm,$scope.ngData);
					if(!$scope.elm) return;
					if ($scope.ngData) {
						$scope.elm.html($compile(tpl)($scope));
					}else{
						$scope.elm.html("");
					}
				}
				$scope.$watch("ngData",function(){
					$scope.changed();
				});
				$scope.changed();
			},
			link: function ($scope, iElement, iAttrs) {
				$scope.elm = iElement;
				$scope.changed();
			}
		};
	});
</script>
<?php
});


Route::isCss("app.css",function(){
?> 
<style>
.jstreeparentul,.jstreeparentul ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
.jstreeparentul ul{
	padding-left: 15px;
}
.jstreeitem{
	background: #f5f5f5;
    margin: 1px;
    padding: 2px 7px;
}
.jstreeitem:hover{
	background: #fafafa;
}
/*
https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/32px.png
*/
</style> 
<?php
});


ce("jstreeTest")
->tpl(function(){
?>
<div style="padding:15px;">
	<ul class="jstreeparentul">
		<li ng-repeat="item in ngData">
			<jstree-element ng-data="item"></jstree-element>
		</li>
	</ul>
</div>
<?php
})
->js(function(){
?>
<script>
	app.directive('jstreeTest', function () {
		return {
			restrict: 'E',
			template:{{inject-tpl}},
			scope:{ngModel:"=",ngData:"="},
			replace:true,
			transclude:true,
			controller:function($scope){
				$scope.scopename = "jstreeTest";
			},
			link: function (scope, iElement, iAttrs) {
				
			}
		};
	});
</script>
<?php
});