View file posts/templates/posts/view-post.html

File size: 22.01Kb
<div class="post-data-container" data-post-id="<?php echo($context['post_data']['post_id']) ?>">
	<div class="post-data-inner">
		<div class="header">
			<div class="avatar">
				<img src="<?php echo(media($context['post_data']['avatar'])) ?>" alt="Avatar" class="img-circle img-res">
			</div>
			<div class="uname">
				<h6><a href="<?php echo(un2url($context['post_data']['username'])) ?>"><?php echo($context['post_data']['username']) ?></a>
					<?php if ($context['post_data']['is_verified'] > 0) { ?>
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="verified-color feather"><path fill="currentColor" d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z"></path></svg>
					<?php } ?>
				</h6>
				<time class="time-ago" title="<?php echo(ToDate($context['post_data']['time'])) ?>"><?php echo(time2str($context['post_data']['time'])) ?></time>
			</div>
			<?php if ($context['is_owner'] == false) { 
			if ($context['is_following']) { ?>
				<button class="btn btn-mat btn-follow btn-following" onclick="follow(<?php echo($context['post_data']['user_id']) ?>,this);"><span>{{LANG following}}</span></button>
			<?php  } else{ ?>
				<button class="btn btn-mat btn-follow" onclick="follow(<?php echo($context['post_data']['user_id']) ?>,this);"><span>{{LANG follow}}</span></button>
			<?php } } ?>
		</div>
		<div class="post-media-renderer">
			<?php if ($context['post_data']['type'] == 'image') { ?>
				<div id="post-data-cr" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
					<div class="carousel-inner">
						<?php foreach ($context['post_data']['media_set'] as $k => $medai_file) { ?>
							<div class="item <?php if($k == 0){ ?> active<?php } ?>">
								<img src="<?php echo(media($medai_file['file'])) ?>" alt="Gif image" class="img-res">
							</div>
						<?php } ?>
					</div>
					<?php if (count($context['post_data']['media_set']) > 1) { ?>
						<a class="valign carousel-control-prev cr-controls" href="#post-data-cr" role="button" data-slide="prev">
							<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M16.62 2.99c-.49-.49-1.28-.49-1.77 0L6.54 11.3c-.39.39-.39 1.02 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76z"/></svg>
						</a>
						<a class="valign carousel-control-next cr-controls" href="#post-data-cr" role="button" data-slide="next">
							<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M24 24H0V0h24v24z"></path><path fill="currentColor" d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31c.39-.39.39-1.02 0-1.41L9.15 2.98c-.49-.49-1.28-.49-1.77 0s-.49 1.28 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76z"></path></svg>
						</a>
					<?php } ?>
				</div>
			<?php } elseif ($context['post_data']['type'] == 'gif') { ?>
				<div class="gif">
					<?php foreach ($context['post_data']['media_set'] as $key => $medai_file) { ?>
						<img src="<?php echo(media($medai_file['file'])) ?>" alt="Gif image" class="img-res">
					<?php } ?>
				</div>
			<?php } elseif ($context['post_data']['type'] == 'video' || $context['post_data']['type'] == 'reels') { ?>
				<div class="video">
					<?php foreach ($context['post_data']['media_set'] as $key => $media_file) { ?>
						<video class="afterglow" id="postvideo-<?php echo($context['post_data']['post_id']) ?>"  width="1280" height="720" data-autoresize="fit"  onplay="px_add_view(<?php echo($context['post_data']['post_id']) ?>)">
							<source src="<?php echo(media($media_file['file'])) ?>" type="video/mp4">
							<source src="<?php echo(media($media_file['file'])) ?>" type="video/mov">
							<source src="<?php echo(media($media_file['file'])) ?>" type="video/webm">
							<source src="<?php echo(media($media_file['file'])) ?>" type="video/3gp">
							<source src="<?php echo(media($media_file['file'])) ?>" type="video/ogg">
						</video>
					<?php } if ($context['post_data']['is_should_hide']) { ?>
						<div class="valign is_should_hide1 text_m_reprted-<?php echo($context['post_data']['post_id']) ?>">
							<p class="is_should_hide3">{{LANG post_m_report}}</p>
							<div class="is_should_hide4">
								<a class="btn btn-mat is_should_hide5" href="javascript:void(0);" onclick="show_m_reprted(<?php echo($context['post_data']['post_id']) ?>)">See now</a>
							</div>
						</div>
					<?php } ?>
				</div>
				<script>
					jQuery(document).ready(function($) {
						afterglow.init();
					});
				</script>
			<?php } elseif ($context['post_data']['type'] == 'youtube') { ?>
				<div class="post-embed-frame fluid">
					<iframe style="width: 100%; min-height: 340px;" src="https://www.youtube.com/embed/<?php echo($context['post_data']['youtube']) ?>" frameborder="0"></iframe>
				</div>
			<?php } elseif ($context['post_data']['type'] == 'dailymotion') { ?>
				<div class="post-embed-frame fluid">
					<iframe style="width: 100%; min-height: 335px;" src="//www.dailymotion.com/embed/video/<?php echo($context['post_data']['dailymotion']) ?>" frameborder="0"></iframe>
				</div>
			<?php } elseif ($context['post_data']['type'] == 'vimeo') { ?>
				<div class="post-embed-frame fluid">
					<iframe style="width: 100%; min-height: 335px;" src="https://player.vimeo.com/video/<?php echo($context['post_data']['vimeo']) ?>" frameborder="0"></iframe>
				</div>
			<?php } elseif ($context['post_data']['type'] == 'playtube') { ?>
				<div class="post-embed-frame fluid">
					<iframe style="width: 100%; min-height: 335px;" src="{{CONFIG playtube_url}}/embed/<?php echo($context['post_data']['playtube']) ?>" frameborder="0"></iframe>
				</div>
			<?php } elseif ($context['post_data']['type'] == 'mp4') { ?>
				<video class="afterglow" id="postvideo-<?php echo($context['post_data']['post_id']) ?>"  width="1280" height="720" data-autoresize="fit">
					<source src="<?php echo($context['post_data']['link']) ?>" type="video/mp4">
				</video>
				<script>
					jQuery(document).ready(function($) {
						afterglow.init();
					});
				</script>
			<?php } elseif ($context['post_data']['type'] == 'fetched') { ?>
				<div id="post-data-cr" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
					<div class="carousel-inner">
						<?php foreach ($context['post_data']['media_set'] as $k => $medai_file) { ?>
							<div class="item <?php if($k == 0){ ?> active<?php } ?>">
								<img src="<?php echo(media($medai_file['file'])) ?>" alt="Gif image" class="img-res">
							</div>
						<?php } ?>
					</div>
					<?php if (count($context['post_data']['media_set']) > 1) { ?>
						<a class="valign carousel-control-prev cr-controls" href="#post-data-cr" role="button" data-slide="prev">
							<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M16.62 2.99c-.49-.49-1.28-.49-1.77 0L6.54 11.3c-.39.39-.39 1.02 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76z"/></svg>
						</a>
						<a class="valign carousel-control-next cr-controls" href="#post-data-cr" role="button" data-slide="next">
							<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M24 24H0V0h24v24z"></path><path fill="currentColor" d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31c.39-.39.39-1.02 0-1.41L9.15 2.98c-.49-.49-1.28-.49-1.77 0s-.49 1.28 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76z"></path></svg>
						</a>
					<?php } ?>
				</div>
			<?php } ?>
		</div>
		<div class="sidebar">
			<div class="sidebar__inner">
				<div class="pp_pst_caption">
					<?php if ($context['post_data']['type'] == 'fetched' && $context['post_data']['link']) { ?>
						<a href="<?php echo($context['post_data']['link']) ?>" target="_blank" >{{LANG click_to_visit}}</a>
						<br>
					<?php } ?>
					<p data-caption>
						<?php if ($context['post_data']['description']) {
							echo $context['post_data']['description'];
						} ?>
					</p>
				</div>
				<div class="comments">
					<ul class="post-comments-list">
						<span class="main_post_comm"><?php echo $context['post_data']['votes']; ?> {{LANG comments}}</span>
						<?php foreach ($context['post_data']['comments'] as $key => $comment) { ?>
							<li data-post-comment="<?php echo($comment['id']) ?>">
								<div class="user-avatar">
									<img src="<?php echo(media($comment['avatar'])) ?>" class="img-circle" />
								</div>
								<div class="pp_com_body">
									<span>
										<strong><a href="<?php echo(un2url($comment['username'])) ?>" data-ajax="ajax_loading.php?app=profile&apph=profile&uname=<?php echo($comment['username']) ?>"><?php echo($comment['username']) ?></a></strong> <?php echo($comment['text']) ?>
										<div onclick="pxp_like_dis_comment(<?php echo($comment['id']) ?>,this)" class="like_comment comment_like_<?php echo($comment['id']) ?>">
											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="<?php echo($comment['is_liked'] ? 'liked_color' : '') ?>"><path fill="currentColor" d="M12 22l-9.192-9.192c-2.18-2.568-2.066-6.42.353-8.84A6.5 6.5 0 0 1 12 3.64a6.5 6.5 0 0 1 9.179 9.154L12 22zm7.662-10.509a4.5 4.5 0 0 0-6.355-6.337L12 6.282l-1.307-1.128a4.5 4.5 0 0 0-6.355 6.337l.114.132L12 19.172l7.548-7.549.114-.132z"/><path fill="currentColor" class="lk_act_svg" d="M21.179 12.794l.013.014L12 22l-9.192-9.192.013-.014A6.5 6.5 0 0 1 12 3.64a6.5 6.5 0 0 1 9.179 9.154z"/></svg>
										</div>
									</span>
								</div>
								<div class="events_container">
									<span class="evnt_cont_btns comment_like_span_<?php echo($comment['id']) ?>"><span><?php echo($comment['likes']) ?></span> {{LANG likes}}</span>
									<span class="middot">·</span>
									<span onclick="pxp_get_comment_reply(<?php echo($comment['id']) ?>,this)" id="comment_reply_<?php echo($comment['id']) ?>" class="evnt_cont_btns pointer"><span><?php echo($comment['replies']) ?></span> {{LANG reply}}</span>
									<div class="reply_list"></div>
									<form class="form add-comment" style="display: none;" id="add_reply_form_<?php echo $comment['id']; ?>">
										<div class="fluid">
											<div class="form-group">
												<input type="text" class="form-control comment" onkeydown="pxp_reply_comment(<?php echo $comment['id']; ?>,event);" placeholder="{{LANG write_comment}}" id="emojionearea_comment<?php echo $comment['id']; ?>">
											</div>
										</div>
										<div class="reply_commenting_overlay hidden">
											<div id="pp_loader"><div class="speeding_wheel"></div></div>
										</div>
									</form>
								</div>
								<?php if ($comment['is_owner']) { ?>
									<span class="pull-right delcomment" title="{{LANG delete_comment}}" onclick="delete_commnet(<?php echo($comment['id']) ?>);">
										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z"></path></svg>
									</span>
								<?php } ?>
							</li>
							<script type="text/javascript">add_comment_emoji(<?php echo($comment['id']) ?>);</script>
						<?php } ?>
					</ul>
				</div>
				<div class="comment-box">
					<div class="valign votes">
						<div class="valign">
							<span class="like-post <?php if ($context['post_data']['is_liked']) { ?>active<?php } ?>" onclick="like_post('<?php echo($context['post_data']['post_id']) ?>',this);">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path></svg>
							</span>
							<div onclick="view_post_likes('<?php echo($context['post_data']['post_id']) ?>');" title="{{LANG likes}}">
								<span data-post-likes="<?php echo($context['post_data']['post_id']) ?>"><?php echo $context['post_data']['likes']; ?></span>
							</div>
						</div>
						<?php if ($context['post_data']['type'] == 'video' || $context['post_data']['type'] == 'reels') { ?>
							<div class="valign">
								<span>
									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M1.181 12C2.121 6.88 6.608 3 12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9zM12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-2a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></svg>
								</span>
								<div class="video_views_ ml_" title="{{LANG views}}">
									<span><?php echo $context['post_data']['views']; ?></span>
								</div>
							</div>
						<?php } ?>
						<div class="dropup">
							<span class="dropdown-toggle" data-toggle="dropdown">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"></path></svg>
							</span>
							<ul class="dropdown-menu pull-right">
								<?php if ($context['post_data']['is_owner'] == true) { ?>
									<li onclick="delete_post('<?php echo($context['post_data']['post_id']) ?>',true);"><a href="javascript:void(0);">{{LANG delete_post}}</a></li>
									<li id="edit-post"><a href="javascript:void(0);">{{LANG edit_post}}</a></li>
									<?php if ($context['post_data']['user_data']['is_pro']) { ?>
								    	<?php if ($context['post_data']['boosted'] == 0) { ?>
								    		<li onclick="pxp_boost_post(<?php echo $context['post_data']['post_id']; ?>);"><a href="javascript:void(0);" id="boost_<?php echo $post_data['post_id']; ?>">{{LANG boost_post}}</a></li>
								    	<?php }else{ ?>
								    		<li onclick="pxp_boost_post(<?php echo $context['post_data']['post_id']; ?>);"><a href="javascript:void(0);" id="boost_<?php echo $post_data['post_id']; ?>">{{LANG unboost_post}}</a></li>
								    <?php }} ?>
								<?php } ?>
								<?php if ($context['post_data']['is_owner'] == false) { ?>
									<li onclick="report_post('<?php echo($context['post_data']['post_id']) ?>',this);">
										<a href="javascript:void(0);">
										    <?php if ($context['post_data']['reported']) {
										    	echo lang('cancel_report');
										    }else{
										    	echo lang('report_post');
										    } ?>
									    </a>
									</li>
								<?php } ?>
								<li id="save-post" data-id="<?php echo($context['post_data']['post_id']) ?>">
									<a href="javascript:void(0);">
									  	<?php if ($context['post_data']['is_saved']) {
										    echo lang('unsave_post');
										}else{
										    echo lang('save_post');
										} ?>
									</a>
								</li>
								<li onclick="embed_post('<?php echo($context['post_data']['post_id']) ?>',this);"><a href="javascript:void(0);">{{LANG embed}}</a></li>
							</ul>
						</div>
					</div>
					<form class="form" action="javascript:void(0);">
						<input type="hidden" name="hash" value="<?php echo($context['csrf_token']) ?>">
						<div class="text-input">	
							<?php if (IS_LOGGED) { ?>
								<div class="post_input_">
									<input type="text" class="form-control comment" id="post_c" placeholder="{{LANG write_comment}}" data-post-id="<?php echo($context['post_data']['post_id']) ?>">
								</div>
								<div class="commenting-overlay hidden">
									<div id="pp_loader"><div class="speeding_wheel"></div></div>
								</div>
							<?php } else{ ?>
								<div class="login2comment"><a href="<?php echo(pxp_link('welcome')) ?>">{{LANG login}}</a> {{LANG login_to_lc_post}}</div>
							<?php } ?>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="footer__container">
		<?php include $context['dirname_theme'].'/main/templates/includes/lazy-load.html'; ?>
	</div>
	<?php if ($context['follow']) { ?>
		<div class="follow-suggestions-cr">
			<div class="valign pg_widget_title">
				<h5>{{LANG follow_suggestions}}</h5>
				<a href="<?php echo(pxp_link('explore/people')) ?>" data-ajax="ajax_loading.php?app=explore&apph=people">{{LANG see_all}}</a>
			</div>
			<div class="pg_folw_sugg_carousel tl-follow-suggestions" id="follow-suggestions-cr">
				<?php foreach ($context['follow'] as $key => $follow_sugg) { ?>
					<div class="item">
						<div class="avatar">
							<img src="<?php echo($follow_sugg['avatar']) ?>" alt="Picture">
							<div class="valign uname">
								<a href="<?php echo($follow_sugg['url']) ?>" data-ajax="ajax_loading.php?app=profile&apph=profile&uname=<?php echo($follow_sugg['username']) ?>"><h4><?php echo($follow_sugg['username']) ?></h4></a>
							</div>
						</div>
						<div class="button">
							<button class="btn btn-mat" onclick="follow(<?php echo($follow_sugg['user_id']) ?>,this);"><span>{{LANG follow}}</span></button>
						</div>
					</div>
				<?php } ?>
			</div>
		</div>
	<?php } ?>
</div>
<?php 
	include $context['dirname_theme'].'/main/templates/modals/delete-post.html';
	include $context['dirname_theme'].'/main/templates/modals/delete-comment.html';
	include $context['dirname_theme'].'/main/templates/modals/embed_post.html';
	include $context['dirname_theme'].'/main/templates/modals/edit-post.html';
 ?>

<script>
	jQuery(document).ready(function($) {
			var pd_cont = $(".post-data-container");

			function insert_p_comment() {
				$(".post-data-container").find('.commenting-overlay').removeClass('hidden');
				var zis  = $("#post_c");
				var text = zis.val();
				var list = $(".post-data-container").find('.post-comments-list');
				var id   = $("#post_c").data('post-id');

				if (!text) { return false; }

				$.post(link('posts/add-comment'), {post_id:id,text:text}, function(data, textStatus, xhr) {
					if (data.status == 200) {
						$(data.html).insertAfter(list.find('span.main_post_comm'));
					}

					zis.val('');
					$(".post-data-container").find('.commenting-overlay').addClass('hidden');
				});
			}

			var ell = $("#post_c").emojioneArea({
				pickerPosition: "top",
			    tonesStyle: "radio",
			    events: {
			     	keyup: function (editor, event) {
				      $("#post_c").val(ell[0].emojioneArea.getText());
		              if (event.keyCode == 13 && event.shiftKey == 0) {
		              	insert_p_comment();
						$('.emojionearea .emojionearea-editor').html('');
		              }
				    }
			    },
			    filters: {
			        flags : false,
			        objects : false,
			        travel_places : false,
			        activity : false
			    }
			});
			$('.emojionearea').css('border', '0');
			

			pd_cont.find('input[type="text"]').keydown(function(event) {
				if (event.keyCode == 13 && event.shiftKey == 0) {

					event.preventDefault();
					event.stopPropagation();
					pd_cont.find('.commenting-overlay').removeClass('hidden');
					var zis  = $(this);
					var text = zis.val();
					var list = pd_cont.find('.post-comments-list');
					var id   = $(this).data('post-id');

					if (!text) { return false; }

					$.post(link('posts/add-comment'), {post_id:id,text:text}, function(data, textStatus, xhr) {
						if (data.status == 200) {
							$(data.html).insertAfter(list.find('span.main_post_comm'));
						}

						zis.val('');
						pd_cont.find('.commenting-overlay').addClass('hidden');
					});
				}
			});

			pd_cont.find('#save-post').click(function(event) {
				if (not(is_logged())) {
					redirect('welcome');
					return false;
				}
				var post_id = $(this).data('id');
				var zis     = $(this);

				if (!post_id) {
					return false;
				}

				$.ajax({
					url: link('posts/save'),
					type: 'POST',
					dataType: 'json',
					data: {id:post_id},
				})
				.done(function(data) {
					if (data.status == 200 && data.code == 0) {
						zis.find('a').text("{{LANG save_post}}");
					}

					else if(data.status == 200 && data.code == 1){
						zis.find('a').text("{{LANG unsave_post}}");
					}

					$.toast(data.message,{
	                	duration: 5000, 
	                	type: '',
	                	align: 'top-right',
	                	singleton: false
	                });
				});
			});

			pd_cont.find('#edit-post').click(function(event) {
				if (not(is_logged())) {
					redirect('welcome');
					return false;
				}

				$("#edit-post-modal").fadeIn(200, function() {
					var text = pd_cont.find('[data-caption]').text();
					$(this).find('#caption').val($.trim(text));
				});
			});

			$("#edit-post-modal").find('button[type="button"]').click(function(event) {
				$("#edit-post-modal").fadeOut(200, function() {
					$(this).find('#caption').val('');
				});
			});

			$("#edit-post-modal").find('form').submit(function(event) {
				event.preventDefault();
				var text    = $(this).find('#caption').val();
				var post_id = $(this).find('#post_id').val();
				
				if (int(post_id) == 0) {
					return false;
				}

				pd_cont.find('[data-caption]').html(linkify_htags(text));

				$("#edit-post-modal").fadeOut(200, function() {
					$(this).find('#caption').val('');
				});

				$.ajax({
					url: link('posts/update'),
					type: 'POST',
					dataType: 'json',
					data: {text:text,id:post_id},
				})
				.done(function(data) {
					if (data.message) {
						$.toast(data.message,{
			            	duration: 5000, 
			            	type: '',
			            	align: 'top-right',
			            	singleton: false
			            });
					}
				});
			});
	});
</script>