Changeset 15946

Timestamp:

02/05/12 23:00:59 (4 months ago)

Author:

Alexander Trofimov

Message:

AJAX popup corrections

Location:

trunk

Files:

• inc/js/jquery.dolPopup.js (modified) (6 diffs)
• menu.php (modified) (1 diff)
• samples/popup.php (modified) (3 diffs)
• templates/base/_footer.html (modified) (1 diff)
• templates/base/_header.html (modified) (1 diff)
• templates/base/css/menu.css (modified) (1 diff)
• templates/base/scripts/BxBaseMenu.php (modified) (1 diff)

trunk/inc/js/jquery.dolPopup.js

@@ -7 +7 @@
 (function($) {
 
+    $.fn.dolPopupDefaultOptions = {
+        closeOnOuterClick: true,
+        closeElement: '.bx-popup-element-close', // link to element which will close popup
+        position: 'centered', // | 'absolute' | 'fixed' | event | element,
+        fog: {color: '#fff', opacity: .7}, // {color, opacity},
+        pointer: false, // {el:(string_id|jquery_object), align: (left|right|center)},
+        left: 0, // only for fixed or absolute
+        top: 0, // only for fixed
+        onBeforeShow: function () {},
+        onShow: function () {},
+        onBeforeHide: function () {},
+        onHide: function () {},
+        speed: 150
+    }; 
+
+    $.fn.dolPopupDefaultPointerOptions = {
+        align: 'right',
+        offset: '0 0',
+        offset_pointer: '0 0'
+    }; 
+
     $.fn.dolPopup = function(options) {
         var options = options || {};
-        var defaults = {
-            closeOnOuterClick: true,
-            closeElement: '.bx-popup-element-close', // link to element which will close popup
-            position: 'centered', // | 'absolute' | 'fixed' | event | element,
-            fog: {color: '#fff', opacity: .7}, // {color, opacity},
-            pointer: false, // {el:(string_id|jquery_object), align: (left|right|center)},
-            left: 0, // only for fixed or absolute
-            top: 0, // only for fixed
-            onBeforeShow: function () {},
-            onShow: function () {},
-            onBeforeHide: function () {},
-            onHide: function () {},
-            speed: 150
-        };
-
-        var o = $.extend({}, defaults, options);
-
-        var defaults_pointer = {
-            align: 'right',
-            offset: '0 0',
-            offset_pointer: '0 0',
-        }
+        var o = $.extend({}, $.fn.dolPopupDefaultOptions, options);        
 
         if (false != o.pointer) {
             o.fog = false;
-            o.pointer = $.extend({}, defaults_pointer, $(document).data('bx-popup-options') ? $(document).data('bx-popup-options') : {}, o.pointer);
+            o.pointer = $.extend({}, $.fn.dolPopupDefaultPointerOptions, $(document).data('bx-popup-options') ? $(document).data('bx-popup-options') : {}, o.pointer);
         }
 
@@ -163 +163 @@
 
     $.fn.dolPopupAjax = function(options) { 
-
+        
         if ('undefined' == typeof(options) || 'object' != typeof(options) || 'undefined' == typeof(options.url))
             return;
@@ -169 +169 @@
         var bx_menu_on = function (e, b) {
             var li = $(e).parents('li:first');   
+            if (!li.length)
+                return;
             if (b) {
                 var ul = $(e).parents('ul:first');   
@@ -180 +182 @@
         var bx_menu_is_on = function (e) {    
             var li = $(e).parents('li:first');   
+            if (!li.length)
+                return false;
             return li.hasClass('bx-menu-tab-active');
         }
@@ -185 +189 @@
         return this.each(function() {
             var e = $(this);
-
-            var id = ('undefined' == typeof(options.id) ? parseInt(2147483647 * Math.random()) : options.id);
-
-            if ($("#bx-popup-ajax-" + id + ":visible").length) {
+            var id;
+
+            // get id
+            if ('undefined' == typeof(e.attr('bx-popup-id'))) {
+                id = ('undefined' == typeof(options.id) ? parseInt(2147483647 * Math.random()) : options.id);
+                e.attr('bx-popup-id', id);
+            } else {
+                id = e.attr('bx-popup-id');
+            }
+
+            if ($("#bx-popup-ajax-wrapper-" + id + ":visible").length) { // if popup exists and is shown - hide it
                 
-                $("#bx-popup-ajax-" + id).dolPopupHide();
-
-            } else if ($("#bx-popup-ajax-" + id).length) {
-
-                bx_menu_on(e, true);
-                $("#bx-popup-ajax-" + id).dolPopup({
-                    pointer: {el:$(e)},
+                $("#bx-popup-ajax-wrapper-" + id).dolPopupHide();
+
+            } else if ($("#bx-popup-ajax-wrapper-" + id).length) { // if popup exists but not shown - unhide it
+
+                if (!$.isWindow(e[0]))
+                    bx_menu_on(e, true);
+
+                $("#bx-popup-ajax-wrapper-" + id).dolPopup({
+                    pointer: $.isWindow(e[0]) ? false : {el:$(e), align:'center'},
                     onHide: function () {
-                        bx_menu_on(e, false);
+                        if (!$.isWindow(e[0]))
+                            bx_menu_on(e, false);
                     }
                 });
 
-            } else {        
-
-                bx_menu_on(e, true);
-                bx_loading_content($('#bx-popup-loading .bx-popup-ajax-content'), true, true);
-                $('#bx-popup-loading').dolPopup({
-                    pointer: {el:e},
-                    closeOnOuterClick: false
-                });
-                $('<div id="bx-popup-ajax-' + id + '" style="display:none;"><div>').appendTo($('body')).load(sUrlRoot + options.url,
-                    function() {
-                        if (!bx_menu_is_on(e))
-                            return;
-                        $('#bx-popup-loading').dolPopupHide({
-                            onHide: function () {
-                                $('#bx-popup-ajax-' + id).dolPopup({
-                                    pointer: {el:e},
-                                    onHide: function () {
-                                        bx_menu_on(e, false);
-                                    }
-                                });
-                            }
-                        });
+            } else { // if popup doesn't exists - create new one from provided url
+
+                if (!$.isWindow(e[0]))
+                    bx_menu_on(e, true);
+
+                $('body').append('<div id="bx-popup-ajax-wrapper-' + id + '" style="display:none;">' + $('#bx-popup-loading').html() + '</div>');
+                bx_loading_content($('#bx-popup-ajax-wrapper-' + id + ' .bx-popup-ajax-content'), true, true);
+                console.log('iswin:' + $.isWindow(e[0]) + " / ");
+                console.log(e);
+                $('#bx-popup-ajax-wrapper-' + id).dolPopup({
+                    pointer: $.isWindow(e[0]) ? false : {el:e, align:'center'},
+                    onHide: function () {
+                        if (!$.isWindow(e[0]))
+                            bx_menu_on(e, false);
                     }
-                );    
+                });
+
+                $('#bx-popup-ajax-wrapper-' + id + ' .bx-popup-ajax-content').load(sUrlRoot + options.url, function () {                    
+                    $('#bx-popup-ajax-wrapper-' + id)._dolPopupSetPosition({
+                        pointer: $.isWindow(e[0]) ? false : {el:e, align:'center'}
+                    });
+                });
 
             }
@@ -232 +244 @@
     };
 
-    $.fn._dolPopupSetPosition = function(o) {
+    $.fn._dolPopupSetPosition = function(options) {
+
+        var o = $.extend({}, $.fn.dolPopupDefaultOptions, options);
+
+        if (undefined != o.pointer && false != o.pointer)
+            o.pointer = $.extend({}, $.fn.dolPopupDefaultPointerOptions, $(document).data('bx-popup-options') ? $(document).data('bx-popup-options') : {}, o.pointer);
+
         return this.each(function() {
             var $el = $(this);

trunk/menu.php

@@ -23 +23 @@
 
 header('Content-type: text/html; charset=utf-8');
-echo $oMenu->getCodeForPopup ();
+echo $oMenu->getCode ();
 
 /** @} */

trunk/samples/popup.php

@@ -22 +22 @@
 
 if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) and $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ) {
-    echo BxTemplFunctions::getInstance()->transBox('<div class="bx-def-padding bx-def-color-bg-block">AJAX content here: ' .  date(DATE_RFC822) . '</div>');
+    sleep(2); // to see AJAX loader
+    echo date(DATE_RFC822);
     exit;
 }
@@ -45 +46 @@
 
     // transBox AJAX
-    echo '
-    <script>
-        function bx_sample_ajax_popup () {
-            $("#bx-sample-popup-ajax").remove();
-            $(\'<div id="bx-sample-popup-ajax" style="display: none;"></div>\').prependTo("body").load(
-                "' . BX_DOL_URL_ROOT . 'samples/popup.php",
-                function() { 
-                    $(this).dolPopup(); 
-                }
-            );    
-        }
-    </script>';
-    echo '<button class="bx-btn bx-def-margin-left" onclick="bx_sample_ajax_popup ()">transBox AJAX</button>';
+    echo '<button class="bx-btn bx-def-margin-left" onclick="$(window).dolPopupAjax({url: \'samples/popup.php\'})">transBox AJAX</button>';
 
     // popupBox
@@ -82 +71 @@
     echo '<button class="bx-btn bx-def-margin-left" onclick="$(\'#bx-sample-popup-box-with-pointer\').dolPopup({pointer:{el:$(this)}})">popupBox with pointer</button>';
 
+    // popupBox with pointer AJAX
+    echo BxTemplFunctions::getInstance()->popupBox('bx-sample-popup-box-with-pointer', 'popupBox', 'popupBox with pointer AJAX', array(), true);
+    echo '<button class="bx-btn bx-def-margin-left" onclick="$(this).dolPopupAjax({url: \'samples/popup.php\'})">popupBox with pointer AJAX</button>';
+
     echo '<div class="bx-clear"></div>';
 

trunk/templates/base/_footer.html

@@ +1 @@
+        __popup_loading__
        <bx_injection:injection_footer />
     </body>

trunk/templates/base/_header.html

@@ -27 +27 @@
 __flush_header__
 <body class="bx-def-font bx-def-color-bg-page" <bx_injection:injection_body /> >
-    <bx_injection:injection_header />
-    __popup_loading__
+    <bx_injection:injection_header />    

trunk/templates/base/css/menu.css

@@ -101 +101 @@
 .bx-menu-main li:active,
 .bx-menu-main li.bx-menu-tab-active {
+    background-color:#f0f0f0;
+
     -webkit-box-shadow: inset 0px 0px 8px rgba(128, 128, 128, 0.35);
     -moz-box-shadow: inset 0px 0px 8px rgba(128, 128, 128, 0.35);

trunk/templates/base/scripts/BxBaseMenu.php

@@ -45 +45 @@
 
     /** 
-     * Get menu code for displaying menu in popup.
-     * @return string
-     */
-    public function getCodeForPopup () {
-        bx_import('BxTemplFunctions');
-        return BxTemplFunctions::getInstance()->transBox('<div class="bx-def-padding bx-def-color-bg-block">' . $this->getCode () . '</div>');
-    }
-
-    /** 
      * Get menu items array, which are ready to pass to template.
      * @return array