/** * Popup layer * * @version 0.31 * @author goshi * @package javascript::share * * Need portal, loader * * Changelog: * 0.31 17.01.11/goshi fix correctPos * 0.3 17.12.10/goshi more improvements for showing popup, add getContent, now in insert_callback return self * 0.2 27.03.10/goshi using internal framework * */ function oPopupLayer(params){ this._init(params); // you cant create more then one object oPopupLayer.Instances[0] = this; } oPopupLayer.prototype = { _layer : null, _layer_bg : null, _main_layer : null, _el_title : null, _el_content : null, _insert_callback : null, _nobutton : false, _loader : null, // loader _alpha : 10, // alpha for background _correctPosAfter : true, // automatic correct layer position after show _noinner : false, _doch : 0, _window : null, _init: function(params){ this.addParams(params); }, addParams : function (params){ if (typeof params != 'undefined' && params != null){ for (var i in params){ if (typeof this['_'+i] != 'undefined'){ this['_'+i] = params[i]; } } } }, _updateWindowProps : function(){ if (this._window){ if (typeof this._window['width'] != 'undefined'){ this._main_layer.style.width = this._window['width']+'px'; // update margin this._main_layer.style.marginLeft = -(this._window['width']/2)+'px'; } if (typeof this._window['height'] != 'undefined'){ this._main_layer.style.width = this._window['height']+'px'; } if (typeof this._window['title_class'] != 'undefined') portal.css.addClass(this._el_title, this._window['title_class']); } }, create : function(e, data){ var ev = window.event ? window.event : e; var cX = getClientWidth();//ev.clientX; var cY = getClientHeight();//ev.clientY; var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // make lightbox //if (!lightbox_showed){} this._layer_bg = elem('div', {'class' : 'b-lightbox'}); // for fucking IE add empty image var el_img = elem('img', {'src' : '/skin/img/share/0.gif'}); this._layer_bg.appendChild(el_img); this._layer_bg.style.opacity = this._layer_bg.style["-khtml-opacity"] = this._layer_bg.style["-moz-opacity"] = this._alpha; if (/MSIE/.test(navigator.userAgent)) { this._layer_bg.style.filter = this._alpha === '' ? '' : "this._alpha(opacity=" + (this._alpha * 100) + ")"; if (!this._layer_bg.currentStyle || !this._layer_bg.currentStyle.hasLayout) this._layer_bg.style.display = 'inline-block'; } this._main_layer = elem('div', {'id' : 'b-lightbox-outer', 'class' : 'b-lightbox-outer'}, {'left' : 0+'px', 'top' : 0+'px'}); var el_close = elem('div', {'class': 'close', 'id' : 'b-btn-close'}, false, this._window && typeof this._window['close_text'] != 'undefined' ? this._window['close_text'] : ''); if (typeof this._noinner == 'undefined' || !this._noinner) this._layer = elem('div', {'class' : 'b-lightbox-inner'}); else this._layer = elem('div', {'class' : 'b-lightbox-inner b-no-p'}); // added to the layer items this._layer.appendChild(elem('div', {'class' : 'b-lightbox-lt'})); this._layer.appendChild(elem('div', {'class' : 'b-lightbox-rt'})); var lc = elem('div', {'class' : 'b-lightbox-lc'}); var c = elem('div', {'class' : 'b-lightbox-rc'}); lc.appendChild(c); this._layer.appendChild(lc); this._layer.appendChild(elem('div', {'class' : 'b-lightbox-lb'})); this._layer.appendChild(elem('div', {'class' : 'b-lightbox-rb'})); var athis = this; portal.events.attach(this._layer_bg, "mousedown", function (){athis.destroy(athis);}); portal.events.attach(el_close, "mousedown", function (){athis.destroy(athis);}); if (!this._noinner){ this._el_title = elem('h1', {'id' : 'l-ttl'}, {'display' : 'none'}); this._el_content = elem('div', {'class' : 'content scroll-pane', 'id' : 'l-content'}); c.appendChild(this._el_title); c.appendChild(this._el_content); } else if (typeof data != 'undefined' && data){ this._layer.appendChild(data); } this._main_layer.appendChild(this._layer); if (!this._nobutton) this._main_layer.appendChild(el_close); this._layer_bg.style.width = el_img.style.width = document.body.scrollWidth + 'px'; this._layer_bg.style.height = el_img.style.height = getDocumentHeight() + 'px'; // update window properties this._updateWindowProps(); this._main_layer.style.left = (cX - this._main_layer.offsetWidth)/2 + 'px'; this._main_layer.style.top = (scrollTop + (cY - this._main_layer.offsetHeight)/2 - 80) + 'px'; document.body.appendChild(this._layer_bg); document.body.appendChild(this._main_layer); if (this._correctPosAfter) this._correctPos(this); // prepare layer this.clear(e); }, insert : function (e, data, callback){ var athis = this; if (typeof athis._noinner == 'undefined') athis = oPopupLayer.Instances[0]; if (athis._loader) portal.loader.destroy(athis._loader); if (!athis._noinner && typeof data != 'undefined'){ if (typeof data.title == 'object') athis._el_title.appendChild(data.title); else athis._el_title.innerHTML = data.title; athis._el_title.style.display = ''; if (typeof data.content == 'object') athis._el_content.appendChild(data.content); else athis._el_content.innerHTML = data.content; } // reposition window if (athis._correctPosAfter) athis._correctPos(athis); // call events attacher if (typeof athis._insert_callback == 'function') athis._insert_callback(athis); }, _correctPos : function(self){ if (typeof self == 'undefined' || !self) self = this; // saving old doc height if (self._doch == 0) self._doch = getDocumentHeight(); self._main_layer.style.height = 'auto'; if (!self._noinner) self._el_content.style.height = 'auto'; var cY = getClientHeight();//ev.clientY; var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // if modal window has bigger dimensions if (self._main_layer.offsetHeight > (self._doch - 60)){ self._main_layer.style.height = (self._doch - 60) + 'px'; if (!self._noinner) self._el_content.style.height = (self._doch - 60 - 80) + 'px'; self._main_layer.style.top = (145+20) + 'px'; //alert('go'); // scrolling to the window $.scrollTo('#b-btn-close', 'fast'); } else if (self._main_layer.offsetHeight > (getClientHeight() - 20)){ var new_y = scrollTop + (cY - self._main_layer.offsetHeight/2)/2 - 10; if (new_y < 0) new_y = (self._main_layer.offsetHeight/2+30); self._main_layer.style.top = new_y + 'px'; $.scrollTo('#b-btn-close', 'fast'); } else { //alert(self._main_layer.offsetHeight +' > ' +(self._doch - 60)); //portal.debug.dump(scrollTop + ' + (' + cY + ' - ' + self._main_layer.offsetHeight + ')/2 - ' + 30); self._main_layer.style.top = (scrollTop + (cY - self._main_layer.offsetHeight)/2 - 30) + 'px'; } }, clear: function(e){ if (this._el_title != null){ this._el_title.innerHTML = ''; this._el_title.style.display = 'none'; } // append loader to the content if (this._el_content != null) this._loader = portal.loader.create(this._el_content, {"mode" : "standart", 'loader_name' : 'loader.gif'}); }, destroy : function (owner){ if (owner._layer_bg){ owner._layer_bg.parentNode.removeChild(owner._layer_bg); owner._layer_bg = null; owner._main_layer.parentNode.removeChild(owner._main_layer); owner._main_layer = null; // remove hash portal.hash.clear(); } }, // return content OBJECT getContent : function(){ return this._el_content; } } oPopupLayer.Instances = new Array();