in database/scripts/main.js [85:187]
function createPostElement(postId, title, text, author, authorId, authorPic) {
var uid = firebase.auth().currentUser.uid;
var html =
'<div class="post post-' + postId + ' mdl-cell mdl-cell--12-col ' +
'mdl-cell--6-col-tablet mdl-cell--4-col-desktop mdl-grid mdl-grid--no-spacing">' +
'<div class="mdl-card mdl-shadow--2dp">' +
'<div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">' +
'<h4 class="mdl-card__title-text"></h4>' +
'</div>' +
'<div class="header">' +
'<div>' +
'<div class="avatar"></div>' +
'<div class="username mdl-color-text--black"></div>' +
'</div>' +
'</div>' +
'<span class="star">' +
'<div class="not-starred material-icons">star_border</div>' +
'<div class="starred material-icons">star</div>' +
'<div class="star-count">0</div>' +
'</span>' +
'<div class="text"></div>' +
'<div class="comments-container"></div>' +
'<form class="add-comment" action="#">' +
'<div class="mdl-textfield mdl-js-textfield">' +
'<input class="mdl-textfield__input new-comment" type="text">' +
'<label class="mdl-textfield__label">Comment...</label>' +
'</div>' +
'</form>' +
'</div>' +
'</div>';
// Create the DOM element from the HTML.
var div = document.createElement('div');
div.innerHTML = html;
var postElement = div.firstChild;
if (componentHandler) {
componentHandler.upgradeElements(postElement.getElementsByClassName('mdl-textfield')[0]);
}
var addCommentForm = postElement.getElementsByClassName('add-comment')[0];
var commentInput = postElement.getElementsByClassName('new-comment')[0];
var star = postElement.getElementsByClassName('starred')[0];
var unStar = postElement.getElementsByClassName('not-starred')[0];
// Set values.
postElement.getElementsByClassName('text')[0].innerText = text;
postElement.getElementsByClassName('mdl-card__title-text')[0].innerText = title;
postElement.getElementsByClassName('username')[0].innerText = author || 'Anonymous';
postElement.getElementsByClassName('avatar')[0].style.backgroundImage = 'url("' +
(authorPic || './silhouette.jpg') + '")';
// Listen for comments.
var commentsRef = firebase.database().ref('post-comments/' + postId);
commentsRef.on('child_added', function(data) {
addCommentElement(postElement, data.key, data.val().text, data.val().author);
});
commentsRef.on('child_changed', function(data) {
setCommentValues(postElement, data.key, data.val().text, data.val().author);
});
commentsRef.on('child_removed', function(data) {
deleteComment(postElement, data.key);
});
// Listen for likes counts.
var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', function(snapshot) {
updateStarCount(postElement, snapshot.val());
});
// Listen for the starred status.
var starredStatusRef = firebase.database().ref('posts/' + postId + '/stars/' + uid);
starredStatusRef.on('value', function(snapshot) {
updateStarredByCurrentUser(postElement, snapshot.val());
});
// Keep track of all Firebase reference on which we are listening.
listeningFirebaseRefs.push(commentsRef);
listeningFirebaseRefs.push(starCountRef);
listeningFirebaseRefs.push(starredStatusRef);
// Create new comment.
addCommentForm.onsubmit = function(e) {
e.preventDefault();
createNewComment(postId, firebase.auth().currentUser.displayName, uid, commentInput.value);
commentInput.value = '';
commentInput.parentElement.MaterialTextfield.boundUpdateClassesHandler();
};
// Bind starring action.
var onStarClicked = function() {
var globalPostRef = firebase.database().ref('/posts/' + postId);
var userPostRef = firebase.database().ref('/user-posts/' + authorId + '/' + postId);
toggleStar(globalPostRef, uid);
toggleStar(userPostRef, uid);
};
unStar.onclick = onStarClicked;
star.onclick = onStarClicked;
return postElement;
}