adonis-responsive-attachment
Advanced tools
Comparing version 1.0.1 to 1.1.0
@@ -8,7 +8,7 @@ /// <reference types="@adonisjs/drive/build/adonis-typings" /> | ||
import { DisksList, ContentHeaders, DriverContract, DriveManagerContract } from '@ioc:Adonis/Core/Drive'; | ||
type Breakpoints = { | ||
large: number; | ||
medium: number; | ||
small: number; | ||
}; | ||
type Breakpoints = Partial<{ | ||
large: number | 'off'; | ||
medium: number | 'off'; | ||
small: number | 'off'; | ||
}> & Record<string, number | 'off'>; | ||
/** | ||
@@ -26,2 +26,3 @@ * Options used to persist the attachment to | ||
responsiveDimensions?: boolean; | ||
disableThumbnail?: boolean; | ||
preComputeUrls?: boolean | ((disk: DriverContract, attachment: ResponsiveAttachmentContract) => Promise<UrlRecords>); | ||
@@ -28,0 +29,0 @@ }; |
declare module '@ioc:Adonis/Core/Application' { | ||
import AttachmentLite from '@ioc:Adonis/Addons/ResponsiveAttachment'; | ||
import ResponsiveAttachment from '@ioc:Adonis/Addons/ResponsiveAttachment'; | ||
interface ContainerBindings { | ||
'Adonis/Addons/ResponsiveAttachment': typeof AttachmentLite; | ||
'Adonis/Addons/ResponsiveAttachment': typeof ResponsiveAttachment; | ||
} | ||
} |
@@ -8,3 +8,3 @@ /// <reference types="node" /> | ||
small: ImageAttributes; | ||
}; | ||
} & Record<string, ImageAttributes>; | ||
type ImageInfo = { | ||
@@ -11,0 +11,0 @@ name?: string; |
@@ -172,3 +172,3 @@ "use strict"; | ||
*/ | ||
const { disk, folder, preComputeUrls = false, breakpoints = exports.DEFAULT_BREAKPOINTS, forceFormat, optimizeOrientation = true, optimizeSize = true, responsiveDimensions = true, ...columnOptions } = options || {}; | ||
const { disk, folder, preComputeUrls = false, breakpoints = exports.DEFAULT_BREAKPOINTS, forceFormat, optimizeOrientation = true, optimizeSize = true, responsiveDimensions = true, disableThumbnail = false, ...columnOptions } = options || {}; | ||
/** | ||
@@ -193,2 +193,3 @@ * Define attachments array on the model constructor | ||
responsiveDimensions, | ||
disableThumbnail, | ||
}, | ||
@@ -195,0 +196,0 @@ }); |
@@ -15,19 +15,9 @@ "use strict"; | ||
exports.ResponsiveAttachment = void 0; | ||
/// <reference path="../../adonis-typings/index.ts" /> | ||
const utils_1 = require("@poppinss/utils"); | ||
const ImageManipulationHelper_1 = require("../Helpers/ImageManipulationHelper"); | ||
const lodash_1 = __importDefault(require("lodash")); | ||
const lodash_1 = require("lodash"); | ||
const cuid_1 = __importDefault(require("cuid")); | ||
const decorator_1 = require("./decorator"); | ||
const REQUIRED_ATTRIBUTES = [ | ||
'name', | ||
'size', | ||
'extname', | ||
'mimeType', | ||
'width', | ||
'height', | ||
'hash', | ||
'breakpoints', | ||
'format', | ||
]; | ||
// Some required attributes have been removed to improve | ||
// compatibility with the `attachment-lite` add-on | ||
const REQUIRED_ATTRIBUTES = ['name', 'size', 'extname', 'mimeType']; | ||
/** | ||
@@ -83,2 +73,5 @@ * Attachment class represents an attachment data type | ||
await file.moveToDisk('image_upload_tmp'); | ||
if (ImageManipulationHelper_1.allowedFormats.includes(file?.subtype) === false) { | ||
throw new RangeError(`Uploaded file is not an allowable image. Make sure that you uploaded only the following format: "jpeg", "png", "webp", "tiff", and "avif".`); | ||
} | ||
const attributes = { | ||
@@ -108,3 +101,3 @@ extname: file.extname, | ||
if (attributes[attribute] === undefined) { | ||
throw new utils_1.Exception(`Cannot create attachment from database response. Missing attribute "${attribute}"`); | ||
throw new RangeError(`Cannot create attachment from database response. Missing attribute "${attribute}"`); | ||
} | ||
@@ -146,3 +139,3 @@ }); | ||
setOptions(options) { | ||
this.options = lodash_1.default.merge({ | ||
this.options = (0, lodash_1.merge)({ | ||
preComputeUrls: false, | ||
@@ -166,3 +159,3 @@ breakpoints: decorator_1.DEFAULT_BREAKPOINTS, | ||
// Also append the `hash` and `buffer` | ||
return lodash_1.default.assign({ ...this.attributes }, info, { hash: (0, cuid_1.default)(), buffer }); | ||
return (0, lodash_1.assign)({ ...this.attributes }, info, { hash: (0, cuid_1.default)(), buffer }); | ||
} | ||
@@ -227,3 +220,3 @@ /** | ||
delete thumbnailImageData.buffer; | ||
lodash_1.default.set(enhancedImageData, 'breakpoints.thumbnail', thumbnailImageData); | ||
(0, lodash_1.set)(enhancedImageData, 'breakpoints.thumbnail', thumbnailImageData); | ||
} | ||
@@ -247,3 +240,3 @@ /** | ||
delete breakpointImageData.buffer; | ||
lodash_1.default.set(enhancedImageData, ['breakpoints', key], breakpointImageData); | ||
(0, lodash_1.set)(enhancedImageData, ['breakpoints', key], breakpointImageData); | ||
} | ||
@@ -254,3 +247,3 @@ } | ||
delete enhancedImageData.path; | ||
lodash_1.default.assign(enhancedImageData, { | ||
(0, lodash_1.assign)(enhancedImageData, { | ||
width, | ||
@@ -275,3 +268,3 @@ height, | ||
await this.getDisk().delete(this.path); | ||
return lodash_1.default.merge(enhancedImageData, this.urls); | ||
return (0, lodash_1.merge)(enhancedImageData, this.urls); | ||
} | ||
@@ -365,3 +358,3 @@ /** | ||
else if (key === 'breakpoints') { | ||
if (lodash_1.default.isEmpty(value) !== true) { | ||
if ((0, lodash_1.isEmpty)(value) !== true) { | ||
if (!this.urls.breakpoints) | ||
@@ -368,0 +361,0 @@ this.urls.breakpoints = {}; |
@@ -37,3 +37,3 @@ /// <reference types="node" /> | ||
hash?: string | undefined; | ||
prefix?: keyof ImageBreakpoints | "original" | undefined; | ||
prefix?: string | undefined; | ||
options?: AttachmentOptions | undefined; | ||
@@ -40,0 +40,0 @@ }) => string; |
@@ -9,6 +9,6 @@ "use strict"; | ||
const helpers_1 = require("@poppinss/utils/build/helpers"); | ||
const lodash_1 = __importDefault(require("lodash")); | ||
const lodash_1 = require("lodash"); | ||
const decorator_1 = require("../Attachment/decorator"); | ||
const getMergedOptions = function (options) { | ||
return lodash_1.default.merge({ | ||
return (0, lodash_1.merge)({ | ||
preComputeUrls: false, | ||
@@ -20,2 +20,3 @@ breakpoints: decorator_1.DEFAULT_BREAKPOINTS, | ||
responsiveDimensions: true, | ||
disableThumbnail: false, | ||
}, options); | ||
@@ -89,2 +90,3 @@ }; | ||
mimeType: `image/${format}`, | ||
format: format, | ||
width: width, | ||
@@ -150,4 +152,5 @@ height: height, | ||
} | ||
if (!options?.responsiveDimensions) | ||
if (!options?.responsiveDimensions || options?.disableThumbnail) { | ||
return null; | ||
} | ||
const { width, height } = await (0, exports.getDimensions)(imageData.buffer); | ||
@@ -172,2 +175,3 @@ if (!width || !height) | ||
mimeType: `image/${format}`, | ||
format: format, | ||
width: thumbnailWidth, | ||
@@ -197,3 +201,8 @@ height: thumbnailHeight, | ||
const originalDimensions = await (0, exports.getDimensions)(imageData.buffer); | ||
return Promise.all(Object.keys(options.breakpoints ?? {})?.map((key) => { | ||
const activeBreakpoints = (0, lodash_1.pickBy)(options.breakpoints, (value) => { | ||
return value !== 'off'; | ||
}); | ||
if ((0, lodash_1.isEmpty)(activeBreakpoints)) | ||
return []; | ||
return Promise.all(Object.keys(activeBreakpoints).map((key) => { | ||
const breakpointValue = options.breakpoints?.[key]; | ||
@@ -200,0 +209,0 @@ const isBreakpointSmallerThanOriginal = (0, exports.breakpointSmallerThan)(breakpointValue, originalDimensions); |
{ | ||
"name": "adonis-responsive-attachment", | ||
"version": "1.0.1", | ||
"version": "1.1.0", | ||
"description": "Turn any field on your Lucid models to an image attachment data type while automatically generating responsive formats for image files.", | ||
@@ -14,8 +14,8 @@ "main": "build/providers/ResponsiveAttachmentProvider.js", | ||
"mrm": "mrm --preset=@adonisjs/mrm-preset", | ||
"pretest": "yarn lint", | ||
"pretest": "npm run lint", | ||
"test": "nyc node japaFile.js", | ||
"clean": "del build", | ||
"compile": "yarn lint && yarn clean && tsc", | ||
"build": "yarn compile", | ||
"prepublishOnly": "yarn build", | ||
"compile": "npm run lint && npm run clean && tsc", | ||
"build": "npm run compile", | ||
"prepublishOnly": "npm run build", | ||
"lint": "eslint . --ext=.ts", | ||
@@ -25,3 +25,3 @@ "format": "prettier --write .", | ||
"release": "np", | ||
"version": "yarn build", | ||
"version": "npm run build", | ||
"sync-labels": "github-label-sync --labels ./node_modules/@adonisjs/mrm-preset/gh-labels.json ndianabasi/adonis-responsive-attachment" | ||
@@ -28,0 +28,0 @@ }, |
@@ -10,3 +10,3 @@ # Adonis Responsive Attachment | ||
[![test](https://github.com/ndianabasi/adonis-responsive-attachment/actions/workflows/test.yml/badge.svg)](https://github.com/ndianabasi/adonis-responsive-attachment/actions/workflows/test.yml) | ||
[![github-actions-image]][github-actions-url] [![npm-image]][npm-url] [![license-image]][license-url] [![typescript-image]][typescript-url] | ||
@@ -44,2 +44,4 @@ The Adonis Responsive Attachment package converts any column on your Lucid model to an image attachment data type while generating and persisting optimised responsive images from the uploaded image including the original image. | ||
- Converts images from one format to another. The following formats are supported: `jpeg`, `png`, `webp`, `tiff`, and `avif`. | ||
- Allows you to disable some breakpoints | ||
- Allows you to disable the generation of the thumbnail image without affecting the generation of other responsive images. | ||
@@ -168,3 +170,4 @@ ## Pre-requisites | ||
7. `responsiveDimensions` - boolean, | ||
8. `preComputeUrls` - boolean. | ||
8. `preComputeUrls` - boolean, | ||
9. `disableThumbnail` - boolean. | ||
@@ -252,2 +255,24 @@ Let's discuss these options | ||
You can also choose to cherry-pick which breakpoint image you want to generate | ||
```ts | ||
class Post extends BaseModel { | ||
@responsiveAttachment({ | ||
large: 'off', // Disable the `large` breakpoint | ||
medium: 'off', // Disable the `medium` breakpoint | ||
small: 550, // Make you overwrite `small` | ||
} | ||
) | ||
public coverImage: ResponsiveAttachmentContract | ||
} | ||
const post = await Post.findOrFail(1) | ||
post.coverImage.name // exists | ||
post.coverImage.breakpoints.thumbnail.name // exists | ||
post.coverImage.breakpoints.small.name // exists | ||
post.coverImage.breakpoints.medium // does not exist | ||
post.coverImage.breakpoints.large // does not exist | ||
``` | ||
### 4. The `forceFormat` Option | ||
@@ -307,2 +332,21 @@ | ||
### 9. The `disableThumbnail` Option | ||
The `disableThumbnail` option, if set to `true`, allows you to disable the generation of the thumbnail without affecting the generation of other breakpoint images. | ||
```ts | ||
class Post extends BaseModel { | ||
@responsiveAttachment({disableThumbnail: true}) | ||
public coverImage: ResponsiveAttachmentContract | ||
} | ||
const post = await Post.findOrFail(1) | ||
post.coverImage.name // exists | ||
post.coverImage.breakpoints.small.name // exists | ||
post.coverImage.breakpoints.medium.name // exists | ||
post.coverImage.breakpoints.large.name // exists | ||
post.coverImage.breakpoints.thumbnail // does not exist | ||
``` | ||
## Generating URLs | ||
@@ -309,0 +353,0 @@ |
77790
1373
614