-
Notifications
You must be signed in to change notification settings - Fork 0
/
markup.js
107 lines (106 loc) · 7.22 KB
/
markup.js
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
/**
* Markup.js has created for helping to transfer SEBLOD 3.x template to UIKit html
* by Ilya A.Zhulin 2021
* Last edition 30.06.2023
*/
document.addEventListener('DOMContentLoaded', function () {
function replaceTag(element, newTag) {
var elementNew = document.createElement(newTag);
elementNew.innerHTML = element.innerHTML;
Array.prototype.forEach.call(element.attributes, function (attr) {
elementNew.setAttribute(attr.name, attr.value);
});
element.parentNode.insertBefore(elementNew, element);
element.parentNode.removeChild(element);
return elementNew;
}
let observer = new MutationObserver(mutations => {
for (let mutation of mutations) {
// проверим новые узлы, есть ли что-то, что надо подсветить?
for (let node of mutation.addedNodes) {
// отслеживаем только узлы-элементы, другие (текстовые) пропускаем
if (!(node instanceof HTMLElement))
continue;
// проверить, не является ли вставленный элемент примером кода
// console.log(node);
if (node.matches('[class*="cck_form_group_x"]') || node.matches('.ui-sortable > div')) {
const aside = node.querySelector('aside');
if (aside) {
let points = aside.innerHTML.replace(/div/g, 'li');
points = points.replace(/<span/g, '<a href="#" ');
points = points.replace(/<\/span/g, '</a');
aside.outerHTML = '<ul class="uk-float-right uk-iconnav uk-margin-bottom">' + points + '</ul>';
}
let collection_wrap = node.querySelector('.collection-group-wrap:not([uk-grid]');
if (collection_wrap) {
collection_wrap.setAttribute("uk-grid", "");
collection_wrap.querySelector('.collection-group-form').classList.add("uk-width-expand");
// Кнопки
replaceTag(collection_wrap.querySelector('span.icon-minus'), 'a');
replaceTag(collection_wrap.querySelector('span.icon-plus'), 'a');
replaceTag(collection_wrap.querySelector('span.icon-circle'), 'a');
let minus = collection_wrap.querySelector('.collection-group-button').querySelector('.button-del').innerHTML, plus = collection_wrap.querySelector('.collection-group-button').querySelector('.button-add').innerHTML, drag = collection_wrap.querySelector('.collection-group-button').querySelector('.button-drag').innerHTML;
// replaceTag(collection_wrap.querySelector('.collection-group-button'), 'ul');
// console.log(collection_wrap.querySelector('.collection-group-button'));
collection_wrap.querySelector('.collection-group-button').classList.add("uk-iconnav", "uk-width-auto", "uk-padding", "uk-padding-remove-right");
collection_wrap.querySelector('.collection-group-button').innerHTML = '<div>' + minus + '</div><div>' + plus + '</div><div>' + drag + '</div>';
// File Upload
if (collection_wrap.querySelector('input[type="file"]')) {
const new_input = document.createElement('input');
new_input.classList.add("uk-input", "uk-with-1-1")
new_input.setAttribute('type', 'text');
new_input.setAttribute('placeholder', 'Выбрать');
new_input.setAttribute("disabled", "");
new_input.setAttribute("aria-label", "Custom controls");
collection_wrap.querySelector('input[type="file"]').after(new_input);
const input = collection_wrap.querySelector('input[type="file"]').parentElement.innerHTML;
collection_wrap.querySelector('.collection-group-form').innerHTML = '<div uk-grid><div uk-form-custom="target: true" class="uk-width-expand">' + input + '' + '</div></div>';
}
}
node.querySelector('.icon-plus').classList.add("uk-text-success");
node.querySelector('.icon-plus').setAttribute("uk-icon", "icon: plus-circle");
node.querySelector('.icon-plus').setAttribute("onclick", "return false;");
node.querySelector('.icon-minus').classList.add("uk-text-danger");
node.querySelector('.icon-minus').setAttribute("uk-icon", "icon: minus-circle");
node.querySelector('.icon-minus').setAttribute("onclick", "return false;");
node.querySelector('.icon-circle').classList.add("uk-text-primary", "ui-sortable-handle", "button-drag");
node.querySelector('.icon-circle').setAttribute("uk-icon", "icon: move");
node.querySelector('.icon-circle').setAttribute("onclick", "return false;");
node.querySelector('.icon-circle').setAttribute("style", "cursor:grab;");
node.classList.add("uk-clearfix");
node.classList.add("uk-margin");
let wrapform = node.querySelector('.cck_cgx.cck_cgx_form:not(.uk-width-1-1)');
if (wrapform) {
wrapform.classList.add("uk-width-1-1");
wrapform.querySelectorAll('.cck_forms.cck_site').forEach((wrapfield) => {
let FirstChild = wrapfield.firstElementChild;
FirstChild.outerHTML = FirstChild.innerHTML;
});
} // Элементы форм
var fields = new Map([
['input[type=text]', 'uk-input'],
['select', 'uk-select'],
['textarea', 'uk-textarea']
]);
fields.forEach(function (key, value) {
node.querySelectorAll(value).forEach((el) => {
el.classList.add(key);
if (el.parentNode && el.parentNode.nodeName == 'DIV' && el.parentNode.previousElementSibling && el.parentNode.previousElementSibling.nodeName == 'LABEL') {
el.parentNode.classList.add("uk-form-controls");
}
});
})
// Labels
node.querySelectorAll('label:not(.uk-form-label)').forEach((el) => {
el.classList.add('uk-form-label');
});
}
}
}
});
observer.observe(document.documentElement, {
childList: true, // наблюдать за непосредственными детьми
subtree: true, // и более глубокими потомками
characterDataOldValue: false // передавать старое значение в колбэк
});
});