From 6d2b3ec072fa05223affeeb441299f87935777c3 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sun, 3 Feb 2019 12:33:15 -0800 Subject: [PATCH] feat: add pinch-zoom to media dialog (#933) * feat: add pinch-zoom to media dialog * fix zoom buttons --- .gitignore | 1 + bin/svgs.js | 5 +- package.json | 1 + .../dialog/components/MediaDialog.html | 117 ++++++++++++------ .../dialog/components/PinchZoomable.html | 115 +++++++++++++++++ yarn.lock | 12 ++ 6 files changed, 213 insertions(+), 38 deletions(-) create mode 100644 src/routes/_components/dialog/components/PinchZoomable.html diff --git a/.gitignore b/.gitignore index 41dce00..cb1cb0c 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ node_modules /static/inline-script.js.map /static/emoji-mart-all.json /src/inline-script/checksum.js +yarn-error.log diff --git a/bin/svgs.js b/bin/svgs.js index 0962d37..f48e0a1 100644 --- a/bin/svgs.js +++ b/bin/svgs.js @@ -40,6 +40,7 @@ module.exports = [ { id: 'fa-circle', src: 'src/thirdparty/font-awesome-svg-png/white/svg/circle.svg' }, { id: 'fa-circle-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/circle-o.svg' }, { id: 'fa-angle-left', src: 'src/thirdparty/font-awesome-svg-png/white/svg/angle-left.svg' }, - { id: 'fa-angle-right', src: 'src/thirdparty/font-awesome-svg-png/white/svg/angle-right.svg' } - + { id: 'fa-angle-right', src: 'src/thirdparty/font-awesome-svg-png/white/svg/angle-right.svg' }, + { id: 'fa-search-minus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-minus.svg' }, + { id: 'fa-search-plus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-plus.svg' } ] diff --git a/package.json b/package.json index 09af4c6..646a619 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "p-any": "^1.1.0", "page-lifecycle": "^0.1.1", "performance-now": "^2.1.0", + "pinch-zoom-element": "^1.1.0", "prop-types": "^15.6.2", "quick-lru": "^2.0.0", "remount": "^0.9.3", diff --git a/src/routes/_components/dialog/components/MediaDialog.html b/src/routes/_components/dialog/components/MediaDialog.html index b9a008d..9dd01b0 100644 --- a/src/routes/_components/dialog/components/MediaDialog.html +++ b/src/routes/_components/dialog/components/MediaDialog.html @@ -11,44 +11,58 @@
- + + +
{/each} - {#if dots.length > 1} -
- - {#each dots as dot, i (dot.i)} - - {/each} - -
- {/if} +
+ + {#if dots.length > 1} +
+ + {#each dots as dot, i (dot.i)} + + {/each} + +
+ {/if} + +
- - @@ -92,14 +106,37 @@ padding: 5px; } + .media-controls-outside { + display: flex; + justify-content: space-between; + margin: 10px; + } + .media-controls { display: flex; justify-content: space-between; - margin: 10px auto; } - :global(.media-control-button) { - margin: 0 5px; + :global(.media-pinch-zoom) { + width: 100%; + height: 100%; + } + + :global(.media-control-button-dummy-spacer) { + visibility: hidden; + } + + @media (min-width: 768px) { + :global(.media-control-button) { + margin: 0 5px; + } + } + + @media (max-width: 320px) { + :global(.icon-button.media-control-button) { + padding-left: 5px; + padding-right: 5px; + } } @supports (scroll-snap-align: start) { @@ -129,6 +166,7 @@ import MediaInDialog from './MediaInDialog.html' import IconButton from '../../IconButton.html' import Shortcut from '../../shortcut/Shortcut.html' + import PinchZoomable from './PinchZoomable.html' import { show } from '../helpers/showDialog' import { oncreate as onCreateDialog } from '../helpers/onCreateDialog' import debounce from 'lodash-es/debounce' @@ -163,6 +201,9 @@ popShortcutScope('mediaDialog') }, store: () => store, + data: () => ({ + pinchZoomMode: false + }), computed: { length: ({ mediaItems }) => mediaItems.length, dots: ({ length }) => times(length, i => ({ i })) @@ -171,7 +212,8 @@ ModalDialog, MediaInDialog, IconButton, - Shortcut + Shortcut, + PinchZoomable }, helpers: { nth (i) { @@ -229,6 +271,9 @@ } else { scroller.scrollLeft = scrollLeft } + }, + togglePinchZoomMode () { + this.set({ pinchZoomMode: !this.get().pinchZoomMode }) } } } diff --git a/src/routes/_components/dialog/components/PinchZoomable.html b/src/routes/_components/dialog/components/PinchZoomable.html new file mode 100644 index 0000000..cdd7870 --- /dev/null +++ b/src/routes/_components/dialog/components/PinchZoomable.html @@ -0,0 +1,115 @@ +
+ + + + + +
+ + diff --git a/yarn.lock b/yarn.lock index 2bc3fe4..72836d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5604,6 +5604,13 @@ pify@^3.0.0: resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176" integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY= +pinch-zoom-element@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/pinch-zoom-element/-/pinch-zoom-element-1.1.0.tgz#0e12c3f7bd63631e45596d1417a15759f80a4e9c" + integrity sha512-jzF7Uad61b1+BnaEktbtOl025WaLDbwVgpcG4qive1OLwuFNU2Itt2c5tD6pp1sx4XgKhLzqjVgQ9qmCr3y6Ew== + dependencies: + pointer-tracker "^2.0.3" + pinkie-promise@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-1.0.0.tgz#d1da67f5482563bb7cf57f286ae2822ecfbf3670" @@ -5685,6 +5692,11 @@ pngjs@^3.3.1: resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b" integrity sha512-1n3Z4p3IOxArEs1VRXnZ/RXdfEniAUS9jb68g58FIXMNkPJeZd+Qh4Uq7/e0LVxAQGos1eIUrqrt4FpjdnEd+Q== +pointer-tracker@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/pointer-tracker/-/pointer-tracker-2.0.3.tgz#6e66be8330e9f4e83c81d76e1d78e42eb4f89c00" + integrity sha512-PURBF4oc45JPECuguX6oPL3pJU5AlF0Nb/4sZdmqzPNAkV4LGL9MJMqb0smWDtmQ0F0KpbxEJn4/Lf5ugN1keQ== + posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"