Dotclear

source: admin/js/jquery/jquery.modal.js @ 0:54703be25dd6

Revision 0:54703be25dd6, 9.1 KB checked in by Dsls <dsls@…>, 15 years ago (diff)

2.3 branch (trunk) first checkin
Line 
1(function($) {
2     if (/^1\.(0|1)\./.test($.fn.jquery) || /^1\.2\.(0|1|2|3|4|5)/.test($.fn.jquery)) {
3          throw('Modal requieres jQuery v1.2.6 or later. You are using v'+$.fn.jquery);
4          return;
5     }
6     
7     $.modal = function(data,params) {
8          this.params = $.extend(this.params,params);
9          return this.build(data);
10     };
11     $.modal.version = '1.0';
12     
13     $.modal.prototype = {
14          params: {
15               width: null,
16               height: null,
17               speed: 300,
18               opacity: 0.9,
19               loader_img: 'loader.gif',
20               loader_txt: 'loading...',
21               close_img: 'close.png',
22               close_txt: 'close',
23               on_close: function() {}
24          },
25          ctrl: {
26               box: $(),
27               loader: $(),
28               overlay: $('<div id="jq-modal-overlay"></div>'),
29               hidden: $()
30          },
31         
32          build: function(data) {
33               this.ctrl.loader = $('<div class="jq-modal-load"><img src="' + this.params.loader_img + '" alt="' + this.params.loader_txt + '" /></div>');
34               this.addOverlay();
35               var size = this.getBoxSize(this.ctrl.loading);
36               
37               this.ctrl.box = this.getBox(this.ctrl.loading,{
38                    top: Math.round($(window).height()/2 + $(window).scrollTop() - size.h/2),
39                    left: Math.round($(window).width()/2 + $(window).scrollLeft() - size.w/2),
40                    visibility: 'hidden'
41               });
42               this.ctrl.overlay.after(this.ctrl.box);
43               if (data != undefined) {
44                    this.updateBox(data);
45                    this.data = data;
46               }
47               return this;
48          },
49          updateBox: function(data,fn) {
50               var This = this;
51               this.hideCloser();
52               fn = $.isFunction(fn) ? fn : function() {};
53               var content = $('div.jq-modal-content',this.ctrl.box);
54               content.empty().append(this.ctrl.loader);
55               var size = this.getBoxSize(data,this.params.width,this.params.height);
56               
57               var top = Math.round($(window).height()/2 + $(window).scrollTop() - size.h/2);
58               var left = Math.round($(window).width()/2 + $(window).scrollLeft() - size.w/2);
59               
60               this.ctrl.box.css('visibility','visible').animate({
61                    top: top < 0 ? 0 : top,
62                    left: left < 0 ? 0 : left,
63                    width: size.w,
64                    height: size.h
65               },this.params.speed,function() {
66                    This.setContentSize(content,This.params.width,This.params.height);
67                    content.empty().append(data).css('opacity',0)
68                    .fadeTo(This.params.speed,1,function() {
69                         fn.call(This,content);
70                    });
71                    This.showCloser();
72               });
73          },
74          getBox: function(data,css,content_w,content_h) {
75               var box = $(
76                    '<div class="jq-modal">'+
77                    '<div class="jq-modal-container"><div class="jq-modal-content">'+
78                    '</div></div></div>'
79                    ).css($.extend({
80                         position: 'absolute',
81                         top: 0,
82                         left: 0,
83                         zIndex: 100
84                    },css));
85               
86               if (data != undefined) {
87                    $('div.jq-modal-content',box).append(data);
88               }
89               
90               this.setContentSize($('div.jq-modal-content',box),content_w,content_h);
91               return box;
92          },
93          getBoxSize: function(data,content_w,content_h) {
94               var box = this.getBox(data,{ visibility: 'hidden' },content_w,content_h);
95               this.ctrl.overlay.after(box);
96               var size = { w: box.width(), h: box.height() };
97               box.remove();
98               box = null;
99               return size;
100          },
101          setContentSize: function(content,w,h) {
102               content.css({
103                    width: w > 0 ? w : 'auto',
104                    height: h > 0 ? h : 'auto'
105               });
106          },
107          showCloser: function() {
108               if ($('div.jq-modal-closer',this.ctrl.box).length > 0) {
109                    $('div.jq-modal-closer',this.ctrl.box).show();
110                    return;
111               }
112               
113               $('div.jq-modal-container',this.ctrl.box).append(
114                    '<div class="jq-modal-closer"><a href="#">' + this.params.close_txt + '</a></div>'
115               );
116               var This = this;
117               var close = $('div.jq-modal-closer a',this.ctrl.box)
118               close.css({
119                    background: 'transparent url(' + this.params.close_img + ') no-repeat'
120               })
121               .click(function() {
122                    This.removeOverlay();
123                    return false;
124               });
125               
126               if (document.all) {
127                    close[0].runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + this.params.close_img + '", sizingMethod="crop")';
128                    close[0].runtimeStyle.backgroundImage = "none"
129               }
130          },
131          hideCloser: function() {
132               $('div.jq-modal-closer',this.ctrl.box).hide();
133          },
134         
135          addOverlay: function() {
136               var This = this;
137               if (document.all) {
138                    this.ctrl.hidden = $('select:visible, object:visible, embed:visible').
139                    css('visibility','hidden');
140               }
141               this.ctrl.overlay.css({
142                    backgroundColor: '#000',
143                    position: 'absolute',
144                    top: 0,
145                    left: 0,
146                    zIndex: 90,
147                    opacity: this.params.opacity
148               })
149               .appendTo('body')
150               .dblclick(function() { This.removeOverlay(); });
151               
152               this.resizeOverlay({data:this.ctrl});
153               
154               $(window).bind('resize.modal',this.ctrl,this.resizeOverlay);
155               $(document).bind('keypress.modal',this,this.keyRemove);
156          },
157          resizeOverlay: function(e) {
158               e.data.overlay.css({
159                    width: $(window).width(),
160                    height: $(document).height()
161               });
162               if (e.data.box.parents('body').length > 0) {
163                    var top = Math.round($(window).height()/2 + $(window).scrollTop() - e.data.box.height()/2);
164                    var left = Math.round($(window).width()/2 + $(window).scrollLeft() - e.data.box.width()/2);
165                    e.data.box.css({
166                         top: top < 0 ? 0 : top,
167                         left: left < 0 ? 0 : left
168                    });
169               }
170          },
171          keyRemove: function(e) {
172               if (e.keyCode == 27) {
173                    e.data.removeOverlay();
174               }
175               return true;
176          },
177          removeOverlay: function() {
178               $(window).unbind('resize.modal');
179               $(document).unbind('keypress');
180               this.params.on_close.apply(this);
181               this.ctrl.overlay.remove();
182               this.ctrl.hidden.css('visibility','visible');
183               this.ctrl.box.remove();
184               this.ctrl.box = $();
185          }
186     };
187})(jQuery);
188
189(function($) {
190     $.fn.modalImages = function(params) {
191          params = $.extend(this.params,params);
192          var links = new Array();
193          this.each(function() {
194               if ($(this).attr('href') == '' || $(this).attr('href') == undefined || $(this).attr('href') == '#') {
195                    return false;
196               }
197               var index = links.length;
198               links.push($(this));
199               $(this).click(function() {
200                    new $.modalImages(index,links,params);
201                    return false;
202               });
203               return true;
204          });
205         
206          return this;
207     };
208     
209     $.modalImages = function(index,links,params) {
210          this.links = links;
211          this.modal = new $.modal(null,params);
212          this.showImage(index);
213     };
214     
215     $.modalImages.prototype = {
216          params: {
217               prev_txt: 'previous',
218               next_txt: 'next',
219               prev_img: 'prev.png',
220               next_img: 'next.png',
221               blank_img: 'blank.gif'
222          },
223          showImage: function(index) {
224               var This = this;
225               $(document).unbind('keypress.modalImage');
226               if (this.links[index] == undefined) {
227                    this.modal.removeOverlay();
228               }
229               var link = this.links[index];
230               var modal = this.modal;
231               
232               var res = $('<div></div>');
233               res.append('<img src="' + link.attr('href') + '" alt="" />');
234               
235               var thumb = $('img:first',link);
236               if (thumb.length > 0 && thumb.attr('title')) {
237                    res.append('<span class="jq-modal-legend">' + thumb.attr('title') + '</span>');
238               } else if (link.attr('title')) {
239                    res.append('<span class="jq-modal-legend">' + link.attr('title') + '</span>');
240               }
241               
242               // Add prev/next buttons
243               if (index != 0) {
244                    $('<a class="jq-modal-prev" href="#">prev</a>').appendTo(res);
245               }
246               if (index+1 < this.links.length) {
247                    $('<a class="jq-modal-next" href="#">next</a>').appendTo(res);
248               }
249               
250               var img = new Image();
251               
252               // Display loader while loading image
253               if (this.modal.ctrl.box.css('visibility') == 'visible') {
254                    $('div.jq-modal-content',this.modal.ctrl.box)
255                    .empty().append(this.modal.ctrl.loader);
256               } else {
257                    this.modal.updateBox(this.modal.ctrl.loader);
258               }
259               
260               img.onload = function() {
261                    modal.updateBox(res,function() {
262                         var Img = $('div.jq-modal-content img',this.ctrl.box);
263                         This.navBtnStyle($('a.jq-modal-next',this.ctrl.box),true).css('height',Img.height()).bind('click',index+1,navClick);
264                         This.navBtnStyle($('a.jq-modal-prev',this.ctrl.box),false).css('height',Img.height()).bind('click',index-1,navClick);
265                         Img.click(function() {
266                              This.modal.removeOverlay();
267                         });
268                         $(document).bind('keypress.modalImage',navKey);
269                    });
270                    this.onload = function() {};
271               };
272               img.src = link.attr('href');
273               
274               var navClick = function(e) {
275                    This.showImage(e.data);
276                    return false;
277               };
278               var navKey = function(e) {
279                    var key = String.fromCharCode(e.which).toLowerCase();
280                    if ((key == 'n' || e.keyCode == 39) && index+1 < This.links.length) { // Press "n"
281                         This.showImage(index+1);
282                    }
283                    if ((key == 'p' || e.keyCode == 37) && index != 0) { // Press "p"
284                         This.showImage(index-1);
285                    }
286               };
287          },
288          navBtnStyle: function(btn,next) {
289               var default_bg = 'transparent url(' + this.modal.params.blank_img + ') repeat';
290               var over_bg_i = next ? this.modal.params.next_img : this.modal.params.prev_img;
291               var over_bg_p = next ? 'right' : 'left';
292               
293               btn.css('background',default_bg)
294               .bind('mouseenter',function() {
295                    $(this).css('background','transparent url(' + over_bg_i + ') no-repeat center ' + over_bg_p).css('z-index',110);
296               })
297               .bind('mouseleave',function() {
298                    $(this).css('background',default_bg);
299               });
300               
301               return btn;
302          }
303     };
304})(jQuery);
305
306(function($) {
307     $.modalWeb = function(url,w,h) {
308          iframe = $('<iframe src="' + url + '" frameborder="0">').css({
309               border: 'none',
310               width: w,
311               height: h
312          });
313          return new $.modal(iframe);
314     };
315     
316     $.fn.modalWeb = function(w,h) {
317          this.click(function() {
318               if (this.href != undefined) {
319                    $.modalWeb(this.href,w,h);
320               }
321               return false;
322          });
323     };
324})(jQuery);
Note: See TracBrowser for help on using the repository browser.

Sites map