Author: pyaschenko Date: 2010-10-14 06:21:53 -0400 (Thu, 14 Oct 2010) New Revision: 19567 Added: sandbox/trunk/prototypes/calendar/JQuerySpinBtn.js Modified: sandbox/trunk/prototypes/calendar/calendar.js sandbox/trunk/prototypes/calendar/jquery.position.js sandbox/trunk/prototypes/calendar/test.html Log: https://jira.jboss.org/browse/RF-9152 https://jira.jboss.org/browse/RF-9168 bug fixing spinner was added position fixing Added: sandbox/trunk/prototypes/calendar/JQuerySpinBtn.js =================================================================== --- sandbox/trunk/prototypes/calendar/JQuerySpinBtn.js (rev 0) +++ sandbox/trunk/prototypes/calendar/JQuerySpinBtn.js 2010-10-14 10:21:53 UTC (rev 19567) @@ -0,0 +1,295 @@ +/* SpinButton control + * + * Adds bells and whistles to any ordinary textbox to + * make it look and feel like a SpinButton Control. + * + * Originally written by George Adamson, Software Unity (george.jquery(a)softwareunity.com) August 2006. + * - Added min/max options + * - Added step size option + * - Added bigStep (page up/down) option + * + * Modifications made by Mark Gibson, (mgibson(a)designlinks.net) September 2006: + * - Converted to jQuery plugin + * - Allow limited or unlimited min/max values + * - Allow custom class names, and add class to input element + * - Removed global vars + * - Reset (to original or through config) when invalid value entered + * - Repeat whilst holding mouse button down (with initial pause, like keyboard repeat) + * - Support mouse wheel in Firefox + * - Fix double click in IE + * - Refactored some code and renamed some vars + * + * Tested in IE6, Opera9, Firefox 1.5 + * v1.0 11 Aug 2006 - George Adamson - First release + * v1.1 Aug 2006 - George Adamson - Minor enhancements + * v1.2 27 Sep 2006 - Mark Gibson - Major enhancements + * v1.3a 28 Sep 2006 - George Adamson - Minor enhancements + * rf1.3a 15 Nov 2007 - Pavel Yaschenko - some changes + + Sample usage: + + // Create group of settings to initialise spinbutton(s). (Optional) + var myOptions = { + min: 0, // Set lower limit. + max: 100, // Set upper limit. + step: 1, // Set increment size. + spinClass: mySpinBtnClass, // CSS class to style the spinbutton. (Class also specifies url of the up/down button image.) + upClass: mySpinUpClass, // CSS class for style when mouse over up button. + downClass: mySpinDnClass // CSS class for style when mouse over down button. + } + + $(document).ready(function(){ + + // Initialise INPUT element(s) as SpinButtons: (passing options if desired) + $("#myInputElement").SpinButton(myOptions); + + }); + + */ +var sbjQuery = jQuery; +sbjQuery.fn.SpinButton = function(cfg){ + return this.each(function(){ + + // Apply specified options or defaults: + // (Ought to refactor this some day to use $.extend() instead) + this.spinCfg = { + //min: cfg && cfg.min ? Number(cfg.min) : null, + //max: cfg && cfg.max ? Number(cfg.max) : null, + min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, // Fixes bug with min:0 + max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null, + step: cfg && cfg.step ? Number(cfg.step) : 1, + page: cfg && cfg.page ? Number(cfg.page) : 10, + upClass: cfg && cfg.upClass ? cfg.upClass : 'up', + downClass: cfg && cfg.downClass ? cfg.downClass : 'down', + reset: cfg && cfg.reset ? cfg.reset : this.value, + delay: cfg && cfg.delay ? Number(cfg.delay) : 500, + interval: cfg && cfg.interval ? Number(cfg.interval) : 100, + _btn_width: 20, + _btn_height: 12, + _direction: null, + _delay: null, + _repeat: null, + + digits: cfg && cfg.digits ? Number(cfg.digits) : 1 + }; + + this.adjustValue = function(i){ + var v = this.value.toLowerCase(); + if (v=="am") + { + this.value="PM"; + return; + } + else if (v=="pm") { + this.value="AM"; + return; + } + v = (isNaN(this.value) ? this.spinCfg.reset : Number(this.value)) + Number(i); + if (this.spinCfg.min !== null) v = (v<this.spinCfg.min ? (this.spinCfg.max != null ? this.spinCfg.max : this.spinCfg.min) : v); + if (this.spinCfg.max !== null) v = (v>this.spinCfg.max ? (this.spinCfg.min != null ? this.spinCfg.min : this.spinCfg.max) : v); + + var value = String(v); + while (value.length<this.spinCfg.digits) value="0"+value; + + this.value = value; + }; + + sbjQuery(this) +// .addClass(cfg && cfg.spinClass ? cfg.spinClass : 'spin-button') +// +// .mousemove(function(e){ +// // Determine which button mouse is over, or not (spin direction): +// var x = e.pageX || e.x; +// var y = e.pageY || e.y; +// var el = e.target || e.srcElement; +// var direction = +// (x > coord(el,'offsetLeft') + el.offsetWidth - this.spinCfg._btn_width) +// ? ((y < coord(el,'offsetTop') + this.spinCfg._btn_height) ? 1 : -1) : 0; +// +// if (direction !== this.spinCfg._direction) { +// // Style up/down buttons: +// switch(direction){ +// case 1: // Up arrow: +// sbjQuery(this).removeClass(this.spinCfg.downClass).addClass(this.spinCfg.upClass); +// break; +// case -1: // Down arrow: +// sbjQuery(this).removeClass(this.spinCfg.upClass).addClass(this.spinCfg.downClass); +// break; +// default: // Mouse is elsewhere in the textbox +// sbjQuery(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass); +// } +// +// // Set spin direction: +// this.spinCfg._direction = direction; +// } +// }) +// +// .mouseout(function(){ +// // Reset up/down buttons to their normal appearance when mouse moves away: +// sbjQuery(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass); +// this.spinCfg._direction = null; +// }) + +// .mousedown(function(e){ +// if (this.spinCfg._direction != 0) { +// // Respond to click on one of the buttons: +// var self = this; +// var adjust = function() { +// self.adjustValue(self.spinCfg._direction * self.spinCfg.step); +// }; +// +// adjust(); +// +// // Initial delay before repeating adjustment +// self.spinCfg._delay = window.setTimeout(function() { +// adjust(); +// // Repeat adjust at regular intervals +// self.spinCfg._repeat = window.setInterval(adjust, self.spinCfg.interval); +// }, self.spinCfg.delay); +// } +// }) +// +// .mouseup(function(e){ +// // Cancel repeating adjustment +// window.clearInterval(this.spinCfg._repeat); +// window.clearTimeout(this.spinCfg._delay); +// }) +// +// .dblclick(function(e) { +// if (sbjQuery.browser.msie) +// this.adjustValue(this.spinCfg._direction * this.spinCfg.step); +// }) + + .keydown(function(e){ + // Respond to up/down arrow keys. + switch(e.keyCode){ + case 38: this.adjustValue(this.spinCfg.step); break; // Up + case 40: this.adjustValue(-this.spinCfg.step); break; // Down + case 33: this.adjustValue(this.spinCfg.page); break; // PageUp + case 34: this.adjustValue(-this.spinCfg.page); break; // PageDown + } + }) + + .bind("mousewheel", function(e){ + // Respond to mouse wheel in IE. (It returns up/dn motion in multiples of 120) + if (e.wheelDelta >= 120) + this.adjustValue(this.spinCfg.step); + else if (e.wheelDelta <= -120) + this.adjustValue(-this.spinCfg.step); + + e.preventDefault(); + }) + + .change(function(e){ + this.adjustValue(0); + }); + + var self = this; + + var btnUp = document.getElementById(this.id + 'BtnUp'); + sbjQuery(btnUp) + .mousedown(function(e){ + // Respond to click on one of the buttons: + var adjust = function() { + self.adjustValue(self.spinCfg.step); + }; + + adjust(); + + // Initial delay before repeating adjustment + self.spinCfg._delay = window.setTimeout(function() { + adjust(); + // Repeat adjust at regular intervals + self.spinCfg._repeat = window.setInterval(adjust, self.spinCfg.interval); + }, self.spinCfg.delay); + self.spinCfg._repeater = true; + return false; + }) + + .mouseup(function(e){ + // Cancel repeating adjustment + self.spinCfg._repeater = false; + window.clearInterval(self.spinCfg._repeat); + window.clearTimeout(self.spinCfg._delay); + }) + + .dblclick(function(e) { + if (sbjQuery.browser.msie) + self.adjustValue(self.spinCfg.step); + }) + .mouseout(function(e){ + // Cancel repeating adjustment + if (self.spinCfg._repeater) + { + self.spinCfg._repeater = false + window.clearInterval(self.spinCfg._repeat); + window.clearTimeout(self.spinCfg._delay); + } + }); + + var btnDown = document.getElementById(this.id + 'BtnDown'); + sbjQuery(btnDown) + .mousedown(function(e){ + // Respond to click on one of the buttons: + var adjust = function() { + self.adjustValue(-self.spinCfg.step); + }; + + adjust(); + + // Initial delay before repeating adjustment + self.spinCfg._delay = window.setTimeout(function() { + adjust(); + // Repeat adjust at regular intervals + self.spinCfg._repeat = window.setInterval(adjust, self.spinCfg.interval); + }, self.spinCfg.delay); + self.spinCfg._repeater = true; + return false; + }) + + .mouseup(function(e){ + // Cancel repeating adjustment + self.spinCfg._repeater = false; + window.clearInterval(self.spinCfg._repeat); + window.clearTimeout(self.spinCfg._delay); + }) + + .dblclick(function(e) { + if (sbjQuery.browser.msie) + self.adjustValue(-self.spinCfg.step); + }) + .mouseout(function(e){ + // Cancel repeating adjustment + if (self.spinCfg._repeater) + { + self.spinCfg._repeater = false + window.clearInterval(self.spinCfg._repeat); + window.clearTimeout(self.spinCfg._delay); + } + }); + + + if (this.addEventListener) { + // Respond to mouse wheel in Firefox + this.addEventListener('DOMMouseScroll', function(e) { + if (e.detail > 0) + this.adjustValue(-this.spinCfg.step); + else if (e.detail < 0) + this.adjustValue(this.spinCfg.step); + + e.preventDefault(); + }, false); + } + }); + + function coord(el,prop) { + var c = el[prop], b = document.body; + + while ((el = el.offsetParent) && (el != b)) { + if (!sbjQuery.browser.msie || (el.currentStyle.position != 'relative')) + c += el[prop]; + } + + return c; + } +}; Modified: sandbox/trunk/prototypes/calendar/calendar.js =================================================================== --- sandbox/trunk/prototypes/calendar/calendar.js 2010-10-14 10:11:23 UTC (rev 19566) +++ sandbox/trunk/prototypes/calendar/calendar.js 2010-10-14 10:21:53 UTC (rev 19567) @@ -2,6 +2,8 @@ window.LOG = {warn:function(){}}; }*/ +// TODO: try to change RichFaces.$ to $$ if possible + (function ($, rf) { rf.ui = rf.ui || {}; @@ -36,7 +38,7 @@ var onmouseover = "jQuery(this).removeClass('rich-calendar-tool-btn-press');"; var onmouseout = "jQuery(this).addClass('rich-calendar-tool-btn-press');"; - var onclick = "RichFaces.$$('calendar',this).showTimeEditor();return true;"; + var onclick = "RichFaces.$$('Calendar',this).showTimeEditor();return true;"; var markup = calendar.params.disabled || calendar.params.readonly ? new E('div', {'class': 'rich-calendar-tool-btn-disabled'}, [new ET(text)]) : new E('div', {'class': 'rich-calendar-tool-btn rich-calendar-tool-btn-hover rich-calendar-tool-btn-press', 'onclick': onclick, @@ -242,8 +244,8 @@ dayStyleClass: function (context) {return "";}, showHeader: true, showFooter: true, - direction: "bottom-right", - jointPoint: "bottom-left", + direction: "AA", + jointPoint: "AA", popup: true, boundaryDatesMode: "inactive", todayControlMode: "select", @@ -634,7 +636,7 @@ createTimeEditorLayout: function(editor) { - Element.insert(this.EDITOR_LAYOUT_SHADOW_ID, {after:this.evaluateMarkup(CalendarView.timeEditorLayout, this.calendarContext)}); + $(rf.getDomElement(this.EDITOR_LAYOUT_SHADOW_ID)).after(this.evaluateMarkup(CalendarView.timeEditorLayout, this.calendarContext)); var th=rf.getDomElement(this.id+'TimeHours'); var ts; @@ -662,14 +664,12 @@ var button2 = rf.getDomElement(buttonID2); editor.style.visibility = "hidden"; editor.style.display = ""; - var width1 = Richfaces.Calendar.getOffsetDimensions(button1.firstChild).width; - var width2 = Richfaces.Calendar.getOffsetDimensions(button2.firstChild).width; + var width1 = $(button1.firstChild).width(); + var width2 = $(button2.firstChild).width(); editor.style.display = "none"; editor.style.visibility = ""; - - var styleWidth = Richfaces.getComputedStyleSize(button1,'width') - if (width1>styleWidth || width2>styleWidth) + if (width1!=width2) { button1.style.width = button2.style.width = (width1>width2 ? width1 : width2)+"px"; } @@ -724,7 +724,7 @@ '</td>'; - Element.insert(this.EDITOR_LAYOUT_SHADOW_ID, {after:htmlBegin+htmlContent+htmlEnd}); + $(rf.getDomElement(this.EDITOR_LAYOUT_SHADOW_ID)).after(htmlBegin+htmlContent+htmlEnd); $(rf.getDomElement(this.dateEditorMonthID)).addClass('rich-calendar-editor-btn-selected'); @@ -893,12 +893,12 @@ if (this.params.showInput) { - base = baseInput; + base = base.children; } else { base = baseButton; }; - $(element).setPosition(base, {type:"TOOLTIP", from: this.params.jointPoint, to:this.params.direction, offset: this.popupOffset}).show(); + $(element).setPosition(base, {type:"DROPDOWN", from: this.params.jointPoint, to:this.params.direction, offset: this.popupOffset}).show(); this.isVisible = true; @@ -1683,15 +1683,21 @@ this.doCollapse(); }, - setEditorPosition: function (element, editor, shadow) + clonePosition: function (source, elements, offset) { - element; - - var dim = Richfaces.Calendar.getOffsetDimensions(element); - editor.style.width = shadow.style.width = dim.width + 'px'; - editor.style.height = shadow.style.height = dim.height + 'px'; - - Richfaces.Calendar.clonePosition([editor,shadow], element); + var jqe = $(source); + if (!elements.length) elements = [elements]; + offset = offset || {left:0,top:0}; + var width = jqe.outerWidth()+"px", height = jqe.outerHeight()+"px"; + var left = jqe.css("left")+offset.left+"px", top = jqe.css("top")+offset.top+"px"; + var element; + for (var i = 0; i<elements.length;i++) { + element = elements[i]; + element.style.width = width; + element.style.height = height; + element.style.left = left; + element.style.top = top; + } }, showTimeEditor: function() @@ -1706,7 +1712,7 @@ var editor_shadow = rf.getDomElement(this.EDITOR_SHADOW_ID); - this.setEditorPosition(rf.getDomElement(this.id), editor, editor_shadow); + this.clonePosition(rf.getDomElement(this.id), [editor, editor_shadow]); this.updateTimeEditor(); @@ -1714,7 +1720,7 @@ $(editor).show(); - Element.clonePosition(this.EDITOR_LAYOUT_SHADOW_ID, this.TIME_EDITOR_LAYOUT_ID, {offsetLeft: 3, offsetTop: 3}); + this.clonePosition(rf.getDomElement(this.TIME_EDITOR_LAYOUT_ID), rf.getDomElement(this.EDITOR_LAYOUT_SHADOW_ID), {left: 3, top: 3}); this.isEditorVisible = true; }, @@ -1769,12 +1775,12 @@ var editor_shadow = rf.getDomElement(this.EDITOR_SHADOW_ID); - this.setEditorPosition(rf.getDomElement(this.id), editor, editor_shadow); + this.clonePosition(rf.getDomElement(this.id), [editor, editor_shadow]); $(editor_shadow).show(); $(editor).show(); - Element.clonePosition(this.EDITOR_LAYOUT_SHADOW_ID, this.DATE_EDITOR_LAYOUT_ID, {offsetLeft: 3, offsetTop: 3}); + this.clonePosition(rf.getDomElement(this.DATE_EDITOR_LAYOUT_ID), rf.getDomElement(this.EDITOR_LAYOUT_SHADOW_ID), {left: 3, top: 3}); this.isEditorVisible = true; }, Modified: sandbox/trunk/prototypes/calendar/jquery.position.js =================================================================== --- sandbox/trunk/prototypes/calendar/jquery.position.js 2010-10-14 10:11:23 UTC (rev 19566) +++ sandbox/trunk/prototypes/calendar/jquery.position.js 2010-10-14 10:21:53 UTC (rev 19567) @@ -67,7 +67,7 @@ var stype = typeof source; if (stype == "object" || stype == "string") { var rect = {}; - if (stype == "string" || source.nodeType || source instanceof jQuery) { + if (stype == "string" || source.nodeType || source instanceof jQuery || typeof source.length!="undefined") { rect = getElementRect(source); } else if (source.type) { rect = getPointerRect(source); @@ -135,19 +135,32 @@ function getElementRect (element) { var jqe = $(element); var offset = jqe.offset(); - var rect = {width: jqe.width(), height: jqe.height(), left: Math.floor(offset.left), top: Math.floor(offset.top)}; - /*if (jge.length>1) { + var rect = {width: jqe.outerWidth(), height: jqe.outerHeight(), left: Math.floor(offset.left), top: Math.floor(offset.top)}; + if (jqe.length>1) { var width, height, offset; var e; for (var i=1;i<jqe.length;i++) { e = jqe.eq(i); + if (e.css('display')=="none") continue; + width = e.outerWidth(); + height = e.outerHeight(); offset = e.offset(); + var d = rect.left - offset.left; + if (d<0) { + rect.width = (width > rect.width) ? width : rect.width - d; + } else { + if (d + width > rect.width) rect.width = d + width; + } + var d = rect.top - offset.top; + if (d<0) { + rect.height = (height > rect.height) ? height : rect.height - d; + } else { + if (d + height > rect.height) rect.height = d + height; + } if (offset.left < rect.left) rect.left = offset.left; if (offset.top < rect.top) rect.top = offset.top; - width = e.width(); height = e.height(); - if (rect.left + width > rect) } - }*/ + } return rect; /* Modified: sandbox/trunk/prototypes/calendar/test.html =================================================================== --- sandbox/trunk/prototypes/calendar/test.html 2010-10-14 10:11:23 UTC (rev 19566) +++ sandbox/trunk/prototypes/calendar/test.html 2010-10-14 10:21:53 UTC (rev 19567) @@ -11,6 +11,7 @@ <script type="text/javascript" src="richfaces.js"></script> <script type="text/javascript" src="richfaces-event.js"></script> <script type="text/javascript" src="richfaces-base-component.js"></script> + <script type="text/javascript" src="JQuerySpinBtn.js"></script> <script type="text/javascript" src="calendar-utils.js"></script> <script type="text/javascript" src="calendar.js"></script> <style>