From 46198430d4d57c7509ed69f68689ef4a55a63db9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=8F=E5=AF=85?= <49554285+suyin-long@users.noreply.github.com> Date: Thu, 19 May 2022 00:56:20 +0800 Subject: [PATCH] activate-power-mode --- .../1.0/activate-power-mode.js | 329 ++++++++++++++++++ libs/activate-power-mode/package.json | 19 + 2 files changed, 348 insertions(+) create mode 100644 libs/activate-power-mode/1.0/activate-power-mode.js create mode 100644 libs/activate-power-mode/package.json diff --git a/libs/activate-power-mode/1.0/activate-power-mode.js b/libs/activate-power-mode/1.0/activate-power-mode.js new file mode 100644 index 000000000..34604d2c4 --- /dev/null +++ b/libs/activate-power-mode/1.0/activate-power-mode.js @@ -0,0 +1,329 @@ +(function webpackUniversalModuleDefinition(root, factory) { + if (typeof exports === 'object' && typeof module === 'object') + module.exports = factory(); + else if (typeof define === 'function' && define.amd) + define([], factory); + else if (typeof exports === 'object') + exports["POWERMODE"] = factory(); + else + root["POWERMODE"] = factory(); +})(this, function () { + return /******/ (function (modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if (installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false + /******/ + }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; + /******/ + } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); + /******/ + }) +/************************************************************************/ +/******/([ +/* 0 */ +/***/ (function (module, exports, __webpack_require__) { + + 'use strict'; + + var canvas = document.createElement('canvas'); + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999'; + window.addEventListener('resize', function () { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + }); + document.body.appendChild(canvas); + var context = canvas.getContext('2d'); + var particles = []; + var particlePointer = 0; + var rendering = false; + + POWERMODE.shake = true; + + function getRandom(min, max) { + return Math.random() * (max - min) + min; + } + + function getColor(el) { + if (POWERMODE.colorful) { + var u = getRandom(0, 360); + return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')'; + } else { + return window.getComputedStyle(el).color; + } + } + + function getCaret() { + var el = document.activeElement; + var bcr; + if (el.tagName === 'TEXTAREA' || + (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) { + var offset = __webpack_require__(1)(el, el.selectionEnd); + bcr = el.getBoundingClientRect(); + return { + x: offset.left + bcr.left, + y: offset.top + bcr.top, + color: getColor(el) + }; + } + var selection = window.getSelection(); + if (selection.rangeCount) { + var range = selection.getRangeAt(0); + var startNode = range.startContainer; + if (startNode.nodeType === document.TEXT_NODE) { + startNode = startNode.parentNode; + } + bcr = range.getBoundingClientRect(); + return { + x: bcr.left, + y: bcr.top, + color: getColor(startNode) + }; + } + return { x: 0, y: 0, color: 'transparent' }; + } + + function createParticle(x, y, color) { + return { + x: x, + y: y, + alpha: 1, + color: color, + velocity: { + x: -1 + Math.random() * 2, + y: -3.5 + Math.random() * 2 + } + }; + } + + function POWERMODE() { + { // spawn particles + var caret = getCaret(); + var numParticles = 5 + Math.round(Math.random() * 10); + while (numParticles--) { + particles[particlePointer] = createParticle(caret.x, caret.y, caret.color); + particlePointer = (particlePointer + 1) % 500; + } + } + { // shake screen + if (POWERMODE.shake) { + var intensity = 1 + 2 * Math.random(); + var x = intensity * (Math.random() > 0.5 ? -1 : 1); + var y = intensity * (Math.random() > 0.5 ? -1 : 1); + document.body.style.marginLeft = x + 'px'; + document.body.style.marginTop = y + 'px'; + setTimeout(function () { + document.body.style.marginLeft = ''; + document.body.style.marginTop = ''; + }, 75); + } + } + if (!rendering) { + requestAnimationFrame(loop); + } + }; + POWERMODE.colorful = false; + + function loop() { + rendering = true; + context.clearRect(0, 0, canvas.width, canvas.height); + var rendered = false; + var rect = canvas.getBoundingClientRect(); + for (var i = 0; i < particles.length; ++i) { + var particle = particles[i]; + if (particle.alpha <= 0.1) continue; + particle.velocity.y += 0.075; + particle.x += particle.velocity.x; + particle.y += particle.velocity.y; + particle.alpha *= 0.96; + context.globalAlpha = particle.alpha; + context.fillStyle = particle.color; + context.fillRect( + Math.round(particle.x - 1.5) - rect.left, + Math.round(particle.y - 1.5) - rect.top, + 3, 3 + ); + rendered = true; + } + if (rendered) { + requestAnimationFrame(loop); + } else { + rendering = false; + } + } + + module.exports = POWERMODE; + + + /***/ + }), +/* 1 */ +/***/ (function (module, exports) { + + /* jshint browser: true */ + + (function () { + + // The properties that we copy into a mirrored div. + // Note that some browsers, such as Firefox, + // do not concatenate properties, i.e. padding-top, bottom etc. -> padding, + // so we have to do every single property specifically. + var properties = [ + 'direction', // RTL support + 'boxSizing', + 'width', // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does + 'height', + 'overflowX', + 'overflowY', // copy the scrollbar for IE + + 'borderTopWidth', + 'borderRightWidth', + 'borderBottomWidth', + 'borderLeftWidth', + 'borderStyle', + + 'paddingTop', + 'paddingRight', + 'paddingBottom', + 'paddingLeft', + + // https://developer.mozilla.org/en-US/docs/Web/CSS/font + 'fontStyle', + 'fontVariant', + 'fontWeight', + 'fontStretch', + 'fontSize', + 'fontSizeAdjust', + 'lineHeight', + 'fontFamily', + + 'textAlign', + 'textTransform', + 'textIndent', + 'textDecoration', // might not make a difference, but better be safe + + 'letterSpacing', + 'wordSpacing', + + 'tabSize', + 'MozTabSize' + + ]; + + var isFirefox = window.mozInnerScreenX != null; + + function getCaretCoordinates(element, position, options) { + + var debug = options && options.debug || false; + if (debug) { + var el = document.querySelector('#input-textarea-caret-position-mirror-div'); + if (el) { el.parentNode.removeChild(el); } + } + + // mirrored div + var div = document.createElement('div'); + div.id = 'input-textarea-caret-position-mirror-div'; + document.body.appendChild(div); + + var style = div.style; + var computed = window.getComputedStyle ? getComputedStyle(element) : element.currentStyle; // currentStyle for IE < 9 + + // default textarea styles + style.whiteSpace = 'pre-wrap'; + if (element.nodeName !== 'INPUT') + style.wordWrap = 'break-word'; // only for textarea-s + + // position off-screen + style.position = 'absolute'; // required to return coordinates properly + if (!debug) + style.visibility = 'hidden'; // not 'display: none' because we want rendering + + // transfer the element's properties to the div + properties.forEach(function (prop) { + style[prop] = computed[prop]; + }); + + if (isFirefox) { + // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275 + if (element.scrollHeight > parseInt(computed.height)) + style.overflowY = 'scroll'; + } else { + style.overflow = 'hidden'; // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll' + } + + div.textContent = element.value.substring(0, position); + // the second special handling for input type="text" vs textarea: spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037 + if (element.nodeName === 'INPUT') + div.textContent = div.textContent.replace(/\s/g, "\u00a0"); + + var span = document.createElement('span'); + // Wrapping must be replicated *exactly*, including when a long word gets + // onto the next line, with whitespace at the end of the line before (#7). + // The *only* reliable way to do that is to copy the *entire* rest of the + // textarea's content into the created at the caret position. + // for inputs, just '.' would be enough, but why bother? + span.textContent = element.value.substring(position) || '.'; // || because a completely empty faux span doesn't render at all + div.appendChild(span); + + var coordinates = { + top: span.offsetTop + parseInt(computed['borderTopWidth']), + left: span.offsetLeft + parseInt(computed['borderLeftWidth']) + }; + + if (debug) { + span.style.backgroundColor = '#aaa'; + } else { + document.body.removeChild(div); + } + + return coordinates; + } + + if (typeof module != "undefined" && typeof module.exports != "undefined") { + module.exports = getCaretCoordinates; + } else { + window.getCaretCoordinates = getCaretCoordinates; + } + + }()); + + /***/ + }) +/******/]) +}); +; \ No newline at end of file diff --git a/libs/activate-power-mode/package.json b/libs/activate-power-mode/package.json new file mode 100644 index 000000000..d7e3c953b --- /dev/null +++ b/libs/activate-power-mode/package.json @@ -0,0 +1,19 @@ +{ + "name": "activate-power-mode", + "filename": "activate-power-mode.js", + "version": "1.0", + "description": "打字特效", + "homepage": "https://github.com/suyin-long/activate-power-mode", + "keywords": [ + "power mode", + "打字特效" + ], + "maintainers": [ + { + "name": "苏寅", + "web": "https://suyin-blog.club/", + "mail": "2244255015@qq.com" + } + ], + "repositories": [] +} \ No newline at end of file