From 88ef3359d2b55bc2724811e4f64ba5668c346cdb Mon Sep 17 00:00:00 2001
From: "oleg.rybnikov" <oleg.rybnikov@valor-software.com>
Date: Tue, 23 Apr 2019 13:47:52 +0300
Subject: [PATCH] feat(postprocessors): added wrapper for images

---
 lib/postprocessors/gallery-wrapper.ts | 70 +++++++++++++++++++++++++++
 lib/postprocessors/index.ts           |  2 +
 save/presets.json                     |  9 ++--
 3 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 lib/postprocessors/gallery-wrapper.ts

diff --git a/lib/postprocessors/gallery-wrapper.ts b/lib/postprocessors/gallery-wrapper.ts
new file mode 100644
index 0000000..536bf17
--- /dev/null
+++ b/lib/postprocessors/gallery-wrapper.ts
@@ -0,0 +1,70 @@
+const JSDOM = require('jsdom').JSDOM;
+import chalk from 'chalk';
+const Spinner = require('cli-spinner').Spinner;
+
+import { Postprocessor } from './postprocessor';
+import FileManager from '../file-manager';
+
+/**
+ * Works only inside of <div class="w-richtext rich-text"></div>
+ * Finds all images and wraps them by <a data-fancybox="gallery"></a>
+ * Also adds links to the  fancybox's src and css files
+ */
+export default class GalleryWrapper extends Postprocessor {
+
+  constructor(private folder: string, private fileManager: FileManager) {
+    super();
+  }
+
+  async process() {
+    console.log(chalk.yellow(chalk.bold('Wrapping images by gallery:')));
+    const filesList: {name: string; path: string}[] =
+      await this.fileManager.getFilesList(`./save/${this.folder}`, [`./save/${this.folder}/assets`]);
+
+    for (const file of filesList) {
+      const spinner = new Spinner({text: `${file.path} %s`});
+      spinner.setSpinnerString(27);
+      spinner.start();
+      const fileContent = await this.fileManager.read(file.path);
+      const dom = new JSDOM(fileContent);
+      let isChanged = false;
+      const richsnippets = dom.window.document.querySelectorAll('.w-richtext, .rich-text');
+      richsnippets.forEach(snippet => {
+        isChanged = wrapImage(snippet.children) || isChanged;
+      });
+
+      if (isChanged) {
+        const script = dom.window.document.createElement("script");
+        script.type = "text/javascript";
+        script.src = "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js";
+        dom.window.document.querySelector('body').append(script);
+
+        const link = dom.window.document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css";
+        dom.window.document.querySelector('body').append(link);
+
+        await this.fileManager.directSave(file.path, dom.window.document.documentElement.outerHTML);
+      }
+      spinner.stop(true);
+      console.log(file.path + chalk.green(' done'));
+    }
+    console.log(chalk.green(chalk.bold('Wrapping complete\n')));
+  }
+}
+
+function wrapImage(inp) {
+  let isChanged = false;
+  Object.values(inp).forEach((item: any) => {
+    if (item.nodeName.toLowerCase() === 'img') {
+      item.outerHTML =
+        `<a data-fancybox="gallery" href="${item.attributes.src.value}">${item.outerHTML}</a>`;
+      isChanged = true;
+    }
+    if (!item.children || item.children.length === 0) {
+      return isChanged;
+    }
+    isChanged = wrapImage(item.children) || isChanged;
+  });
+  return isChanged;
+}
diff --git a/lib/postprocessors/index.ts b/lib/postprocessors/index.ts
index aae7910..15435bd 100644
--- a/lib/postprocessors/index.ts
+++ b/lib/postprocessors/index.ts
@@ -1,7 +1,9 @@
 import CodeHighlighter from './code-highlighter';
 import SitemapGenerator from './sitemap-generator';
+import GalleryWrapper from './gallery-wrapper';
 
 export const postProcessors = {
   CodeHighlighter,
+  GalleryWrapper,
   SitemapGenerator
 };
diff --git a/save/presets.json b/save/presets.json
index 2a5a24b..69edfe9 100644
--- a/save/presets.json
+++ b/save/presets.json
@@ -1,6 +1,6 @@
 {
   "0": {
-    "description": "valor webflow -> macroorganizm's gh-pages(gen sitemap, add robots)",
+    "description": "valor webflow -> macroorganizm's gh-pages(gen sitemap, add robots, highlight and wrap)",
     "originalHost": "https://valor.webflow.io",
     "targetHost": "https://macroorganizm.github.io/test-scrapper",
     "targetBranch": "master",
@@ -9,7 +9,7 @@
       "path": "./files/robots.txt",
       "name": "robots.txt"
     }],
-    "postprocessors": ["SitemapGenerator"]
+    "postprocessors": ["CodeHighlighter", "GalleryWrapper", "SitemapGenerator"]
   },
   "1": {
     "description": "valor webflow -> Mike's gh-pages",
@@ -32,12 +32,13 @@
     }]
   },
   "3": {
-    "description": "Valor Live(no sitemap)",
+    "description": "Valor Live(no sitemap-based, gen Sitemap, highlight)",
     "originalHost": "https://valor.webflow.io",
     "targetHost": "https://valor-software.com",
     "targetBranch": "master",
     "githubRepo": "git@github.com:valor-software/valor-software.github.io.git",
-    "files": []
+    "files": [],
+    "postprocessors": ["CodeHighlighter", "SitemapGenerator"]
   },
   "4": {
     "description": "Valor Live (Sitemap based)",