%TMPL:INCLUDE{"view"}%
%TMPL:INCLUDE{"user"}%
%TMPL:DEF{"form"}%%TMPL:END%
%TMPL:DEF{"revinfo"}%%TMPL:END%
%TMPL:DEF{"topicactions"}%%TMPL:END%
%TMPL:DEF{"userlist::query"}%form=~'UserForm$'%TMPL:END%
%TMPL:DEF{"userlist::title"}%<h1 >%TOPICTITLE%</h1>%TMPL:END%
%TMPL:DEF{"content"}% %TMPL:P{"userlist::title"}% %TMPL:P{"userlist::filter"}% %TMPL:P{"userlist::result"}% %TMPL:P{"userlist::javascript"}% %TMPL:P{"userlist::css"}% %TMPL:END%
%TMPL:DEF{"userlist::filter"}%<div class="foswikiPageForm"> <b>%MAKETEXT{"Filter"}%:</b> <input type="text" class="foswikiInputField jqFocus" name="userlistFilter" value="%URLPARAM{"filter"}%" size="50" id="userlistFilter" /> </div>%TMPL:END%
%TMPL:DEF{"userlist::result"}%<noautolink> <div class="userListContainer clearfix"> %DBQUERY{ "%TMPL:P{"userlist::query"}%" format="$percntTMPL:P{\"userlist::format\" web=\"$web\" topic=\"$topic\"}$percnt" exclude="NewUserTemplate" }% </div> </noautolink>%TMPL:END%
%TMPL:DEF{"userlist::format"}%<div class="userInfo alt clearfix"> %TMPL:P{"user::photo" web="%web%" topic="%topic%" crop="off" size="80x120^" }% <h5><a href='%SCRIPTURLPATH{"view"}%/%web%/%topic%'>%GETTOPICTITLE{"%web%.%topic%"}%</a></h5> <ul class='foswikiTopicInfo'> %IF{"'%web%.%topic%'/Telephone" then="%FORMFIELD{"Telephone" topic="%web%.%topic%" format="<li>%JQICON{"fa-phone"}% <a href='tel:$value'>$value</a></li>"}%" }%%IF{"'%web%.%topic%'/Email" then="%FORMFIELD{"Email" topic="%web%.%topic%" format="<li>%JQICON{"fa-inbox"}% <a href='tel:$value'>$value</a></li>"}%" else="%USERINFO{"%web%.%topic%" format="<li>%JQICON{"fa-inbox"}% <a href='mailto:$emails'>$emails</a></li>"}%" }%%IF{"'%web%.%topic%'/Location" then="%FORMFIELD{"Location" topic="%web%.%topic%" format="<li>%JQICON{"fa-tag"}% $value</li>"}%" }%<!-- --> </ul> </div>%TMPL:END%
%TMPL:DEF{"userlist::javascript"}%%JQREQUIRE{"focus"}%%ADDTOZONE{ "script" id="NATSKINWIKIUSERS" requires="JQUERYPLUGIN" text="<script> jQuery(function($) { function filterImages(query) { var regex = new RegExp(query, 'i'); $('.userInfo h5').each(function() { var $this = $(this), text = $(this).text(); if (text.match(regex)) { $this.parent().stop(false, true).fadeIn(); } else { $this.parent().stop(false, true).fadeOut(); } }); } $('#userlistFilter').keyup(function(event) { if (event.which == 13) { event.preventDefault(); } filterImages($(this).val()); }); }); </script>"}%%TMPL:END%
%TMPL:DEF{"userlist::css"}%<literal> <style> .userListContainer { margin-top:1.5em; display:flex; flex-wrap:wrap; } .userInfo { margin:var(--margin) var(--margin) 0 0; padding:0.75em 0.75em 0.75em calc(.75em + 85px); flex-grow:1; overfloW:hidden; box-sizing:border-box; min-height:95px; max-width:calc(33% - 1em); font-size:95%; position:relative; } .userInfo h5 { margin:0 0 0.5em; } .userInfo .imagePlain { width: 80px; height: 100%; object-fit:cover; background-size:cover; background-position:center center; position:absolute; top:0; left:0; } .userInfo ul { list-style:none; margin:0; padding:0; } .userInfo li { margin:0; padding:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } </style> </literal>%TMPL:END%