JSFiddle - React, Tailwind, and code Playground

Unsent Data Pop-up - Fliplet

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.min.js"></script>
<!-- PLACE THIS IN THE SCREEN -->
<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

/* PLACE THIS IN THE GLOBAL CSS - CHANGE COLOURS IF NEEDED */
.notification-bar {
    background: #109fe9; // Change this if needed
    color: #FFFFFF; // Changes this if needed
    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 1s;
            transition: all 0.5s ease-in 1s;
}

.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

// PLACE THIS IN THE GLOBAL JS
var unsentDataNotification = (function () {
    var _this;

    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.setupTrackingDataCheck();
    }

    unsentDataNotification.prototype = {
        constructor: unsentDataNotification,

        setupTrackingDataCheck: function () {
            window.plugins.wip.getStoredTrackingData(_this.successDataRetrieved, function () {});
        },

        sendTrackingData: function () {
            window.plugins.wip.sendStoredTrackingData(_this.successSendingData, function () {});
        },

        successDataRetrieved: function (unsentData) {
            window.parsedUnsentData = JSON.parse(unsentData);
            _this.checkUnsentData();
        },

        successSendingData: function (unsentData) {
            window.parsedUnsentData = JSON.parse(unsentData);
			_this.checkData();
        },

        registerHandlebarsMethods: function () {
            Handlebars.registerHelper('instance', function (count) {
                return count;
            });
            
            Handlebars.registerHelper('partial', function(){
                if (parsedUnsentData.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 (parsedUnsentData.count == 0 || parsedUnsentData.count > 1){
                    var...