mirror of
https://github.com/slawkens/myaac.git
synced 2025-04-26 17:29:21 +02:00
84 lines
2.8 KiB
Twig
84 lines
2.8 KiB
Twig
<link type="text/css" rel="stylesheet" href="{{ constant('BASE_URL') }}tools/ext/jquery-ui/themes/base/jquery-ui.min.css">
|
|
<script>
|
|
let last_id = [];
|
|
let colors = [];
|
|
|
|
{% for cat, menu in menus %}
|
|
{% if config('menu_categories')[cat] is not empty %}
|
|
last_id[{{ cat }}] = {{ last_id[cat] }};
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% set menuDefaultLinksColor = config('menu_default_links_color') %}
|
|
{% for cat, options in config('menu_categories') %}
|
|
colors[{{ cat }}] = '{{ options['default_links_color'] ?? (menuDefaultLinksColor ?? config('menu_default_color')) }}';
|
|
{% endfor %}
|
|
|
|
$(function () {
|
|
const $sortable = $(".sortable");
|
|
$sortable.sortable();
|
|
$sortable.disableSelection();
|
|
|
|
$(".remove-button").on('click', function () {
|
|
var id = $(this).attr("id");
|
|
$('#list-' + id.replace('remove-button-', '')).remove();
|
|
});
|
|
|
|
$(".add-button").on('click', function () {
|
|
var cat = $(this).attr("id").replace('add-button-', '');
|
|
var id = last_id[cat];
|
|
last_id[cat]++;
|
|
const color = colors[cat];
|
|
$('#sortable-' + cat).append('<li class="ui-state-default" id="list-' + cat + '-' + id + '"><label>Name:</label> <input type="text" name="menu[' + cat + '][]" value=""/> <label>Link:</label> <input type="text" name="menu_link[' + cat + '][]" value=""/><input type="hidden" name="menu_blank[' + cat + '][]" value="0" /> <label><input class="blank-checkbox" type="checkbox"/><span title="Open in New Window">New Window</span></label> <input class="color-picker" type="text" name="menu_color[' + cat + '][]" value="#' + color + '" /> <a class="remove-button" id="remove-button-' + cat + '-' + id + '"><i class="fas fa-trash"></i></a></li>'); //add input bo
|
|
$('#remove-button-' + cat + '-' + id).on('click', function () {
|
|
$('#list-' + $(this).attr("id").replace('remove-button-', '')).remove();
|
|
});
|
|
|
|
initializeSpectrum();
|
|
});
|
|
|
|
$("#menus-form").on('submit', function (e) {
|
|
$('.blank-checkbox:not(:checked)').each(function (i, obj) {
|
|
$(obj).parent().prev().val("off");
|
|
});
|
|
|
|
$('.blank-checkbox:checked').each(function (i, obj) {
|
|
$(obj).parent().prev().val("on");
|
|
});
|
|
});
|
|
|
|
});
|
|
</script>
|
|
<style type="text/css">
|
|
.sortable {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.remove-button, .add-button {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="{{ constant('BASE_URL') }}tools/js/spectrum.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="{{ constant('BASE_URL') }}tools/css/spectrum.css"/>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
initializeSpectrum();
|
|
});
|
|
|
|
function initializeSpectrum() {
|
|
$(".color-picker").spectrum({
|
|
preferredFormat: "hex",
|
|
showInput: true,
|
|
showPalette: true,
|
|
palette: [
|
|
['black', 'white', 'blanchedalmond',
|
|
'rgb(255, 128, 0);', 'hsv 100 70 50'],
|
|
['red', 'yellow', 'green', 'blue', 'violet']
|
|
]
|
|
});
|
|
}
|
|
</script>
|