feat: change widget-* to data-widget-* (#7703)

* change widget-* to data-widget-*, original pr#5444 but backward compatible

* lint

public/src/client/category/tools.js

@@ -259,7 +259,7 @@ define('forum/category/tools', [
 		}
 		app.loadJQueryUI(function () {
 			var topicListEl = $('[component="category"]').filter(function (i, e) {
-				return !$(e).parents('[widget-area]').length;
+				return !$(e).parents('[widget-area],[data-widget-area]').length;
 			});
 			topicListEl.sortable({
 				handle: '[component="topic/pinned"]',

public/src/modules/topicList.js

@@ -62,7 +62,7 @@ define('topicList', [
 
 	function findTopicListElement() {
 		return $('[component="category"]').filter(function (i, e) {
-			return !$(e).parents('[widget-area]').length;
+			return !$(e).parents('[widget-area],[data-widget-area]').length;
 		});
 	}
 

public/src/widgets.js

@@ -11,7 +11,7 @@
 		var locations = Object.keys(ajaxify.data.widgets);
 
 		locations.forEach(function (location) {
-			var area = $('#content [widget-area="' + location + '"]');
+			var area = $('#content [widget-area="' + location + '"],#content [data-widget-area="' + location + '"]').eq(0);
 			if (area.length) {
 				return;
 			}
@@ -23,9 +23,9 @@
 				html += widget.html;
 			});
 
-			if (location === 'footer' && !$('#content [widget-area="footer"]').length) {
+			if (location === 'footer' && !$('#content [widget-area="footer"],#content [data-widget-area="footer"]').length) {
 				$('#content').append($('<div class="row"><div widget-area="footer" class="col-xs-12"></div></div>'));
-			} else if (location === 'sidebar' && !$('#content [widget-area="sidebar"]').length) {
+			} else if (location === 'sidebar' && !$('#content [widget-area="sidebar"],#content [data-widget-area="sidebar"]').length) {
 				if ($('[component="account/cover"]').length) {
 					$('[component="account/cover"]').nextAll().wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
 				} else if ($('[component="groups/cover"]').length) {
@@ -33,11 +33,11 @@
 				} else {
 					$('#content > *').wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
 				}
-			} else if (location === 'header' && !$('#content [widget-area="header"]').length) {
+			} else if (location === 'header' && !$('#content [widget-area="header"],#content [data-widget-area="header"]').length) {
 				$('#content').prepend($('<div class="row"><div widget-area="header" class="col-xs-12"></div></div>'));
 			}
 
-			area = $('#content [widget-area="' + location + '"]');
+			area = $('#content [widget-area="' + location + '"],#content [data-widget-area="' + location + '"]').eq(0);
 			if (html && area.length) {
 				area.html(html);
 				area.find('img:not(.not-responsive)').addClass('img-responsive');