Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.5 KiB
82 lines
2.5 KiB
/* |
|
* https://github.com/morethanwords/tweb |
|
* Copyright (C) 2019-2021 Eduard Kuzmenko |
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE |
|
*/ |
|
|
|
import { Layouter, RectPart } from "./groupedLayout"; |
|
|
|
export default function prepareAlbum(options: { |
|
container: HTMLElement, |
|
items: {w: number, h: number}[], |
|
maxWidth: number, |
|
minWidth: number, |
|
spacing: number, |
|
maxHeight?: number, |
|
forMedia?: true |
|
}) { |
|
const layouter = new Layouter(options.items, options.maxWidth, options.minWidth, options.spacing, options.maxHeight); |
|
const layout = layouter.layout(); |
|
|
|
const widthItem = layout.find((item) => item.sides & RectPart.Right); |
|
const width = widthItem.geometry.width + widthItem.geometry.x; |
|
|
|
const heightItem = layout.find((item) => item.sides & RectPart.Bottom); |
|
const height = heightItem.geometry.height + heightItem.geometry.y; |
|
|
|
const container = options.container; |
|
container.style.width = width + 'px'; |
|
container.style.height = height + 'px'; |
|
const children = container.children; |
|
|
|
layout.forEach(({geometry, sides}, idx) => { |
|
let div: HTMLElement; |
|
div = children[idx] as HTMLElement; |
|
if(!div) { |
|
div = document.createElement('div'); |
|
container.append(div); |
|
} |
|
|
|
div.classList.add('album-item', 'grouped-item'); |
|
|
|
div.style.width = (geometry.width / width * 100) + '%'; |
|
div.style.height = (geometry.height / height * 100) + '%'; |
|
div.style.top = (geometry.y / height * 100) + '%'; |
|
div.style.left = (geometry.x / width * 100) + '%'; |
|
|
|
if(sides & RectPart.Left && sides & RectPart.Top) { |
|
div.style.borderTopLeftRadius = 'inherit'; |
|
} |
|
|
|
if(sides & RectPart.Left && sides & RectPart.Bottom) { |
|
div.style.borderBottomLeftRadius = 'inherit'; |
|
} |
|
|
|
if(sides & RectPart.Right && sides & RectPart.Top) { |
|
div.style.borderTopRightRadius = 'inherit'; |
|
} |
|
|
|
if(sides & RectPart.Right && sides & RectPart.Bottom) { |
|
div.style.borderBottomRightRadius = 'inherit'; |
|
} |
|
|
|
if(options.forMedia) { |
|
const mediaDiv = document.createElement('div'); |
|
mediaDiv.classList.add('album-item-media'); |
|
|
|
div.append(mediaDiv); |
|
} |
|
|
|
// @ts-ignore |
|
//div.style.backgroundColor = '#' + Math.floor(Math.random() * (2 ** 24 - 1)).toString(16).padStart(6, '0'); |
|
}); |
|
|
|
/* if(options.forMedia) { |
|
layout.forEach((_, i) => { |
|
const mediaDiv = document.createElement('div'); |
|
mediaDiv.classList.add('album-item-media'); |
|
|
|
options.container.children[i].append(mediaDiv); |
|
}); |
|
} */ |
|
}
|
|
|