diff --git a/src/jqLite.js b/src/jqLite.js index d4948f22cbda..9fdb31dc95c7 100644 --- a/src/jqLite.js +++ b/src/jqLite.js @@ -44,6 +44,9 @@ * - [replaceWith()](http://api.jquery.com/replaceWith/) * - [text()](http://api.jquery.com/text/) * - [trigger()](http://api.jquery.com/trigger/) + * - [eq()](http://api.jquery.com/eq/) + * - [show()](http://api.jquery.com/show/) + * - [hide()](http://api.jquery.com/hide/) * * ## Additionally these methods extend the jQuery and are available in both jQuery and jQuery lite * version: @@ -211,11 +214,16 @@ var JQLitePrototype = JQLite.prototype = { // we can not use jqLite since we are not done loading and jQuery could be loaded later. jqLiteWrap(window).bind('load', trigger); // fallback to window.onload for others }, - toString: function(){ + toString: function() { var value = []; forEach(this, function(e){ value.push('' + e);}); return '[' + value.join(', ') + ']'; }, + + eq: function(index) { + return (index >= 0) ? jqLite(this[index]) : jqLite(this[this.length + index]); + }, + length: 0, push: push, sort: [].sort, @@ -463,6 +471,32 @@ forEach({ return element.getElementsByTagName(selector); }, + hide: function(element) { + if (element.style) { + if(element.style.display !=="none" && !JQLiteData(element,"olddisplay")) { + JQLiteData( element, "olddisplay", element.style.display); + } + element.style.display = "none"; + } + }, + + show: function(element) { + if(element.style) { + var display = element.style.display; + if ( display === "" || display === "none" ) { + + // restore the original value overwritten by hide if present or default to nothing (which + // will let browser correctly choose between 'inline' or 'block') + element.style.display = JQLiteData(element, "olddisplay") || ""; + + // if the previous didn't make the element visible then there are some cascading rules that + // are still hiding it, so let's default to 'block', which might be incorrect in case of + // elmenents that should be 'inline' by default, but oh well :-) + if (!isVisible([element])) element.style.display = "block"; + } + } + }, + clone: JQLiteClone }, function(fn, name){ /** diff --git a/test/jqLiteSpec.js b/test/jqLiteSpec.js index c920a2505b68..8dd66d360f02 100644 --- a/test/jqLiteSpec.js +++ b/test/jqLiteSpec.js @@ -507,4 +507,70 @@ describe('jqLite', function(){ expect(innerDiv.html()).toEqual('text'); }); }); + + + describe('hide', function() { + var element; + + afterEach(function() { + if (element) dealoc(element); + }); + + it('should hide the element', function() { + element = jqLite('
'); + expect(isCssVisible(element)).toBe(true); + element.hide(); + expect(isCssVisible(element)).toBe(false); + }); + }); + + + describe('show', function() { + var element; + + afterEach(function() { + if (element) dealoc(element); + element.remove(); + }); + + + it('should show the element ', function() { + element = jqLite('
'); + element[0].style.display = 'none'; + expect(isCssVisible(element)).toBe(false); + element.show(); + expect(isCssVisible(element)).toBe(true); + }); + + + it('should show previously hidden element and preserve the display value', function() { + element = jqLite('
xx
'); + jqLite(document.body).append(element); + element.hide(); + expect(isCssVisible(element)).toBe(false); + element.show(); + expect(element[0].style.display).toBe('inline'); + expect(isCssVisible(element)).toBe(true); + + element[0].style.display = 'block'; + element.hide(); + expect(isCssVisible(element)).toBe(false); + element.show(); + expect(isCssVisible(element)).toBe(true); + + // this totally doesn't make sense, it should be 'block', but jquery (1.4.2+1.6.2) behaves + // this way. + expect(element[0].style.display).toBe('inline'); + }); + }); + + + describe('eq', function() { + it('should select the nth element ', function() { + var element = jqLite('
aa
bb
'); + expect(element.find('span').eq(0).html()).toBe('aa'); + expect(element.find('span').eq(-1).html()).toBe('bb'); + expect(element.find('span').eq(20).length).toBe(0);; + }); + }); }); diff --git a/test/testabilityPatch.js b/test/testabilityPatch.js index 0b22b2aeae70..34e1710b437e 100644 --- a/test/testabilityPatch.js +++ b/test/testabilityPatch.js @@ -274,9 +274,13 @@ function sortedHtml(element, showNgClass) { return html; } + +/** + * This method is a cheap way of testing if css for a given node is not set to 'none'. It doesn't + * actually test if an element is displayed by the browser. Be aware!!! + */ function isCssVisible(node) { var display = node.css('display'); - if (display == 'block') display = ""; return display != 'none'; }