refactor: widgets (#9471)

src/views/admin/partials/widget-settings.tpl

@@ -6,24 +6,7 @@
 <textarea rows="4" class="form-control container-html" name="container" placeholder="[[admin/extend/widgets:container.placeholder]]"></textarea>
 
 <br/>
-<div class="row">
+<!-- IMPORT admin/partials/widgets/show_hide_groups.tpl -->
-  <div class="col-lg-6">
-    <label>[[admin/extend/widgets:show-to-groups]]</label>
-    <select name="groups" class="form-control" multiple size="10">
-        <!-- BEGIN groups -->
-        <option value="{groups.displayName}">{groups.displayName}</option>
-        <!-- END groups -->
-    </select>
-  </div>
-  <div class="col-lg-6">
-      <label>[[admin/extend/widgets:hide-from-groups]]</label>
-      <select name="groupsHideFrom" class="form-control" multiple size="10">
-          <!-- BEGIN groups -->
-          <option value="{groups.displayName}">{groups.displayName}</option>
-          <!-- END groups -->
-      </select>
-  </div>
-</div>
 
 <div class="checkbox">
 <label><input name="hide-mobile" type="checkbox"> [[admin/extend/widgets:hide-on-mobile]]</input></label>

src/views/admin/partials/widgets/show_hide_groups.tpl

@@ -0,0 +1,18 @@
+<div class="row">
+	<div class="col-lg-6">
+		<label>[[admin/extend/widgets:show-to-groups]]</label>
+		<select name="groups" class="form-control" multiple size="10">
+			<!-- BEGIN groups -->
+			<option value="{groups.displayName}">{groups.displayName}</option>
+			<!-- END groups -->
+		</select>
+	</div>
+	<div class="col-lg-6">
+		<label>[[admin/extend/widgets:hide-from-groups]]</label>
+		<select name="groupsHideFrom" class="form-control" multiple size="10">
+			<!-- BEGIN groups -->
+			<option value="{groups.displayName}">{groups.displayName}</option>
+			<!-- END groups -->
+		</select>
+	</div>
+</div>

src/widgets/index.js

@@ -50,7 +50,7 @@ async function renderWidget(widget, uid, options) {
 		return;
 	}
 
-	const isVisible = await checkVisibility(widget, uid);
+	const isVisible = await widgets.checkVisibility(widget.data, uid);
 	if (!isVisible) {
 		return;
 	}
@@ -92,17 +92,17 @@ async function renderWidget(widget, uid, options) {
 	return { html };
 }
 
-async function checkVisibility(widget, uid) {
+widgets.checkVisibility = async function (data, uid) {
 	let isVisible = true;
 	let isHidden = false;
-	if (widget.data.groups.length) {
+	if (data.groups.length) {
-		isVisible = await groups.isMemberOfAny(uid, widget.data.groups);
+		isVisible = await groups.isMemberOfAny(uid, data.groups);
 	}
-	if (widget.data.groupsHideFrom.length) {
+	if (data.groupsHideFrom.length) {
-		isHidden = await groups.isMemberOfAny(uid, widget.data.groupsHideFrom);
+		isHidden = await groups.isMemberOfAny(uid, data.groupsHideFrom);
 	}
 	return isVisible && !isHidden;
-}
+};
 
 widgets.getWidgetDataForTemplates = async function (templates) {
 	const keys = templates.map(tpl => `widgets:${tpl}`);