Author: buscob
Date: Fri Nov 27 12:52:11 2009 New Revision: 884864 URL: http://svn.apache.org/viewvc?rev=884864&view=rev Log: A patch from Sascha Rodekamp "Drag'n'Drop update - add directly in the my portal application" (https://issues.apache.org/jira/browse/OFBIZ-3227) - OFBIZ-3227 Modified: ofbiz/trunk/framework/common/script/org/ofbiz/common/PortalPageServices.xml ofbiz/trunk/framework/common/webcommon/portal/editPortalPage.ftl ofbiz/trunk/framework/common/webcommon/portal/showPortalPage.ftl ofbiz/trunk/framework/common/widget/PortalPageScreens.xml ofbiz/trunk/framework/images/webapp/images/myportal.css ofbiz/trunk/framework/images/webapp/images/myportal.js Modified: ofbiz/trunk/framework/common/script/org/ofbiz/common/PortalPageServices.xml URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/common/script/org/ofbiz/common/PortalPageServices.xml?rev=884864&r1=884863&r2=884864&view=diff ============================================================================== --- ofbiz/trunk/framework/common/script/org/ofbiz/common/PortalPageServices.xml (original) +++ ofbiz/trunk/framework/common/script/org/ofbiz/common/PortalPageServices.xml Fri Nov 27 12:52:11 2009 @@ -312,7 +312,7 @@ </entity-one> <!-- destination Portlet --> - <if-compare operator="equals" field="parameters.mode" value="DRAGDROP"> + <if-compare operator="equals" field="parameters.mode" value="DRAGDROPBEFORE"> <entity-one value-field="destiPp" entity-name="PortalPagePortlet"> <field-map field-name="portalPageId" value="${parameters.d_portalPageId}"/> <field-map field-name="portalPortletId" value="${parameters.d_portalPortletId}"/> @@ -325,11 +325,25 @@ <condition-expr field-name="sequenceNum" operator="greater-equals" value="${destiPp.sequenceNum}"/> </condition-list> </entity-condition> + </if-compare> + + <if-compare operator="equals" field="parameters.mode" value="DRAGDROPAFTER"> + <entity-one value-field="destiPp" entity-name="PortalPagePortlet"> + <field-map field-name="portalPageId" value="${parameters.d_portalPageId}"/> + <field-map field-name="portalPortletId" value="${parameters.d_portalPortletId}"/> + <field-map field-name="portletSeqId" value="${parameters.d_portletSeqId}"/> + </entity-one> + <entity-condition list="modifyPpList" entity-name="PortalPagePortlet"> + <condition-list combine="and"> + <condition-expr field-name="portalPageId" operator="equals" value="${parameters.o_portalPageId}"/> + <condition-expr field-name="sequenceNum" operator="greater" value="${destiPp.sequenceNum}"/> + </condition-list> + </entity-condition> </if-compare> <!-- Portlets to Modify --> - <if-compare operator="equals" field="parameters.mode" value="ColBOTTOM"> + <if-compare operator="equals" field="parameters.mode" value="DRAGDROPBOTTOM"> <entity-one value-field="pPColumn" entity-name="PortalPageColumn"> <field-map field-name="columnSeqId" value="${parameters.destinationColumn}"/> <field-map field-name="portalPageId" value="${parameters.o_portalPageId}"/> Modified: ofbiz/trunk/framework/common/webcommon/portal/editPortalPage.ftl URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/common/webcommon/portal/editPortalPage.ftl?rev=884864&r1=884863&r2=884864&view=diff ============================================================================== --- ofbiz/trunk/framework/common/webcommon/portal/editPortalPage.ftl (original) +++ ofbiz/trunk/framework/common/webcommon/portal/editPortalPage.ftl Fri Nov 27 12:52:11 2009 @@ -48,13 +48,12 @@ <tr> <#list portalPageColumnList?if_exists as portalPageColumn> <td style="vertical-align: top; <#if portalPageColumn.columnWidthPercentage?has_content> width:${portalPageColumn.columnWidthPercentage}%;</#if>" id="${portalPageColumn.columnSeqId}" name="portalColumn"> - <script type="text/javascript">makeDroppable("${portalPageColumn.columnSeqId}")</script> <#assign firstInColumn = true/> <#list portalPagePortletViewList as portlet> <#if (!portlet.columnSeqId?has_content && portalPageColumn_index == 0) || (portlet.columnSeqId?if_exists == portalPageColumn.columnSeqId)> <#if portlet.screenName?has_content> <#assign portletFields = '<input name="portalPageId" value="' + portlet.portalPageId + '" type="hidden"/><input name="portalPortletId" value="' + portlet.portalPortletId + '" type="hidden"/><input name="portletSeqId" value="' + portlet.portletSeqId + '" type="hidden"/>'> - <div class="portlet-config" id="${portlet_index}" name="portalPortlet"> + <div class="portlet-config" id="${portlet_index}" name="portalPortlet" onMouseOver="javascript:this.style.cursor='move';"> <div class="portlet-config-title-bar"> <#list portalPages as portalPageList> <#if portalPage.portalPageId != portalPageList.portalPageId> Modified: ofbiz/trunk/framework/common/webcommon/portal/showPortalPage.ftl URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/common/webcommon/portal/showPortalPage.ftl?rev=884864&r1=884863&r2=884864&view=diff ============================================================================== --- ofbiz/trunk/framework/common/webcommon/portal/showPortalPage.ftl (original) +++ ofbiz/trunk/framework/common/webcommon/portal/showPortalPage.ftl Fri Nov 27 12:52:11 2009 @@ -16,23 +16,29 @@ specific language governing permissions and limitations under the License. --> - <#if portalPage?has_content> <table width="100%"> <tr> <#list portalPageColumns?if_exists as portalPageColumn> - <td style="vertical-align: top; <#if portalPageColumn.columnWidthPercentage?has_content> width:${portalPageColumn.columnWidthPercentage}%;</#if>"> + <td style="vertical-align: top; <#if portalPageColumn.columnWidthPercentage?has_content> width:${portalPageColumn.columnWidthPercentage}%;</#if>" id="${portalPageColumn.columnSeqId}" name="portalColumn"> <#assign firstInColumn = true/> <#list portalPagePortlets as portlet> <#if (!portlet.columnSeqId?has_content && portalPageColumn_index == 0) || (portlet.columnSeqId?if_exists == portalPageColumn.columnSeqId)> <#if portlet.screenName?has_content> - <div> + <#assign portletFields = '<input name="portalPageId" value="' + portlet.portalPageId + '" type="hidden"/><input name="portalPortletId" value="' + portlet.portalPortletId + '" type="hidden"/><input name="portletSeqId" value="' + portlet.portletSeqId + '" type="hidden"/>'> + <form method="post" action="<@ofbizUrl>movePortletToPortalPage</@ofbizUrl>" name="movePP_${portlet_index}">${portletFields}<input name="newPortalPageId" value="${portlet.portalPageId}" type="hidden"/></form> + <div id="${portlet_index}" name="portalPortlet" class="noClass"> ${setRequestAttribute("portalPageId", portalPage.portalPageId)} ${setRequestAttribute("portalPortletId", portlet.portalPortletId)} ${setRequestAttribute("portletSeqId", portlet.portletSeqId)} ${screens.render(portlet.screenLocation, portlet.screenName)} ${screens.setRenderFormUniqueSeq(portlet_index)} </div> + <#-- DragNDrop is only activated, when the portal Page isn't the Default page --> + <#if portalPage.originalPortalPageId?has_content><script>setMousePointer("${portlet_index}")</script></#if> + <#if portalPage.originalPortalPageId?has_content><script type="text/javascript">makeDragable("${portlet_index}");</script></#if> + <#if portalPage.originalPortalPageId?has_content><script type="text/javascript">makeDroppable("${portlet_index}");</script></#if> + <form method="post" action="<@ofbizUrl>updatePortalPagePortletAjax</@ofbizUrl>" name="freeMove_${portlet_index}">${portletFields}<input name="columnSeqId" value="${portalPageColumn.columnSeqId}" type="hidden"/><input name="mode" value="RIGHT" type="hidden"/></form> </#if> <#assign firstInColumn = false/> </#if> Modified: ofbiz/trunk/framework/common/widget/PortalPageScreens.xml URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/common/widget/PortalPageScreens.xml?rev=884864&r1=884863&r2=884864&view=diff ============================================================================== --- ofbiz/trunk/framework/common/widget/PortalPageScreens.xml (original) +++ ofbiz/trunk/framework/common/widget/PortalPageScreens.xml Fri Nov 27 12:52:11 2009 @@ -68,6 +68,8 @@ <screen name="showPortalPage"> <section> <actions> + <set field="layoutSettings.javaScripts[]" value="/images/myportal.js" global="true"/> + <set field="layoutSettings.styleSheets[+0]" value="/images/myportal.css" global="true"/> <set field="headerItem" from-field="parameters.portalPageId"/> </actions> <widgets> @@ -87,7 +89,9 @@ </entity-and> </actions> <widgets> - <platform-specific><html><html-template location="component://common/webcommon/portal/showPortalPage.ftl"/></html></platform-specific> + <container id="portalContainerId"> + <platform-specific><html><html-template location="component://common/webcommon/portal/showPortalPage.ftl"/></html></platform-specific> + </container> </widgets> </section> </decorator-section> Modified: ofbiz/trunk/framework/images/webapp/images/myportal.css URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/myportal.css?rev=884864&r1=884863&r2=884864&view=diff ============================================================================== --- ofbiz/trunk/framework/images/webapp/images/myportal.css (original) +++ ofbiz/trunk/framework/images/webapp/images/myportal.css Fri Nov 27 12:52:11 2009 @@ -19,12 +19,12 @@ #loading { position: absolute; -z-index: 100; -left: 10px; -top: 250px; background-image: url(/images/myportal_load_bg.png); background-repeat:repeat; background-position:top center; +z-index: 100; +top: 0px; +left: 10px; border: 0px !important; width: 99%; height: 100%; @@ -35,13 +35,3 @@ top: 200px; left: 50%; } - -td.hover { -border: 2px dashed #aaa; -background:#efefef; -} - -div.hover { -border: 2px dashed #aaa; -background:#efefef; -} Modified: ofbiz/trunk/framework/images/webapp/images/myportal.js URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/myportal.js?rev=884864&r1=884863&r2=884864&view=diff ============================================================================== --- ofbiz/trunk/framework/images/webapp/images/myportal.js (original) +++ ofbiz/trunk/framework/images/webapp/images/myportal.js Fri Nov 27 12:52:11 2009 @@ -19,41 +19,180 @@ //Drag & Drop Functions for myPortal +//global Var for controlling hover Boxes +var hoverDivBefore = -1; +var hoverColumnBefore = -1; + +//init KeyListener +window.onload=function(){ + document.onkeydown = key_event; + document.onkeypress = key_event; + + //set a column droppable when it's empty + checkIfTabelsContainsDivs(); +} + +//if ESC is pressed, remove draged portlet + hoverDiv +function key_event(evt) +{ + if(evt.keyCode == 27) { + //removes the hover div after the portlet is moved to another position + if((hd = document.getElementById('hoverDiv')) != null){ + Droppables.remove(hd); + hd.parentNode.removeChild(hd); + //the global var must disabled + hoverColumnBefore = -1; + hoverDivBefore = -1; + } + } +} + //makes portlets dragable function makeDragable(portletId){ drag = document.getElementById(portletId); new Draggable(drag, - {revert: true, reverteffect : - function(drag, top_offset, left_offset) - { new Effect.MoveBy(drag, -top_offset, -left_offset, {duration:0}); } + {revert: true, ghosting: false, reverteffect : + function(drag, top_offset, left_offset){ + new Effect.MoveBy(drag, -top_offset, -left_offset, {duration:0}); + var hd = document.getElementById('hoverDiv'); + if(hd != null){ + Droppables.remove(hd); + hd.parentNode.removeChild(hd); + } + } }); } //makes columns and portlets droppable function makeDroppable(id){ + //DragDrop mode + var mode = null; var drop = document.getElementById(id); if(drop.nodeName == "DIV"){ Droppables.add(drop, { - accept: 'portlet-config', - hoverclass: 'hover', - onDrop: function(element) { - getDestinationInformationPortlets(element.id, id); + accept: ['portlet-config','noClass'], + //Hover effekt + onHover: function(element){ + + //vertical overlapping position + var pos = Position.overlap('vertical', drop); + //gets the position of the droppable element + var hd = document.getElementById('hoverDiv'); + + if(pos >= 0.5){ + mode = "DRAGDROPBEFORE"; + //if the previous DIV is the hoverDiv do nothing + try { + var previous = (drop.previous('DIV')).getAttribute('id'); + } catch (ex) { + previous = 'undi'; + } + + if(previous != 'hoverDiv' && previous != element.id){ + if(hd != null){ + Droppables.remove(hd); + hd.parentNode.removeChild(hd); + } + + //create previewDiv + var divTopOffset = document.getElementById(element.id).offsetHeight; + var hoverDiv = document.createElement('DIV'); + hoverDiv.setAttribute('style', 'height: ' + divTopOffset + 'px; border: 1px dashed #aaa; background:#ffffff; margin-bottom: 5px;') + hoverDiv.setAttribute('id', 'hoverDiv'); + var elem = document.getElementById(id); + + //inseret Before + elem.parentNode.insertBefore(hoverDiv, elem); + hoverDivBefore = id; + + //the new div have to be droppable + Droppables.add(hoverDiv, { + onDrop: function(element) { + getDestinationInformationPortlets(element.id, id, mode); + } + }); + } + }else if(pos < 0.5){ + mode = "DRAGDROPAFTER"; + //if the next DIV is the hoverDiv do nothing + try { + var next = (drop.next('DIV')).getAttribute('id'); + }catch (ex){ + next = 'undi'; + } + + if(next != 'hoverDiv' && next != element.id){ + if(hd != null){ + Droppables.remove(hd); + hd.parentNode.removeChild(hd); + } + + //create previewDiv + var divTopOffset = document.getElementById(element.id).offsetHeight; + var hoverDiv = document.createElement('DIV'); + hoverDiv.setAttribute('style', 'height: ' + divTopOffset + 'px; border: 1px dashed #aaa; background:#ffffff; margin-bottom: 5px;') + hoverDiv.setAttribute('id', 'hoverDiv'); + var elem = document.getElementById(id); + + //insert After + elem.parentNode.insertBefore(hoverDiv, elem.nextSibling); + hoverDivBefore = id; + + //the new div have to be droppable + Droppables.add(hoverDiv, { + onDrop: function(element) { + getDestinationInformationPortlets(element.id, id, mode); + } + }); + } + } + }, + onDrop: function(element) { + getDestinationInformationPortlets(element.id, id, mode); } }); }else{ + mode = "DRAGDROPBOTTOM"; + //Makes ColumnDroppable Droppables.add(drop, { - accept: 'portlet-config', - hoverclass: 'hover', + accept: ['portlet-config','noClass'], + //Hover effekt + onHover: function(element){ + var hd = document.getElementById('hoverDiv'); + if(hd != null){ + hd.parentNode.removeChild(hd); + } + + //create previewDiv + var divTopOffset = document.getElementById(element.id).offsetHeight; + var hoverDiv = document.createElement('DIV'); + hoverDiv.setAttribute('style', 'height: ' + divTopOffset + 'px; border: 1px dashed #aaa; background:#ffffff; margin-bottom: 5px;') + hoverDiv.setAttribute('id', 'hoverDiv'); + var elem = document.getElementById(id); + + //insert After + elem.appendChild(hoverDiv); + hoverDivBefore = id; + + //the new div have to be droppable + Droppables.add(hoverDiv, { + onDrop: function(element) { + getDestinationInformationColumn(element.id, id); + } + }); + }, + onDrop: function(element) { - getDestinationInformationColumn(element.id, id); - } - }); + getDestinationInformationColumn(element.id, id); + } + }); } + } //calls ajax request for dropping container on a portlet -function getDestinationInformationPortlets(originId, destinationId){ - loadingImage(); +function getDestinationInformationPortlets(originId, destinationId, mode){ + loadingImage(); var move = document.forms['freeMove_' + destinationId]; var d_portalPageId = move.elements['portalPageId'].value; @@ -68,7 +207,7 @@ new Ajax.Request('/myportal/control/updatePortalPagePortletSeqAjax',{ method: "post", parameters: {o_portalPageId: o_portalPageId, o_portalPortletId: o_portalPortletId, o_portletSeqId: o_portletSeqId, - d_portalPageId: d_portalPageId, d_portalPortletId: d_portalPortletId, d_portletSeqId: d_portletSeqId, mode: "DRAGDROP" }, + d_portalPageId: d_portalPageId, d_portalPortletId: d_portalPortletId, d_portletSeqId: d_portletSeqId, mode: mode }, onLoading: function(transport){ }, @@ -77,7 +216,11 @@ var destination = document.getElementById(destinationId); var origin = document.getElementById(originId); - destination.parentNode.insertBefore(origin, destination); + if(mode == 'DRAGDROPBEFORE'){ + destination.parentNode.insertBefore(origin, destination); + }else if(mode == 'DRAGDROPAFTER'){ + destination.parentNode.insertBefore(origin, destination.nextSibling); + } //Fix for layout Bug origin.style.left = destination.style.left; origin.style.top = 0; @@ -102,7 +245,7 @@ new Ajax.Request('/myportal/control/updatePortalPagePortletSeqAjax',{ method: "post", - parameters: {destinationColumn: destination, o_portalPageId: portalPageId, o_portalPortletId: portalPortletId, o_portletSeqId: portletSeqId, mode: "ColBOTTOM"}, + parameters: {destinationColumn: destination, o_portalPageId: portalPageId, o_portalPortletId: portalPortletId, o_portletSeqId: portletSeqId, mode: "DRAGDROPBOTTOM"}, onLoading: function(transport){ }, @@ -125,6 +268,18 @@ //removes the loading image function onCompleteRequest() { + + //removes the hover div after the portlet is moved to another position + if((hd = document.getElementById('hoverDiv')) != null){ + hd.parentNode.removeChild(hd); + //the global var must disabled + hoverColumnBefore = -1; + hoverDivBefore = -1; + } + + //set a column droppable when it's empty + checkIfTabelsContainsDivs() + var loading = document.getElementById("loading"); if(loading != null){ //IE Fix (IE treats DOM objects and Javascript objects separately, and you can't extend the DOM objects using Object.prototype) @@ -135,7 +290,7 @@ //displays the loading image function loadingImage() { var container = document.getElementById("portalContainerId"); - var p = document.createElement("p"); + var p = document.createElement("div"); p.setAttribute("id", "loading"); var img = document.createElement("img"); img.setAttribute("src", "/images/loader.gif"); @@ -144,6 +299,36 @@ container.appendChild(p); } +//set the MousePointer +function setMousePointer(elem){ + var elements = document.getElementById(elem).getElementsByTagName('div'); + for(i=0; i<elements.length; i++){ + att = elements[i].getAttribute("class"); + if(att == 'screenlet-title-bar'){ + elements[i].setAttribute('onMouseOver','javascript:this.style.cursor="move";'); + break; + } + } +} + +//checked if a Tabel contains a portlet, if not make it Droppable +function checkIfTabelsContainsDivs(){ + var td = new Array(); + td = getElementsByName_iefix('TD', 'portalColumn'); + for(var i=0; i<td.length; i++){ + //if the next DIV is the hoverDiv do nothing + + var next = (td[i].select('DIV')); + if(next.length == 0){ + //make a column droppable when it's empty + makeDroppable(td[i].getAttribute('id')); + }else{ + //removes the column droppable attribute when it's not empty + Droppables.remove(td[i]); + } + } +} + //Workaround for IE getElementsByName Bug function getElementsByName_iefix(tag, name) { var elem = document.getElementsByTagName(tag); @@ -157,4 +342,3 @@ } return arr; } - |
Free forum by Nabble | Edit this page |