openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

commit 935820bd91e013edf6ab26bdc229d3211827cae7
parent a3017bf0993a55fefd32a4bc1bf69eca946d82aa
Author: Jan Dankert <devnull@localhost>
Date:   Wed,  6 Mar 2013 23:24:26 +0100

Ziehen von Views kann neue View-Container erzeugen. Leere Viewcontainer werden entfernt.

Diffstat:
themes/default/js/openrat.js | 273+++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------
1 file changed, 196 insertions(+), 77 deletions(-)

diff --git a/themes/default/js/openrat.js b/themes/default/js/openrat.js @@ -134,85 +134,9 @@ function refreshWorkbench() } ); - // OnClick-Handler für Klick auf einen Tab-Reiter. - $('ul.views > li.action').click( function() { - $(this).orLoadView(); - }); - - $('div.menu').dblclick( function() - { - fullscreen( this ); - } ); - - // Drag n Drop für Views - $('ul.views > li.action').draggable( {cursor:'move',revert: 'invalid' }); - $('ul.views').droppable( {accept:'li.action',hoverClass: 'drophover',activeClass: 'dropactive',drop: function(event, ui) { - var dropped = ui.draggable; - var droppedOn = $(this); - if ( $(dropped).closest('div.frame').attr('id') == $(droppedOn).closest('div.frame').attr('id') ) - $(dropped).css({top: 0,left: 0}); // Nicht auf das eigene Fenster fallen lassen. - else - $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn).click(); - } } ); - - // geht nicht zusammen mit draggable... - //$('ul.views').sortable(); - // Modalen Dialog erzeugen. - if ( $('div#workbench div.frame.modal').size() > 0 ) - { - $('div#workbench div.frame.modal').parent().addClass('modal'); - $('div#filler').fadeTo(500,0.5); - $('div#workbench').addClass('modal'); - } - - - // Divider - $('div.container.axle-x > div.divider').draggable( - - { - stop: function( event, ui ) { - var xoffset = ui.position.left; - var lr = $(this).hasClass('to-right')?1:-1; - - $(this).parent().children('div.resizable').each( function() - { - var factor = ((lr*xoffset)+$(this).width()) / ($(this).parent().width()); - factor = Math.min(0.5,Math.max(0.1,factor)); // Erlaubter Bereich - - $(this).data('size-factor',factor); - } - ); - resizeWorkbenchContainer( $(this).parent() ); - }, - axis: "x", - revert: true, - revertDuration: 0 - } - ); - $('div.container.axle-y > div.divider').draggable( - - { - stop: function( event, ui ) { - var yoffset = ui.position.top; - var lr = $(this).hasClass('to-bottom')?1:-1; - - $(this).parent().children('div.resizable').each( function() - { - var factor = ((lr*yoffset)+$(this).height()) / ($(this).parent().height()); - factor = Math.min(0.5,Math.max(0.1,factor)); // Erlaubter Bereich - - $(this).data('size-factor',factor); - } - ); - resizeWorkbenchContainer( $(this).parent() ); - }, - axis: "y", - revert: true, - revertDuration: 0 - } - ); + registerWorkbenchEvents(); }); //alert('go'); @@ -229,6 +153,201 @@ function refreshWorkbench() } + +/** + * Registriert alle Events, die in der Workbench laufen sollen. + */ +function registerWorkbenchEvents() +{ + // Drag and Drop für Views + $('ul.views > li.action').draggable( + { + cursor: 'move', + revert: 'invalid' + } ); + + $('ul.views').droppable( + { + accept : 'li.action', + hoverClass : 'drophover', + activeClass: 'dropactive', + drop: function(event, ui) // View fällt auf eine andere, existierende View-Liste + { + var dropped = ui.draggable; + var droppedOn = $(this); + var oldViewList = dropped.parent(); + + if ( $(dropped).closest('div.frame').attr('id') == $(droppedOn).closest('div.frame').attr('id') ) + $(dropped).css({top: 0,left: 0}); // Nicht auf das eigene Fenster fallen lassen. + else + $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn).click(); + + // Falls die View-Liste, von der die View weggezogen wurde, jetzt leer ist: + if ( oldViewList.find('li').size() == 0 ) + { + var container = oldViewList.closest('div.container'); + oldViewList.closest('div.bar').remove(); // Die Bar, in der die leere Viewliste ist, entfernen. + container.replaceWith( container.children('div.bar') ); // die andere Bar nehmen und den übergeordneten Container ersetzen. + resizeWorkbench(); + } + } + } + ); + + $('div.content').droppable( + { + accept : 'li.action', + hoverClass : 'drophover', + activeClass: 'dropactive', + drop : function(event, ui) + { + var dropped = ui.draggable; + var droppedOn = $(this); + var oldViewList = dropped.parent(); + var bar = $(droppedOn).closest('div.bar'); + + var offsetDropped = dropped.offset(); + var offsetContent = droppedOn.offset(); + + // Abstände im Zielelement zu dem Rändern bestimmen. + var paddingLeft = offsetDropped.left-offsetContent.left; + var paddingRight = offsetContent.left+droppedOn.width()-offsetDropped.left; + var paddingTop = offsetDropped.top-offsetContent.top; + var paddingBottom = offsetContent.top+droppedOn.height()-offsetDropped.top; + //alert( ' L:' + paddingLeft + ' R:' + paddingRight + ' T:'+ paddingTop + ' B:' + paddingBottom ); + + var newContainer = $('<div class="container"><div class="bar first" /><div class="divider" /><div class="second"></div>'); + + if ( paddingLeft < Math.min(paddingRight,Math.min(paddingTop,paddingBottom)) ) + { + // Linker Rand ist der nächste. + newContainer.addClass('axle-x'); + newContainer.children('div.divider' ).addClass('to-right'); + newContainer.children('div.first' ).removeClass('first').addClass('resizable'); + newContainer.children('div.second').removeClass('first').addClass('autosize' ); + } + else if ( paddingRight < Math.min(paddingTop,paddingBottom) ) + { + // Rechter Rand ist der nächste. + newContainer.addClass('axle-x'); + newContainer.children('div.divider' ).addClass('to-left'); + newContainer.children('div.first' ).removeClass('first').addClass('autosize'); + newContainer.children('div.second').removeClass('first').addClass('resizable' ); + } + else if ( paddingTop < paddingBottom ) + { + // Oberer Rand ist der nächste. + newContainer.addClass('axle-y'); + newContainer.children('div.divider' ).addClass('to-bottom'); + newContainer.children('div.first' ).removeClass('first').addClass('resizable'); + newContainer.children('div.second').removeClass('first').addClass('autosize' ); + } + else + { + // Unterer Rand ist der nächste. + newContainer.addClass('axle-y'); + newContainer.children('div.divider' ).addClass('to-top'); + newContainer.children('div.first' ).removeClass('first').addClass('autosize'); + newContainer.children('div.second').removeClass('first').addClass('resizable' ); + } + + // Die komplette Bar der Quelle kopieren. + $(dropped).closest('div.bar').clone().addClass('resizable').removeClass('autosize').replaceAll( newContainer.children('div.resizable') ); + newContainer.find('ul.views > li').remove(); // Alle View entfernen + $(dropped).detach().css({top: 0,left: 0}).appendTo( newContainer.find('ul.views') ).click(); // View kopieren + + // Neuen Container in den DOM einfügen. + var oldContainer = $(bar).parent().replaceWith( newContainer ); + newContainer.children('div.autosize').replaceWith( oldContainer ); + + if ( oldContainer.hasClass('autosize' )) { newContainer.addClass('autosize' ).removeClass('resizable'); } + if ( oldContainer.hasClass('resizable')) { newContainer.addClass('resizable').removeClass('autosize' ); } + oldContainer.addClass('autosize' ).removeClass('resizable'); + + // Falls die View-Liste, von der die View weggezogen wurde, jetzt leer ist: + if ( oldViewList.find('li').size() == 0 ) + { + var container = oldViewList.closest('div.container'); + oldViewList.closest('div.bar').remove(); // Die Bar, in der die leere Viewliste ist, entfernen. + container.replaceWith( container.children('div.bar') ); // die andere Bar nehmen und den übergeordneten Container ersetzen. + } + + resizeWorkbench(); + registerWorkbenchEvents(); + } + } ); + + // geht nicht zusammen mit draggable... + //$('ul.views').sortable(); + + // Modalen Dialog erzeugen. + if ( $('div#workbench div.frame.modal').size() > 0 ) + { + $('div#workbench div.frame.modal').parent().addClass('modal'); + $('div#filler').fadeTo(500,0.5); + $('div#workbench').addClass('modal'); + } + + + // Größe der einzelnen Bereiche verändern + $('div.container.axle-x > div.divider').draggable( + + { + stop: function( event, ui ) { + var xoffset = ui.position.left; + var lr = $(this).hasClass('to-right')?1:-1; + + $(this).parent().children('div.resizable').each( function() + { + var factor = ((lr*xoffset)+$(this).width()) / ($(this).parent().width()); + factor = Math.min(0.5,Math.max(0.1,factor)); // Erlaubter Bereich + + $(this).data('size-factor',factor); + } + ); + resizeWorkbenchContainer( $(this).parent() ); + }, + axis: "x", + revert: true, + revertDuration: 0 + } + ); + $('div.container.axle-y > div.divider').draggable( + + { + stop: function( event, ui ) { + var yoffset = ui.position.top; + var lr = $(this).hasClass('to-bottom')?1:-1; + + $(this).parent().children('div.resizable').each( function() + { + var factor = ((lr*yoffset)+$(this).height()) / ($(this).parent().height()); + factor = Math.min(0.5,Math.max(0.1,factor)); // Erlaubter Bereich + + $(this).data('size-factor',factor); + } + ); + resizeWorkbenchContainer( $(this).parent() ); + }, + axis: "y", + revert: true, + revertDuration: 0 + } + ); + + // OnClick-Handler für Klick auf einen Tab-Reiter. + $('ul.views > li.action').click( function() { + $(this).orLoadView(); + }); + + $('div.menu').dblclick( function() + { + fullscreen( this ); + } ); +} + + + /** * Laedt den Header neu. */