Развернуть/свернуть блок в Moodle

В moodle есть такое понятие как block. Узенькая полосочка, в 180 пикселей шириной, слева и справа от основного контента. Много инфы там не разместишь. А хочется...

Переколбашивать дизайн и менять ширину влом, да и не спасет это сильно... Ну сколько выручу? Еще 40 пикселей? Мало!

Появилась идея подшаманить на javascript с jquery. Коль уж блок - это div и есть возможность править средствами moodle его контент (как html), то я могу туда вставить свой js код а в нем уже добавить кнопочку развернуть/сернуть.

Только все не так просто оказалось...  Столкнулся я с несколькими проблемами. Имя им: cross-browser, position-absolute, iframe-refresh и resize-window. По очереди. Для начала я заметил, что если поставить диву блока стиль position:fixed - то я смогу изменять размеры и позицию дива, так, чтобы он разворачивался и сворачивался

Пол часа работыи слава jQuery все было готово. Но тут я решил запустить Chrome и понял, что работа только начинается... В хроме оно вообще не так работало....Хак не прокатил...

Пришлось заморачиваться с position:absolute. Диву блока простая установка стиля position:absolute не нравилась - он вел себя как-то странно (не абсолютно). Пришлось вместе со стилем менять диву еще и родителя с какого-то там parent'a на body.

То есть я нажимаю expand и перещелкиваю родителя на body, ставлю position:absolute, меняю left/top/width/htight и опаля - все как я хотел. Потом, при нажатии на collapse я делаю все наоборот.

И тут оказалось, что appendChild клеит див в конец боковой панели блоков - нарушается сортировка. ЭЭЭххх. Пришлось при expand, до изменения у блока parent на body, создавать еще див-закладку, по которой потом можно будет вернуть див-блок на место. Плюс этот невидимый див-закладка будет держать физически место, дабы все последующие блоки в панели не сдвигались...

В общем наигрался я с left/top/width/height... И когда все выглядело одинаково в обоих браузерах вылезла еще одна трабла - оказывается если менять родителя диву, то в Firefox и Chrome (но не IE) содержимое того iframe, который расположен в диве, перегружается. Эй! Так дело не пойдет - оно кроме того, что лагает (время на загрузку календаря), так еще и сбрасывает пользователя в начальный режим календаря. Не гуд!!

Идея пришла после душа - надо сразу как загрузится страничка (еще до нажатия expand) сделать reparent на body + position:absolute, а потом, при expand/collapse, играться только с left/top/width/height....

Снова немного танцев у left/top/width/height и все получилось....

Последним (я надеюсь) демоном был resize-window. Дело в том, что если делать expand блока, а потом поменять размеры окна браузера, после чего сделать collapse (или наоборот collapse->resize->expand), то див-блок вернется не на свое место.

Еще немного танцев с left/top/width/height и все получилось....

Думаю задача более общая и кому-то могут пригодистя эти мои наработки. Функция при легкой доработке сможет развернуть/свернуть (влево+вниз) любой див на котрый ткнешь. А потому выложу тут код.

Код, который я вставляю в html view блока.

<p id="calendar-container">
<script src="/moodle/js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/moodle/js/block-resize.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
    // урл ифрейма/ширина/высота развернутого дива/текущий див/див блока/подпись к линку
    setupBlock('http://google.calendar.com/blabla', 700, 500, 'calendar-container', 'inst406', 'calendar'); 
// ]]></script></p>

А вот и сам скрипт.

if (typeof(setupBlock) == 'undefined') {
    function setupBlock(iframeSrc, expandWidth, expandHeight, containerId, blockId, title) {
        var collapsedWidth = 190;
        var collapsedHeight = 360;
        
        var deltaWidth = 10;
        var deltaHeight = 53;
        
        // айдишки, элементы...
        // все строю относительно blockId, который уникален. Это надо для работы с двумя и больше блоками в режиме collapse/expand
        var container = $('#' + containerId);    
        var iframeId = 'iframe_' + blockId;
        var iframe = $('#' + iframeId);
        var block = $('#' + blockId);
        var blockMarker = null;

        // если случилось так, что метод вызовут два раза, мы тут тихонько выйдем
        if (iframe.length != 0) {
             return;
        }

        // метод ресайза ифрейма - оказывается его надо ресайзить по особенному
        var resizeIframe = function(width, height) {
            var element = document.getElementById(iframeId);
            element.width = width;
            element.height = height;
        }
        
        // добавляем динамически ифрейм и кнопочку 
        container.append('<iframe id="' + iframeId + '" src="' + iframeSrc + '" style="border: 0;" scrolling="no" frameborder="0"></iframe>');
        container.append('</br><a href="#"><span id="resize_' + iframeId + '">expand ' + title + '</span></a>');
        container.css({'margin-bottom':0}); // это ничего не значит
        resizeIframe(collapsedWidth-deltaWidth, collapsedHeight-deltaHeight); // ресайзим ифрейм

        // порция новеньких...
        var resizeLink = $('#resize_' + iframeId); 
        var iframe = $('#' + iframeId);

        // когда все загрузится
        $(document).ready(function() {           

            var collapsed = true; // изначально все свернуто                        
            resizeLink.click(function() { // но клик на линк меняет состояние на противоположное
                if (collapsed) {
                    expand();
                } else {
                    collapse();
                }
            });

            // тут сохраняем исходные размеры/координаты (абсолютные) блока
            var oldWidth = block.width();
            var oldHeight = block.height();  
            var oldLeft = block.offset().left;
            var oldTop = block.offset().top;     

            // два метода для подсчета left когда свернуто/развернуто
            var getLeftRestored = function() {
                return getLeftCollapsed() - expandWidth + oldWidth;
            };                        
            var getLeftCollapsed = function() {
                return blockMarker.offset().left;
            };            

            // был див где-то там в дереве, а мы его пересадим к корню body,
            // а на месте дива оставим закладку
            var absoluting = function() {
                // если закладки нет, создаем ее сразу после дива-блока
                if (blockMarker == null) { 
                    var blockMarkerId = 'marker_' + blockId;
                    block.after('<div id="' + blockMarkerId + '"></div>');
                    blockMarker = $("#" + blockMarkerId);
                }
                // закладка должнна занимать то же место, что сейчас занимает блок-див
                blockMarker.css({
                    left: oldWidth,
                    top: oldTop,
                    width: oldWidth, 
                    height: oldHeight,                     
                    'margin-left': block.css('margin-left'),
                    'margin-right': block.css('margin-right'),
                    'margin-top': block.css('margin-top'),
                    'margin-bottom': block.css('margin-bottom'),
                    'padding-left': block.css('padding-left'),
                    'padding-right': block.css('padding-right'),
                    'padding-top': block.css('padding-top'),
                    'padding-bottom': block.css('padding-bottom'),
                    visibility : 'none', // невидим
                    display : 'block',   // но занимает место
                });
                document.body.appendChild(block[0]); // переключаемся на body 
                // абсолютим блок, ставим поверх всех и устанавливаем его новые координаты/позициию
                block.css({
                    position: 'absolute',
                    'z-index': 100,
                    left: oldLeft,
                    top: oldTop,
                    width:  oldWidth, 
                    height: oldHeight, 
                });
            };            
            absoluting(); // do it

            // это я делал для того, чтобы во время 
            // трансформации линк collapse/expand не работал
            var resizing = false; 
            var collapse = function() {     
                // выходим, если мы уже ресайзимся или развернуты
                if (collapsed || resizing) { 
                    return;
                }       
                                       
                resizing = true; // поехали
                resizeLink.text('expand ' + title); // меняем тайтл линка
                // изменяем размерчики/позицию блока
                block.css({
                    left: getLeftCollapsed(),
                    width:  oldWidth, 
                    height: oldHeight, 
                });
                resizeIframe(collapsedWidth-deltaWidth, collapsedHeight-deltaHeight); // ресайзим ифрейм
                // закончили
                resizing = false;
                collapsed = true;
            };

            var expand = function() {
                // выходим, если мы уже ресайзимся или свернуты
                if (!collapsed || resizing) {
                    return;
                }       
           
                resizing = true; // поехали    
                resizeLink.text('collapse ' + title); // меняем тайтл линка     
                // изменяем размерчики/позицию блока                
                block.css({
                    left: getLeftRestored(),
                    width: expandWidth, 
                    height: expandHeight, 
                });
                // ресайзим ифрейм/ magic numbers - насколько у меня блок больше по размерам от iframe что в нем 
                resizeIframe(expandWidth-deltaWidth, expandHeight-deltaHeight); 
                // закончили
                resizing = false;
                collapsed = false; 
            };

            // а это модуль ремайза онка браузера
            // и когда пройдет ресайз
            $(window).resize(function() {
                // пересчитаем позицию дива, хорошо что только по left :) 
                block.css({
                    left: (collapsed)?getLeftCollapsed():getLeftRestored(),
                });     
            });
        });
    }
}

Может кому-то пригодится....