Skip to content

Commit

Permalink
features and improvements
Browse files Browse the repository at this point in the history
Verbesserungen in den Eintstellungen des Plugins
  • Loading branch information
JustusHenke committed Oct 15, 2024
1 parent 3b47775 commit 1a15d10
Show file tree
Hide file tree
Showing 4 changed files with 169 additions and 39 deletions.
2 changes: 1 addition & 1 deletion amb-dido.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/**
* Plugin Name: AMB-DidO Plugin
* Description: Erstellt Metadaten gemäß AMB-Standard im JSON-Format für didaktische und Organisationsressourcen
* Version: 0.8.2
* Version: 0.8.5
* Author Justus Henke, Manuel Oellers
*/

Expand Down
121 changes: 85 additions & 36 deletions options.php
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,12 @@ function amb_dido_create_settings_page() {
* Ausgabe der Optionsseite.
*/
function amb_dido_settings_page() {
// Holen Sie sich die Plugin-Daten, einschließlich der Version
$plugin_data = get_plugin_data(WP_PLUGIN_DIR . '/amb-dido/amb-dido.php');
$version = $plugin_data['Version'];
?>
<div class="wrap">
<h1>AMB-DidO Einstellungen</h1>
<h1>AMB-DidO Einstellungen <span class="version">Version <?php echo esc_html($version); ?></span></h1>
<h2 class="nav-tab-wrapper">
<?php
$sections = [
Expand Down Expand Up @@ -102,7 +105,13 @@ function amb_dido_register_settings() {
}

add_settings_section('amb_dido_custom_fields_section', '', 'amb_dido_custom_fields_section_callback', 'amb_dido_custom_fields_section');
add_settings_field('amb_dido_custom_fields_field', '', 'amb_dido_custom_fields_field_callback', 'amb_dido_custom_fields_section', 'amb_dido_custom_fields_section');
add_settings_field(
'amb_dido_custom_fields_field',
'Benutzerdefinierte Wertelisten',
'amb_dido_custom_fields_field_callback',
'amb_dido_custom_fields_section',
'amb_dido_custom_fields_section'
);
}

function amb_dido_metadata_section_callback() {
Expand Down Expand Up @@ -141,6 +150,9 @@ function amb_dido_default_field_callback($args) {
$options = get_option('amb_dido_defaults');
$custom_labels = get_option('amb_dido_custom_labels', array());

echo '<div class="amb-default-field-row">';

echo '<div class="amb-default-field-dropdown">';
echo "<select name='amb_dido_defaults[{$args['id']}]'>";
echo "<option value=''>--Keine Auswahl--</option>";
echo "<option value='deactivate'" . ($options[$args['id']] === 'deactivate' ? ' selected="selected"' : '') . ">--Feld ausblenden--</option>";
Expand All @@ -153,10 +165,14 @@ function amb_dido_default_field_callback($args) {
}
}
echo "</select>";
echo '</div>';

// Hinzufügen des Eingabefelds für das benutzerdefinierte Label
echo '<div class="amb-default-field-label">';
$custom_label = isset($custom_labels[$args['id']]) ? $custom_labels[$args['id']] : '';
echo " <input type='text' name='amb_dido_custom_labels[{$args['id']}]' value='" . esc_attr($custom_label) . "' placeholder='Benutzerdefiniertes Label'>";
echo "<input type='text' name='amb_dido_custom_labels[{$args['id']}]' value='" . esc_attr($custom_label) . "' placeholder='Benutzerdefiniertes Label'>";
echo '</div>';

echo '</div>';
}

function amb_dido_sanitize_custom_labels($input) {
Expand Down Expand Up @@ -193,42 +209,52 @@ function amb_dido_sanitize_post_types($input) {
}

function amb_dido_custom_fields_section_callback() {
echo '<p>Fügen Sie hier benutzerdefinierte Wertelisten hinzu, indem Sie eine URL und einen AMB-Schlüssel angeben.</p>';
echo '<p>Fügen Sie hier benutzerdefinierte Wertelisten hinzu, indem Sie eine URL und ein AMB-Attribut angeben.</p>';
}

function amb_dido_custom_fields_field_callback() {
$options = get_option('amb_dido_custom_fields', []);
$amb_keys = ['about', 'teaches', 'assesses', 'audience', 'interactivityType'];

echo '<div class="amb_dido_custom_fields_header">';
echo '<span>URL der Werteliste</span>';
echo '<span>Angewendetes Attribut</span>';
echo '<span></span>';
echo '</div>';
echo '<div id="amb_dido_custom_fields_wrapper">';
echo '<div id="amb_dido_custom_fields_container">';
$counter = 1;
foreach ($options as $custom_field) {
amb_dido_render_custom_field($custom_field['url'], $custom_field['key'], $counter);
$counter++;
amb_dido_render_custom_field($custom_field['url'], $custom_field['key'], substr($custom_field['meta_key'], 10));
}
echo '</div>';
echo '<button type="button" id="amb_dido_add_custom_field">Mehr hinzufügen</button>';
echo '<button type="button" id="amb_dido_add_custom_field" class="button">Mehr hinzufügen</button>';
echo '</div>';
}

function amb_dido_render_custom_field($url, $key, $counter) {
$amb_keys = ['about', 'teaches', 'assesses', 'audience', 'interactivityType', 'competencyRequired', 'educationalLevel'];
$meta_key = 'amb_custom' . $counter;

echo '<div class="amb_dido_custom_field_row">';
echo '<div class="amb_dido_custom_field_column">';
echo '<div class="amb_dido_custom_field_header">JSON-URL der Wertliste</div>';
echo '<input type="url" name="amb_dido_custom_fields[' . esc_attr($meta_key) . '][url]" value="' . esc_attr($url) . '" placeholder="URL eingeben" />';
echo '<div class="amb_dido_custom_field_container">';

echo '<div class="amb_dido_custom_field_url">';
echo '<input type="url" name="amb_dido_custom_fields[' . esc_attr($meta_key) . '][url]" value="' . esc_attr($url) . '" placeholder="JSON-URL der Wertliste" />';
echo '</div>';
echo '<div class="amb_dido_custom_field_column">';
echo '<div class="amb_dido_custom_field_header">AMB-Feld</div>';

echo '<div class="amb_dido_custom_field_key">';
echo '<select name="amb_dido_custom_fields[' . esc_attr($meta_key) . '][key]">';
foreach ($amb_keys as $amb_key) {
$selected = ($key === $amb_key) ? 'selected' : '';
echo '<option value="' . esc_attr($amb_key) . '" ' . $selected . '>' . esc_html($amb_key) . '</option>';
}
echo '</select>';
echo '<input type="hidden" name="amb_dido_custom_fields[' . esc_attr($meta_key) . '][meta_key]" value="' . esc_attr($meta_key) . '" />';
echo '</div>';

echo '<div class="amb_dido_custom_field_remove">';
echo '<button type="button" class="button remove-custom-field">Entfernen</button>';
echo '</div>';

echo '<input type="hidden" name="amb_dido_custom_fields[' . esc_attr($meta_key) . '][meta_key]" value="' . esc_attr($meta_key) . '" />';

echo '</div>';
}

Expand Down Expand Up @@ -333,38 +359,61 @@ function amb_dido_custom_fields_js() {
(function($) {
var counter = <?php echo count(get_option('amb_dido_custom_fields', [])) + 1; ?>;

$('#amb_dido_add_custom_field').on('click', function() {
var newField = amb_dido_render_custom_field('', '', counter);
$('#amb_dido_custom_fields_container').append(newField);
counter++;
});

function amb_dido_render_custom_field(url, key, counter) {
var $row = $('<div>', { 'class': 'amb_dido_custom_field_row' });
var ambKeys = ['about', 'teaches', 'assesses', 'audience', 'interactivityType', 'competencyRequired', 'educationalLevel'];
var metaKey = 'amb_custom' + counter;

var $container = $('<div>', { 'class': 'amb_dido_custom_field_container' });

var $columnUrl = $('<div>', { 'class': 'amb_dido_custom_field_column' });
var $headerUrl = $('<div>', { 'class': 'amb_dido_custom_field_header', text: 'JSON-URL der Wertliste' });
var $urlInput = $('<input>', { type: 'url', name: 'amb_dido_custom_fields[' + counter + '][url]', placeholder: 'URL eingeben', value: url });
$columnUrl.append($urlInput);
var $urlDiv = $('<div>', { 'class': 'amb_dido_custom_field_url' });
var $urlInput = $('<input>', {
type: 'url',
name: 'amb_dido_custom_fields[' + metaKey + '][url]',
value: url,
placeholder: 'JSON-URL der Wertliste'
});
$urlDiv.append($urlInput);

var $columnKey = $('<div>', { 'class': 'amb_dido_custom_field_column' });
var $headerKey = $('<div>', { 'class': 'amb_dido_custom_field_header', text: 'AMB-Feld' });
var $keySelect = $('<select>', { name: 'amb_dido_custom_fields[' + counter + '][key]' });
var ambKeys = ['about', 'teaches', 'assesses', 'audience', 'interactivityType', 'learningResourceType'];
var $keyDiv = $('<div>', { 'class': 'amb_dido_custom_field_key' });
var $keySelect = $('<select>', { name: 'amb_dido_custom_fields[' + metaKey + '][key]' });
$.each(ambKeys, function(index, ambKey) {
var $option = $('<option>', { value: ambKey, text: ambKey });
if (ambKey === key) {
$option.attr('selected', 'selected');
}
$keySelect.append($option);
});
$columnKey.append($keySelect);
$keyDiv.append($keySelect);

var $removeDiv = $('<div>', { 'class': 'amb_dido_custom_field_remove' });
var $removeButton = $('<button>', {
type: 'button',
class: 'button remove-custom-field',
text: 'Entfernen'
});
$removeDiv.append($removeButton);

var $metaKeyInput = $('<input>', { type: 'hidden', name: 'amb_dido_custom_fields[' + counter + '][meta_key]', value: 'amb_custom' + counter });
$row.append($columnUrl, $columnKey, $metaKeyInput);
var $metaKeyInput = $('<input>', {
type: 'hidden',
name: 'amb_dido_custom_fields[' + metaKey + '][meta_key]',
value: metaKey
});

return $row;
$container.append($urlDiv, $keyDiv, $removeDiv, $metaKeyInput);

return $container;
}

$('#amb_dido_add_custom_field').on('click', function() {
var newField = amb_dido_render_custom_field('', '', counter);
$('#amb_dido_custom_fields_container').append(newField);
counter++;
});

$(document).on('click', '.remove-custom-field', function() {
$(this).closest('.amb_dido_custom_field_container').remove();
});

})(jQuery);
</script>
<?php
Expand Down
3 changes: 1 addition & 2 deletions scripts.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
console.log("Hello World");

function toggleSVG(checkbox) {
var svgHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="presentation" class="components-checkbox-control__checked" aria-hidden="true" focusable="false"><path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"></path></svg>';
var container = checkbox.parentNode;
Expand Down Expand Up @@ -54,6 +52,7 @@ document.addEventListener('DOMContentLoaded', function() {
});



/*
document.addEventListener('DOMContentLoaded', function() {
const inputField = document.getElementById('components-form-token-input-amb');
Expand Down
82 changes: 82 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -147,4 +147,86 @@ svg.components-checkbox-control__checked, svg.components-checkbox-control__indet
padding: 10px;
border: 1px solid #ccc;
border-top: none;
}

.version {
font-size: 0.5em;
font-weight: normal;
color: #666;
margin-left: 10px;
}


.amb-default-field-row {
display: grid;
grid-template-columns: minmax(150px, 2fr) minmax(200px, 1fr) 3fr;
gap: 20px;
align-items: center;
margin-bottom: 10px;
}

.amb-default-field-dropdown {
grid-column: 1 / 2;
}

.amb-default-field-label {
grid-column: 2 / 3;
}

.amb-default-field-dropdown select,
.amb-default-field-label input {
width: 100%;
box-sizing: border-box;
}

@media (max-width: 600px) {
.amb-default-field-row {
grid-template-columns: 1fr;
}

.amb-default-field-dropdown,
.amb-default-field-label {
grid-column: 1;
}
}


.amb_dido_custom_fields_header {
display: grid;
grid-template-columns: minmax(200px, 2fr) minmax(150px, 1fr) auto;
gap: 10px;
margin-bottom: 10px;
font-weight: bold;
}

#amb_dido_custom_fields_wrapper {
padding: 0;
}

#amb_dido_custom_fields_container {
margin-bottom: 15px;
}

.amb_dido_custom_field_container {
display: grid;
grid-template-columns: minmax(200px, 2fr) minmax(150px, 1fr) auto;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}

.amb_dido_custom_field_url input,
.amb_dido_custom_field_key select {
width: 100%;
box-sizing: border-box;
}

@media (max-width: 782px) {
.amb_dido_custom_fields_header {
display: none;
}

.amb_dido_custom_field_container {
grid-template-columns: 1fr;
}
}

0 comments on commit 1a15d10

Please sign in to comment.