admin/Facilitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

KFNS#39913 preview bijlagen plaatjes, nieuwe modal toegevoegd

Browse Source 
svn path=/Website/trunk/; revision=37448
This commit is contained in:
Koen Reefman
2018-03-21 14:51:39 +00:00
parent 426ad09384
commit f20bc471af
3 changed files with 190 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
APPL/Shared/BijlagenPreview.asp Normal file
View File

@@ -0,0 +1,125 @@
<%@language="javascript"%>
<% /*
$Revision$
$Id$
File: BijlagenPreview.asp
Description: ASP to browse a directory of pictures
Parameters:
root_path absolute path on the webserver to the directory where the pictures are
stored. Including starting slash and ending slash. (only forward slashes are
allowed)
loc_key key of the location to select the pictures from.
nrOfPict optional, number of pictures to be displayed per line
Note: !
*/ %>
<!-- #include file="../Shared/common.inc" -->
<!-- #include file="../Shared/iface.inc" -->
<!-- #include file="../shared/FlexFiles.inc" -->
<%
protectQS.verify(); // tamper check
FCLTHeader.Requires({ plugins: ["jQuery"] });
var pModule = getQParam("module", "");
var pKey = getQParamInt("key", -1);
var pKenmerk_key = getQParamInt("kenmerk_key", -1);
var pNiveau = getQParam("niveau", "");
var picsPerLine = getQParamInt("nrOfPict", -1);
function OpenFlexFile(module, niveau, key, kenmerk_key, fname, params)
{
params = params || {}
// Lever code op voor tonen van een bepaalde flexfile streaming
var s = rooturl + "/appl/shared/BijlagenStream.asp"
s += "?module=" + module
+ "&key=" + key
+ (niveau ? "&niveau=" + niveau : "")
+ "&kenmerk_key=" + kenmerk_key
+ "&filename=" + Server.URLencode(fname);
if (params.mime_type)
s += "&mime=" + params.mime_type;
if (params.contentdp)
s += "&contentdp=" + params.contentdp;
return s;
}
%>
<html>
<head>
<% FCLTHeader.Generate(); %>
<script type="text/javascript">
function ShowPicture(imageName)
{
newWindow = FcltMgr.windowopen(imageName, "newWindow", "resizable=yes, scrollbars=yes");
newWindow.document.close();
}
</script>
</head>
<body class="modal" id="mod_preview">
<br>
<table class="preview" cellspacing="0" cellpadding="10">
<%
var lijst = [];
var vAttachPath = flexProps(pModule, pKey, String(pKenmerk_key), pNiveau).AttachPath + "/";
var fso = Server.CreateObject("Scripting.FileSystemObject")
if (vAttachPath && fso.FolderExists(vAttachPath))
{
var f, fc;
var regex = new RegExp(S("flexPreviewExt"));
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.GetFolder(vAttachPath);
fc = new Enumerator(f.files);
for (; !fc.atEnd(); fc.moveNext())
{
// Only preview the extensions as specified in S("flexPreviewExt")
if (regex.test("."+fso.GetExtensionName(fc.item())))
lijst.push(fc.item().Name);
}
}
// Kiest optimaal aantal plaatjes per regel, zo vierkant mogelijk met
var MAXPERLINE = 5;
if (picsPerLine > 0)
picsPerLine = Math.min(picsPerLine, lijst.length);
else if (lijst.length > 0)
picsPerLine = lijst.length < 4 ? lijst.length : Math.min(Math.round(Math.sqrt(lijst.length)), MAXPERLINE);
var href;
var tdWidth = parseInt(100/picsPerLine);
for (var i = 0; i < lijst.length; i++)
{
href = protectQS.create(OpenFlexFile(pModule, pNiveau, pKey, pKenmerk_key, lijst[i]));
if (i % picsPerLine == 0)
{
%> <tr valign="top">
<% } %>
<td onclick="FcltMgr.windowopen('<%=safe.jsstring(href)%>', 'File')" style="width:<%=tdWidth%>%">
<div>
<img src="<%=safe.htmlattr(href)%>" class="preview" alt="<%=lijst[i]%>">
<br>
<%=lijst[i]%>
</div>
</td>
<% if ((i+1) % picsPerLine == 0)
{ %>
</tr>
<% }
}
if (!lijst.length)
{
shared.simpel_page(L("lcl_shared_no_photos_present"));
} %>
</table>
</body>
</html>

36
APPL/Shared/default.csx
View File

@@ -870,6 +870,29 @@ i.autoreport {
margin-top: 1px; margin-top: 1px;
color: ==buttonbackgroundcolor==; color: ==buttonbackgroundcolor==;
} }
table.preview {
width: 100%;
}
table.preview tr td {
max-height: 170px;
height: 100%;
position: relative;
text-align: center;
vertical-align: bottom;
cursor: pointer;
}
table.preview tr td > div > img {
opacity: 1;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
table.preview tr td:hover > div > img {
opacity: 0.5;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
img.preview { max-width: 100%; }
/* uren registratie iconen. Moeten misschien een keer een autokleur krijgen */ /* uren registratie iconen. Moeten misschien een keer een autokleur krijgen */
.notperfect .fa-comment-o, .notperfect .fa-comment { .notperfect .fa-comment-o, .notperfect .fa-comment {
@@ -880,7 +903,17 @@ i.autoreport {
color: #2b5797; color: #2b5797;
} }
.preview.fa-eye {
float: right;
padding-right: 2px;
line-height: inherit;
font-size: 1.3em;
vertical-align: baseline;
color: ==buttonbackgroundcolor==;
}
.preview.fa-eye:hover {
color: ==buttonhoverbackgroundcolor==;
}
.besflex { .besflex {
padding: 1px 0 2px 0; padding: 1px 0 2px 0;
@@ -3234,6 +3267,7 @@ body.likemodal {
body.mod_edit_mandate {min-width:500px;} body.mod_edit_mandate {min-width:500px;}
#mod_pass2mail {min-width:500px;} #mod_pass2mail {min-width:500px;}
#mod_pnotes {min-width:500px;} #mod_pnotes {min-width:500px;}
#mod_preview {min-width:600px;}
#mod_stdmeldingfaq {min-width:500px;} #mod_stdmeldingfaq {min-width:500px;}
#mod_stdmeldingfaq .label {min-width: 0px;} #mod_stdmeldingfaq .label {min-width: 0px;}
#mod_selfreg {min-width:410px; height:500px;} #mod_selfreg {min-width:410px; height:500px;}

34
APPL/Shared/kenmerk_common.inc
View File

@@ -26,6 +26,7 @@ if (!this.JSON_Result)
FCLTHeader.Requires({plugins:["jQuery", "kenmerk"], js: ["jquery-ui.js", "date.js"]}) FCLTHeader.Requires({plugins:["jQuery", "kenmerk"], js: ["jquery-ui.js", "date.js"]})
var requiredGroupUsed = new Array(); // Array zorgt voor eenmalige initiele aanroep van checkRequiredGroup(groep) per groep var requiredGroupUsed = new Array(); // Array zorgt voor eenmalige initiele aanroep van checkRequiredGroup(groep) per groep
var addPreview = false;
function parseDocumentPath(kenmerk_val) function parseDocumentPath(kenmerk_val)
{ {
@@ -100,10 +101,10 @@ function BijlagenButton(pModule, pNiveau, pKey, tmpfolder, pKenmerk_key,
// vooralsnog read-only // vooralsnog read-only
/* Bestanden zijn nu te vinden in ...cust/X/flexfiles/[module]/[key]/[kenmerk_key] */ /* Bestanden zijn nu te vinden in ...cust/X/flexfiles/[module]/[key]/[kenmerk_key] */
var lijst = BijlagenList(pModule, pNiveau, pKey, pKenmerk_key, otherKenmerk_path); var lijst = BijlagenList(pModule, pNiveau, pKey, pKenmerk_key, otherKenmerk_path);
if (pReadonly) if (pReadonly)
{ // Indien readonly en lijst.length = 0 dan hoeft het kenmerk (net als bij andere kenmerken) helemaal niet getoond te worden. { // Indien readonly en lijst.length = 0 dan hoeft het kenmerk (net als bij andere kenmerken) helemaal niet getoond te worden.
var filehtmlarr = []; var filehtmlarr = [];
var regex = new RegExp(S("flexPreviewExt"));
for (var file in lijst) for (var file in lijst)
{ {
//var html = "<a href='" + safe.htmlattr(href) + "' target='_new'>" + safe.html(lijst[file]) + "</a>"; //var html = "<a href='" + safe.htmlattr(href) + "' target='_new'>" + safe.html(lijst[file]) + "</a>";
@@ -119,9 +120,12 @@ function BijlagenButton(pModule, pNiveau, pKey, tmpfolder, pKenmerk_key,
var html = '<span class="details fldflexM" readonly=1' var html = '<span class="details fldflexM" readonly=1'
+ ' onclick=\'FcltMgr.windowopen("' + safe.jsstring(href) + '", "File")\'>' + safe.html(lijst[file]) + '</span>'; + ' onclick=\'FcltMgr.windowopen("' + safe.jsstring(href) + '", "File")\'>' + safe.html(lijst[file]) + '</span>';
} }
if (regex.test(lijst[file]))
addPreview = true;
filehtmlarr.push(html); filehtmlarr.push(html);
} }
var res = filehtmlarr.join("</br>");; var res = filehtmlarr.join("</br>");
} }
else else
{ {
@@ -313,11 +317,13 @@ function listKenmerk(sql, module, key, props)
var forceNewLine = false; // Bij labels en grote text velden var forceNewLine = false; // Bij labels en grote text velden
var val_seperator = ''; var val_seperator = '';
var flexkenmerklabel = ''; var flexkenmerklabel = '';
var previewParams = [];
var idCounter = 1; // We maken alleen name/id-s voor de velden die ook echt bewerkt kunnen worden var idCounter = 1; // We maken alleen name/id-s voor de velden die ook echt bewerkt kunnen worden
var clabelCounter = 0; // Het aantal collapsable labels var clabelCounter = 0; // Het aantal collapsable labels
var anyDate = false; var anyDate = false;
var anyTime = false; var anyTime = false;
var anyTextarea = false; var anyTextarea = false;
var anyPreview = false;
var kenmerkidref = new Array(); // Bijhouden welk kenmerk welke id referentie mee heeft gekregen var kenmerkidref = new Array(); // Bijhouden welk kenmerk welke id referentie mee heeft gekregen
var dpYearRanges = []; // te gebruiker jaren voor datepicker vastleggen. var dpYearRanges = []; // te gebruiker jaren voor datepicker vastleggen.
var minMax = []; // te gebruiker uren voor timepicker vastleggen. var minMax = []; // te gebruiker uren voor timepicker vastleggen.
@@ -363,6 +369,7 @@ function listKenmerk(sql, module, key, props)
val_seperator = ':'; val_seperator = ':';
var def_val = oRs("kenmerk_default").Value; var def_val = oRs("kenmerk_default").Value;
var isExpression = false; var isExpression = false;
addPreview = false;
if (!kenmerk_search && !multiMode) if (!kenmerk_search && !multiMode)
{ {
@@ -1176,6 +1183,9 @@ function listKenmerk(sql, module, key, props)
} }
} }
} }
addPreview &= !nolabel && !maskeren && readonlyfield;
if (addPreview)
previewParams.push(protectQS.create("../Shared/BijlagenPreview.asp?key="+key+"&kenmerk_key="+kkey+"&module="+module+"&niveau="+niveau));
} }
var makeCheckbox = false; var makeCheckbox = false;
@@ -1622,7 +1632,8 @@ function listKenmerk(sql, module, key, props)
kvhtml += ((formobile && ktype == 'l'? '<div data-role="collapsible" data-theme="c" data-content-theme="c"><h3 id="collLabel'+clabelCounter+'">' : '') kvhtml += ((formobile && ktype == 'l'? '<div data-role="collapsible" data-theme="c" data-content-theme="c"><h3 id="collLabel'+clabelCounter+'">' : '')
+ '\n <label for="' + nameprefix + idCounter + 'val" class="' + (ktype == 'L' || ktype == 'l'? ' flexlabellabel' : '') + '\n <label for="' + nameprefix + idCounter + 'val" class="' + (ktype == 'L' || ktype == 'l'? ' flexlabellabel' : '')
+ (isExpression ? ' expression' : '') + '">' + '<span title="' + safe.htmlattr(hint) + '">' + (isExpression ? ' expression' : '') + '">' + '<span title="' + safe.htmlattr(hint) + '">'
+ flexkenmerklabel + ((kdim != null && kdim != "xxx")? ' [' + kdim + ']' : '') + val_seperator + '</span>' + flexkenmerklabel + ((kdim != null && kdim != "xxx")? ' [' + kdim + ']' : '') + val_seperator
+ (addPreview ? '<i class="fa fa-lg fa-eye preview" id="'+(previewParams.length-1)+'"></i>' : '') + '</span>'
+ (hint == null ? '' : '<span title="' + safe.htmlattr(hint) + '" class="fa fa-fw fa-question-circle hint"></span>') + (hint == null ? '' : '<span title="' + safe.htmlattr(hint) + '" class="fa fa-fw fa-question-circle hint"></span>')
+ '</label>'+(formobile && ktype == 'l' ? '</h3>' : '')); + '</label>'+(formobile && ktype == 'l' ? '</h3>' : ''));
@@ -1757,7 +1768,7 @@ function listKenmerk(sql, module, key, props)
// Eventuele scripts moeten buiten de </table> // Eventuele scripts moeten buiten de </table>
if (anyTextarea && !kenmerk_search) if (anyTextarea && !kenmerk_search)
{ {
%><script type="text/javascript"> %><script>
$(function() $(function()
{ {
$('textarea').resize(function () { FcltMgr.resized(window) } ); $('textarea').resize(function () { FcltMgr.resized(window) } );
@@ -1767,6 +1778,21 @@ function listKenmerk(sql, module, key, props)
</script><% </script><%
} }
// Add preview links for bijlagen
if (previewParams.length && !kenmerk_search)
{
%><script>
$(function()
{
<% for (var i = 0; i < previewParams.length; i++)
{ %>
$("i.preview#<%=i%>").on("click", function() { FcltMgr.openModalDetail("<%=previewParams[i]%>", "<%=L("lcl_flex_preview")%>") });
<% } %>
});
</script><%
}
// Bij kenmerk_search doen de load_kenmerk's geen FCLTHeader.Generate en dus hebben // Bij kenmerk_search doen de load_kenmerk's geen FCLTHeader.Generate en dus hebben
// we date.js niet gegarandeerd. .fldSflexD werd echter hieronder toch al niet // we date.js niet gegarandeerd. .fldSflexD werd echter hieronder toch al niet
// meegenomen dus komen we er mee weg gewoon hier geen kalenders te doen // meegenomen dus komen we er mee weg gewoon hier geen kalenders te doen