implemented simple review mechanism

_locales/en/messages.json

@@ -13,6 +13,25 @@
         "message": "Send anonymous usage data to the developer team"
     },
 
+    "reviewHead": {
+        "message": "Application Review"
+    },
+    "reviewInitial": {
+        "message": "Do you like this app?"
+    },
+    "reviewStore": {
+        "message": "We are glad to hear that, would you like to send a review to make the application more popular?"
+    },
+    "reviewBug": {
+        "message": "We are sorry to hear that, would you like to submit a ticker and tell us what bothers you?"
+    },
+    "reviewYes": {
+        "message": "Yes"
+    },
+    "reviewNo": {
+        "message": "No"
+    },
+
     "connect": {
         "message": "Connect"
     },

js/review.js

@@ -0,0 +1,143 @@
+'use strict';
+
+$(document).ready(function () {
+    function Dialog(identifier, content, customJS) {
+        var self = this;
+
+        this.block = $('<div />').css({
+            'position': 'fixed',
+            'top': 0,
+            'left': 0,
+            'width': '100%',
+            'height': '100%',
+            'background-color': 'rgba(0, 0, 0, 0.25)',
+            'z-index': 1000
+        });
+
+        $('body').append(this.block);
+
+        this.element = $('<div />').prop('id', 'dialog').addClass(identifier).load(content, function () {
+            // position the dialog
+            self.element.css({
+                'top': (window.innerHeight - self.element.height()) / 3,
+                'left': (window.innerWidth - self.element.width()) / 2
+            });
+
+            // display content
+            self.element.fadeIn(100);
+
+            if (customJS) customJS(this);
+        });
+
+        $('body').append(this.element);
+
+        // handle window resize
+        var resizeHandler = function () {
+            self.element.css({
+                'top': (window.innerHeight - dialog.height()) / 3,
+                'left': (window.innerWidth - dialog.width()) / 2
+            });
+        };
+
+        $(window).on('resize', resizeHandler);
+
+
+        // handle confirm/dismiss keys
+        var keyDownHandler = function (e) {
+            if (e.which == 13) {
+                // Enter
+                self.element.find('.yes').click();
+            } else if (e.which == 27) {
+                // ESC
+                self.element.find('.no').click();
+            }
+        };
+
+        $(document).on('keydown', keyDownHandler);
+
+        // cleanup routine
+        this.cleanup = function () {
+            $(window).off('resize', resizeHandler);
+            $(document).off('keydown', keyDownHandler);
+
+            self.element.empty().remove();
+            self.block.remove();
+        };
+
+        return this;
+    }
+
+    chrome.storage.sync.get('appReview', function (result) {
+        if (typeof result.appReview !== 'undefined') {
+            var data = result.appReview;
+
+            if (data.launched < 10) {
+                data.launched += 1;
+
+                chrome.storage.sync.set({'appReview': data});
+                return;
+            }
+
+            if ((data.firstStart + 604800000) < new Date().getTime()) {
+                if (data.refused == 0 || (data.refused + 604800000) < new Date().getTime()) {
+                    var dialog = new Dialog('review', './tabs/review.html', function () {
+                        localize();
+
+                        $('.initial', dialog.element).show();
+
+                        var stage = 0;
+                        $(dialog.element).on('click', '.yes, .no', function () {
+                            if (!stage) {
+                                $('p', dialog.element).hide();
+                                if ($(this).hasClass('yes')) {
+                                    $('.storeReview', dialog.element).show();
+                                    stage = 1;
+                                    googleAnalytics.sendEvent('Review', 'Likes App', true);
+                                } else {
+                                    $('.bugTicket', dialog.element).show();
+                                    stage = 2
+                                    googleAnalytics.sendEvent('Review', 'Likes App', false);
+                                }
+                                return false;
+                            }
+
+                            if (stage == 1) {
+                                if ($(this).hasClass('yes')) {
+                                    window.open('https://chrome.google.com/webstore/detail/baseflight-configurator/mppkgnedeapfejgfimkdoninnofofigk/reviews');
+                                    data.reviewed = new Date().getTime();
+                                    googleAnalytics.sendEvent('Review', 'Submits Review', true);
+                                } else {
+                                    data.refused = new Date().getTime();
+                                    googleAnalytics.sendEvent('Review', 'Refused', true);
+                                }
+                            }
+
+                            if (stage == 2) {
+                                if ($(this).hasClass('yes')) {
+                                    window.open('https://github.com/multiwii/baseflight-configurator/issues');
+                                    data.refused = new Date().getTime();
+                                    googleAnalytics.sendEvent('Review', 'Submits Bug Ticket', true);
+                                } else {
+                                    data.refused = new Date().getTime();
+                                    googleAnalytics.sendEvent('Review', 'Refused', true);
+                                }
+                            }
+
+                            chrome.storage.sync.set({'appReview': data});
+                            dialog.cleanup();
+                        });
+
+                    });
+                }
+            }
+        } else {
+            // object not in storage, initial setup
+            chrome.storage.sync.set({'appReview': {
+                'firstStart':   new Date().getTime(),
+                'launched':     1,
+                'reviewed':     0,
+                'refused':      0
+            }});
+        }
+    });
+});

main.css

@@ -299,4 +299,48 @@ input[type="number"]::-webkit-inner-spin-button {
 
     text-align: center;
     font-weight: bold;
+}
+#dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    border: 1px solid silver;
+    background-color: white;
+    display: none;
+    z-index: 1001;
+}
+#dialog.review {
+    width: 300px;
+}
+#dialog.review .head {
+    line-height: 20px;
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    border-bottom: 1px solid silver;
+    background-color: #3f4241;
+}
+#dialog.review .wrapper {
+    padding: 5px;
+}
+#dialog.review p {
+    display: none;
+    padding: 5px;
+    text-align: center;
+}
+#dialog.review .buttons {
+    float: right;
+    margin: 5px 0 0 0;
+}
+#dialog.review .yes,
+#dialog.review .no {
+    display: block;
+    float: left;
+    margin: 0 0 0 5px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0 10px 0 10px;
+    font-weight: bold;
+    border: 1px solid #dddddd;
+    background-color: #f1f1f1;
 }

main.html

@@ -40,6 +40,7 @@
         <script type="text/javascript" src="./js/protocols/stm32.js"></script>
         <script type="text/javascript" src="./js/protocols/stm32usbdfu.js"></script>
         <script type="text/javascript" src="./js/localization.js"></script>
+        <script type="text/javascript" src="./js/review.js"></script>
         <script type="text/javascript" src="./main.js"></script>
 
         <script type="text/javascript" src="./tabs/landing.js"></script>

tabs/review.html

@@ -0,0 +1,11 @@
+<div class="head" i18n="reviewhead"></div>
+<div class="wrapper">
+    <p class="initial" i18n="reviewInitial"></p>
+    <p class="storeReview" i18n="reviewStore"></p>
+    <p class="bugTicket" i18n="reviewBug"></p>
+    <div class="buttons">
+        <div class="yes" i18n="reviewYes"></div>
+        <div class="no" i18n="reviewNo"></div>
+    </div>
+    <div class="clear-both"></div>
+</div>