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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
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'),
picker = form.getElementsByTagName('fieldset')['color-picker'],
fname = form.getElementsByTagName('input')['id_name'];
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, picker, fname, window.url);
}, false);
}
function initNotebookCreator(btn, title, url) {
var notebook_form = document.querySelector('#nb-create-form');
var notebook_form_inputs = notebook_form.getElementsByTagName('input');
var picker = notebook_form.getElementsByTagName('fieldset')['color-picker'];
picker.popup = new Picker({
parent: picker,
color: 'blue',
alpha: false,
//editor: false,
editorFormat: 'hex',
onDone: function(color) {
this.settings['parent'].style.backgroundColor = color.rgbString;
notebook_form_inputs['color_rgb'].value = color.rgbString;
},
});
var forms = [];
var btns = [];
var notebooks = document.getElementsByClassName('nb-list-item');
window.bookediting = false;
for (var i = 0; i < notebooks.length; i++) {
var fname = notebooks[i].getElementsByTagName('input')['id_form-'+i+'-name'];
fname.parentNode.classList.add('hide');
notebooks[i].getElementsByTagName('input')['i-'+i].classList.add('hide');
forms[i] = notebooks[i].getElementsByTagName('form')[0];
forms[i].getElementsByTagName('input')['color_rgb'].disabled = true;
forms[i].addEventListener('input', function () {
window.formchange = true;
console.log('adding change');
});
btns[i] = notebooks[i].getElementsByTagName('a')['edit-toggle-btn-'+i];
btns[i].addEventListener('click', myFunc, false);
btns[i].t = notebooks[i].getElementsByTagName('h2')[0];
btns[i].picker = notebooks[i].getElementsByTagName('fieldset')['color-picker-'+i];
btns[i].fname = fname;
btns[i].form = forms[i];
btns[i].url = forms[i]['action'];
function myFunc(e) {
e.preventDefault();
edit_notebook(e.target, e.target.t, e.target.form, e.target.picker, e.target.fname, e.target.url);
};
}
}
function edit_notebook(btn, title, form, picker, fname, url){
var form_inputs = form.getElementsByTagName('input');
console.log(picker);
if (window.bookediting === false) {
picker.popup= new Picker({
parent: picker,
color: 'blue',
alpha: false,
//editor: false,
editorFormat: 'hex',
onDone: function(color) {
this.settings['parent'].style.backgroundColor = color.rgbString;
form_inputs['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 = form_inputs['color_rgb'].value;
} else {
if (window.titlecontents !== title.innerHTML || window.colorcontent !== form_inputs['color_rgb'].value || window.formchange) {
console.log('changed');
console.log(form_inputs);
fname.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();
}
if (typeof(document.getElementById('nb-create-form')) != 'undefined' && document.getElementById('nb-create-form') != null && document.getElementById('note-edit-form') === null) {
initNotebookCreator();
}
|
