{"_id":"@bluecoaster455/cryo-ui","_rev":"1-37799158d629a9495941cd75e8edc13c","name":"@bluecoaster455/cryo-ui","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@bluecoaster455/cryo-ui","version":"0.2.0","description":"A vanilla JavaScript library to freeze certain elements of the user interface.","main":"build/index.js","scripts":{"start":"node scripts/start.js","build":"node scripts/build.js","demo":"node scripts/demo.js","test":"node scripts/test.js","coverage":"node scripts/test.js --coverage --watchAll=false","postinstall":"node bin/postinstall","prepare":"npm run build","trypublish":"npm publish || true"},"repository":{"type":"git","url":"git+https://github.com/Bluecoaster455/cryo-ui.git"},"author":{"name":"Bluecoaster455","email":"bluecoaster455@gmail.com","url":"https://github.com/Bluecoaster455"},"bugs":{"url":"https://github.com/Bluecoaster455/cryo-ui/issues"},"homepage":"https://github.com/Bluecoaster455/cryo-ui","keywords":["library","frontend","javascript","vanilla","freeze","plugin"],"license":"MIT","devDependencies":{"@babel/core":"7.11.6","@svgr/webpack":"5.4.0","@testing-library/jest-dom":"^5.11.4","@testing-library/react":"^11.0.2","@testing-library/user-event":"^12.1.4","@typescript-eslint/eslint-plugin":"^4.0.0","@typescript-eslint/parser":"^3.10.1","babel-eslint":"10.1.0","babel-jest":"^26.3.0","babel-loader":"8.1.0","babel-plugin-named-asset-import":"^0.3.6","babel-preset-react-app":"^9.1.2","camelcase":"^6.0.0","case-sensitive-paths-webpack-plugin":"2.3.0","css-loader":"4.3.0","deepmerge":"^4.2.2","dotenv":"8.2.0","dotenv-expand":"5.1.0","eslint":"^7.8.1","eslint-config-react-app":"^5.2.1","eslint-loader":"4.0.2","eslint-plugin-flowtype":"4.7.0","eslint-plugin-import":"2.22.0","eslint-plugin-jsx-a11y":"6.3.1","eslint-plugin-react":"7.20.6","eslint-plugin-react-hooks":"^4.1.2","file-loader":"6.1.0","fs-extra":"^9.0.1","html-webpack-plugin":"4.4.1","identity-obj-proxy":"3.0.0","jest":"26.4.2","jest-environment-jsdom-fourteen":"1.0.1","jest-resolve":"26.4.0","jest-watch-typeahead":"0.6.1","mini-css-extract-plugin":"0.11.1","optimize-css-assets-webpack-plugin":"5.0.4","pnp-webpack-plugin":"1.6.4","postcss-flexbugs-fixes":"4.2.1","postcss-loader":"3.0.0","postcss-normalize":"9.0.0","postcss-preset-env":"6.7.0","postcss-safe-parser":"4.0.2","react":"^16.13.1","react-app-polyfill":"^1.0.6","react-dev-utils":"^10.2.1","react-dom":"^16.13.1","resolve":"1.17.0","resolve-url-loader":"3.1.1","sass":"^1.26.10","sass-loader":"10.0.2","semver":"7.3.2","style-loader":"1.2.1","terser-webpack-plugin":"4.2.0","ts-pnp":"1.2.0","url-loader":"4.1.0","webpack":"4.44.1","webpack-dev-server":"3.11.0","webpack-manifest-plugin":"2.2.0","workbox-webpack-plugin":"5.1.4"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"jest":{"roots":["<rootDir>/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts","!src/lib/index.js","!src/demo/index.js","!src/utils/**","!src/**/*.d.ts","!**/tests/**"],"setupFiles":["react-app-polyfill/jsdom"],"setupFilesAfterEnv":["<rootDir>/src/setupTests.js"],"testMatch":["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}","<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jest-environment-jsdom-fourteen","transform":{"^.+\\.(js|jsx|ts|tsx)$":"<rootDir>/node_modules/babel-jest","^.+\\.css$":"<rootDir>/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":"<rootDir>/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"]},"babel":{"presets":["@babel/preset-env","@babel/preset-react"],"plugins":[["@babel/plugin-proposal-class-properties"]]},"gitHead":"f266eeeb5a53ea3ef869551222d1bc27f9073242","_id":"@bluecoaster455/cryo-ui@0.2.0","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-iiEoyBxKlGstUkcspv7P4V3Yar/Z3yf79eDvoTid36d23zBBRdoAzpU6UtfgJzAvuAcQthdFb8bksq5yRFKiWQ==","shasum":"2635c381be3b29df40784bc8cb71f2735fc34bd6","tarball":"https://registry.npmjs.org/@bluecoaster455/cryo-ui/-/cryo-ui-0.2.0.tgz","fileCount":8,"unpackedSize":38577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZmmtCRA9TVsSAnZWagAAv5wP/jSIRqFhPNmjU9/1UJqW\nHb6Jhfm7tulb/ISoBfMeOhavxp4LKm4bI0P7Gw6H2OIICNTyicmf+9hgx/Qs\noD4MXL8tvuVj4CTKemrkLhklzm4k4ewE+VRBfjWyXPnkKU3qSBXwKr4pUWCS\n8LvjtO3qP0e39sHG4vnyI1slNrXZ9ZvyzDI6U0qSFSjHqTyij+Dj+JNzGWRD\nmY3qWZzCsASklcwdhIKy0mgj5VZjyjoTorj/c7CZSNg230SuMv9jNUzzw+Xz\nyrDpUPmUWHV8rGQN2dUdGbdspPof8ANtCTd9pAZwQSC2B6cYsXIb4zoA9WkJ\n+GmHN1FE8FMT81M9UjSlfZ8/JhMHZGYTmnJ3bzwLudLwMNK4/fqv5fbC8zfU\niTs4HAe25tbRxArXIDP7XhxTMwL9BEQtAxHZvSHuaNjp4E6byiJPPH8tisGN\nj6DE2ioca+xdWrGNODhNlM9g67v0dKzmm0HWxi+aY22a7X6zXEQ1XkAw745R\nNF3oKe99GdIMk/fZB7PnxLK0uToXpfj/bYQ2Nr1d6AgubU0dMkOZm0lgfMk6\n5S2QV7OVDU85HGztb+8luAydEF7s1LkxTmDfueZaRBIahpDMXcfad/DdVc8Y\nQcU9QwEVTdzzx29g3W6qb70QH4QBOTC5No+bKlP9x4LWQZ11/iM7hFW4Ct8w\n8IM3\r\n=rQAu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC8PR4o1Xn49YBLLDbyXQW42fH/YAOBP8VwGXYYb8MBqAiEAs5Zry+xLD5Maudlc9CJEsLtbkVcSzTEWKuuuQVqRwu0="}]},"maintainers":[{"name":"indiegamelover","email":"indiegamelover@hotmail.com"},{"name":"bluecoaster","email":"bluecoaster455@gmail.com"}],"_npmUser":{"name":"bluecoaster","email":"bluecoaster455@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cryo-ui_0.2.0_1600547244602_0.6951652024147443"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-19T20:27:24.336Z","0.2.0":"2020-09-19T20:27:24.752Z","modified":"2022-04-04T19:45:06.794Z"},"maintainers":[{"name":"indiegamelover","email":"indiegamelover@hotmail.com"},{"name":"bluecoaster","email":"bluecoaster455@gmail.com"}],"description":"A vanilla JavaScript library to freeze certain elements of the user interface.","homepage":"https://github.com/Bluecoaster455/cryo-ui","keywords":["library","frontend","javascript","vanilla","freeze","plugin"],"repository":{"type":"git","url":"git+https://github.com/Bluecoaster455/cryo-ui.git"},"author":{"name":"Bluecoaster455","email":"bluecoaster455@gmail.com","url":"https://github.com/Bluecoaster455"},"bugs":{"url":"https://github.com/Bluecoaster455/cryo-ui/issues"},"license":"MIT","readme":"# ❄ Cryo UI\r\nA vanilla JavaScript library to freeze certain elements of the user interface.\r\n\r\nDemo: [http://bluecoaster455.github.io/cryo-ui/demo](http://bluecoaster455.github.io/cryo-ui/demo)\r\n\r\n## Installation\r\n\r\nAdd the css and the script files to your project:\r\n```html\r\n<html>\r\n  <head>\r\n    ...\r\n    <link href=\"/path/to/index.css\" type=\"text/css\" rel=\"stylesheet\"/>\r\n  </head>\r\n  <body>\r\n    ...\r\n    <script src=\"/path/to/index.js\" type=\"text/javascript\"></script>\r\n  </body>\r\n</html>\r\n```\r\n## Usage\r\n\r\n### Basic\r\n\r\n```javascript\r\n// Freeze the entire user interface\r\nCryoUI.freeze();\r\n\r\n// Unfreeze all the user interface\r\nCryoUI.unfreeze();\r\n\r\n// Change de default options!\r\nCryoUI.defaultOptions = {\r\n  selector: \"#my-selector\",\r\n  template: `<div style=\"font-weight:bold\">My app</div><div>{{text}}</div>`,\r\n  text: \"Loading...\"\r\n}\r\n```\r\n\r\n\r\n## Options\r\nThese options are passed inside the CryoUI.freeze(options) function. Whatever is passed in the options parameter will merge with the defaultOptions.\r\n```javascript\r\nvar options = {\r\n  selector: \"#my-selector\", // Element to freeze\r\n  template: \"<div>My loader</div><div>{{text}}</div>\", // Template to use as the wrapper for the text to display.\r\n  text: \"Loading...\" // Text to display in the content.\r\n}\r\n```\r\n\r\n### Examples\r\n\r\n\"instance\" is the instatiation of Cryo returned by the CryoUI.freeze() method used to modify it for later freezing or calling instance.unfreeze().\r\n\r\n```javascript\r\n// Freeze the whole user interface\r\nvar instance = CryoUI.freeze();\r\n```\r\n\r\n```javascript\r\n// Freeze #my-div\r\nvar instance = CryoUI.freeze({\r\n  selector: \"#my-div\"\r\n});\r\n```\r\n\r\n```javascript\r\n// Freeze #my-div and put \"Please wait...\" as the text.\r\nvar instance = CryoUI.freeze({\r\n  selector: \"#my-div\",\r\n  text: \"Please wait...\"\r\n});\r\n```\r\n\r\n```javascript\r\n// Freeze #my-div. The end result in this example will be \"<div class=\"my-custom-styles\">Please wait...</div>\"\r\nvar instance = CryoUI.freeze({\r\n  selector: \"#my-div\",\r\n  text: \"Please wait...\",\r\n  template: `<div class=\"my-custom-styles\">{{text}}</div>`\r\n});\r\n```\r\n\r\n```javascript\r\n// Freeze #my-div. The content will the content of #my-template including itself.\r\nvar instance = CryoUI.freeze({\r\n  selector: \"#my-div\",\r\n  template: document.querySelector(\"#my-template\")\r\n});\r\n```\r\n\r\n## Licence\r\nCryo UI is under [MIT licence](https://opensource.org/licenses/mit-license.php)","readmeFilename":"README.md"}