https://reactflow.com/assets/libs/magnify/jquery.magnify-mobile.js?1

1/*!
2 * Mobile plugin for jQuery Magnify (https://thdoan.github.io/magnify/)
3 *
4 * jQuery Magnify by T. H. Doan is licensed under the MIT License.
5 * Read a copy of the license in the LICENSE file or at https://choosealicense.com/licenses/mit/
6 */
7
8(function($) {
9  // Ensure this is loaded after jquery.magnify.js
10  if (!$.fn.magnify) return;
11  // Add required CSS
12  $('<style>' +
13    '.lens-mobile {' +
14      'position:fixed;' +
15      'top:0;' +
16      'left:0;' +
17      'width:100%;' +
18      'height:100%;' +
19      'background:#ccc;' +
20      'display:none;' +
21      'overflow:scroll;' +
22      '-webkit-overflow-scrolling:touch;' +
23      'z-index:9999;' +
24    '}' +
25    '.magnify-mobile>.close {' +
26      'position:fixed;' +
27      'top:10px;' +
28      'right:10px;' +
29      'width:32px;' +
30      'height:32px;' +
31      'background:#333;' +
32      'border-radius:16px;' +
33      'color:#fff;' +
34      'display:inline-block;' +
35      'font:normal bold 20px/32px sans-serif;' +
36      'letter-spacing:0;' +
37      'opacity:0.8;' +
38      'text-align:center;' +
39      'text-shadow:none;' +
40      'z-index:9999;' +
41    '}' +
42    '@media only screen and (min-device-width:320px) and (max-device-width:773px) {' +
43      '/* Assume QHD (1440 x 2560) is highest mobile resolution */' +
44      '.lens-mobile { display:block; }' +
45    '}' +
46    '</style>').appendTo('head');
47  // Ensure .magnify is rendered
48  $(window).on('load', function() {
49    $('body').append('<div class="magnify-mobile" style="display: none;"><div class="lens-mobile"></div></div>');
50    var $lensMobile = $('.lens-mobile');
51    // Only enable mobile zoom on smartphones
52    if ($lensMobile.is(':visible') && !!('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch) || navigator.msMaxTouchPoints)) {
53      var $magnify = $('.magnify'),
54        $magnifyMobile = $('.magnify-mobile');
55      // Disable desktop magnifying lens
56      $magnify.off();
57      // Initiate mobile zoom
58      // NOTE: Fixed elements inside a scrolling div have issues in iOS, so we need to insert the
59      // close icon at the same level as the lens.
60      $magnifyMobile.hide().append('<i class="close">&times;</i>');
61      // Hook up event handlers
62      $magnifyMobile.children('.close').on($magnify.data('mobileCloseEvent'), function() {
63        $magnifyMobile.toggle();
64      });
65      $magnify.children('img').on({
66        'touchend': function() {
67          // Only execute on tap
68          if ($(this).data('drag')) return;
69          var oScrollOffset = $(this).data('scrollOffset');
70          $magnifyMobile.toggle();
71          // Zoom into touch point
72          $lensMobile.scrollLeft(oScrollOffset.x);
73          $lensMobile.scrollTop(oScrollOffset.y);
74        },
75        'touchmove': function() {
76          // Set drag state
77          $(this).data('drag', true);
78        },
79        'touchstart': function(e) {
80          // Render zoom image
81          // NOTE: In iOS background-image is url(...), not url("...").
82          $lensMobile.html('<img src="' + $(this).prev('.magnify-lens').css('background-image').replace(/url\(["']?|["']?\)/g, '') + '" alt="">');
83          // Determine zoom position
84          var $magnifyImage = $(this),
85            oZoomSize = $magnifyImage.data('zoomSize'),
86            nX = e.originalEvent.touches[0].pageX - $magnifyImage.offset().left,
87            nXPct = nX / $magnifyImage.width(),
88            nY = e.originalEvent.touches[0].pageY - $magnifyImage.offset().top,
89            nYPct = nY / $magnifyImage.height();
90          // Store scroll offsets
91          $magnifyImage.data('scrollOffset', {
92            'x': (oZoomSize.width*nXPct)-(window.innerWidth/2),
93            'y': (oZoomSize.height*nYPct)-(window.innerHeight/2)
94          });
95          // Reset drag state
96          $(this).data('drag', false);
97        }
98      });
99    }
100  });
101}(jQuery));