https://farnostvelehrad.cz/js/fancybox.morphing.php

1// Step 1: Create jQuery plugin
2// ============================
3
4$.fn.fancyMorph = function( opts ) {
5
6  var Morphing = function( $btn, opts ) {
7    var self = this;
8
9    self.opts = $.extend({
10      animationEffect : false,
11      infobar    : false,
12      buttons    : ['close'],
13      smallBtn   : false,
14      touch      : false,
15      baseClass  : 'fancybox-morphing',
16      afterClose : function() {
17        self.close();
18      }
19    }, opts);
20
21    self.init( $btn );
22  };
23
24  Morphing.prototype.init = function( $btn ) {
25    var self = this;
26
27    self.$btn = $btn.addClass('morphing-btn');
28
29    self.$clone = $('<div class="morphing-btn-clone" />')
30      .hide()
31      .insertAfter( $btn );
32
33    // Add wrapping element and set initial width used for positioning
34    $btn.wrap( '<span class="morphing-btn-wrap"></span>' ).on('click', function(e) {
35      e.preventDefault();
36
37      self.start();
38    });
39
40  };
41
42  Morphing.prototype.start = function() {
43    var self = this;
44
45    if ( self.$btn.hasClass('morphing-btn_circle') ) {
46      return;
47    }
48
49    // Set initial width, because it is not possible to start CSS transition from "auto"
50    self.$btn.width( self.$btn.width() ).parent().width( self.$btn.outerWidth() );
51
52    self.$btn.off('.fm').on("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
53
54      if ( e.originalEvent.propertyName === 'width' ) {
55        self.$btn.off('.fm');
56
57        self.animateBg();
58      }
59
60    }).addClass('morphing-btn_circle');
61
62  };
63
64  Morphing.prototype.animateBg = function() {
65    var self = this;
66
67    self.scaleBg();
68
69    self.$clone.show();
70
71    // Trigger repaint
72    self.$clone[0].offsetHeight;
73
74    self.$clone.off('.fm').on("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
75      self.$clone.off('.fm');
76
77      self.complete();
78
79    }).addClass('morphing-btn-clone_visible');
80  };
81
82  Morphing.prototype.scaleBg = function() {
83    var self = this;
84
85    var $clone = self.$clone;
86    var scale  = self.getScale();
87    var $btn   = self.$btn;
88    var pos    = $btn.offset();
89
90    $clone.css({
91      top       : pos.top  + $btn.outerHeight() * 0.5 - ( $btn.outerHeight() * scale * 0.5 ) - $(window).scrollTop(),
92      left      : pos.left + $btn.outerWidth()  * 0.5 - ( $btn.outerWidth()  * scale * 0.5 ) - $(window).scrollLeft(),
93      width     : $btn.outerWidth()  * scale,
94      height    : $btn.outerHeight() * scale,
95      transform : 'scale(' + ( 1 / scale ) + ')'
96    });
97  };
98
99  Morphing.prototype.getScale = function() {
100    var $btn    = this.$btn,
101        radius  = $btn.outerWidth() * 0.5,
102        left    = $btn.offset().left + radius - $(window).scrollLeft(),
103        top     = $btn.offset().top  + radius - $(window).scrollTop(),
104        windowW = $(window).width(),
105        windowH = $(window).height();
106
107    var maxDistHor  = ( left > windowW / 2 ) ? left : ( windowW - left ),
108        maxDistVert = ( top > windowH / 2 )  ? top  : ( windowH - top );
109
110    return Math.ceil(Math.sqrt( Math.pow( maxDistHor, 2 ) + Math.pow( maxDistVert, 2 ) ) / radius );
111  };
112
113  Morphing.prototype.complete = function() {
114    var self = this;
115    var $btn = self.$btn;
116
117    $.fancybox.open({ src : $btn.data('src') || $btn.attr('href') }, self.opts);
118
119    $(window).on('resize.fm', function() {
120      //self.scaleBg();
121    });
122  };
123
124  Morphing.prototype.close = function() {
125    var self   = this;
126    var $clone = self.$clone;
127
128    self.scaleBg();
129
130    $clone.one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
131      $clone.hide();
132
133      self.$btn.removeClass('morphing-btn_circle');
134    });
135
136    $clone.removeClass('morphing-btn-clone_visible');
137
138    $(window).off('resize.fm');
139  };
140
141  // Init
142  this.each(function() {
143    var $this = $(this);
144
145    if ( !$this.data("morphing") ) {
146      $this.data( "morphing", new Morphing( $this, opts ) );
147    }
148
149  });
150
151  return this;
152};