move image tag replacement to imageDims.js

des-des · des-des · commit bcfe3baefbf5 · 2016-03-24T18:43:50.000Z
also made this function recursive. related: #25
diff --git a/src/ampl.js b/src/ampl.js
@@ -1,7 +1,7 @@
 import Remarkable from 'remarkable';
 import htmlparser from 'htmlparser2';
 
-import { getDims } from './imageDims.js';
+import { getDims, updateImgTags } from './imageDims.js';
 import { createAmpPage } from './templates.js';
 
 const remarkable = new Remarkable('full');
@@ -16,27 +16,12 @@ export const parse = (markdown, optsOrStyle, callback) => {
 
 export const markdown2AmpHTML = (opts, callback) => {
   const { markdown } = opts;
-  console.log(opts, markdown);
-  console.log(markdown);
   const htmlRaw = remarkable.render(markdown);
-  parseHtml(htmlRaw, (html, data) => {
-    getDims(data.urls, (dimensions) => {
-      const imageTagRegex = /(<img)/;
-      let htmlAml = html;
-      let i = 0;
-      // todo remove while loop
-      while(imageTagRegex.test(htmlAml)) {
-        const newTag = `
-          <amp-img
-            width="${dimensions[i].width}"
-            height="${dimensions[i].height}"
-            layout="responsive"`;
-        htmlAml = htmlAml.replace(imageTagRegex, newTag);
-        i += 1;
-      }
-      callback(htmlAml);
-    });
-  });
+  parseHtml(htmlRaw, (html, { imageUrls }) =>
+    getDims(imageUrls, (dimensions) =>
+      callback(updateImgTags(html, dimensions))
+    )
+  );
 }
 
 var attribStr = attribs => Object.keys(attribs).map(attribKey => (
@@ -47,7 +32,7 @@ var attribStr = attribs => Object.keys(attribs).map(attribKey => (
 
 var createParseRules = () => [
   (urls => ({
-    label: "urls",
+    label: "imageUrls",
     target: "img",
     onOpenTag: attribs => urls.push(attribs.src),
     getResults: () => urls
diff --git a/src/imageDims.js b/src/imageDims.js
@@ -50,7 +50,16 @@ export var getDims = (imageUrls, callback) => {
       callback(dimsArray);
     }
   }
-}
+};
+
+const imageTagRegex = /(<img)/;
+export const updateImgTags = (html, dimensions) => imageTagRegex.test(html)
+  ? updateImgTags(html.replace(imageTagRegex, `<amp-img
+      width="${dimensions[0].width}"
+      height="${dimensions[0].height}"
+      layout="responsive"`
+    ), dimensions.slice(1))
+  : html;
 
 var getBody = function(response, callback) {
   var chunks = [];
diff --git a/test.html b/test.html
@@ -0,0 +1,6 @@
+hey
+  <body>
+    <!doctype html><p >#h1</p>
+
+  </body>
+</html>

-Original file line number
+Diff line change
 +hey
 +  <body>
 +    <!doctype html><p >#h1</p>
++
 +  </body>
 +</html>