Release v0.5.0 (#53)

Author: mszulik

README.md

@@ -94,33 +94,63 @@ class YourModel extends Model implements HasTransmorpherMediaInterface
 ```
 
 To configure your model to be able to have media and make API calls to the Transmorpher media server, you have to define specific array properties.
-Images and Videos are registered in those arrays by a media name.
+Images, Documents and Videos are registered in those arrays by a media name.
 
 ```php
 protected array $transmorpherImages = [
     'front',
     'back'
 ];
 
+protected array $transmorpherDocuments = [
+    'user-guide',
+    'warning-label'
+];
+
 protected array $transmorpherVideos = [
     'teaser'
 ];
 ```
 
 **NOTE:** These property names are not replaceable since they are expected by the `HasTransmorpherMedia` trait.
 
+Additionally, you can define media by using methods. The function name will be used as media name.
+
+```php
+public function side(): Image
+{
+    return Image::for($this);
+}
+
+public function privacyPolicy(): Document
+{
+    return Document::for($this);
+}
+
+public function trailer(): Video
+{
+    return Video::for($this);
+}
+```
+
 The trait `HasTransmorpherMedia` provides convenient methods to access your media.
 
 ```php
 // Retrieve all images as a collection, with media name as key and the Image object as value.
 $yourModel->images;
 
+// Retrieve all documents as a collection, with media name as key and the Document object as value.
+$yourModel->documents;
+
 // Retrieve all videos as a collection, with media name as key and the Video object as value.
 $yourModel->videos;
 
 // Retrieve a single Image object.
 $yourModel->image('front');
 
+// Retrieve a single Document object.
+$yourModel->document('user-guide');
+
 // Retrieve a single Video object.
 $yourModel->video('teaser');
 ```
@@ -213,7 +243,8 @@ To use the dropzone component in a template, you can simply include it like this
 
 **_NOTE:_** You can optionally define a fixed width by setting the width attribute (e.g. `width="300px"`).
 
-Depending on whether you pass a `Transmorpher\Image` or a `Transmorpher\Video`, the component will function as your upload form for images or videos.
+Depending on whether you pass a `Transmorpher\Image`, `Transmorpher\Document`
+or a `Transmorpher\Video` the component will function as your upload form for images, documents or videos.
 
 #### Dynamic usage
 
@@ -287,6 +318,9 @@ List of available transformations:
 - height
 - format
 - quality
+- page*
+
+> Marked with * only applies to documents.
 
 ### Companion app
 
@@ -324,8 +358,8 @@ App-specific GitHub Secrets:
 
 #### Companion App
 
-A demonstration app, which implements the client package, is booted with PullPreview and available at the PullPreview root URL. The Transmorpher media server runs
-under `/transmorpherServer`.
+A demonstration app, which implements the client package, is booted with PullPreview and available at the PullPreview root URL.
+The Transmorpher media server runs under the `transmorpher.` subdomain.
 
 Additionally, an image is created with the branch name as tag. This image can be used in the Transmorpher media server for testing related changes. This image is deleted on pull
 request close.

amigor/app/Models/User.php

@@ -52,6 +52,11 @@ protected function casts(): array
         'back'
     ];
 
+    protected array $transmorpherDocuments = [
+        'document',
+        'user-guide'
+    ];
+
     protected array $transmorpherVideos = [
         'teaser',
         'full'

amigor/composer.lock

@@ -57,6 +57,13 @@
                 'mimetypes' => 'image/*',
             ],
         ],
+        'document' => [
+            'validations' => [
+                // Max file size in mb.
+                'max_file_size' => 100,
+                'mimetypes' => 'application/pdf',
+            ],
+        ],
         'video' => [
             'validations' => [
                 // Max file size in mb.

amigor/config/transmorpher.php

@@ -1,10 +1,11 @@
 {
-    "/transmorpher.js": "/transmorpher.js?id=1583a86bf2270919b4e8e6750dfbdf5c",
-    "/transmorpher.css": "/transmorpher.css?id=56dbb0cba726c3e63f1c109f6b9a6f1b",
+    "/transmorpher.js": "/transmorpher.js?id=64e7f263794d4269ad64a9dccd40680c",
+    "/transmorpher.css": "/transmorpher.css?id=e40c8169466f69329a2a26ae6e780513",
     "/icons/delete.svg": "/icons/delete.svg?id=f88179ccc3649c47f2264315be6c0421",
+    "/icons/document.svg": "/icons/document.svg?id=1b2d3210a6a3bb5e2c1ea933ae9dcc1a",
     "/icons/enlargen.svg": "/icons/enlargen.svg?id=9f560ce3f022646dbb826a066715a343",
-    "/icons/image.svg": "/icons/image.svg?id=4c114b26044e834f250b0ecc6ec62746",
+    "/icons/image.svg": "/icons/image.svg?id=ed165947e72c93a532fa47f4fcb67881",
     "/icons/more-info.svg": "/icons/more-info.svg?id=87d630fb3dacd138cf341a8bf75ad1f9",
     "/icons/restore.svg": "/icons/restore.svg?id=86882b1085066cf01723a56cac85839e",
-    "/icons/video.svg": "/icons/video.svg?id=33f552229edba3f4d1b9695254ce74c9"
+    "/icons/video.svg": "/icons/video.svg?id=45df1043d580907eceefdb1959180677"
 }

amigor/public/vendor/transmorpher/icons/document.svg

@@ -318,16 +318,16 @@
 .transmorpher .box-shadow-inset, .transmorpher .more-information-modal .card .card-body .card-side .media-preview, .transmorpher .version-list {
   box-shadow: inset 0 1px 1px 0 rgba(60, 75, 100, 0.14), inset 0 2px 1px -1px rgba(60, 75, 100, 0.12), inset 0 1px 3px 0 rgba(60, 75, 100, 0.2);
 }
-.transmorpher .video-transmorpher, .transmorpher .image-transmorpher {
+.transmorpher *[class*=-transmorpher] {
   display: flex;
   justify-content: center;
   height: 100%;
   position: relative;
 }
-.transmorpher .video-transmorpher img:first-of-type, .transmorpher .image-transmorpher img:first-of-type {
+.transmorpher *[class*=-transmorpher] img:first-of-type {
   height: 100%;
 }
-.transmorpher .dropzone.dz-clickable *:not(.video-transmorpher, .error-display, .error-display *, .dz-default, .dz-default *, .dz-preview, .dz.preview *), .transmorpher .full-size-link {
+.transmorpher .dropzone.dz-clickable *:not(.video-transmorpher, .error-display, .error-display *, .dz-default, .dz-default *, .dz-preview, .dz.preview *, .media-display), .transmorpher .full-size-link:not(.disabled) {
   cursor: zoom-in;
 }
 .transmorpher .full-size-link {
@@ -527,6 +527,10 @@
   top: 0;
   left: 0;
 }
+.transmorpher .media-display a.full-size-link.disabled {
+  pointer-events: none;
+  cursor: default;
+}
 .transmorpher .button, .transmorpher .version-list button {
   padding: 0.2rem 1rem;
   border: 0;