This commit is contained in:
redmatrix 2016-03-03 14:49:34 -08:00
commit dd4a66353a
5 changed files with 113 additions and 37 deletions

View file

@ -982,14 +982,18 @@ function widget_cover_photo($arr) {
require_once('include/identity.php');
$o = '';
$a = get_app();
$channel_id = 0;
if(array_key_exists('channel_id', $arr) && intval($arr['channel_id']))
$channel_id = intval($arr['channel_id']);
if(! $channel_id)
$channel_id = get_app()->profile_uid;
$channel_id = $a->profile_uid;
if(! $channel_id)
return '';
$channel = channelx_by_n($channel_id);
if(array_key_exists('style', $arr) && isset($arr['style']))
$style = $arr['style'];
else
@ -1000,10 +1004,26 @@ function widget_cover_photo($arr) {
if(strpbrk($style,'(\'"<>') !== false)
$style = '';
if(array_key_exists('title', $arr) && isset($arr['title']))
$title = $arr['title'];
else
$title = $channel['channel_name'];
if(array_key_exists('subtitle', $arr) && isset($arr['subtitle']))
$subtitle = $arr['subtitle'];
else
$subtitle = $channel['xchan_addr'];
$c = get_cover_photo($channel_id,'html');
if($c) {
$o = '<div id="cover-photo">' . (($style) ? str_replace('alt=',' style="' . $style . '" alt=',$c) : $c) . '</div>';
$photo_html = (($style) ? str_replace('alt=',' style="' . $style . '" alt=',$c) : $c);
$o = replace_macros(get_markup_template('cover_photo_widget.tpl'),array(
'$photo_html' => $photo_html,
'$title' => $title,
'$subtitle' => $subtitle,
));
}
return $o;
}

View file

@ -122,3 +122,30 @@ li:hover .group-edit-icon {
#event-upload-choose {
width: 100%;
}
/* cover photo */
#cover-photo {
position: relative;
width: 100%;
height: auto;
}
#cover-photo-caption {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
padding: 15px;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px 3px rgba(0,0,0,.7);
}
.cover-photo-title {
font-size: 30px;
}
.cover-photo-subtitle {
font-size: 20px;
}

View file

@ -3,16 +3,6 @@
*/
$(document).ready(function() {
//Simple cover-photo implementation
if($('#cover-photo').length && $(window).width() > 767) {
$('.navbar-fixed-top').css('position', 'relative');
$('aside, section').css('padding-top', 0 + 'px');
$('main').css('opacity', 0);
}
else {
$('#cover-photo').remove();
}
// CSS3 calc() fallback (for unsupported browsers)
$('body').append('<div id="css3-calc" style="width: 10px; width: calc(10px + 10px); display: none;"></div>');
if( $('#css3-calc').width() == 10) {
@ -62,17 +52,3 @@ $(document).ready(function() {
}
setInterval(function () {checkNotify();}, 10 * 1000);
});
//Simple cover-photo implementation
$(window).scroll(function () {
if($('#cover-photo').length && $(window).width() > 767 && $(window).scrollTop() >= $('#cover-photo').height()) {
$('aside, section').css('padding-top', 71 + 'px');
$(window).scrollTop($(window).scrollTop() - $('#cover-photo').height())
$('.navbar-fixed-top').css('position', 'fixed');
$('#cover-photo').remove();
}
if($('#cover-photo').length) {
$('main').css('opacity', ($(window).scrollTop()/$('#cover-photo').height()).toFixed(1));
}
});

53
view/tpl/cover_photo_widget.tpl Executable file
View file

@ -0,0 +1,53 @@
<script>
$(document).ready(function() {
if($('#cover-photo').length && $(window).width() > 755) {
$('.navbar-fixed-top').css('position', 'relative');
$('aside, section').css('padding-top', 0 + 'px');
$('main').css('opacity', 0);
$('header').hide();
}
else {
$('#cover-photo').remove();
}
});
$(window).scroll(function () {
if($('#cover-photo').length && $(window).width() > 755 && $(window).scrollTop() >= $('#cover-photo').height()) {
$('header').fadeIn();
$('main').css('opacity', 1);
$('aside, section').css('padding-top', 71 + 'px');
$(window).scrollTop($(window).scrollTop() - $('#cover-photo').height())
$('.navbar-fixed-top').css('position', 'fixed');
$('#cover-photo').remove();
}
if($('#cover-photo').length) {
$('main').css('opacity', ($(window).scrollTop()/$('#cover-photo').height()).toFixed(1));
}
});
$(window).resize(function () {
if($('#cover-photo').length && $(window).width() < 755) {
$('main').css('opacity', 1);
$('aside, section').css('padding-top', 71 + 'px');
$('.navbar-fixed-top').css('position', 'fixed');
$('#cover-photo').remove();
}
});
function slideUpCover() {
$('html, body').animate({scrollTop: $('#cover-photo').height() + 'px'});
}
</script>
<div id="cover-photo" onclick="slideUpCover();">
{{$photo_html}}
<div id="cover-photo-caption">
<div class="cover-photo-title">
{{$title}}
</div>
<div class="cover-photo-subtitle">
{{$subtitle}}
</div>
</div>
</div>

View file

@ -1,12 +1,12 @@
{{$mimeselect}}
{{$layoutselect}}
{{if $id_select}}
<div class="channel-id-select-div">
<span class="channel-id-select-desc">{{$id_seltext}}</span> {{$id_select}}
</div>
{{/if}}
<div id="profile-jot-wrapper">
<form id="profile-jot-form" action="{{$action}}" method="post">
<form id="profile-jot-form" action="{{$action}}" method="post">
{{$mimeselect}}
{{$layoutselect}}
{{if $id_select}}
<div class="channel-id-select-div">
<span class="channel-id-select-desc">{{$id_seltext}}</span> {{$id_select}}
</div>
{{/if}}
<div id="profile-jot-wrapper">
{{if $parent}}
<input type="hidden" name="parent" value="{{$parent}}" />
{{/if}}
@ -160,8 +160,8 @@
</div>
<div id="profile-jot-text-loading"></div>
<div id="profile-jot-end" class="clear"></div>
</form>
</div>
</div>
</form>
<div id="jot-preview-content" style="display:none;"></div>