Skip to content

Commit 69646c4

Browse files
volkarvolkar
committed
Refactoring
1 parent 65c58a2 commit 69646c4

2 files changed

Lines changed: 35 additions & 35 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ const newImages = [{ src: "new-image.jpg", width: 800, height: 600 }]
201201
gallery.replaceImages(newImages)
202202
```
203203

204-
### `changeOptions(options)`
204+
### `updateOptions(options)`
205205

206206
Updates the gallery configuration with new options and re-renders the gallery.
207207

@@ -212,7 +212,7 @@ Updates the gallery configuration with new options and re-renders the gallery.
212212
**Example:**
213213

214214
```javascript
215-
gallery.changeOptions({
215+
gallery.updateOptions({
216216
gap: 20,
217217
maxRows: 5,
218218
})

‎dist/lumosaic.js‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Lumosaic 1.1.1
2+
* Lumosaic 1.1.2
33
* Smart image gallery that automatically arranges photos of any orientation into perfectly aligned rows spanning full screen width
44
*
55
* https://lumosaic.syntheticsymbiosis.com
@@ -10,8 +10,8 @@
1010

1111
class Lumosaic {
1212
constructor(galleryID, imagesSource) {
13-
// Default config
14-
this.config = {
13+
// Default options
14+
this.options = {
1515
rowHeightSM: 0.25,
1616
rowHeightMD: 0.2,
1717
rowHeightXL: 0.18,
@@ -52,7 +52,7 @@ class Lumosaic {
5252
await this.#processParams()
5353

5454
// Render gallery
55-
if (this.config.shuffleImages) {
55+
if (this.options.shuffleImages) {
5656
this.shuffleImages()
5757
} else {
5858
this.#renderGallery()
@@ -81,9 +81,9 @@ class Lumosaic {
8181
this.#renderGallery()
8282
}
8383

84-
changeOptions(options) {
84+
updateOptions(newOptions) {
8585
// Merge new options and rerender gallery
86-
this.#mergeOptions(options)
86+
this.#mergeOptions(newOptions)
8787
this.#renderGallery()
8888
}
8989

@@ -108,7 +108,7 @@ class Lumosaic {
108108
}
109109
})
110110

111-
if (this.config.observeWindowWidth) {
111+
if (this.options.observeWindowWidth) {
112112
// Observe window (body)
113113
this.resizeObserver.observe(document.body)
114114
} else {
@@ -118,9 +118,9 @@ class Lumosaic {
118118
}
119119

120120
#getObservedWidth() {
121-
// Returns the current observed width based on config (window width or gallery container width)
121+
// Returns the current observed width based on options (window width or gallery container width)
122122
let observedWidth
123-
if (this.config.observeWindowWidth) {
123+
if (this.options.observeWindowWidth) {
124124
observedWidth = window.innerWidth
125125
} else {
126126
observedWidth = this.gallery.offsetWidth
@@ -174,7 +174,7 @@ class Lumosaic {
174174
if (img.preview && !img.src) img.src = img.preview
175175

176176
if (!img.width || !img.height) {
177-
if (this.config.shouldRetrieveWidthAndHeight) {
177+
if (this.options.shouldRetrieveWidthAndHeight) {
178178
try {
179179
const result = await this.#getImageSizeFromUrl(img.src)
180180
img.width = result.width
@@ -297,7 +297,7 @@ class Lumosaic {
297297
const aspectRatio = img.height > 0 ? img.width / img.height : 1
298298
const scaledWidth = aspectRatio * this.targetRowHeight
299299

300-
const projectedWidth = currentRowWidth + scaledWidth + currentRow.length * this.config.gap
300+
const projectedWidth = currentRowWidth + scaledWidth + currentRow.length * this.options.gap
301301

302302
if (currentRow.length === 0 || projectedWidth < containerWidth) {
303303
// Image still fits in current row
@@ -311,7 +311,7 @@ class Lumosaic {
311311
// Image does not fit, start new row with image
312312
if (currentRow.length > 0) {
313313
rows.push([...currentRow])
314-
if (this.config.maxRows && rows.length >= this.config.maxRows) {
314+
if (this.options.maxRows && rows.length >= this.options.maxRows) {
315315
// Max rows limit reached
316316
currentRow = []
317317
break
@@ -324,7 +324,7 @@ class Lumosaic {
324324

325325
// Last row logic
326326
if (currentRow.length > 0) {
327-
if (this.config.stretchLastRow === true) {
327+
if (this.options.stretchLastRow === true) {
328328
// If single image left, add to prev row
329329
if (currentRow.length === 1) {
330330
if (rows.length > 0) {
@@ -360,14 +360,14 @@ class Lumosaic {
360360
}
361361

362362
#calculateRowLayout(row, containerWidth, lastRow = false) {
363-
const totalGaps = (row.length - 1) * this.config.gap
363+
const totalGaps = (row.length - 1) * this.options.gap
364364
const availableWidth = containerWidth - totalGaps
365365

366366
const totalAspectRatio = row.reduce((sum, img) => sum + img.width / img.height, 0)
367367

368368
let rowHeight = availableWidth / totalAspectRatio
369369

370-
if (lastRow === true && this.config.stretchLastRow === true) {
370+
if (lastRow === true && this.options.stretchLastRow === true) {
371371
// Last stretched row
372372
if (rowHeight > this.targetRowHeight) {
373373
// Alter image ratios to fit this height
@@ -380,7 +380,7 @@ class Lumosaic {
380380
}))
381381
rowHeight = this.targetRowHeight
382382
}
383-
} else if (lastRow === true && this.config.stretchLastRow === false) {
383+
} else if (lastRow === true && this.options.stretchLastRow === false) {
384384
// Last non-stretched row
385385
if (rowHeight > this.targetRowHeight) {
386386
// Don't allow images in last row to be taller than needed
@@ -396,24 +396,24 @@ class Lumosaic {
396396
}
397397

398398
#renderGallery() {
399-
// Recalculate image dimensions based on current config
399+
// Recalculate image dimensions based on current options
400400
this.images.forEach((img) => {
401401
let calculatedWidth = img.srcWidth
402402
let calculatedHeight = img.srcHeight
403403

404404
// If no width and height, use fallback values
405405
if (calculatedWidth === 0) {
406-
calculatedWidth = this.config.fallbackImageWidth
406+
calculatedWidth = this.options.fallbackImageWidth
407407
}
408408
if (calculatedHeight === 0) {
409-
calculatedHeight = this.config.fallbackImageHeight
409+
calculatedHeight = this.options.fallbackImageHeight
410410
}
411411

412412
// Limit width/height ratio
413-
if (calculatedWidth / calculatedHeight > this.config.maxImageRatio) {
414-
calculatedWidth = this.config.maxImageRatio * calculatedHeight
415-
} else if (calculatedWidth / calculatedHeight < this.config.minImageRatio) {
416-
calculatedWidth = this.config.minImageRatio * calculatedHeight
413+
if (calculatedWidth / calculatedHeight > this.options.maxImageRatio) {
414+
calculatedWidth = this.options.maxImageRatio * calculatedHeight
415+
} else if (calculatedWidth / calculatedHeight < this.options.minImageRatio) {
416+
calculatedWidth = this.options.minImageRatio * calculatedHeight
417417
}
418418

419419
// Set width and height
@@ -426,11 +426,11 @@ class Lumosaic {
426426
const containerWidth = this.gallery.offsetWidth
427427

428428
if (observedWidth === 'xl') {
429-
this.targetRowHeight = this.config.rowHeightXL * containerWidth
429+
this.targetRowHeight = this.options.rowHeightXL * containerWidth
430430
} else if (observedWidth === 'md') {
431-
this.targetRowHeight = this.config.rowHeightMD * containerWidth
431+
this.targetRowHeight = this.options.rowHeightMD * containerWidth
432432
} else {
433-
this.targetRowHeight = this.config.rowHeightSM * containerWidth
433+
this.targetRowHeight = this.options.rowHeightSM * containerWidth
434434
}
435435
this.lastRenderedScreenSize = observedWidth
436436

@@ -458,7 +458,7 @@ class Lumosaic {
458458

459459
if (rowLayout.indexOf(img) < rowLayout.length - 1) {
460460
// Apply horizontal gap to element
461-
itemDiv.style.marginRight = `${this.config.gap}px`
461+
itemDiv.style.marginRight = `${this.options.gap}px`
462462
}
463463

464464
const imgEl = document.createElement('img')
@@ -482,7 +482,7 @@ class Lumosaic {
482482

483483
if (rowIndex < rows.length - 1) {
484484
// Apply vertical gap to row
485-
rowDiv.style.marginBottom = `${this.config.gap}px`
485+
rowDiv.style.marginBottom = `${this.options.gap}px`
486486
}
487487

488488
// Append row to fragment
@@ -495,13 +495,13 @@ class Lumosaic {
495495
this.gallery.appendChild(fragment)
496496
}
497497

498-
#mergeOptions(options) {
499-
if (options.rowHeight) {
498+
#mergeOptions(newOptions) {
499+
if (newOptions.rowHeight) {
500500
// Overwrite all rowHeight variants
501-
options.rowHeightSM = options.rowHeightMD = options.rowHeightXL = options.rowHeight
501+
newOptions.rowHeightSM = newOptions.rowHeightMD = newOptions.rowHeightXL = newOptions.rowHeight
502502
// Unset rowHeight
503-
delete options.rowHeight
503+
delete newOptions.rowHeight
504504
}
505-
this.config = { ...this.config, ...options }
505+
this.options = { ...this.options, ...newOptions }
506506
}
507507
}

0 commit comments

Comments
 (0)