feat: Changement de librairie

fix: Popup design
2023-05-03 16:10:44 +02:00 · 2023-05-03 15:39:20 +02:00
6 changed files with 122 additions and 36 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,7 @@
      "version": "0.1.0",
      "dependencies": {
        "@splidejs/vue-splide": "^0.5.18",
+        "html-to-image": "^1.11.11",
        "html2canvas": "^1.4.1",
        "pinia": "^2.0.11",
        "pinia-plugin-persist": "^1.0.0",
@ -1796,6 +1797,11 @@
      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
    },
+    "node_modules/html-to-image": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
+      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
+    },
    "node_modules/html2canvas": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
@ -4680,6 +4686,11 @@
      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
    },
+    "html-to-image": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
+      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
+    },
    "html2canvas": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
  },
  "dependencies": {
    "@splidejs/vue-splide": "^0.5.18",
+    "html-to-image": "^1.11.11",
    "html2canvas": "^1.4.1",
    "pinia": "^2.0.11",
    "pinia-plugin-persist": "^1.0.0",
--- a/public/spin.svg
+++ b/public/spin.svg
@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<g><path d="M758.7,873c10.4,17.7,4.6,41.2-13.6,51.1c-18,10.4-40.7,4.3-50.9-13.7c-10.9-17.7-4.5-40.7,13.1-51.1C725.7,848.9,748.3,855.4,758.7,873L758.7,873z M537.9,952.8L537.9,952.8c0,20.4-16.9,37.5-38,37.5c-20.4,0-37.5-16.6-37.5-37.5v-26.2c0-20.9,17.1-37.5,37.5-37.5c20.8,0,38,16.6,38,37.5V952.8L537.9,952.8z M306.6,910.5L306.6,910.5c-10.7,18.5-33.7,24.4-51.4,13.9c-18.2-10.2-24.7-33.2-13.9-51.4l27.8-48.7c10.7-18,33.7-24.1,51.9-13.9c17.7,10.5,24.1,33.7,13.4,51.4L306.6,910.5L306.6,910.5z M127.3,759L127.3,759c-18.2,10.2-41.5,4-51.4-13.9c-10.7-17.7-4.6-41,13.3-51.4l75-43.4c17.9-9.9,41.2-4.3,51.3,13.9c10.2,17.7,4.1,41-13.9,51.4L127.3,759L127.3,759z M47.4,537.6L47.4,537.6c-20.8,0-37.4-16.9-37.4-37.5c0-20.9,16.6-37.7,37.4-37.7h116.8c20.8,0,37.5,16.9,37.5,37.5c0,20.9-16.6,37.7-37.5,37.7H47.4L47.4,537.6z M89.2,306.1L89.2,306.1c-18.2-10.2-24-33.2-13.3-51.1c9.9-18.2,33.2-24.4,51.4-13.9l126.8,73.6c18,10.2,23.9,33.2,14,50.8c-10.7,18.2-33.7,24.1-51.4,13.9L89.2,306.1L89.2,306.1z M241.3,126.7L241.3,126.7l88.3,153.4c10.8,17.9,33.7,24.4,51.7,13.7c17.9-10.2,23.8-33.5,13.3-51.4L306,89.2c-10.2-17.7-33.2-24.1-50.8-13.7C236.9,86,231.1,109.1,241.3,126.7L241.3,126.7z M462.4,47.5L462.4,47.5c0-20.3,17.1-37.7,37.5-37.7c20.8,0,38,16.9,38,37.7v176.7c0,20.9-16.9,37.7-38,38c-20.4,0-37.5-16.6-37.5-38V47.5L462.4,47.5z M693.6,89.2L693.6,89.2c10.7-18.2,33.5-24.1,51.5-13.9c18.2,10.2,24.6,33.2,13.8,51.4l-88.6,153.4c-9.8,17.9-33.4,24.4-51.3,13.9c-18-10.5-23.9-33.7-13.7-51.6L693.6,89.2L693.6,89.2z M873.5,241L873.5,241l-153.6,88.6c-17.9,10.2-24.1,33.2-14,51.4c10.7,17.7,33.8,23.5,51.4,13.7l153.7-88.6c17.6-10.2,24-33.2,13.4-51.1C914.3,236.7,891.2,230.3,873.5,241L873.5,241z M952.5,462.4L952.5,462.4c21.1,0,37.8,16.9,37.5,37.7c0,20.6-16.4,37.5-37.5,37.5h-177c-20.3,0-37.4-16.9-37.4-37.7c0-20.6,17.1-37.5,37.4-37.5H952.5L952.5,462.4z"/></g>
+</svg>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@ -81,6 +81,18 @@ body {
  -moz-osx-font-smoothing: grayscale;
 }

+body.print {
+  --color-highlight-background: var(--color-white);
+  --color-highlight-text: var(--color-black);
+  --color-highlight-text-invert: var(--color-white);
+  --color-header-background: var(--color-white);
+  --color-header-text: var(--color-black);
+}
+
+.print .no-print {
+  display: none
+}
+
 .btn {
  width: 3rem;
  height: 3rem;
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@ -52,8 +52,8 @@ function validatePopup() {
  ).checked = true;
  showHidePopup();
 }
-const h = ref(0);
-const d = ref(0);
+const h = ref(1);
+const d = ref(1);
 </script>

 <template>
@ -106,31 +106,6 @@ const d = ref(0);
      <button class="btn calculette" @click="showHidePopup">
        <img src="/abacus.svg" alt="" />
      </button>
-      <template v-if="displayPopup">
-        <div class="popup">
-          <button class="btn close" @click="showHidePopup">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
-              <path
-                d="M21.529 18.006l8.238-8.238c.977-.976.977-2.559 0-3.535-.977-.977-2.559-.977-3.535 0l-8.238 8.238-8.238-8.238c-.976-.977-2.56-.977-3.535 0-.977.976-.977 2.559 0 3.535l8.238 8.238-8.258 8.258c-.977.977-.977 2.559 0 3.535.488.488 1.128.732 1.768.732s1.28-.244 1.768-.732l8.258-8.259 8.238 8.238c.488.488 1.128.732 1.768.732s1.279-.244 1.768-.732c.977-.977.977-2.559 0-3.535l-8.24-8.237z"
-                fill="#000"
-              />
-            </svg>
-          </button>
-          <label for="H">H (m)</label>
-          <input v-model="h" type="number" name="H" />
-          <label for="D">D (cm)</label>
-          <input v-model="d" type="number" name="D" />
-          <p>({{ h }} * 100) / {{ d }} ≃ {{ Math.round((h * 100) / d) }}</p>
-          <button class="btn equal" @click="validatePopup">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
-              <path
-                fill="#31373D"
-                d="M34.459 1.375c-1.391-.902-3.248-.506-4.149.884L13.5 28.17l-8.198-7.58c-1.217-1.125-3.114-1.051-4.239.166-1.125 1.216-1.051 3.115.166 4.239l10.764 9.952s.309.266.452.359c.504.328 1.07.484 1.63.484.982 0 1.945-.482 2.52-1.368L35.343 5.524c.902-1.39.506-3.248-.884-4.149z"
-              />
-            </svg>
-          </button>
-        </div>
-      </template>
    </template>
    <button class="btn next" @click="$emit('nextQuestion')">
      <svg
@ -145,6 +120,31 @@ const d = ref(0);
      </svg>
    </button>
  </div>
+  <template v-if="displayPopup">
+    <div class="popup">
+      <button class="btn close" @click="showHidePopup">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+          <path
+            d="M21.529 18.006l8.238-8.238c.977-.976.977-2.559 0-3.535-.977-.977-2.559-.977-3.535 0l-8.238 8.238-8.238-8.238c-.976-.977-2.56-.977-3.535 0-.977.976-.977 2.559 0 3.535l8.238 8.238-8.258 8.258c-.977.977-.977 2.559 0 3.535.488.488 1.128.732 1.768.732s1.28-.244 1.768-.732l8.258-8.259 8.238 8.238c.488.488 1.128.732 1.768.732s1.279-.244 1.768-.732c.977-.977.977-2.559 0-3.535l-8.24-8.237z"
+            fill="#000"
+          />
+        </svg>
+      </button>
+      <label for="H">H (m)</label>
+      <input v-model="h" type="number" name="H" />
+      <label for="D">D (cm)</label>
+      <input v-model="d" type="number" name="D" />
+      <p>({{ h }} * 100) / {{ d }} ≃ {{ Math.round((h * 100) / d) }}</p>
+      <button class="btn equal" @click="validatePopup">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+          <path
+            fill="#31373D"
+            d="M34.459 1.375c-1.391-.902-3.248-.506-4.149.884L13.5 28.17l-8.198-7.58c-1.217-1.125-3.114-1.051-4.239.166-1.125 1.216-1.051 3.115.166 4.239l10.764 9.952s.309.266.452.359c.504.328 1.07.484 1.63.484.982 0 1.945-.482 2.52-1.368L35.343 5.524c.902-1.39.506-3.248-.884-4.149z"
+          />
+        </svg>
+      </button>
+    </div>
+  </template>
 </template>

 <style lang="sass">
--- a/src/components/Score.vue
+++ b/src/components/Score.vue
@ -10,6 +10,7 @@ import Question from "./Question.vue";
 import "@splidejs/splide/dist/css/splide.min.css";
 import ScoreHeader from "./ScoreHeader.vue";
 import html2canvas from "html2canvas";
+import { toPng } from 'html-to-image';

 const props = defineProps({
  id: {
@ -113,14 +114,41 @@ function nextQuestion() {
  }, 100);
 }

+const saveAs = (blob, fileName) =>{
+  var elem = window.document.createElement('a');
+  elem.href = blob
+  elem.download = fileName;
+  elem.style = 'display:none;';
+  (document.body || document.documentElement).appendChild(elem);
+  if (typeof elem.click === 'function') {
+    elem.click();
+  } else {
+    elem.target = '_blank';
+    elem.dispatchEvent(new MouseEvent('click', {
+      view: window,
+      bubbles: true,
+      cancelable: true
+    }));
+  }
+  URL.revokeObjectURL(elem.href);
+  elem.remove()
+}
+
+const sharing = ref(false);
 async function share() {
-  console.log(document.querySelector(".latest"));
-  const canvas = await html2canvas(document.querySelector("html"));
-  let anchor = document.createElement("a");
-  anchor.download = "download.png";
-  anchor.href = canvas.toDataURL("image/png");
-  anchor.click();
-  anchor.remove();
+  sharing.value = true
+  // const canvas = await html2canvas(document.querySelector("html"));
+  // let anchor = document.createElement("a");
+  // anchor.download = "download.png";
+  // anchor.href = canvas.toDataURL("image/png");
+  // anchor.click();
+  // anchor.remove();
+  const body = document.querySelector("body")
+  body.classList.add("print")
+  const dataUrl = await toPng(body)
+  body.classList.remove("print")
+  saveAs(dataUrl, 'my-node.png')
+  sharing.value = false
 }
 </script>

@ -175,9 +203,9 @@ async function share() {
            </ul>
          </div>
          <button
-            class="btn download"
+            class="btn download no-print"
            @click="() => share()"
-            data-html2canvas-ignore
+            v-if="!sharing"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
              <path
@ -198,6 +226,9 @@ async function share() {
              />
            </svg>
          </button>
+          <button class="btn spin no-print" v-if="sharing">
+            <img src="/spin.svg">
+          </button>
        </div>
      </template>
      <template v-else>
@ -230,6 +261,34 @@ async function share() {
 </template>

 <style lang="sass" scoped>
+.spin
+  bottom: 1.5rem
+  right: 1.5rem
+  img
+    position: absolute
+    top: 50%
+    left: 50%
+    width: 30px
+    height: 30px
+    margin: -15px 0 0 -15px
+    -webkit-animation: spin 2s linear infinite
+    -moz-animation: spin 2s linear infinite
+    animation: spin 2s linear infinite
+
+@-moz-keyframes spin
+  100%
+    -moz-transform: rotate(360deg)
+
+@-webkit-keyframes spin
+    100%
+      -webkit-transform: rotate(360deg)
+
+@keyframes spin
+  100%
+    -webkit-transform: rotate(360deg)
+    transform: rotate(360deg)
+
+
 .center
  text-align: center
 .download
Author	SHA1	Message	Date
Simon	4d3eacffb1	feat: Changement de librairie continuous-integration/drone/push Build is failing Details	2023-05-03 16:10:44 +02:00
Simon	da9fd594a4	fix: Popup design	2023-05-03 15:39:20 +02:00