svn commit: r680073 - in /ofbiz/trunk: applications/ecommerce/widget/ applications/order/webapp/orde
Locked
svn commit: r680073 - in /ofbiz/trunk: applications/ecommerce/widget/ applications/order/webapp/orde
 
|
Author: jleroux
Date: Sun Jul 27 00:53:13 2008 New Revision: 680073 URL: http://svn.apache.org/viewvc?rev=680073&view=rev Log: An enhancing patch from Sumit Pandit "At main page of the ecommerce show popup on mouse over at product image and/or link." (https://issues.apache.org/jira/browse/OFBIZ-1891) - OFBIZ-1891 Added: ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.css (with props) ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.js (with props) Modified: ofbiz/trunk/applications/ecommerce/widget/CommonScreens.xml ofbiz/trunk/applications/order/webapp/ordermgr/entry/catalog/productsummary.ftl Modified: ofbiz/trunk/applications/ecommerce/widget/CommonScreens.xml URL: http://svn.apache.org/viewvc/ofbiz/trunk/applications/ecommerce/widget/CommonScreens.xml?rev=680073&r1=680072&r2=680073&view=diff ============================================================================== --- ofbiz/trunk/applications/ecommerce/widget/CommonScreens.xml (original) +++ ofbiz/trunk/applications/ecommerce/widget/CommonScreens.xml Sun Jul 27 00:53:13 2008 @@ -44,13 +44,16 @@ <set field="layoutSettings.javaScripts[]" value="/images/calendar_date_select.js" global="true"/> <set field="layoutSettings.javaScripts[+0]" value="/images/prototypejs/validation.js" global="true"/> <set field="layoutSettings.javaScripts[+0]" value="/images/prototypejs/prototype.js" global="true"/> - + <set field="layoutSettings.javaScripts[]" value="/images/prototypejs/effects.js" global="true"/> + <set field="layoutSettings.javaScripts[]" value="/images/prototypejs/popup.js" global="true"/> + <set field="layoutSettings.extraHead" value="<link rel="stylesheet" href="/content/images/contentForum.css" type="text/css"/>" global="true"/> <script location="component://ecommerce/widget/EcommerceSetup.bsh"/> <!-- The default (main) stylesheets --> <set field="layoutSettings.styleSheets[+0]" value="/ecommerce/images/blog.css" global="true"/> - <set field="layoutSettings.styleSheets[+0]" value="${productStore.styleSheet}" default-value="/images/ecommain.css" global="true"/> + <set field="layoutSettings.styleSheets[+0]" value="${productStore.styleSheet}" default-value="/images/ecommain.css" global="true"/> + <set field="layoutSettings.styleSheets[+0]" value="/images/prototypejs/popup.css" global="true"/> </actions> <widgets> <!-- render header --> Modified: ofbiz/trunk/applications/order/webapp/ordermgr/entry/catalog/productsummary.ftl URL: http://svn.apache.org/viewvc/ofbiz/trunk/applications/order/webapp/ordermgr/entry/catalog/productsummary.ftl?rev=680073&r1=680072&r2=680073&view=diff ============================================================================== --- ofbiz/trunk/applications/order/webapp/ordermgr/entry/catalog/productsummary.ftl (original) +++ ofbiz/trunk/applications/order/webapp/ordermgr/entry/catalog/productsummary.ftl Sun Jul 27 00:53:13 2008 @@ -28,13 +28,31 @@ <#assign smallImageUrl = productContentWrapper.get("SMALL_IMAGE_URL")?if_exists> <#if !smallImageUrl?has_content><#assign smallImageUrl = "/images/defaultImage.jpg"></#if> <#-- end variable setup --> - + <#assign productInfoLinkId = "productInfoLink"> + <#assign productInfoLinkId = productInfoLinkId + product.productId/> + <#assign productDetailId = "productDetailId"/> + <#assign productDetailId = productDetailId + product.productId/> <div class="productsummary"> <div class="smallimage"> <a href="<@ofbizUrl>${targetRequestName}/<#if categoryId?exists>~category_id=${categoryId}/</#if>~product_id=${product.productId}</@ofbizUrl>"> - <img src="<@ofbizContentUrl>${contentPathPrefix?if_exists}${smallImageUrl}</@ofbizContentUrl>" alt="Small Image"/> + <span id="${productInfoLinkId}" class="popup_link"><img src="<@ofbizContentUrl>${contentPathPrefix?if_exists}${smallImageUrl}</@ofbizContentUrl>" alt="Small Image"/></span> </a> </div> + <div id="${productDetailId}" class="popup" > + <table> + <tr valign="top"> + <td> + <img src="<@ofbizContentUrl>${contentPathPrefix?if_exists}${smallImageUrl}</@ofbizContentUrl>" alt="Small Image"/><br/> + ${uiLabelMap.ProductProductId} : ${product.productId?if_exists}<br/> + ${uiLabelMap.ProductProductName} : ${product.productName?if_exists}<br/> + ${uiLabelMap.CommonDescription} : ${product.description?if_exists} + </td> + </tr> + </table> + </div> + <script type="text/javascript"> + new Popup('${productDetailId}','${productInfoLinkId}', {position: 'none'}) + </script> <div class="productbuy"> <#-- check to see if introductionDate hasn't passed yet --> <#if product.introductionDate?exists && nowTimestamp.before(product.introductionDate)> Added: ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.css URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.css?rev=680073&view=auto ============================================================================== --- ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.css (added) +++ ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.css Sun Jul 27 00:53:13 2008 @@ -0,0 +1,35 @@ +/* + popup.js +*/ +div.popup { + max-width: 600px; + width: 250px; + border: 1px solid red; + padding: 5px; + background-color: white; + /* The following properties should not be changed */ + position: absolute; +} + +#popup_overlay { + background-color: whitesmoke; + /* The following properties should not be changed */ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 500px; +} + +span.popup_link, a.popup_link { + cursor: pointer; + +} + +.popup td{ + background:#fff +} + +.popup_draghandle { + cursor: move; +} Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.css ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.css ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.css ------------------------------------------------------------------------------ svn:mime-type = text/css Added: ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.js URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.js?rev=680073&view=auto ============================================================================== --- ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.js (added) +++ ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.js Sun Jul 27 00:53:13 2008 @@ -0,0 +1,470 @@ +/* + popup.js + + A lightweight general purpose JavaScript DOM element popup class. + + Webpage: + http;//www.methods.co.nz/popup/popup.html + + Inspired by: + Lightbox2: http://www.huddletogether.com/projects/lightbox2/ + Lightbox Gone Wild: http://particletree.com/features/lightbox-gone-wild/ + Tooltip: http://blog.innerewut.de/pages/tooltip + Prototype library: http://www.prototypejs.org/ + Scriptaculous library: http://script.aculo.us/ + + Attributions: + - Uses the getPageSize() function from Lightbox v2.02 by Lokesh Dhakar + (http://www.huddletogether.com/projects/lightbox2/). + - Adapted the the modal overlay technique used in Lightbox v2.02 by Lokesh + Dhakar (http://www.huddletogether.com/projects/lightbox2/). + + Version: 1.0.1 + + Author: Stuart Rackham <[hidden email]> + License: This source code is released under the MIT license. + + Copyright (c) Stuart Rackham 2007 + +*/ + +var Popup = Class.create(); +Popup.zIndex = 1000; // z-index of first popup. + +Popup.prototype = { + + /* + Popup creation + */ + initialize: function(popup, link) { + var options = Object.extend({ + modal: false, + effect: 'fade', + hidden: true, + closebox: 'popup_closebox', // CSS class name of click-to-close elements. + draghandle: 'popup_draghandle' // CSS class name of drag handle elements. + }, arguments[2] || {}); + options.position = options.position || (options.modal ? 'center' : 'auto'); + options.trigger = options.trigger || (options.modal ? 'click' : 'mouseover'); + options.duration = this.first_value(options.duration, Popup.duration, 0.5); + options.show_duration = this.first_value(options.show_duration, options.duration); + options.hide_duration = this.first_value(options.hide_duration, options.duration); + options.opacity = this.first_value(options.opacity, Popup.opacity, 0.5); + options.show_delay = this.first_value(options.show_delay, Popup.show_delay, 500); + options.hide_delay = this.first_value(options.hide_delay, Popup.hide_delay, 200); + options.cursor_margin = this.first_value(options.cursor_margin, Popup.cursor_margin, 5); + this.options = options; + if (link) { + this.link = $(link); + } + this.popup = $(popup); + this.popup.popup = this; // Make the popup object a property of the DOM popup element. + if (options.hidden) { + this.popup.hide(); + } + if (options.closebox) { + this.closeboxes = document.getElementsByClassName(options.closebox, this.popup); + if (this.popup.hasClassName(options.closebox)) { + this.closeboxes[this.closeboxes.length] = this.popup; + } + } + else { + this.closeboxes = []; + } + if (options.draghandle) { + var draghandles = document.getElementsByClassName(options.draghandle, this.popup); + for (i = 0; i < draghandles.length; i++) { + new Draggable(this.popup, { handle: draghandles[i] }); + } + if (this.popup.hasClassName(options.draghandle)) { + new Draggable(this.popup, { handle: this.popup }); + } + } + this.register_events(); + }, + + + /* + Event functions + */ + + register_events: function() { + var trigger_function; + if (this.is_auto_open()) { + trigger_function = this.start_show_timer; + if (this.link) { + Event.observe(this.link, 'mouseout', this.stop_show_timer.bindAsEventListener(this)); + } + } + else { + trigger_function = this.show; + } + if (this.link) { + Event.observe(this.link, this.options.trigger, trigger_function.bindAsEventListener(this)); + } + if (!this.options.modal) { + Event.observe(this.popup, 'click', this.bring_to_front.bindAsEventListener(this)); + } + if (this.closeboxes.length > 0) { + for (var i = 0; i < this.closeboxes.length; i++) { + Event.observe(this.closeboxes[i], 'click', this.hide.bindAsEventListener(this)); + } + } + else { + if (this.link) { + Event.observe(this.link, 'mouseout', this.start_hide_timer.bindAsEventListener(this)); + } + Event.observe(this.popup, 'mouseover', this.stop_hide_timer.bindAsEventListener(this)); + Event.observe(this.popup, 'mouseout', this.start_hide_timer.bindAsEventListener(this)); + } + }, + + bring_to_front: function(event) { + // Bring to front if not already there. + if (Number(this.popup.style.zIndex) < Popup.zIndex - 1) { + this.popup.style.zIndex = Popup.zIndex++; + } + }, + + start_show_timer: function(event) { + // NOTE: event is bound to this.show but it's state changes between being + // bound here and arriving at this.show -- specifically, the mouse + // coordinates are reset to zero). I've no idea why. Anyway, this is the + // reason for passing the event mouse coordinates as properties of this. + this.stop_show_timer(event); + this.mouse_x = Event.pointerX(event); + this.mouse_y = Event.pointerY(event); + this.show_timer = setTimeout(this.show.bind(this, event), this.options.show_delay); + }, + + stop_show_timer: function(event) { + if (this.show_timer) { + clearTimeout(this.show_timer); + this.show_timer = null; + } + }, + + start_hide_timer: function(event) { + this.stop_hide_timer(event); + this.hide_timer = setTimeout(this.hide.bind(this, event), this.options.hide_delay); + }, + + stop_hide_timer: function(event) { + if (this.hide_timer) { + clearTimeout(this.hide_timer); + this.hide_timer = null; + } + }, + + show: function(event) { + this.stop_show_timer(event); + this.stop_hide_timer(event); + if (this.is_open) { + return; + } + if (this.options.modal) { + this.show_overlay(); + } + var pos; + if (!event) { + // We only arrive here if this.show has been called externally. + pos = this.get_popup_position(); + } + else if (this.is_auto_open()) { + // Because auto-open popups calls this.show indirectly via start_show_timer. + pos = this.get_popup_position(this.mouse_x, this.mouse_y); + } + else { + pos = this.get_popup_position(Event.pointerX(event), Event.pointerY(event)); + } + Element.setStyle(this.popup, { top: pos.y, left: pos.x, zIndex: Popup.zIndex++ }); + this.is_open = true; + switch (this.options.effect) { + case 'slide': + Effect.SlideDown(this.popup, {duration: this.options.show_duration}); + break; + case 'grow': + Effect.Grow(this.popup, {duration: this.options.show_duration}); + break; + case 'blind': + Effect.BlindDown(this.popup, {duration: this.options.show_duration}); + break; + case 'fade': + default: + Effect.Appear(this.popup, {duration: this.options.show_duration}); + break; + } + }, + + hide: function(event){ + this.is_open = false; + switch (this.options.effect) { + case 'slide': + Effect.SlideUp(this.popup, {duration: this.options.hide_duration}); + break; + case 'grow': + Effect.Shrink(this.popup, {duration: this.options.hide_duration}); + break; + case 'blind': + Effect.BlindUp(this.popup, {duration: this.options.hide_duration}); + break; + case 'fade': + default: + Effect.Fade(this.popup, {duration: this.options.hide_duration}); + break; + } + if (this.options.modal) { + this.hide_overlay(); + } + }, + + + /* + Helper functions + */ + + // Return the first function argument that is not undefined. + // Because when zero numerical value are possible you can't use || chains. + first_value: function() { + for (var i = 0; i < arguments.length; i++) { + if (arguments[i] !== undefined) { + return arguments[i]; + } + } + return undefined; + }, + + is_auto_open: function() { + return this.options.trigger == 'mouseover'; + }, + + show_overlay: function() { + if (!Popup.overlay) { + var overlay = document.createElement('div'); + overlay.setAttribute('id','popup_overlay'); + overlay.style.display = 'none'; + document.body.appendChild(overlay); + Popup.overlay = overlay; + Popup.overlay_levels = []; + } + Popup.overlay.style.height = this.get_page_dimensions().height + 'px'; + var z = Popup.zIndex++; + Popup.overlay.style.zIndex = z; + Popup.overlay_levels.push(z); + if ( Popup.overlay_levels.length == 1) { // Opening the first modal popup. + // Queue the global overlay effect to ensure correct execution order. + new Effect.Appear(Popup.overlay, + { duration: this.options.show_duration, + to: this.options.opacity, + queue: {position: 'end', scope: 'popup_overlay'} + }); + } + else { // There is another modal popup at a lower level so move the overlay forward. + Popup.overlay.style.zIndex = z; + } + }, + + hide_overlay: function() { + Popup.overlay_levels.pop(); + var z = Popup.overlay_levels.pop(); + if (z) { // There is another modal popup at a lower level so move the overlay back. + Popup.overlay_levels.push(z); + Popup.overlay.style.zIndex = z; + } + else { // The last modal popup is being closed so hide the overlay + // Queue the global overlay effect to ensure correct execution order. + new Effect.Fade(Popup.overlay, + { duration: this.options.hide_duration, + queue: {position: 'end', scope: 'popup_overlay'} + }); + } + }, + + + /* + Positioning functions + */ + + // Return the top and left CSS position strings as an {x,y} object that the + // popup should be shown at. mouse_x and mouse_y are the mouse x,y coordinates + // numbers when the popup was triggered. + get_popup_position: function(mouse_x, mouse_y) { + var pos; + switch (this.options.position) { + case 'auto': + pos = this.get_auto_position(mouse_x, mouse_y); + break; + case 'center': + pos = this.get_center_position(); + break; + case 'below': + pos = this.get_below_position(); + break; + default: + // Check for x,y postion format (x and y can be any valid CSS left or + // top property value). + if (mo = this.options.position.match(/^\s*([^\s,]+)\s*,\s*([^\s,]+)\s*$/)) { + pos = {x: mo[1], y: mo[2]}; + // If possible convert to numbers. + pos.x = Number(pos.x)+100 || pos.x+100; + pos.y = Number(pos.y) || pos.y; + } + else { + pos = {x: 50, y: 20}; + } + break; + } + if (typeof pos.x == 'number') { + pos.x += 'px'; + } + if (typeof pos.y == 'number') { + pos.y += 'px'; + } + return pos; + }, + + get_below_position: function() { + var pos = Position.cumulativeOffset(this.link); + return {x: pos[0], y: pos[1] + Element.getHeight(this.link)}; + }, + + get_center_position: function() { + dim = Element.getDimensions(this.popup); + var popup_width = dim.width; + var popup_height = dim.height; + dim = this.get_viewport_dimensions(); + var viewport_width = dim.width; + var viewport_height = dim.height; + + var x; + if (popup_width >= viewport_width) { + x = 0; + } + else { + x = (viewport_width - popup_width)/2; + } + + var y; + if (popup_height >= viewport_height) { + y = 0; + } + else { + y = (viewport_height - popup_height)/2; + } + + return {x: x, y: y}; + }, + + get_auto_position: function(mouse_x, mouse_y) { + dim = Element.getDimensions(this.popup); + var popup_width = dim.width; + var popup_height = dim.height; + dim = this.get_viewport_dimensions(); + var viewport_width = dim.width; + var viewport_height = dim.height; + + var available_right = viewport_width - (mouse_x + this.options.cursor_margin); + var available_left = mouse_x - this.options.cursor_margin; + var available_top = mouse_y - this.options.cursor_margin; + var available_bottom = viewport_height - (mouse_x + this.options.cursor_margin); + var offset = this.options.cursor_margin; + var x = mouse_x; + var y = mouse_y; + + if (popup_width >= viewport_width) { + x = 0; + } + else if (popup_width <= available_right) { + x += offset; + } + else if (popup_width <= available_left) { + x -= popup_width + offset; + } + else if (available_right >= available_left) { + x = viewport_width - popup_width; + } + else { + x = 0; + } + + if (popup_height >= viewport_height) { + y = 0; + } + else if (popup_height <= available_bottom) { + y += offset; + } + else if (popup_height <= available_top) { + y -= popup_height + offset; + } + else if (available_bottom >= available_top) { + y = viewport_height - popup_height; + } + else { + y = 0; + } + + return {x: x, y: y}; + }, + + get_viewport_dimensions: function() { + var dim = this.getPageSize(); + return {width: dim[2], height: dim[3]}; + }, + + get_page_dimensions: function() { + var dim = this.getPageSize(); + return {width: dim[0], height: dim[1]}; + }, + + // This function from Lightbox v2.02 by Lokesh Dhakar + // (http://www.huddletogether.com/projects/lightbox2/). + // + // Returns array with page width, height and window width, height + // Core code from - quirksmode.org + // Edit for Firefox by pHaez + // + getPageSize: function() { + var xScroll, yScroll; + + if (window.innerHeight && window.scrollMaxY) { + xScroll = document.body.scrollWidth; + yScroll = window.innerHeight + window.scrollMaxY; + } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac + xScroll = document.body.scrollWidth; + yScroll = document.body.scrollHeight; + } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari + xScroll = document.body.offsetWidth; + yScroll = document.body.offsetHeight; + } + + var windowWidth, windowHeight; + if (self.innerHeight) { // all except Explorer + windowWidth = self.innerWidth; + windowHeight = self.innerHeight; + } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode + windowWidth = document.documentElement.clientWidth; + windowHeight = document.documentElement.clientHeight; + } else if (document.body) { // other Explorers + windowWidth = document.body.clientWidth; + windowHeight = document.body.clientHeight; + } + + // for small pages with total height less then height of the viewport + if(yScroll < windowHeight){ + pageHeight = windowHeight; + } else { + pageHeight = yScroll; + } + + // for small pages with total width less then width of the viewport + if(xScroll < windowWidth){ + pageWidth = windowWidth; + } else { + pageWidth = xScroll; + } + + arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight); + return arrayPageSize; + } + +} Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.js ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.js ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/popup.js ------------------------------------------------------------------------------ svn:mime-type = text/plain |
«
Return to OFBiz - Commits
|
1 view|%1 views
| Free forum by Nabble | Edit this page |