Add a settings option to configure per-user alert words

(imported from commit b24d352fffdde13f2cf0467b31c706ebf0534d6a)

static/js/settings.js

@@ -55,6 +55,61 @@ $(function () {
 
     var create_avatar_widget = avatar.build_bot_create_widget();
 
+    var word_list = $('#word-alerts');
+    _.each(alert_words.words, function (word) {
+        var li = templates.render('alert_word_settings_item', {'word': word});
+        word_list.append(li);
+    });
+    var new_word = templates.render('alert_word_settings_item', {'word': '', editing: true});
+    word_list.append(new_word);
+
+    function update_word_alerts() {
+        var words = _.map($('.alert-word-item'), function (e) {
+            return $(e).data('word');
+        });
+        words = _.filter(words, function (word) {
+            return word !== "";
+        });
+
+        $.ajax({
+            type: 'POST',
+            url: '/json/set_alert_words',
+            data: {alert_words: JSON.stringify(words)},
+            dataType: 'json'});
+    }
+
+    $('#word-alerts').on('click', '.add-alert-word', function (event) {
+        var word = $(event.target).siblings('input').val();
+        if (word === '') {
+            return;
+        }
+
+        var final_li = templates.render('alert_word_settings_item', {'word': word, editing: false});
+
+        var li = $(event.target).parent();
+        li.replaceWith(final_li);
+
+        var new_word = templates.render('alert_word_settings_item', {'word': '', editing: true});
+        word_list.append(new_word);
+
+        update_word_alerts();
+    });
+
+    $('#word-alerts').on('click', '.remove-alert-word', function (event) {
+        var li = $(event.target).parent();
+        li.remove();
+
+        update_word_alerts();
+    });
+
+    $('#word-alerts').on('keypress', '.edit-alert-word', function (event) {
+        var key = event.which;
+        // Disallow spaces (key code 32)
+        if (key === 32) {
+            event.preventDefault();
+        }
+    });
+
     $('#create_bot_form').validate({
         errorClass: 'text-error',
         success: function () {

static/js/zulip.js

@@ -853,6 +853,9 @@ function get_updates_success(data) {
         case 'realm_emoji':
             emoji.update_emojis(event.realm_emoji);
             break;
+        case 'alert_words':
+            alert_words.words = event.alert_words;
+            break;
         }
     });
 

static/styles/zulip.css

@@ -2419,6 +2419,32 @@ li.expanded_subject {
     opacity: .5;
 }
 
+#word-alerts {
+    list-style-type: none;
+
+    width: 295px;
+    margin-left: 0px;
+}
+
+.alert-word-item {
+    margin-bottom: 5px;
+}
+
+.remove-alert-word,
+.add-alert-word {
+    float: right;
+}
+
+input.edit-alert-word {
+    height: 12px;
+    line-height: 12px;
+    font-size: 1em;
+}
+
+input.edit-alert-word::-webkit-input-placeholder {
+    padding-top: 4px;
+}
+
 #bots_list {
     display: none;
     list-style-type: none;

static/templates/alert_word_settings_item.handlebars

@@ -0,0 +1,8 @@
+{{! Alert word in the settings page that can be removed }}
+<li class="alert-word-item" data-word='{{word}}'>
+	{{#if editing}}
+		<input class="edit-alert-word input-medium" type="text" placeholder="Alert Word"></input><button class="btn btn-mini add-alert-word" type="button">Add</button</i>
+	{{else}}
+		{{word}}<button class="btn btn-mini remove-alert-word" type="button">Remove</button</i>
+	{{/if}}
+</li>

static/templates/notification_docs.handlebars

@@ -7,6 +7,7 @@
 <li>a private message</li>
 <li>a message that @-mentions you</li>
 <li>a message to a stream you have configured to show desktop notifications (via the streams page)</li>
+<li>any custom word alerts that you have configured</li>
 </ul>
 <br />
 <p>If the Zulip window is in focus and you can already see the message when it arrives, we won't notify you.</p>

templates/zerver/settings.html

@@ -128,6 +128,13 @@
 
     <hr class="settings_separator" />
 
+    <h3>Custom Word Alerts</h3>
+
+    <ul id="word-alerts">
+    </ul>
+
+    <hr class="settings_separator" />
+
     <h3>Your bots</h3>
 
     <ol id="bots_list">