diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index 474e0951..9e5e71ff 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -52,11 +52,10 @@ import { doubleRaf, fastRaf } from "../helpers/schedulers"; import { attachClickEvent } from "../helpers/dom/clickEvent"; import PopupDeleteMessages from "./popups/deleteMessages"; import RangeSelector from "./rangeSelector"; -import attachGrabListeners, { GrabEvent } from "../helpers/dom/attachGrabListeners"; const ZOOM_STEP = 0.5; const ZOOM_INITIAL_VALUE = 1; -const ZOOM_MIN_VALUE = 1; +const ZOOM_MIN_VALUE = 0.5; const ZOOM_MAX_VALUE = 4; // TODO: масштабирование картинок (не SVG) при ресайзе, и правильный возврат на исходную позицию @@ -193,7 +192,7 @@ class AppMediaViewerBase this.changeZoom(true)); - this.zoomElements.rangeSelector = new RangeSelector(ZOOM_STEP, ZOOM_INITIAL_VALUE + ZOOM_STEP, ZOOM_MIN_VALUE, ZOOM_MAX_VALUE, true); + this.zoomElements.rangeSelector = new RangeSelector(ZOOM_STEP, ZOOM_INITIAL_VALUE, ZOOM_MIN_VALUE, ZOOM_MAX_VALUE, true); this.zoomElements.rangeSelector.setListeners(); this.zoomElements.rangeSelector.setHandlers({ onScrub: this.setZoomValue, @@ -272,7 +271,12 @@ class AppMediaViewerBase this.toggleZoom()); + this.buttons.zoom.addEventListener('click', () => { + if(this.isZooming()) this.toggleZoom(false); + else { + this.changeZoom(true); + } + }); this.wholeDiv.addEventListener('click', this.onClick); @@ -332,7 +336,7 @@ class AppMediaViewerBase ZOOM_INITIAL_VALUE); + this.toggleZoom(value !== ZOOM_INITIAL_VALUE); }; protected isZooming() { @@ -435,7 +439,7 @@ class AppMediaViewerBase { this.wholeDiv.remove(); @@ -493,7 +497,7 @@ class AppMediaViewerBase 1) { // 33 + /* if(zoomValue > 1) { // 33 // const diffX = (rect.width * zoomValue - rect.width) / 4; const diffX = (rect.width * zoomValue - rect.width) / 2; const diffY = (rect.height * zoomValue - rect.height) / 4; // left -= diffX; // top += diffY; - } + } */ transform += `translate3d(${left}px,${top}px,0) `; @@ -697,8 +702,8 @@ class AppMediaViewerBase 1) { - const width = this.moversContainer.scrollWidth * scaleX; - const height = this.moversContainer.scrollHeight * scaleY; + // const width = this.moversContainer.scrollWidth * scaleX; + // const height = this.moversContainer.scrollHeight * scaleY; const willBeLeft = appPhotosManager.windowW / 2 - rect.width / 2; const willBeTop = appPhotosManager.windowH / 2 - rect.height / 2; const left = rect.left - willBeLeft/* + (width - rect.width) / 2 */; @@ -870,7 +875,7 @@ class AppMediaViewerBase { mover.style.borderRadius = borderRadius; @@ -1076,19 +1081,21 @@ class AppMediaViewerBase { - const target = findUpClassName(e.target as HTMLDivElement, 'grid-item'); + + const onMediaClick = (className: string, targetClassName: string, inputFilter: MyInputMessagesFilter, e: MouseEvent) => { + const target = findUpClassName(e.target as HTMLDivElement, className); const mid = +target.dataset.mid; if(!mid) { @@ -286,8 +286,13 @@ export default class AppSearchSuper { const peerId = +target.dataset.peerId; - const targets = (Array.from(this.tabs.inputMessagesFilterPhotoVideo.querySelectorAll('.grid-item')) as HTMLElement[]).map(el => { - return {element: el, mid: +el.dataset.mid, peerId: +el.dataset.peerId}; + const targets = (Array.from(this.tabs[inputFilter].querySelectorAll('.' + targetClassName)) as HTMLElement[]).map(el => { + const containerEl = findUpClassName(el, className); + return { + element: el, + mid: +containerEl.dataset.mid, + peerId: +containerEl.dataset.peerId + }; }); //const ids = Object.keys(this.mediaDivsByIds).map(k => +k).sort((a, b) => a - b); @@ -295,9 +300,12 @@ export default class AppSearchSuper { const message = appMessagesManager.getMessageByPeer(peerId, mid); new AppMediaViewer() - .setSearchContext(this.copySearchContext(this.mediaTab.inputFilter)) - .openMedia(message, target, 0, false, targets.slice(0, idx), targets.slice(idx + 1)); - }); + .setSearchContext(this.copySearchContext(inputFilter)) + .openMedia(message, targets[idx].element, 0, false, targets.slice(0, idx), targets.slice(idx + 1)); + }; + + this.tabs.inputMessagesFilterPhotoVideo.addEventListener('click', onMediaClick.bind(null, 'grid-item', 'grid-item', 'inputMessagesFilterPhotoVideo')); + this.tabs.inputMessagesFilterDocument.addEventListener('click', onMediaClick.bind(null, 'document-with-thumb', 'media-container', 'inputMessagesFilterDocument')); this.mediaTab = this.mediaTabs[0];