Files
dumas_gestion/mondumas/templates/dossier/dessin_edit.pt

61 lines
2.1 KiB
XML

<metal:block use-macro="main_template">
<div metal:fill-slot="content">
<div class="alert alert-danger" tal:condition="message" tal:content="message" />
<div class="row">
<form id="dessin_edit-form" action="${url}" method="post">
<div class="form-group">
<a href="${request.application_url}/dossier_view/${nodossier}#tab_attaches" class="btn btn-default" role="button">
<span class="glyphicon glyphicon-chevron-left"></span>&nbsp;Annuler</a>
<button class="btn btn-primary" type="submit" name="form.submitted">
<span class="glyphicon glyphicon-ok"></span>&nbsp;Enregistrer</button>
</div>
<!-- this will be the input used to pass the drawingboard content to the server -->
<input type="hidden" name="image" value="">
</form>
</div> <!-- row -->
<div style="row">
<div id="dessin"></div>
</div> <!-- row -->
<!-- Drawingboard -->
<link href="${request.static_url('mondumas:static/dist/drawingboard/drawingboard.min.css')}" rel="stylesheet" media="all">
<script src="${request.static_url('mondumas:static/dist/drawingboard/drawingboard.min.js')}"></script>
<script>
var simpleBoard = new DrawingBoard.Board('dessin', {
background: 'none',
size: 10,
controls: [
'Color',
{ Size: { type: 'dropdown' } },
{ Navigation: { } },
],
size: 1,
webStorage: 'session',
enlargeYourContainer: true
});
$(document).ready(function() {
$('#dessin_edit-form').on('submit', function(e) {
//get drawingboard content
var img = simpleBoard.getImg();
//we keep drawingboard content only if it's not the 'blank canvas'
var imgInput = (simpleBoard.blankCanvas == img) ? '' : img;
// alert("imgInput : " + imgInput);
//put the drawingboard content in the form field to send it to the server
$(this).find('input[name=image]').val( imgInput );
//we can also assume that everything goes well server-side
//and directly clear webstorage here so that the drawing isn't shown again after form submission
//but the best would be to do when the server answers that everything went well
simpleBoard.clearWebStorage();
});
});
</script>
</div><!-- content -->
</metal:block>