mirror of
https://github.com/Piwigo/Piwigo.git
synced 2025-04-26 11:19:55 +03:00
fixes #2187 resize activity tooltips
...when the tooltip extends beyond the page. I've also added the tooltips (for both storage and activity) logic to a js file `intro_tooltips.js` and imported it into `intro.tpl`
This commit is contained in:
Linty
parent
8c25d7d2a1
commit
d1cd5b11ef
4 changed files with 142 additions and 132 deletions
135
admin/themes/default/js/intro_tooltips.js
Normal file
135
admin/themes/default/js/intro_tooltips.js
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
$(function() {
|
||||
Object.entries(storage_details).forEach(([type, infos]) => {
|
||||
// Determine if we use MB or GB and show it correctly
|
||||
let size = infos.total.filesize;
|
||||
let str_size_type_string = size > 1000000 ? str_gb : str_mb;
|
||||
let size_nb = size > 1000000 ? (size / 1000000).toFixed(2) : (size / 1000).toFixed(0);
|
||||
let str_size = str_size_type_string.replace("%s", size_nb);
|
||||
|
||||
// Display head of Tooltip
|
||||
$('#storage-title-' + type).html('<b>'+translate_type[type]+'</b>');
|
||||
$('#storage-size-' + type).html('<b>'+ str_size +'</b>');
|
||||
$('#storage-files-' + type).html('<p>'+ (infos.total.nb_files ? translate_files.replace('%d', infos.total.nb_files) : "~") +'</p>');
|
||||
|
||||
// Display body of Tooltip
|
||||
if (infos.details) {
|
||||
$.each(infos.details, function(ext, data) {
|
||||
// Determinate if we use MB or GB and show it correctly (duplicate code from total size for scaling code)
|
||||
let detail_size = data.filesize;
|
||||
let detail_str_size_type_string;
|
||||
let detail_size_nb = 0;
|
||||
if (detail_size > 1000000) {
|
||||
detail_str_size_type_string = str_gb;
|
||||
detail_size_nb = (detail_size / 1000000).toFixed(2);
|
||||
} else {
|
||||
detail_str_size_type_string = str_mb;
|
||||
detail_size_nb = (detail_size / 1000).toFixed(0) < 1 ? (detail_size / 1000).toFixed(2) : (detail_size / 1000).toFixed(0);
|
||||
}
|
||||
let detail_str_size = detail_str_size_type_string.replace("%s", detail_size_nb);
|
||||
$('#storage-detail-' + type).append(''+
|
||||
'<span class="tooltip-details-cont">'+
|
||||
'<span class="tooltip-details-ext"><b>'+ ext +'</b></span>'+
|
||||
'<span class="tooltip-details-size"><b>'+ detail_str_size +'</b></span>'+
|
||||
'<span class="tooltip-details-files">'+ translate_files.replace('%d', data.nb_files) +'</span>'+
|
||||
'</span>'+
|
||||
'');
|
||||
let ext_bg_color = $('.storage-chart span[data-type="storage-'+type+'"]').css('background-color');
|
||||
$('#storage-'+type+' .tooltip-details-ext b').css('color', ext_bg_color);
|
||||
});
|
||||
} else {
|
||||
$('#storage-'+ type +' .separated').attr('style', 'display: none !important');
|
||||
$('#storage-' + type +' .tooltip-header').css('margin', '0');
|
||||
}
|
||||
|
||||
// Fixing storage chart tooltip bug in little screen
|
||||
// Keep showing tooltip and his % when hovered
|
||||
$('#storage-' + type).on('mouseenter', function() {
|
||||
$(this).css('display', 'block');
|
||||
$('.storage-chart span[data-type="storage-'+ type +'"] p').css('opacity', '0.4');
|
||||
}).on('mouseleave', function() {
|
||||
$(this).css('display', 'none');
|
||||
$('.storage-chart span[data-type="storage-'+ type +'"] p').css('opacity', '0');
|
||||
});
|
||||
|
||||
$('.storage-chart span[data-type="storage-'+ type +'"]').on('mouseover', function() {
|
||||
$(this).find('p').css('opacity', '0.4');
|
||||
}).on('mouseout', function() {
|
||||
$(this).find('p').css('opacity', '0');
|
||||
});
|
||||
});
|
||||
|
||||
//Tooltip for the storage chart
|
||||
resizeStorageTooltips();
|
||||
//Tooltip for the activity chart
|
||||
resizeActivityTooltips();
|
||||
|
||||
|
||||
// Resize
|
||||
$(window).on('resize', function(){
|
||||
// resize storage tooltips
|
||||
resizeStorageTooltips(true);
|
||||
// resize activity tooltips
|
||||
resizeActivityTooltips();
|
||||
});
|
||||
});
|
||||
|
||||
/*----------------
|
||||
General function
|
||||
----------------*/
|
||||
function resizeStorageTooltips(resize=false) {
|
||||
$('.storage-chart span').each(function () {
|
||||
let tooltip = $('.storage-tooltips #'+$(this).data('type'));
|
||||
let arrow = $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow');
|
||||
let left = $(this).position().left + $(this).width()/2 - tooltip.innerWidth()/2;
|
||||
// Move tooltip if he create horizontal scrollbar
|
||||
let storage_width = $('#chart-title-storage').innerWidth();
|
||||
if(left + tooltip.innerWidth() > storage_width){
|
||||
let diff = (left + tooltip.innerWidth()) - storage_width;
|
||||
left = left - diff;
|
||||
arrow.css('left', 'calc(50% + '+ diff +'px)');
|
||||
}
|
||||
tooltip.css('left', left+"px");
|
||||
// Move tooltip if he create vertical scrollbar
|
||||
let str_chart_pos = $('.storage-chart').offset().top;
|
||||
let str_chart_height = $('.storage-chart').innerHeight();
|
||||
let tooltip_height = $('.storage-tooltips #'+$(this).data("type")).innerHeight() + str_chart_height;
|
||||
let windows_height = $(window).height();
|
||||
|
||||
if (resize) {
|
||||
if (str_chart_pos + tooltip_height > windows_height) {
|
||||
tooltip.css('bottom', 'calc(100% + '+ str_chart_height +'px)');
|
||||
arrow.addClass('bottom');
|
||||
} else {
|
||||
tooltip.css('bottom', '');
|
||||
arrow.removeClass('bottom');
|
||||
}
|
||||
} else {
|
||||
if (str_chart_pos + tooltip_height > windows_height) {
|
||||
tooltip.css('bottom', 'calc(100% + '+ str_chart_height +'px)');
|
||||
arrow.addClass('bottom');
|
||||
}
|
||||
$(this).off('mouseenter').on('mouseenter', function() {
|
||||
tooltip.show();
|
||||
});
|
||||
$(this).off('mouseleave').on('mouseleave', function() {
|
||||
tooltip.hide();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function resizeActivityTooltips() {
|
||||
$('.activity_tooltips').has('.tooltip').each(function() {
|
||||
const max_width = $('#pwgMain').innerWidth() - 20;
|
||||
const tooltip = $(this).find('.tooltip');
|
||||
let left = $(this).position().left + ($(this).innerWidth() / 2) + (tooltip.innerWidth() / 2);
|
||||
if (left > max_width) {
|
||||
const arrow = $(this).find('.tooltip-arrow');
|
||||
const diff = max_width - left;
|
||||
|
||||
tooltip.css('left', 'calc(50% + '+ diff +'px)');
|
||||
arrow.css('left', 'calc(50% - '+ diff +'px)');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -64,121 +64,8 @@ jQuery().ready(function(){
|
|||
{foreach from=$STORAGE_CHART_DATA key=type_to_translate item=details}
|
||||
translate_type['{$type_to_translate}'] = "{$type_to_translate|translate}";
|
||||
{/foreach}
|
||||
{literal}
|
||||
Object.entries(storage_details).forEach(([type, infos]) => {
|
||||
// Determine if we use MB or GB and show it correctly
|
||||
let size = infos.total.filesize;
|
||||
let str_size_type_string = size > 1000000 ? str_gb : str_mb;
|
||||
let size_nb = size > 1000000 ? (size / 1000000).toFixed(2) : (size / 1000).toFixed(0);
|
||||
let str_size = str_size_type_string.replace("%s", size_nb);
|
||||
|
||||
// Display head of Tooltip
|
||||
$('#storage-title-' + type).html('<b>'+translate_type[type]+'</b>');
|
||||
$('#storage-size-' + type).html('<b>'+ str_size +'</b>');
|
||||
$('#storage-files-' + type).html('<p>'+ (infos.total.nb_files ? translate_files.replace('%d', infos.total.nb_files) : "~") +'</p>');
|
||||
|
||||
// Display body of Tooltip
|
||||
if (infos.details) {
|
||||
$.each(infos.details, function(ext, data) {
|
||||
// Determinate if we use MB or GB and show it correctly (duplicate code from total size for scaling code)
|
||||
let detail_size = data.filesize;
|
||||
let detail_str_size_type_string;
|
||||
let detail_size_nb = 0;
|
||||
if (detail_size > 1000000) {
|
||||
detail_str_size_type_string = str_gb;
|
||||
detail_size_nb = (detail_size / 1000000).toFixed(2);
|
||||
} else {
|
||||
detail_str_size_type_string = str_mb;
|
||||
detail_size_nb = (detail_size / 1000).toFixed(0) < 1 ? (detail_size / 1000).toFixed(2) : (detail_size / 1000).toFixed(0);
|
||||
}
|
||||
let detail_str_size = detail_str_size_type_string.replace("%s", detail_size_nb);
|
||||
$('#storage-detail-' + type).append(''+
|
||||
'<span class="tooltip-details-cont">'+
|
||||
'<span class="tooltip-details-ext"><b>'+ ext +'</b></span>'+
|
||||
'<span class="tooltip-details-size"><b>'+ detail_str_size +'</b></span>'+
|
||||
'<span class="tooltip-details-files">'+ translate_files.replace('%d', data.nb_files) +'</span>'+
|
||||
'</span>'+
|
||||
'');
|
||||
let ext_bg_color = $('.storage-chart span[data-type="storage-'+type+'"]').css('background-color');
|
||||
$('#storage-'+type+' .tooltip-details-ext b').css('color', ext_bg_color);
|
||||
});
|
||||
} else {
|
||||
$('#storage-'+ type +' .separated').attr('style', 'display: none !important');
|
||||
$('#storage-' + type +' .tooltip-header').css('margin', '0');
|
||||
}
|
||||
|
||||
// Fixing storage chart tooltip bug in little screen
|
||||
// Keep showing tooltip and his % when hovered
|
||||
$('#storage-' + type).hover(function() {
|
||||
$(this).css('display', 'block');
|
||||
$('.storage-chart span[data-type="storage-'+ type +'"] p').css('opacity', '0.4');
|
||||
}, function() {
|
||||
$(this).css('display', 'none');
|
||||
$('.storage-chart span[data-type="storage-'+ type +'"] p').css('opacity', '0');
|
||||
});
|
||||
$('.storage-chart span[data-type="storage-'+ type +'"]').hover(function() {
|
||||
$(this).find('p').css('opacity', '0.4');
|
||||
}, function() {
|
||||
$(this).find('p').css('opacity', '0');
|
||||
});
|
||||
});
|
||||
|
||||
//Tooltip for the storage chart
|
||||
$('.storage-chart span').each(function () {
|
||||
let tooltip = $('.storage-tooltips #'+$(this).data('type'));
|
||||
let arrow = $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow');
|
||||
let left = $(this).position().left + $(this).width()/2 - tooltip.innerWidth()/2;
|
||||
// Move tooltip if he create horizontal scrollbar
|
||||
let storage_width = $('#chart-title-storage').innerWidth();
|
||||
if(left + tooltip.innerWidth() > storage_width){
|
||||
let diff = (left + tooltip.innerWidth()) - storage_width;
|
||||
left = left - diff;
|
||||
arrow.css('left', 'calc(50% + '+ diff +'px)');
|
||||
}
|
||||
tooltip.css('left', left+"px");
|
||||
// Move tooltip if he create vertical scrollbar
|
||||
let str_chart_pos = $('.storage-chart').offset().top;
|
||||
let str_chart_height = $('.storage-chart').innerHeight();
|
||||
let tooltip_height = $('.storage-tooltips #'+$(this).data("type")).innerHeight() + str_chart_height;
|
||||
let windows_height = $(window).height();
|
||||
if (str_chart_pos + tooltip_height > windows_height) {
|
||||
tooltip.css('bottom', 'calc(100% + '+ str_chart_height +'px)');
|
||||
arrow.addClass('bottom');
|
||||
}
|
||||
$(this).hover(function() {
|
||||
tooltip.toggle();
|
||||
});
|
||||
});
|
||||
|
||||
$(window).on('resize', function(){
|
||||
$('.storage-chart span').each(function () {
|
||||
let tooltip = $('.storage-tooltips #'+$(this).data('type'));
|
||||
let arrow = $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow');
|
||||
let left = $(this).position().left + $(this).width()/2 - tooltip.innerWidth()/2;
|
||||
// Move tooltip if he create horizontal scrollbar
|
||||
let storage_width = $('#chart-title-storage').innerWidth();
|
||||
if(left + tooltip.innerWidth() > storage_width){
|
||||
let diff = (left + tooltip.innerWidth()) - storage_width;
|
||||
left = left - diff;
|
||||
arrow.css('left', 'calc(50% + '+ diff +'px)');
|
||||
}
|
||||
tooltip.css('left', left+"px");
|
||||
// Move tooltip if he create vertical scrollbar
|
||||
let str_chart_pos = $('.storage-chart').offset().top;
|
||||
let str_chart_height = $('.storage-chart').innerHeight();
|
||||
let tooltip_height = $('.storage-tooltips #'+$(this).data("type")).innerHeight() + str_chart_height;
|
||||
let windows_height = $(window).height();
|
||||
if (str_chart_pos + tooltip_height > windows_height) {
|
||||
tooltip.css('bottom', 'calc(100% + '+ str_chart_height +'px)');
|
||||
arrow.addClass('bottom');
|
||||
} else {
|
||||
tooltip.css('bottom', '');
|
||||
arrow.removeClass('bottom');
|
||||
}
|
||||
});
|
||||
});
|
||||
{/literal}
|
||||
{/footer_script}
|
||||
{combine_script id='intro_tooltips' load='footer' path='admin/themes/default/js/intro_tooltips.js'}
|
||||
|
||||
{html_style}
|
||||
.eiw .messages ul li {
|
||||
|
|
@ -273,13 +160,14 @@ $(window).on('resize', function(){
|
|||
{foreach from=$ACTIVITY_CHART_DATA item=WEEK_ACTIVITY key=WEEK_NUMBER}
|
||||
<div id="week-{$WEEK_NUMBER}-legend" class="row-legend"><div>{'Week %d'|@translate:$ACTIVITY_WEEK_NUMBER[$WEEK_NUMBER]}</div></div>
|
||||
{foreach from=$WEEK_ACTIVITY item=SIZE key=DAY_NUMBER}
|
||||
<span>
|
||||
<span class="activity_tooltips">
|
||||
{if $SIZE != 0}
|
||||
{assign var='SIZE_IN_UNIT' value=$SIZE/$ACTIVITY_CHART_NUMBER_SIZES * 5 + 1}
|
||||
{assign var='OPACITY_IN_UNIT' value=$SIZE/$ACTIVITY_CHART_NUMBER_SIZES * 0.6 + 0.2}
|
||||
<div id="day{$WEEK_NUMBER}-{$DAY_NUMBER}" style="height:{$SIZE_IN_UNIT}vw;width:{$SIZE_IN_UNIT}vw;"></div>
|
||||
{if $ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"] != 0}
|
||||
<p class="tooltip" style="transform: translate(-50%,{$SIZE_IN_UNIT/2}vw);">
|
||||
<span class="tooltip-arrow"></span>
|
||||
<span class="tooltip-header">
|
||||
<span class="tooltip-title">{if $ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"] > 1}{'%d Activities'|translate:$ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"]}{else}{'%d Activity'|translate:$ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"]}{/if}</span>
|
||||
<span class="tooltip-date">{$ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["date"]}</span>
|
||||
|
|
|
|||
|
|
@ -1530,17 +1530,6 @@ a.stat-box:hover {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.intro-charts .tooltip::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 51%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent white transparent;
|
||||
}
|
||||
|
||||
.activity-chart span div:hover{
|
||||
padding: 0.5vw;
|
||||
}
|
||||
|
|
@ -1588,7 +1577,8 @@ a.stat-box:hover {
|
|||
content: none;
|
||||
}
|
||||
|
||||
.storage-tooltips .tooltip-arrow {
|
||||
.storage-tooltips .tooltip-arrow,
|
||||
.activity-chart .tooltip-arrow {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
|
|
|
|||
|
|
@ -262,15 +262,12 @@ a.stat-box:hover {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.intro-charts .tooltip::after {
|
||||
border-color: transparent transparent #333333 transparent;
|
||||
}
|
||||
|
||||
.storage-tooltips .separated {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
.storage-tooltips .tooltip-arrow {
|
||||
.storage-tooltips .tooltip-arrow,
|
||||
.activity-chart .tooltip-arrow {
|
||||
border-color: transparent transparent #333333 transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue