feat: Changement de librairie
continuous-integration/drone/push Build is failing Details

This commit is contained in:
Simon 2023-05-03 16:10:44 +02:00
parent da9fd594a4
commit f8958416fc
5 changed files with 95 additions and 9 deletions

11
package-lock.json generated
View File

@ -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",

View File

@ -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",

3
public/spin.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -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;

View File

@ -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