mirror of
https://github.com/caronc/apprise-api.git
synced 2024-12-14 02:41:38 +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;
|
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;
|
return response;
|
||||||
}
|
}
|
||||||
// if we reach here, we failed
|
// 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
|
// over-ride manual submit for a nicer user experience
|
||||||
document.querySelector('#donotify').onsubmit = function(event) {
|
document.querySelector('#donotify').onsubmit = function(event) {
|
||||||
event.preventDefault();
|
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 form = this;
|
||||||
const body = new URLSearchParams(new FormData(form));
|
const body = new URLSearchParams(new FormData(form));
|
||||||
|
|
||||||
@ -223,3 +296,20 @@ document.querySelector('#donotify').onsubmit = function(event) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
{% endblock %}
|
{% 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