root/afridex/plugins/Flutter/js/lightbox.js @ 23

Revision 21, 6.9 kB (checked in by admin, 18 years ago)
Line 
1/*
2Created By: Chris Campbell
3Website: http://particletree.com
4Date: 2/1/2006
5
6Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
7*/
8
9/*-------------------------------GLOBAL VARIABLES------------------------------------*/
10
11var detect = navigator.userAgent.toLowerCase();
12var OS,browser,version,total,thestring;
13
14/*-----------------------------------------------------------------------------------------------*/
15
16//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/
17
18function getBrowserInfo() {
19        if (checkIt('konqueror')) {
20                browser = "Konqueror";
21                OS = "Linux";
22        }
23        else if (checkIt('safari')) browser     = "Safari"
24        else if (checkIt('omniweb')) browser    = "OmniWeb"
25        else if (checkIt('opera')) browser              = "Opera"
26        else if (checkIt('webtv')) browser              = "WebTV";
27        else if (checkIt('icab')) browser               = "iCab"
28        else if (checkIt('msie')) browser               = "Internet Explorer"
29        else if (!checkIt('compatible')) {
30                browser = "Netscape Navigator"
31                version = detect.charAt(8);
32        }
33        else browser = "An unknown browser";
34
35        if (!version) version = detect.charAt(place + thestring.length);
36
37        if (!OS) {
38                if (checkIt('linux')) OS                = "Linux";
39                else if (checkIt('x11')) OS     = "Unix";
40                else if (checkIt('mac')) OS     = "Mac"
41                else if (checkIt('win')) OS     = "Windows"
42                else OS                                                                 = "an unknown operating system";
43        }
44}
45
46function checkIt(string) {
47        place = detect.indexOf(string) + 1;
48        thestring = string;
49        return place;
50}
51
52/*-----------------------------------------------------------------------------------------------*/
53
54Event.observe(window, 'load', initialize, false);
55Event.observe(window, 'load', getBrowserInfo, false);
56Event.observe(window, 'unload', Event.unloadCache, false);
57
58var lightbox = Class.create();
59
60lightbox.prototype = {
61
62        yPos : 0,
63        xPos : 0,
64
65        initialize: function(ctrl) {
66                this.hrefarray = ctrl.href.split("?");
67                this.content = this.hrefarray[0];
68                this.pars = this.hrefarray[1];
69                Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
70                ctrl.onclick = function(){return false;};
71        },
72       
73        // Turn everything on - mainly the IE fixes
74        activate: function(){
75                if (browser == 'Internet Explorer'){
76                        this.getScroll();
77                        this.prepareIE('100%', 'hidden');
78                        this.setScroll(0,0);
79                        this.hideSelects('hidden');
80                }
81                this.displayLightbox("block");
82        },
83       
84        // Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
85        prepareIE: function(height, overflow){
86                bod = document.getElementsByTagName('body')[0];
87                bod.style.height = height;
88                bod.style.overflow = overflow;
89 
90                htm = document.getElementsByTagName('html')[0];
91                htm.style.height = height;
92                htm.style.overflow = overflow; 
93        },
94       
95        // In IE, select elements hover on top of the lightbox
96        hideSelects: function(visibility){
97                selects = document.getElementsByTagName('select');
98                for(i = 0; i < selects.length; i++) {
99                        selects[i].style.visibility = visibility;
100                }
101        },
102       
103        // Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
104        getScroll: function(){
105                if (self.pageYOffset) {
106                        this.yPos = self.pageYOffset;
107                } else if (document.documentElement && document.documentElement.scrollTop){
108                        this.yPos = document.documentElement.scrollTop; 
109                } else if (document.body) {
110                        this.yPos = document.body.scrollTop;
111                }
112        },
113       
114        setScroll: function(x, y){
115                window.scrollTo(x, y); 
116        },
117       
118        displayLightbox: function(display){
119                $('overlay').style.display = display;
120                $('lightbox').style.display = display;
121                if(display != 'none') {
122                        this.loadInfo();
123                        Event.observe('overlay', 'click', this.cancel.bindAsEventListener(this), false);
124                }
125        },
126       
127        // Begin Ajax request based off of the href of the clicked linked
128        loadInfo: function() {
129                var myAjax = new Ajax.Request(
130        uncache(this.content),
131        {method: 'get', parameters: this.pars, onComplete: this.processInfo.bindAsEventListener(this)}
132                );
133               
134        },
135       
136        // Display Ajax response
137        processInfo: function(response){
138                info = "<div id='lbContent'>" + response.responseText + "</div>";
139                new Insertion.Before($('lbLoadMessage'), info)
140                $('lightbox').className = "done";       
141                this.actions();
142                Event.observe($('gmodule_content'), 'load', this.gmoduleListener, false);
143        },
144       
145        // Search through new links within the lightbox, and attach click event
146        actions: function(){
147                lbActions = document.getElementsByClassName('lbAction');
148
149                for(i = 0; i < lbActions.length; i++) {
150                        Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
151                        lbActions[i].onclick = function(){return false;};
152                }
153               
154                // Added by Karsten for Canvas
155                // new Form.EventObserver('lightbox_form',canvas_form_save);
156
157        },
158       
159        gmoduleListener: function() {
160                var gmodule = $('gmodule_content').contentDocument.$('thecode');
161                alert(gmodule);
162        },
163       
164        // Example of creating your own functionality once lightbox is initiated
165        insert: function(e){
166           link = Event.element(e).parentNode;
167           Element.remove($('lbContent'));
168           var myAjax = new Ajax.Request(
169                          link.href,
170                          {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
171           );
172        },
173       
174        // Example of creating your own functionality once lightbox is initiated
175        deactivate: function(){
176               
177                // Added by Karsten for Canvas
178                canvas_form_save();
179       
180                Element.remove($('lbContent'));
181               
182                if (browser == "Internet Explorer"){
183                        this.setScroll(0,this.yPos);
184                        this.prepareIE("auto", "auto");
185                        this.hideSelects("visible");
186                }
187                this.displayLightbox("none");
188        },
189
190        cancel: function(){
191       
192                Element.remove($('lbContent'));
193               
194                if (browser == "Internet Explorer"){
195                        this.setScroll(0,this.yPos);
196                        this.prepareIE("auto", "auto");
197                        this.hideSelects("visible");
198                }
199                this.displayLightbox("none");
200        }
201       
202}
203
204/*-----------------------------------------------------------------------------------------------*/
205
206// Added by Karsten, Canvas function: Allows save of lightbox form data
207function canvas_form_save() {
208        if($('lightbox_form')) Canvas.saveBlock('lightbox_form', Form.serialize('lightbox_form'));
209}
210
211
212
213// Onload, make all links that need to trigger a lightbox active
214function initialize(){
215        addLightboxMarkup();
216        lbox = document.getElementsByClassName('lbOn');
217        for(i = 0; i < lbox.length; i++) {
218                valid = new lightbox(lbox[i]);
219        }
220}
221
222// Add in markup necessary to make this work. Basically two divs:
223// Overlay holds the shadow
224// Lightbox is the centered square that the content is put into.
225function addLightboxMarkup() {
226        bod                             = document.getElementsByTagName('body')[0];
227        overlay                         = document.createElement('div');
228        overlay.id              = 'overlay';
229        lb                                      = document.createElement('div');
230        lb.id                           = 'lightbox';
231        lb.className    = 'loading';
232        lb.innerHTML    = '<div id="lbLoadMessage">' +
233                                                  '<p><img src=JS_CANVASURI + "images/spinner.gif" alt="spinner"/></p>' +
234                                                  '</div>';
235        bod.appendChild(overlay);
236        bod.appendChild(lb);
237}
238
239function uncache(url){
240        var d = new Date();
241        var time = d.getTime();
242        if (url.indexOf('?') > 0 )
243                return url + '&time='+time;
244        else
245                return url + '?time='+time;
246}
Note: See TracBrowser for help on using the browser.