test cropperjs

TheRougeProject · Jul 27, 2023 · 6a2d810 · 6a2d810
1 parent a90b692
commit 6a2d810
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 15 deletions.
diff --git a/src/components/Cropper.svelte b/src/components/Cropper.svelte
@@ -2,12 +2,20 @@
   import { onMount } from 'svelte'
 
   import Cropper from 'cropperjs'
+  import Modal from '$components/Modal.svelte'
+
+  export let active = false
+  export let src
+
+  let modal
+
+  const close = () => {}
 
   const init = () => {
     const image = new Image()
 
-    image.src = '/rouge-ticket-black.png'
-    image.alt = 'Picture'
+    image.src = src
+    // image.alt = 'Picture'
 
     const cropper = new Cropper(image, {
       container: '.cropper-container'
@@ -19,4 +27,22 @@
   onMount(init)
 </script>
 
-<div class="cropper-container">XXX</div>
+{#if active}
+  <Modal
+    bind:this={modal}
+    bind:active
+    class="fullscreen"
+    noCloseButton={true}
+    on:close={close}>
+    <div class="cropper-container" />
+  </Modal>
+{/if}
+
+<!-- eslint-disable -->
+
+<style lang="scss" global>
+  cropper-canvas {
+    height: 100vh;
+    width: 100hw;
+  }
+</style>
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
@@ -11,6 +11,9 @@
   export let topIsRounded = false
   export let bottomIsRounded = false
 
+  let importedClasses = ''
+  export { importedClasses as class }
+
   const dispatch = createEventDispatcher()
 
   export const onClose = (event) => dispatch('close', event)
@@ -37,7 +40,7 @@
 
 {#if active}
   <Portal target="body">
-    <div class="modal" class:is-active={active}>
+    <div class="modal {importedClasses}" class:is-active={active}>
       <div
         class="modal-background"
         on:click={onClose}
@@ -63,17 +66,31 @@
   @import 'bulma/sass/utilities/_all';
 
   .modal {
-    padding-left: 2px;
-    padding-right: 2px;
-  }
+    &:not(.fullscreen) {
+      padding-left: 2px;
+      padding-right: 2px;
 
-  .modal-content.top-is-rounded {
-    border-top-left-radius: $radius-large;
-    border-top-right-radius: $radius-large;
-  }
+      .modal-content.top-is-rounded {
+        border-top-left-radius: $radius-large;
+        border-top-right-radius: $radius-large;
+      }
 
-  .modal-content.bottom-is-rounded {
-    border-bottom-left-radius: $radius-large;
-    border-bottom-right-radius: $radius-large;
+      .modal-content.bottom-is-rounded {
+        border-bottom-left-radius: $radius-large;
+        border-bottom-right-radius: $radius-large;
+      }
+    }
+
+    &.fullscreen {
+      .modal-content {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: unset;
+        max-height: unset;
+      }
+    }
   }
 </style>
diff --git a/src/routes/(app)/test/+page.svelte b/src/routes/(app)/test/+page.svelte
@@ -2,4 +2,6 @@
   import Cropper from '$components/Cropper.svelte'
 </script>
 
-<Cropper />
+<Cropper
+  active={true}
+  src="https://rouge.o.springbok.skin/ipfs/QmaiRD5Wz4iG5MESS7bPEQcN7F1cfeY7S4cKYPijEH4Rjd" />