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;
|
||||
}
|
||||
|
||||
(function( $ ) {
|
||||
(function($) {
|
||||
$.fn.contact_filter = function(backend_url, typ, autosubmit, onselect) {
|
||||
if(typeof typ === 'undefined') typ = '';
|
||||
if(typeof autosubmit === 'undefined') autosubmit = false;
|
||||
if (typeof typ === 'undefined') {
|
||||
typ = '';
|
||||
}
|
||||
|
||||
if (typeof autosubmit === 'undefined') {
|
||||
autosubmit = false;
|
||||
}
|
||||
|
||||
// Autocomplete contacts
|
||||
contacts = {
|
||||
match: /(^)([^\n]+)$/,
|
||||
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,
|
||||
template: contact_filter,
|
||||
template: contact_filter
|
||||
};
|
||||
|
||||
this.attr('autocomplete','off');
|
||||
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 );
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,18 @@
|
|||
|
||||
<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-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">
|
||||
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
|
||||
|
||||
{{* 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>
|
||||
<div class="contact-photo-image-wrapper hidden-xs">
|
||||
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
|
||||
</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) *}}
|
||||
<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}}" />
|
||||
|
||||
{{* Overlay background on hover the avatar picture *}}
|
||||
|
|
@ -28,7 +24,7 @@
|
|||
|
||||
|
||||
{{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}}
|
||||
{{if $c.2}}
|
||||
<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="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-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">
|
||||
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {11} alt="{{$contact.name}}" />
|
||||
|
||||
{{* 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>
|
||||
<div class="contact-photo-image-wrapper hidden-xs">
|
||||
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {11} alt="{{$contact.name}}" />
|
||||
</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) *}}
|
||||
<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}}" />
|
||||
|
||||
{{* 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}
|
||||
<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}
|
||||
{if $c.2}
|
||||
<li role="presentation"><a role="menuitem" target="redir" href="{$c.1}">{$c.0}</a></li>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,2 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
$(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>
|
||||
|
||||
<script type="text/javascript" src="view/theme/frio/js/mod_contacts.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
var dropContact = "{{$contact_drop_confirm}}";
|
||||
</script>
|
||||
|
||||
{{$tabs}}
|
||||
|
||||
<div id="contacts" class="generic-page-wrapper">
|
||||
|
|
@ -42,7 +46,7 @@
|
|||
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="BatchActionDropdownMenuTools">
|
||||
{{foreach $batch_actions as $n=>$l}}
|
||||
<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>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
|
|
@ -58,53 +62,8 @@
|
|||
{{/foreach}}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="contact-edit-end"></div>
|
||||
<div id="contact-edit-end" class="clear"></div>
|
||||
</form>
|
||||
|
||||
{{$paginate}}
|
||||
</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"}}
|
||||
|
||||
|
||||
{{if $findterm}}
|
||||
<h4 class="search-heading">{{$finding}} {{$findterm}}</h4>
|
||||
{{/if}}
|
||||
|
||||
{{* The search input field to search for contacts *}}
|
||||
<div id="directory-search-wrapper">
|
||||
<form id="directory-search-form" class="navbar-form" role="search" action="directory" method="get" >
|
||||
|
|
@ -30,7 +26,7 @@
|
|||
|
||||
<hr>
|
||||
|
||||
<div id="directory-search-end"></div>
|
||||
<div id="directory-search-end" class="clear"></div>
|
||||
|
||||
{{* format each contact with the contact_template.tpl *}}
|
||||
<ul id="viewcontact_wrapper" class="viewcontact_wrapper media-list">
|
||||
|
|
|
|||
Loading…
Reference in a new issue