Greasy Fork

MDUIKit

Google Material design UI Kit library

当前为 2018-04-06 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/40244/263503/MDUIKit.js 

var mduikit = (function (exports) {
    'use strict';

    /**
     * Button
     * 
     * @param {string} id 
     * @param {string} text 
     * @param {object} include: href, type, mode, disable, color, bgColor, shadow
     */
    var Button = function Button(id, text) {
        var others = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

        var style = {};
        var param = {
            href: "javascript:;",
            type: "raised", // include: raised flat
            mode: "primary", // include: primary secondary
            disable: false,
            color: "rgba(255, 255, 255, .7)",
            bgColor: "rgba(0, 137, 123, 1)",
            shadow: "0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)",
            onclick: undefined
        },
            disable = {
            flat: "cursor: no-drop; color: rgba(0, 0, 0, 0.298039);",
            raised: "cursor: no-drop; color: rgba(0, 0, 0, 0.298039); background-color: rgb(229, 229, 229); box-shadow: none;"
        },
            secondary = {
            flat: "opacity: 0.6;",
            raised: "backgroundColor: rgba( 153, 153, 153, .2);"
        };
        if (style.type == "flat") {
            param.color = "rgba(0, 137, 123, .8)";
            param.bgColor = "transparent";
            param.shadow = "none";
        }

        Object.assign(style, param, others);
        style.disable = style.disable == true ? disable[style.type] : "";
        style.mode = style.mode == "secondary" ? secondary[style.type] : "";

        style.onclick && $("html").on("click", "#" + id, style.onclick);

        return "<a id=\"" + id + "\" style=\"display:block;min-width:88px;height:36px;margin:6px;padding:0;font-family:sans-serif;text-decoration:none;cursor:pointer;border:none;border-radius:2px;box-shadow:" + style.shadow + ";color:" + style.color + ";background-color:" + style.bgColor + ";margin-right:0px;" + style.disable + "\" class=\"md-waves-effect md-waves-button\" href=\"" + style.href + "\" target=\"_self\" type=\"" + style.type + "\">\n                <button-mask style=\"display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; margin: 0px; padding: 0px 8px; border: medium none; border-radius: 2px; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; background-color: transparent;" + style.mode + "\">\n                    <button-span style=\"display:flex;align-items:center;user-select:none;\">\n                        <button-icon style=\"order:-1;display:none;width:24px;height:24px;border:none;background-position:center;background-repeat:no-repeat;\"></button-icon>\n                        <button-text style=\"padding:0 8px 0;text-decoration:none;text-align:center;letter-spacing:.5px;font-size:15px;line-height:1;\">" + text + "</button-text>\n                    </button-span>\n                </button-mask>\n            </a>";
    };

    /**
     * Clean events
     * 
     * @param {array} id array, e.g. [ "id1", "id2" ]
     * @param {string} event name, e.g. click, mouseover
     */
    var Clean = function Clean(ids, event) {
        ids.forEach(function (id) {
            return $("html").off(event, "#" + id);
        });
    };

    exports.Button = Button;
    exports.Clean = Clean;

    return exports;

}({}));