feat: try a fist adsense implementation

.template-lintrc.js

@@ -5,7 +5,12 @@ module.exports = {
   rules: {
     'no-bare-strings': true,
     'no-invalid-interactive': {
-      additionalInteractiveTags: ['calcite-button', 'calcite-action', 'calcite-text-area'],
+      additionalInteractiveTags: [
+        'calcite-button',
+        'calcite-action',
+        'calcite-text-area',
+        'calcite-link',
+      ],
     },
   },
   overrides: [

app/app.js

@@ -29,6 +29,7 @@ import '@esri/calcite-components/dist/components/calcite-combobox';
 import '@esri/calcite-components/dist/components/calcite-combobox-item';
 import '@esri/calcite-components/dist/components/calcite-card';
 import '@esri/calcite-components/dist/components/calcite-popover';
+import '@esri/calcite-components/dist/components/calcite-link';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

app/components/amp-ad.hbs

@@ -0,0 +1,12 @@
+{{#if this.mockAd}}
+  {{!-- template-lint-disable no-bare-strings --}}
+  <div style={{this.mockStyle}}>SOME ADD HERE</div>
+{{else}}
+  <amp-ad
+    width={{@width}}
+    height={{@height}}
+    ...attributes
+  >
+    <div overflow=""></div>
+  </amp-ad>
+{{/if}}

app/components/amp-ad.ts

@@ -0,0 +1,21 @@
+import { htmlSafe } from '@ember/template';
+import Component from '@glimmer/component';
+import config from 'text2stl/config/environment';
+
+const { environment } = config;
+
+interface AmpAdArgs {
+  width: string;
+  height: string;
+}
+
+export default class LangSwitcher extends Component<AmpAdArgs> {
+  get mockAd() {
+    return ['development', 'test'].includes(environment);
+  }
+
+  get mockStyle() {
+    const { width, height } = this.args;
+    return htmlSafe(`width: ${width}; height: ${height}; background: lightblue`);
+  }
+}

app/components/download-stl-modal.hbs

@@ -0,0 +1,44 @@
+<calcite-modal
+  aria-labelledby="modal-title"
+  resize="vertical"
+  open
+  {{on "calciteModalClose" @onHide}}
+>
+  <div slot="header" id="modal-title">
+    {{t 'download_modal.title'}}
+  </div>
+  <div slot="content">
+    <AmpAd
+      @width="100%"
+      @height="320px"
+      type="adsense"
+      data-ad-client="ca-pub-3813838413338800"
+      data-ad-slot="7911231338"
+      data-auto-format="rspv"
+      data-full-width=""
+    />
+    {{#if this.canDownload}}
+      <calcite-notice open icon="layers-reference" kind="success">
+        <div slot="title">{{t "download_modal.ready.title"}}</div>
+        <div slot="message">{{t "download_modal.ready.message"}}</div>
+        <calcite-link {{on "click" @downloadSTL}} slot="link" title={{t 'download_modal.download'}}>
+          {{t 'download_modal.download'}}
+        </calcite-link>
+      </calcite-notice>
+    {{else}}
+      <calcite-loader
+        label={{t "download_modal.wait"}}
+        text={{t "download_modal.wait"}}
+        scale="l"
+        type="indeterminate"
+        class="p-0"
+      />
+    {{/if}}
+  </div>
+  <calcite-button {{on "click" @onHide}} slot="secondary" width="full" appearance="outline">
+    {{t "download_modal.close"}}
+  </calcite-button>
+  <calcite-button {{on "click" @downloadSTL}} loading={{not this.canDownload}} slot="primary" width="full">
+    {{t 'download_modal.download'}}
+  </calcite-button>
+</calcite-modal>

app/components/download-stl-modal.ts

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+interface DownloadSTLModalArgs {
+  onHide?: () => void;
+  downloadSTL?: () => void;
+}
+
+const DOWNLOAD_WAIT_TIME = 5000;
+
+export default class DownloadSTLModal extends Component<DownloadSTLModalArgs> {
+  @tracked _canDownload = false;
+
+  get canDownload() {
+    return this._canDownload;
+  }
+
+  constructor(owner: unknown, args: DownloadSTLModalArgs) {
+    super(owner, args);
+    setTimeout(() => (this._canDownload = true), DOWNLOAD_WAIT_TIME);
+  }
+
+  @action
+  selectAll({ target }: { target: HTMLTextAreaElement }) {
+    target.select();
+  }
+}

app/controllers/app/generator.ts

@@ -68,6 +68,18 @@ export default class GeneratorController extends Controller {
 
   @tracked isFontLoading = true;
 
+  @tracked downloadModalVisible = false;
+
+  @action
+  showDownloadModal() {
+    this.downloadModalVisible = true;
+  }
+
+  @action
+  hideDownloadModal() {
+    this.downloadModalVisible = false;
+  }
+
   @action
   async exportSTL() {
     const { value: mesh } = await this.mesh;
@@ -82,6 +94,7 @@ export default class GeneratorController extends Controller {
     });
 
     this.stlExporter.downloadMeshAsSTL(mesh);
+    this.downloadModalVisible = false;
   }
 
   @tracked saveModalVisible = false;

app/index.html

@@ -11,6 +11,8 @@
         <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
         <link integrity="" rel="stylesheet" href="{{rootURL}}assets/text2stl.css">
         {{content-for "head-footer"}}
+        <!-- Google Adsense -->
+        <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
     </head>
     <body>
         {{content-for "loader"}}

app/styles/app.scss

@@ -12,6 +12,10 @@
   width: 80%;
 }
 
+.w-100 {
+  width: 100%;
+}
+
 .center {
   text-align: center;
 }

app/templates/app/generator.hbs

@@ -48,7 +48,7 @@
         disabled={{this.exportDisabled}}
         loading={{this.meshGenerating}}
         icon-start="download"
-        {{on 'click' this.exportSTL}}
+        {{on 'click' this.showDownloadModal}}
         data-test-export-stl
       >
         {{t 'export_stl'}}
@@ -66,8 +66,17 @@
     <div id="three-preview-container">
       <preview.renderer />
     </div>
-    <div slot='footer'>
-      <preview.size />
+    <div slot='footer' class="w-100">
+      <div class="center"><preview.size /></div>
+      <AmpAd
+          @width="100%"
+          @height="320px"
+          type="adsense"
+          data-ad-client="ca-pub-3813838413338800"
+          data-ad-slot="1725877183"
+          data-auto-format="mcrspv"
+          data-full-width=""
+      />
     </div>
 </ThreePreview>
 
@@ -78,4 +87,7 @@
 {{/if}}
 {{#if this.resetModalVisible}}
   <ResetModal @onHide={{this.hideResetModal}} @onReset={{this.resetModel}} />
+{{/if}}
+{{#if this.downloadModalVisible}}
+  <DownloadStlModal @onHide={{this.hideDownloadModal}} @downloadSTL={{this.exportSTL}} />
 {{/if}}

translations/en-us.yaml

@@ -45,7 +45,7 @@ settings_form:
       heading: Fixation
       description: Handle or hole settings
 export_stl: Export STL
-stl_counter: '{count} STL files have been generated'
+stl_counter: "{count} STL files have been generated"
 info:
   label: About Text2STL
   made_by: Made with ♥ By {author} with {ember} & {three}
@@ -75,7 +75,7 @@ text_settings:
   supportPadding: Support spacing
   advancedSupportPadding: Advanced support spacing
   alignment: Text alignment
-  valignment: Text vertical alignement
+  valignment: Text vertical alignment
   supportBorderRadius: Border radius
   handleSettings:
     label: Fixation type
@@ -103,7 +103,7 @@ directions:
   left: Left
   right: Right
 three_preview:
-  size: 'Print size : {x} x {y} x {z} mm'
+  size: "Print size : {x} x {y} x {z} mm"
 text_type:
   1: Text only
   2: Text with support
@@ -137,3 +137,11 @@ reset_modal:
   cancel: Cancel
   reset: Reset Settings
 font_loading: Loading Google font, please wait...
+download_modal:
+  title: Download STL file
+  ready:
+    title: Your STL file is ready
+    message: Your STL file has been generated, click "Download STL" to save it on your computer... Happy print !
+  wait: Your STL file is being generated, please wait...
+  close: Cancel
+  download: Download STL

translations/fr-fr.yaml

@@ -45,7 +45,7 @@ settings_form:
       heading: Fixation
       description: Réglage de la poigné ou du trou
 export_stl: Exporter STL
-stl_counter: '{count} fichiers STL ont été générés'
+stl_counter: "{count} fichiers STL ont été générés"
 info:
   label: À propos de Text2STL
   made_by: Créer avec ♥ par {author} avec {ember} & {three}
@@ -137,3 +137,11 @@ reset_modal:
   cancel: Annuler
   reset: Restaurer les réglages
 font_loading: Chargement des polices Google, veuillez patienter...
+download_modal:
+  title: Exporter STL
+  ready:
+    title: Votre fichier STL est prêt
+    message: Votre fichier STL a été généré, cliquer sur le button "Télécharger" pour le sauvegarder sur votre ordinateur... Bonne impression !
+  wait: Votre fichier STL est en cours de création, veuillez patienter...
+  close: Annuler
+  download: Télécharger