查看“︁Widget:AcfunVideo”︁的源代码

<noinclude>'''本Widget不能单独使用'''，请使用{{tl|AcfunVideo}}！</noinclude><includeonly><!--{if !isset($wgAcfun) || !$wgAcfun}--><!--{assign var="wgAcfun" value=true scope="global"}--><style>
.acfun-video-container {
    border: 1px solid rgba(170,170,170,0.37);
    max-width: 100%;
}
.acfun-video-container.exec {
    display: table;
}
.acfun-iframe-container,
.acfun-video-container {
    display: none;
}
.acfun-video-container,
.acfun-video-container .acfun-widescreen,
.acfun-video-container iframe {
    max-width: 100%;
    background-color: #fff!important;
}
.acfun-title {
    padding: .2em 6.5em .2em 1em;
    position: relative;
}
.acfun-title a {
    word-break: break-word;
}
.acfun-widescreen {
    position: absolute;
    display: none;
    width: 1em;
    right: calc(-2rem - 1px);
    border: 1px solid rgba(170,170,170,0.37);
    padding: .25rem .5rem;
    line-height: 1.5em;
    top: -2px;
    user-select: none;
    cursor: pointer;
}
.onshow .acfun-widescreen{
    display: block;
}
.acfun-toggle {
    position: absolute;
    top: calc(50% - .5em);
    right: .7em;
    line-height: 1em;
    cursor: pointer;
    padding-left: 1em;
    background-image: url(/skins/Vector/images/search-ltr.png?39f97);
    background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2212%22%20height=%2213%22%3E%20%3Cg%20fill=%22none%22%20stroke=%22%2354595d%22%20stroke-width=%222%22%3E%20%3Cpath%20d=%22M11.29%2011.71l-4-4%22/%3E%20%3Ccircle%20cx=%225%22%20cy=%225%22%20r=%224%22/%3E%20%3C/g%3E%20%3C/svg%3E);
    background-position: left center;
    background-repeat: no-repeat;
}
.acfun-toggle:hover {
    color: #36b;
}
.acfun-video-button,
.acfun-video-button:visited {
    display: inline-block;
    margin: 4px 5px;
    padding: 10px 25px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background: #de698c;
    border-radius: 4px;
}
.acfun-iframe-container {
    padding: 6px;
    position: relative;
    border: 0 solid rgba(170,170,170,0.37);
    border-top-width: 1px;
}
.acfun-video-container:not([data-max-width]) .acfun-iframe-container {
    max-width: calc(100% - 12px)!important;
}
.acfun-video-container:not([data-max-width]).onshow .acfun-iframe-container {
    max-height: calc(100% - 27px)!important;
}
.acfun-video-container textarea {
    background: white;
    color: black;
    width: 80%;
    margin: auto;
}
.acfun-iframe-overlay {
    width: 0;
    height: 0;
    padding-top: 30%;
    text-align: center;
    box-sizing: border-box;
    background: rgb(167, 215, 249);
    position: absolute;
    top: 3px;
    left: 6px;
    z-index: 2;
}
.acfun-iframe-retry-link {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    background: white;
    padding: 0 0.5em;
}
</style><script>
"use strict";
(window.RLQ ||= []).push([["mediawiki.base", "jquery"], () => {
    try {
        const isNaN = Number.isNaN || window.isNaN;
        const cssLengthUnitValidator = (length, defaultValue, callback) => {
            if (typeof length !== "string" || length.length === 0) {
                callback(false);
                return defaultValue;
            }
            const parsedNumber = parseFloat(length.replace(/[a-z]+/i, ""));
            if (isNaN(parsedNumber) || parsedNumber <= 0) {
                callback(false);
                return defaultValue;
            }
            if (/^(?:\d+|\d*\.\d+)(?:em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|Q|in|pc|pt|px|%)$/.test(length)) {
                callback(true);
                return length;
            }
            if (/^(?:\d+|\d*\.\d+)$/.test(length)) {
                callback(true);
                return `${length}px`;
            }
            callback(false);
            return defaultValue;
        };
        const placeholderToggle = (iframe) => {
            if (iframe.data("displayFlag")) {
                iframe.data("displayFlag", false);
                iframe.data("placeholder").fadeOut(370);
            }
        };
        let lazyLoadObserver;
        if ("IntersectionObserver" in window &&
            "IntersectionObserverEntry" in window &&
            "intersectionRatio" in window.IntersectionObserverEntry.prototype &&
            "isIntersecting" in window.IntersectionObserverEntry.prototype) {
            lazyLoadObserver = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        entry.target.src = entry.target.dataset.src;
                        setTimeout(() => {
                            placeholderToggle($(entry.target));
                        }, 13070);
                        lazyLoadObserver.unobserve(entry.target);
                    }
                });
            });
        } else {
            lazyLoadObserver = {
                observe: (target) => {
                    target.src = target.dataset.src;
                    setTimeout(() => {
                        placeholderToggle($(target));
                    }, 13070);
                },
            };
        }
        const iframe_href_base = "https://www.acfun.cn/player/";
        const run = () => {
            $(".acfun-video-container:not(.exec)").addClass("exec").each((_, ele) => {
                const dataset = ele.dataset,
                    _id = dataset.id,
                    id = _id.replace(/^ac/i, ""),
                    selfbox = $(ele);
                let prefix;
                if (/^(?:ac)?\d{1,9}$/i.test(_id)) {
                    prefix = {
                        href: "ac",
                        iframe: "ac",
                    };
                } else {
                    return ele.outerHTML = "<i>id错误</i>";
                }
                let page = parseInt(+(dataset.page || 1));
                if (isNaN(page) || page < 1) { page = 1; }
                const { title } = dataset;
                const height = cssLengthUnitValidator(dataset.height, "441px", (isValidated) => isValidated || selfbox.removeAttr("data-height"));
                const width = cssLengthUnitValidator(dataset.width, "665px", (isValidated) => isValidated || selfbox.removeAttr("data-width"));
                const maxHeight = cssLengthUnitValidator(dataset.maxHeight, undefined, (isValidated) => isValidated || selfbox.removeAttr("data-max-height"));
                const maxWidth = cssLengthUnitValidator(dataset.maxWidth, undefined, (isValidated) => isValidated || selfbox.removeAttr("data-max-width"));
                const iframeContainer = selfbox.find(".acfun-iframe-container");
                const title_text = $("<a/>").attr("rel", "nofollow noreferrer noopener").addClass("external text").attr({
                    href: `https://www.acfun.cn/v/${prefix.href}${id}_${page}`,
                    target: "_blank",
                }).prependTo(selfbox.find(".acfun-title"));
                const iframe = $("<iframe/>").attr({
                    frameborder: 0,
                    scrolling: "no",
                    src: "",
                    allowfullscreen: true,
                    "class": "acfun-iframe",
                }).css({
                    width: width,
                    height: height,
                    "max-width": maxWidth,
                    "max-height": maxHeight,
                });
                iframeContainer.css({
                    width: width,
                    height: height,
                    "max-width": maxWidth,
                    "max-height": maxHeight,
                });
                iframe.appendTo(iframeContainer);
                const div = $("<div/>");
                div.css({
                    position: "absolute",
                    top: "0",
                    left: "0",
                    bottom: "0",
                    right: "0",
                    "z-index": "99",
                    display: "flex",
                    "align-items": "center",
                    background: "rgba(255, 255, 255, .37)",
                });
                const text = $("<div/>");
                text.css({
                    "text-align": "center",
                    width: "100%",
                }).text("正在加载中，若长时间空白则说明是网络问题……");
                div.append(text).appendTo(iframeContainer);
                iframe.data({
                    placeholder: div,
                    displayFlag: true,
                });
                iframe[0].addEventListener("load", () => {
                    placeholderToggle(iframe);
                });
                title_text.text((title || prefix.href + id) + ([0, 1].includes(page) ? ` (${page})` : ""));
                iframe.attr("data-src", `${iframe_href_base + prefix.iframe}${id}`);
                lazyLoadObserver.observe(iframe[0]);
                //toggle
                selfbox.find(".acfun-toggle").on("click", (_, ele) => {
                    const self = $(ele);
                    selfbox.width(iframeContainer.outerWidth(true));
                    selfbox.toggleClass("onshow");
                    iframeContainer.toggle();
                    if (self.text() === "显示视频") {
                        self.text("隐藏视频");
                        $(window).resize();
                    } else {
                        self.text("显示视频");
                        selfbox.removeAttr("style");
                    }
                });
            });
        };
        $(run);
        mw.hook("wikipage.content").add(run);
        $(window).on("load", run);
        setTimeout(() => {
            $('.acfun-video-container.exec[data-auto-expand="true"]').find(".acfun-toggle").click();
        }, 100);
    } catch (e) {
        // eslint-disable-next-line prefer-template
        prompt("AcfunVideo模板执行出现问题，请复制以下内容并在提问求助区处粘贴寻求帮助：", navigator.userAgent + " : " + e + " " + e.stack.split("\n")[1].trim());
    }
}]);
</script><!--{/if}--></includeonly>