https://www.globus-hebetechnik.de/plugins/dzm_opc_inheriter/fronte…opc_inheriter.main.js?v=7.15.1&t=1790108159

1
2
3class Inheriter{
4    constructor(pageKey,callbackUrl,uuid,returnUrl,editmode,token) {
5        this.pageKey = pageKey
6        this.callbackUrl = callbackUrl
7        this.uuid = uuid
8        this.returnUrl = returnUrl
9        this.editmode = editmode;
10        this.token = token
11
12
13
14        this.rootAreas = []
15        this.selectors={
16            rootArea: '.opc-rootarea',
17            subArea: '.opc-area',
18            portlet:':scope > [data-portlet]'
19
20
21        }
22    }
23    editChild(){
24
25        const savebuttondiv = window.parent.document.getElementById('savePublishButtons')
26        let btnClone = document.getElementById('btnClone');
27        let btnBlueprint = document.getElementById('btnBlueprint');
28        let btnParent = document.getElementById('btnParent');
29        let portlets = document.querySelectorAll('[data-portlet]')
30
31        portlets.forEach(p=>{
32            if(p.className.includes('dzm-master') || p.className.includes('dzm-parent')|| p.className.includes('dzm-child')|| p.className.includes('dzm-touched')){
33                p.addEventListener('click',()=>{
34                    console.log('master clicked')
35                    btnClone.disabled = true
36                    btnClone.style.color = '#00000033'
37                    btnParent.disabled = true
38                    btnParent.style.color = '#00000033'
39                    btnBlueprint.disabled = true
40                    btnBlueprint.style.color = '#00000033'
41                })
42
43            }else{
44                p.addEventListener('click',()=>{
45                    console.log('no master clicked')
46                    btnClone.disabled = false
47                    btnClone.style.color = 'unset'
48                    btnParent.disabled = false
49                    btnParent.style.color = 'unset'
50                    btnBlueprint.disabled = false
51                    btnBlueprint.style.color = 'unset'
52                })
53            }
54        })
55
56
57
58        let head = document.getElementsByTagName('head')[0]
59        let style = document.createElement('style')
60        style.innerHTML = `
61            [data-portlet][class*="dzm-master"] {
62               border: unset !important;
63                margin: unset !important;
64                /*pointer-events:none;*/
65                opacity: 0.5
66            }
67            [data-portlet][class*="dzm-master"] .opc-droptarget{
68                display:none;
69            }
70            `;
71        head.appendChild(style)
72
73    }
74    edit(templateType){
75
76
77        //console.log(window)
78        //console.log(window.top)
79        //console.log(window.parent)
80        if(this.editmode){
81
82            localStorage.removeItem('editMaster')
83
84
85            let body = document.querySelector('body')
86            body.dataset.inheriter = 'e'
87            let beforeFooter = document.querySelector("[data-area-id=\"dzmopcplus_before_footer\"]")
88            let afterFooter = document.querySelector("[data-area-id=\"dzmopcplus_after_footer\"]")
89            let beforeTopbar = document.querySelector("[data-area-id=\"dzmopcplus_before_topbar\"]")
90            let afterTopbar = document.querySelector("[data-area-id=\"dzmopcplus_after_topbar\"]")
91            let beforeInheriterFooter = document.querySelector("[data-area-id=\"dzmopcin

91heriter_before_footer\"]")
92            let afterInheriterFooter = document.querySelector("[data-area-id=\"dzmopcinheriter_after_footer\"]")
93            switch (templateType){
94                case 'product':
95                    body.innerHTML = document.getElementById('main-wrapper').outerHTML
96                    break;
97                case 'category':
98                    body.innerHTML = document.getElementById('main-wrapper').outerHTML
99                    break;
100                case 'page':
101                    body.innerHTML = document.getElementById('main-wrapper').outerHTML
102                    break;
103
104                case 'header':
105                    document.getElementById('main-wrapper').remove()
106                    document.getElementById('footer').remove()
107
108                    if(beforeFooter){
109                        beforeFooter.remove()
110                    }
111                    if(afterFooter){
112                        afterFooter.remove()
113                    }
114                    if(beforeInheriterFooter){
115                        //beforeInheriterFooter.remove()
116                    }
117                    if(afterInheriterFooter){
118                        //afterInheriterFooter.remove()
119                    }
120                    break;
121                case 'footer':
122                    document.getElementById('main-wrapper').remove()
123                    document.getElementsByTagName('header')[0].remove()
124                    if(beforeTopbar){
125                        beforeTopbar.remove()
126                    }
127                    if(afterTopbar){
128                        afterTopbar.remove()
129                    }
130                    /*let upperFooter = ''
131                    let lowerFooter = ''
132                    let upperInheriterFooter = ''
133                    let lowerInheriterFooter = ''
134                    if(beforeFooter){
135                        upperFooter = beforeFooter.outerHTML
136                    }
137                    if(afterFooter){
138                        lowerFooter = afterFooter.outerHTML
139                    }
140
141                    if(beforeInheriterFooter){
142                        upperInheriterFooter = beforeInheriterFooter.outerHTML
143                    }
144                    if(afterInheriterFooter){
145                        lowerInheriterFooter = afterInheriterFooter.outerHTML
146                    }
147
148                    let mainFooter = document.getElementById('footer').outerHTML
149                    body.innerHTML = upperFooter + upperInheriterFooter + lowerFooter + lowerInheriterFooter + mainFooter*/
150
151                    break;
152                default:
153                    console.error('unknown type',type)
154                    break;
155
156            }
157
158
159            const button = window.parent.document.querySelector('.opc-btn-primary')
160            button.remove()
161
162
163
164            const savebuttondiv = window.parent.document.getElementById('savePublishButtons')
165            const savebutton = savebuttondiv.getElementsByClassName('opc-btn-secondary')[0]
166
167            savebutton.textContent = 'Master-Template speichern'
168            savebutton.setAttribute('style','background:#9538F1!important;width:100%!important;color:white;border:none!important;')
169
170            let head = document.getElementsByTagName('head')[0]
171            let style = document.createElement('style')
172            style.innerHTML = `
173            [data-portlet][class*="dzm-master"] {
174                   border: 2px solid #9538F1!important;
175
176            }
177            `;
178            head.appendChild(style)
179
180
181
182
183        }
184
185
186
187
188
189
190
191
192    }
193    async save(){
194        console.log('Speichere Master')
195
196        let areas = {}
197
198        this.rootAreas = document.querySelectorAll(this.selectors.rootArea)
199
200        this.rootAreas.forEach(area=>{
201
202
203            areas[area.dataset.areaId] = {
204                id: area.dataset.areaId,
205                content:[]
206            }
207            let portlets = area.querySelectorAll(this.selectors.portlet)
208            portlets.forEach(portlet=>{
209
210                let portletData = JSON.parse(portlet.dataset.portlet)
211                if(!portletData.properties)
212                    portletData.properties = {}
213                if(!portletData.properties['custom-class'])
214                    portletData.properties['custom-class'] = 'dzm-major-'+this.uuid+'-'+this.uid()
215                if(portletData.properties['custom-class'].includes('dzm-major')){
216                    //const regex = /dzm-major-[a-z0-9]*-[a-z0-9]*/i;
217                    //portletData.properties['custom-class'] = portletData.properties['custom-class'].replace(regex, 'dzm-major-'+this.uuid+'-'+this.uid());
218                }else{
219                    portletData.properties['custom-class'] +=' dzm-major-'+this.uuid+'-'+this.uid()
220
221                }
222

223                portletData.subareas = this.getSubAreas(portlet)
224
225                areas[area.dataset.areaId].content.push(portletData)
226            })
227        })
228
229        const body = {
230            pageKey:this.pageKey,
231            areas:areas,
232            uuid:this.uuid,
233            jtlToken:this.token
234        }
235        console.log('body',body)
236        let res = await fetch(decodeURIComponent(this.callbackUrl),
237            {
238                method:'POST',
239                headers:{
240                    'Content-Type':'application/json'
241                },
242                body:JSON.stringify(body)
243            })
244        let response = await res.json()
245        if(response.status === 'success'){
246            localStorage.removeItem('opcpage.'+this.pageKey)
247            console.log('success')
248            window.parent.location.href = this.returnUrl
249
250        }else{
251            console.error('sux',response)
252        }
253
254    }
255
256    getSubAreas(portlet){
257        let areas;
258
259        let subRootArea = portlet.querySelector(this.selectors.subArea)
260
261
262
263        if(subRootArea){
264            areas={}
265
266
267            areas[subRootArea.dataset.areaId] = {
268                id:subRootArea.dataset.areaId,
269                content:[]
270            }
271            let subPortlets = subRootArea.querySelectorAll(this.selectors.portlet)
272
273            subPortlets.forEach(subPortlet=>{
274
275                let subPortletData = JSON.parse(subPortlet.dataset.portlet)
276
277                if(!subPortletData.properties)
278                    subPortletData.properties = {}
279                if(!subPortletData.properties['custom-class'])
280                    subPortletData.properties['custom-class'] = 'dzm-major-'+this.uuid+'-'+this.uid()
281                if(subPortletData.properties['custom-class'].includes('dzm-major')){
282                    //const regex = /dzm-major-[a-z0-9]*-[a-z0-9]*/i;
283                    //subPortletData.properties['custom-class'] = subPortletData.properties['custom-class'].replace(regex, 'dzm-major-'+this.uuid+'-'+this.uid());
284                }else{
285                    subPortletData.properties['custom-class'] +=' dzm-major-'+this.uuid+'-'+this.uid()
286
287                }
288
289                subPortletData.subareas = this.getSubAreas(subPortlet)
290
291                areas[subRootArea.dataset.areaId].content.push(subPortletData)
292            })
293
294        }else{
295            areas = []
296        }
297
298        // [] oder {dzm-section:{...}}
299        return areas
300
301    }
302
303    uid(){
304        let dt = new Date().getTime();
305        let uid = 'xxxxxyxx'.replace(/[xy]/g, function(c) {
306            let r = (dt + Math.random()*16)%16 | 0;
307            dt = Math.floor(dt/16);
308            return (c==='x' ? r :(r&0x3|0x8)).toString(16);
309        });
310        return uid;
311    }
312}
313document.addEventListener('DOMContentLoaded',()=>{
314    let params = (new URL(window.parent.location)).searchParams
315
316    if(params.get('dzmedit')){
317        let inheriter = new Inheriter(params.get('pageKey'),params.get('callbackUrl'),params.get('uuid'),params.get('returnUrl'),params.get('dzmedit'), params.get('token'))
318
319        inheriter.edit(params.get('dzmEditType'))
320    }else if(window.parent.location.pathname.includes('admin/onpagecomposer')){
321        setTimeout(()=>{
322            let inheriter = new Inheriter('','','','','','')
323
324            inheriter.editChild()
325        },1000)
326
327    }
328
329
330})
331
332
333
334