add container field and title field to all widgets by default

public/src/forum/admin/themes.js

@@ -142,10 +142,10 @@ define(['forum/admin/settings'], function(Settings) {
 			connectToSortable: ".widget-area"
 		});
 
-		$('#widgets .available-containers .containers > [data-container]').draggable({
+		$('#widgets .available-containers .containers > [data-container-html]').draggable({
 			helper: function(e) {
 				var target = $(e.target);
-				target = target.attr('data-container') ? target : target.parents('[data-container]');
+				target = target.attr('data-container-html') ? target : target.parents('[data-container-html]');
 
 				return target.clone().addClass('block').width(target.width()).css('opacity', '0.5');
 			}
@@ -156,7 +156,10 @@ define(['forum/admin/settings'], function(Settings) {
 				el.addClass('block')
 					.droppable({
 						drop: function(event, ui) {
-							$(this).find('.panel-heading small').html(ui.draggable.attr('data-container'));
+							var el = $(this);
+
+							el.find('.panel-body .container-html').val(ui.draggable.attr('data-container-html'));
+							el.find('.panel-body').removeClass('hidden');
 						},
 						hoverClass: "panel-info"
 					})

public/templates/admin/themes.tpl

@@ -86,13 +86,13 @@
 					<div class="available-containers">
 						<h4>Available Containers</h4>
 						<div class="containers">
-							<div class="pointer" style="padding: 20px; border: 1px dotted #dedede; margin-bottom: 20px;" data-container=" ">
+							<div class="pointer" style="padding: 20px; border: 1px dotted #dedede; margin-bottom: 20px;" data-container-html=" ">
 								None
 							</div>
-							<div class="well pointer" data-container="well">
+							<div class="well pointer" data-container-html='<div class="well">{body}</div>'>
 								Well
 							</div>
-							<div class="panel panel-default pointer" data-container="panel">
+							<div class="panel panel-default pointer" data-container-html='<div class="panel panel-default"><div class="panel-heading">{title}</div><div class="panel-body">{body}</div></div>'>
 								<div class="panel-heading">
 									Panel Header
 								</div>

src/routes/admin.js

@@ -429,6 +429,12 @@ var nconf = require('nconf'),
 							next(err);
 						});
 					}, function(err) {
+						for (var w in data.widgets) {
+							if (data.widgets.hasOwnProperty(w)) {
+								data.widgets[w].content += "<br /><label>Title:</label><input type=\"text\" class=\"form-control\" name=\"title\" placeholder=\"Title (only shown on some containers)\" /><br /><label>Container:</label><textarea rows=\"4\" class=\"form-control container-html\" name=\"container\" placeholder=\"Drag and drop a container or enter HTML here.\"></textarea>";
+							}
+						}
+
 						res.json(200, {
 							areas: data.areas,
 							widgets: data.widgets