Add proper sizing of tiles via JS

Author: SpeedJack

_files/js/inforge/gridshow/widget.js

@@ -0,0 +1,63 @@
+function if_gs_set_classes(tiles, pattern)
+{
+	var spans = pattern.split(" ", tiles.length);
+	var i = 0;
+	tiles.each(function() {
+		if (i >= spans.length)
+			return;
+		var cur_spans = spans[i].split(",", 2);
+		for (var j = 0; j < cur_spans.length; j++)
+			$(this).addClass("if-gs-tile-span" + cur_spans[j]);
+		i++;
+	});
+}
+
+function if_gs_arrange_tiles()
+{
+	var widget = $(".if-gs-widget");
+	widget.hide();
+	var tiles = widget.children(".if-gs-tile");
+	var pattern = "";
+	switch (tiles.length) {
+	case 0:
+		return;
+	case 1:
+		pattern = "4h,3v";
+		break;
+	case 2:
+		pattern = "2h,3v 2h,3v";
+		break;
+	case 3:
+		pattern = "2h,2v 2h,2v 4h";
+		break;
+	case 4:
+		pattern = "2h,2v 2h,2v 2h 2h";
+		break;
+	case 5:
+		pattern = "2h,2v 2h 2h 2h 2h";
+		break;
+	case 6:
+		pattern = "2h,2v 2h 2h 2h";
+		break;
+	case 7:
+		pattern = "2h,2v 2h 2h";
+		break;
+	case 8:
+		pattern = "2h,2v 2h";
+		break;
+	case 9:
+		pattern = "2h,2v";
+		break;
+	case 10:
+		pattern = "2h 2h";
+		break;
+	case 11:
+		pattern = "2h";
+		break;
+	default:
+		widget.show();
+		return;
+	}
+	if_gs_set_classes(tiles, pattern);
+	widget.show();
+}

_output/templates/_metadata.json

@@ -12,11 +12,11 @@
     "public/if_gs_gridshow_widget.html": {
         "version_id": 1000070,
         "version_string": "1.0.0",
-        "hash": "c757afa20b67b01f4927d1623e278dd3"
+        "hash": "5866c9748c31dfefa8e7ac135e366b45"
     },
     "public/if_gs_gridshow_widget.less": {
         "version_id": 1000070,
         "version_string": "1.0.0",
-        "hash": "6f125302049e418c34eff69c687cb897"
+        "hash": "c03ad39c486c7890e8c0a1c648705b23"
     }
 }

_output/templates/public/if_gs_gridshow_widget.html

@@ -1,4 +1,5 @@
 <xf:css src="if_gs_gridshow_widget.less" />
+<xf:js addon="Inforge/GridShow" src="inforge/gridshow/widget.js" min="1" />
 
 <div class="if-gs-widget">
 	<xf:foreach loop="$tiles" value="$tile">
@@ -11,4 +12,7 @@
 			</div>
 		</div>
 	</xf:foreach>
-</div>
+</div>
+<xf:js>
+	if_gs_arrange_tiles();
+</xf:js>

_output/templates/public/if_gs_gridshow_widget.less

@@ -26,7 +26,7 @@
 	border-radius: 2px;
 	color: #FFF;
 	padding: 4px 10px;
-	background: #183B59;
+	background: #173854;
 }
 
 .if-gs-tile-title {
@@ -35,4 +35,20 @@
 	padding: 6px 10px;
 	font-size: 1.4em;
 	color: #FFF;
+}
+
+.if-gs-tile-span2h {
+	grid-column: auto / span 2;
+}
+
+.if-gs-tile-span4h {
+	grid-column: auto / span 4;
+}
+
+.if-gs-tile-span2v {
+	grid-row: auto / span 2;
+}
+
+.if-gs-tile-span3v {
+	grid-row: auto / span 2;
 }

build.json

@@ -0,0 +1,8 @@
+{
+	"additional_files": [
+		"js/inforge/gridshow"
+	],
+	"minify": [
+		"js/inforge/gridshow/widget.js"
+	]
+}