From dcacf1acb124cef5eb3d6b965af2f36f5d82b784 Mon Sep 17 00:00:00 2001 From: Vincent Bourdon Date: Fri, 6 Nov 2026 18:58:51 +0100 Subject: [PATCH] feat: repli des articles en mode lecture avec bouton Lire plus Co-Authored-By: Claude Opus 5.5 --- package-lock.json | 589 +++++++++++++++++++++++++++++++++++ package.json | 13 + static/read-more.css | 24 ++ static/read-more.js | 101 ++++++ tests/unit/read-more.test.js | 145 +++++++++ 5 files changed, 872 insertions(+) create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 tests/unit/read-more.test.js diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..f36dba0 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,589 @@ +{ + "name": "freshrss-read-more", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "freshrss-read-more", + "devDependencies": { + "@playwright/test": "^1.50.0", + "jsdom": "^26.0.0" + } + }, + "node_modules/@asamuzakjp/css-color": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz", + "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@csstools/css-calc": "^2.1.3", + "@csstools/css-color-parser": "^3.0.9", + "@csstools/css-parser-algorithms": "^3.0.4", + "@csstools/css-tokenizer": "^3.0.3", + "lru-cache": "^10.4.3" + } + }, + "node_modules/@csstools/color-helpers": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz", + "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + } + }, + "node_modules/@csstools/css-calc": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz", + "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" + } + }, + "node_modules/@csstools/css-color-parser": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz", + "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "dependencies": { + "@csstools/color-helpers": "^5.1.0", + "@csstools/css-calc": "^2.1.4" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" + } + }, + "node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz", + "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.4" + } + }, + "node_modules/@csstools/css-tokenizer": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz", + "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@playwright/test": { + "version": "1.65.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.65.0.tgz", + "integrity": "sha512-iGURLGuKDLakSEl7Pgfv8h7f+XLT+V861Wfhz0zlEl5nyFuKUopdkFBPKqTllTUp06aOwPuH8iuUEb3yp3MpbQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.65.0" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/agent-base": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz", + "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14" + } + }, + "node_modules/cssstyle": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz", + "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@asamuzakjp/css-color": "^3.2.0", + "rrweb-cssom": "^0.8.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/data-urls": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz", + "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==", + "dev": true, + "license": "MIT", + "dependencies": { + "whatwg-mimetype": "^4.0.0", + "whatwg-url": "^14.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/decimal.js": { + "version": "10.6.0", + "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz", + "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==", + "dev": true, + "license": "MIT" + }, + "node_modules/entities": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz", + "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/html-encoding-sniffer": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz", + "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "whatwg-encoding": "^3.1.1" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/http-proxy-agent": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz", + "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.0", + "debug": "^4.3.4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/https-proxy-agent": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz", + "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.2", + "debug": "4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-potential-custom-element-name": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", + "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/jsdom": { + "version": "26.1.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz", + "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssstyle": "^4.2.1", + "data-urls": "^5.0.0", + "decimal.js": "^10.5.0", + "html-encoding-sniffer": "^4.0.0", + "http-proxy-agent": "^7.0.2", + "https-proxy-agent": "^7.0.6", + "is-potential-custom-element-name": "^1.0.1", + "nwsapi": "^2.2.16", + "parse5": "^7.2.1", + "rrweb-cssom": "^0.8.0", + "saxes": "^6.0.0", + "symbol-tree": "^3.2.4", + "tough-cookie": "^5.1.1", + "w3c-xmlserializer": "^5.0.0", + "webidl-conversions": "^7.0.0", + "whatwg-encoding": "^3.1.1", + "whatwg-mimetype": "^4.0.0", + "whatwg-url": "^14.1.1", + "ws": "^8.18.0", + "xml-name-validator": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "canvas": "^3.0.0" + }, + "peerDependenciesMeta": { + "canvas": { + "optional": true + } + } + }, + "node_modules/lru-cache": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", + "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", + "dev": true, + "license": "ISC" + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/nwsapi": { + "version": "2.2.28", + "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.28.tgz", + "integrity": "sha512-IlVB7OS7qrOsVYlpnFIkETjMwT9jwvmocJmmM+GZU/PAB3uGi9Ezd7vcWhWBUnSc0ya4ppmQITOyP1ez9gg8cg==", + "dev": true, + "license": "MIT" + }, + "node_modules/parse5": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz", + "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==", + "dev": true, + "license": "MIT", + "dependencies": { + "entities": "^6.0.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, + "node_modules/playwright": { + "version": "1.65.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.65.0.tgz", + "integrity": "sha512-F3AMWcR44qMBt4kq+6Kb6mX7bjGXshktKFOPULd7reED6ZJWevjbNRqysP7q+AATE9kdPEZBibex1BYsvpVoeA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.65.0" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/playwright-core": { + "version": "1.65.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.65.0.tgz", + "integrity": "sha512-vNSKgH6YqtN7cdT/L334zo0a+YwkrpicyrHJlWWPIm/Q+Nn2SWInil01oT0mbu96U4GgoRtCYQD9CzJQgju+lA==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/punycode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", + "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/rrweb-cssom": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz", + "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==", + "dev": true, + "license": "MIT" + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true, + "license": "MIT" + }, + "node_modules/saxes": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", + "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==", + "dev": true, + "license": "ISC", + "dependencies": { + "xmlchars": "^2.2.0" + }, + "engines": { + "node": ">=v12.22.7" + } + }, + "node_modules/symbol-tree": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", + "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", + "dev": true, + "license": "MIT" + }, + "node_modules/tldts": { + "version": "6.1.86", + "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz", + "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "tldts-core": "^6.1.86" + }, + "bin": { + "tldts": "bin/cli.js" + } + }, + "node_modules/tldts-core": { + "version": "6.1.86", + "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz", + "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==", + "dev": true, + "license": "MIT" + }, + "node_modules/tough-cookie": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz", + "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "tldts": "^6.1.32" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/tr46": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz", + "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==", + "dev": true, + "license": "MIT", + "dependencies": { + "punycode": "^2.3.1" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/w3c-xmlserializer": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz", + "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==", + "dev": true, + "license": "MIT", + "dependencies": { + "xml-name-validator": "^5.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/webidl-conversions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", + "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=12" + } + }, + "node_modules/whatwg-encoding": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz", + "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==", + "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation", + "dev": true, + "license": "MIT", + "dependencies": { + "iconv-lite": "0.6.3" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/whatwg-mimetype": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz", + "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/whatwg-url": { + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz", + "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==", + "dev": true, + "license": "MIT", + "dependencies": { + "tr46": "^5.1.0", + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/ws": { + "version": "8.22.1", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.22.1.tgz", + "integrity": "sha512-oyL6OPYme/CmiFvNuGzeoxCJ4nOrZE2O1FwM9MWM1AsGri6nLXB2pg+lNA8aLeXMSav0J6eIVS1j6vUPzUtK9g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/xml-name-validator": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz", + "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18" + } + }, + "node_modules/xmlchars": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", + "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", + "dev": true, + "license": "MIT" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..8f70eb4 --- /dev/null +++ b/package.json @@ -0,0 +1,13 @@ +{ + "name": "freshrss-read-more", + "private": true, + "type": "commonjs", + "scripts": { + "test:unit": "node --test tests/unit/*.test.js", + "test:e2e": "playwright test" + }, + "devDependencies": { + "@playwright/test": "^1.50.0", + "jsdom": "^26.0.0" + } +} diff --git a/static/read-more.css b/static/read-more.css index e69de29..0c42493 100644 --- a/static/read-more.css +++ b/static/read-more.css @@ -0,0 +1,24 @@ +/* Read More — collapsed articles in reader view. + * max-height only: the article must keep a non-zero height so that + * FreshRSS still marks it as read when scrolled past. */ +.flux .text.read-more-collapsed { + max-height: var(--read-more-height, 250px); + overflow: hidden; + position: relative; +} + +.flux .text.read-more-collapsed::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 4em; + background: linear-gradient(to bottom, transparent, var(--frss-background-color, #fff)); + pointer-events: none; +} + +.flux .read-more-btn { + display: block; + margin: 0.5em auto 1em; +} diff --git a/static/read-more.js b/static/read-more.js index e69de29..40caf9d 100644 --- a/static/read-more.js +++ b/static/read-more.js @@ -0,0 +1,101 @@ +/* Read More — FreshRSS extension. + * Collapses long articles in reader view behind a "Read more" button. + * Collapsing uses max-height (never display:none) so FreshRSS's + * mark-as-read-on-scroll keeps measuring a non-zero article height. */ +(function (root) { + 'use strict'; + + const THRESHOLD_RATIO = 1.5; + const STATE = { collapsed: 'collapsed', short: 'short', expanded: 'expanded' }; + const defaultMeasure = (el) => el.scrollHeight; + + function shouldCollapse(contentHeight, collapsedHeight) { + return contentHeight >= collapsedHeight * THRESHOLD_RATIO; + } + + function expand(flux, text, button) { + text.classList.remove('read-more-collapsed'); + text.style.removeProperty('--read-more-height'); + button.remove(); + flux.dataset.readMore = STATE.expanded; + } + + function collapse(flux, text, opts) { + const doc = flux.ownerDocument; + text.classList.add('read-more-collapsed'); + text.style.setProperty('--read-more-height', opts.collapsedHeight + 'px'); + const button = doc.createElement('button'); + button.type = 'button'; + button.className = 'btn read-more-btn'; + button.textContent = opts.label; + button.addEventListener('click', function (ev) { + ev.preventDefault(); + ev.stopPropagation(); + expand(flux, text, button); + }); + text.after(button); + flux.dataset.readMore = STATE.collapsed; + } + + function processEntry(flux, opts) { + const state = flux.dataset.readMore; + if (state !== undefined && state !== STATE.short) { + return; + } + const text = flux.querySelector('.text'); + if (!text) { + return; + } + const measure = opts.measure || defaultMeasure; + if (shouldCollapse(measure(text), opts.collapsedHeight)) { + collapse(flux, text, opts); + } else { + flux.dataset.readMore = STATE.short; + } + } + + function processEntries(rootNode, opts) { + rootNode.querySelectorAll('.flux').forEach((flux) => processEntry(flux, opts)); + } + + function init(win, measure) { + const context = win.context; + if (!context || context.current_view !== 'reader') { + return; + } + const conf = (context.extensions && context.extensions.read_more) || {}; + const opts = { + collapsedHeight: Number(conf.collapsed_height) || 250, + label: conf.label || 'Read more', + measure: measure, + }; + const doc = win.document; + processEntries(doc, opts); + doc.body.addEventListener('freshrss:load-more', () => processEntries(doc, opts)); + // Late-loading images can make a "short" article long enough to collapse. + doc.addEventListener('load', function (ev) { + const target = ev.target; + if (!target || target.tagName !== 'IMG' || !target.closest) { + return; + } + const flux = target.closest('.flux[data-read-more="short"]'); + if (flux) { + processEntry(flux, opts); + } + }, true); + } + + const api = { THRESHOLD_RATIO, shouldCollapse, processEntries, init }; + root.ReadMore = api; + if (typeof module !== 'undefined' && module.exports) { + module.exports = api; + } + + if (root.document && root.document.addEventListener) { + if (typeof root.context !== 'undefined' && typeof root.context.extensions !== 'undefined') { + init(root); + } else { + root.document.addEventListener('freshrss:globalContextLoaded', () => init(root), false); + } + } +}(typeof window !== 'undefined' ? window : globalThis)); diff --git a/tests/unit/read-more.test.js b/tests/unit/read-more.test.js new file mode 100644 index 0000000..bfc7752 --- /dev/null +++ b/tests/unit/read-more.test.js @@ -0,0 +1,145 @@ +'use strict'; + +const { test } = require('node:test'); +const assert = require('node:assert/strict'); +const fs = require('node:fs'); +const path = require('node:path'); +const { JSDOM } = require('jsdom'); + +const SOURCE = fs.readFileSync(path.join(__dirname, '../../static/read-more.js'), 'utf8'); + +// jsdom has no layout: heights come from data-h on each .text element. +const measure = (el) => Number(el.dataset.h || 0); + +function entry(id, height, notRead = false) { + return `
+
+

Article ${id}

+
+
`; +} + +function setup(entries) { + const dom = new JSDOM(`
${entries.join('')}
`, + { runScripts: 'outside-only' }); + dom.window.eval(SOURCE); + return { window: dom.window, document: dom.window.document, ReadMore: dom.window.ReadMore }; +} + +const OPTS = { collapsedHeight: 250, label: 'Lire plus', measure }; + +function setContext(window, view) { + window.context = { + current_view: view, + extensions: { read_more: { collapsed_height: 250, label: 'Lire plus' } }, + }; +} + +test('shouldCollapse thresholds', () => { + const { ReadMore } = setup([]); + assert.equal(ReadMore.THRESHOLD_RATIO, 1.5); + assert.equal(ReadMore.shouldCollapse(374, 250), false); + assert.equal(ReadMore.shouldCollapse(375, 250), true); + assert.equal(ReadMore.shouldCollapse(1000, 250), true); +}); + +test('collapses tall entry', () => { + const { document, ReadMore } = setup([entry(1, 1000)]); + ReadMore.processEntries(document, OPTS); + const flux = document.getElementById('flux_1'); + const text = flux.querySelector('.text'); + assert.ok(text.classList.contains('read-more-collapsed')); + assert.equal(text.style.getPropertyValue('--read-more-height'), '250px'); + const buttons = flux.querySelectorAll('.read-more-btn'); + assert.equal(buttons.length, 1); + assert.equal(buttons[0].textContent, 'Lire plus'); + assert.equal(buttons[0].type, 'button'); + assert.equal(text.nextElementSibling, buttons[0]); + assert.equal(flux.dataset.readMore, 'collapsed'); +}); + +test('skips short entry', () => { + const { document, ReadMore } = setup([entry(1, 300)]); + ReadMore.processEntries(document, OPTS); + const flux = document.getElementById('flux_1'); + assert.ok(!flux.querySelector('.text').classList.contains('read-more-collapsed')); + assert.equal(flux.querySelectorAll('.read-more-btn').length, 0); + assert.equal(flux.dataset.readMore, 'short'); +}); + +test('is idempotent', () => { + const { document, ReadMore } = setup([entry(1, 1000), entry(2, 1000)]); + ReadMore.processEntries(document, OPTS); + ReadMore.processEntries(document, OPTS); + for (const flux of document.querySelectorAll('.flux')) { + assert.equal(flux.querySelectorAll('.read-more-btn').length, 1); + } +}); + +test('click expands', () => { + const { window, document, ReadMore } = setup([entry(1, 1000)]); + ReadMore.processEntries(document, OPTS); + const flux = document.getElementById('flux_1'); + let parentClicks = 0; + flux.addEventListener('click', () => { parentClicks++; }); + const event = new window.MouseEvent('click', { bubbles: true, cancelable: true }); + flux.querySelector('.read-more-btn').dispatchEvent(event); + assert.ok(!flux.querySelector('.text').classList.contains('read-more-collapsed')); + assert.equal(flux.querySelectorAll('.read-more-btn').length, 0); + assert.equal(flux.dataset.readMore, 'expanded'); + assert.equal(event.defaultPrevented, true); + assert.equal(parentClicks, 0); +}); + +test('does not re-collapse expanded entry', () => { + const { document, ReadMore } = setup([entry(1, 1000)]); + ReadMore.processEntries(document, OPTS); + document.querySelector('.read-more-btn').click(); + ReadMore.processEntries(document, OPTS); + const flux = document.getElementById('flux_1'); + assert.ok(!flux.querySelector('.text').classList.contains('read-more-collapsed')); + assert.equal(flux.querySelectorAll('.read-more-btn').length, 0); + assert.equal(flux.dataset.readMore, 'expanded'); +}); + +test('does not touch read state', () => { + const { document, ReadMore } = setup([entry(1, 1000, true)]); + ReadMore.processEntries(document, OPTS); + const flux = document.getElementById('flux_1'); + assert.ok(flux.classList.contains('not_read')); + flux.querySelector('.read-more-btn').click(); + assert.ok(flux.classList.contains('not_read')); +}); + +test('reevaluates short entry after image load', () => { + const { window, document, ReadMore } = setup([entry(1, 300)]); + setContext(window, 'reader'); + ReadMore.init(window, measure); + const flux = document.getElementById('flux_1'); + assert.equal(flux.dataset.readMore, 'short'); + const text = flux.querySelector('.text'); + text.dataset.h = '1000'; + text.querySelector('img').dispatchEvent(new window.Event('load')); + assert.ok(text.classList.contains('read-more-collapsed')); + assert.equal(flux.dataset.readMore, 'collapsed'); + assert.equal(flux.querySelectorAll('.read-more-btn').length, 1); +}); + +test('init ignores non-reader view', () => { + const { window, document, ReadMore } = setup([entry(1, 1000)]); + setContext(window, 'normal'); + ReadMore.init(window, measure); + assert.equal(document.querySelectorAll('.read-more-btn').length, 0); + assert.equal(document.getElementById('flux_1').dataset.readMore, undefined); +}); + +test('init handles load-more', () => { + const { window, document, ReadMore } = setup([entry(1, 1000)]); + setContext(window, 'reader'); + ReadMore.init(window, measure); + assert.equal(document.querySelectorAll('.read-more-btn').length, 1); + document.getElementById('stream').insertAdjacentHTML('beforeend', entry(2, 1000)); + document.body.dispatchEvent(new window.Event('freshrss:load-more', { bubbles: true })); + assert.equal(document.querySelectorAll('.read-more-btn').length, 2); + assert.equal(document.getElementById('flux_2').dataset.readMore, 'collapsed'); +});