1 | (function($) {
|
2 | var _stack = 0,
|
3 | _lastID = 0,
|
4 | _generateID = function() {
|
5 | _lastID++;
|
6 | return 'materialize-lean-overlay-' + _lastID;
|
7 | };
|
8 |
|
9 | $.fn.extend({
|
10 | openModal: function(options) {
|
11 |
|
12 | $('body').css('overflow', 'hidden');
|
13 |
|
14 | var defaults = {
|
15 | opacity: 0.5,
|
16 | in_duration: 350,
|
17 | out_duration: 250,
|
18 | ready: undefined,
|
19 | complete: undefined,
|
20 | dismissible: true,
|
21 | starting_top: '4%'
|
22 | },
|
23 | overlayID = _generateID(),
|
24 | $modal = $(this),
|
25 | $overlay = $('<div class="lean-overlay"></div>'),
|
26 | lStack = (++_stack);
|
27 |
|
28 |
|
29 | $overlay.attr('id', overlayID).css('z-index', 1000 + lStack * 2);
|
30 | $modal.data('overlay-id', overlayID).css('z-index', 1000 + lStack * 2 + 1);
|
31 |
|
32 | $("body").append($overlay);
|
33 |
|
34 |
|
35 | options = $.extend(defaults, options);
|
36 |
|
37 | if (options.dismissible) {
|
38 | $overlay.click(function() {
|
39 | $modal.closeModal(options);
|
40 | });
|
41 |
|
42 | $(document).on('keyup.leanModal' + overlayID, function(e) {
|
43 | if (e.keyCode === 27) {
|
44 | $modal.closeModal(options);
|
45 | }
|
46 | });
|
47 | }
|
48 |
|
49 | $modal.find(".modal-close").on('click.close', function(e) {
|
50 | $modal.closeModal(options);
|
51 | });
|
52 |
|
53 | $overlay.css({ display : "block", opacity : 0 });
|
54 |
|
55 | $modal.css({
|
56 | display : "block",
|
57 | opacity: 0
|
58 | });
|
59 |
|
60 | $overlay.velocity({opacity: options.opacity}, {duration: options.in_duration, queue: false, ease: "easeOutCubic"});
|
61 | $modal.data('associated-overlay', $overlay[0]);
|
62 |
|
63 |
|
64 | if ($modal.hasClass('bottom-sheet')) {
|
65 | $modal.velocity({bottom: "0", opacity: 1}, {
|
66 | duration: options.in_duration,
|
67 | queue: false,
|
68 | ease: "easeOutCubic",
|
69 |
|
70 | complete: function() {
|
71 | if (typeof(options.ready) === "function") {
|
72 | options.ready();
|
73 | }
|
74 | }
|
75 | });
|
76 | }
|
77 | else {
|
78 | $.Velocity.hook($modal, "scaleX", 0.7);
|
79 | $modal.css({ top: options.starting_top });
|
80 | $modal.velocity({top: "10%", opacity: 1, scaleX: '1'}, {
|
81 | duration: options.in_duration,
|
82 | queue: false,
|
83 | ease: "easeOutCubic",
|
84 |
|
85 | complete: function() {
|
86 | if (typeof(options.ready) === "function") {
|
87 | options.ready();
|
88 | }
|
89 | }
|
90 | });
|
91 | }
|
92 |
|
93 |
|
94 | }
|
95 | });
|
96 |
|
97 | $.fn.extend({
|
98 | closeModal: function(options) {
|
99 | var defaults = {
|
100 | out_duration: 250,
|
101 | complete: undefined
|
102 | },
|
103 | $modal = $(this),
|
104 | overlayID = $modal.data('overlay-id'),
|
105 | $overlay = $('#' + overlayID);
|
106 |
|
107 | options = $.extend(defaults, options);
|
108 |
|
109 |
|
110 | $('body').css('overflow', '');
|
111 |
|
112 | $modal.find('.modal-close').off('click.close');
|
113 | $(document).off('keyup.leanModal' + overlayID);
|
114 |
|
115 | $overlay.velocity( { opacity: 0}, {duration: options.out_duration, queue: false, ease: "easeOutQuart"});
|
116 |
|
117 |
|
118 |
|
119 | if ($modal.hasClass('bottom-sheet')) {
|
120 | $modal.velocity({bottom: "-100%", opacity: 0}, {
|
121 | duration: options.out_duration,
|
122 | queue: false,
|
123 | ease: "easeOutCubic",
|
124 |
|
125 | complete: function() {
|
126 | $overlay.css({display:"none"});
|
127 |
|
128 |
|
129 | if (typeof(options.complete) === "function") {
|
130 | options.complete();
|
131 | }
|
132 | $overlay.remove();
|
133 | _stack--;
|
134 | }
|
135 | });
|
136 | }
|
137 | else {
|
138 | $modal.velocity(
|
139 | { top: options.starting_top, opacity: 0, scaleX: 0.7}, {
|
140 | duration: options.out_duration,
|
141 | complete:
|
142 | function() {
|
143 |
|
144 | $(this).css('display', 'none');
|
145 |
|
146 | if (typeof(options.complete) === "function") {
|
147 | options.complete();
|
148 | }
|
149 | $overlay.remove();
|
150 | _stack--;
|
151 | }
|
152 | }
|
153 | );
|
154 | }
|
155 | }
|
156 | });
|
157 |
|
158 | $.fn.extend({
|
159 | leanModal: function(option) {
|
160 | return this.each(function() {
|
161 |
|
162 | var defaults = {
|
163 | starting_top: '4%'
|
164 | },
|
165 |
|
166 | options = $.extend(defaults, option);
|
167 |
|
168 |
|
169 | $(this).click(function(e) {
|
170 | options.starting_top = ($(this).offset().top - $(window).scrollTop()) /1.15;
|
171 | var modal_id = $(this).attr("href") || '#' + $(this).data('target');
|
172 | $(modal_id).openModal(options);
|
173 | e.preventDefault();
|
174 | });
|
175 | });
|
176 | }
|
177 | });
|
178 | })(jQuery);
|