Merged processAssets Class and added medialib to formbuilder

content/00-welcome/05-todos.md

@@ -34,10 +34,11 @@ Biig blocks:
 * DONE: Media Library
 * DONE: Posts
 * DONE: Setup
-* Recover Password
+* DONE: Recover Password
 
 Small features:
 
+* DONE: Merge processAssets modell
 * Sitemap and ping
 * Captcha
 * Clear Cache
@@ -49,6 +50,8 @@ Small features:
 * Image generation on the fly
 * Assets
 * Bug: Table of content duplicated for published pages
+* Bug: Navigation frontend if unpublished pages
+* Image and files for meta
 
 Cleanups:
 

content/00-welcome/05-todos.txt

@@ -1 +0,0 @@
-["# ToDos Version 2","[TOC]","## Visual Editor","* FIXED: File is not published from tmp to media\/files if you save the block.","## Raw Editor","* DONE ready","## Medialib","* DONE","## Posts","* Setup","## Plugins","* Asset Class","## Frontend","* DONE\n* DONE: Test restrictions","## ToDos","Biig blocks:","* DONE: Media Library\n* DONE: Posts\n* DONE: Setup\n* DONE: Recover Password","Small features:","* Sitemap and ping\n* Captcha\n* Clear Cache\n* Security Log\n* Backend fields\n* Proxy\n* DONE: Session handling: csrf fail and session start error if restrictions are active\n* Editor: Warn if open another block\n* Image generation on the fly\n* Assets\n* Bug: Table of content duplicated for published pages\n* Bug: Navigation frontend if unpublished pages","Cleanups:","* Events\n* Error messages\n* Translations","## Select userroles","* Userroles for file restriction: in vue-blox-components loaded via api\n* Userroles for userfields: in php model user getUserFields()\n* Userroles for meta: in php controller apiAuthorMeta getMeta()\n* Plugins and themes: in php model extension getThemeDefinitions()","## License Check","* On activation in apiControllerExtension. It checks the license in yaml.\n* In plugin php code with setPremiumLicense\n* In static plugins, it checks manual premium list and method setPremiumLicense and more "]

data/navigation/navi-extended.txt

@@ -38,7 +38,7 @@
     navtitle: 'To Dos'
     hide: false
     noindex: false
-    path: /00-welcome/05-todos.txtmd
+    path: /00-welcome/05-todos.md
     keyPath: '0.5'
 /cyanine-theme:
     navtitle: 'cyanine theme'

system/typemill/Controllers/ControllerApiFile.php

@@ -4,7 +4,7 @@ namespace Typemill\Controllers;
 
 use Psr\Http\Message\ServerRequestInterface as Request;
 use Psr\Http\Message\ResponseInterface as Response;
-use Typemill\Models\ProcessFile;
+use Typemill\Models\ProcessAssets;
 use Typemill\Models\StorageWrapper;
 
 class ControllerApiFile extends Controller
@@ -204,7 +204,7 @@ class ControllerApiFile extends Controller
 			}
 		}
 
-		$fileProcessor	= new ProcessFile();
+		$fileProcessor	= new ProcessAssets();
 
 		$fileinfo = $fileProcessor->storeFile($params['file'], $params['name']);
 		$filePath = str_replace('media/files', 'media/tmp', $fileinfo['url']);

system/typemill/Controllers/ControllerApiImage.php

@@ -4,15 +4,11 @@ namespace Typemill\Controllers;
 
 use Psr\Http\Message\ServerRequestInterface as Request;
 use Psr\Http\Message\ResponseInterface as Response;
-use Typemill\Models\ProcessImage;
+use Typemill\Models\ProcessAssets;
 use Typemill\Models\StorageWrapper;
 use Typemill\Extensions\ParsedownExtension;
 
 
-# use Typemill\Models\ProcessFile;
-# use Typemill\Models\Yaml;
-# use Typemill\Controllers\ControllerAuthorBlockApi;
-
 class ControllerApiImage extends Controller
 {
 
@@ -139,7 +135,7 @@ class ControllerApiImage extends Controller
 			return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
 		}
 		
-		$img = new ProcessImage();
+		$img = new ProcessAssets();
 
 		if($this->settingActive('allowsvg'))
 		{
@@ -321,7 +317,7 @@ class ControllerApiImage extends Controller
 		
 		$imageData64 = 'data:image/jpeg;base64,' . base64_encode($imageData);
 
-		$img = new ProcessImage();
+		$img = new ProcessAssets();
 
 		# prepare the image
 		if(!$img->prepareImage($imageData64, $class . '-' . $videoID . '.jpg'))

system/typemill/Models/ProcessAssets.php

@@ -5,22 +5,29 @@ namespace Typemill\Models;
 use Typemill\Models\Folder;
 use Typemill\Static\Slug;
 
-
 class ProcessAssets
 { 
-	public $errors 		= [];
+	public $errors 					= [];
 
-	public $basepath 	= false;
+	protected $basepath 			= false;
 
-	public $tmpFolder 	= false;
+	protected $tmpFolder 			= false;
 
-	public $extension 	= false;
+	protected $extension 			= false;
 
-	public $filename 	= false;
+	protected $filename 			= false;
 
-	public $filetype 	= false;
+	protected $filetype 			= false;
 
-	public $filedata 	= false;
+	protected $filedata 			= false;
+
+	protected $allowedExtensions 	= ['png' => true, 'jpg' => true, 'jpeg' => true, 'webp' => true];
+
+	protected $animated 			= false;
+
+	protected $resizable 			= true;
+
+	protected $sizes  				= [];
 
 	public function __construct()
 	{
@@ -170,129 +177,272 @@ class ProcessAssets
         return $bytes;
 	}
 
-
-
-/*
-	public function checkFolders($forassets = null)
-	{
-
-		$folders = [$this->mediaFolder, $this->tmpFolder, $this->fileFolder];
-		
-		if($forassets == 'images')
-		{
-			$folders = [$this->mediaFolder, $this->tmpFolder, $this->originalFolder, $this->liveFolder, $this->thumbFolder, $this->customFolder];
-		}
-
-		foreach($folders as $folder)
-		{
-			if(!file_exists($folder) && !is_dir( $folder ))
-			{
-				if(!mkdir($folder, 0755, true))
-				{
-					return false;
-				}
-				if($folder == $this->thumbFolder)
-				{
-					# cleanup old systems
-					$this->cleanupLiveFolder();
-
-					# generate thumbnails from live folder
-					$this->generateThumbs();
-				}
-			}
-			elseif(!is_writeable($folder) OR !is_readable($folder))
-			{
-				return false;
-			} 
-
-			# check if thumb-folder is empty, then generate thumbs from live folder
-			if($folder == $this->thumbFolder && $this->is_dir_empty($folder))
-			{				
-				# cleanup old systems
-				$this->cleanupLiveFolder();
-
-				# generate thumbnails from live folder
-				$this->generateThumbs();
-			}
-		}
-		return true;
-	}
-*/
-
 	public function is_dir_empty($dir) 
 	{
 		return (count(scandir($dir)) == 2);
 	}
 
-/*
-	public function setFileName($originalname, $type, $overwrite = NULL)
+
+	#############################
+	#     FILE HANDLING 		#
+	#############################
+
+	public function storeFile($file, $name)
 	{
-		$pathinfo			= pathinfo($originalname);
-		$this->extension 	= isset($pathinfo['extension']) ? strtolower($pathinfo['extension']) : null;
-		$this->filename 	= Folder::createSlug($pathinfo['filename']);
+		$this->clearTempFolder();
 
-		$filename = $this->filename;
+		$this->setPathInfo($name);
 
-		# check if file name is 
-		if(!$overwrite)
+		$this->decode($file);
+
+		$fullpath = $this->getFullPath();
+
+		if($this->filedata !== false && file_put_contents($fullpath, $this->filedata))
 		{
-			$suffix = 1;
+			$size = filesize($this->getFullPath());
+			$size = $this->formatSizeUnits($size);
 
-			$destination = $this->liveFolder;
-			if($type == 'file')
-			{
-				$destination = $this->fileFolder;
-			}
+			$title = str_replace('-', ' ', $this->filename);
+			$title = $title . ' (' . strtoupper($this->extension) . ', ' . $size .')';
 
-			while(file_exists($destination . $filename . '.' . $this->extension))
-			{
-				$filename = $this->filename . '-' . $suffix;
-				$suffix++;
-			}
+			return [
+				'title' 		=> $title, 
+				'name' 			=> $this->filename, 
+				'extension' 	=> $this->extension, 
+				'size' 			=> $size, 
+				'url' 			=> 'media/files/' . $this->getFullName()
+			];
 		}
 
-		$this->filename = $filename;
-
-		return true;
+		return false;
 	}
-*/
 
-/*
-	public function getName()
+
+	#############################
+	#     IMAGE HANDLING 		#
+	#############################
+
+	public function prepareImage($image, $name)
 	{
-		return $this->filename;
+		# change clear tmp folder and delete only old ones
+		$this->clearTempFolder();
+		#$this->checkFolders('image');
+		$this->decode($image);
+		$this->setPathInfo($name);
+		$this->checkAllowedExtension();
+
+		if(empty($this->errors))
+		{
+			return true;
+		}
+
+		return false;
 	}
 
-	public function setExtension($extension)
+	public function storeOriginalToTmp()
+	{
+		# $this->saveName();
+		$this->saveOriginal();
+
+		if(empty($this->errors))
+		{
+			return true;
+		}
+
+		return false;		
+	}
+
+	public function storeRenditionsToTmp($sizes)
+	{
+		# transform image-stream into image
+		$image 	= $this->createImage();
+		
+		$originalsize = $this->getImageSize($image);
+
+		foreach($sizes as $destinationfolder => $desiredsize)
+		{
+			$desiredsize = $this->calculateSize($originalsize, $desiredsize);
+
+			$resizedImage = $this->resizeImage($image, $desiredsize, $originalsize);
+
+			$this->saveResizedImage($resizedImage, $destinationfolder, $this->extension);
+
+			imagedestroy($resizedImage);
+		}
+
+		imagedestroy($image);
+
+		if(empty($this->errors))
+		{
+			return true;
+		}
+
+		return false;
+	}
+
+	# add an allowed image extension like svg
+	public function addAllowedExtension(string $extension)
+	{
+		$this->allowedExtensions[$extension] = true;
+	}
+
+	# force an image type like webp
+	public function setExtension(string $extension)
 	{
 		$this->extension = $extension;
 	}
 
-	public function getExtension()
+	public function checkAllowedExtension()
 	{
-		return $this->extension;
-	}
-
-	public function getFullName()
-	{
-		return $this->filename . '.' . $this->extension;
-	}
-
-*/
-
-/*
-	public function cleanupLiveFolder()
-	{		
-		# delete all old thumbs mlibrary in live folder
-		foreach(glob($this->liveFolder . '*mlibrary*') as $filename)
+		if(!isset($this->allowedExtensions[$this->extension]))
 		{
-			unlink($filename);
+			$this->errors[] = 'Images with this extension are not allowed.';
+
+			return false;
 		}
 
 		return true;
-	}	
-*/
-	
+	}
+
+	# check if image should not be resized (animated gif and svg)
+	public function isResizable()
+	{
+		if($this->filetype == 'gif' && $this->detectAnimatedGif())
+		{
+			$this->resizable = false;
+		}
+
+		if($this->filetype == 'svg+xml')
+		{
+			$this->resizable = false;
+		}
+
+		return $this->resizable;
+	}
+
+	public function detectAnimatedGif()
+	{
+		$is_animated = preg_match('#(\x00\x21\xF9\x04.{4}\x00\x2C.*){2,}#s', $this->filedata);
+		if ($is_animated == 1)
+		{
+			$this->animated = true;
+		}
+
+		return $this->animated;
+	}
+
+	# save the original image to temp folder
+	public function saveOriginal($destinationfolder = 'ORIGINAL')
+	{
+		$path = $this->tmpFolder . $destinationfolder . '+' . $this->filename . '.' . $this->extension;
+		
+		if(!file_put_contents($path, $this->filedata))
+		{
+			$this->errors[] = 'could not store the image in the temporary folder';			
+		}
+	}
+
+	# save the original image for all sizes/folders
+	public function saveOriginalForAll()
+	{
+		$this->saveOriginal('LIVE');
+		$this->saveOriginal('THUMBS');
+	}
+
+	public function createImage()
+	{
+		return imagecreatefromstring($this->filedata);
+	}
+
+	public function getImageSize($image)
+	{
+		return ['width' => imagesx($image), 'height' => imagesy($image)];
+	}
+
+	public function calculateSize(array $originalsize, array $desiredsize)
+	{
+		# if desired size is bigger than the actual image, then drop the desired sizes and use the actual image size instead
+		if($desiredsize['width'] > $originalsize['width'])
+		{
+			return $originalsize;
+		}
+		
+		if(!isset($desiredsize['height']))
+		{
+			$resizeFactor				= $originalsize['width'] / $desiredsize['width'];
+			$desiredsize['height']		= round( ($originalsize['height'] / $resizeFactor), 0);
+		}
+
+		return $desiredsize;
+	}
+
+	public function resizeImage($image, array $desired, array $original)
+	{
+		# resize
+		$ratio 	= max($desired['width']/$original['width'], $desired['height']/$original['height']);
+		$h 		= $desired['height'] / $ratio;
+		$x 		= ($original['width'] - $desired['width'] / $ratio) / 2;
+		$y 		= ($original['height'] - $desired['height'] / $ratio) / 2;
+		$w 		= $desired['width'] / $ratio;
+
+		$resizedImage = imagecreatetruecolor($desired['width'], $desired['height']);
+
+		# preserve transparency
+		if($this->extension == "gif" or $this->extension == "png" or $this->extension == "webp")
+		{
+			imagecolortransparent($resizedImage, imagecolorallocatealpha($resizedImage, 0, 0, 0, 127));
+			imagealphablending($resizedImage, false);
+			imagesavealpha($resizedImage, true);
+		}
+
+		imagecopyresampled($resizedImage, $image, 0, 0, $x, $y, $desired['width'], $desired['height'], $w, $h);
+
+		return $resizedImage;
+	}
+
+	public function saveResizedImage($resizedImage, string $destinationfolder, string $extension)
+	{
+		$destinationfolder = strtoupper($destinationfolder);		
+
+		switch($extension)
+		{
+			case "png":
+				$storedImage = imagepng( $resizedImage, $this->tmpFolder . $destinationfolder . '+' . $this->filename . '.png', 9 );
+				break;
+			case "gif":
+				$storedImage = imagegif( $resizedImage, $this->tmpFolder . $destinationfolder . '+' . $this->filename . '.gif' );
+				break;
+			case "webp":
+				$storedImage = imagewebp( $resizedImage, $this->tmpFolder . $destinationfolder . '+' . $this->filename . '.webp', 80);
+				break;
+			case "jpg":
+			case "jpeg":
+				$storedImage = imagejpeg( $resizedImage, $this->tmpFolder . $destinationfolder . '+' . $this->filename . '.' . $extension, 80);
+				break;
+			default:
+				$storedImage = false;
+		}
+
+		if(!$storedImage)
+		{
+			$failedImage = $this->tmpFolder . $destinationfolder . '+' . $this->filename . '.' . $extension;
+
+			$this->errors[] = "Could not store the resized version $failedImage";
+
+			return false;
+		}
+
+		return true;
+	}
+
+
+
+
+
+
+
+	# REFACTOR IF NEEDED 
+
 	public function findPagesWithUrl($structure, $url, $result)
 	{
 		foreach ($structure as $key => $item)

system/typemill/Models/_OLDProcessFile.php

@@ -7,6 +7,8 @@ class ProcessFile extends ProcessAssets
 
 	public function storeFile($file, $name)
 	{
+		die('use processAssets instead of processFile');
+
 		$this->clearTempFolder();
 
 		$this->setPathInfo($name);
@@ -51,7 +53,9 @@ class ProcessFile extends ProcessAssets
 	 */
 	public function moveUploadedFile(UploadedFile $uploadedFile, $overwrite = false, $name = false, $folder = NULL)
 	{
+		die('use processAssets instead of processFile');
 		$this->setFileName($uploadedFile->getClientFilename(), 'file');
+
 		
 		if($name)
 		{

system/typemill/Models/_OLDProcessImage.php

@@ -17,6 +17,8 @@ class ProcessImage extends ProcessAssets
 
 	public function prepareImage($image, $name)
 	{
+		die('use processAssets instead of processImages');
+
 		# change clear tmp folder and delete only old ones
 		$this->clearTempFolder();
 		#$this->checkFolders('image');
@@ -34,6 +36,9 @@ class ProcessImage extends ProcessAssets
 
 	public function storeOriginalToTmp()
 	{
+
+		die('use processAssets instead of processImages');
+
 		# $this->saveName();
 		$this->saveOriginal();
 
@@ -47,6 +52,9 @@ class ProcessImage extends ProcessAssets
 
 	public function storeRenditionsToTmp($sizes)
 	{
+		die('use processAssets instead of processImages');
+
+
 		# transform image-stream into image
 		$image 	= $this->createImage();
 		
@@ -76,17 +84,20 @@ class ProcessImage extends ProcessAssets
 	# add an allowed image extension like svg
 	public function addAllowedExtension(string $extension)
 	{
+		die('use processAssets instead of processImages');
 		$this->allowedExtensions[$extension] = true;
 	}
 
 	# force an image type like webp
 	public function setExtension(string $extension)
 	{
+		die('use processAssets instead of processImages');
 		$this->extension = $extension;
 	}
 
 	public function checkAllowedExtension()
 	{
+		die('use processAssets instead of processImages');
 		if(!isset($this->allowedExtensions[$this->extension]))
 		{
 			$this->errors[] = 'Images with this extension are not allowed.';
@@ -100,6 +111,7 @@ class ProcessImage extends ProcessAssets
 	# check if image should not be resized (animated gif and svg)
 	public function isResizable()
 	{
+		die('use processAssets instead of processImages');
 		if($this->filetype == 'gif' && $this->detectAnimatedGif())
 		{
 			$this->resizable = false;
@@ -115,6 +127,7 @@ class ProcessImage extends ProcessAssets
  
 	public function detectAnimatedGif()
 	{
+		die('use processAssets instead of processImages');
 		$is_animated = preg_match('#(\x00\x21\xF9\x04.{4}\x00\x2C.*){2,}#s', $this->filedata);
 		if ($is_animated == 1)
 		{
@@ -127,6 +140,7 @@ class ProcessImage extends ProcessAssets
 	# save the original image to temp folder
 	public function saveOriginal($destinationfolder = 'ORIGINAL')
 	{
+		die('use processAssets instead of processImages');
 		$path = $this->tmpFolder . $destinationfolder . '+' . $this->filename . '.' . $this->extension;
 		
 		if(!file_put_contents($path, $this->filedata))
@@ -138,22 +152,26 @@ class ProcessImage extends ProcessAssets
 	# save the original image for all sizes/folders
 	public function saveOriginalForAll()
 	{
+		die('use processAssets instead of processImages');
 		$this->saveOriginal('LIVE');
 		$this->saveOriginal('THUMBS');
 	}
 
 	public function createImage()
 	{
+		die('use processAssets instead of processImages');
 		return imagecreatefromstring($this->filedata);
 	}
 
 	public function getImageSize($image)
 	{
+		die('use processAssets instead of processImages');
 		return ['width' => imagesx($image), 'height' => imagesy($image)];
 	}
 
 	public function calculateSize(array $originalsize, array $desiredsize)
 	{
+		die('use processAssets instead of processImages');
 		# if desired size is bigger than the actual image, then drop the desired sizes and use the actual image size instead
 		if($desiredsize['width'] > $originalsize['width'])
 		{
@@ -171,6 +189,7 @@ class ProcessImage extends ProcessAssets
 
 	public function resizeImage($image, array $desired, array $original)
 	{
+		die('use processAssets instead of processImages');
 		# resize
 		$ratio 	= max($desired['width']/$original['width'], $desired['height']/$original['height']);
 		$h 		= $desired['height'] / $ratio;
@@ -195,6 +214,7 @@ class ProcessImage extends ProcessAssets
 
 	public function saveResizedImage($resizedImage, string $destinationfolder, string $extension)
 	{
+		die('use processAssets instead of processImages');
 		$destinationfolder = strtoupper($destinationfolder);		
 
 		switch($extension)
@@ -296,6 +316,7 @@ class ProcessImage extends ProcessAssets
 	 */
 	public function moveUploadedImage(UploadedFile $uploadedFile, $overwrite = false, $name = false, $folder = NULL)
 	{
+		die('use processAssets instead of processImages');
 		$this->setFileName($uploadedFile->getClientFilename(), 'file');
 		
 		if($name)
@@ -341,6 +362,7 @@ class ProcessImage extends ProcessAssets
 
 	public function generateThumbs()
 	{
+		die('use processAssets instead of processImages');
 		# generate images from live folder to 'tmthumbs'
 		$liveImages 	= scandir($this->liveFolder);
 
@@ -358,6 +380,7 @@ class ProcessImage extends ProcessAssets
 
 	public function generateThumbFromImageFile($filename)
 	{
+		die('use processAssets instead of processImages');
 		$this->setFileName($filename, 'image', $overwrite = true);
 
 		$image 			= $this->createImageFromPath($this->liveFolder . $filename, $this->extension);
@@ -379,6 +402,7 @@ class ProcessImage extends ProcessAssets
 	# filename and imagepath can be a tmp-version after upload.
 	public function generateSizesFromImageFile($filename, $imagePath)
 	{
+		die('use processAssets instead of processImages');
 		$this->setFileName($filename, 'image');
 
 		$image 			= $this->createImageFromPath($imagePath, $this->extension);
@@ -392,6 +416,7 @@ class ProcessImage extends ProcessAssets
 
 	public function grayscale($imagePath, $extension)
 	{
+		die('use processAssets instead of processImages');
 		$image 	= $this->createImageFromPath($imagePath, $extension);
 
 		imagefilter($image, IMG_FILTER_GRAYSCALE);
@@ -401,6 +426,7 @@ class ProcessImage extends ProcessAssets
 
 	public function createImageFromPath($imagePath, $extension)
 	{
+		die('use processAssets instead of processImages');
 		switch($extension)
 		{
 			case 'gif': $image = imagecreatefromgif($imagePath); break;

system/typemill/author/js/vue-forms-local.js

@@ -1,66 +0,0 @@
-const textcomponent = {
-	props: ['id', 'description', 'maxlength', 'hidden', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'css', 'errors'],	
-	template: `<div :class="css ? css : 'w-full'" class="mt-5 mb-5">
-				<label :for="name" class="block mb-1 font-medium">{{ $filters.translate(label) }}</label>
-				<input type="text" class="h-12 w-full border px-2 py-3" :class="errors[name] ? ' border-red-500 bg-red-100' : ' border-stone-300 bg-stone-200'"
-					:id="id"
-					:maxlength="maxlength"
-					:readonly="readonly"
-					:hidden="hidden"
-					:required="required"
-					:disabled="disabled"
-					:name="name"
-					:placeholder="placeholder"
-					:value="value"
-					@input="update($event, name)">
-			  	<p v-if="errors[name]" class="text-xs text-red-500">{{ errors[name] }}</p>
-			  	<p v-else class="text-xs">{{ $filters.translate(description) }}</p>
-			  </div>`,
-	methods: {
-		update: function($event, name)
-		{
-			eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
-		},
-	},
-};
-
-const textareacomponent = {
-	props: ['id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'css', 'value', 'errors'],
-	template: `<div :class="css ? css : 'w-full'" class="mt-5 mb-5">
-				<label :for="name" class="block mb-1 font-medium">{{ $filters.translate(label) }}</label>
-				<textarea rows="8" class="w-full border border-stone-300 bg-stone-200 px-2 py-3"
-					:id="id"
-					:class="css"
-					:readonly="readonly"
-					:required="required"  
-					:disabled="disabled"  
-					:name="name"
-					:placeholder="placeholder"
-					:value="value"
-					@input="update($event, name)"></textarea>
-			  	<p v-if="errors[name]" class="text-xs text-red-500">{{ errors[name] }}</p>
-			  	<p v-else class="text-xs">{{ $filters.translate(description) }}</p>
-			  </div>`,
-	methods: {
-		update: function($event, name)
-		{
-			eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
-		},
-		formatValue: function(value)
-		{
-			/*
-			if(value !== null && typeof value === 'object')
-			{
-				this.textareaclass = 'codearea';
-				return JSON.stringify(value, undefined, 4);
-			}
-			return value;
-			*/
-		},
-	},
-};
-
-const formcomponents = {
-	'component-text' : textcomponent,
-	'component-textarea' : textareacomponent
-};

system/typemill/author/js/vue-forms.js

@@ -692,12 +692,14 @@ app.component('component-customfields', {
 
 app.component('component-image', {
 	props: ['id', 'description', 'maxlength', 'hidden', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'css', 'errors'],
+	components: {
+		medialib: medialib
+	},	
 	data: function(){
 		return {
 			maxsize: 10, // megabyte
 			imagepreview: '',
 			showmedialib: false,
-//			load: false,
 			quality: false,
 			qualitylabel: false,
 		}
@@ -716,7 +718,7 @@ app.component('component-image', {
 							<input class="absolute w-full top-0 opacity-0 bg-stone-900 cursor-pointer px-2 py-3" type="file" name="image" accept="image/*" @change="onFileChange( $event )" />
 						</div>
 						<div class="w-full mt-3">
-							<button class="w-full bg-stone-700 hover:bg-stone-900 text-white px-2 py-3 text-center cursor-pointer transition duration-100" @click.prevent="openmedialib()"><svg class="icon icon-image baseline"><use xlink:href="#icon-image"></use></svg> {{ $filters.translate('select from medialib') }}</button>
+							<button class="w-full bg-stone-700 hover:bg-stone-900 text-white px-2 py-3 text-center cursor-pointer transition duration-100" @click.prevent="showmedialib = true"><svg class="icon icon-image baseline"><use xlink:href="#icon-image"></use></svg> {{ $filters.translate('select from medialib') }}</button>
 						</div>
 						<div class="w-full mt-3">
 							<label class="block mb-1">{{ $filters.translate('Image URL (read only)') }}</label>
@@ -742,11 +744,14 @@ app.component('component-image', {
 					  	<p v-else class="text-xs">{{ $filters.translate(description) }}</p>
 					</div>
 				</div>
-				<transition name="fade-editor">
-					<div v-if="showmedialib" class="modalWindow">
-						<medialib parentcomponent="images"></medialib> 
+
+				<Transition name="initial" appear>
+					<div v-if="showmedialib" class="fixed top-0 left-0 right-0 bottom-0 bg-stone-100 z-50">
+						<button class="w-full bg-stone-200 hover:bg-rose-500 hover:text-white p-2 transition duration-100" @click.prevent="showmedialib = false">{{ $filters.translate('close library') }}</button>
+						<medialib parentcomponent="images" @addFromMedialibEvent="addFromMedialibFunction"></medialib>
 					</div>
-				</transition>
+				</Transition> 
+
 			  </div>`,
 	mounted: function() {
 		if(this.hasValue(this.value))
@@ -767,6 +772,14 @@ app.component('component-image', {
 		}
 	},
 	methods: {
+		addFromMedialibFunction(value)
+		{
+		//	this.imgfile 		= value;
+			this.imagepreview 	= data.urlinfo.baseurl + '/' + value;
+			this.showmedialib 	= false;
+
+			this.update(value);
+		},
 		hasValue: function(value)
 		{
 			if(typeof this.value !== "undefined" && this.value !== false && this.value !== null && this.value !== '')
@@ -799,25 +812,23 @@ app.component('component-image', {
 		{
 			eventBus.$emit('forminput', {'name': this.name, 'value': filepath});
 		},
+		/*
 		updatemarkdown: function(markdown, url)
 		{
-			/* is called from child component medialib */
+			/* is called from child component medialib 
 			this.update(url);
 		},
 		createmarkdown: function(url)
 		{
-			/* is called from child component medialib */
+			/* is called from child component medialib 
 			this.update(url);
 		},
+		*/
 		deleteImage: function()
 		{
 			this.imagepreview = '';
 			this.update('');
 		},
-		openmedialib: function()
-		{
-			this.showmedialib = true;
-		},
 		onFileChange: function( e )
 		{
 			if(e.target.files.length > 0)
@@ -872,11 +883,6 @@ app.component('component-image', {
 app.component('component-file', {
 	props: ['id', 'description', 'maxlength', 'hidden', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: `<div class="large">
-				<transition name="fade-editor">
-					<div v-if="showmedialib" class="modalWindow">
-						<medialib parentcomponent="files"></medialib> 
-					</div>
-				</transition>
 				<label>{{ $filters.translate(label) }}</label>
 				<div v-if="load" class="loadwrapper"><span class="load"></span></div>
 				<div class="ba b--moon-gray">
@@ -902,7 +908,7 @@ app.component('component-file', {
 								<p class="relative w-100 bn br1 white pa1 h2 ma0 tc"><svg class="icon icon-upload baseline"><use xlink:href="#icon-upload"></use></svg>  {{ $filters.translate('upload') }}</p>
 							</div> 
 							<div class="dib w-100 bl b--white"> 
-								<button @click.prevent="openmedialib()" class="w-100 pointer bn bg-tm-green white pa0 h2 ma0 tc dim"><svg class="icon icon-paperclip baseline"><use xlink:href="#icon-paperclip"></use></svg> {{ $filters.translate('medialib') }}</button> 
+								<button @click.prevent="showmedialib = true" class="w-100 pointer bn bg-tm-green white pa0 h2 ma0 tc dim"><svg class="icon icon-paperclip baseline"><use xlink:href="#icon-paperclip"></use></svg> {{ $filters.translate('medialib') }}</button> 
 							</div> 
 						</div>
 					</div>
@@ -915,6 +921,14 @@ app.component('component-file', {
 						</select>
 					</div>
 				</div>
+
+				<Transition name="initial" appear>
+					<div v-if="showmedialib" class="fixed top-0 left-0 right-0 bottom-0 bg-stone-100 z-50">
+						<button class="w-full bg-stone-200 hover:bg-rose-500 hover:text-white p-2 transition duration-100" @click.prevent="showmedialib = false">{{ $filters.translate('close library') }}</button>
+						<medialib parentcomponent="images" @addFromMedialibEvent="addFromMedialibFunction"></medialib>
+					</div>
+				</Transition> 
+
 			  </div>`,
 	data: function(){
 		return {
@@ -930,6 +944,15 @@ app.component('component-file', {
 		this.getrestriction();
 	},
 	methods: {
+		addFromMedialibFunction(value)
+		{
+			this.imgfile 		= value;
+			this.imgpreview 	= data.urlinfo.baseurl + '/' + value;
+			this.showmedialib 	= false;
+			this.saveimage 		= false;
+
+			this.createmarkdown();
+		},
 		update: function(value)
 		{
 			FormBus.$emit('forminput', {'name': this.name, 'value': value});
@@ -945,10 +968,6 @@ app.component('component-file', {
 			/* is called from child component medialib */
 			this.update(url);
 		},
-		openmedialib: function()
-		{
-			this.showmedialib = true;
-		},
 		deleteFile: function()
 		{
 			this.update('');