Work on custom HTML format; Export Types can now include custom CSS f…

…iles

.gitignore

@@ -5,4 +5,6 @@ settings.php
 cache/*
 .settings/org.eclipse.php.core.prefs
 .settings/org.eclipse.php.core.prefs
-resources/css/.sass-cache/*
+resources/themes/classic/.sass-cache/*
+resources/themes/default/.sass-cache/*
+resources/themes/.sass-cache/*

classes/ExportTypePlugin.abstract.class.php

@@ -22,6 +22,12 @@ abstract class ExportTypePlugin {
 	 */
 	protected $jsModules = array();
 
+	/**
+	 * A single CSS file for any additional CSS needed for the module. It's up to the developer to properly
+	 * name their CSS classes/IDs to prevent namespace collisions.
+	 */
+	protected $cssFile = "";
+
 	/**
 	 * By default, the Data Generator opens a dialog window to display the results. This setting lets you choose
 	 * to override that and just pass the Ajax request directly to the server. This is handy for export types like
@@ -122,6 +128,14 @@ public final function getJSModules() {
 		return $this->jsModules;
 	}
 
+	/**
+	 * Returns the CSS filename for this Data Type (if included).
+	 * @return array
+	 */
+	public final function getCSSFile() {
+		return $this->cssFile;
+	}
+
 	/**
 	 * Returns the name of the Export Type in the current language.
 	 * @return string

classes/ExportTypePluginHelper.class.php

@@ -130,4 +130,26 @@ public function getExportTypeAdditionalSettingsHTML($exportTypes) {
 
 		return $additionalSettings;
 	}
+
+	/**
+	 * Used in the main page to generate the Export Type CSS includes.
+	 * @param array the export types
+	 * @param string
+	 */
+	public function getExportTypeCSSIncludes($exportTypes) {
+		$files = array();
+		foreach ($exportTypes as $exportType) {
+			$cssFile = $exportType->getCSSFile();
+			if (!empty($cssFile)) {
+				$path = $exportType->getPath();
+				$files[] = "$path/$cssFile";
+			}
+		}
+
+		$cssIncludes = "";
+		foreach ($files as $file) {
+			$cssIncludes[] = "<link rel=\"stylesheet\" type=\"text/css\" href=\"$file\" />";
+		}
+		return implode("\n", $cssIncludes);
+	}
 }

index.php

@@ -18,13 +18,17 @@
 $dataTypes = DataTypePluginHelper::getDataTypeList(Core::$dataTypePlugins);
 
 $exportTypeJSModules = ExportTypePluginHelper::getExportTypeJSResources($exportTypes);
+$exportTypeCssIncludes = ExportTypePluginHelper::getExportTypeCSSIncludes($exportTypes);
 $dataTypeJSModules = DataTypePluginHelper::getDataTypeJSResources($dataTypes);
-$cssIncludes = DataTypePluginHelper::getDataTypeCSSIncludes($dataTypes);
+$dataTypeCssIncludes = DataTypePluginHelper::getDataTypeCSSIncludes($dataTypes);
+$cssIncludes = $exportTypeCssIncludes . "\n" . $dataTypeCssIncludes;
 
 $pageParams["dataTypeJSModules"] = $dataTypeJSModules;
 $pageParams["exportTypeJSModules"] = $exportTypeJSModules;
 $pageParams["exportTypeAdditionalSettings"] = $exportTypeAdditionalSettings;
 $pageParams["settings"] = Settings::getSettings();
 $pageParams["cssIncludes"] = $cssIncludes;
 
+$pageParams["defaultExportType"] = Core::getDefaultExportType();
+
 Templates::displayPage("resources/templates/index.tpl", $pageParams);

plugins/exportTypes/HTML/HTML.class.php

@@ -7,6 +7,8 @@
 
 class HTML extends ExportTypePlugin {
 	protected $exportTypeName = "HTML";
+	protected $jsModules = array("HTML.js");
+	protected $cssFile = "HTML.css";
 	private $exportTarget;
 
 	/**
@@ -126,6 +128,65 @@ function getAdditionalSettingsHTML() {
 			</td>
 		</tr>
 		</table>
+
+<div id="etHTMLCustomFormatDialog" style="display:none">
+	<div style="width: 300px; float: left;">
+		<p>
+			This dialog lets you customize the HTML used in generating your data through custom Smarty template logic.
+		</p>
+
+		<h4>Available Smarty Vars</h4>
+
+<pre>{\$isFirstBatch}, {\$isLastBatch}</pre>
+Booleans for whether or not the current batch of results being generated is the first or last. This is only ever used for
+users generating the data in-page, which generates the results in chunks. For all other situations, both are always true.
+
+<pre>{\$colData}</pre>
+An ordered array of strings containing the column names.
+
+<pre>{\$rowData}</pre>
+An ordered array of arrays. Each top level array contains the contents of the row; each child array contains
+an ordered array of values for each item of data.
+
+		<button class="gdPrimaryButton">Reset Custom HTML</button>
+	</div>
+	<div style="etHTMLCustomContent">
+		<textarea id="etHTMLCustomSmarty"><!DOCTYPE html>
+<html>
+<head>
+	<style type="text/css">
+	body { margin: 10px; }
+	table, th, td, li, dl { font-family: "lucida grande", arial; font-size: 8pt; }
+	dt { font-weight: bold; }
+	table { background-color: #efefef; border: 2px solid #dddddd; width: 100%; }
+	th { background-color: #efefef; }
+	td { background-color: #ffffff; }
+	</style>
+</head>
+<body>
+
+{if \$isFirstBatch}
+<table cellspacing="0" cellpadding="1">
+<tr>
+{foreach \$colData as \$col}
+	<th>{\$col}</th>
+{/foreach}
+</tr>
+{/if}
+
+{foreach \$rowData as \$row}
+
+{/foreach}
+
+{if \$isLastBatch}
+</table>
+{/if}
+
+</body>
+</html>
+</textarea>
+	</div>
+</div>
 END;
 		return $html;
 	}

plugins/exportTypes/HTML/HTML.css

@@ -0,0 +1,13 @@
+#etHTMLCustomFormatDialog pre {
+	margin-bottom: 0px;
+}
+#etHTMLCustomContent {
+	float:left;
+	border-left: 1px solid #efefef;
+	padding-left: 12px;
+	margin-left: 12px;
+}
+#etHTMLCustomSmarty {
+	width: 100%;
+	height: 100%;
+}

plugins/exportTypes/HTML/HTML.js

@@ -0,0 +1,68 @@
+"use strict";
+
+ define([
+	"manager",
+	"constants",
+	"lang",
+	"generator"
+], function(manager, C, L, generator) {
+
+	var MODULE_ID = "export-type-HTML";
+	var LANG = L.exportTypePlugins.HTML;
+	var _dialog = null;
+	var _codeMirror = null;
+
+	var _updateDialogDimensions = function() {
+		var dimensions = _getDialogDimensions();
+		$("#etHTMLCustomFormatDialog").dialog({
+			width: dimensions.width,
+			height: dimensions.height
+		});
+	}
+
+	var _openEditCustomFormatDialog = function() {
+		var dimensions = _getDialogDimensions();
+		$("#etHTMLCustomSmarty").css({
+			width: "400px",
+			height: "400px"
+		});
+
+		// calculate size of main content area
+		$("#etHTMLCustomFormatDialog").dialog({
+			title: "Custom HTML Format",
+			width: dimensions.width,
+			height: dimensions.height,
+			open: function() {
+				if (_codeMirror == null) {
+					_codeMirror = CodeMirror.fromTextArea($("#etHTMLCustomSmarty")[0], {
+						mode: "xml",
+						lineNumbers: true
+					});
+					$("#etHTMLCustomSmarty").addClass("CodeMirror_medium");
+				}
+			},
+			buttons: [
+			    {
+			    	text: "Close",
+			    	click: function() {
+			    		$(this).dialog("close");
+			    	}
+			    }
+			]
+		});
+
+		return false;
+	}
+
+	var _getDialogDimensions = function() {
+		return {
+			height: ($(window).height() / 100) * 90,
+			width: ($(window).width() / 100) * 90
+		}
+	}
+
+	$(function() {
+		$(window).resize(_updateDialogDimensions);
+		$("#etHTML_editCustomFormat").bind("click", function() { _openEditCustomFormatDialog(); return false; });
+	});
+});

resources/templates/generate.tab1.tpl

@@ -68,7 +68,8 @@
 			</span>
 			{export_type_tabs}
 			{foreach from=$exportTypeAdditionalSettings key=k item=i}
-				<div id="gdExportTypeAdditionalSettings_{$k}" class="gdExportTypeTabSettings">{$i}</div>
+				<div id="gdExportTypeAdditionalSettings_{$k}" class="gdExportTypeTabSettings"
+					{if $defaultExportType == $i}style="display:block"{/if}>{$i}</div>
 			{/foreach}
 		</div>
 

resources/themes/classic/compiled/generator.css

@@ -170,7 +170,7 @@ li.gdColDelete {
 
 #gdGenerateSection {
   background-color: #E4FFE4;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 20px;
   border: 1px solid #bbbbbb; }
 

resources/themes/classic/compiled/layout.css

@@ -19,7 +19,6 @@ section {
   text-align: left;
   padding: 10px 25px 10px 25px;
   clear: left;
-  box-shadow: 2px 4px 3px #999999;
   display: block; }
 
 nav {
@@ -31,16 +30,16 @@ nav {
 
 footer {
   width: 980px;
-  margin: 0 auto 10px;
+  margin: 0 auto 15px;
+  padding: 5px 0px;
   height: 20px;
   font-size: 7pt;
   background-color: #ffffff;
   border-top: none;
-  border-bottom-left-radius: 24px;
-  border-bottom-right-radius: 24px;
-  border-radius-bottomleft: 24px;
-  border-radius-bottomright: 24px;
-  box-shadow: 2px 4px 3px #999999;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-radius-bottomleft: 8px;
+  border-radius-bottomright: 8px;
   display: block; }
   footer a:link, footer a:visited {
     color: #555555;
@@ -71,28 +70,27 @@ header nav {
     #gdTabs ul li {
       color: #222222;
       font-size: 9pt;
-      text-shadow: 3px 3px 8px rgba(64, 64, 64, 0.2);
       cursor: pointer;
-      margin: 2px 2px 0 0;
+      margin: 2px 1px 0 0;
       padding: 3px 0 0 0;
       float: left;
       width: 120px;
-      border-top-left-radius: 12px;
-      border-top-right-radius: 12px;
-      border-radius-topleft: 12px;
-      border-radius-topright: 12px;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+      border-radius-topleft: 8px;
+      border-radius-topright: 8px;
       background-color: #efefef;
       height: 22px;
-      color: green; }
+      color: #666666; }
       #gdTabs ul li a:link, #gdTabs ul li a:visited {
         display: block;
         font-size: 9pt;
-        text-shadow: rgba(64, 64, 64, 0.2) 3px 3px 8px;
         color: green;
         text-decoration: none; }
       #gdTabs ul li:hover {
         background-color: #f5faf6; }
     #gdTabs ul li.gdSelected {
+      color: green;
       cursor: inherit;
       border-bottom: 0px;
       height: 22px;

resources/themes/classic/compiled/misc.css

@@ -47,7 +47,7 @@ noscript {
   text-align: left; }
 
 .ui-dialog-title {
-  font-weight: bold; }
+  font-size: 14px; }
 
 .gdColOptions .ui-datepicker-trigger {
   margin: 0px 0px -3px 1px;
@@ -155,6 +155,8 @@ body .CodeMirror_medium div, body .CodeMirror_medium span {
   font-size: 9pt; }
 body .CodeMirror_medium .cm-s-default pre span {
   line-height: 16px; }
+body .CodeMirror_medium .CodeMirror-gutter-text pre {
+  line-height: 20px; }
 
 body .CodeMirror_large div, body .CodeMirror_large span {
   font-size: 12pt; }