* colorful dynamic menus!

* and also: blank option for menus
* NOTICE: Not all templates support that options yet
This commit is contained in:
slawkens1
2018-01-14 14:29:53 +01:00
parent 862533fd7f
commit ab73c602c3
10 changed files with 2899 additions and 29 deletions

View File

@@ -1,4 +1,4 @@
<link rel="stylesheet" href="{{ constant('BASE_URL') }}tools/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" href="{{ constant('BASE_URL') }}tools/jquery-ui.min.css">
<script src="{{ constant('BASE_URL') }}tools/jquery-ui.min.js"></script>
<script>
var last_id = [];
@@ -18,16 +18,46 @@
var cat = $(this).attr("id").replace('add-button-', '');
var id = last_id[cat];
last_id[cat]++;
$('#sortable-' + cat).append('<li class="ui-state-default" id="list-' + cat + '-' + id + '"><input type="text" name="menu[' + cat + '][]" value=""/><input type="text" name="menu_link[' + cat + '][]" value=""/><a class="remove-button" id="remove-button-' + cat + '-' + id + '"><img src="{{ constant('BASE_URL') }}images/del.png"/></a></li>'); //add input bo
$('#sortable-' + cat).append('<li class="ui-state-default" id="list-' + cat + '-' + id + '"><input type="text" name="menu[' + cat + '][]" value=""/> <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">Blank</span></label> <input class="color-picker" type="text" name="menu_color[' + cat + '][]" value="#ffffff" /><a class="remove-button" id="remove-button-' + cat + '-' + id + '"><img src="{{ constant('BASE_URL') }}images/del.png"/></a></li>'); //add input bo
$('#remove-button-' + cat + '-' + id).click(function() {
$('#list-' + $(this).attr("id").replace('remove-button-', '')).remove();
});
initialiceSpectrum();
});
$("#menus-form").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>
.sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
<style type="text/css">
.sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
.remove-button, .add-button {
cursor: pointer;
}
</style>
</style>
<script type="text/javascript" src="{{ constant('BASE_URL') }}tools/spectrum.js"></script>
<link type="text/css" rel="stylesheet" href="{{ constant('BASE_URL') }}tools/spectrum.css" />
<script type="text/javascript">
initialiceSpectrum();
function initialiceSpectrum() {
$(".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>