Add onboarding UI functions for displaying and completing setup items.

(imported from commit 9ba9cb09d5ad2845ceeda436f89f7d22a19c3fbc)

zephyr/static/js/onboarding.js

@@ -9,6 +9,8 @@ var step_info = {sent_stream_message: {"user_message": "Send a stream message"},
                  sent_private_message: {"user_message": "Send a private message"},
                  made_app_sticky: {"user_message": "Pin this tab"}};
 
+var onboarding = false;
+
 function update_onboarding_steps() {
     var step_statuses = [];
     $.each(steps, function (idx, step) {
@@ -23,5 +25,108 @@ function update_onboarding_steps() {
     });
 }
 
+function all_steps_completed() {
+    return steps.filter(function (step) {
+        return step_info[step].status === false;
+    }).length === 0;
+}
+
+
+function finish_onboarding() {
+    var checklist = $('#onboarding-checklist');
+    checklist.empty();
+    checklist.html("<i class='icon-vector-check onboarding_success'>Done");
+    $('#onboarding').fadeOut(5000, function () {
+        $(this).hide();
+    });
+}
+
+function update_checklist_ui(step) {
+    var checklist_item = $($('#onboarding-checklist').find("i")[steps.indexOf(step)]);
+    checklist_item.removeClass("icon-vector-check-empty").addClass("icon-vector-check");
+    if (all_steps_completed()) {
+        finish_onboarding();
+    }
+}
+
+exports.set_step_info = function (steps) {
+    $.each(steps, function (idx, step) {
+        var step_name = step[0];
+        var status = step[1];
+        step_info[step_name].status = status;
+        if (status) {
+            update_checklist_ui(step_name);
+        }
+    });
+};
+
+exports.mark_checklist_step = function (step) {
+    if (!onboarding) {
+        return;
+    }
+
+    step_info[step].status = true;
+    update_checklist_ui(step);
+    update_onboarding_steps();
+};
+
+function set_app_sticky_popover() {
+    var item = $("#made_app_sticky");
+    item.popover({"placement": "left",
+                  "content": templates.render('sticky_app_popover'),
+                  "html": true,
+                  "trigger": "manual",
+                  // This is unfortunately what you have to do to set
+                  // a custom width for a popover.
+                  "template": '<div class="popover"><div class="arrow">' +
+                              '</div><div class="sticky-popover-inner">' +
+                              '<h3 class="popover-title"></h3>' +
+                              '<div class="popover-content"><p></p></div>' +
+                              '</div></div>'});
+    // Popover on hover.
+    item.mouseenter(function (e) {
+        if (!$(this).data('popover').tip().hasClass('in')) {
+            item.popover('show');
+
+            // Clicking the Done button inside the popover closes it.
+            $("#sticky_done").on("click", function (e) {
+                item.popover('hide');
+                exports.mark_checklist_step("made_app_sticky");
+            });
+        }
+    });
+}
+step_info.made_app_sticky.register = set_app_sticky_popover;
+
+function set_up_checklist() {
+    var onboarding_checklist = $('#onboarding-checklist').empty();
+    if (all_steps_completed()) {
+        return;
+    }
+
+    $.each(steps, function (idx, step) {
+        var entry = $('<div>');
+        if (step_info[step].status) {
+            entry.append($("<i class='icon-vector-check'>"));
+        } else {
+            entry.append($("<i class='icon-vector-check-empty'>"));
+        }
+        entry.append($('<span>').text(step_info[step].user_message)).attr("id", step);
+        onboarding_checklist.append(entry);
+
+        var register_action = step_info[step].register;
+        if (register_action !== undefined) {
+            register_action();
+        }
+        $("#onboarding").show();
+    });
+}
+
+exports.initialize = function () {
+    onboarding = true;
+    exports.set_step_info(page_params.onboarding_steps);
+    set_up_checklist();
+};
+
 return exports;
 }());

zephyr/static/styles/zephyr.css

@@ -1278,3 +1278,19 @@ li.expanded_subject {
 #onboarding {
     display: none;
 }
+
+.onboarding_success {
+    font-size: 40px;
+    color: #00CC00;
+    text-align: center;
+}
+
+.sticky-popover-inner {
+    max-width: 300px;
+}
+.sticky-popover-inner p {
+    padding-bottom: 5px;
+}
+#sticky_done {
+    text-align: center;
+}

zephyr/views.py

@@ -526,7 +526,8 @@ def home(request):
             user_profile.enable_offline_email_notifications,
         event_queue_id        = register_ret['queue_id'],
         last_event_id         = register_ret['last_event_id'],
-        max_message_id        = register_ret['max_message_id']
+        max_message_id        = register_ret['max_message_id'],
+        onboarding_steps      = simplejson.loads(user_profile.onboarding_steps)
     ))
 
     statsd.incr('views.home')