{"id":27992753,"url":"https://github.com/code-mike-code/js-gallery-slider-refactored","last_synced_at":"2025-10-28T15:18:16.456Z","repository":{"id":291952092,"uuid":"979320713","full_name":"code-mike-code/js-gallery-slider-refactored","owner":"code-mike-code","description":"The original slider was functional but built with older JavaScript syntax and global functions. My job was to rebuild it into a clean, maintainable class-based module, making full use of ECMAScript 2015+ features","archived":false,"fork":false,"pushed_at":"2025-05-07T10:53:35.000Z","size":5536,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T11:37:01.764Z","etag":null,"topics":["arrow-functions","babel","constructor","es6-javascript","javascript","js-classes","webpack"],"latest_commit_sha":null,"homepage":"https://code-mike-code.github.io/js-gallery-slider-refactored/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/code-mike-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-07T10:33:28.000Z","updated_at":"2025-05-07T10:53:50.000Z","dependencies_parsed_at":"2025-05-07T11:48:26.834Z","dependency_job_id":null,"html_url":"https://github.com/code-mike-code/js-gallery-slider-refactored","commit_stats":null,"previous_names":["code-mike-code/js-gallery-slider-refactored"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fjs-gallery-slider-refactored","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fjs-gallery-slider-refactored/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fjs-gallery-slider-refactored/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fjs-gallery-slider-refactored/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-mike-code","download_url":"https://codeload.github.com/code-mike-code/js-gallery-slider-refactored/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253131002,"owners_count":21858923,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arrow-functions","babel","constructor","es6-javascript","javascript","js-classes","webpack"],"created_at":"2025-05-08T18:41:58.390Z","updated_at":"2025-10-28T15:18:16.333Z","avatar_url":"https://github.com/code-mike-code.png","language":"JavaScript","readme":"# JavaScript: ECMAScript 2015+ – Gallery Slider Refactor\n\n### See the live version of [ECMAScript Gallery Slider](https://code-mike-code.github.io/js-gallery-slider-refactored/)\n\nThis project is part of my learning path with the mentor program at devmentor.pl. The goal was to refactor a legacy image slider by applying modern JavaScript standards (ES6+), modular structure, and proper code separation.\n\n\n## 🔄 Project Overview\nThe original slider was functional but built with older JavaScript syntax and global functions. My job was to rebuild it into a clean, maintainable class-based module, making full use of ECMAScript 2015+ features such as:\n\n• class and constructor\n• arrow functions\n• destructuring\n• default parameters\n• spread/rest syntax\n• module exports/imports\n\nThe new structure allows for easier debugging, maintenance, and further scalability.\n\n## 🧱 Key Concepts Applied\n### 🧩 Class-Based Architecture\nThe core logic now lives in a single class:\n```\nimport JSSlider from './modules/JSSlider';\n\nconst jsSlider = new JSSlider('.gallery__item');\njsSlider.run();\n```\n\nThis class encapsulates all behaviors, internal state, and DOM interactions, following the Single Responsibility Principle.\n\n\n![](./assets/img/img1.png)\n\n\n## 🔌 Modular Code with Webpack\nTo ensure browser compatibility (for all major browsers post-2016 with \u003e1% market share), the entire project is bundled with Webpack.\n\nWebpack handles:\n\nES6+ transpilation via Babel\n\nModule bundling\n\nStatic file serving (images/CSS) during development\n```\n// webpack.config.js\nmodule.exports = {\n    // ...\n    devServer: {\n        static: './',\n    },\n}\n```\n\n\u0026nbsp;\n\n\n## 🔁 Custom Events Integration\nJust like the original implementation, the refactored version relies on a custom event system for interactivity:\n\njs-slider-img-click\n\njs-slider-img-next\n\njs-slider-img-prev\n\njs-slider-close\n\njs-slider-start (NEW)\n\njs-slider-stop (NEW)\n\nThese events promote decoupling, make debugging easier, and are useful for future event-based integrations.\n\n## 🧠 Internal Features \u0026 Improvements\nGrouped images by dynamic data-slider-group-name\n\nNavigation with arrow buttons (looped cycling supported)\n\nAutomatic slideshow start/stop on hover events\n\nInternal this.imagesList property shared across methods (instead of parameter passing)\n\n## 🚀 Additional Functionality\nTask 1 – Property-based Internal State\nInstead of passing DOM elements to every method, key variables like image lists and current indexes are stored directly in the class instance (e.g. this.imagesList, this.currentGroup).\n\nTask 2 – Auto Slideshow with Event Control\nIntroduced two new custom events:\n\n• js-slider-start: triggers slideshow autoplay after clicking an image or leaving arrow hover\n\n• js-slider-stop: pauses slideshow when hovering over arrows\n\nEdge cases (like multiple hover entries or restarts) were handled with timers and flags.\n\n\n\u0026nbsp;\n\n\n## 💡 Technologies\n\u003cimg src=\"https://skillicons.dev/icons?i=html,css,javascript,webpack,babel\" /\u003e\u003cbr/\u003e\n\n\u0026nbsp;\n\n## 🔗 See also\nIf you're interested in JavaScript-based UI projects, check out my other project: [Excursions Order Panel](https://code-mike-code.github.io/excursions-order-panel/)\n\n\u0026nbsp;\n\n## 💿 Installation\n1. Clone the repository\n\n2. Run npm install\n\n3. Start development server:\n\n```\nnpm start\n```\n\n\u0026nbsp;\n\n## 🏁 Summary\n\n• This project gave me hands-on experience in:\n• Refactoring real-world legacy code using modern JS\n• Using Webpack and Babel for browser support\n• Structuring scalable UI components with classes and modules\n• Managing state and behavior using Custom Events\n• Applying software engineering best practices like encapsulation, SRP, and DRY\n\n\u0026nbsp;\n\n## 🙋‍♂️ Let’s Connect!\nGot feedback, questions, or just want to talk about frontend stuff? I'm happy to hear from you!\n\n\u0026nbsp;\n\n## 👏 Thanks / Credits\nSpecial thanks to devmentor.pl for providing this real-world exercise and mentorship support.\n\n\u0026nbsp;\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-mike-code%2Fjs-gallery-slider-refactored","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-mike-code%2Fjs-gallery-slider-refactored","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-mike-code%2Fjs-gallery-slider-refactored/lists"}