UNPKG

@react95/clippy

Version:

Our old good friend Clippy as a React Hook!

528 lines (519 loc) 25.7 kB
"use strict"; Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); const React = require("react"); const AGENTS = { BONZI: "Bonzi", CLIPPY: "Clippy", F1: "F1", GENIE: "Genie", GENIUS: "Genius", LINKS: "Links", MERLIN: "Merlin", PEEDY: "Peedy", ROCKY: "Rocky", ROVER: "Rover" }; function __variableDynamicImportRuntime0__(path) { switch (path) { case "./agents/Bonzi.js": return Promise.resolve().then(() => require("./Bonzi-BHx8YU-1.js")); case "./agents/Clippy.js": return Promise.resolve().then(() => require("./Clippy-DTcWzUhC.js")); case "./agents/F1.js": return Promise.resolve().then(() => require("./F1-D7J2HRyk.js")); case "./agents/Genie.js": return Promise.resolve().then(() => require("./Genie-BNbaS2kX.js")); case "./agents/Genius.js": return Promise.resolve().then(() => require("./Genius-BsQwRtVF.js")); case "./agents/Links.js": return Promise.resolve().then(() => require("./Links-DGbeDxqQ.js")); case "./agents/Merlin.js": return Promise.resolve().then(() => require("./Merlin-yrfS9Nj8.js")); case "./agents/Peedy.js": return Promise.resolve().then(() => require("./Peedy-CWG_uJwW.js")); case "./agents/Rocky.js": return Promise.resolve().then(() => require("./Rocky-6kSIl5Op.js")); case "./agents/Rover.js": return Promise.resolve().then(() => require("./Rover-B-r-_8K9.js")); default: return new Promise(function(resolve, reject) { (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)( reject.bind(null, new Error("Unknown variable dynamic import: " + path)) ); }); } } var t = function(t2) { this._queue = [], this._onEmptyCallback = t2; }; t.prototype.queue = function(t2) { this._queue.push(t2), 1 !== this._queue.length || this._active || this._progressQueue(); }, t.prototype._progressQueue = function() { if (this._queue.length) { var t2 = this._queue.shift(); this._active = true; var e2 = this.next.bind(this); t2 && t2(e2); } else this._onEmptyCallback(); }, t.prototype.clear = function() { this._queue = []; }, t.prototype.next = function() { this._active = false, this._progressQueue(); }; var e = function(t2, e2, i2) { this._el = t2, this._data = e2.config, this._path = e2.image, this._currentFrameIndex = 0, this._currentFrame = void 0, this._exiting = false, this._currentAnimation = void 0, this._endCallback = void 0, this._started = false, this._sounds = {}, this.currentAnimationName = void 0, this.preloadSounds(i2), this._overlays = [this._el]; var n2 = this._el; this._setupElement(this._el); for (var o2 = 1; o2 < this._data.overlayCount; o2++) { var r2 = document.createElement("div"), s2 = this._setupElement(r2); n2.append(s2), this._overlays.push(s2), n2 = s2; } }; e.prototype._setupElement = function(t2) { var e2 = this._data.framesize; return t2.style.display = "none", t2.style.width = e2[0] + "px", t2.style.height = e2[1] + "px", t2.style.background = "url('" + this._path + "') no-repeat", t2; }, e.prototype.animations = function() { var t2 = [], e2 = this._data.animations; for (var i2 in e2) t2.push(i2); return t2; }, e.prototype.preloadSounds = function(t2) { }, e.prototype.hasAnimation = function(t2) { return !!this._data.animations[t2]; }, e.prototype.exitAnimation = function() { this._exiting = true; }, e.prototype.showAnimation = function(t2, e2) { return this._exiting = false, !!this.hasAnimation(t2) && (this._currentAnimation = this._data.animations[t2], this.currentAnimationName = t2, this._started || (this._step(), this._started = true), this._currentFrameIndex = 0, this._currentFrame = void 0, this._endCallback = e2, true); }, e.prototype._draw = function() { var t2 = []; this._currentFrame && (t2 = this._currentFrame.images || []); for (var e2 = 0; e2 < this._overlays.length; e2++) if (e2 < t2.length) { var i2 = t2[e2], n2 = -i2[0] + "px " + -i2[1] + "px"; this._overlays[e2].style.backgroundPosition = n2, this._overlays[e2].style.display = "block"; } else this._overlays[e2].style.display = "none"; }, e.prototype._getNextAnimationFrame = function() { if (!this._currentAnimation) return 0; if (!this._currentFrame) return 0; var t2 = this._currentFrame, e2 = this._currentFrame.branching; if (this._exiting && void 0 !== t2.exitBranch) return t2.exitBranch; if (e2) for (var i2 = 100 * Math.random(), n2 = 0; n2 < e2.branches.length; n2++) { var o2 = e2.branches[n2]; if (i2 <= o2.weight) return o2.frameIndex; i2 -= o2.weight; } return this._currentFrameIndex + 1; }, e.prototype._playSound = function() { var t2, e2 = null === (t2 = this._currentFrame) || void 0 === t2 ? void 0 : t2.sound; if (e2) { var i2 = this._sounds[e2]; i2 && i2.play(); } }, e.prototype._atLastFrame = function() { return !!this._currentAnimation && this._currentFrameIndex >= this._currentAnimation.frames.length - 1; }, e.prototype._step = function() { if (this._currentAnimation) { var t2 = Math.min(this._getNextAnimationFrame(), this._currentAnimation.frames.length - 1), i2 = !this._currentFrame || this._currentFrameIndex !== t2; this._currentFrameIndex = t2, this._atLastFrame() && this._currentAnimation.useExitBranching || (this._currentFrame = this._currentAnimation.frames[this._currentFrameIndex]), this._draw(), this._playSound(), this._loop = window.setTimeout(this._step.bind(this), this._currentFrame.duration), this._endCallback && i2 && this._atLastFrame() && (this._currentAnimation.useExitBranching && !this._exiting ? this._endCallback(this.currentAnimationName, e.States.WAITING) : this._endCallback(this.currentAnimationName, e.States.EXITED)); } }, e.prototype.pause = function() { window.clearTimeout(this._loop); }, e.prototype.resume = function() { this._step(); }, e.States = { WAITING: 1, EXITED: 0 }; var i = function() { var t2 = void 0 !== window.pageXOffset, e2 = "CSS1Compat" === (document.compatMode || ""); return { scrollLeft: t2 ? window.pageXOffset : e2 ? document.documentElement.scrollLeft : document.body.scrollLeft, scrollTop: t2 ? window.pageYOffset : e2 ? document.documentElement.scrollTop : document.body.scrollTop }; }; function n(t2) { if (!t2.getClientRects().length) return { top: 0, left: 0 }; var e2 = t2.getBoundingClientRect(), i2 = t2.ownerDocument.defaultView || { pageXOffset: 0, pageYOffset: 0 }; return { top: e2.top + i2.pageYOffset, left: e2.left + i2.pageXOffset }; } function o(t2, e2) { if ("inner" === e2) return t2.clientWidth; if ("outer" === e2) return t2.offsetWidth; var i2 = window.getComputedStyle(t2, null); return "width" === e2 ? t2.clientWidth - parseInt(i2.getPropertyValue("padding-left")) - parseInt(i2.getPropertyValue("padding-right")) : "full" === e2 ? t2.offsetWidth + parseInt(i2.getPropertyValue("margin-left")) + parseInt(i2.getPropertyValue("margin-right")) : null; } function r(t2, e2) { if ("inner" === e2) return t2.clientHeight; if ("outer" === e2) return t2.offsetHeight; var i2 = window.getComputedStyle(t2, null); return "height" === e2 ? t2.clientHeight - parseInt(i2.getPropertyValue("padding-top")) - parseInt(i2.getPropertyValue("padding-bottom")) : "full" === e2 ? t2.offsetHeight + parseInt(i2.getPropertyValue("margin-top")) + parseInt(i2.getPropertyValue("margin-bottom")) : null; } var s = function() { var t2 = this; this.promise = new Promise(function(e2, i2) { t2.resolve = e2, t2.reject = i2; }); }, a = function(t2) { this._hiding = null, this._loop = null, this._active = true, this._hold = false, this._addWord = null, this._targetEl = t2, this._hidden = true, this._setup(); }; a.prototype._setup = function() { var t2 = document.createElement("div"); t2.className = "clippy-balloon", t2.setAttribute("hidden", "true"); var e2 = document.createElement("div"); e2.className = "clippy-tip"; var i2 = document.createElement("div"); i2.className = "clippy-content", t2.appendChild(e2), t2.appendChild(i2), this._balloon = t2, this._content = i2, this._targetEl.insertAdjacentElement("afterend", t2); }, a.prototype.reposition = function() { for (var t2 = ["top-left", "top-right", "bottom-left", "bottom-right"], e2 = 0; e2 < t2.length; e2++) { var i2 = t2[e2]; if (this._position(i2), !this._isOut()) break; } }, a.prototype._position = function(t2) { if (this._balloon) { var e2 = n(this._targetEl), s2 = r(this._targetEl, "height"), a2 = o(this._targetEl, "width"), l2 = i(), h2 = l2.scrollLeft, p2 = l2.scrollTop; e2.top -= h2, e2.left -= p2; var u2 = r(this._balloon, "outer"), d2 = o(this._balloon, "outer"); this._balloon.classList.remove("clippy-top-left"), this._balloon.classList.remove("clippy-top-right"), this._balloon.classList.remove("clippy-bottom-right"), this._balloon.classList.remove("clippy-bottom-left"); var c2 = 0, _ = 0; switch (t2) { case "top-left": c2 = e2.left + a2 - d2, _ = e2.top - u2 - 15; break; case "top-right": c2 = e2.left, _ = e2.top - u2 - 15; break; case "bottom-right": c2 = e2.left, _ = e2.top + s2 + 15; break; case "bottom-left": c2 = e2.left + a2 - d2, _ = e2.top + s2 + 15; } this._balloon.style.top = _ + "px", this._balloon.style.left = c2 + "px", this._balloon.classList.add("clippy-" + t2); } }, a.prototype._isOut = function() { if (this._balloon) { var t2 = n(this._balloon), e2 = r(this._balloon, "outer"), s2 = o(this._balloon, "outer"), a2 = document.querySelector("html").clientWidth, l2 = document.querySelector("html").clientHeight, h2 = i(), p2 = h2.scrollLeft, u2 = h2.scrollTop, d2 = t2.top - p2, c2 = t2.left - u2; return d2 - 5 < 0 || c2 - 5 < 0 || (d2 + e2 + 5 > l2 || c2 + s2 + 5 > a2); } }, a.prototype.speak = function(t2, e2, i2) { this._hidden = false, this.show(); var n2 = this._content; n2 && (n2.style.height = "auto", n2.style.width = "auto", n2.innerHTML = e2, n2.style.height = n2.style.height || "", n2.style.width = n2.style.width || "", n2.innerHTML = "", this.reposition(), this._complete = t2, this._sayWords(e2, i2, t2)); }, a.prototype.show = function() { this._balloon && (this._hidden || this._balloon.removeAttribute("hidden")); }, a.prototype.hide = function(t2) { var e2; t2 ? null === (e2 = this._balloon) || void 0 === e2 || e2.setAttribute("hidden", "true") : this._hiding = window.setTimeout(this._finishHideBalloon.bind(this), 2e3); }, a.prototype._finishHideBalloon = function() { var t2; this._active || (null === (t2 = this._balloon) || void 0 === t2 || t2.setAttribute("hidden", "true"), this._hidden = true, this._hiding = null); }, a.prototype._sayWords = function(t2, e2, i2) { var n2 = this; this._active = true, this._hold = e2; var o2 = t2.split(/[^\S-]/), r2 = this._content, s2 = 1; this._addWord = function() { var t3; n2._active && (s2 > o2.length ? (n2._addWord = null, n2._active = false, n2._hold || (i2(), n2.hide(false))) : (r2 && (r2.innerHTML = o2.slice(0, s2).join(" ")), s2++, n2._loop = window.setTimeout(null === (t3 = n2._addWord) || void 0 === t3 ? void 0 : t3.bind(n2), 200))); }, this._addWord(); }, a.prototype.close = function() { this._active ? this._hold = false : this._hold && this._complete && this._complete(); }, a.prototype.pause = function() { this._loop && window.clearTimeout(this._loop), this._hiding && (window.clearTimeout(this._hiding), this._hiding = null); }, a.prototype.resume = function() { this._addWord ? this._addWord() : this._hold || this._hidden || (this._hiding = window.setTimeout(this._finishHideBalloon.bind(this), 2e3)); }; var l = function(i2) { this._hidden = false, this._offset = { top: 0, left: 0 }; var n2 = i2.agent, o2 = i2.selector; this._queue = new t(this._onQueueEmpty.bind(this)); var r2 = document.createElement("div"); r2.className = "clippy", r2.setAttribute("hidden", "true"), this._el = r2, ((o2 ? document.getElementsByClassName(o2)[0] : void 0) || document.body).appendChild(this._el), this._animator = new e(this._el, n2, []), this._balloon = new a(this._el), this._setupEvents(); }; function h(t2) { return new Promise(function(e2, i2) { __variableDynamicImportRuntime0__("./agents/" + t2 + ".js").then(function(t3) { e2(t3.default); }).catch(function(t3) { i2(t3); }); }); } l.prototype.gestureAt = function(t2, e2) { var i2 = this._getDirection(t2, e2), n2 = "Gesture" + i2, o2 = "Look" + i2, r2 = this.hasAnimation(n2) ? n2 : o2; return this.play(r2); }, l.prototype.hide = function(t2, e2) { var i2 = this; return this._hidden = true, this._el, this.stop(), t2 ? (this._el.setAttribute("hidden", "true"), this.stop(), this.pause(), void (e2 && e2())) : this._playInternal("Hide", function() { i2._el.setAttribute("hidden", "true"), i2.pause(), e2 && e2(); }); }, l.prototype.moveTo = function(t2, i2, n2) { var o2 = this, r2 = "Move" + this._getDirection(t2, i2); void 0 === n2 && (n2 = 1e3), this._addToQueue(function(s2) { if (0 === n2) return o2._el.style.top = i2 + "px", o2._el.style.left = t2 + "px", o2.reposition(), void s2(); if (!o2.hasAnimation(r2)) { var a2 = function() { o2._el.removeEventListener("animationend", a2), s2(); }; return o2._el.addEventListener("animationend", a2), void o2._el.animate({ top: i2, left: t2 }, { duration: n2, iterations: 1 }); } o2._playInternal(r2, function(r3, a3) { if (a3 === e.States.EXITED && s2(), a3 === e.States.WAITING) { var l2 = function() { o2._el.removeEventListener("animationend", l2), o2._animator.exitAnimation(); }; o2._el.addEventListener("animationend", l2), o2._el.animate({ top: i2, left: t2 }, { duration: n2, iterations: 1 }); } }); }, this); }, l.prototype._playInternal = function(t2, e2) { var i2 = this; this._isIdleAnimation() && this._idleDfd && this._idleDfd.promise.finally(function() { i2._playInternal(t2, e2); }), this._animator.showAnimation(t2, e2); }, l.prototype.play = function(t2, i2, n2) { var o2 = this; return !!this.hasAnimation(t2) && (void 0 === i2 && (i2 = 5e3), this._addToQueue(function(r2) { var s2 = false; i2 && window.setTimeout(function() { s2 || o2._animator.exitAnimation(); }, i2), o2._playInternal(t2, function(t3, i3) { i3 === e.States.EXITED && (s2 = true, n2 && n2(), r2()); }); }, this), true); }, l.prototype.show = function(t2) { if (this._hidden = false, t2) return this._el.removeAttribute("hidden"), this.resume(), void this._onQueueEmpty(); var e2 = this._el.style.top, n2 = this._el.style.left; if ("auto" === e2 || "auto" !== n2) { var o2 = 0.8 * document.querySelector("html").clientWidth, r2 = 0.8 * (document.querySelector("html").clientHeight + i().scrollLeft); this._el.style.top = r2 + "px", this._el.style.left = o2 + "px"; } return this.resume(), this.play("Show"); }, l.prototype.speak = function(t2, e2) { var i2 = this; this._addToQueue(function(n2) { i2._balloon.speak(n2, t2, e2); }, this); }, l.prototype.closeBalloon = function() { this._balloon.hide(); }, l.prototype.delay = function(t2) { var e2 = this; t2 = t2 || 250, this._addToQueue(function(i2) { e2._onQueueEmpty(), window.setTimeout(i2, t2); }); }, l.prototype.stopCurrent = function() { this._animator.exitAnimation(), this._balloon.close(); }, l.prototype.stop = function() { this._queue.clear(), this._animator.exitAnimation(), this._balloon.hide(); }, l.prototype.hasAnimation = function(t2) { return this._animator.hasAnimation(t2); }, l.prototype.animations = function() { return this._animator.animations(); }, l.prototype.animate = function() { var t2 = this.animations(), e2 = t2[Math.floor(Math.random() * t2.length)]; return 0 === e2.indexOf("Idle") ? this.animate() : this.play(e2); }, l.prototype._getDirection = function(t2, e2) { var i2 = n(this._el), s2 = r(this._el, "height"), a2 = o(this._el, "width"), l2 = i2.left + a2 / 2, h2 = i2.top + s2 / 2 - e2, p2 = l2 - t2, u2 = Math.round(180 * Math.atan2(h2, p2) / Math.PI); return -45 <= u2 && u2 < 45 ? "Right" : 45 <= u2 && u2 < 135 ? "Up" : 135 <= u2 && u2 <= 180 || -180 <= u2 && u2 < -135 ? "Left" : -135 <= u2 && u2 < -45 ? "Down" : "Top"; }, l.prototype._onQueueEmpty = function() { if (!this._hidden && !this._isIdleAnimation()) { var t2 = this._getIdleAnimation(); this._idleDfd = new s(), this._animator.showAnimation(t2, this._onIdleComplete.bind(this)); } }, l.prototype._onIdleComplete = function(t2, i2) { var n2; i2 === e.States.EXITED && (null === (n2 = this._idleDfd) || void 0 === n2 || n2.resolve(void 0)); }, l.prototype._isIdleAnimation = function() { var t2 = this._animator.currentAnimationName; return t2 && 0 === t2.indexOf("Idle"); }, l.prototype._getIdleAnimation = function() { for (var t2 = this.animations(), e2 = [], i2 = 0; i2 < t2.length; i2++) { var n2 = t2[i2]; 0 === n2.indexOf("Idle") && e2.push(n2); } return e2[Math.floor(Math.random() * e2.length)]; }, l.prototype._setupEvents = function() { window.addEventListener("resize", this.reposition.bind(this)), this._el.addEventListener("mousedown", this._onMouseDown.bind(this)), this._el.addEventListener("dblclick", this._onDoubleClick.bind(this)); }, l.prototype._onDoubleClick = function() { this.play("ClickedOn") || this.animate(); }, l.prototype.reposition = function() { if ("true" === this._el.getAttribute("hidden")) { var t2 = n(this._el), e2 = r(this._el, "outer"), s2 = o(this._el, "outer"), a2 = document.querySelector("html").clientWidth, l2 = document.querySelector("html").clientHeight, h2 = i(), p2 = h2.scrollLeft, u2 = h2.scrollTop, d2 = t2.top - p2, c2 = t2.left - u2; d2 - 5 < 0 ? d2 = 5 : d2 + e2 + 5 > l2 && (d2 = l2 - e2 - 5), c2 - 5 < 0 ? c2 = 5 : c2 + s2 + 5 > a2 && (c2 = a2 - s2 - 5), this._el.style.left = c2 + "px", this._el.style.top = d2 + "px", this._balloon.reposition(); } }, l.prototype._onMouseDown = function(t2) { t2.preventDefault(), this._startDrag(t2); }, l.prototype._startDrag = function(t2) { this.pause(), this._balloon.hide(true), this._offset = this._calculateClickOffset(t2), this._moveHandle = this._dragMove.bind(this), this._upHandle = this._finishDrag.bind(this), window.addEventListener("mousemove", this._moveHandle), window.addEventListener("mouseup", this._upHandle), this._dragUpdateLoop = window.setTimeout(this._updateLocation.bind(this), 10); }, l.prototype._calculateClickOffset = function(t2) { var e2 = t2.pageX, i2 = t2.pageY, o2 = n(this._el); return { top: i2 - o2.top, left: e2 - o2.left }; }, l.prototype._updateLocation = function() { this._el.style.top = (this._targetY || 0) + "px", this._el.style.left = (this._targetX || 0) + "px", this._dragUpdateLoop = window.setTimeout(this._updateLocation.bind(this), 10); }, l.prototype._dragMove = function(t2) { t2.preventDefault(); var e2 = t2.clientX - this._offset.left, i2 = t2.clientY - this._offset.top; this._targetX = e2, this._targetY = i2; }, l.prototype._finishDrag = function() { window.clearTimeout(this._dragUpdateLoop), this._moveHandle && window.removeEventListener("mousemove", this._moveHandle), this._upHandle && window.removeEventListener("mouseup", this._upHandle), this._balloon.show(), this.reposition(), this.resume(); }, l.prototype._addToQueue = function(t2, e2) { e2 && (t2 = t2.bind(e2)), this._queue.queue(t2); }, l.prototype.pause = function() { this._animator.pause(), this._balloon.pause(); }, l.prototype.resume = function() { this._animator.resume(), this._balloon.resume(); }; var p = { Bonzi: function() { return h("Bonzi"); }, Clippy: function() { return h("Clippy"); }, F1: function() { return h("F1"); }, Genie: function() { return h("Genie"); }, Genius: function() { return h("Genius"); }, Links: function() { return h("Links"); }, Merlin: function() { return h("Merlin"); }, Peedy: function() { return h("Peedy"); }, Rocky: function() { return h("Rocky"); }, Rover: function() { return h("Rover"); } }, u = [], d = []; !function(t2, e2) { if (t2 && "undefined" != typeof document) { var i2, n2 = true === e2.prepend ? "prepend" : "append", o2 = true === e2.singleTag, r2 = "string" == typeof e2.container ? document.querySelector(e2.container) : document.getElementsByTagName("head")[0]; if (o2) { var s2 = u.indexOf(r2); -1 === s2 && (s2 = u.push(r2) - 1, d[s2] = {}), i2 = d[s2] && d[s2][n2] ? d[s2][n2] : d[s2][n2] = a2(); } else i2 = a2(); 65279 === t2.charCodeAt(0) && (t2 = t2.substring(1)), i2.styleSheet ? i2.styleSheet.cssText += t2 : i2.appendChild(document.createTextNode(t2)); } function a2() { var t3 = document.createElement("style"); if (t3.setAttribute("type", "text/css"), e2.attributes) for (var i3 = Object.keys(e2.attributes), o3 = 0; o3 < i3.length; o3++) t3.setAttribute(i3[o3], e2.attributes[i3[o3]]); var s3 = "prepend" === n2 ? "afterbegin" : "beforeend"; return r2.insertAdjacentElement(s3, t3), t3; } }('.clippy, .clippy-balloon {\n position: fixed;\n z-index: 1000;\n cursor: pointer;\n}\n\n.clippy-balloon {\n\n background: #FFC;\n color: black;\n padding: 8px;\n border: 1px solid black;\n border-radius: 5px;\n\n}\n\n.clippy-content {\n max-width: 200px;\n min-width: 120px;\n font-family: "Microsoft Sans", sans-serif;\n font-size: 10pt;\n}\n\n.clippy-tip {\n width: 10px;\n height: 16px;\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAMAAAAlvKiEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF///MAAAA////52QwgAAAAAN0Uk5T//8A18oNQQAAAGxJREFUeNqs0kEOwCAIRFHn3//QTUU6xMyyxii+jQosrTPkyPEM6IN3FtzIRk1U4dFeKWQiH6pRRowMVKEmvronEynkwj0uZJgR22+YLopPSo9P34wJSamLSU7lSIWLJU7NkNomNlhqxUeAAQC+TQLZyEuJBwAAAABJRU5ErkJggg==) no-repeat;\n position: absolute;\n}\n\n.clippy-top-left .clippy-tip {\n top: 100%;\n margin-top: 0px;\n left: 100%;\n margin-left: -50px;\n}\n\n.clippy-top-right .clippy-tip {\n top: 100%;\n margin-top: 0px;\n left: 0;\n margin-left: 50px;\n background-position: -10px 0;\n\n}\n\n.clippy-bottom-right .clippy-tip {\n top: 0;\n margin-top: -16px;\n left: 0;\n margin-left: 50px;\n background-position: -10px -16px;\n}\n\n.clippy-bottom-left .clippy-tip {\n top: 0;\n margin-top: -16px;\n left: 100%;\n margin-left: -50px;\n background-position: 0px -16px;\n}\n\n', {}); var c = { load: function(t2) { var e2 = t2 || {}, i2 = e2.name, n2 = e2.successCb, o2 = e2.failCb, r2 = e2.selector; p[i2]().then(function(t3) { var e3 = new l({ agent: t3, selector: r2 }); n2 && n2(e3); }).catch(function(t3) { o2 && o2(t3); }); }, agents: {} }; const style = ` .clippy, .clippy-balloon { position: fixed; z-index: 1000; cursor: pointer; } .clippy-balloon { background: #FFC; color: black; padding: 8px; border: 1px solid black; border-radius: 5px; } .clippy-content { max-width: 200px; min-width: 120px; font-family: 'MS Sans Serif'; font-size: 12px; } .clippy-button { background-color: transparent; border: 1px solid #d5d1b5; margin-top: 10px; border-radius: 4px; padding: 4px 14px; font-size: 12px; } .clippy-tip { width: 10px; height: 16px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAMAAAAlvKiEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF///MAAAA////52QwgAAAAAN0Uk5T//8A18oNQQAAAGxJREFUeNqs0kEOwCAIRFHn3//QTUU6xMyyxii+jQosrTPkyPEM6IN3FtzIRk1U4dFeKWQiH6pRRowMVKEmvronEynkwj0uZJgR22+YLopPSo9P34wJSamLSU7lSIWLJU7NkNomNlhqxUeAAQC+TQLZyEuJBwAAAABJRU5ErkJggg==) no-repeat; position: absolute; } .clippy-top-left .clippy-tip { top: 100%; margin-top: 0px; left: 100%; margin-left: -50px; } .clippy-top-right .clippy-tip { top: 100%; margin-top: 0px; left: 0; margin-left: 50px; background-position: -10px 0; } .clippy-bottom-right .clippy-tip { top: 0; margin-top: -16px; left: 0; margin-left: 50px; background-position: -10px -16px; } .clippy-bottom-left .clippy-tip { top: 0; margin-top: -16px; left: 100%; margin-left: -50px; background-position: 0px -16px; } `; const clippyStyle = style.trim(); const ClippyContext = React.createContext({ clippy: void 0 }); let clippyAgent; const ClippyProvider = ({ children, agentName = AGENTS.CLIPPY }) => { const [clippy, setClippy] = React.useState(); function byebye(agent, cb) { agent == null ? void 0 : agent.hide(false, () => { if (cb) cb(); }); } React.useEffect(() => { const { head } = document; const link = document.createElement("style"); link.appendChild(document.createTextNode(clippyStyle)); head.appendChild(link); return () => byebye(clippyAgent, () => { head.removeChild(link); }); }, []); React.useEffect(() => { function getAgent() { c.load({ name: agentName, successCb: (agent) => { agent.show(false); setClippy(agent); clippyAgent = agent; }, failCb: (error) => { console.error(error); setClippy(void 0); } }); } if (clippy) { byebye(clippy, () => getAgent()); } else { getAgent(); } }, [agentName]); return /* @__PURE__ */ React.createElement( ClippyContext.Provider, { value: { clippy } }, children ); }; const useClippy = () => React.useContext(ClippyContext); exports.AGENTS = AGENTS; exports.ClippyProvider = ClippyProvider; exports.useClippy = useClippy;