Changeset 15931 for trunk

Timestamp:

01/26/12 19:46:52 (4 months ago)

Author:

Alexander Trofimov

Message:

Popup - fix when popup is bigger than window + window resizing fix

Location:

trunk

Files:

• inc/classes/BxDolTemplate.php (modified) (1 diff)
• inc/js/jquery.dolPopup.js (modified) (5 diffs)
• samples/popup.php (modified) (1 diff)
• studio/classes/BxDolStudioTemplate.php (modified) (1 diff)
• studio/templates/base/scripts/BxBaseStudioFunctions.php (modified) (1 diff)
• templates/base/scripts/BxBaseFunctions.php (modified) (1 diff)

trunk/inc/classes/BxDolTemplate.php

@@ -312 +312 @@
             'functions.js',
             'jquery.dolPopup.js',
+            'jquery.ui.position.min.js',
         ));
 

trunk/inc/js/jquery.dolPopup.js

@@ -12 +12 @@
             closeOnOuterClick: true,
             closeElement: '.bx-popup-element-close', // link to element which will close popup
-            position: 'centered', // | 'centered-absolute' | 'absolute' | 'fixed' | event | element,            
+            position: 'centered', // | 'absolute' | 'fixed' | event | element,
             fog: {color: '#fff', opacity: .7}, // {color, opacity},
             pointer: false, // {el:(string_id|jquery_object), align: (left|right|center)},
@@ -52 +52 @@
         }
         
+        $(window).on('resize.popupFog', function () {
+            $('#bx-popup-fog').css({
+                width: $(window).width(),
+                height: $(window).height()
+            });
+        });
+
         return this.each(function() {
             var $el = $(this);
@@ -136 +143 @@
                 return false;
 
+            $(window).off('resize.popupWindow');
+            $(window).off('resize.popupPointer');
+            $(window).off('resize.popupFog');
+
             o.onBeforeHide();
 
@@ -182 +193 @@
                 }); 
 
+                $(window).on('resize.popupPointer', function() {
+                    $el.position({
+                        of: ePointAt,
+                        my: o.pointer.align + ' top',
+                        at: o.pointer.align + ' bottom',
+                        collision: 'flip none',
+                        offset: parseInt(aOffset[0]) + ' ' + parseInt(aOffset[1])
+                    });
+                });
+
             } else if (o.position == 'fixed' || o.position == 'absolute') {
+
                 $el.css({
                     position: o.position,
@@ -188 +210 @@
                     top: o.top
                 });
+
             } else if (o.position == 'centered') {
-                $el.setToCenter();
-
-                // attach window resize event
-                $(window).resize(function() {
-                    $el.setToCenter();
-                });
-            } else if (o.position == 'centered-absolute') {
-                $el.setToCenter('absolute');
-
-                // attach window resize event
-                $(window).resize(function() {
-                    $el.setToCenter('absolute');
-                });
+
+                $el.position({
+                    of: window,
+                    my: 'center center',
+                    at: 'center center',
+                    collision: 'none none'
+                });
+
+                // attach window resize event                
+                $(window).on('resize.popupWindow', function() {
+                    $el.position({
+                        of: window,
+                        my: 'center center',
+                        at: 'center center',
+                        collision: 'none none'
+                    });
+                });
+
             } else if (typeof o.position == 'object') {
-                if ( o.position.originalEvent && Event.prototype.isPrototypeOf(o.position.originalEvent) ) {
-                    // event
-                    var e = o.position.originalEvent ? o.position : $.event.fix(o.position);
-                    var pos = getPositionData($el[0], e);
-
-                    $el.css({
-                        position: 'absolute',
-                        left: pos.posX,
-                        top: pos.posY
-                    });
-                } else {
-                    var $p = $(o.position);
-                    //if ( $p.length && Node.prototype.isPrototypeOf($p[0]) ) {
-                    if ($p.length) {
-                        // DOM Node
-
-                        var pos = getCorrectedPosition($el, $p);
-                        $el.css({
-                            position: 'absolute',
-                            left: pos.left,
-                            top: pos.top
-                        });
-                    }
-                }
+
+                $el.position({
+                    of: o.position,
+                    my: 'center top',
+                    at: 'center bottom',
+                    collision: 'flip flip'
+                });
+
             }
-
         });
     };
 
-    $.fn.setToCenter = function(position) {
-        return this.each(function() {
-            var $el = $(this);
-
-            var iTop = 0;
-            var iLeft = 0;
-            if(!$.browser.opera) {
-                iTop = ($(window).height() - $el.height()) / 2;
-                iLeft = ($(window).width()  - $el.width()) / 2;
-            }
-            else {
-                iTop = (parseInt(window.innerHeight) - $el.height()) / 2;
-                iLeft = ($(window).width()  - $el.width()) / 2;
-            }
-
-            iLeft = (iLeft > 0) ? iLeft : 0;
-            iTop  = (iTop  > 0) ? iTop  : 0;
-
-            $el.css({
-                position: position || 'fixed',
-                left: iLeft,
-                top:  iTop
-            });
-        });
-    };
-
 })(jQuery);
 
-function getCorrectedPosition(el, p) {
-    var $el = $(el); // positioned element
-    var $p = $(p);   // positioning element
-
-    var pos = $p.offset();
-    var elSize = {
-        width:  $el.width(),
-        height: $el.height()
-    };
-
-    var elWinPos = {
-        left: pos.left - $(window).scrollLeft(),
-        top:  pos.top  - $(window).scrollTop()
-    };
-    var winSize = {
-        width:  $(window).width(),
-        height: $(window).height() - 30
-    };
-
-
-    if ((elWinPos.left + elSize.width)  > winSize.width)
-        pos.left = pos.left - elSize.width + $p.width();
-
-    if ((elWinPos.top + elSize.height) > winSize.height)
-        pos.top = pos.top - elSize.height + $p.height();
-
-    return pos;
-}

trunk/samples/popup.php

@@ -30 +30 @@
 $oTemplate->setPageHeader ("Sample popup");
 $oTemplate->setPageContent ('page_main_code', PageCompMainCode());
-$oTemplate->addJs('jquery.dolPopup.js');
-$oTemplate->addJs('jquery.ui.position.min.js');
 $oTemplate->getPageCode();
 

trunk/studio/classes/BxDolStudioTemplate.php

@@ -69 +69 @@
         $this->addJs(array(
             'jquery.js',
-            'jquery.dolPopup.js'
+            'jquery.dolPopup.js',
+            'jquery.ui.position.min.js',
         ));
     }

trunk/studio/templates/base/scripts/BxBaseStudioFunctions.php

@@ -104 +104 @@
         $oTemplate->setPageParams(array(
            'css_name' => array('forms.css', 'login.css'),
-           'js_name' => array('jquery.form.js', 'jquery.dolPopup.js', 'login.js'),
+           'js_name' => array('jquery.form.js', 'jquery.dolPopup.js', 'jquery.ui.position.min.js', 'login.js'),
            'header' => _t('_adm_page_cpt_login'),
         ));

trunk/templates/base/scripts/BxBaseFunctions.php

@@ -713 +713 @@
 
             if ($sMenu) {
-
-                $this->_oTemplate->addJs('jquery.dolPopup.js');
-                $this->_oTemplate->addJs('jquery.ui.position.min.js');
-
                 $sId = 'bx-menu-db-' . time() . rand(0, PHP_INT_MAX);
                 $sCode .= '<div id="' . $sId . '" style="display:none;">' . BxTemplFunctions::getInstance()->transBox('<div class="bx-def-padding bx-def-color-bg-block">' . $sMenu . '</div>') . '</div>';