Unsent Data Pop-up

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.min.js"></script>
<div class="notification-bar"></div>

<script type="text/x-handlebars-template" id="data-notification">// <![CDATA[
<div>You have <strong>{{instance count}}</strong> {{partial}} saved.</div>
    <button class="btn btn-default" id="resend"><span class="btn-text">Send now</span> <span class="glyphicon glyphicon-refresh"></span></button>
// ]]></script>
<script type="text/x-handlebars-template" id="multiple-partial">// <![CDATA[
form submissions
// ]]>
</script>
<script type="text/x-handlebars-template" id="single-partial">// <![CDATA[
form submission
// ]]>
</script>

CSS

.notification-bar {
    background: #109fe9;
    color: #FFFFFF;
    padding: 10px 16px;
    position: fixed;
    top: auto;
    right: 0;
    bottom: -100px;
    left: 0;
    text-align: center;
    opacity: 0;
}

.notification-bar.ready {
    opacity: 1;
    bottom: 0;
    -webkit-transition: all 0.5s ease-in;
            transition: all 0.5s ease-in;
}

.notification-bar.ready.going-out {
    opacity: 0;
    -webkit-transition: all 0.5s ease-in 2s;
            transition: all 0.5s ease-in 2s;
}

.notification-bar div {
    display: inline-block;
}

.notification-bar #resend {
    display: inline-block;
    margin-left: 10px;
}

.notification-bar p {
    line-height: 34px;
    margin: 0;
}

.glyphicon-refresh.animate {
    -webkit-animation-name: rotateThis;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes "rotateThis" {
 from { 
        -webkit-transform: rotate( 0deg );  
    }
 to  { 
        -webkit-transform: rotate( 360deg ); 
    }
}

JavaScript

var unsentDataNotification = (function() {
    var _this;
    
    unsentData = {
        count: 10,
        trackingDataList: []
    }

    function unsentDataNotification() {
		_this = this;
		
        var source = $("#data-notification").html();
        var cleanSource = source.replace("// <![CDATA[", "").replace("// ]]>", "");
        Handlebars.notificationTemplate = {};
        Handlebars.notificationTemplate.notification = Handlebars.compile( cleanSource );
        this.registerHandlebarsMethods();
        
        this.checkUnsentData();
	}
    
    unsentDataNotification.prototype = {
        constructor : unsentDataNotification,
        
        registerHandlebarsMethods : function(){
            Handlebars.registerHelper('instance', function(count) {
              return count;
            });
            
            Handlebars.registerHelper('partial', function(){
                if (unsentData.count == 1) {
                    var partialSource = $('#single-partial').html();
                    var cleanPartialSource = partialSource.replace("// <![CDATA[", "").replace("// ]]>", "");
                    Handlebars.notificationTemplate.single = Handlebars.compile( cleanPartialSource );
					return new Handlebars.SafeString( Handlebars.notificationTemplate.single(this) );
                } else if (unsentData.count == 0 || unsentData.count > 1){
                    var partialSource = $('#multiple-partial').html();
                    var cleanPartialSource = partialSource.replace("// <![CDATA[", "").replace("// ]]>", "");
                    Handlebars.notificationTemplate.multiple = Handlebars.compile( cleanPartialSource );
					return new Handlebars.SafeString( Handlebars.notificationTemplate.multiple(this) );
                }
			});
        },
        
        checkUnsentData : function() {
            if ( typeof unsentData != "undefined" && unsentData.count > 0 ) {
                _this.showUnsetDataCount();
            }
        },
            ...