{"_id":"@aw-webflow/read_more_function_for_changelogs","_rev":"3-5a259f62472617e716da00c0bee61fd6","name":"@aw-webflow/read_more_function_for_changelogs","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@aw-webflow/read_more_function_for_changelogs","version":"1.0.0","author":"","license":"ISC","_id":"@aw-webflow/read_more_function_for_changelogs@1.0.0","maintainers":[{"name":"akash-aw","email":"akash.choudhary@atomicwork.com"}],"homepage":"https://github.com/akash-atom/read_more_function_for_changelogs#readme","bugs":{"url":"https://github.com/akash-atom/read_more_function_for_changelogs/issues"},"dist":{"shasum":"5040c7d8d4fb4cfae219ee26c3357a0e7edb57fe","tarball":"https://registry.npmjs.org/@aw-webflow/read_more_function_for_changelogs/-/read_more_function_for_changelogs-1.0.0.tgz","fileCount":5,"integrity":"sha512-cylZKDukH+EfSMtcjC+dD1icaDX/pCVCGGh6XxlHKlddaenv6004AbfomIUKill+zsX2kMTjZ9xpwQC1WflMvw==","signatures":[{"sig":"MEQCIDPdoIDv6Vf8cGcEz/JZTzQiGMmCy2sX9/0xI2hB95oBAiAqb+Bhp7vYncFllUG0MbvBuCrNMlVMjeAYolVB8icjlA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":97502},"gitHead":"867bb94f36acbbfbfdc0a354e12f8d9ab348c914","scripts":{"test":"echo \"Error: no test specified\" && exit 1","start":"parcel script.js"},"_npmUser":{"name":"akash-aw","email":"akash.choudhary@atomicwork.com"},"repository":{"url":"git+https://github.com/akash-atom/read_more_function_for_changelogs.git","type":"git"},"_npmVersion":"8.19.4","description":"A dynamic \"read more\" functionality for changelog blocks using GSAP animations. This solution automatically calculates the optimal collapsed height for each block and provides smooth animations when expanding content.","directories":{},"_nodeVersion":"16.20.2","dependencies":{"parcel":"^2.15.4"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/read_more_function_for_changelogs_1.0.0_1757057623298_0.1815067654554805","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aw-webflow/read_more_function_for_changelogs","version":"1.0.1","author":"","license":"ISC","_id":"@aw-webflow/read_more_function_for_changelogs@1.0.1","maintainers":[{"name":"akash-aw","email":"akash.choudhary@atomicwork.com"}],"homepage":"https://github.com/akash-atom/read_more_function_for_changelogs#readme","bugs":{"url":"https://github.com/akash-atom/read_more_function_for_changelogs/issues"},"dist":{"shasum":"5ec5d3f213c36476622a3d69f91fddabef653a96","tarball":"https://registry.npmjs.org/@aw-webflow/read_more_function_for_changelogs/-/read_more_function_for_changelogs-1.0.1.tgz","fileCount":5,"integrity":"sha512-jOhQTLgQhhsu8/KMFSKILJh3kssOhnSWc8hVFSCdZIAeD1S1Y3DEvzVsMj9upftBaN6ZhryqBbCioJeHDeNPDQ==","signatures":[{"sig":"MEYCIQCEs9iaI8z5Ns+CMjMryKgH4r7/XQaKidhtz2J+e25TugIhAJlnv9dZWGNclu4TPbzTr0GdVLsV2aMEsbBrcprO0yta","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":97592},"gitHead":"71556992d4cda2044c2f056ba269c9542b5af3b6","scripts":{"test":"echo \"Error: no test specified\" && exit 1","start":"parcel script.js"},"_npmUser":{"name":"akash-aw","email":"akash.choudhary@atomicwork.com"},"repository":{"url":"git+https://github.com/akash-atom/read_more_function_for_changelogs.git","type":"git"},"_npmVersion":"8.19.4","description":"A dynamic \"read more\" functionality for changelog blocks using GSAP animations. This solution automatically calculates the optimal collapsed height for each block and provides smooth animations when expanding content.","directories":{},"_nodeVersion":"16.20.2","dependencies":{"parcel":"^2.15.4"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/read_more_function_for_changelogs_1.0.1_1758194054198_0.3381551342984135","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aw-webflow/read_more_function_for_changelogs","version":"1.0.2","description":"A dynamic \"read more\" functionality for changelog blocks using GSAP animations. This solution automatically calculates the optimal collapsed height for each block and provides smooth animations when expanding content.","scripts":{"test":"echo \"Error: no test specified\" && exit 1","start":"parcel script.js"},"repository":{"type":"git","url":"git+https://github.com/akash-atom/read_more_function_for_changelogs.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/akash-atom/read_more_function_for_changelogs/issues"},"homepage":"https://github.com/akash-atom/read_more_function_for_changelogs#readme","dependencies":{"parcel":"^2.15.4"},"gitHead":"1d762073c4fa1970fb62cd6e84aa09f8c93d196a","_id":"@aw-webflow/read_more_function_for_changelogs@1.0.2","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-cSOldVYNg2hPzcWkyDgbTFbJMQzLSBdxd0yql0/r8m0XqRrwpIL4M3UsLt1c2lFEVbMJeYFzlN/T6OxfI3fMuA==","shasum":"1fb95ccd52b7ba47a1efbe939e4401561187f421","tarball":"https://registry.npmjs.org/@aw-webflow/read_more_function_for_changelogs/-/read_more_function_for_changelogs-1.0.2.tgz","fileCount":5,"unpackedSize":120493,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC5Bmki1w3L5b4L4RWq5yg2+tyoWluRqbNxtYFoQqDzVgIgDzEnqXLE+6opooymbh2nmnYe7atbYRYQE2nrNArUvDw="}]},"_npmUser":{"name":"akash-aw","email":"akash.choudhary@atomicwork.com"},"directories":{},"maintainers":[{"name":"akash-aw","email":"akash.choudhary@atomicwork.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/read_more_function_for_changelogs_1.0.2_1758273662441_0.7794268490317853"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-05T07:33:43.199Z","modified":"2025-09-19T09:21:02.843Z","1.0.0":"2025-09-05T07:33:43.478Z","1.0.1":"2025-09-18T11:14:14.375Z","1.0.2":"2025-09-19T09:21:02.640Z"},"bugs":{"url":"https://github.com/akash-atom/read_more_function_for_changelogs/issues"},"license":"ISC","homepage":"https://github.com/akash-atom/read_more_function_for_changelogs#readme","repository":{"type":"git","url":"git+https://github.com/akash-atom/read_more_function_for_changelogs.git"},"description":"A dynamic \"read more\" functionality for changelog blocks using GSAP animations. This solution automatically calculates the optimal collapsed height for each block and provides smooth animations when expanding content.","maintainers":[{"name":"akash-aw","email":"akash.choudhary@atomicwork.com"}],"readme":"# Changelog Read More Functionality\n\nA dynamic \"read more\" functionality for changelog blocks using GSAP animations. This solution automatically calculates the optimal collapsed height for each block and provides smooth animations when expanding content.\n\n## Features\n\n- **Dynamic Height Calculation**: Automatically determines the best collapsed height for each block based on content\n- **Smooth GSAP Animations**: Professional-grade animations for height expansion and button fade-out\n- **Multiple Block Support**: Handles multiple changelog blocks on the same page\n- **Accessibility**: Keyboard support and proper focus management\n- **Performance Optimized**: Uses Intersection Observer for better performance\n- **Visual Indicators**: Subtle gradient overlay to indicate truncated content\n\n## Installation\n\n### For Webflow Projects\n\n1. Add the GSAP CDN to your Webflow project:\n   ```html\n   <script src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js\"></script>\n   ```\n\n2. Add the custom script to your project:\n   ```html\n   <script src=\"path/to/script.js\"></script>\n   ```\n\n### For Other Projects\n\n1. Install GSAP via npm:\n   ```bash\n   npm install gsap\n   ```\n\n2. Import and use the script:\n   ```javascript\n   import { ChangelogReadMore } from './script.js';\n   new ChangelogReadMore();\n   ```\n\n## HTML Structure\n\nYour HTML should follow this structure:\n\n```html\n<div class=\"changelog_block\">\n    <!-- Your changelog content -->\n    <h3>Version 2.1.0</h3>\n    <p>Your changelog content here...</p>\n    \n    <!-- The read more button (can be anywhere within the block) -->\n    <button class=\"read_more_btn\">Read More</button>\n</div>\n```\n\n## CSS Requirements\n\nThe script works with minimal CSS requirements. Here are the recommended styles:\n\n```css\n.changelog_block {\n    position: relative; /* Required for overlay positioning */\n    overflow: hidden; /* Will be set by the script */\n}\n\n.read_more_btn {\n    /* Your button styles */\n    cursor: pointer;\n}\n```\n\n## How It Works\n\n1. **Initialization**: The script automatically finds all `.changelog_block` elements on the page\n2. **Height Calculation**: For each block, it calculates the natural content height and sets a collapsed height (60% of content or minimum 200px)\n3. **Collapsed State**: Blocks are initially set to the collapsed height with `overflow: hidden`\n4. **Visual Indicator**: A subtle gradient overlay is added to indicate truncated content\n5. **Expansion**: When the \"Read More\" button is clicked, GSAP animates the height to full size\n6. **Button Removal**: The button fades out and is hidden after expansion\n\n## Configuration Options\n\nThe script automatically handles most scenarios, but you can customize the behavior:\n\n### Collapsed Height Calculation\n\nThe script uses this formula for collapsed height:\n```javascript\nconst collapsedHeight = Math.min(originalHeight * 0.6, Math.max(200, originalHeight * 0.4));\n```\n\nThis ensures:\n- Maximum 60% of original height\n- Minimum 200px height\n- At least 40% of original height\n\n### Animation Settings\n\nDefault animation settings:\n- **Duration**: 0.6 seconds\n- **Easing**: \"power2.out\"\n- **Button Fade**: 0.3 seconds\n\n## API Methods\n\nThe script exposes several methods for external control:\n\n```javascript\n// Expand all blocks\nchangelogReadMore.expandAllBlocks();\n\n// Reset all blocks to collapsed state\nchangelogReadMore.resetAllBlocks();\n\n// Access individual block methods (advanced usage)\nconst block = document.querySelector('.changelog_block');\n// Methods are available on the class instance\n```\n\n## Browser Support\n\n- Modern browsers with ES6+ support\n- Requires GSAP 3.x\n- Uses Intersection Observer (with fallback for older browsers)\n\n## Performance Considerations\n\n- **Intersection Observer**: Blocks are only processed when they come into view\n- **Efficient DOM Queries**: Minimal DOM manipulation during animations\n- **Memory Management**: Proper cleanup of event listeners and observers\n\n## Accessibility Features\n\n- **Keyboard Support**: Enter and Space keys trigger the read more functionality\n- **Focus Management**: Proper focus handling for screen readers\n- **Semantic HTML**: Works with proper button elements\n\n## Troubleshooting\n\n### Common Issues\n\n1. **Blocks not collapsing**: Ensure your content has enough height to be truncated\n2. **Animations not working**: Verify GSAP is loaded before the custom script\n3. **Buttons not hiding**: Check that the button has the correct class name `.read_more_btn`\n\n### Debug Mode\n\nYou can access the instance globally for debugging:\n```javascript\nconsole.log(window.changelogReadMore);\n```\n\n## Customization\n\n### Custom Animation Easing\n\nModify the GSAP animation in the `expandBlock` method:\n```javascript\ngsap.to(block, {\n    height: originalHeight,\n    duration: 0.8, // Custom duration\n    ease: \"elastic.out(1, 0.3)\", // Custom easing\n    // ... rest of options\n});\n```\n\n### Custom Collapsed Height\n\nOverride the height calculation in `setupSingleBlock`:\n```javascript\n// Custom collapsed height (e.g., fixed 150px)\nconst collapsedHeight = 150;\n```\n\n## License\n\nThis project is open source and available under the MIT License.\n\n## Contributing\n\nFeel free to submit issues and enhancement requests!\n","readmeFilename":"README.md"}