Refactor: Decompose imageCreator into separate module

src/js/index.js

@@ -1,52 +1,12 @@
 import { doc, dqs, dqsa } from "./modules/utils.js";
+import imageCreator from "./modules/imageCreator.js";
 
 
 
-// script.js
-
 let openClosePermissionProjectPopup = true;
 
 
 
-const getFileExtension = filePath => filePath.split('.').pop();
-
-const imageCreator = {
-
- imgBasePath: {
- local: "img/",
- external: "https://raw.githubusercontent.com/astik-dev/portfolio/content/images/",
- },
-
- px1: `img/1x1.png`,
-
- fullPath: function (source, path) {return this.imgBasePath[source] + path},
-
- newWebpPic: function (source, webpPath, fallbackPath, alt, lazy) {
- const types = {
- jpg: "jpeg",
- }
-
- const src = lazy ? "data-src" : "srcset";
-
- const fallbackExt = getFileExtension(fallbackPath);
- const fallbackType = types[fallbackExt] || fallbackExt;
-
- return `<picture>
- <source type="image/webp" ${src}="${this.fullPath(source, webpPath)}">
- <source type="image/${fallbackType}" ${src}="${this.fullPath(source, fallbackPath)}">
- ${this.newImg(source, fallbackPath, alt, lazy)}
- </picture>`;
- },
-
- newImg: function (source, path, alt, lazy) {
- const fullPath = this.fullPath(source, path);
- const src = lazy ? `"${this.px1}" data-src="${fullPath}"` : `"${fullPath}"`;
- return `<img src=${src} alt="${alt}">`;
- }
-}
-
-
-
 function toggleBurgerMenu() {
  const
  headerCont = dqs(".header__container"),

src/js/modules/imageCreator.js

@@ -0,0 +1,38 @@
+const getFileExtension = filePath => filePath.split('.').pop();
+
+const imageCreator = {
+
+ imgBasePath: {
+ local: "img/",
+ external: "https://raw.githubusercontent.com/astik-dev/portfolio/content/images/",
+ },
+
+ px1: `img/1x1.png`,
+
+ fullPath: function (source, path) {return this.imgBasePath[source] + path},
+
+ newWebpPic: function (source, webpPath, fallbackPath, alt, lazy) {
+ const types = {
+ jpg: "jpeg",
+ }
+
+ const src = lazy ? "data-src" : "srcset";
+
+ const fallbackExt = getFileExtension(fallbackPath);
+ const fallbackType = types[fallbackExt] || fallbackExt;
+
+ return `<picture>
+ <source type="image/webp" ${src}="${this.fullPath(source, webpPath)}">
+ <source type="image/${fallbackType}" ${src}="${this.fullPath(source, fallbackPath)}">
+ ${this.newImg(source, fallbackPath, alt, lazy)}
+ </picture>`;
+ },
+
+ newImg: function (source, path, alt, lazy) {
+ const fullPath = this.fullPath(source, path);
+ const src = lazy ? `"${this.px1}" data-src="${fullPath}"` : `"${fullPath}"`;
+ return `<img src=${src} alt="${alt}">`;
+ }
+}
+
+export default imageCreator;