Switch from bootstrap-select to selectize in pushover and ntfy forms

static/css/base.css

@@ -319,11 +319,16 @@ input[type=number]::-webkit-inner-spin-button {
     color: var(--btn-remove-color);
 }
 
-/* Greyed out help text in bootstrap-select dropdowns (e.g. in "Add ntfy" form) */
+/* Greyed out help text in selectize dropdowns (e.g. in "Add ntfy" form) */
-.dropdown .help {
+.selectize-control .help {
     opacity: 0.6;
 }
 
+/* Hide caret in single-select mode to mimic the standard <select> element  */
+.selectize-control.single {
+    caret-color: transparent;
+}
+
 .btn-default {
     box-shadow: 0 5px 0 -3px rgba(0, 0, 0, 0.05);
 }
@@ -346,4 +351,4 @@ select.form-control {
 .bootstrap-select .dropdown-toggle:focus {
     outline: 0 !important;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 4px rgba(102, 175, 233, 0.2);
-}
+}

static/js/add_pushover.js

@@ -0,0 +1,8 @@
+$(function() {
+    function makeOption(item, escape) {
+        var parts = item.text.split(":");
+        return `<div class="option">${parts[0]}. <span class="help">${parts[1]}</span></div>`;
+    }
+
+    $("select").selectize({render: {option: makeOption, item: makeOption}});    
+});

static/js/ntfy_form.js

@@ -0,0 +1,8 @@
+$(function() {
+    function makeOption(item, escape) {
+        var parts = item.text.split(":");
+        return `<div class="option">${parts[0]}. <span class="help">${parts[1]}</span></div>`;
+    }
+
+    $("select").selectize({render: {option: makeOption, item: makeOption}});    
+});

templates/integrations/add_pushover.html

@@ -24,34 +24,24 @@
         <div class="form-group">
             <label class="col-sm-3 control-label">Priority for "down" events</label>
             <div class="col-sm-8">
-                <select name="po_priority" class="selectpicker form-control">
+                <select name="po_priority" class="form-control">
-                    <option
+                    <option value="-3">
-                        value="-3"
+                        Disabled: Does not notify about Down events.
-                        data-content="Disabled. <span class='help'>Does not notify about Down events.</span>">
-                        Disabled
                     </option>
-                    <option
+                    <option value="-2">
-                        value="-2"
+                        Lowest Priority: Generates no notification on your device.
-                        data-content="Lowest priority. <span class='help'>Generates no notification on your device.</span>">
-                        Lowest Priority
                     </option>
-                    <option
+                    <option value="-1">
-                        value="-1"
+                        Low Priority: Sends a quiet notification.
-                        data-content="Low priority. <span class='help'>Sends a quiet notification.</span>">
-                        Low Priority
                     </option>
                     <option value="0" selected="selected">
-                        Normal Priority
+                        Normal Priority:
                     </option>
-                    <option
+                    <option value="1">
-                        value="1"
+                        High Priority: Bypasses user's quiet hours.
-                        data-content="High priority. <span class='help'>Bypasses user's quiet hours.</span>">
-                        High Priority
                     </option>
-                    <option
+                    <option value="2">
-                        value="2"
+                        Emergency Priority: Repeated every {{po_retry_delay|hc_duration }} for at most {{ po_expiration|hc_duration }} until you acknowledge them.
-                        data-content="Emergency priority. <span class='help'>Repeated every {{po_retry_delay|hc_duration }} for at most {{ po_expiration|hc_duration }} until you acknowledge them.</span>">
-                        Emergency Priority
                     </option>
                 </select>
            </div>
@@ -60,34 +50,24 @@
         <div class="form-group">
             <label class="col-sm-3 control-label">Priority for "up" events</label>
             <div class="col-sm-8">
-                <select name="po_priority_up" class="selectpicker form-control">
+                <select name="po_priority_up" class="form-control">
-                    <option
+                    <option value="-3">
-                        value="-3"
+                        Disabled: Does not notify about Up events.
-                        data-content="Disabled. <span class='help'>Does not notify about Up events.</span>">
-                        Disabled
                     </option>
-                    <option
+                    <option value="-2">
-                        value="-2"
+                        Lowest priority: Generates no notification on your device.
-                        data-content="Lowest priority. <span class='help'>Generates no notification on your device.</span>">
-                        Lowest priority
                     </option>
-                    <option
+                    <option value="-1">
-                        value="-1"
+                        Low priority: Sends a quiet notification.
-                        data-content="Low priority. <span class='help'>Sends a quiet notification.</span>">
-                        Low priority
                     </option>
                     <option value="0" selected="selected">
-                        Normal priority
+                        Normal priority:
                     </option>
-                    <option
+                    <option value="1">
-                        value="1"
+                        High priority: Bypasses user's quiet hours.
-                        data-content="High priority. <span class='help'>Bypasses user's quiet hours.</span>">
-                        High priority
                     </option>
-                    <option
+                    <option value="2">
-                        value="2"
+                        Emergency priority: Repeated every {{po_retry_delay|hc_duration }} for at most {{ po_expiration|hc_duration }} until you acknowledge them.
-                        data-content="Emergency priority. <span class='help'>Repeated every {{po_retry_delay|hc_duration }} for at most {{ po_expiration|hc_duration }} until you acknowledge them.</span>">
-                        Emergency priority
                     </option>
                 </select>
            </div>
@@ -108,6 +88,7 @@
 
 {% block scripts %}
 {% compress js %}
-<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
+<script src="{% static 'js/selectize.min.js' %}"></script>
+<script src="{% static 'js/add_pushover.js' %}"></script>
 {% endcompress %}
 {% endblock %}

templates/integrations/ntfy_form.html

@@ -57,41 +57,24 @@
             <div class="form-group">
                 <label class="col-sm-3 control-label">Priority for "down" events</label>
                 <div class="col-sm-8">
-                    <select name="priority" class="selectpicker form-control">
+                    <select id="priority" name="priority" class="form-control">
-                        <option
+                        <option value="5" {% if form.priority.value == 5 %}selected="selected"{% endif %}>
-                            value="5"
+                            Max priority: Really long vibration bursts, default notification sound with a pop-over notification.
-                            {% if form.priority.value == 5 %}selected="selected"{% endif %}
-                            data-content="Max priority. <span class='help'>Really long vibration bursts, default notification sound with a pop-over notification.</span>">
-                            Max priority
                         </option>
-                        <option
+                        <option value="4" {% if form.priority.value == 4 %}selected="selected"{% endif %}>
-                            value="4"
+                            High priority: Long vibration burst, default notification sound with a pop-over notification.
-                            {% if form.priority.value == 4 %}selected="selected"{% endif %}
-                            data-content="High priority. <span class='help'>Long vibration burst, default notification sound with a pop-over notification.</span>">
-                            High priority
                         </option>
-                        <option value="3"
+                        <option value="3" {% if form.priority.value == 3 %}selected="selected"{% endif %}>
-                            {% if form.priority.value == 3 %}selected="selected"{% endif %}
+                            Default priority: Short default vibration and sound. Default notification behavior.
-                            data-content="Default priority. <span class='help'>Short default vibration and sound. Default notification behavior.</span>">
-                            Default priority
                         </option>
-                        <option
+                        <option value="2" {% if form.priority.value == 2 %}selected="selected"{% endif %}>
-                            value="2"
+                            Low priority: No vibration or sound. Notification will not visibly show up until notification drawer is pulled down.
-                            {% if form.priority.value == 2 %}selected="selected"{% endif %}
-                            data-content="Low priority. <span class='help'>No vibration or sound. Notification will not visibly show up until notification drawer is pulled down.</span>">
-                            Low priority
                         </option>
-                        <option
+                        <option value="1" {% if form.priority.value == 1 %}selected="selected"{% endif %}>
-                            value="1"
+                            Min priority: No vibration or sound. The notification will be under the fold in 'Other notifications'.
-                            {% if form.priority.value == 1 %}selected="selected"{% endif %}
-                            data-content="Min priority. <span class='help'>No vibration or sound. The notification will be under the fold in 'Other notifications'.</span>">
-                            Min priority
                         </option>
-                        <option
+                        <option value="0" {% if form.priority.value == 0 %}selected="selected"{% endif %}>
-                            value="0"
+                            Disabled: Will not notify about Down events.
-                            {% if form.priority.value == 0 %}selected="selected"{% endif %}
-                            data-content="Disabled. <span class='help'>Will not notify about Down events.</span>">
-                            Disabled
                         </option>
                     </select>
                </div>
@@ -100,41 +83,24 @@
             <div class="form-group">
                 <label class="col-sm-3 control-label">Priority for "up" events</label>
                 <div class="col-sm-8">
-                    <select name="priority_up" class="selectpicker form-control">
+                    <select name="priority_up" class="form-control">
-                        <option
+                        <option value="5" {% if form.priority_up.value == 5 %}selected="selected"{% endif %}>
-                            value="5"
+                            Max priority: Really long vibration bursts, default notification sound with a pop-over notification.
-                            {% if form.priority_up.value == 5 %}selected="selected"{% endif %}
-                            data-content="Max priority. <span class='help'>Really long vibration bursts, default notification sound with a pop-over notification.</span>">
-                            Max priority
                         </option>
-                        <option
+                        <option value="4" {% if form.priority_up.value == 4 %}selected="selected"{% endif %}>
-                            value="4"
+                            High priority: Long vibration burst, default notification sound with a pop-over notification.
-                            {% if form.priority_up.value == 4 %}selected="selected"{% endif %}
-                            data-content="High priority. <span class='help'>Long vibration burst, default notification sound with a pop-over notification.</span>">
-                            High priority
                         </option>
-                        <option value="3"
+                        <option value="3" {% if form.priority_up.value == 3 %}selected="selected"{% endif %}>
-                            {% if form.priority_up.value == 3 %}selected="selected"{% endif %}
+                            Default priority: Short default vibration and sound. Default notification behavior.
-                            data-content="Default priority. <span class='help'>Short default vibration and sound. Default notification behavior.</span>">
-                            Default priority
                         </option>
-                        <option
+                        <option value="2" {% if form.priority_up.value == 2 %}selected="selected"{% endif %}>
-                            value="2"
+                            Low priority: No vibration or sound. Notification will not visibly show up until notification drawer is pulled down.
-                            {% if form.priority_up.value == 2 %}selected="selected"{% endif %}
-                            data-content="Low priority. <span class='help'>No vibration or sound. Notification will not visibly show up until notification drawer is pulled down.</span>">
-                            Low priority
                         </option>
-                        <option
+                        <option value="1" {% if form.priority_up.value == 1 %}selected="selected"{% endif %}>
-                            value="1"
+                            Min priority: No vibration or sound. The notification will be under the fold in 'Other notifications'.
-                            {% if form.priority_up.value == 1 %}selected="selected"{% endif %}
-                            data-content="Min priority. <span class='help'>No vibration or sound. The notification will be under the fold in 'Other notifications'.</span>">
-                            Min priority
                         </option>
-                        <option
+                        <option value="0" {% if form.priority_up.value == 0 %}selected="selected"{% endif %}>
-                            value="0"
+                            Disabled: Will not notify about Up events.
-                            {% if form.priority_up.value == 0 %}selected="selected"{% endif %}
-                            data-content="Disabled. <span class='help'>Will not notify about Up events.</span>">
-                            Disabled
                         </option>
                     </select>
                </div>
@@ -152,6 +118,7 @@
 
 {% block scripts %}
 {% compress js %}
-<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
+<script src="{% static 'js/selectize.min.js' %}"></script>
+<script src="{% static 'js/ntfy_form.js' %}"></script>
 {% endcompress %}
 {% endblock %}