wnr-backup
/
floating.html

<!DOCTYPE html>
<html>

<head>
    <title>wnr</title>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <script>
        window.$ = require("jquery/dist/jquery.slim.min.js");
    </script>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="res/fonts/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <script src="supporter.js"></script>
    <div class="d-flex mx-auto justify-content-center align-items-center text-dark" id="main">
        <div id="floating-container" class="justify-content-center align-content-center text-center">
            <div id="floating-unhover">
                <div id="time-left" class="text-center h6 work">--</div>
                <div id="time-left-msg" class="text-center small work">
                    <script>document.write(i18n.__('min-left'));</script>
                </div>
            </div>
            <div id="floating-hover" onmouseover="hover()" onmouseleave="unhover()" ontouchstart="semihover()">
                <div class="small" id="floating-stopper">
                    <a id="stopper" href="javascript:stopper()" class="text-muted">
                        <i class="iconfont icon-pause"></i>
                    </a>
                    <div id="stopper-spacing"><br /><br /></div>
                </div>
                <div class="extreme-small" id="floating-recover">
                    <a href="javascript:recover()" class="text-muted text-left">
                        <i class="iconfont icon-expand-arrows-alt" id="recover"></i>
                    </a>
                </div>
                <div class="extreme-small" id="floating-close">
                    <a href="javascript:recover()" class="text-muted text-right">
                        <i class="iconfont icon-close" id="exit"></i>
                    </a>
                </div>
                <div class="extreme-small" id="floating-back">
                    <a href="javascript:backer()" class="text-muted text-left">
                        <i class="iconfont icon-previous" id="back-index"></i>
                    </a>
                </div>
                <div class="extreme-small" id="floating-skipper">
                    <a href="javascript:skipper()" class="text-muted text-right">
                        <i class="iconfont icon-fastforward" id="skipper"></i>
                    </a>
                </div>
            </div>
            <script>
                $('#stopper').attr('title', i18n.__('start-or-stop'));
                $('#back-index').attr('title', i18n.__('back-index'));
                $('#skipper').attr('title', i18n.__('skipper'));
                $('#recover').attr('title', i18n.__('recover'));
                $('#exit').attr('title', i18n.__('exit'));
            </script>
        </div>
    </div><!-- for things with 'work' mark, when it's resting, the color should be changed -->
    <div id="floating-bottom-bar">&nbsp;</div>
    <script>
        var isMiniMode = true;

        function hover() {
            $("#floating-unhover").css("opacity", "0");
        }

        function unhover() {
            $("#floating-unhover").css("opacity", "1");
        }

        let isWorking = true;

        function stopper() {
            ipc.send("floating-conversation", { topic: "stop" });
            isWorking = !isWorking;
            if (isWorking) $("#stopper").html("<i class='iconfont icon-pause' aria-hidden='true'></i>");
            else $("#stopper").html("<i class='iconfont icon-play' aria-hidden='true'></i>");
        }

        function skipper() {
            ipc.send("floating-conversation", { topic: "skip" });
            $("#floating-skipper").css("display", "none");
            call("floating-destroy", "property-stay");
        }

        function recover() {
            ipc.send("floating-conversation", { topic: "recover" });
            call("floating-destroy");
        }

        function backer() {
            ipc.send("floating-conversation", { topic: "back" });
            $("#floating-back").css("display", "none");
        }

        let timeLeft = $("#time-left"), floatingBottomBar = $('#floating-bottom-bar');
        let lastTimeHasHours = null;
        let h = " " + i18n.__("h"), min = " " + i18n.__("min"), s = " " + i18n.__("s");

        function getStyledTimeLeft(minute) {
            minute = Number(minute);
            if (lastTimeHasHours == null) {
                lastTimeHasHours = Math.floor(minute / 60) > 0;
                if (!lastTimeHasHours) {
                    timeLeft.removeClass("h6");
                    timeLeft.addClass("h4");
                }
            }
            let hour = Math.floor(minute / 60);
            if (hour > 0) {
                if (!lastTimeHasHours) {
                    timeLeft.removeClass("h4");
                    timeLeft.addClass("h6");
                    lastTimeHasHours = true;
                }
                return Math.floor(hour) + h + Math.ceil(Math.floor(minute - hour * 60)) + min;
            } else {
                if (lastTimeHasHours) {
                    timeLeft.removeClass("h6");
                    timeLeft.addClass("h4");
                    lastTimeHasHours = false;
                }
                if (Math.floor(minute) === 0) return Math.ceil(Math.floor(minute * 60)) + s;
                return Math.ceil(Math.floor(minute)) + min;
            }
        }

        let method = 1;
        ipc.on("floating-time-left", function (event, message) {
            isWorking = message.isWorking;
            if (isWorking) $("#stopper").html("<i class='iconfont icon-pause' aria-hidden='true'></i>");
            else $("#stopper").html("<i class='iconfont icon-play' aria-hidden='true'></i>");

            timeLeft.text(getStyledTimeLeft(message.minute));
            floatingBottomBar.css("width", message.percentage + "%");

            if (message.method === 2 && method === 1) {
                $(".work").addClass("rest");
                $(".work").removeClass("work");
                $('#floating-bottom-bar').css("background-color", "#5490ea19");
                method = 2;
            }

            if (message.method === 1 && method === 2) {
                $(".rest").addClass("work");
                $(".rest").removeClass("rest");
                $('#floating-bottom-bar').css("background-color", "#ea545419");
                method = 1;
            }

            if (message.method === 3 && method !== 3) {
                $(".work").addClass("positive");
                $('#floating-bottom-bar').css("display", "none");
                $("#time-left-msg").text(i18n.__('min-already'));
                method = 3;
            }

            ipc.removeAllListeners('floating-stop-sync');
            ipc.on("floating-stop-sync", function (event, message) {
                isWorking = message;
                if (isWorking) $("#stopper").html("<i class='iconfont icon-pause' aria-hidden='true'></i>");
                else $("#stopper").html("<i class='iconfont icon-play' aria-hidden='true'></i>");
            });

            if (method !== 3) {
                if (store.get('disable-pausing') === true) {
                    if (!((store.get('disable-pausing-special') === "work" && method !== 1) ||
                            (store.get('disable-pausing-special') === "rest" && method !== 2)))
                        $("#stopper").css("display", "none");
                    else $("#stopper").css("display", "inline-block");
                } else $("#stopper").css("display", "inline-block");
                if (store.get('disable-skipping') === true) {
                    if (!((store.get('disable-skipping-special') === "work" && method !== 1) ||
                            (store.get('disable-skipping-special') === "rest" && method !== 2)))
                        $("#floating-skipper").css("display", "none");
                    else $("#floating-skipper").css("display", "inline-block");
                } else $("#floating-skipper").css("display", "inline-block");
                if (store.get('disable-backing') === true) {
                    if (!((store.get('disable-backing-special') === "work" && method !== 1) ||
                            (store.get('disable-backing-special') === "rest" && method !== 2)))
                        $("#floating-back").css("display", "none");
                    else $("#floating-back").css("display", "inline-block");
                } else $("#floating-back").css("display", "inline-block");
            }
        });

        if (process.platform === "darwin") {
            $("#floating-recover").css("display", "none");
            $("#floating-close").css("display", "none");
        } else {
            $("#stopper-spacing").css("display", "none");
        }
    </script>
    <script src="renderer.js"></script>
    <script src="theme.js"></script>
</body>

</html>