closes #6268

public/language/en-GB/admin/extend/widgets.json

@@ -2,6 +2,7 @@
 	"available": "Available Widgets",
 	"explanation": "Select a widget from the dropdown menu and then drag and drop it into a template's widget area on the left.",
 	"none-installed": "No widgets found! Activate the essential widgets plugin in the <a href=\"%1\">plugins</a> control panel.",
+	"clone-from": "Clone widgets from",
 	"containers.available": "Available Containers",
 	"containers.explanation": "Drag and drop on top of any active widget",
 	"containers.none": "None",
@@ -14,6 +15,8 @@
 
 	"alert.confirm-delete": "Are you sure you wish to delete this widget?",
 	"alert.updated": "Widgets Updated",
-	"alert.update-success": "Successfully updated widgets"
+	"alert.update-success": "Successfully updated widgets",
+	"alert.clone-success": "Successfully cloned widgets",
 
+	"error.select-clone": "Please select a page to clone from"
 }

public/less/admin/admin.less

@@ -19,6 +19,7 @@
 @import "./appearance/themes";
 @import "./extend/plugins";
 @import "./extend/rewards";
+@import "./extend/widgets";
 @import "./advanced/database";
 @import "./advanced/logs";
 @import "./advanced/errors";

public/less/admin/extend/widgets.less

@@ -0,0 +1,19 @@
+.page-extend-widgets {
+	[component="clone"] {
+		display: flex;
+		align-items: stretch;
+		align-content: stretch;
+
+		[component="clone/button"] {
+			flex-grow: 1;
+			text-align: left;
+		}
+
+		.dropdown-menu {
+			max-height: 300px;
+			overflow-y: scroll;
+			min-width: 250px;
+			border-radius: 0;
+		}
+	}
+}

public/src/admin/extend/widgets.js

@@ -25,6 +25,7 @@ define('admin/extend/widgets', ['jqueryui'], function () {
 		$('#widget-selector').trigger('change');
 
 		loadWidgetData();
+		setupCloneButton();
 	};
 
 	function prepareWidgets() {
@@ -224,5 +225,51 @@ define('admin/extend/widgets', ['jqueryui'], function () {
 		});
 	}
 
+	function setupCloneButton() {
+		var clone = $('[component="clone"]');
+		var cloneBtn = $('[component="clone/button"]');
+
+		clone.find('.dropdown-menu li').on('click', function () {
+			var template = $(this).find('a').text();
+			cloneBtn.translateHtml('[[admin/extend/widgets:clone-from]] <strong>' + template + '</strong>');
+			cloneBtn.attr('data-template', template);
+		});
+
+		cloneBtn.on('click', function () {
+			var template = cloneBtn.attr('data-template');
+			if (!template) {
+				return app.alertError('[[admin/extend/widgets:error.select-clone]]');
+			}
+
+			var currentTemplate = $('#active-widgets .active.tab-pane[data-template] .area');
+			var templateToClone = $('#active-widgets .tab-pane[data-template="' + template + '"] .area');
+
+			var currentAreas = currentTemplate.map(function () {
+				return $(this).attr('data-location');
+			}).get();
+
+			var areasToClone = templateToClone.map(function () {
+				var location = $(this).attr('data-location');
+				return currentAreas.indexOf(location) !== -1 ? location : undefined;
+			}).get().filter(function (i) { return i; });
+
+			function clone(location) {
+				$('#active-widgets .tab-pane[data-template="' + template + '"] [data-location="' + location + '"]').each(function () {
+					$(this).find('[data-widget]').each(function () {
+						var widget = $(this).clone(true);
+						$('#active-widgets .active.tab-pane[data-template]:not([data-template="global"]) [data-location="' + location + '"] .widget-area').append(widget);
+					});
+				});
+			}
+
+			for (var i = 0, ii = areasToClone.length; i < ii; i++) {
+				var location = areasToClone[i];
+				clone(location);
+			}
+
+			app.alertSuccess('[[admin/extend/widgets:alert.clone-success]]');
+		});
+	}
+
 	return Widgets;
 });

src/views/admin/extend/widgets.tpl

@@ -59,6 +59,20 @@
 						</div>
 						<!-- END availableWidgets -->
 					</div>
+
+					<div class="btn-group" component="clone">
+						<button type="button" class="btn btn-primary" component="clone/button">[[admin/extend/widgets:clone-from]] ...</button>
+						<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+							<span class="caret"></span>
+						</button>
+						<ul class="dropdown-menu pull-right">
+							<!-- BEGIN templates -->
+							<!-- IF !@first -->
+							<li><a href="#">{templates.template}</a></li>
+							<!-- END -->
+							<!-- END templates -->
+						</ul>
+					</div>
 				</div>
 			</div>
 		</div>