{"_id":"@anag0/typewriter","_rev":"2-aaf1b921baa69302479af3d885821fcb","name":"@anag0/typewriter","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@anag0/typewriter","version":"1.0.0","description":"TypeWriter effect in javascript","main":"typewriter.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/anag0/typewriter.git"},"keywords":["typewriter","typewriter","effect","matrix","effect"],"author":{"name":"Ernest Marcinko"},"license":"ISC","bugs":{"url":"https://github.com/anag0/typewriter/issues"},"homepage":"https://github.com/anag0/typewriter#readme","gitHead":"51bd4c630562bc8493aa9b04578f5e1b60c29b36","_id":"@anag0/typewriter@1.0.0","_nodeVersion":"20.2.0","_npmVersion":"9.6.6","dist":{"integrity":"sha512-Rz1jYuAqnE/a/cU/0skMNPum79lURM+A5wJi5WySYV4kg3h4GO/9d4BENuP12fnmVfbDcV7G50qbnzup95E4Jg==","shasum":"ff439a12fdb8c4793c0e29059e21f86dd389b864","tarball":"https://registry.npmjs.org/@anag0/typewriter/-/typewriter-1.0.0.tgz","fileCount":5,"unpackedSize":5126,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLAa4NOKPxB/WopPifwrTTGBMcmtZXAIkaL4uIqnBruAiEAn0gFLerABxV8WoQDWagmgeu6hs0aWr/fu9Br86Vw+Ls="}]},"_npmUser":{"name":"anag0","email":"ernest.marcinko@gmail.com"},"directories":{},"maintainers":[{"name":"anag0","email":"ernest.marcinko@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/typewriter_1.0.0_1684574602638_0.3799632770679717"},"_hasShrinkwrap":false},"1.0.1":{"name":"@anag0/typewriter","version":"1.0.1","description":"TypeWriter effect in javascript","main":"dist/typewriter.js","scripts":{"build":"webpack --mode=production --node-env=production","test":"echo \"Error: no test specified\" && exit 1","build:dev":"webpack --mode=development","build:prod":"webpack --mode=production --node-env=production"},"repository":{"type":"git","url":"git+https://github.com/anag0/typewriter.git"},"keywords":["typewriter effect","typewriter","effect","matrix","effect","native typewriter","javascript typewriter","es6","es6 typewriter","native"],"author":{"name":"Ernest Marcinko"},"license":"ISC","bugs":{"url":"https://github.com/anag0/typewriter/issues"},"homepage":"https://github.com/anag0/typewriter#readme","devDependencies":{"copy-webpack-plugin":"^11.0.0","cssnano":"5.1.11","postcss":"^8.4.23","prettier":"^2.8.8","style-loader":"^3.3.3","webpack":"^5.83.1","webpack-cli":"^4.10.0","webpack-dev-server":"^4.15.0","workbox-webpack-plugin":"^6.5.4"},"gitHead":"4c36a1b47b55b9345e099ab0ae85ff9356706daf","_id":"@anag0/typewriter@1.0.1","_nodeVersion":"20.2.0","_npmVersion":"9.6.6","dist":{"integrity":"sha512-llzazq40s4sRsN0uiknHnTj+gi1wZmK6UsKBB2GWQdDEsCxPa3wjfJ9oDtKUzuKjFnj/kXSDeDcYyZlTW3/DnA==","shasum":"5bf402ffcbc9bf0a068890f564d75e7e9f916fbd","tarball":"https://registry.npmjs.org/@anag0/typewriter/-/typewriter-1.0.1.tgz","fileCount":5,"unpackedSize":8509,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCanaF4tYVoteoq2YAQqENpgom0Kz7YAEgixQCD1qIImQIhAOStiHd6ES/QcRgW5dI+qWWtgxXi2EiUjLHzNsOXLlW7"}]},"_npmUser":{"name":"anag0","email":"ernest.marcinko@gmail.com"},"directories":{},"maintainers":[{"name":"anag0","email":"ernest.marcinko@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/typewriter_1.0.1_1684676106985_0.7599417445193779"},"_hasShrinkwrap":false},"1.0.2":{"name":"@anag0/typewriter","version":"1.0.2","description":"TypeWriter effect in javascript","main":"dist/typewriter.js","scripts":{"build":"webpack --mode=production --node-env=production","test":"echo \"Error: no test specified\" && exit 1","build:dev":"webpack --mode=development","build:prod":"webpack --mode=production --node-env=production"},"repository":{"type":"git","url":"git+https://github.com/anag0/typewriter.git"},"keywords":["typewriter effect","typewriter","effect","matrix","effect","native typewriter","javascript typewriter","es6","es6 typewriter","native"],"author":{"name":"Ernest Marcinko"},"license":"ISC","bugs":{"url":"https://github.com/anag0/typewriter/issues"},"homepage":"https://github.com/anag0/typewriter#readme","devDependencies":{"copy-webpack-plugin":"^11.0.0","cssnano":"5.1.11","postcss":"^8.4.23","prettier":"^2.8.8","style-loader":"^3.3.3","webpack":"^5.83.1","webpack-cli":"^4.10.0","webpack-dev-server":"^4.15.0","workbox-webpack-plugin":"^6.5.4"},"gitHead":"47d59431c35c6f9831c6522dccd5496d2384d195","_id":"@anag0/typewriter@1.0.2","_nodeVersion":"20.2.0","_npmVersion":"9.6.6","dist":{"integrity":"sha512-eX9Mit9AJAi+cGTx8rADlahPzt1jIRvBg1Hf3ETNDPdedmle3A5wMLnl9tbisVCSkNJoWGZXJw58IXMmCSnAHg==","shasum":"64e9f1a7062a25c9824bc0992aa8e05f09cf0ddb","tarball":"https://registry.npmjs.org/@anag0/typewriter/-/typewriter-1.0.2.tgz","fileCount":5,"unpackedSize":12113,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDREuONhammB9Cs4yoCTFY+m1JPTuQ3DeBKcCigkrMDywIgavIHz9JTDMcOpFXq9XqlDQikFTNDSWThUYyu41nuzNA="}]},"_npmUser":{"name":"anag0","email":"ernest.marcinko@gmail.com"},"directories":{},"maintainers":[{"name":"anag0","email":"ernest.marcinko@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/typewriter_1.0.2_1684745473550_0.7052624851230294"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-20T09:23:22.563Z","1.0.0":"2023-05-20T09:23:22.802Z","modified":"2023-05-22T08:51:13.930Z","1.0.1":"2023-05-21T13:35:07.143Z","1.0.2":"2023-05-22T08:51:13.729Z"},"maintainers":[{"name":"anag0","email":"ernest.marcinko@gmail.com"}],"description":"TypeWriter effect in javascript","homepage":"https://github.com/anag0/typewriter#readme","keywords":["typewriter effect","typewriter","effect","matrix","effect","native typewriter","javascript typewriter","es6","es6 typewriter","native"],"repository":{"type":"git","url":"git+https://github.com/anag0/typewriter.git"},"author":{"name":"Ernest Marcinko"},"bugs":{"url":"https://github.com/anag0/typewriter/issues"},"license":"ISC","readme":"# TypeWriter javascript effect\r\n\r\nA super simple and very small TypeWriter javascript library, only about ~2KB\r\n[Live example](https://ernestmarcinko.com/typewriter/)\r\n\r\n## Installation\r\nUse npm or yarn to install TypeWriter with a single command\r\n\r\n```shell\r\n# with npm\r\nnpm i @anag0/typewriter\r\n\r\n# with yarn\r\nyarn add @anag0/typewriter\r\n\r\n```\r\n## Via CDN\r\n\r\nIf you prefer a build, use the CDN version\r\n\r\n```html\r\n<script src=\"https://unpkg.com/@anag0/typewriter@latest/dist/typewriter.js\"></script>\r\n```\r\n\r\n## Usage\r\n```javascript\r\n// Choose a node\r\nconst element = document.querySelectorAll('p')[0];\r\n\r\n// Do the thing\r\nconst typeWriter = new TypeWriter(element, {\r\n    keepBlinking: false\r\n});\r\ntypeWriter.wait(2000)\r\n        .write('Hi!')\r\n        .delete(3)\r\n        .write('This is a typewriter script!')\r\n        .wait(2000)\r\n        .config({pauseMin: 50, pauseMax:60})\r\n        .wipe()\r\n        .write('You can change the speed.');\r\n```  \r\n\r\n## Options\r\n\r\n| Name | Type | Default value | Description |\r\n| --- | --- | --- | --- |\r\n| cursor | String | '\\|' (Pipe) | The blinking cursor |\r\n| pauseMin | Integer | 170 | Mininum wait time before the next character |\r\n| pauseMax | Integer | 230 | Maximum wait time before the next character |\r\n| keepBlinking | Bool | true | Should the cursor remain after the text is printed |\r\n| autoStart | Bool | true | Should the tasks start right away. If false then use the ``start()`` method to start the tasks |\r\n| className | String | typewriter | The class name to be used for the element |\r\n| injectStyles | Bool | true | Should the typewriter CSS be injected to the header |\r\n\r\n## Methods\r\n\r\n| Method | Params | Description |\r\n| --- | --- | --- |\r\n| write | ``String`` Text to write | Writes a text to the node innerHTML property |\r\n| delete | ``Int`` Number of Characters to delete | Deletes number of characters a from the node innerHTML property |\r\n| wait | ``Int`` Milliseconds to wait | Waits for N milliseconds before continuing with the next task |\r\n| wipe | - | Deletes everything from the target node innerHTML property |\r\n| config | ``Object`` Configuration key => value pairs | Changes the configuration |\r\n\r\n## Callback functions\r\nThese are added via the arguments (options).\r\n\r\n```javascript\r\nconst typeWriter = new TypeWriter(node, {\r\n    onFinish: (node, params)=>{\r\n        console.log(node, params);\r\n    },\r\n    onStart: (node, params)=>{\r\n        console.log(node, params);\r\n    },\r\n    onTask: (task, node, params)=>{\r\n        console.log(task, node, params);\r\n    },\r\n});\r\n``` \r\n\r\n| Name | Arguments | Description |\r\n| --- | --- | --- |\r\n| onStart | ``Element`` The Node, ``Object`` Options | Executes when the ``start()`` function is triggered |\r\n| onFinish | ``Element`` The Node, ``Object`` Options | Executes when no more tasks left in the queue |\r\n| onTask | ``Object`` Task, ``Element`` The Node, ``Object`` Options | Executes when a task is about to be executed from the queue |\r\n\r\n## Examples\r\n\r\n### Basic Usage\r\n\r\nAppends a text to the first paragraph node found\r\n\r\n```javascript\r\nconst typeWriter = new TypeWriter(document.querySelectorAll('p')[0]);\r\ntypeWriter.write('This is a typewriter script!')\r\n```  \r\n\r\nDeletes the node contents after waiting 2 seconds, then types in the new text:\r\n\r\n```javascript\r\nconst typeWriter = new TypeWriter(document.querySelectorAll('p')[0]);\r\ntypeWriter.wait(2000).wipe().write('This is a typewriter script!')\r\n```  \r\n\r\n### Advanced Usage\r\n\r\nDeletes the node contents after waiting 2 seconds, then types in the new text, deletes 7 characters, then changes the typing speed, then writes a new text.\r\n\r\n```javascript\r\nconst typeWriter = new TypeWriter(document.querySelectorAll('p')[0], {\r\n    pauseMin: 100,\r\n    pauseMax: 150,\r\n    keepBlinking: false\r\n});\r\ntypeWriter.wait(2000)\r\n    .wipe()\r\n    .write('This is a typewriter script!')\r\n    .wait(2000).\r\n    .delete(7)\r\n    .config({pauseMin: 50, pauseMax:100})\r\n    .write('example!');\r\n```  \r\n\r\n### Custom class name & styles injection\r\n\r\nBy default the styles are injected to the document header. You can skip that, and add the styles manually from the ``typewriter.css`` file, or:\r\n\r\n```html\r\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@anag0/typewriter@latest/dist/typewriter.css\">\r\n```\r\n\r\nIn that case the ``injectStyles`` option has to be ``false``:\r\n\r\n```javascript\r\nconst typeWriter = new TypeWriter(document.querySelectorAll('p')[0], {\r\n    injectStyles: false\r\n});\r\n```  \r\n\r\nYou can also specify a custom wrapper class name:\r\n\r\n```javascript\r\nconst typeWriter = new TypeWriter(document.querySelectorAll('p')[0], {\r\n    className: \"myCustomTypewriter\"\r\n});\r\n```  \r\n\r\nIf injectStyles is enabled, the className is automatically changed within the injected styles.\r\n\r\n### Chaining multiple TypeWriters via callbacks\r\n\r\nUsing the ``onFinish`` and ``autoStart`` options you can chain the typewriter scripts together, so the next one is always started after the previous one finishes.\r\n\r\n```javascript\r\nconst node1 = document.querySelector('#node1');\r\nconst node2 = document.querySelector('#node2');\r\nconst node3 = document.querySelector('#node3');\r\n\r\nconst typeWriter1 = new TypeWriter(node1, {\r\n    autoStart: false,\r\n    keepBlinking: false,\r\n    onFinish: (node, params)=>{\r\n        typeWriter2.start()\r\n    },\r\n});\r\nconst typeWriter2 = new TypeWriter(node2, {\r\n    autoStart: false,\r\n    keepBlinking: false,\r\n    onFinish: ()=>{\r\n        typeWriter3.start()\r\n    }\r\n});\r\nconst typeWriter3 = new TypeWriter(node3, {\r\n    autoStart: false,\r\n    keepBlinking: false\r\n});\r\n\r\ntypeWriter1.write('This is the first typewriter writing..').start();\r\ntypeWriter2.write('..this is the second one..');\r\ntypeWriter3.write('..and this is the third.');\r\n``` ","readmeFilename":"readme.md"}