feat(jqlite): added show(),hide() and eq() methods to jqlite

- add those three methods to jqlite

3 files changed, 106 insertions, 2 deletions

diff --git a/src/jqLite.js b/src/jqLite.js
index d4948f22..9fdb31dc 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 c920a250..8dd66d36 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('<div></div>');
+      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('<div></div>');
+      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('<div style="display:inline">xx</div>');
+      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('<div><span>aa</span></div><div><span>bb</span></div>');
+      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 0b22b2ae..34e1710b 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';
 }