saving, updating, deleting widgets; widget dragging improvements

public/src/forum/admin/themes.js

@@ -142,16 +142,29 @@ define(['forum/admin/settings'], function(Settings) {
 			connectToSortable: ".widget-area"
 		});
 
+		function appendToggle(el) {
+			if (!el.hasClass('block')) {
+				el.addClass('block')
+					.children('.panel-heading')
+						.append('<div class="pull-right pointer"><span class="delete-widget"><i class="fa fa-times-circle"></i></span>&nbsp;<span class="toggle-widget"><i class="fa fa-chevron-down"></i></span></div>');
+			}
+		}
+
 		$('#widgets .widget-area').sortable({
 			update: function (event, ui) {
-				if (!ui.item.hasClass('block')) {
-					ui.item.addClass('block');
-					ui.item.children('.panel-heading').append('<div class="toggle-widget pull-right pointer"><i class="fa fa-chevron-down"></i></div>');
-				}
-				
-			}
+				appendToggle(ui.item);
+			},
+			connectWith: "div"
 		}).on('click', '.toggle-widget', function() {
 			$(this).parents('.panel').children('.panel-body').toggleClass('hidden');
+		}).on('click', '.delete-widget', function() {
+			var panel = $(this).parents('.panel');
+			
+			bootbox.confirm('Are you sure you wish to delete this widget?', function(confirm) {
+				if (confirm) {
+					panel.remove();
+				}
+			});
 		});
 
 		$('#widgets .btn[data-template]').on('click', function() {
@@ -162,12 +175,24 @@ define(['forum/admin/settings'], function(Settings) {
 				widgets = [];
 
 			area.find('.panel[data-widget]').each(function() {
-				var widget = {};
-				widget[this.getAttribute('data-widget')] = $(this).find('form').serializeArray();
-				widgets.push(widget);
+				var widgetData = {},
+					data = $(this).find('form').serializeArray();
+
+				for (var d in data) {
+					if (data.hasOwnProperty(d)) {
+						if (data[d].name) {
+							widgetData[data[d].name] = data[d].value;	
+						}
+					}
+				}
+
+				widgets.push({
+					widget: this.getAttribute('data-widget'),
+					data: widgetData
+				});
 			});
 
-			socket.emit('admin.themes.widgets.set', {
+			socket.emit('admin.widgets.set', {
 				template: template,
 				location: location,
 				widgets: widgets
@@ -181,7 +206,46 @@ define(['forum/admin/settings'], function(Settings) {
 				});
 			});
 		});
+
+		function populateWidget(widget, data) {
+			widget.find('input, textarea').each(function() {
+				var input = $(this),
+					value = data[input.attr('name')];
+
+				if (this.type === 'checkbox') {
+					input.attr('checked', !!value);
+				} else {
+					input.val(value);
+				}
+			});
+
+			return widget;
+		}
 		
+		$.get(RELATIVE_PATH + '/api/admin/themes', function(data) {
+			var areas = data.areas;
+
+			for (var a in areas) {
+				if (areas.hasOwnProperty(a)) {
+					var area = areas[a],
+						widgetArea = $('#widgets .area [data-template="' + area.template + '"][data-location="' + area.location + '"]').parents('.area').find('.widget-area');
+
+					console.log('data', area.data);
+					for (var i in area.data) {
+						if (area.data.hasOwnProperty(i)) {
+							var data = area.data[i],
+								widgetEl = $('.available-widgets [data-widget="' + data.widget + '"]').clone();
+
+
+							widgetArea.append(populateWidget(widgetEl, data.data));
+							appendToggle(widgetEl);
+						}
+					}
+
+
+				}
+			}
+		});
 	};
 
 	return Themes;

public/templates/admin/themes.tpl

@@ -54,7 +54,7 @@
 			<h3>Widgets</h3>
 
 			<div class="row">
-				<div class="col-xs-6">
+				<div class="col-xs-6 available-widgets">
 					<h4>Available Widgets</h4>
 					<div class="well">
 						<div data-widget="html" class="panel panel-default pointer">
@@ -67,13 +67,17 @@
 								</form>
 							</div>
 						</div>
-						<div data-widget="markdown" class="panel panel-default pointer">
+						<div data-widget="text" class="panel panel-default pointer">
 							<div class="panel-heading">
-								<strong>Markdown</strong> <small>Markdown formatted text</small>
+								<strong>Text</strong> <small>Markdown formatted text</small>
 							</div>
 							<div class="panel-body hidden">
 								<form>
-									<textarea class="form-control" rows="6" name="markdown" placeholder="Enter Markdown"></textarea>
+									<textarea class="form-control" rows="6" name="text" placeholder="Enter Text / Markdown"></textarea>
+									<hr />
+									<div class="checkbox">
+										<label><input type="checkbox" name="markdown" checked /> Parse as Markdown?</label>
+									</div>
 								</form>
 							</div>
 						</div>

src/routes/admin.js

@@ -2,6 +2,7 @@ var nconf = require('nconf'),
 	fs = require('fs'),
 	path = require('path'),
 	winston = require('winston'),
+	async = require('async'),
 
 	db = require('./../database'),
 	user = require('./../user'),
@@ -11,6 +12,7 @@ var nconf = require('nconf'),
 	categories = require('./../categories'),
 	meta = require('../meta'),
 	plugins = require('../plugins'),
+	widgets = require('../widgets'),
 	image = require('./../image'),
 	file = require('./../file'),
 	Languages = require('../languages'),
@@ -411,9 +413,17 @@ var nconf = require('nconf'),
 
 			app.get('/themes', function (req, res) {
 				plugins.fireHook('filter:widgets.getAreas', [], function(err, areas) {
-					res.json(200, {
-						areas: areas
+					async.each(areas, function(area, next) {
+						widgets.getArea(area.template, area.location, function(err, areaData) {
+							area.data = areaData;
+							next(err);
+						});
+					}, function(err) {
+						res.json(200, {
+							areas: areas,
+						});
 					});
+					
 				});
 			});
 

src/socket.io/admin.js

@@ -3,6 +3,7 @@
 var	groups = require('../groups'),
 	meta = require('../meta'),
 	plugins = require('../plugins'),
+	widgets = require('../widgets'),
 	user = require('../user'),
 	topics = require('../topics'),
 	categories = require('../categories'),
@@ -255,10 +256,11 @@ SocketAdmin.categories.groupsList = function(socket, cid, callback) {
 	});
 };
 
-/* Themes & Plugins */
+/* Themes, Widgets, and Plugins */
 
 SocketAdmin.themes = {};
 SocketAdmin.plugins = {};
+SocketAdmin.widgets = {};
 
 SocketAdmin.themes.getInstalled = function(socket, data, callback) {
 	meta.themes.get(callback);
@@ -269,7 +271,7 @@ SocketAdmin.themes.set = function(socket, data, callback) {
 		return callback(new Error('invalid data'));
 	}
 	meta.themes.set(data, callback);
-}
+};
 
 SocketAdmin.plugins.toggle = function(socket, plugin_id) {
 	plugins.toggleActive(plugin_id, function(status) {
@@ -277,6 +279,14 @@ SocketAdmin.plugins.toggle = function(socket, plugin_id) {
 	});
 };
 
+SocketAdmin.widgets.set = function(socket, data, callback) {
+	if(!data) {
+		return callback(new Error('invalid data'));
+	}
+
+	widgets.setArea(data, callback);
+};
+
 /* Configs */
 
 SocketAdmin.config = {};

src/widgets.js

@@ -0,0 +1,26 @@
+var async = require('async'),
+	winston = require('winston'),
+	db = require('./database');
+
+
+(function(Widgets) {
+
+	Widgets.setArea = function(data, callback) {
+		if (!data.location || !data.template) {
+			callback({
+				error: 'Missing location and template data'
+			})
+		}
+		
+		db.setObjectField('widgets:' + data.template, data.location, JSON.stringify(data.widgets), function(err) {
+			callback(err);
+		});
+	};
+
+	Widgets.getArea = function(template, location, callback) {
+		db.getObjectField('widgets:' + template, location, function(err, widgets) {
+			callback(err, JSON.parse(widgets));
+		})
+	};
+
+}(exports));