/*
*
* jqTransform
* by mathieu vilaplana mvilaplana@dfc-e.com
* Designer ghyslain armand garmand@dfc-e.com
*
*
* Version 1.0 25.09.08
* Version 1.1 06.08.09
* 
* Version 1.2 10.12.10 (Modified by Laurence King)
* Added
- Keypress events to operate form elements
- Select drops up or down depending on position on page
- New elements inherit classes off original elements, thus allowing for different styles on the same form
- Custom elements are now all optional
- fixed bug in jqTransformGetLabel
* 
* 
******************************************** */
(function ($) { var n = false; var o = function (a) { a = a.replace(/^url\((.*)\)/, '$1').replace(/^\"(.*)\"$/, '$1'); var b = new Image(); b.src = a.replace(/\.([a-zA-Z]*)$/, '-hover.$1'); var c = new Image(); c.src = a.replace(/\.([a-zA-Z]*)$/, '-focus.$1') }; var p = function (a) { var b = $(a.get(0).form); var c = a.next(); if (!c.is('label')) { c = a.prev(); if (!c.is('label')) { var d = a.attr('id'); if (d) c = b.find('label[for="' + d + '"]') } } if (c.is('label')) return c.css('cursor', 'pointer'); return false }; var q = function (b) { var c = $('.jqTransformSelectWrapper ul:visible'); c.each(function () { var a = $(this).parents(".jqTransformSelectWrapper:first").find("select").get(0); if (!(b && a.oLabel && a.oLabel.get(0) == b.get(0))) { $(this).hide(); $('.jqTransformSelectWrapper').css({ zIndex: '' }) } }) }; var r = function (a) { var b = ot = 0; if (a.offsetParent) { do { b += a.offsetLeft; ot += a.offsetTop } while (a = a.offsetParent) } return { x: b, y: ot} }; var s = function (a) { if ($(a.target).parents('.jqTransformSelectWrapper').length === 0) { q($(a.target)) } }; var t = function () { $(document).mousedown(s) }; var u = function (f) { var a; $('.jqTransformSelectWrapper select', f).each(function () { a = (this.selectedIndex < 0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function () { $('a:eq(' + a + ')', this).click() }) }); $('a.jqTransformCheckbox, a.jqTransformRadio', f).removeClass('jqTransformChecked'); $('input:checkbox, input:radio', f).each(function () { if (this.checked) { $('a', $(this).parent()).addClass('jqTransformChecked') } }) }; $.fn.jqTransInputButton = function () { return this.each(function () { var a = $('<button id="' + this.id + '" name="' + this.name + '" type="' + this.type + '" class="' + this.className + ' jqTransformButton"><span><span>' + $(this).attr('value') + '</span></span>').hover(function () { a.addClass('jqTransformButton_hover') }, function () { a.removeClass('jqTransformButton_hover') }).mousedown(function () { a.addClass('jqTransformButton_click') }).mouseup(function () { a.removeClass('jqTransformButton_click') }); $(this).replaceWith(a) }) }; $.fn.jqTransInputText = function () { return this.each(function () { var a = $(this); if (a.hasClass('jqtranformdone') || !a.is('input')) return; a.addClass('jqtranformdone'); var b = p($(this)); b && b.bind('click', function () { a.focus() }); var c = a.width(); if (a.attr('size')) { c = a.attr('size') * 10; a.css('width', c) } a.addClass("jqTransformInput").wrap('<div class="jqTransformInputWrapper"><div class="jqTransformInputInner"><div></div></div></div>'); var d = a.parent().parent().parent(); d.css("width", c + 10); a.focus(function () { d.addClass("jqTransformInputWrapper_focus") }).blur(function () { d.removeClass("jqTransformInputWrapper_focus") }).hover(function () { d.addClass("jqTransformInputWrapper_hover") }, function () { d.removeClass("jqTransformInputWrapper_hover") }); $.browser.safari && d.addClass('jqTransformSafari'); $.browser.safari && a.css('width', d.width() + 16); this.wrapper = d }) }; $.fn.jqTransCheckBox = function () { return this.each(function () { if ($(this).hasClass('jqTransformHidden')) { return } var a = $(this); var b = this; var c = p(a); c && c.click(function () { d.trigger('click') }); var d = $('<a href="#" class="jqTransformCheckbox"></a>'); a.addClass('jqTransformHidden').wrap('<span class="jqTransformCheckboxWrapper"></span>').parent().prepend(d); a.change(function () { this.checked && d.addClass('jqTransformChecked') || d.removeClass('jqTransformChecked'); return true }); d.keypress(function (e) { if (e.charCode == 32 || e.keyCode == 32) { d.click(); return false } }).click(function () { if (a.attr('disabled')) { return false } a.trigger('click').trigger("change"); return false }); this.checked && d.addClass('jqTransformChecked') }) }; $.fn.jqTransRadio = function () { return this.each(function () { if ($(this).hasClass('jqTransformHidden')) { return } var a = $(this); var b = this; oLabel = p(a); oLabel && oLabel.click(function () { c.trigger('click') }); var c = $('<a href="#" class="jqTransformRadio" rel="' + this.name + '"></a>'); a.addClass('jqTransformHidden').wrap('<span class="jqTransformRadioWrapper"></span>').parent().prepend(c); a.change(function () { b.checked && c.addClass('jqTransformChecked') || c.removeClass('jqTransformChecked'); return true }); c.keypress(function (e) { if (e.charCode == 32 || e.keyCode == 32) { c.click(); return false } }).click(function () { if (a.attr('disabled')) { return false } a.trigger('click').trigger('change'); $('input[name="' + a.attr('name') + '"]', b.form).not(a).each(function () { $(this).attr('type') == 'radio' && $(this).trigger('change') }); return false }); b.checked && c.addClass('jqTransformChecked') }) }; $.fn.jqTransTextarea = function () { return this.each(function () { var a = $(this); if (a.hasClass('jqtransformdone')) { return } a.addClass('jqtransformdone'); oLabel = p(a); oLabel && oLabel.click(function () { a.focus() }); var b = '<table cellspacing="0" cellpadding="0" border="0" class="jqTransformTextarea">'; b += '<tr><td id="jqTransformTextarea-tl"></td><td id="jqTransformTextarea-tm"></td><td id="jqTransformTextarea-tr"></td></tr>'; b += '<tr><td id="jqTransformTextarea-ml">&nbsp;</td><td id="jqTransformTextarea-mm"><div></div></td><td id="jqTransformTextarea-mr">&nbsp;</td></tr>'; b += '<tr><td id="jqTransformTextarea-bl"></td><td id="jqTransformTextarea-bm"></td><td id="jqTransformTextarea-br"></td></tr>'; b += '</table>'; var c = $(b).insertAfter(a).hover(function () { !c.hasClass('jqTransformTextarea-focus') && c.addClass('jqTransformTextarea-hover') }, function () { c.removeClass('jqTransformTextarea-hover') }); a.focus(function () { c.removeClass('jqTransformTextarea-hover').addClass('jqTransformTextarea-focus') }).blur(function () { c.removeClass('jqTransformTextarea-focus') }).appendTo($('#jqTransformTextarea-mm div', c)); this.oTable = c; if ($.browser.safari) { $('#jqTransformTextarea-mm', c).addClass('jqTransformSafariTextarea').find('div').css('height', a.height()).css('width', a.width()) } }) }; $.fn.jqTransSelect = function () { return this.each(function (a) { var b = $(this); if (b.hasClass('jqTransformHidden')) { return } if (b.attr('multiple')) { return } var c = r(this).y; var d = p(b); var f = b.wrap('<div class="jqTransformSelectWrapper ' + b.attr('class') + '-jqT"></div>').addClass('jqTransformHidden').parent().css({ zIndex: '' }); f.prepend('<div><span class="jqTransformSelectBox"></span><a class="jqTransformSelectOpen" href="#"></a></div><ul></ul>'); var g = $('ul', f).css('width', b.width()).hide(); $('option', this).each(function (i) { g.append($('<li><a href="#" index="' + i + '">' + $(this).html() + '</a></li>')) }); g.find('a').keypress(function (e) { if (e.charCode == 32 || e.keyCode == 32) { $(this).click(); return false } }).click(function () { $('a.selected', f).removeClass('selected'); $(this).addClass('selected'); if (b[0].selectedIndex != $(this).attr('index')) { b[0].selectedIndex = $(this).attr('index'); b.change() } b[0].selectedIndex = $(this).attr('index'); $('.jqTransformSelectBox', f).html($(this).html()); g.hide(); f.css({ zIndex: '' }); return false }); $('a:eq(' + this.selectedIndex + ')', g).click(); this.oLabel = d; var h = $('.jqTransformSelectOpen', f); h.keypress(function (e) { if (e.keyCode == 38 || e.charCode == 38) { g.find('a.selected').parent().prev().find('a').click(); return false } else if (e.keyCode == 40 || e.charCode == 40) { g.find('a.selected').parent().next().find('a').click(); return false } else if (e.keyCode == 32 || e.charCode == 32) { h.trigger('click'); return false } }); h.add($('.jqTransformSelectBox', f)).add(d).click(function (e) { if (g.css('display') == 'none') q(); if (b.attr('disabled')) return false; if (!g.is(':visible')) { f.css({ zIndex: 20 - a }); $tempPosX = c - $(window).scrollTop(); if ($(window).height() - $tempPosX < f.height() + 150) g.css({ top: 'auto', bottom: f.height() }); else g.css({ top: f.height(), bottom: 'auto' }); g.slideDown('fast', function () { g.css({ scrollTop: $('a.selected', g).offset().top - g.offset().top }) }) } else { f.css({ zIndex: '' }); g.slideUp('fast') } return false }); var j = b.outerWidth(); var k = $('span:first', f); var l = (j > k.innerWidth()) ? j : f.width(); f.css('width', l); g.css('width', l - 2); k.css({ width: j }); g.css({ display: 'block', visibility: 'hidden' }); var m = ($('li', g).length) * ($('li:first', g).height()); (m < g.height()) && g.css({ height: m, 'overflow': 'hidden' }); g.css({ display: 'none', visibility: 'visible' }) }) }; $.fn.jqTransform = function (c) { var d = $.extend({}, $.fn.jqTransform.defaults, c); return this.each(function () { var b = $(this); if (b.hasClass('jqtransformdone')) return; b.addClass('jqtransformdone'); if (d.replaceButton || d.replaceAll) $('input:submit, input:reset, input[type="button"]', this).jqTransInputButton(); if (d.replaceInput || d.replaceAll) $('input:text, input:password', this).jqTransInputText(); if (d.replaceCheckbox || d.replaceAll) $('input:checkbox', this).jqTransCheckBox(); if (d.replaceRadio || d.replaceAll) $('input:radio', this).jqTransRadio(); if (d.replaceTextarea || d.replaceAll) $('textarea', this).jqTransTextarea(); if (d.replaceSelect || d.replaceAll) { if ($('select', this).jqTransSelect().length > 0) t() } b.bind('reset', function () { var a = function () { u(this) }; window.setTimeout(a, 10) }) }) }; $.fn.jqTransform.defaults = { preloadImg: true, replaceAll: false, replaceCheckbox: false, replaceSelect: false, replaceRadio: false, replaceTextarea: false, replaceInput: false, replaceButton: false} })(jQuery);