Voice - Incremental Show

by Kyle Mitofsky

HTML

<td class="gc-message-transcript-m">
    <div>
        <div class="gc-message-player">
            <div class="gc-message-message-display">
                
                
                <div class="gc-message-sms-row">
                    <span class="gc-message-sms-from">
                        My Friend:
                    </span>
                    <span class="gc-message-sms-text">Test Message 1</span>
                    <span class="gc-message-sms-time">
                        8:23 AM 
                    </span>
                    
                </div>
                <div class="gc-message-sms-more">
                    <a class="gc-message-sms-show" title="Show more messages" href="javascript://">28 more messages</a>
                </div>
                <div class="gc-message-sms-old" style="display: none;">
                    
                    
                    <div class="gc-message-sms-row">
                        <span class="gc-message-sms-from">
                            Me:
                        </span>
                        <span class="gc-message-sms-text">Test Message 1</span>
                        <span class="gc-message-sms-time">
                            8:24 AM 
                        </span>
                        
                    </div>
                    
                    
                    <div class="gc-message-sms-row">
                        <span class="gc-message-sms-from">
                            My Friend:
                        </span>
                        <span class="gc-message-sms-text">Test Message 1</span>
                        <span class="gc-message-sms-time">
                            8:36 AM 
                        </span>
                        
                    </div>
                    
                    
                    <div class="gc-message-sms-row">
                        <span class="gc-message-sms-from">
                            Me:
      ...

CSS

.gc-message-sms-old .gc-message-sms-row {
    display: none;
}
.gc-message-sms-old .gc-message-sms-row.showMessage {
    display: block;
}

JavaScript

//.gc-message-sms-more
//  .gc-message-sms-show
//.gc-message-sms-old
//  .gc-message-sms-row

var moreMessagesLinkClass = 'gc-message-sms-show';
var showMessageClass = "showMessage";
var numberToShow = 5;

document.body.onclick = function(e){
   e = window.event ? event.srcElement: e.target;
   if (e.classList && 
       e.classList.contains(moreMessagesLinkClass)) {
        var oldMsgContainer = e.parentNode.nextElementSibling;
        
        //always make visible
        oldMsgContainer.style.display = 'block';  
        
       // get all children
       var allMsgs = [].slice.call(oldMsgContainer.children);
       
       // get messages that have not yet been shown
       var hiddenMsgs = allMsgs.filter(function(el) {
           return !el.classList.contains(showMessageClass);
       });
       
       // grab messages at end of array
       var splicePos = Math.max(hiddenMsgs.length - numberToShow, 0);
       var msgsToShow = hiddenMsgs.splice(splicePos); 
       
       // show msgs
       msgsToShow.forEach(function(el) {
           el.classList.add(showMessageClass);
       });       
       
       // Update Link
       if (hiddenMsgs.length > 0) {
            //change link text
           e.innerHTML = hiddenMsgs.length + ' more message(s)';
       } else {
            //hide the link
            e.style.display = 'none';  
       }
    }
};