Fix most common script problems pt1

Web/Presenters/templates/@layout.xml

@@ -433,7 +433,7 @@
             //]]>
         </script>
 
-        <script>
+        <script id='_js_ep_script'>
             window.openvk = {
                 "audio_genres": {\openvk\Web\Models\Entities\Audio::genres},
                 "at_search": {$atSearch ?? false},

Web/Presenters/templates/User/View.xml

@@ -165,33 +165,10 @@
                     </form>
                 {/if}
 
-                <a class="profile_link" style="display:block;width:96%;" href="javascript:reportUser()">{_report}</a>
+                <a class="profile_link" style="display:block;width:96%;" href="javascript:reportUser({$user->getId()})">{_report}</a>
                 <a n:if="!$user->isHideFromGlobalFeedEnabled()" class="profile_link" style="display:block;width:96%;" id="__ignoreSomeone" data-val='{!$ignore_status ? 1 : 0}' data-id="{$user->getId()}">
                     {if !$ignore_status}{_ignore_user}{else}{_unignore_user}{/if}
                 </a>
-                <script>
-                    function reportUser() {
-                        uReportMsgTxt  = tr("going_to_report_user");
-                        uReportMsgTxt += "<br/>"+tr("report_question_text");
-                        uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
-
-                        MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
-                            (function() {
-                                res = document.querySelector("#uReportMsgInput").value;
-                                xhr = new XMLHttpRequest();
-                                xhr.open("GET", "/report/" + {$user->getId()} + "?reason=" + res + "&type=user", true);
-                                xhr.onload = (function() {
-                                    if(xhr.responseText.indexOf("reason") === -1)
-                                        MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
-                                    else
-                                        MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
-                                });
-                                xhr.send(null);
-                            }),
-                            Function.noop
-                        ]);
-                    }
-                </script>
             {/if}
             <a style="width: 194px;" n:if="$user->getFollowersCount() > 0" href="/friends{$user->getId()}?act=incoming" class="profile_link">{tr("followers", $user->getFollowersCount())}</a>
         </div>
@@ -760,51 +737,6 @@
                 }
             {/if}
         </script>
-
-        <script n:if="isset($thisUser) && $user->getId() == $thisUser->getId()" n:syntax="off">
-            function setStatusEditorShown(shown) {
-                document.getElementById("status_editor").style.display = shown ? "block" : "none";
-            }
-
-            document.addEventListener("click", event => {
-                if(!event.target.closest("#status_editor") && !event.target.closest("#page_status_text"))
-                    setStatusEditorShown(false);
-            });
-
-            document.getElementById("page_status_text").onclick = setStatusEditorShown.bind(this, true);
-
-            async function changeStatus() {
-                const status = document.status_popup_form.status.value;
-                const broadcast = document.status_popup_form.broadcast.checked;
-
-                document.status_popup_form.submit.innerHTML = "<div class=\"button-loading\"></div>";
-                document.status_popup_form.submit.disabled = true;
-
-                const formData = new FormData();
-                formData.append("status", status);
-                formData.append("broadcast", Number(broadcast));
-                formData.append("hash", document.status_popup_form.hash.value);
-                const response = await ky.post("/edit?act=status", {body: formData});
-
-                if(!parseAjaxResponse(await response.text())) {
-                    document.status_popup_form.submit.innerHTML = tr("send");
-                    document.status_popup_form.submit.disabled = false;
-                    return;
-                }
-
-                if(document.status_popup_form.status.value === "") {
-                    document.querySelector("#page_status_text").innerHTML = `[ ${tr("change_status")} ]`;
-                    document.querySelector("#page_status_text").className = "edit_link page_status_edit_button";
-                } else {
-                    document.querySelector("#page_status_text").innerHTML = status;
-                    document.querySelector("#page_status_text").className = "page_status page_status_edit_button";
-                }
-
-                setStatusEditorShown(false);
-                document.status_popup_form.submit.innerHTML = tr("send");
-                document.status_popup_form.submit.disabled = false;
-            }
-        </script>
     </div>
     
     {/if}

Web/Presenters/templates/components/textArea.xml

@@ -54,11 +54,11 @@
                     <input type="checkbox" name="as_group" /> {_comment_as_group}
                 </label>
             </div>
-            <input type="hidden" name="horizontal_attachments" value="" />
+            <input type="hidden" name="horizontal_attachments" value="" autocomplete="off" />
-            <input type="hidden" name="vertical_attachments" value="" />
+            <input type="hidden" name="vertical_attachments" value="" autocomplete="off" />
-            <input type="hidden" name="poll" value="none" />
+            <input type="hidden" name="poll" value="none" autocomplete="off" />
-            <input type="hidden" id="source" name="source" value="none" />
+            <input type="hidden" id="source" name="source" value="none" autocomplete="off" />
-            <input type="hidden" name="type" value="1" />
+            <input type="hidden" name="type" value="1" autocomplete="off" />
             <input type="hidden" name="hash" value="{$csrfToken}" />
             <br/>
             <input type="submit" value="{_write}" class="button" />
@@ -105,11 +105,6 @@
     </form>
 </div>
 
-<script>
-    u("#post-buttons{$textAreaId} input[name='horizontal_attachments']")["nodes"].at(0).value = ""
-    u("#post-buttons{$textAreaId} input[name='vertical_attachments']")["nodes"].at(0).value = ""
-</script>
-
 {if $graffiti}
     {script "js/node_modules/react/dist/react-with-addons.min.js"}
     {script "js/node_modules/react-dom/dist/react-dom.min.js"}

Web/static/js/al_music.js

@@ -621,7 +621,7 @@ u(document).on('keydown', (e) => {
         return
     }
 
-    if(!window.player) {
+    if(!window.player || !window.player.isAtAudiosPage()) {
         return
     }
 
@@ -1485,6 +1485,8 @@ $(document).on("click", ".musicIcon.report-icon", (e) => {
 
 u(document).on("click", ".audiosContainer .paginator a", (e) => {
     e.preventDefault()
+    e.stopPropagation()
+    
     let url = new URL(e.currentTarget.href)
     let page = url.searchParams.get("p")
 

Web/static/js/al_suggestions.js

@@ -161,6 +161,7 @@ function loadMoreSuggestedPosts() {
 // нажатие на "x предложенных записей"
 $(document).on("click", ".sugglist a", (e) => {
     e.preventDefault()
+    e.stopPropagation()
     
     if(e.currentTarget.getAttribute("data-toogled") == null || e.currentTarget.getAttribute("data-toogled") == "false") {
         e.currentTarget.setAttribute("data-toogled", "true")

Web/static/js/al_wall.js

@@ -91,6 +91,7 @@ async function OpenMiniature(e, photo, post, photo_id, type = "post") {
     костыли но смешные однако
     */
     e.preventDefault();
+    e.stopPropagation()
 
     // Значения для переключения фоток
 
@@ -449,6 +450,7 @@ async function OpenVideo(video_arr = [], init_player = true)
 
 u(document).on('click', '#videoOpen', (e) => {
     e.preventDefault()
+    e.stopPropagation()
 
     try {
         const target = e.target.closest('#videoOpen')
@@ -515,6 +517,28 @@ function reportVideo(video_id) {
     ]);
 }
 
+function reportUser(user_id) {
+    uReportMsgTxt  = tr("going_to_report_user");
+    uReportMsgTxt += "<br/>"+tr("report_question_text");
+    uReportMsgTxt += "<br/><br/><b>"+tr("report_reason")+"</b>: <input type='text' id='uReportMsgInput' placeholder='" + tr("reason") + "' />"
+
+    MessageBox(tr("report_question"), uReportMsgTxt, [tr("confirm_m"), tr("cancel")], [
+        (function() {
+            res = document.querySelector("#uReportMsgInput").value;
+            xhr = new XMLHttpRequest();
+            xhr.open("GET", "/report/" + user_id + "?reason=" + res + "&type=user", true);
+            xhr.onload = (function() {
+                if(xhr.responseText.indexOf("reason") === -1)
+                    MessageBox(tr("error"), tr("error_sending_report"), ["OK"], [Function.noop]);
+                else
+                    MessageBox(tr("action_successfully"), tr("will_be_watched"), ["OK"], [Function.noop]);
+            });
+            xhr.send(null);
+        }),
+        Function.noop
+    ]);
+}
+
 var tooltipClientTemplate = Handlebars.compile(`
     <table>
         <tr>
@@ -2083,7 +2107,9 @@ async function __processPaginatorNextPage(page)
         window.player.loadContext(page)
     }
 
-    location.hash = 'pages/'+page
+    const new_url = new URL(location.href)
+    new_url.hash = 'pages/'+page
+    history.replaceState(null, null, new_url)
 
     if(typeof __scrollHook != 'undefined') {
         __scrollHook(page)
@@ -2247,3 +2273,52 @@ u(document).on('mouseover mousemove mouseout', `div[data-tip='simple']`, (e) =>
         </div>    
     `)
 })
+
+function setStatusEditorShown(shown) {
+    document.getElementById("status_editor").style.display = shown ? "block" : "none";
+}
+
+document.addEventListener("click", event => {
+    if(u('#status_editor').length < 1) {
+        return
+    }
+
+    if(!event.target.closest("#status_editor") && !event.target.closest("#page_status_text"))
+        setStatusEditorShown(false);
+});
+
+u(document).on('click', '#page_status_text', (e) => {
+    setStatusEditorShown(true)
+})
+
+async function changeStatus() {
+    const status = document.status_popup_form.status.value;
+    const broadcast = document.status_popup_form.broadcast.checked;
+
+    document.status_popup_form.submit.innerHTML = "<div class=\"button-loading\"></div>";
+    document.status_popup_form.submit.disabled = true;
+
+    const formData = new FormData();
+    formData.append("status", status);
+    formData.append("broadcast", Number(broadcast));
+    formData.append("hash", document.status_popup_form.hash.value);
+    const response = await ky.post("/edit?act=status", {body: formData});
+
+    if(!parseAjaxResponse(await response.text())) {
+        document.status_popup_form.submit.innerHTML = tr("send");
+        document.status_popup_form.submit.disabled = false;
+        return;
+    }
+
+    if(document.status_popup_form.status.value === "") {
+        document.querySelector("#page_status_text").innerHTML = `[ ${tr("change_status")} ]`;
+        document.querySelector("#page_status_text").className = "edit_link page_status_edit_button";
+    } else {
+        document.querySelector("#page_status_text").innerHTML = status;
+        document.querySelector("#page_status_text").className = "page_status page_status_edit_button";
+    }
+
+    setStatusEditorShown(false);
+    document.status_popup_form.submit.innerHTML = tr("send");
+    document.status_popup_form.submit.disabled = false;
+}

Web/static/js/openvk.cls.js

@@ -59,6 +59,7 @@ document.addEventListener("DOMContentLoaded", function() { //BEGIN
             }),
         ]);
         
+        e.stopPropagation()
         return e.preventDefault();
     });
     /* @rem-pai why this func wasn't named as "#_deleteDialog"? It looks universal IMO */
@@ -81,11 +82,14 @@ document.addEventListener("DOMContentLoaded", function() { //BEGIN
             }),
         ]);
         
+        e.stopPropagation()
         return e.preventDefault();
     });
 
-    u("#_pinGroup").on("click", async function(e) {
+    // TODO REWRITE cuz its a little broken
+    u(document).on("click", "#_pinGroup", async function(e) {
         e.preventDefault();
+        e.stopPropagation()
 
         let link = u(this).attr("href");
         let thisButton = u(this);
@@ -141,6 +145,9 @@ document.addEventListener("DOMContentLoaded", function() { //BEGIN
     });
 
     u(document).handle("submit", "#_submitUserSubscriptionAction", async function(e) {
+        e.preventDefault()
+        e.stopPropagation()
+
         u(this).nodes[0].parentElement.classList.add('loading');
         u(this).nodes[0].parentElement.classList.add('disable');
         console.log(e.target);

Web/static/js/router.js

@@ -1,8 +1,4 @@
 window.router = new class {
-    skeletons = {
-
-    }
-
     get csrf() {
         return u("meta[name=csrf]").attr("value")
     }
@@ -20,12 +16,22 @@ window.router = new class {
 
     __appendScript(script) {
         const _t_scr = document.createElement('script')
+        _t_scr.crossorigin = 'anonymous'
+        if(script.getAttribute('integrity')) {
+            _t_scr.setAttribute('integrity', script.getAttribute('integrity'))
+        }
+
+        _t_scr.id = script.id
+        //const parent = script.parentNode
+        //const idx = Array.from(parent.children).indexOf(script)
+
         if(script.src) {
             _t_scr.src = script.src
         } else {
             _t_scr.textContent = script.textContent
         }   
 
+        //parent.children[idx].before(script)
         document.body.appendChild(_t_scr)
     }
 
@@ -33,25 +39,25 @@ window.router = new class {
         u(`script:not([src])`).remove()
     }
 
-    __appendPage(parsed_content) {
+    __closeMsgs() {
-        if(u('.paginator:not(.paginator-at-top)').length > 0) {
+        window.messagebox_stack.forEach(msg => msg.close())
-            showMoreObserver.unobserve(u('.paginator:not(.paginator-at-top)').nodes[0])
+    }
-        }
 
+    __appendPage(parsed_content) {
         const page_body = u(parsed_content.querySelector('.page_body'))
         const sidebar = u(parsed_content.querySelector('.sidebar'))
         const page_header = u(parsed_content.querySelector('.page_header'))
 
         if(page_body.length < 1) {
-            makeError('Err')
+            makeError('Invalid page has been loaded')
             return
         }
 
         this.__clearScripts()
-        parsed_content.querySelectorAll('script').forEach(script => {
+        parsed_content.querySelectorAll('.page_body script, #_js_ep_script').forEach(script => {
-            console.log(script)
             if(!this.__isScriptAlreadyLoaded(script)) {
                 this.__appendScript(script)
+                script.parentNode.removeChild(script)
             }
         })
         u('.page_body').html(page_body.html())
@@ -77,6 +83,20 @@ window.router = new class {
         if(u('.paginator:not(.paginator-at-top)').length > 0) {
             showMoreObserver.observe(u('.paginator:not(.paginator-at-top)').nodes[0])
         }
+
+        if(u(`div[class$="_small_block"]`).length > 0 && window.smallBlockObserver) {
+            smallBlockObserver.observe(u(`div[class$="_small_block"]`).nodes[0])
+        }
+    }
+
+    __unlinkObservers() {
+        if(u('.paginator:not(.paginator-at-top)').length > 0) {
+            showMoreObserver.unobserve(u('.paginator:not(.paginator-at-top)').nodes[0])
+        }
+
+        if(u(`div[class$="_small_block"]`).length > 0 && window.smallBlockObserver) {
+            smallBlockObserver.unobserve(u(`div[class$="_small_block"]`).nodes[0])
+        }
     }
 
     checkUrl(url) {
@@ -92,6 +112,10 @@ window.router = new class {
             return false
         }
 
+        if(url.indexOf('hash=') != -1) {
+            return false
+        }
+
         return true
     }
 
@@ -133,6 +157,8 @@ window.router = new class {
             history.replaceState({'from_router': 1}, '', next_page_request.url)
         }
         
+        this.__closeMsgs()
+        this.__unlinkObservers()
         this.__appendPage(parsed_content)
     }
 }
@@ -144,12 +170,17 @@ u(document).on('click', 'a', async (e) => {
     let url = target.nodes[0].href
 
     if(id) {
-        if(['act_tab_a', 'ki'].indexOf(id) == -1) {
+        if(['act_tab_a', 'ki', '_pinGroup'].indexOf(id) == -1) {
             console.log('AJAX | Skipping cuz maybe its function call link.')
             return
         }
     }
 
+    if(url.indexOf('hash=') != -1) {
+        e.preventDefault()
+        return false
+    }
+
     if(!dom_url || dom_url == '#' || dom_url.indexOf('javascript:') != -1) {
         console.log('AJAX | Skipped cuz its anchor or function call')
         return
@@ -188,6 +219,10 @@ u(document).on('submit', 'form', async (e) => {
     const form = e.target
     const method = form.method ?? 'get'
     const url = form.action
+    if(form.onsubmit) {
+        u('#ajloader').removeClass('shown')
+        return false
+    }
 
     const url_object = new URL(url)
     url_object.searchParams.append('al', 1)
@@ -199,6 +234,7 @@ u(document).on('submit', 'form', async (e) => {
     }
 
     if(!url) {
+        u('#ajloader').removeClass('shown')
         return
     }
 
@@ -215,6 +251,7 @@ u(document).on('submit', 'form', async (e) => {
     const form_result = await form_res.text()
     switch(form_res.status) {
         case 500:
+        case 502:
             makeError(form_res.statusText)
             break
     }
@@ -237,3 +274,11 @@ u(document).on('submit', 'form', async (e) => {
 
     u('#ajloader').removeClass('shown')
 })
+
+window.addEventListener('popstate', (e) => {
+    e.preventDefault();
+    window.router.route({
+        url: location.href,
+        push_state: false,
+    })
+})

Web/static/js/utils.js

@@ -186,7 +186,7 @@ function serializeForm(form)
 {
     const u_ = u(form)
     const inputs = u_.find('input, textarea')
-    console.log(inputs)
+    
     let fd = new FormData()
     inputs.nodes.forEach(inp => {
         if(!inp || !inp.name) {
@@ -203,7 +203,14 @@ function serializeForm(form)
             case 'hidden':
             case 'text':
             case 'textarea':
+            case 'select':
                 fd.append(inp.name, inp.value)
+                break
+            case 'checkbox':
+                if(inp.checked) {
+                    fd.append(inp.name, inp.value)
+                }
+                
                 break
             case 'file':
                 for(const __file of inp.files) {