https://socialsuite.ai/assets/helpers/contentbuilder-23e4872dc8de0…6c648ac68fd6552dc1ecf7800318d73d51862b92.js

1import {openModal, closeModal} from "helpers/toggle_modal"
2
3export const addSortable = function(element) {
4    const builder = _cb
5    const dom = builder.dom
6    const util = builder.util
7    let activeBuilderArea
8
9    _cb.Sortable.create(element, {
10        group: {
11            name: "shared",
12            pull: "clone",
13            put: false
14        },
15        draggable: ".snippet-item",
16        sort: false,
17        animation: 150,
18        onChoose: () => {
19            const newCss = `<style id="css-scale">
20                    .sortable-ghost {
21                        border-color: rgb(148 163 184);
22                    }
23                    .sortable-ghost * {}
24                    .sortable-drag {
25                       background: transparent !important;
26                       border: none !important;
27                    }                    
28                </style>`
29            const oldCss = builder.builderStuff.querySelector("#css-scale")
30            oldCss && oldCss.parentNode.removeChild(oldCss)
31            builder.builderStuff.insertAdjacentHTML("afterbegin", newCss)
32            builder.sectionDropSetup()
33        },
34        onMove: element => {
35            let emptyinfo = builder.doc.querySelector(".row-add-initial")
36            emptyinfo && (emptyinfo.style.display = "none")
37
38            if(builder.sortableOnPage && (element.related.getBoundingClientRect().top < 0 || element.related.getBoundingClientRect().top > window.innerHeight)) return false
39        },
40
41        onStart: (event) => {
42            closeSnippetModal()
43
44            const item = event.item
45            item.dataset.html = JSON.parse(item.dataset.html)
46            builder.snippetJSON = { snippets: [ item.dataset  ] }
47            activeBuilderArea = null;
48            const area = builder.doc.querySelector(".builder-active");
49            if (area) {
50                activeBuilderArea = area;
51                dom.removeClass(activeBuilderArea, "builder-active")
52            }
53
54            builder.uo.saveForUndo();
55
56            let sidebar = document.querySelector(".is-sidebar-overlay");
57            sidebar && (sidebar.style.display = "none")
58        }, onEnd: () => {
59            let sidebar = document.querySelector(".is-sidebar-overlay");
60            sidebar && (sidebar.style.display = "block");
61            util.checkEmpty();
62
63            let emptyinfo = builder.doc.querySelector(".row-add-initial");
64            emptyinfo && (emptyinfo.style.display = "");
65
66            activeBuilderArea && dom.addClass(activeBuilderArea, "builder-active");
67            builder.sortableOnPage && builder.sortableOnPage.destroy()
68        }
69    })
70}
71
72export const rewriteQuickAdd = function() {
73    const quickadd = _cb.builderStuff.querySelector(".quickadd")
74    if(!quickadd.classList.contains("js-rewritten")) {
75        quickadd.classList.add("js-rewritten")
76
77        const buttonKeys = ["paragraph", "headline", "image", "list", "heading1",
78            "heading2", "heading3", "heading4", "quote", "preformatted",
79            "button", "twobutton", "youtube", "video", "audio", "map",
80            "table", "icon", "social", "code", "spacer", "line"]
81        const buttonsToRemove = ["icon", "code"]
82
83        buttonsToRemove.forEach(buttonKey => quickadd.querySelector(`.add-${buttonKey}`).remove())
84
85        buttonKeys.forEach((buttonKey) => {
86            let snippet = document.querySelector(`.snippet-item[data-id="${buttonKey}"]`)
87            if (snippet) {
88                let button = _replaceContent(quickadd, `.add-${buttonKey}`)
89                button.dataset.html = snippet.dataset.html
90                _cb.dom.addEventListener(button, "click", function (event) {
91                    let button = event.currentTarget
92                    addContent(button)
93                })
94            }
95        })
96
97        let buttonAddMore = _replaceContent(quickadd, `.add-more`)
98
99        _cb.dom.addEventListener(buttonAddMore, "click", function (event) {
100            openSnippetModal("basic")
101        })
102    }
103}
104
105const resetActiveElementAndMode = function() {
106    _cb.lastActiveElement = null
107    _cb.activeElement = null
108    setMode(null)
109}
110
111const setMode = function(mode) {
112    _cb.builderStuff.querySelector(".quickadd").setAttribute('data-mode', mode)
113}
114
115const getMode = function() {
116    return _cb.builderStuff.querySelector(".quickadd").getAttribute('data-mode')
117}
118
119const setActiveElementAndMode = function() {
120    if(document.body.contains(_cb.activeElement)) { _cb.activeElement.click() }
121    else {
122        _cb.activeElement = null
123        if(document.body.contains(_cb.lastActiveElement)) { _cb.lastActiveElement.click() }
124        else { _cb.lastActiveElement = null }
125    }
126    if(!_cb.activeElement) {
127        const initialRow = _cb.doc.querySelector('.row-add-initial');
128        if(initialRow) { initialRow.click() }
129        setMode("row")
130    }
131
132    if(getMode() === "null") { setMode("row") }
133
134    _cb.lastActiveElement = null
135}
136
137export const addContent = function(item) {
138    let html = JSON.parse(item.dataset.html)
139
140    setActiveElementAndMode()
141
142    const quickadd = _cb.builderStuff.querySelector('.quickadd')
143    let mode = quickadd.getAttribute('data-mode')
144
145    if(mode == "elm") {
146        _cb.util.addContent(html, mode)
147    }   else {
148        const noedit = false
149        let bSnippet
150        if (html.indexOf('"row') === -1) {

151            bSnippet = true // Just snippet (without row/column grid)
152        } else {
153            bSnippet = false // Snippet is wrapped in row/colum
154        }
155
156        if(bSnippet) {
157            if(!mode) {
158                html = `<div class="row"><div class="column full">${html}</div></div>`
159                bSnippet = false
160            }
161        }
162
163        const rowClass = _cb.opts.row
164        const colClass = _cb.opts.cols
165        if(rowClass !== '' && colClass.length === 12) {
166            html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
167            html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
168            html = html.replace(new RegExp('column full', 'g'), colClass[11]);
169            html = html.replace(new RegExp('column half', 'g'), colClass[5]);
170            html = html.replace(new RegExp('column third', 'g'), colClass[3]);
171            html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
172            html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
173            html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
174            html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
175            html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
176            html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
177            html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
178        }
179
180        html = html.replace(/{id}/g, _makeid()) // Replace {id} with auto generated id (for custom code snippet)
181
182        if(_cb.opts.onAdd){
183            html = _cb.opts.onAdd(html)
184        }
185
186        _cb.addSnippet(html, bSnippet, noedit)
187
188    }
189    closeSnippetModal()
190}
191
192export const openSnippetModal = function(category) {
193    _cb.lastActiveElement = _cb.activeElement
194
195    if(category) {
196        const categoryButton = document.querySelector(`#snippetsModal button[data-value="${category}"]`)
197        if(categoryButton) categoryButton.click()
198    }
199    openModal("snippetsModal")
200}
201
202const closeSnippetModal = function() {
203    resetActiveElementAndMode()
204    closeModal("snippetsModal")
205}
206
207export const overrideCBviewSnippets = function() {
208    _cb.viewSnippets = function() { openSnippetModal("basic") }
209    _cb.rte.viewSnippets = function() {}
210}
211
212const _replaceContent = function(doc, selector) {
213    let element = doc.querySelector(selector)
214    element.insertAdjacentHTML("afterend", element.outerHTML)
215    element.remove()
216    return doc.querySelector(selector)
217}
218
219const _makeid = function() {
220    let text = ''
221    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
222    for (let i = 0; i < 2; i++)
223        text += possible.charAt(Math.floor(Math.random() * possible.length))
224
225    let text2 = ''
226    let possible2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
227    for (let i = 0; i < 5; i++)
228        text2 += possible2.charAt(Math.floor(Math.random() * possible2.length))
229
230    return text + text2
231};