extend ok-pop behavior; release 0.1.2

README.md

@@ -30,6 +30,7 @@ Types:
 
 - `inactive`
 - `ok`
+- `ok~`(show and then hide)
 - `warn`
 - `error`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bottom-tip",
-  "version": "0.1.2-a3",
+  "version": "0.1.2",
   "description": "A div for displaying console.log messages, with some styles",
   "main": "lib/bottom-tip.js",
   "scripts": {

src/bottom-tip.ts

@@ -1,20 +1,27 @@
 import { h, diff, patch, VTree } from "virtual-dom";
 import createElement from "virtual-dom/create-element";
 
-var typeColorMap = {
-  ok: "#fedcd2",
+var typeTextColors = {
+  ok: "#444",
+  inactive: "hsla(0,0%,100%,0)",
+  error: "white",
+  warn: "white",
+};
+
+var typeBgColors = {
+  ok: "hsl(122deg 88% 88%)",
   inactive: "#bfd8d2",
-  error: "#df744a",
+  error: "#df644a",
   warn: "#dcb239",
 };
 
-export type PanelKind = "inactive" | "ok" | "warn" | "error";
+export type PanelKind = "inactive" | "ok" | "warn" | "error" | "ok~";
 
 function panelStyle(type: PanelKind, content: string) {
   var lineCount = content.split("\n").length;
   if (type == "inactive") {
     return {
-      color: "white",
+      color: typeTextColors[type],
       position: "fixed",
       bottom: 0,
       left: 0,
@@ -24,21 +31,21 @@ function panelStyle(type: PanelKind, content: string) {
       overflow: "hidden",
       lineHeight: "20px",
       transitionDuration: "300ms",
-      backgroundColor: typeColorMap[type],
+      backgroundColor: typeBgColors[type],
       fontFamily: "Source Code Pro, Menlo, monospace",
       fontSize: "12px",
       boxSizing: "border-box",
       zIndex: 999999,
     };
   } else {
     return {
-      color: "white",
+      color: typeTextColors[type],
       position: "fixed",
       bottom: 0,
       left: 0,
       width: "100%",
       maxHeight: "100%",
-      backgroundColor: typeColorMap[type],
+      backgroundColor: typeBgColors[type],
       fontFamily: "Source Code Pro, Menlo, monospace",
       whiteSpace: "pre",
       height: `${32 + 18 * lineCount}px`,
@@ -109,5 +116,12 @@ export default function(type: PanelKind, content: string) {
     mountTarget = document.createElement("div");
     document.body.append(mountTarget);
   }
-  renderTip(mountTarget, type, content || "");
+  if (type === "ok~") {
+    renderTip(mountTarget, "ok", content || "");
+    setTimeout(() => {
+      renderTip(mountTarget, "inactive", "");
+    }, 720);
+  } else {
+    renderTip(mountTarget, type, content || "");
+  }
 }

src/control.ts

@@ -4,10 +4,18 @@ import createElement from "virtual-dom/create-element";
 var _rendered = false;
 var _oldTree = null;
 
-export function renderControl(target: HTMLDivElement, makeInactive: () => void, makeOk: () => void, makeWarn: () => void, makeError: () => void) {
+export function renderControl(
+  target: HTMLDivElement,
+  makeInactive: () => void,
+  makeOk: () => void,
+  makeOkPop: () => void,
+  makeWarn: () => void,
+  makeError: () => void
+) {
   var tree = h("div", {}, [
     h("button", { onclick: makeInactive }, ["inactive"]),
     h("button", { onclick: makeOk }, ["ok"]),
+    h("button", { onclick: makeOkPop }, ["ok~"]),
     h("button", { onclick: makeWarn }, ["warn"]),
     h("button", { onclick: makeError }, ["error"]),
   ]);

src/main.ts

@@ -17,7 +17,13 @@ var displayMsg = function() {
 
 function makeOk() {
   typeRef = "ok";
-  contentRef = "ok";
+  contentRef = "Ok";
+  displayMsg();
+}
+
+function makeOkPop() {
+  typeRef = "ok~";
+  contentRef = "Ok";
   displayMsg();
 }
 
@@ -52,7 +58,7 @@ let container;
 
 window.addEventListener("load", function(event) {
   container = document.querySelector("#container");
-  renderControl(container, makeInactive, makeOk, makeWarn, makeError);
+  renderControl(container, makeInactive, makeOk, makeOkPop, makeWarn, makeError);
   displayMsg();
 });
 
@@ -63,7 +69,7 @@ if ((import.meta as any).hot) {
   });
 
   (import.meta as any).hot.accept("./control", function() {
-    renderControl(container, makeInactive, makeOk, makeWarn, makeError);
+    renderControl(container, makeInactive, makeOk, makeOkPop, makeWarn, makeError);
   });
 
   (import.meta as any).hot.accept("./draft", function() {