Convert wizard es6 files to js

Convert wizard es6 files to js

diff --git a/app/assets/javascripts/wizard/components/homepage-preview.js b/app/assets/javascripts/wizard/components/homepage-preview.js
new file mode 100644
index 0000000..c0de35c
--- /dev/null
+++ b/app/assets/javascripts/wizard/components/homepage-preview.js
@@ -0,0 +1,489 @@
+import { observes } from "discourse-common/utils/decorators";
+import {
+  createPreviewComponent,
+  LOREM,
+  darkLightDiff
+} from "wizard/lib/preview";
+
+export default createPreviewComponent(659, 320, {
+  logo: null,
+  avatar: null,
+
+  @observes("step.fieldsById.homepage_style.value")
+  styleChanged() {
+    this.triggerRepaint();
+  },
+
+  images() {
+    return {
+      logo: this.wizard.getLogoUrl(),
+      avatar: "/images/wizard/trout.png"
+    };
+  },
+
+  paint(ctx, colors, width, height) {
+    this.drawFullHeader(colors);
+
+    if (this.get("step.fieldsById.homepage_style.value") === "latest") {
+      this.drawPills(colors, height * 0.15);
+      this.renderLatest(ctx, colors, width, height);
+    } else if (
+      ["categories_only", "categories_with_featured_topics"].includes(
+        this.get("step.fieldsById.homepage_style.value")
+      )
+    ) {
+      this.drawPills(colors, height * 0.15, { categories: true });
+      this.renderCategories(ctx, colors, width, height);
+    } else if (
+      ["categories_boxes", "categories_boxes_with_topics"].includes(
+        this.get("step.fieldsById.homepage_style.value")
+      )
+    ) {
+      this.drawPills(colors, height * 0.15, { categories: true });
+      const topics =
+        this.get("step.fieldsById.homepage_style.value") ===
+        "categories_boxes_with_topics";
+      this.renderCategoriesBoxes(ctx, colors, width, height, { topics });
+    } else {
+      this.drawPills(colors, height * 0.15, { categories: true });
+      this.renderCategoriesWithTopics(ctx, colors, width, height);
+    }
+  },
+
+  renderCategoriesBoxes(ctx, colors, width, height, opts) {
+    opts = opts || {};
+
+    const borderColor = darkLightDiff(
+      colors.primary,
+      colors.secondary,
+      90,
+      -75
+    );
+    const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50);
+    const margin = height * 0.03;
+    const bodyFontSize = height / 440.0;
+    const boxHeight = height * 0.7 - margin * 2;
+    const descriptions = this.getDescriptions();
+    const boxesSpacing = 15;
+    const boxWidth = (width - margin * 2 - boxesSpacing * 2) / 3;
+
+    this.categories().forEach((category, index) => {
+      const boxStartX = margin + index * boxWidth + index * boxesSpacing;
+      const boxStartY = height * 0.33;
+
+      this.drawSquare(
+        ctx,
+        { x: boxStartX, y: boxStartY },
+        { x: boxStartX + boxWidth, y: boxStartY + boxHeight },
+        [
+          { color: borderColor },
+          { color: borderColor },
+          { color: borderColor },
+          { color: category.color, width: 5 }
+        ]
+      );
+
+      ctx.font = `Bold ${bodyFontSize * 1.3}em 'Arial'`;
+      ctx.fillStyle = colors.primary;
+      ctx.textAlign = "center";
+      ctx.fillText(category.name, boxStartX + boxWidth / 2, boxStartY + 25);
+      ctx.textAlign = "left";
+
+      if (opts.topics) {
+        let startY = boxStartY + 60;
+        this.getTitles().forEach(title => {
+          ctx.font = `${bodyFontSize * 1}em 'Arial'`;
+          ctx.fillStyle = colors.tertiary;
+          startY +=
+            this.fillTextMultiLine(
+              ctx,
+              title.split("\n").join(" "),
+              boxStartX + 10,
+              startY,
+              13,
+              boxWidth * 0.95
+            ) + 8;
+        });
+      } else {
+        ctx.font = `${bodyFontSize * 1}em 'Arial'`;
+        ctx.fillStyle = textColor;
+        ctx.textAlign = "center";
+        this.fillTextMultiLine(
+          ctx,
+          descriptions[index],
+          boxStartX + boxWidth / 2,
+          boxStartY + 60,
+          13,
+          boxWidth * 0.8
+        );
+        ctx.textAlign = "left";
+      }
+    });
+  },
+
+  renderCategories(ctx, colors, width, height) {
+    const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50);
+    const margin = height * 0.03;
+    const bodyFontSize = height / 440.0;
+    const titles = this.getTitles();
+    let categoryHeight = height / 6;
+
+    const drawLine = (x, y) => {
+      ctx.beginPath();
+      ctx.strokeStyle = darkLightDiff(
+        colors.primary,
+        colors.secondary,
+        90,
+        -75
+      );
+      ctx.moveTo(margin + x, y);
+      ctx.lineTo(width - margin, y);
+      ctx.stroke();
+    };
+
+    const cols = [0.025, 0.45, 0.53, 0.58, 0.94, 0.96].map(c => c * width);
+
+    const headingY = height * 0.33;
+    ctx.font = `${bodyFontSize * 0.9}em 'Arial'`;
+    ctx.fillStyle = textColor;
+    ctx.fillText("Category", cols[0], headingY);
+    if (
+      this.get("step.fieldsById.homepage_style.value") === "categories_only"
+    ) {
+      ctx.fillText("Topics", cols[4], headingY);
+    } else {
+      ctx.fillText("Topics", cols[1], headingY);
+      ctx.fillText("Latest", cols[2], headingY);
+      categoryHeight = height / 5;
+    }
+
+    let y = headingY + bodyFontSize * 12;
+    ctx.lineWidth = 2;
+    drawLine(0, y);
+    drawLine(width / 2, y);
+
+    // Categories
+    this.categories().forEach(category => {
+      const textPos = y + categoryHeight * 0.35;
+      ctx.font = `Bold ${bodyFontSize * 1.1}em 'Arial'`;
+      ctx.fillStyle = colors.primary;
+      ctx.fillText(category.name, cols[0], textPos);
+
+      ctx.font = `${bodyFontSize * 0.8}em 'Arial'`;
+      ctx.fillStyle = textColor;
+      ctx.fillText(
+        titles[0],
+        cols[0] - margin * 0.25,
+        textPos + categoryHeight * 0.36
+      );
+
+      ctx.beginPath();
+      ctx.moveTo(margin, y);
+      ctx.strokeStyle = category.color;
+      ctx.lineWidth = 3.5;
+      ctx.lineTo(margin, y + categoryHeight);
+      ctx.stroke();
+
+      if (
+        this.get("step.fieldsById.homepage_style.value") ===
+        "categories_with_featured_topics"
+      ) {
+        ctx.font = `${bodyFontSize}em 'Arial'`;
+        ctx.fillText(
+          Math.floor(Math.random() * 90) + 10,
+          cols[1] + 15,
+          textPos
+        );
+      } else {
+        ctx.font = `${bodyFontSize}em 'Arial'`;
+        ctx.fillText(Math.floor(Math.random() * 90) + 10, cols[5], textPos);
+      }
+
+      y += categoryHeight;
+      ctx.lineWidth = 1;
+      drawLine(0, y);
+    });
+
+    // Featured Topics
+    if (
+      this.get("step.fieldsById.homepage_style.value") ===
+      "categories_with_featured_topics"
+    ) {
+      const topicHeight = height / 15;
+
+      y = headingY + bodyFontSize * 22;
+      ctx.lineWidth = 1;
+      ctx.fillStyle = colors.tertiary;
+
+      titles.forEach(title => {
+        ctx.font = `${bodyFontSize}em 'Arial'`;
+        const textPos = y + topicHeight * 0.35;
+        ctx.fillStyle = colors.tertiary;
+        ctx.fillText(`${title}`, cols[2], textPos);
+        y += topicHeight;
+      });
+    }
+  },
+
+  renderCategoriesWithTopics(ctx, colors, width, height) {
+    const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50);
+    const margin = height * 0.03;
+    const bodyFontSize = height / 440.0;
+
+    const drawLine = (x, y) => {
+      ctx.beginPath();
+      ctx.strokeStyle = darkLightDiff(
+        colors.primary,
+        colors.secondary,
+        90,
+        -75
+      );
+      ctx.moveTo(margin + x, y);
+      ctx.lineTo(margin + x + (width * 0.9) / 2, y);
+      ctx.stroke();
+    };
+
+    const cols = [0.025, 0.42, 0.53, 0.58, 0.94].map(c => c * width);
+
+    const headingY = height * 0.33;
+    ctx.font = `${bodyFontSize * 0.9}em 'Arial'`;
+    ctx.fillStyle = textColor;
+    ctx.fillText("Category", cols[0], headingY);
+    ctx.fillText("Topics", cols[1], headingY);
+    if (
+      this.get("step.fieldsById.homepage_style.value") ===

[... diff too long, it was truncated ...]

GitHub sha: 1ac02422