paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-15 19:31:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add onboarding UI functions for displaying and completing setup items.

Browse Source 
(imported from commit 9ba9cb09d5ad2845ceeda436f89f7d22a19c3fbc)
This commit is contained in:
Jessica McKellar
2013-05-08 09:47:37 -04:00
parent 76a57e78ed
commit f37540bbda
3 changed files with 123 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
zephyr/static/js/onboarding.js
View File

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