Files
racalmas/website/agenda/planung/templates/image.html
2019-03-02 16:04:08 +01:00

123 lines
3.7 KiB
HTML

<link type="text/css" href="css/image_manager.css" rel="stylesheet"/>
<script src="js/image.js" type="text/javascript"></script>
<script src="js/page_leave_handler.js" type="text/javascript"></script>
<TMPL_IF .allow.create_image>
<script src="js/image_upload.js" type="text/javascript"></script>
</TMPL_IF>
<script>
var project_id="<TMPL_VAR .project_id>";
var studio_id="<TMPL_VAR .studio_id>";
var selectedImageTab='select';
$(document).ready(
function() {
addLocalization('image');
//add tab change handler
$("#image-tabs").tabs({
activate: function(event, ui){
if (ui==null) return;
selectedImageTab = getSelectedTab('image-tabs');
<TMPL_IF .allow.create_image>
if(selectedImageTab=="upload"){
initUploadDialog();
$('#imageList').hide();
return;
}
</TMPL_IF>
//TODO: add confirm handler
$('#imageList').show();
}
});
// get initially selected tab
selectedImageTab = getSelectedTab('image-tabs');
pageLeaveHandler();
}
);
</script>
<div id="content">
<TMPL_IF .allow.read_image>
<div id="image-tabs">
<ul>
<li>
<a href="#image-tabs-select" value="select">
<TMPL_VAR .loc.tab_select>
<TMPL_IF .allow.update_image> / <TMPL_VAR .loc.tab_edit> </TMPL_IF>
</a>
</li>
<TMPL_IF .allow.create_image>
<li>
<a href="#image-tabs-upload" value="upload"><TMPL_VAR .loc.tab_upload></a>
</li>
</TMPL_IF>
</ul>
<!-- select image -->
<div id="image-tabs-select">
</div>
<!-- upload images -->
<TMPL_IF .allow.create_image>
<div id="image-tabs-upload">
</div>
</TMPL_IF>
</div>
<div id="imageList">
<div style="float:right">
<button onclick="decreaseImageSize();return false;" title="<TMPL_VAR .loc.button_zoom_out>">-</button>
<button onclick="increaseImageSize();return false;" title="<TMPL_VAR .loc.button_zoom_in>">+</button>
</div>
<form id="image_manager" action="image.cgi">
<input name="search" value="<TMPL_VAR search escape=none>" style="width:20em;">
<input type="hidden" name="filename" value="<TMPL_VAR filename escape=none>">
<button onclick="searchImage('<TMPL_VAR target>', '<TMPL_VAR .project_id>', '<TMPL_VAR .studio_id>', '<TMPL_VAR .series_id>', '<TMPL_VAR .event_id>', '<TMPL_VAR .pid>'); return false;"><TMPL_VAR .loc.button_search></button>
</form>
<TMPL_VAR count> <TMPL_VAR .loc.label_search_hits><br />
<div style="clear:both;display: flex; flex-direction: row;">
<div class="images"
style="overflow-y:scroll"
target="<TMPL_VAR .target>"
projectId="<TMPL_VAR .project_id>"
studioId="<TMPL_VAR .studio_id>"
seriesId="<TMPL_VAR .series_id>"
eventId="<TMPL_VAR .event_id>"
pid="<TMPL_VAR .pid>"
>
<TMPL_LOOP images>
<div class="image"
id="img_<TMPL_VAR id>"
style="background-image:url('showImage.cgi?project_id=<TMPL_VAR project_id>&studioId=<TMPL_VAR .studio_id>&type=icon&filename=<TMPL_VAR filename>')"
title="<TMPL_VAR description>"
filename="<TMPL_VAR filename>"
>
<div class="label"><TMPL_VAR name></div>
</div>
</TMPL_LOOP>
</div>
<div id="img_editor" >
</div>
</div>
</div>
</TMPL_IF>
</main>
</center>
</body>
</html>