refactor(jqLite): remove jqLite show/hide support

IgorMinar · IgorMinar · commit 4c8eaa1eb05b · 2011-08-19T00:59:44.000-07:00
it turns out that even with our tricks, jqLite#show is not usable in
practice and definitely not on par with jQuery. so rather than
introducing half-baked apis which introduce issues, I'm removing them.

I also removed show/hide uses from docs, since they are not needed.

Breaks jqLite.hide/jqLite.show which are no longer available.
diff --git a/docs/src/templates/doc_widgets.css b/docs/src/templates/doc_widgets.css
@@ -1,9 +1,3 @@
-@namespace doc url("http://docs.angularjs.org/");
-
-doc\:example {
-  display: none;
-}
-
 ul.doc-example {
   list-style-type: none;
   position: relative;
diff --git a/docs/src/templates/doc_widgets.js b/docs/src/templates/doc_widgets.js
@@ -23,7 +23,6 @@
 
   angular.widget('doc:example', function(element){
     this.descend(true); //compile the example code
-    element.hide();
 
     //jQuery find() methods in this widget contain primitive selectors on purpose so that we can use
     //jqlite instead. jqlite's find() method currently supports onlt getElementsByTagName!
@@ -53,7 +52,6 @@
 
     element.html('');
     element.append(tabs);
-    element.show();
 
     var script = (exampleSrc.match(/<script[^\>]*>([\s\S]*)<\/script>/) || [])[1] || '';
     try {
diff --git a/src/Angular.js b/src/Angular.js
@@ -64,7 +64,6 @@ var _undefined        = undefined,
     $boolean          = 'boolean',
     $console          = 'console',
     $date             = 'date',
-    $display          = 'display',
     $element          = 'element',
     $function         = 'function',
     $length           = 'length',
diff --git a/src/directives.js b/src/directives.js
@@ -738,7 +738,7 @@ angularDirective("ng:class-even", ngClass(function(i){return i % 2 === 1;}));
 angularDirective("ng:show", function(expression, element){
   return function(element){
     this.$onEval(function(){
-      toBoolean(this.$eval(expression)) ? element.show() : element.hide();
+      element.css('display', toBoolean(this.$eval(expression)) ? '' : 'none');
     }, element);
   };
 });
@@ -779,7 +779,7 @@ angularDirective("ng:show", function(expression, element){
 angularDirective("ng:hide", function(expression, element){
   return function(element){
     this.$onEval(function(){
-      toBoolean(this.$eval(expression)) ? element.hide() : element.show();
+      element.css('display', toBoolean(this.$eval(expression)) ? 'none' : '');
     }, element);
   };
 });
diff --git a/src/jqLite.js b/src/jqLite.js
@@ -47,8 +47,6 @@
  * - [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:
@@ -456,32 +454,6 @@ 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
@@ -511,62 +511,6 @@ describe('jqLite', function(){
   });
 
 
-  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>');
