История страницы

<style>
.apitester {
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    font-family: sans-serif;
}

.apitester * {
    box-sizing: border-box;
}

.apitester h3 {
    margin: 0;
}

.apitester pre {
    margin: 0;
    font-family: monospace;
}

.apitester-editor {
    padding: 1rem;
}

.apitester-editor>div {
    margin-top: 0.5rem;
}

.apitester [data-ref=enable-http]-link {
    display: inline-block;
    margin-left: 1rem;
    color: #ccc#0000EE;
}

.apitester [data-ref=enable-http]-link:hover {
    color: #0000EE;
    text-decoration: none;
}

.apitester [data-ref=enable-http]-link:visited {
    color: #ccc#0000EE;
}


.apitester [data-ref=enable-http]:visited:hovermethod] {
    colordisplay: #0000EE;
    text-decoration: none;
}
inline-block;
}

.apitester [data-ref=method] {
    display: inline-block;
}

.apitester [data-ref=host] {
    display: inline-block;
    resize: horizontal;
    border: 1px solid #eaeaea;
    padding: 0.5rem;
    white-space: pre-wrap;
    font-family: monospace;
}

.apitester [data-ref=url] {
    display: inline-block;
    padding: 0;
    white-space: pre-wrap;
}

.apitester [data-ref=body] {
    display: block;
    resize: vertical;
    width: 100%;
    min-height: 3rem;
    border: 1px solid #eaeaea;
    padding: 0.5rem;
    white-space: pre-wrap;
}

.apitester [data-ref=execute] {
    padding: 0.5rem 1rem;
}

.apitester [data-ref=clearoutput] {
    displaybackground: inline-block#eaeaea;
    margin-left:padding: 0.5rem 1rem;
    color: #0000EE;
}

.apitester [data-ref=clear]:hover {
    text-decoration: none;
}

.apitester [data-ref=clear]:visited {
    color: #0000EE;
}

.apitester [data-ref=output] {
    background: #eaeaea;
    padding: 0.5rem 1rem;
    white-space: pre-white-space: pre-wrap;
}

.apitester-error {
    border-color: red;
}
</style>

<script>
"use strict";

const DEFAULT_HOST = "http://localhost:8080";

function stringify(obj) {
    let objStr = JSON.stringify(obj, null, 4);
    if (objStr == "{}") {
        objStr = obj.toString();
    }
    return objStr;
}

function show(el) {
    el.style.display = "";
}

function hide(el) {
    el.style.display = "none";
}

class ApiTester {
    constructor(selector, httpMethod, apiMethod, body) {
        this.state = {
            host: localStorage.getItem("apitester.hostname") || DEFAULT_HOST,
            httpMethod: httpMethod,
            apiMethod: apiMethod,
            body: body,
            isExecuting: false,
            output: null,
        };
        this.el = this.initEl(selector);
        this.ui = this.initUi(this.el);
        this.listen();
        this.render();
    }

    get isMixedContent() {
        return (
            location.protocol == "https:" && this.state.host.startsWith("http:")
        );
    }

    initEl(selector) {
        const el = document.querySelector(selector);
        el.innerHTML = `
        <div class="apitester-editor">
            <h3>
                API-тестер
                <a data-ref="enable-http" class="apitester-link" href="#enable-http#" title="Если вы открыли Confluence через HTTPS, запросы к HTTP-серверам подсказок работать не будут. Переключайтесь на HTTP, чтобы заработали">включить HTTP</a>
                <a data-ref="enable-https" class="apitester-link" href="#">включить HTTPS</a>
            </h3>
            <div>
                <pre data-ref="method"></pre>
                <input data-ref="host">
                <pre data-ref="url"></pre>
            </div>
            <div>
                <textarea data-ref="body"></textarea>
            </div>
            <div>
                <button data-ref="execute">Выполнить</button>
                <a data-ref="clear" class="apitester-link" href="#enable-http#">очистить</a>
            </div>
        </div>
        <pre data-ref="output">
        </pre>
        </div>`;
        return </div>el;
    }

    <pre data-ref="output">
initUi(el) {
        return </pre>
{
             `;enableHttp: el.querySelector("[data-ref=enable-http]"),
        return el;
    }
enableHttps: el.querySelector("[data-ref=enable-https]"),
    initUi(el) {
        return {method: el.querySelector("[data-ref=method]"),
            enableHttphost: el.querySelector("[data-ref=enable-httphost]"),
            methodurl: el.querySelector("[data-ref=methodurl]"),
            hostbody: el.querySelector("[data-ref=hostbody]"),
            urlexecute: el.querySelector("[data-ref=urlexecute]"),
            bodyclear: el.querySelector("[data-ref=bodyclear]"),
            executeoutput: this.el.querySelector("[data-ref=executeoutput]"),
        };
    }

     clear: el.querySelector("[data-ref=clear]"),
 listen() {
        this.el.addEventListener("keydown", (event) => {
           output: this.el.querySelector("[data-ref=output]"),onKeydown(event);
        });
    }

    listen() {
        this.elthis.ui.enableHttp.addEventListener("keydownclick", (event) => {
            this.onKeydown(onSwitchProtocol("http:", event);
        });
        this.ui.enableHttpenableHttps.addEventListener("click", (event) => {
            this.onEnableHttp(onSwitchProtocol("https:", event);
        });
        this.ui.host.addEventListener("change", (event) => {
            this.onEdit(event);
        });
        this.ui.body.addEventListener("change", (event) => {
            this.onEdit(event);
        });
        this.ui.execute.addEventListener("click", (event) => {
            this.onExecute(event);
        });
        this.ui.clear.addEventListener("click", (event) => {
            this.onClear(event);
        });
    }

    onKeydown(event) {
        if (event.keyCode == 13 && (event.ctrlKey || event.metaKey)) {
            // Ctrl + Enter
            event.preventDefault();
            this.onEdit();
            this.onExecute();
        }
    }

    onEnableHttponSwitchProtocol(protocol, event) {
        event.preventDefault();
        window.location.protocol = "http:"protocol;
    }

    onEdit() {
        this.state.host = this.ui.host.value;
        this.state.body = this.ui.body.value;
 .value;
        localStorage.setItem("apitester.hostname", this.state.host);
        this.render();
    }

    onExecute() {
       localStorage.setItem("apitester.hostname", this.state.hostmarkAsExecuting();
        this.renderexecute();
      }

      onExecute.then((response) => {
           this.markAsExecuting     return response.json();

            this.execute(})
            .then((response) => {
                return responsethis.jsonshowResponse(response);
            })
            .thencatch((responseerr) => {
                this.showResponse(responseerr);
            });
    }

        .catch((erronClear() => {
        this.state.output = null;
        this.showResponserender(err);
    }

        });
markAsExecuting() {
     }

    onClear() {this.state.output = null;
        this.state.outputisExecuting = nulltrue;
        this.render();
    }

    markAsExecutingshowResponse(response) {
        this.state.output = nullstringify(response);
        this.state.isExecuting = truefalse;
        this.render();
    }

    showResponseexecute(response) {
) {
        const url = this.state.host + this.state.apiMethod;
        const this.state.outputoptions = stringify(response);
{
            method: this.state.isExecutinghttpMethod,
 = false;
        this.render();
    }
mode: "cors",
    execute() {
        const url = this.state.host + this.state.apiMethod;
headers: {
              const options = { "Content-Type": "application/json",
            method: this.state.httpMethod},
        };
         mode:if (this.state.httpMethod == "corsPOST",) {
            options.body headers: {= this.state.body;
        }
        "Content-Type": "application/json",
        return fetch(url, options);
    },

        };render() {
        if (this.state.httpMethod == "POST"this.isMixedContent) {
            options.body = show(this.stateui.bodyenableHttp);
        } else {
           return fetch(url, optionshide(this.ui.enableHttp);
    }

    render() {}
        if (this.isMixedContentlocation.protocol == "http:") {
            show(this.ui.enableHttpenableHttps);
        } else {
            hide(this.ui.enableHttpenableHttps);
        }
        this.ui.method.innerHTML = this.state.httpMethod;
        this.ui.host.value = this.state.host;
        this.ui.url.innerHTML = this.state.apiMethod;
        this.ui.body.value = this.state.body;
        if (this.state.isExecuting) {
            this.ui.execute.setAttribute("disabled", "disabled");
        } else {
            this.ui.execute.removeAttribute("disabled");
        }
        this.ui.output.innerHTML = this.state.output;
        if (this.state.output) {
            show(this.ui.output);
            show(this.ui.clear);
        } else {
            hide(this.ui.output);
            hide(this.ui.clear);
        }
    }
}
</script>