`;
}
const strMarginTop = ! post.author.name ? "margin-top:.75em;" : "";
let height = post.height;
let strNote = "";
let htmlBanner = "";
// should we prepend a banner image?
if ( post.banner !== undefined && post.banner.src )
{
// have we previously tested that the badge exists?
if ( g_mapBannerHeights[post.banner.src] === undefined ) // no, we've never tried loading this image
{
//console_log( `validating banner.img.src = ${post.banner.src}` );
g_mapBannerHeights[post.banner.src] = "pending"; // prevent the test from happening multiple times
const img = new Image();
img.onload = function() {
const MAX_BANNER = { width: 600, height: 120 };
const fScaleWidth = this.width > MAX_BANNER.width ? MAX_BANNER.width / this.width : 1; // traditional banner... squeeze into 600px wide
const fScaleHeight = fScaleWidth == 1 && this.height > MAX_BANNER.height ? MAX_BANNER.height / this.height : 1; // if we're not constrained by width, then assume we just have a photo/crest and constrain by height
let strMaxDimension = "";
if ( fScaleWidth == 1 && fScaleHeight == 1 )
g_mapBannerHeights[post.banner.src] = post.height == -1 ? `${this.height}px` : height; // either auto-size, or just keep using the user-specified height
else if ( fScaleWidth == 1 )
{
const nMaxHeight = post.banner.position != 0 && outing ? 80 : MAX_BANNER.height;
strMaxDimension = `max-height: ${nMaxHeight}px`;
g_mapBannerHeights[post.banner.src] = post.height == -1 ? `${Math.min( nMaxHeight, fScaleHeight * this.height)}px` : height; // either auto-size, or just keep using the user-specified height
}
else
{
strMaxDimension = `max-width: ${MAX_BANNER.width}px`;
g_mapBannerHeights[post.banner.src] = post.height == -1 ? `${fScaleWidth * this.height}px` : height; // either auto-size, or just keep using the user-specified height
}
g_mapBannerMaxDimensions[post.banner.src] = strMaxDimension;
// for a new post, can we dynamically pick "above the text" or "left" as a banner position, based on its ratio?
if ( post.isnew && ! post.banner.position )
{
const ePosition = (1.0 * this.width) / this.height > 16.0 / 9.0 ? 0 : 1;
$( "#post-banner-position-selector" ).val( ePosition ); // greater than 16:9 aspect ration
doSelectBannerPosition( false ); // update the selector to reflect this auto-selected position
}
else
$( "#post-banner-position-selector" ).val( post.banner.position ); // just reuse our current selection
if ( isPreview )
updatePostPreview( true );
if ( isHello )
{
if ( g_timerRebuildHelloPosts ) // if there are multiple banner images, then keep resetting the timer until the last one is loaded
window.clearTimeout( g_timerRebuildHelloPosts );
g_timerRebuildHelloPosts = window.setTimeout( function() {
g_timerRebuildHelloPosts = null;
showNewsTab();
}, 1000 );
}
}
img.onerror = function() {
g_mapBannerHeights[post.banner.src] = ""; // record that it couldn't be loaded, so we have no height
if ( isPreview )
updatePostPreview( true );
}
img.src = post.banner.src;
}
if ( g_mapBannerHeights[post.banner.src] !== undefined && ! g_mapBannerHeights[post.banner.src] )
; // don't bother adding the banner, because we know it doesn't exist
else
{
const strTooltip = post.banner.tooltip ? `title="${post.banner.tooltip}"` : "";
const jsOnClick_banner = post.banner.url ? `onclick="window.open('${post.banner.url}','_blank');"` : "";
const strAltText = post.banner.url ? `Go to ${post.banner.url}` : "";
const stylePosition = ! post.banner.position || post.banner.position == 0 ? "" : post.banner.position == 1 ? "float:left;margin-top:.25em;margin-right:1em;" : "float:right;margin-top:.25em;margin-left:.5em;";
htmlBanner = ``;
if ( height == -1 && g_mapBannerHeights[post.banner.src] !== undefined && g_mapBannerHeights[post.banner.src] != "pending" ) // do we have a previously-calculated or user-specified height?
height = g_mapBannerHeights[post.banner.src];
}
}
// for event posts, initialize with the name of the event and a quick who/when/where
if ( outing )
{
let htmlDetails = `
( )*<\/p>)+/, "" ), true ), editionEnum, -1, true );
// KLUDGE: Reinsert the class="button" that got stripped out of buttons
strNote = strNote.replace( /`;
}
// the image existence check is asynchronous, so we have to assume that we could get here before the first
// attempted check is finished, and therefore, we have to turn an auto-size height into a reasonable default
if ( height == -1 )
height = "75px";
if ( typeof height != "string" ) // just a number like "3"?
height = `${height}px`; // ... append units
const jsOnClick = ! bShowAll && post.height != 0 ? `onclick="seeMore( undefined, '${selector} div.white-page[data-postid=${post.postid}] > div.clipped');"` : "";
let bgColor_post = post.bgcolor !== undefined ? `background-color:${post.bgcolor};` : "";
let strClass = "";
if ( outing && isCancelled( outing ) )
{
strClass = "cancelled";
bgColor_post = "";
}
const bgColor_note = note.bgcolor !== undefined ? `background-color:${note.bgcolor};` : ""; // unused?
// If there is a float anywhere else in the post's rendering, it can screw up the calculation of height for the div.clipped container.
// So we add a
after our note, and that seems to resolve the issue, as per https://stackoverflow.com/a/16568504
strNote += ``;
$( selector ).append( `
${htmlAuthor}
${strNote}
${strButton}
` );
nMarginTop = "0";
appendNoteAttachments( selector + ` div.white-page[data-postid=${post.postid}]`, post, false ); // append after the .clipped and .see-more
const div = $( selector + ` div.white-page[data-postid=${post.postid}] div.attachments` );
div.find( "h1.listheader" ).remove();
div.css( "margin", "0 0 -5px" );
div.css( "padding", "5px 15px" );
div.css( "border-top", "solid 1px #ccc" );
div.css( "background-color", "#f4f4f8" );
// do we need to add a "see more" link? If a post.height is specified (i.e., not zero), then it means let the div autosize to show all content
if ( ! bShowAll && post.height != 0 )
{
const divClipped = $( selector + ` div.white-page[data-postid=${post.postid}] > div.clipped` );
let cssColor = post.seemorecolor ? post.seemorecolor : getTextForegroundColor( post.bgcolor );
if ( cssColor )
cssColor = `style="color:${cssColor};"`;
addSeeMoreLink( $( selector + ` div.white-page[data-postid=${post.postid}]` ), selector + ` div.white-page[data-postid=${post.postid}] > div.clipped`, 5, cssColor, divClipped, height, "margin-left:15px;" );
}
}
function newsFeedNoteComparable( noteA, noteB )
{
// scheduled posts could have been updated many days ago, and are finally only being displayed.
// On the other hand, a post could have been edited.
//
// So we take the largest of the scheduled timestamp and the updated timestamp
const nMaxA = Math.max( noteA.timestamp, noteA.timestampupdated );
const nMaxB = Math.max( noteB.timestamp, noteB.timestampupdated );
return nMaxB - nMaxA;
}
/**
* selector the div whose body will be populated with content, e.g., "#news-feed" or "#news-feed-archive div.content"
* bShowAll do we show hidden posts, too?
* listPosts the list of filtered posts
*/
/* exported updateNewsFeed */
function updateNewsFeed( selector, bShowAll, listPosts )
{
$( selector + " div.white-page[data-postid]" ).remove() // scrub all old posts
$( selector ).hide(); // hide the entire container
if ( ! g_isInitialized || ! g_isLoginInitialized )
return; // not ready, because we may not have all the information to decide if the Account Settings posts are valid
$( selector ).show(); // show the container, although we may re-hide it below, if it's a youth/parent login and there's nothing to show
const hasPerm = hasPermPost();
const now = getNow();
const myLoginRole = getMyRole();
const isAssoc = g_isAssociation;
const strMyScope = getMyScope();
let listNotes = [];
const listPinnedNotes = [];
let nPosts = 0;
for ( const post of listPosts )
{
let timeExpiry = post.timestampend;
let outingKey = post.outingkey;
// if it's an event post, always defer to the event's end date, because the event could have been rescheduled since the post was created
if ( outingKey )
{
// look up if a local event exists, in case 'show other schedules' isn't showing the source event
if ( typeof findLocalEvent != "undefined" )
outingKey = findLocalEvent( outingKey ); // this link could be to a subscription source event that we have already subscribed to
const outing = getOuting( outingKey );
if ( outing ) // if we can find the event, then we can use an accurate (perhaps rescheduled) end timestamp
timeExpiry = getEndOfDayTimestamp( outing.timestampend );
else if ( post.accountid == getAccountID() ) // if we can't find the event, and it's a post from our account, then we should skip this post
continue;
}
if ( timeExpiry > 0 && timeExpiry < now ) // is this an expired post? most of the time we want to skip them
{
// we only show an expired post if a) it's the archive, b) it's a non event-based posts, and c) we are actually able to edit it
if ( ! bShowAll ) // home page?
continue;
if ( post.outingkey ) // event-based?
continue;
if ( post.accountid != getAccountID() || ! hasPerm ) // can't edit them anyway?
continue;
}
// make sure that this post is actually targeted for us
const mapSpecialAudience = {};
if ( post.accountid != getAccountID() ) // don't skip my own posts
{
if ( post.targeteditions !== undefined && post.targeteditions && post.targeteditions.match( `<${EDITION}>` ) == null )
continue;
if ( post.targetcouncils !== undefined && post.targetcouncils && post.targetcouncils.match( `<${getAccountCouncilID()}>` ) == null )
continue;
if ( post.visibility == VISIBILITY.leaders.id && myLoginRole != "v" )
continue;
}
else if ( hasPerm ) // for my own posts, decide if we should report a special audience
{
if ( isAssoc )
{
let listCouncilIDs = null;
if ( strMyScope == SCOPE_NATIONAL )
{
if ( post.targetcouncils ) // I'm a national account, but my post is available to one or more councils?
{
listCouncilIDs = parseCouncilAudience( post.targetcouncils );
if ( listCouncilIDs.length == size( g_dbTables['Councils'] ) ) // the "specific councils" actually includes all of them
listCouncilIDs = null; // ... this is normal for national accounts
}
if ( listCouncilIDs )
mapSpecialAudience.councils = "in " + joinAnd( listCouncilIDs.map( function ( councilID ) { return `${getCouncilName( councilID )}`; } ) ) + " " + getVocab( listCouncilIDs.length == 1 ? "Council" : "Councils" );
else
mapSpecialAudience.councils = `in all ${getVocab( "Councils" )}`;
}
else if ( strMyScope == SCOPE_COUNCIL )
{
if ( post.targetcouncils ) // this post only visible to one or more specific councils?
{
listCouncilIDs = parseCouncilAudience( post.targetcouncils );
if ( listCouncilIDs.length == size( g_dbTables['Councils'] ) ) // the "specific councils" actually includes all of them
listCouncilIDs = null;
}
if ( listCouncilIDs )
mapSpecialAudience.councils = "in " + joinAnd( listCouncilIDs.map( function ( councilID ) { return `${getCouncilName( councilID )}`; } ) ) + " " + getVocab( listCouncilIDs.length == 1 ? "Council" : "Councils" );
else
mapSpecialAudience.councils = `in all ${getVocab( "Councils" )}`;
}
else
mapSpecialAudience.councils = `in our ${getVocab( strMyScope )}`; // Group accounts can't post outside of their domain
let listEditions = null;
if ( post.targeteditions ) // only visible to specific editions?
{
listEditions = parseEditionAudience( post.targeteditions );
if ( getOtherEditions( true ).length == listEditions.length ) // the "specific editions" actually includes all of them
listEditions = null; // don't bother reporting this
}
if ( listEditions ) // a specific set of editions?
{
let strCommitteeMembers = null;
const listScouterEditions = [];
for ( const strEdition of listEditions )
{
if ( isAssociation( strEdition ) )
strCommitteeMembers = getVocab( "Leaders" );
else
listScouterEditions.push( `${getEditionMoniker( strEdition )}` );
}
if ( post.visibility == VISIBILITY.everyone.id )
mapSpecialAudience.editions = `everyone in ${joinAnd(listScouterEditions)}`;
else
{
mapSpecialAudience.editions = `just ${joinAnd(listScouterEditions)} ${getVocab( "LEADERS_GENERIC" )}`;
if ( strCommitteeMembers )
mapSpecialAudience.editions += ` and ${strCommitteeMembers}`;
}
}
else // all editions?
{
if ( post.visibility == VISIBILITY.everyone.id )
mapSpecialAudience.editions = `everyone`;
else
mapSpecialAudience.editions = `just ${getVocab( "LEADERS_GENERIC" )} and ${getVocab( "Leaders" )}`;
}
post.specialaudience = mapSpecialAudience.editions + " " + mapSpecialAudience.councils;
}
else
{
if ( post.visibility == VISIBILITY.everyone.id )
mapSpecialAudience.editions = `everyone in this ${getVocabTroop()}`;
else if ( ! isAssoc && post.accountid == getAccountID() ) // Troop news?
mapSpecialAudience.editions = `just ${getVocab( "Leaders" )} in this ${getVocabTroop()}`;
else
mapSpecialAudience.editions = `just ${getVocab( "LEADERS_GENERIC" )} and ${getVocab( "Leaders" )} in this ${getVocabTroop()}`;
post.specialaudience = mapSpecialAudience.editions;
}
}
// so now we have just those posts that a) aren't expired and b) match the target edition/audience
for ( const note of post.content ) // this assumes the posts are sorted by timestamp (which the server does provide)
{
// if we are displaying the entire newsfeed, then we have to show scheduled posts,
// but if it's just the home page newsfeed, then we skip posts that aren't due yet
if ( ! bShowAll && (note.timestamp > now /* || post.accountid == getAccountID() */ ) )
continue;
note.postid = post.postid; // copy this into the note, so we can look up author, etc
note.timestampupdated = post.timestampupdated; // copy this so sorting is faster
if ( post.pinned )
listPinnedNotes.push( note );
else if ( bShowAll || g_mapHiddenNewsFeedPosts[post.postid] === undefined || g_mapHiddenNewsFeedPosts[post.postid] < note.timestamp ) // allow for "Hide". Note that by comparing timestamp, posts are effectively unhidden when the content changes
listNotes.push( note );
nPosts++;
break; // don't bother looking through older content
}
}
// sort all the content from all the posts we're going to display
listNotes.sort( newsFeedNoteComparable );
listPinnedNotes.sort( newsFeedNoteComparable );
listNotes = listPinnedNotes.concat( listNotes ); // tack the regular posts on to the end of the pinned posts
const mapNewsFeedPostViews = {};
$( selector ).toggle( hasPerm || listNotes.length > 0 );
if ( listNotes.length == 0 )
{
let strMessage = "";
if ( selector != "#news-feed" ) // must be the archive, which shows all time-valid posts (including hidden)
strMessage = "There are no posts to show in your News Feed.";
else if ( nPosts > 0 ) // must be some hidden posts, so it's worth directing the user to the "News Feed" archive
strMessage = `You're all caught up! To see previously-read posts, go to "News Feed."`;
else if ( hasPerm ) // truly nothing to see... if you can't post then don't show anything, otherwise give a hint about creating a new post
strMessage = "There's nothing in your News Feed.";
if ( hasPerm )
strMessage += `${getClickVerb()} "Add" to create a post for others in your ${isAssoc ? getVocabScope() : getVocabTroop()} to see.`;
if ( strMessage )
$( selector ).append( `
${strMessage}
` );
}
// now generate the actual HTML for all our posts
for ( const note of listNotes )
{
const post = findByProperty( listPosts, "postid", note.postid );
if ( ( post.recordviews === undefined || post.recordviews ) && g_setNewsFeedPostReportedViews[post.postid] === undefined ) // have we reported seeing this post?
{
g_setNewsFeedPostReportedViews[post.postid] = 1; // record that we've seen it
mapNewsFeedPostViews[post.postid] = post.accountid; // record the author account of the post
}
buildPost( selector, post, note, g_mapHiddenNewsFeedPosts, "0", bShowAll, false );
if ( g_jsonNewsFeedPostViews[post.postid] !== undefined && hasPerm )
{
const view = g_jsonNewsFeedPostViews[post.postid];
if ( view.participant.total === undefined )
view.participant.total = 0;
if ( view.participant.unique === undefined )
view.participant.unique = 0;
let htmlRawTable = "";
const htmlMoreLink = g_jsonNewsFeedPostViewSnapshots[post.postid] !== undefined ? `(daily snapshots)` : "";
if ( htmlMoreLink ) // do we need to bother building a table of daily snapshots
{
const htmlTableHeader = post.visibility != VISIBILITY.everyone.id
? `
${getVocab( "LEADERS_GENERIC" )}
Date
Day
Reach
Delta
Views
Delta
`
: `
${getVocab( "LEADERS_GENERIC" )}
Non-${getVocab( "LEADERS_GENERIC" )}
Date
Day
Reach
Delta
Views
Delta
Reach
Delta
Views
Delta
`;
const listHtmlTableRows = [];
let lastDaily = { leader: { unique: 0, total: 0 }, participant: { unique: 0, total: 0 } };
for ( const snapshot of g_jsonNewsFeedPostViewSnapshots[post.postid] )
{
const strDate = formatDate( snapshot.timestamp );
const strDOW = DOW[new Date( snapshot.timestamp ).getDay()];
const daily = JSON.parse( snapshot.snapshot );
const dailyParticipant = $.extend( { unique: 0, total: 0 }, daily.participant ); // this ensures missing values are treated as zero
const dailyLeader = $.extend( { unique: 0, total: 0 }, daily.leader ); // this ensures missing values are treated as zero
listHtmlTableRows.push( post.visibility != VISIBILITY.everyone.id
? `
` );
lastDaily = { leader: dailyLeader, participant: dailyParticipant };
}
listHtmlTableRows.reverse(); // flip it, so the most recent date is at the top
htmlRawTable = `
` + htmlTimestamp;
else if ( post.timestamp > 0 && post.timestampend < getNow() )
htmlTimestamp += ` (Expired on ${formatDate( post.timestampend )})`;
const nAuthorHeight = strAuthorAvatar ? "height:42px;padding-bottom:5px;" : "height:auto;padding-bottom:5px;";
htmlAuthor = `