{"_id":"@astrocaleb/content-slider","_rev":"1-5c43d769f020576dc84594c829280e7d","name":"@astrocaleb/content-slider","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@astrocaleb/content-slider","version":"1.0.0","author":{"name":"Caleb Dudley"},"description":"Visually navigate between layered content without leaving the page.","license":"MIT","main":"index.js","keywords":["content slider","animated content","slider","front-end","javascript"],"repository":{"type":"git","url":"git+https://github.com/AstroCaleb/content-slider.git"},"homepage":"https://github.com/AstroCaleb/content-slider","bugs":{"url":"https://github.com/AstroCaleb/content-slider/issues"},"browser":"dist/content-slider.js","babel":{"presets":["@babel/preset-env"]},"plugins":["@babel/plugin-proposal-class-properties"],"browserslist":"> 0.25%, not dead, last 2 versions, IE 11","scripts":{"build":"rollup -c rollup.config.js","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@babel/core":"^7.8.4","@babel/preset-env":"^7.8.4","rollup":"^2.45.2","@rollup/plugin-babel":"^5.3.0","rollup-plugin-terser":"^7.0.2"},"gitHead":"e19436f57e12d1cbc9201b92fdcabbfc2047b549","_id":"@astrocaleb/content-slider@1.0.0","_nodeVersion":"10.15.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-v0F1EBvjH2sf5tnU02mwuqNjEk19D+KsQA8gzekfUo+XREKFt+oHXryr5RsVAX2CcCynF3KvunZzQDfw3wBWvA==","shasum":"de93cd6feb33fc8bb44abd8113ed706cb1c67b2b","tarball":"https://registry.npmjs.org/@astrocaleb/content-slider/-/content-slider-1.0.0.tgz","fileCount":11,"unpackedSize":75681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfxyoCRA9TVsSAnZWagAAs6gQAJazt8MYm+qYy5DmZdX+\ncWLv2Au2WgrGVnaTRG38jFrRMC0mI8eXEP7nzmzk/LAP87zLwsX3UjRIjSgn\nwvN0Wgv5glPH+FgTnx1st0X41O/J6tKd8FrNRdfRKbwO4HywnWv1aEOwiV/f\nliNUZ7ozUjo9jSszY07ZmsXX4QH3anwlS8bCldWlKOgR2qF5QQe8zpixiivG\nZX508yFLpTevkXyECA2baoLcEPwIS3fk0xlKXm0toNKs23aplNcPNg3ncy+t\no+raFxHYErKL5TkEdyFgtDcknIboBBoyzaAB227x+wNHXRAbWW+VOsAvNH/g\noc92iz/qXm1xXmXLlvl4TFauXvN93z8zCdXbYL71IICY+nywiGvWNmcLGQee\nXcsNw1JnxFEeDmYADDWHUoVUa66LbMuLVq/ydiZWOuDrwMj1NrPpuQ6bG90s\nXw44CX7Ld9EDA6InPiuK1Bjt4pegUfvhxNSKs1ATDO3Y2CbRyRKcDBrQJFQx\ntXPc/slxeprUh5qLgrZWz7c34xa598ZUhriwxFfnrxHz40SY9h2VuNoaD8Xt\nt4pzERR57XDzDmf0beOazd+kL/qOJ8UacBjyyZUJuam4ft4/wiq9vuH2VrXQ\nQiTqAxuQsVJNqhOG6CMDx5HSM/GVJ3CQzOEeL3yRSMbsKCct6w4Lr01ainnI\n3JUI\r\n=PMBU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEv++JMb/rAiL5HjgTyW64IalfX0S6pVxNfwDQLOaItAiEA7ShmcIYvieNVbeR6xhE1oZDp/G7wIE7TkhpG3LUboj0="}]},"_npmUser":{"name":"astrocaleb","email":"caleb@spacedashboard.com"},"directories":{},"maintainers":[{"name":"astrocaleb","email":"caleb@spacedashboard.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/content-slider_1.0.0_1618943144163_0.04375719672316891"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-20T18:25:44.118Z","1.0.0":"2021-04-20T18:25:44.289Z","modified":"2022-04-04T15:54:34.192Z"},"maintainers":[{"name":"astrocaleb","email":"caleb@spacedashboard.com"}],"description":"Visually navigate between layered content without leaving the page.","homepage":"https://github.com/AstroCaleb/content-slider","keywords":["content slider","animated content","slider","front-end","javascript"],"repository":{"type":"git","url":"git+https://github.com/AstroCaleb/content-slider.git"},"author":{"name":"Caleb Dudley"},"bugs":{"url":"https://github.com/AstroCaleb/content-slider/issues"},"license":"MIT","readme":"# content-slider\n\n[![Size](https://img.shields.io/github/size/astrocaleb/content-slider/dist/content-slider.min.js)](https://www.npmjs.com/package/@astrocaleb/content-slider)\n[![Dependencies](https://img.shields.io/david/astrocaleb/content-slider.svg)](https://www.npmjs.com/package/@astrocaleb/content-slider)\n\n> Visually navigate between layered content without leaving the page.\n\n## Getting started\n\n```text\ndist/\n├── content-slider.js\n├── content-slider.min.js\n├── content-slider.css\n└── content-slider.min.css\n```\n\n### Installation\n\n```bash\n# npm\nnpm i @astrocaleb/content-slider\n```\n\nIn browser:\n\n```html\n<!-- not required unless `options.injectCSS` is set to `false` -->\n<link href=\"/path/to/content-slider.css\" rel=\"stylesheet\">\n\n<!-- not required if importing the `ContentSlider` module -->\n<script src=\"/path/to/content-slider.js\"></script>\n```\n\n## Usage\n\n### HTML\n\nThis is the minimum markup required for using the default configuration.\n\n```html\n<div data-content-slider> <!-- Wrapper for this content slider instance -->\n    <div data-cs-panes>   <!-- Content panes wrapper -->\n        <div data-cs-pane data-breadcrumb-text=\"Pane 1\">...</div>\n        <div data-cs-pane data-breadcrumb-text=\"Pane 2\">...</div>\n    </div>\n</div>\n```\n\nThe following data attributes are required for each content slider instance:\n- `data-content-slider` (only one per instance)\n- `data-cs-panes` (only one per instance)\n- `data-cs-pane` (as many as you need)\n- *Only* if defining breadcrumb markup manually (see [examples](#examples)):\n  - `data-cs-breadcrumbs` (only one per instance)\n  - `data-slider-breadcrumb` (as many as you need)\n\n### JS\n\n```js\nconst slider = new ContentSlider(selector, options);\n```\n\n- **selector** (optional, but *highly* recommended)\n  - Type: `String`\n  - Default: `'[data-content-slider]'`\n  - This is the wrapper selector for this specific instance.\n  - It's highly recommended this is defined because it's required if you were to have more than one `ContentSlider` instance on the same page or if you are defining options.\n\n- **options** (optional)\n  - Type: `Object`\n  - The options to control the individual content slider instance. Check out the available [options](#options).\n\n### CSS\n\nBy default, every instance of `ContentSlider` attempts to inject styles directly into the head of the document if they don't exist already. **Because of this** you just need to use `options.css` for updating styles. Custom CSS options are applied to all `ContentSlider` instances because the existing styles defined in the head are overwritten with the custom CSS options.\n\n**Note:** As of this version, if you want more control over styling and want to define the CSS file yourself, an option of `injectCSS` will need to be set to `false` for every new `ContentSlider` instance.\n\nCSS variables are used (take note for browser support), and they are defined using the `html` selector. You can override them by targeting `:root` and define custom variable values. Example:\n\n```css\n:root {\n    --cs-link: #da0000;\n    --cs-link-hover: #ff0f0f;\n    --cs-background: transparent;\n}\n```\n\nHere are the default CSS variables used:\n\n```css\nhtml {\n    --cs-background: #FFF;\n    --cs-separator: \"\\276F\";\n    --cs-link-hue: 204;\n    --cs-link-saturation: 82%;\n    --cs-link-lightness: 36%;\n    --cs-link: hsl(var(--cs-link-hue), var(--cs-link-saturation), var(--cs-link-lightness));\n    --cs-link-hover: hsl(var(--cs-link-hue), var(--cs-link-saturation), calc(var(--cs-link-lightness) + 10%));\n    --cs-transition-speed: 0.35s;\n}\n```\n\n## Examples ([interactive examples](https://astrocaleb.github.io/content-slider/))\n\n### Automatic Breadcrumb Creation\n\nIf you don't want to worry yourself with defining the breadcrumb markup and would like it to be dynamically generated, this is the best configuration for you.\n\n**Note:** A unique `id` is automatically generated for each pane (each `data-cs-pane` element) unless defined in the markup manually. The `id`s are used by the breadcrumbs by default.\n\n#### HTML\n\n```html\n<div data-content-slider class=\"my-content-slider\">\n    <div data-cs-panes>\n        <div data-cs-pane data-breadcrumb-text=\"Pane 1\">...</div>\n        <div data-cs-pane data-breadcrumb-text=\"Pane 2\">...</div>\n    </div>\n</div>\n```\n\n#### JS\n\n```js\nimport ContentSlider from '@astrocaleb/content-slider';\n\n// All default options\nconst slider = new ContentSlider('.my-content-slider');\n\n// OR\n\n// Use options to change how the content slider instance operates\nconst slider = new ContentSlider('.my-content-slider', {\n    progressiveBreadcrumbs: true,\n    callback: function() {\n        alert(\"Pane is now visible!\");\n    }\n});\n```\n\nYou can also manually trigger showing a content pane using the `id` for a given pane. This requires manually defining an `id` per pane (each `data-cs-pane` element). Example:\n\n#### HTML\n\n```html\n<div data-content-slider class=\"my-content-slider\">\n    <div data-cs-panes>\n        <div data-cs-pane id=\"pane-1\" data-breadcrumb-text=\"Pane 1\">...</div>\n        <div data-cs-pane id=\"pane-2\" data-breadcrumb-text=\"Pane 2\">...</div>\n    </div>\n</div>\n```\n\n#### JS\n\n```js\nconst slider = new ContentSlider('.my-content-slider');\nslider.showContentSliderPane('#pane-2');\n```\n\nThe `showContentSliderPane` method accepts a pane `id` (required) but also optionally accepts a callback function, which overrides the [default callback option](#callback) from the constructor.\n\n```js\nconst slider = new ContentSlider('.my-content-slider');\nslider.showContentSliderPane('#pane-2', function() {\n    alert(\"This pane was triggered manually!\");\n});\n```\n\n### Manual Breadcrumb Creation\n\nIf you need more control over the breadcrumbs markup, this is the where you want to start. The `data-cs-breadcrumbs` (breadcrumb wrapper) and `data-slider-breadcrumb` (each breadcrumb element) data attributes are **required** regardless of custom markup.\n\n#### HTML\n\n```html\n<div data-content-slider class=\"my-content-slider\">\n    <div data-cs-breadcrumbs>\n        <span data-cs-breadcrumb>Pane 1</span>\n        <span data-cs-breadcrumb>Pane 2</span>\n        <span data-cs-breadcrumb>Pane 3</span>\n    </div>\n    <div data-cs-panes>\n        <div data-cs-pane>...</div>\n        <div data-cs-pane>...</div>\n        <div data-cs-pane>...</div>\n    </div>\n</div>\n```\n\n#### JS\n\n```js\nconst slider = new ContentSlider('.my-content-slider', {\n    automaticBreadcrumbs: false\n});\n```\n\n## Options\n\n- [`callback`](#callback)\n- [`motion`](#motion)\n- [`injectCSS`](#injectCSS)\n- [`startingIndex`](#startingIndex)\n- [`breadcrumbsEnabled`](#breadcrumbsEnabled)\n- [`automaticBreadcrumbs`](#automaticBreadcrumbs)\n- [`progressiveBreadcrumbs`](#progressiveBreadcrumbs)\n- [`css`](#css)\n\n### callback\n\n- Type: `Function`\n- Default: no-op\n\nCallback that fires immediately after a pane comes into view.\n\n### motion\n\n- Type: `Boolean`\n- Default: `true`\n\nDisable this option to change the sliding animation to be a fade instead. This is helpful for accessibility concerns.\n\n### injectCSS\n\n- Type: `Boolean`\n- Default: `true`\n\nIf this option is changed, it needs to be changed for all instances of `ContentSlider`. Even one instance using the default setting will inject the CSS into the head of the document.\n\nIf this is disabled, [`options.css`](#css) is no longer respected and you will need to leverage the CSS variables yourself. See the section above with the [available CSS variables](#css).\n\n### startingIndex\n\n- Type: `Number`\n- Default: `0`\n\nChange which pane is visible at time of render. This is a regular zero-based index.\n\n### breadcrumbsEnabled\n\n- Type: `Boolean`\n- Default: `true`\n\nThis option is respected only when `automaticBreadcrumbs` is `true`.\n\n### automaticBreadcrumbs\n\n- Type: `Boolean`\n- Default: `true`\n\nWhen this is disabled the breadcrumbs are not rendered automatically. `breadcrumbsEnabled` is ignored if this is disabled.\n\n### progressiveBreadcrumbs\n\n- Type: `Boolean`\n- Default: `false`\n\nBy default all breadcrumbs will render automatically. If this is `true` then breadcrumbs only automatically render after the first pane. Currently the only breadcrumbs that will render for each pane after the first will be:\n- First pane breadcrumb (actionable back to first pane)\n- Current pane breadcrumb (static text)\n\nThis option is respected only when `automaticBreadcrumbs` is `true`.\n\n### css\n\n- Type: `Object`\n- Default: `{}` (inherits/merges with values from `cssDefaults`)\n\nThese are the values defined in `cssDefaults`:\n```js\nlinkHue: '204',\nlinkSaturation: '82%',\nlinkLightness: '36%',\nlink: 'hsl(var(--cs-link-hue), var(--cs-link-saturation), var(--cs-link-lightness))',\nlinkHover: 'hsl(var(--cs-link-hue), var(--cs-link-saturation), calc(var(--cs-link-lightness) + 10%))',\nbackground: '#FFF',\nseparator: '\\\\276F', // Note the escaped backslash\ntransitionSpeed: 0.35 // seconds\n```\n\n**Note:** `transitionSpeed` is a number because of how it's used in the CSS string that's injected into the head of the document.\n\nExample of the placeholder in the CSS template literal:\n\n> ```js\n> // ...\n> transition: ${this.css.transitionSpeed}s all ease;\n> // ...\n> ```\n\n`link` and `linkHover` are just colors and can be in any format.\n\nExample of their placeholders in the CSS template literal:\n\n> ```js\n> html {\n> // ...\n> --cs-link: ${this.css.link};\n> --cs-link-hover: ${this.css.linkHover};\n> // ...\n> }\n> ```\n\nAnd those CSS variables are used like this:\n\n> ```js\n> // ...\n> [data-cs-breadcrumbs] [data-cs-breadcrumb] { color: var(--cs-link); }\n> [data-cs-breadcrumbs] [data-cs-breadcrumb]:hover { color: var(--cs-link-hover); }\n> // ...\n> ```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}