html to css/less

Gatsu

Hi, how can I convert this html/javascript to css/less? I need to put in in custom styles.

<script type="text/javascript" async="true">(function() {    var host = 'www.themoneytizer.com';    var element = document.createElement('script');    var firstScript = document.getElementsByTagName('script')[0];    var url = 'https://quantcast.mgr.consensu.org'        .concat('/choice/', '6Fv0cGNfc_bw8', '/', host, '/choice.js');    var uspTries = 0;    var uspTriesLimit = 3;    element.async = true;    element.type = 'text/javascript';    element.src = url;    firstScript.parentNode.insertBefore(element, firstScript);    function makeStub() {        var TCF_LOCATOR_NAME = '__tcfapiLocator';        var queue = [];        var win = window;        var cmpFrame;        function addFrame() {            var doc = win.document;            var otherCMP = !!(win.frames[TCF_LOCATOR_NAME]);            if (!otherCMP) {                if (doc.body) {                    var iframe = doc.createElement('iframe');                    iframe.style.cssText = 'display:none';                    iframe.name = TCF_LOCATOR_NAME;                    doc.body.appendChild(iframe);                } else {                    setTimeout(addFrame, 5);                }            }            return !otherCMP;        }        function tcfAPIHandler() {            var gdprApplies;            var args = arguments;            if (!args.length) {                return queue;            } else if (args[0] === 'setGdprApplies') {                if (                    args.length > 3 &&                    args[2] === 2 &&                    typeof args[3] === 'boolean'                ) {                    gdprApplies = args[3];                    if (typeof args[2] === 'function') {                        args[2]('set', true);                    }                }            } else if (args[0] === 'ping') {                var retr = {                    gdprApplies: gdprApplies,                    cmpLoaded: false,                    cmpStatus: 'stub'                };                if (typeof args[2] === 'function') {                    args[2](retr);                }            } else {                queue.push(args);            }        }        function postMessageEventHandler(event) {            var msgIsString = typeof event.data === 'string';            var json = {};            try {                if (msgIsString) {                    json = JSON.parse(event.data);                } else {                    json = event.data;                }            } catch (ignore) {}            var payload = json.__tcfapiCall;            if (payload) {                window.__tcfapi(                    payload.command,                    payload.version,                    function(retValue, success) {                        var returnMsg = {                            __tcfapiReturn: {                                returnValue: retValue,                                success: success,                                callId: payload.callId                            }                        };                        if (msgIsString) {                            returnMsg = JSON.stringify(returnMsg);                        }                        event.source.postMessage(returnMsg, '*');                    },                    payload.parameter                );            }        }        while (win) {            try {                if (win.frames[TCF_LOCATOR_NAME]) {                    cmpFrame = win;                    break;                }            } catch (ignore) {}            if (win === window.top) {                break;            }            win = win.parent;        }        if (!cmpFrame) {            addFrame();            win.__tcfapi = tcfAPIHandler;            win.addEventListener('message', postMessageEventHandler, false);        }    };    if (typeof module !== 'undefined') {        module.exports = makeStub;    } else {        makeStub();    }    var uspStubFunction = function() {        var arg = arguments;        if (typeof window.__uspapi !== uspStubFunction) {            setTimeout(function() {                if (typeof window.__uspapi !== 'undefined') {                    window.__uspapi.apply(window.__uspapi, arg);                }            }, 500);        }    };    var checkIfUspIsReady = function() {        uspTries++;        if (window.__uspapi === uspStubFunction && uspTries < uspTriesLimit) {            console.warn('USP is not accessible');        } else {            clearInterval(uspInterval);        }    };    if (typeof window.__uspapi === 'undefined') {        window.__uspapi = uspStubFunction;        var uspInterval = setInterval(checkIfUspIsReady, 6000);    }})();</script>

Justoverclock

Gatsu you can’t convert html and Javascript to css less

Gatsu

Justoverclock And how can I put this code in custom style? Actually, I have it under "header".

Justoverclock

Gatsu you can put this only on header or footer, or into the extend.php

Gatsu

Justoverclock Can you explain me, how can I put it in extend.php?
In header I have a problem with jQuery.

Justoverclock

Gatsu i do not know if it works, but you can try....

in extend.php add

use Flarum\Frontend\Document;

and in frontend:

$document->head[] = '<script type="text/javascript" async="true">(function(){var host='www.themoneytizer.com'; var element=document.createElement('script'); var firstScript=document.getElementsByTagName('script')[0]; var url='https://quantcast.mgr.consensu.org' .concat('/choice/', '6Fv0cGNfc_bw8', '/', host, '/choice.js'); var uspTries=0; var uspTriesLimit=3; element.async=true; element.type='text/javascript'; element.src=url; firstScript.parentNode.insertBefore(element, firstScript); function makeStub(){var TCF_LOCATOR_NAME='__tcfapiLocator'; var queue=[]; var win=window; var cmpFrame; function addFrame(){var doc=win.document; var otherCMP=!!(win.frames[TCF_LOCATOR_NAME]); if (!otherCMP){if (doc.body){var iframe=doc.createElement('iframe'); iframe.style.cssText='display:none'; iframe.name=TCF_LOCATOR_NAME; doc.body.appendChild(iframe);}else{setTimeout(addFrame, 5);}}return !otherCMP;}function tcfAPIHandler(){var gdprApplies; var args=arguments; if (!args.length){return queue;}else if (args[0]==='setGdprApplies'){if ( args.length > 3 && args[2]===2 && typeof args[3]==='boolean' ){gdprApplies=args[3]; if (typeof args[2]==='function'){args[2]('set', true);}}}else if (args[0]==='ping'){var retr={gdprApplies: gdprApplies, cmpLoaded: false, cmpStatus: 'stub'}; if (typeof args[2]==='function'){args[2](retr);}}else{queue.push(args);}}function postMessageEventHandler(event){var msgIsString=typeof event.data==='string'; var json={}; try{if (msgIsString){json=JSON.parse(event.data);}else{json=event.data;}}catch (ignore){}var payload=json.__tcfapiCall; if (payload){window.__tcfapi( payload.command, payload.version, function(retValue, success){var returnMsg={__tcfapiReturn:{returnValue: retValue, success: success, callId: payload.callId}}; if (msgIsString){returnMsg=JSON.stringify(returnMsg);}event.source.postMessage(returnMsg, '*');}, payload.parameter );}}while (win){try{if (win.frames[TCF_LOCATOR_NAME]){cmpFrame=win; break;}}catch (ignore){}if (win===window.top){break;}win=win.parent;}if (!cmpFrame){addFrame(); win.__tcfapi=tcfAPIHandler; win.addEventListener('message', postMessageEventHandler, false);}}; if (typeof module !=='undefined'){module.exports=makeStub;}else{makeStub();}var uspStubFunction=function(){var arg=arguments; if (typeof window.__uspapi !==uspStubFunction){setTimeout(function(){if (typeof window.__uspapi !=='undefined'){window.__uspapi.apply(window.__uspapi, arg);}}, 500);}}; var checkIfUspIsReady=function(){uspTries++; if (window.__uspapi===uspStubFunction && uspTries < uspTriesLimit){console.warn('USP is not accessible');}else{clearInterval(uspInterval);}}; if (typeof window.__uspapi==='undefined'){window.__uspapi=uspStubFunction; var uspInterval=setInterval(checkIfUspIsReady, 6000);}})();</script>'

example:
https://github.com/justoverclockl/og-meta-tag/blob/main/extend.php#L28

Juba007

You can't convert that because they are two completely different things. Of course I don't know exactly what your problem is but maybe this extension will help you:
https://extiverse.com/extension/ianm/html-head

With this you can actually add HTML <head> attributes. If you do this via the Flarum default setting it is not really in the head which can sometimes cause problems.