diff options
| -rw-r--r-- | Zotlabs/Widget/Cover_photo.php | 6 | ||||
| -rw-r--r-- | view/css/widgets.css | 1 | ||||
| -rwxr-xr-x | view/tpl/cover_photo_widget.tpl | 30 |
3 files changed, 29 insertions, 8 deletions
diff --git a/Zotlabs/Widget/Cover_photo.php b/Zotlabs/Widget/Cover_photo.php index af1ae5c7f..965566523 100644 --- a/Zotlabs/Widget/Cover_photo.php +++ b/Zotlabs/Widget/Cover_photo.php @@ -21,9 +21,9 @@ class Cover_photo { return ''; // only show cover photos once per login session - + $hide_cover = false; if(array_key_exists('channels_visited',$_SESSION) && is_array($_SESSION['channels_visited']) && in_array($channel_id,$_SESSION['channels_visited'])) { - return EMPTY_STR; + $hide_cover = true; } if(! array_key_exists('channels_visited',$_SESSION)) { $_SESSION['channels_visited'] = []; @@ -53,6 +53,7 @@ class Cover_photo { $subtitle = str_replace('@','@',$channel['xchan_addr']); $c = get_cover_photo($channel_id,'html'); + $c = str_replace('src=', 'data-src=', $c); if($c) { $photo_html = (($style) ? str_replace('alt=',' style="' . $style . '" alt=',$c) : $c); @@ -62,6 +63,7 @@ class Cover_photo { '$title' => $title, '$subtitle' => $subtitle, '$hovertitle' => t('Click to show more'), + '$hide_cover' => $hide_cover )); } return $o; diff --git a/view/css/widgets.css b/view/css/widgets.css index e330c38e1..995647d1c 100644 --- a/view/css/widgets.css +++ b/view/css/widgets.css @@ -142,7 +142,6 @@ li:hover .group-edit-icon { position: relative; width: 100%; height: auto; - cursor: pointer; } #cover-photo-caption { diff --git a/view/tpl/cover_photo_widget.tpl b/view/tpl/cover_photo_widget.tpl index 3aaad5ae5..ed708ffb5 100755 --- a/view/tpl/cover_photo_widget.tpl +++ b/view/tpl/cover_photo_widget.tpl @@ -2,16 +2,27 @@ var aside_padding_top; var section_padding_top; var coverSlid = false; + var hide_cover = Boolean({{$hide_cover}}); $(document).ready(function() { + if(! $('#cover-photo').length) + return; aside_padding_top = parseInt($('aside').css('padding-top')); section_padding_top = parseInt($('section').css('padding-top')); $(document).on('click mouseup keyup', slideUpCover); - if($('#cover-photo').length && $(window).width() > 755) { + if($(window).width() > 755) { + datasrc2src('#cover-photo > img'); + + if(hide_cover) { + hideCover(); + coverSlid = true; + } + if($(window).scrollTop() < $('#cover-photo').height()) { + $('body').css('cursor', 'n-resize'); $('.navbar').removeClass('fixed-top'); $('main').css('margin-top', - $('nav').outerHeight(true) + 'px'); $('main').css('opacity', 0); @@ -24,32 +35,34 @@ }); $(window).scroll(function () { - if($('#cover-photo').length && $(window).width() > 755 && $(window).scrollTop() >= $('#cover-photo').height()) { + if($(window).width() > 755 && $(window).scrollTop() >= $('#cover-photo').height()) { + $('body').css('cursor', ''); $('.navbar').addClass('fixed-top'); $('main').css('margin-top', ''); $('main').css('opacity', 1); coverSlid = true; } - else if ($('#cover-photo').length && $(window).width() > 755 && $(window).scrollTop() < $('#cover-photo').height()){ + else if ($(window).width() > 755 && $(window).scrollTop() < $('#cover-photo').height()){ if(coverSlid) { $(window).scrollTop(Math.ceil($('#cover-photo').height())); setTimeout(function(){ coverSlid = false; }, 1000); } else { if($(window).scrollTop() < $('#cover-photo').height()) { + $('body').css('cursor', 'n-resize'); $('.navbar').removeClass('fixed-top'); $('main').css('margin-top', - $('nav').outerHeight(true) + 'px'); $('main').css('opacity', 0); } } } - if($('#cover-photo').length && $('main').css('opacity') < 1) { + if($('main').css('opacity') < 1) { $('main').css('opacity', ($(window).scrollTop()/$('#cover-photo').height()).toFixed(1)); } }); $(window).resize(function () { - if($('#cover-photo').length && $(window).width() < 755) { + if($(window).width() < 755) { $('#cover-photo').remove(); $('.navbar').addClass('fixed-top'); $('main').css('opacity', 1); @@ -65,6 +78,13 @@ $('html, body').animate({scrollTop: Math.ceil($('#cover-photo').height()) + 'px' }, 'fast'); return; } + + function hideCover() { + if(coverSlid) { + return; + } + window.scrollTo(0, Math.ceil($('#cover-photo').height())); + } </script> <div id="cover-photo" title="{{$hovertitle}}"> |