tutorial: Remove rest of tutorial.

Replaces the call to welcome() in tutorial.start with finale(true), and then
iteratively removes all orphaned code.
This commit is contained in:
Rishi Gupta 2017-07-17 13:02:40 -07:00 committed by Tim Abbott
parent e1843dd1b9
commit be7f6db854
10 changed files with 1 additions and 298 deletions

View File

@ -1126,26 +1126,6 @@ function render(template_name, args) {
}());
(function tutorial() {
var tutorials = [
'tutorial_home',
'tutorial_message',
'tutorial_reply',
'tutorial_stream',
'tutorial_subject',
'tutorial_title',
];
var html = '';
_.each(tutorials, function (tutorial) {
var args = {
placement: 'left',
title: 'Title',
};
html = render(tutorial, args);
global.write_handlebars_output(tutorial, html);
});
}());
(function typeahead_list_item() {
var args = {
primary: 'primary-text',

View File

@ -218,76 +218,6 @@ exports.is_running = function () {
return is_running;
};
function box(x, y, width, height) {
// Blanket everything ouside the box defined by the parameters in a
// translucent black screen, and cover the box itself with a clear screen so
// nothing in it is clickable.
//
// x and y are the coordinates for hte upper-left corner of the box.
var doc_width = $(document).width();
var doc_height = $(document).height();
$("#top-screen").css({opacity: 0.7, width: doc_width, height: y});
$("#bottom-screen").offset({top: y + height, left: 0});
$("#bottom-screen").css({opacity: 0.7, width: doc_width, height: doc_height});
$("#left-screen").offset({top: y, left: 0});
$("#left-screen").css({opacity: 0.7, width: x, height: height});
$("#right-screen").offset({top: y, left: x + width});
$("#right-screen").css({opacity: 0.7, width: x, height: height});
$("#clear-screen").css({opacity: 0.0, width: doc_width, height: doc_height});
}
function message_groups_in_viewport() {
var vp = message_viewport.message_viewport_info();
var top = vp.visible_top;
var height = vp.visible_height;
var last_group = rows.get_message_recipient_row(rows.last_visible());
return $.merge(last_group, last_group.prevAll()).filter(function (idx, row) {
var row_offset = $(row).offset();
return (row_offset.top > top && row_offset.top < top + height);
});
}
function small_window() {
return !$("#left-sidebar").is(":visible");
}
function maybe_tweak_placement(placement) {
// If viewed on a small screen, move popovers on the left to the center so
// they won't be cut off.
if (!small_window()) {
return placement;
}
if (placement === "left") {
return "bottom";
}
if (placement === "bottom") {
return "right";
}
}
function create_and_show_popover(target_div, placement, title, content_template) {
$(".popover").remove();
target_div.popover("destroy");
target_div.popover({
placement: placement,
title: templates.render("tutorial_title", {title: title,
placement: placement}),
content: templates.render(content_template, {placement: placement,
page_params: page_params}),
trigger: "manual",
});
target_div.popover("show");
$(".popover").css("z-index", 20001);
$(".popover-title").addClass("popover-" + placement);
}
exports.defer = function (callback) {
deferred_work.push(callback);
};
@ -334,128 +264,6 @@ function finale(skip) {
compose_actions.cancel();
}
function box_first_message() {
var spotlight_message = rows.first_visible();
var bar = rows.get_message_recipient_row(spotlight_message);
var header = bar.find('.message_header');
var x = bar.offset().left;
var y = bar.offset().top;
var message_height = header.height() + spotlight_message.height();
var message_width = bar.width();
box(x, y, message_width, message_height);
}
function box_messagelist() {
var spotlight_message_row = rows.get_message_recipient_row(rows.first_visible());
var x = spotlight_message_row.offset().left;
var y = spotlight_message_row.offset().top;
var height = 0;
_.each(message_groups_in_viewport(), function (row) {
height += $(row).height();
});
box(x, y, spotlight_message_row.width(), height);
}
function reply() {
var spotlight_message = rows.get_message_recipient_row(rows.first_visible());
box_messagelist();
create_and_show_popover(spotlight_message, maybe_tweak_placement("left"),
"Replying", "tutorial_reply");
var my_popover = $("#tutorial-reply").closest(".popover");
my_popover.offset({left: my_popover.offset().left - 10});
update_popover_info(reply, spotlight_message);
$("#tutorial-reply-next").click(function () {
spotlight_message.popover("destroy");
finale(false);
}).focus();
}
function home() {
var spotlight_message = rows.get_message_recipient_header(rows.first_visible());
box_messagelist();
create_and_show_popover(spotlight_message, maybe_tweak_placement("left"),
"Narrowing", "tutorial_home");
var my_popover = $("#tutorial-home").closest(".popover");
my_popover.offset({left: my_popover.offset().left - 10});
update_popover_info(home, spotlight_message);
$("#tutorial-home-next").click(function () {
spotlight_message.popover("destroy");
reply();
}).focus();
}
function subject() {
var spotlight_message = rows.first_visible();
var bar = rows.get_message_recipient_header(spotlight_message);
var placement = maybe_tweak_placement("bottom");
box_first_message();
create_and_show_popover(bar, placement, "Topics", "tutorial_subject");
var my_popover = $("#tutorial-subject").closest(".popover");
if (placement === "bottom") { // Wider screen, popover is on bottom.
my_popover.offset({left: bar.offset().left + 140 - my_popover.width() / 2});
} else {
my_popover.offset({left: bar.offset().left + 194});
}
update_popover_info(subject, bar);
$("#tutorial-subject-next").click(function () {
bar.popover("destroy");
home();
}).focus();
}
function stream() {
var bar = rows.get_message_recipient_header(rows.first_visible());
var placement = maybe_tweak_placement("bottom");
box_first_message();
create_and_show_popover(bar, placement, "Streams", "tutorial_stream");
var my_popover = $("#tutorial-stream").closest(".popover");
if (placement === "bottom") { // Wider screen, popover is on bottom.
my_popover.offset({left: bar.offset().left + 50 - my_popover.width() / 2});
} else { // Smaller screen, popover is to the right of the stream label.
my_popover.offset({left: bar.offset().left + 98});
}
update_popover_info(stream, bar);
$("#tutorial-stream-next").click(function () {
bar.popover("destroy");
subject();
}).focus();
}
function welcome() {
// Grey out everything.
$('#top-screen').css({opacity: 0.7, width: $(document).width(),
height: $(document).height()});
var spotlight_message = rows.first_visible();
var bar = rows.get_message_recipient_header(spotlight_message);
box_first_message();
create_and_show_popover(bar, maybe_tweak_placement("left"), "Welcome to Zulip",
"tutorial_message");
var my_popover = $("#tutorial-message").closest(".popover");
my_popover.offset({left: my_popover.offset().left - 10});
update_popover_info(welcome, bar);
$("#tutorial-message-next").click(function () {
bar.popover("destroy");
stream();
}).focus();
$("#tutorial-message-skip").click(function () {
bar.popover("destroy");
finale(true);
});
}
exports.start = function () {
if (overlays.is_active()) {
ui_util.change_tab_to('#home');
@ -470,7 +278,7 @@ exports.start = function () {
disable_event_handlers();
is_running = true;
set_tutorial_status("started");
welcome();
finale(true);
};
exports.initialize = function () {

View File

@ -2590,14 +2590,6 @@ img.emoji {
z-index: 20000;
}
#tutorial-stream {
width: 250px;
}
#tutorial-subject {
width: 250px;
}
.tutorial-done-button {
text-align: right;
margin-top: 9px;

View File

@ -1,13 +0,0 @@
{{! Contents of the "tutorial home" onboarding popup }}
<div class="tutorial-popover popover-{{placement}}" id="tutorial-home">
{{#tr this}}
<p>You can <b>narrow</b> to a stream or topic by <b>clicking on it</b>, or
see messages from all streams at once from your Home view.</p>
{{/tr}}
<div class="tutorial-done-button">
<button class="btn btn-primary" type="submit" id="tutorial-home-next">{{t "Next" }}</button>
</div>
</div>

View File

@ -1,12 +0,0 @@
{{! Contents of the "tutorial message" onboarding popup }}
<div class="tutorial-popover popover-{{placement}}" id="tutorial-message">
{{#tr this}}<p>Messages in Zulip go to a <b>stream</b> and have a <b>topic</b>.</p>{{/tr}}
<div class="tutorial-done-button">
<center>
<button class="btn btn-skip" type="submit" id="tutorial-message-skip">{{t "Exit tutorial" }}</button>
<button class="btn btn-primary" type="submit" id="tutorial-message-next">{{t "Next" }}</button>
</center>
</div>
</div>

View File

@ -1,13 +0,0 @@
{{! Contents of the "tutorial reply" onboarding popup }}
<div class="tutorial-popover popover-{{placement}}" id="tutorial-reply">
{{#tr this}}
<p><b>Reply</b> to a message by <b>clicking on it</b>. The stream
and topic will automatically be filled in.</p>
{{/tr}}
<div class="tutorial-done-button">
<button class="btn btn-primary" type="submit" id="tutorial-reply-next">{{t "Next" }}</button>
</div>
</div>

View File

@ -1,14 +0,0 @@
{{! Contents of the "tutorial stream" onboarding popup }}
<div class="tutorial-popover popover-{{placement}}" id="tutorial-stream">
<p>
{{#tr this}}
<b>Streams</b> are like chat rooms or mailing lists. You can easily
<b>join</b>, <b>leave</b>, and <b>make</b> them.
{{/tr}}
</p>
<div class="tutorial-done-button">
<button class="btn btn-primary" type="submit" id="tutorial-stream-next">{{t "Next" }}</button>
</div>
</div>

View File

@ -1,16 +0,0 @@
{{! Contents of the "tutorial subject" onboarding popup }}
<div class="tutorial-popover popover-{{placement}}" id="tutorial-subject">
<p>
{{#tr this}}
The <b>topic</b> of a conversation is one or two words that describe
what it is about, for example: <b>Bug #345</b>, <b>lunch</b>, or
<b>logo</b>. Don't overthink it.
{{/tr}}
</p>
<div class="tutorial-done-button">
<button class="btn btn-primary" type="submit" id="tutorial-subject-next">{{t "Next" }}</button>
</div>
</div>

View File

@ -1,3 +0,0 @@
{{! Contents of the tutorial popup title}}
<h4 class="popover-{{placement}}">{{title}}</h4>

View File

@ -50,12 +50,6 @@ var page_params = {{ page_params }};
<p>{% trans %}If this message does not go away, please wait a couple seconds and <a href="javascript:location.reload(true)">reload</a> the page.{% endtrans %}</p>
</div>
<div id="top-screen" class="screen"></div>
<div id="bottom-screen" class="screen"></div>
<div id="left-screen" class="screen"></div>
<div id="right-screen" class="screen"></div>
<div id="clear-screen" class="screen"></div>
<div id="settings_overlay_container" class="overlay" data-overlay="settings" aria-hidden="true">
{% include "zerver/settings_overlay.html" %}
</div>