mirror of
https://github.com/caronc/apprise-api.git
synced 2024-12-12 18:00:51 +01:00
Materialize Chips used in place of Notification Tags (#7)
This commit is contained in:
parent
96dcaf7758
commit
2185737911
@ -113,6 +113,35 @@ async function update() {
|
||||
document.querySelector('#id_config').value = text;
|
||||
});
|
||||
|
||||
// perform a tag retrieval; start with 'all'
|
||||
let tags = ['all'];
|
||||
|
||||
let jsonResponse = fetch('{% url "json_urls" key %}', {
|
||||
method: 'GET',
|
||||
}).then(function(jsonResponse) {
|
||||
return jsonResponse.json();
|
||||
|
||||
}).then(function (data) {
|
||||
// Initialize our tags making it easy for an end user to
|
||||
// choose from. Tags are based off ones found in the saved
|
||||
// configuration.
|
||||
M.Chips.init(document.querySelectorAll('.chips'), {
|
||||
placeholder: 'Optional Tag',
|
||||
secondaryPlaceholder: 'Another Tag',
|
||||
autocompleteOptions: {
|
||||
data: tags.concat(data.tags).reduce(function(result, item) {
|
||||
result[item] = null;
|
||||
return result;
|
||||
}, {}),
|
||||
limit: Infinity,
|
||||
minLength: 1
|
||||
}
|
||||
});
|
||||
|
||||
}).catch(function (err) {
|
||||
// There was an error
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
// if we reach here, we failed
|
||||
@ -194,6 +223,50 @@ document.querySelector('#addconfig').onsubmit = function(event) {
|
||||
// over-ride manual submit for a nicer user experience
|
||||
document.querySelector('#donotify').onsubmit = function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const chipElement = document.querySelector('.chips');
|
||||
|
||||
chipElement.querySelector('.chips');
|
||||
const chipInput = document.querySelector('.chips > input');
|
||||
if(chipInput.value) {
|
||||
// This code just handles text typed in the tag section that was
|
||||
// not submitted. This forces any lingering un-commited text
|
||||
// into a tag just prior to it's submission
|
||||
const ev = new KeyboardEvent('keydown', {
|
||||
altKey:false,
|
||||
bubbles: true,
|
||||
cancelBubble: false,
|
||||
cancelable: true,
|
||||
charCode: 0,
|
||||
code: "Enter",
|
||||
composed: true,
|
||||
ctrlKey: false,
|
||||
currentTarget: null,
|
||||
defaultPrevented: true,
|
||||
detail: 0,
|
||||
eventPhase: 0,
|
||||
isComposing: false,
|
||||
isTrusted: true,
|
||||
key: "Enter",
|
||||
keyCode: 13,
|
||||
location: 0,
|
||||
metaKey: false,
|
||||
repeat: false,
|
||||
returnValue: false,
|
||||
shiftKey: false,
|
||||
type: "keydown",
|
||||
which: 13
|
||||
});
|
||||
chipInput.dispatchEvent(ev);
|
||||
}
|
||||
|
||||
// store tags (as comma separated string) from materialize chip type into form
|
||||
document.querySelector('#id_tag').value = M.Chips.getInstance(chipElement).chipsData.reduce(
|
||||
function(s, a){
|
||||
s.push(a.tag)
|
||||
return s;
|
||||
}, []).join(",")
|
||||
|
||||
const form = this;
|
||||
const body = new URLSearchParams(new FormData(form));
|
||||
|
||||
@ -223,3 +296,20 @@ document.querySelector('#donotify').onsubmit = function(event) {
|
||||
}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block onload %}
|
||||
{{ block.super }}
|
||||
document.querySelector('label [for="id_tag"]')
|
||||
|
||||
{
|
||||
// create a new div with the class 'chips' assigned to it
|
||||
const element = document.createElement('div')
|
||||
let refNode = document.querySelector('label[for="id_tag"]')
|
||||
element.classList.add("chips")
|
||||
element.style.margin = '0'
|
||||
refNode.parentNode.insertBefore(element, refNode.nextSibling)
|
||||
}
|
||||
|
||||
// Hide tag field since we use the pretty Materialize Chip setup instead
|
||||
document.querySelector('#id_tag').style.display = 'none';
|
||||
{% endblock %}
|
||||
|
Loading…
Reference in New Issue
Block a user