Auto select dependencies in the UI

Author: iMattPro

controller/main.php

@@ -168,6 +168,7 @@ public function handle()
 				'DESC'			=> $this->language->lang('SKELETON_QUESTION_COMPONENT_' . strtoupper($component) . '_UI'),
 				'DESC_EXPLAIN'	=> $this->language->is_set('SKELETON_QUESTION_COMPONENT_' . strtoupper($component) . '_EXPLAIN') ? $this->language->lang('SKELETON_QUESTION_COMPONENT_' . strtoupper($component) . '_EXPLAIN') : '',
 				'VALUE'			=> $this->request->variable('component_' . $component, $details['default']),
+				'DEPENDS'		=> $details['dependencies'],
 			]);
 
 			$this->data['components'][$component] = $this->get_user_input('component_' . $component, $details['default']);

styles/prosilver/template/editor.js

@@ -37,6 +37,29 @@
 		$elem.components.prop('checked', $(this).hasClass('markall'));
 	});
 
+	// Auto-mark components that are dependencies
+	$elem.components.each(function() {
+		const $component = $(this);
+		const depends = $component.data('depends');
+
+		if (!depends) {
+			return;
+		}
+
+		const dependIds = depends.split(',').map(id => id.trim());
+
+		$component.on('change', function() {
+			if (this.checked) {
+				dependIds.forEach(dependId => {
+					const $dependency = $('#' + dependId);
+					if ($dependency.length && !$dependency.prop('checked')) {
+						$dependency.prop('checked', true);
+					}
+				});
+			}
+		});
+	});
+
 	// Validate vendor/extension names on field blur
 	$elem.form.on('blur', '#vendor_name, #extension_name', function() {
 		$(this).checkNames();

styles/prosilver/template/skeleton_body.html

@@ -83,7 +83,19 @@ <h2 class="solo">{{ lang('SKELETON_TITLE_COMPONENT_INFO') }}</h2>
 				<h3 class="skeleton-components">{{ lang('SKELETON_COMPONENT_GROUP_' ~ group) }}</h3>
 				{% for component in loops['component_' ~ group] %}
 					<fieldset class="fields2">
-						<div><span aria-label="{{ component.DESC_EXPLAIN }}" class="tooltipped tooltipped-e tooltipped-multiline"><label for="{{ component.NAME }}"><input class="components" type="checkbox" name="{{ component.NAME }}" id="{{ component.NAME }}"{% if component.VALUE %} checked="checked"{% endif %} /> <strong>{{ component.DESC }}</strong></label></span></div>
+						<div>
+							<span aria-label="{{ component.DESC_EXPLAIN }}" class="tooltipped tooltipped-e tooltipped-multiline">
+								<label for="{{ component.NAME }}">
+									<input class="components"
+										   type="checkbox"
+										   name="{{ component.NAME }}"
+										   id="{{ component.NAME }}"
+										{% if component.VALUE %}checked="checked"{% endif %}
+										{% if component.DEPENDS %}data-depends="{{ component.DEPENDS | map(d => 'component_' ~ d) | join(',') }}"{% endif %} />
+									<strong>{{ component.DESC }}</strong>
+								</label>
+							</span>
+						</div>
 					</fieldset>
 				{% endfor %}
 			</div>