1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
const picker = document.getElementById('color-picker');
function disablePicker(e) {
console.log(e.target.popup);
}
function initNotebookEditor() {
var btn = document.getElementById('edit-toggle-btn'),
title = document.getElementById('nb-title'),
form = document.getElementById('nb-edit-form');
window.bookediting = false;
form.getElementsByTagName('input')['color_rgb'].disabled = true;
form.addEventListener('input', function () {
window.formchange = true;
console.log("adding change");
});
document.getElementById('btn-js-hide').classList.add('hide');
btn.classList.remove('hide');
btn.addEventListener('click', function(e){
e.preventDefault();
edit_notebook(this, title, form, window.url);
}, false);
}
function edit_notebook(btn, title, form, url){
var form_inputs = form.getElementsByTagName('input');
if (window.bookediting === false) {
picker.popup= new Picker({
parent: picker,
color: 'blue',
alpha: false,
//editor: false,
editorFormat: 'hex',
onDone: function(color) {
picker.style.backgroundColor = color.rgbString;
document.getElementById('id_color_rgb').value = color.rgbString;
},
});
title.setAttribute('contenteditable', true);
title.classList.add('highlight');
form_inputs['color_rgb'].disabled = false;
btn.innerHTML = 'Save';
btn.classList.add('save');
window.bookediting = true;
window.titlecontents = title.innerHTML;
window.colorcontent = document.getElementById('id_color_rgb').value
} else {
if (window.titlecontents !== title.innerHTML || window.colorcontent !== document.getElementById('id_color_rgb').value || window.formchange) {
console.log("changed");
form_inputs['name'].value = title.innerHTML;
//const data = formToJSON(form.elements);
//console.log(JSON.stringify(data, null, ' '));
var request = new XMLHttpRequest();
request.open('PATCH', url);
var csrftoken = Cookies.get('csrftoken');
request.setRequestHeader('X-CSRFToken', csrftoken);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
console.log(request);
} else {
console.log(request);
console.log('server error');
}
};
request.onerror = function() {
console.log('error on request');
};
request.send(new FormData(form));
}
title.setAttribute('contenteditable', false);
title.classList.remove('highlight');
btn.innerHTML = 'Edit';
btn.classList.remove('save');
form_inputs['color_rgb'].disabled = true;
document.body.focus();
window.bookediting = false;
picker.popup = null;
}
return false;
}
if (typeof(document.getElementById('nb-edit-form')) != "undefined" && document.getElementById('nb-edit-form') != null) {
initNotebookEditor();
}
|
