frio: fix some contact list issues
This commit is contained in:
rabuzarus
parent
afbfbde112
commit
85f558d8fb
60
view/theme/frio/js/mod_contacts.js
Normal file
60
view/theme/frio/js/mod_contacts.js
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
|
||||||
|
var batchConfirmed = false;
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
// Add contact_filter autocompletion to the search field.
|
||||||
|
$("#contacts-search").contact_filter(baseurl + '/acl', 'r', true);
|
||||||
|
|
||||||
|
// Hide the viewcontact_wrapper if there is an input in the search field
|
||||||
|
// We are doing this to let the the contact_filter replace the original
|
||||||
|
// shown contacts.
|
||||||
|
$("#contacts-search").keyup(function(){
|
||||||
|
var elText = $(this).val();
|
||||||
|
if (elText.length !== 0) {
|
||||||
|
$("#viewcontact_wrapper").hide();
|
||||||
|
$("ul.textcomplete-dropdown").addClass("show media-list");
|
||||||
|
} else {
|
||||||
|
$("#viewcontact_wrapper").show();
|
||||||
|
$("ul.textcomplete-dropdown").removeClass("show");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Initiale autosize for the textareas.
|
||||||
|
autosize($("textarea.text-autosize"));
|
||||||
|
|
||||||
|
|
||||||
|
// Replace the drop contact link of the photo menu
|
||||||
|
// with a confirmation modal.
|
||||||
|
$("body").on("click", ".contact-photo-menu a", function(e) {
|
||||||
|
var photoMenuLink = $(this).attr('href');
|
||||||
|
if (typeof photoMenuLink !== "undefined" && photoMenuLink.indexOf("/drop?confirm=1") !== -1) {
|
||||||
|
e.preventDefault();
|
||||||
|
addToModal(photoMenuLink);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @brief This function submits the form with the batch action values.
|
||||||
|
*
|
||||||
|
* @param {string} name The name of the batch action.
|
||||||
|
* @param {string} value If it isn't empty the action will be posted.
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
function batch_submit_handler(name, value) {
|
||||||
|
if (confirm(value + " ?")) {
|
||||||
|
// Set the value of the hidden input element with the name batch_submit.
|
||||||
|
document.batch_actions_submit.batch_submit.value = value;
|
||||||
|
// Change the name of the input element from batch_submit according to the
|
||||||
|
// name which is transmitted to this function.
|
||||||
|
document.batch_actions_submit.batch_submit.name = name;
|
||||||
|
// Transmit the form.
|
||||||
|
document.batch_actions_submit.submit();
|
||||||
|
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -520,24 +520,31 @@ function filter_replace(item) {
|
||||||
return item.name;
|
return item.name;
|
||||||
}
|
}
|
||||||
|
|
||||||
(function( $ ) {
|
(function($) {
|
||||||
$.fn.contact_filter = function(backend_url, typ, autosubmit, onselect) {
|
$.fn.contact_filter = function(backend_url, typ, autosubmit, onselect) {
|
||||||
if(typeof typ === 'undefined') typ = '';
|
if (typeof typ === 'undefined') {
|
||||||
if(typeof autosubmit === 'undefined') autosubmit = false;
|
typ = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof autosubmit === 'undefined') {
|
||||||
|
autosubmit = false;
|
||||||
|
}
|
||||||
|
|
||||||
// Autocomplete contacts
|
// Autocomplete contacts
|
||||||
contacts = {
|
contacts = {
|
||||||
match: /(^)([^\n]+)$/,
|
match: /(^)([^\n]+)$/,
|
||||||
index: 2,
|
index: 2,
|
||||||
search: function(term, callback) { contact_search(term, callback, backend_url, typ); },
|
search: function(term, callback) {contact_search(term, callback, backend_url, typ);},
|
||||||
replace: filter_replace,
|
replace: filter_replace,
|
||||||
template: contact_filter,
|
template: contact_filter
|
||||||
};
|
};
|
||||||
|
|
||||||
this.attr('autocomplete','off');
|
this.attr('autocomplete','off');
|
||||||
var a = this.textcomplete([contacts], {className:'accontacts', appendTo: '#contact-list'});
|
var a = this.textcomplete([contacts], {className:'accontacts', appendTo: '#contact-list'});
|
||||||
|
|
||||||
a.on('textComplete:select', function(e, value, strategy) { $(".dropdown-menu.textcomplete-dropdown.media-list").show(); });
|
a.on('textComplete:select', function(e, value, strategy) {
|
||||||
|
$(".dropdown-menu.textcomplete-dropdown.media-list").show();
|
||||||
|
});
|
||||||
};
|
};
|
||||||
})( jQuery );
|
})( jQuery );
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,20 @@
|
||||||
|
|
||||||
<div class="contact-wrapper media" id="contact-entry-wrapper-{{$contact.id}}">
|
<div class="contact-wrapper media" id="contact-entry-wrapper-{{$contact.id}}">
|
||||||
|
|
||||||
{{* This is a wrapper for the contact picture and the dropdown menu with contact relating actions *}}
|
{{* This is a wrapper for the contact picture *}}
|
||||||
<div class="contact-photo-wrapper dropdown media-left">
|
<div class="contact-photo-wrapper dropdown media-left">
|
||||||
<div class="contact-entry-photo mframe" id="contact-entry-photo-{{$contact.id}}">
|
<div class="contact-entry-photo mframe" id="contact-entry-photo-{{$contact.id}}">
|
||||||
|
|
||||||
<button type="button" class="btn btn-link dropdown-toggle" id="contact-photo-menu-{{$contact.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<div class="contact-photo-image-wrapper hidden-xs">
|
||||||
<div class="contact-photo-image-wrapper hidden-xs">
|
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
|
||||||
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
|
</div>
|
||||||
|
|
||||||
{{* Overlay background on hover the avatar picture *}}
|
|
||||||
<div class="contact-photo-overlay">
|
|
||||||
<span class="contact-photo-overlay-content xl"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
{{* For very small displays we use a drobdown menu for contact relating actions *}}
|
||||||
|
<button type="button" class="btn btn-link dropdown-toggle visible-xs" id="contact-photo-menu-button-{{$contact.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
{{* use a smaller picture on very small displays (e.g. mobiles) *}}
|
{{* use a smaller picture on very small displays (e.g. mobiles) *}}
|
||||||
<div class="contact-photo-image-wrapper hidden-lg hidden-md hidden-sm">
|
<div class="contact-photo-image-wrapper visible-xs">
|
||||||
<img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
|
<img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
|
||||||
|
|
||||||
{{* Overlay background on hover the avatar picture *}}
|
{{* Overlay background on hover the avatar picture *}}
|
||||||
<div class="contact-photo-overlay">
|
<div class="contact-photo-overlay">
|
||||||
<span class="contact-photo-overlay-content overlay-xs"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
|
<span class="contact-photo-overlay-content overlay-xs"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
|
||||||
|
|
@ -28,7 +24,7 @@
|
||||||
|
|
||||||
|
|
||||||
{{if $contact.photo_menu}}
|
{{if $contact.photo_menu}}
|
||||||
<ul class="contact-photo-menu menu-popup dropdown-menu " id="contact-photo-menu-{{$contact.id}}" role="menu" aria-labelledby="contact-photo-menu-{{$contact.id}}">
|
<ul class="contact-photo-menu menu-popup dropdown-menu hidden-lg hidden-md hidden-sm" id="contact-photo-menu-{{$contact.id}}" role="menu" aria-labelledby="contact-photo-menu-{{$contact.id}}">
|
||||||
{{foreach $contact.photo_menu as $c}}
|
{{foreach $contact.photo_menu as $c}}
|
||||||
{{if $c.2}}
|
{{if $c.2}}
|
||||||
<li role="presentation"><a role="menuitem" target="redir" href="{{$c.1}}">{{$c.0}}</a></li>
|
<li role="presentation"><a role="menuitem" target="redir" href="{{$c.1}}">{{$c.0}}</a></li>
|
||||||
|
|
@ -133,22 +129,18 @@ We use this part to filter the contacts with jquery.textcomplete *}}
|
||||||
<div class="javascript-template" rel="contact-template" style="display: none">
|
<div class="javascript-template" rel="contact-template" style="display: none">
|
||||||
<div class="contact-wrapper media" id="contact-entry-wrapper-{$id}">
|
<div class="contact-wrapper media" id="contact-entry-wrapper-{$id}">
|
||||||
|
|
||||||
{{* This is a wrapper for the contact picture and the dropdown menu with contact relating actions *}}
|
{{* This is a wrapper for the contact picture *}}
|
||||||
<div class="contact-photo-wrapper dropdown media-left">
|
<div class="contact-photo-wrapper dropdown media-left">
|
||||||
<div class="contact-entry-photo mframe" id="contact-entry-photo-{$id}">
|
<div class="contact-entry-photo mframe" id="contact-entry-photo-{$id}">
|
||||||
|
|
||||||
<button type="button" class="btn btn-link dropdown-toggle" id="contact-photo-menu-{$id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<div class="contact-photo-image-wrapper hidden-xs">
|
||||||
<div class="contact-photo-image-wrapper hidden-xs">
|
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {11} alt="{{$contact.name}}" />
|
||||||
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {11} alt="{{$contact.name}}" />
|
</div>
|
||||||
|
|
||||||
{{* Overlay background on hover the avatar picture *}}
|
|
||||||
<div class="contact-photo-overlay">
|
|
||||||
<span class="contact-photo-overlay-content xl"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
{{* For very small displays we use a drobdown menu for contact relating actions *}}
|
||||||
|
<button type="button" class="btn btn-link dropdown-toggle visible-xs" id="contact-photo-menu-button{$id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
{{* use a smaller picture on very small displays (e.g. mobiles) *}}
|
{{* use a smaller picture on very small displays (e.g. mobiles) *}}
|
||||||
<div class="contact-photo-image-wrapper hidden-lg hidden-md hidden-sm">
|
<div class="contact-photo-image-wrapper visible-xs">
|
||||||
<img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {11} alt="{{$contact.name}}" />
|
<img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {11} alt="{{$contact.name}}" />
|
||||||
|
|
||||||
{{* Overlay background on hover the avatar picture *}}
|
{{* Overlay background on hover the avatar picture *}}
|
||||||
|
|
@ -160,7 +152,7 @@ We use this part to filter the contacts with jquery.textcomplete *}}
|
||||||
|
|
||||||
|
|
||||||
{if $photo_menu}
|
{if $photo_menu}
|
||||||
<ul class="contact-photo-menu menu-popup dropdown-menu " id="contact-photo-menu-{$id}" role="menu" aria-labelledby="contact-photo-menu-{$id}">
|
<ul class="contact-photo-menu menu-popup dropdown-menu hidden-lg hidden-md hidden-sm" id="contact-photo-menu-{$id}" role="menu" aria-labelledby="contact-photo-menu-{$id}">
|
||||||
{foreach $photo_menu as $c}
|
{foreach $photo_menu as $c}
|
||||||
{if $c.2}
|
{if $c.2}
|
||||||
<li role="presentation"><a role="menuitem" target="redir" href="{$c.1}">{$c.0}</a></li>
|
<li role="presentation"><a role="menuitem" target="redir" href="{$c.1}">{$c.0}</a></li>
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,2 @@
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript" src="view/theme/frio/js/mod_contacts.js"></script>
|
||||||
$(document).ready(function() {
|
|
||||||
// Add contact_filter autocompletion to the search field
|
|
||||||
$("#contacts-search").contact_filter(baseurl + '/acl', 'r', true);
|
|
||||||
|
|
||||||
// Hide the viewcontact_wrapper if there is an input in the search field
|
|
||||||
// We are doing this to let the the contact_filter replace the original
|
|
||||||
// shown contacts
|
|
||||||
$("#contacts-search").keyup(function(){
|
|
||||||
var elText = $(this).val();
|
|
||||||
if(elText.length !== 0) {
|
|
||||||
$("#viewcontact_wrapper").hide();
|
|
||||||
$("ul.textcomplete-dropdown").addClass("show media-list");
|
|
||||||
} else {
|
|
||||||
$("#viewcontact_wrapper").show();
|
|
||||||
$("ul.textcomplete-dropdown").removeClass("show");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// initiale autosize for the textareas
|
|
||||||
autosize($("textarea.text-autosize"));
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
var dropContact = "{{$contact_drop_confirm}}";
|
||||||
|
</script>
|
||||||
|
|
||||||
{{$tabs}}
|
{{$tabs}}
|
||||||
|
|
||||||
<div id="contacts" class="generic-page-wrapper">
|
<div id="contacts" class="generic-page-wrapper">
|
||||||
|
|
@ -42,7 +46,7 @@
|
||||||
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="BatchActionDropdownMenuTools">
|
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="BatchActionDropdownMenuTools">
|
||||||
{{foreach $batch_actions as $n=>$l}}
|
{{foreach $batch_actions as $n=>$l}}
|
||||||
<li role="menuitem">
|
<li role="menuitem">
|
||||||
{{* call the js batch_submit_handler. Have a look at the buttom of this file *}}
|
{{* call the js batch_submit_handler. Have a look at the file mod_contacts.js *}}
|
||||||
<button type="button" class="btn-link" onclick="batch_submit_handler('{{$n}}', '{{$l}}')">{{$l}}</button>
|
<button type="button" class="btn-link" onclick="batch_submit_handler('{{$n}}', '{{$l}}')">{{$l}}</button>
|
||||||
</li>
|
</li>
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
|
|
@ -58,53 +62,8 @@
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="contact-edit-end"></div>
|
<div id="contact-edit-end" class="clear"></div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
{{$paginate}}
|
{{$paginate}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
$(document).ready(function() {
|
|
||||||
// javascript dialog to batch actions
|
|
||||||
$(".batch-action").click(function(e){
|
|
||||||
if (confirm($(this).attr('value')+" ?")) {
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
e.preventDefault();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// add javascript confirm dialog to "drop" links. Plain html url have "?confirm=1" to show confirmation form, we need to remove it
|
|
||||||
$(".drop").each(function() {
|
|
||||||
$(this).attr('href', $(this).attr('href').replace("confirm=1","") );
|
|
||||||
$(this).click(function(e){
|
|
||||||
if (confirm("{{$contact_drop_confirm}}")) {
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
e.preventDefault();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @brief This function submits the form with the batch action values
|
|
||||||
*
|
|
||||||
* @param string name The name of the batch action
|
|
||||||
* @param string value If it isn't empty the action will be posted
|
|
||||||
*/
|
|
||||||
function batch_submit_handler(name, value) {
|
|
||||||
// set the value of the hidden input element with the name batch_submit
|
|
||||||
document.batch_actions_submit.batch_submit.value=value;
|
|
||||||
// change the name of the input element from batch_submit according to the
|
|
||||||
// name which is transmitted to this function
|
|
||||||
document.batch_actions_submit.batch_submit.name=name;
|
|
||||||
// transmit the form
|
|
||||||
document.batch_actions_submit.submit() ;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,6 @@
|
||||||
{{include file="section_title.tpl"}}
|
{{include file="section_title.tpl"}}
|
||||||
|
|
||||||
|
|
||||||
{{if $findterm}}
|
|
||||||
<h4 class="search-heading">{{$finding}} {{$findterm}}</h4>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{* The search input field to search for contacts *}}
|
{{* The search input field to search for contacts *}}
|
||||||
<div id="directory-search-wrapper">
|
<div id="directory-search-wrapper">
|
||||||
<form id="directory-search-form" class="navbar-form" role="search" action="directory" method="get" >
|
<form id="directory-search-form" class="navbar-form" role="search" action="directory" method="get" >
|
||||||
|
|
@ -30,7 +26,7 @@
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<div id="directory-search-end"></div>
|
<div id="directory-search-end" class="clear"></div>
|
||||||
|
|
||||||
{{* format each contact with the contact_template.tpl *}}
|
{{* format each contact with the contact_template.tpl *}}
|
||||||
<ul id="viewcontact_wrapper" class="viewcontact_wrapper media-list">
|
<ul id="viewcontact_wrapper" class="viewcontact_wrapper media-list">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue