added Fabrik.jLayouts object to js. Add in php via FabrikHTMLHelper::…

…jLayoutJs(). Implemented this in the fileupload element when the js dynamically needs to add progress bars and buttons. Fix Fileupload widget jlayout so that it can be overridden by template jlayouts. Improved fabrik-icon jlayout coverage

components/com_fabrik/helpers/html.php

@@ -63,6 +63,13 @@ class FabrikHelperHTML
 	 */
 	protected static $scripts = array();
 
+	/**
+	 * Array of rendered jLayouts for use in JS code.
+	 *
+	 * @var array
+	 */
+	protected static $jLayoutsJs = array();
+
 	/**
 	 * CSS files loaded via AJAX
 	 *
@@ -992,9 +999,11 @@ public static function framework()
 
 				$liveSiteSrc = array();
 				$liveSiteSrc[] = "\tFabrik.liveSite = '" . COM_FABRIK_LIVESITE . "';";
-
+//print_r(self::$jLayoutsJs);exit;
 				$liveSiteSrc[] = "\tFabrik.debug = " . (self::isDebug() ? 'true;' : 'false;');
+				//$liveSiteSrc[] = "\tFabrik.jLayouts = {};";
 
+				$liveSiteSrc[] = "\tFabrik.jLayouts = " . json_encode(self::$jLayoutsJs) . ";";
 				if ($bootstrapped)
 				{
 					$liveSiteSrc[] = "\tFabrik.bootstrapped = true;";
@@ -1263,6 +1272,20 @@ public static function addScriptDeclaration($script)
 		self::addToSessionScripts($script);
 	}
 
+	/**
+	 * Add a rendered JLayout to the Fabrik.jLayouts object
+	 * @param   string    $name
+	 * @param   string    $layoutName
+	 * @param   stdClass  $data
+	 * @param   array     $paths
+	 * @param   array     $options
+	 */
+	public static function jLayoutJs($name, $layoutName, stdClass $data = null, $paths = array(), $options = array())
+	{
+		$layout =self::getLayout($layoutName, $paths, $options);
+		self::$jLayoutsJs[$name] = $layout->render($data);
+	}
+
 	/**
 	 * Add a CSS style declaration, either to the head or inline if format=raw
 	 *

components/com_fabrik/layouts/fabrik-icon.php

@@ -7,5 +7,6 @@
 defined('JPATH_BASE') or die;
 
 $d = $displayData;
+$props = isset($d->properties) ? $d->properties : '';
 ?>
-<i class="<?php echo $d->icon;?>" <?php echo $d->properties;?>></i>
+<i class="<?php echo $d->icon;?>" <?php echo $props;?>></i>

components/com_fabrik/layouts/fabrik-progress-bar.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * Default list element render
+ * Override this file in plugins/fabrik_element/{plugin}/layouts/fabrik-element-{plugin}-list.php
+ */
+
+defined('JPATH_BASE') or die;
+
+$d = $displayData;
+
+$klass = '';
+
+$stripped = isset($d->stripped) && $d->stripped === true ? 'progress-striped': '';
+$animated = isset($d->animated) && $d->animated === true ? 'active' : '';
+$value = isset($d->value) ? (int) $d->value : 0;
+
+if (isset($d->context)) {
+	switch ($d->context) {
+		case 'success':
+			$klass = 'bar-success';
+			break;
+		case 'info':
+			$klass = 'bar-info';
+			break;
+		case 'warning':
+			$klass = 'bar-warning';
+			break;
+		case 'danger':
+			$klass = 'bar-danger';
+			break;
+
+	}
+}
+
+?>
+<div class="progress <?php echo $stripped;?>">
+	<div class="bar <?php echo $klass;?> <?php echo $animated;?>" style="width: <?php echo $value;?>%;"></div>
+</div>

plugins/fabrik_element/fileupload/fileupload.js

@@ -35,7 +35,9 @@ var FbFileUpload = new Class({
 					this.uploader.trigger('FileUploaded', file, {
 						response: JSON.encode(response)
 					});
-					document.id(file.id).getElement('.plupload_file_status  .bar').setStyle('width', '100%').addClass('bar-success');
+					var newBar = jQuery(Fabrik.jLayouts['fabrik-progress-bar-success'])[0];
+					var bar = document.id(file.id).getElement('.bar');
+					newBar.replaces(bar);
 				}.bind(this));
 			}
 			this.redraw();
@@ -381,7 +383,7 @@ var FbFileUpload = new Class({
 			var rElement = Fabrik.bootstrapped ? 'tr' : 'li';
 			this.lastAddedFiles = files;
 			if (Fabrik.bootstrapped) {
-				this.container.getElement('thead').show();
+				this.container.getElement('thead').style.display = '';
 			}
 			var count = this.droplist.getElements(rElement).length;
 			this.startbutton.removeClass('disabled');
@@ -409,12 +411,12 @@ var FbFileUpload = new Class({
 							}).set('text', file.name);
 						}
 
-						innerli = this.imageCells(file, title, a);
+						innerLi = this.imageCells(file, title, a);
 
 						this.droplist.adopt(new Element(rElement, {
 							id: file.id,
 							'class': 'plupload_delete'
-						}).adopt(innerli));
+						}).adopt(innerLi));
 					}
 				}
 			}.bind(this));
@@ -428,7 +430,8 @@ var FbFileUpload = new Class({
 					var bar = document.id(file.id).getElement('.plupload_file_status .bar');
 					bar.setStyle('width', file.percent + '%');
 					if (file.percent === 100) {
-						bar.addClass('bar-success');
+						var newBar = jQuery(Fabrik.jLayouts['fabrik-progress-bar-success'])[0];
+						newBar.replaces(bar);
 					}
 				} else {
 					document.id(file.id).getElement('.plupload_file_status').set('text', file.percent + '%');
@@ -526,7 +529,8 @@ var FbFileUpload = new Class({
 		var del = this.deleteImgButton(), filename, status;
 		if (Fabrik.bootstrapped) {
 			var icon = new Element('td.span1.plupload_resize').adopt(a);
-			var progress = '<div class="progress progress-striped"><div class="bar" style="width: 0%;"></div></div>';
+
+			var progress = Fabrik.jLayouts['fabrik-progress-bar'];
 
 			status = new Element('td.span5.plupload_file_status', {}).set('html', progress);
 
@@ -589,6 +593,8 @@ var FbFileUpload = new Class({
 	 */
 	deleteImgButton: function () {
 		if (Fabrik.bootstrapped) {
+
+			var icon = Fabrik.jLayouts['fabrik-icon-delete'];
 			return new Element('td.span1.plupload_file_action', {}).adopt(new Element('a', {
 				'href': '#',
 				'class': 'icon-delete',
@@ -598,7 +604,7 @@ var FbFileUpload = new Class({
 						this.pluploadRemoveFile(e);
 					}.bind(this)
 				}
-			}));
+			}).set('html', icon));
 		} else {
 			return new Element('div', {
 				'class': 'plupload_file_action'
@@ -628,9 +634,9 @@ var FbFileUpload = new Class({
 			return;
 		}
 
-		var id = e.target.getParent().getParent().id.split('_').getLast();// alreadyuploaded_8_13
+		var id = e.target.getParent('tr').id.split('_').getLast();// alreadyuploaded_8_13
 		// $$$ hugh - removed ' span' from the getElement(), as this blows up on some templates
-		var f = e.target.getParent().getParent().getElement('.plupload_file_name').get('text');
+		var f = e.target.getParent('tr').getElement('.plupload_file_name').get('text');
 
 		// Get a list of all of the uploaders files except the one to be deleted
 		var newFiles = [];