Tupambae_Org/friendica_2021-01
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #4068 from rabuzarus/20171215_-_frio_fix_contact_list

Browse source 
frio: fix some contact list issues
This commit is contained in:
Hypolite Petovan 2017-12-15 15:04:48 -05:00 committed by GitHub
commit a3ea106662
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 97 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
view/theme/frio/js/mod_contacts.js Normal file
View 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;
}
}

19
view/theme/frio/js/theme.js
View file

@ -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 );

42
view/theme/frio/templates/contact_template.tpl
View file

@ -1,22 +1,18 @@
<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 *}}
@ -26,9 +22,8 @@
</div> </div>
</button> </button>
{{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 +128,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 *}}
@ -158,9 +149,8 @@ We use this part to filter the contacts with jquery.textcomplete *}}
</div> </div>
</button> </button>
{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>

25
view/theme/frio/templates/contacts-head.tpl
View file

@ -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>

53
view/theme/frio/templates/contacts-template.tpl
View file

@ -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>

6
view/theme/frio/templates/directory_header.tpl
View file

@ -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">