mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-04-29 10:54:44 +00:00
refactor(jqLite): remove jqLite show/hide support
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.
This commit is contained in:
parent
4ba35eb97e
commit
4c8eaa1eb0
6 changed files with 2 additions and 95 deletions
|
|
@ -1,9 +1,3 @@
|
||||||
@namespace doc url("http://docs.angularjs.org/");
|
|
||||||
|
|
||||||
doc\:example {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.doc-example {
|
ul.doc-example {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,6 @@
|
||||||
|
|
||||||
angular.widget('doc:example', function(element){
|
angular.widget('doc:example', function(element){
|
||||||
this.descend(true); //compile the example code
|
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
|
//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!
|
//jqlite instead. jqlite's find() method currently supports onlt getElementsByTagName!
|
||||||
|
|
@ -53,7 +52,6 @@
|
||||||
|
|
||||||
element.html('');
|
element.html('');
|
||||||
element.append(tabs);
|
element.append(tabs);
|
||||||
element.show();
|
|
||||||
|
|
||||||
var script = (exampleSrc.match(/<script[^\>]*>([\s\S]*)<\/script>/) || [])[1] || '';
|
var script = (exampleSrc.match(/<script[^\>]*>([\s\S]*)<\/script>/) || [])[1] || '';
|
||||||
try {
|
try {
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,6 @@ var _undefined = undefined,
|
||||||
$boolean = 'boolean',
|
$boolean = 'boolean',
|
||||||
$console = 'console',
|
$console = 'console',
|
||||||
$date = 'date',
|
$date = 'date',
|
||||||
$display = 'display',
|
|
||||||
$element = 'element',
|
$element = 'element',
|
||||||
$function = 'function',
|
$function = 'function',
|
||||||
$length = 'length',
|
$length = 'length',
|
||||||
|
|
|
||||||
|
|
@ -738,7 +738,7 @@ angularDirective("ng:class-even", ngClass(function(i){return i % 2 === 1;}));
|
||||||
angularDirective("ng:show", function(expression, element){
|
angularDirective("ng:show", function(expression, element){
|
||||||
return function(element){
|
return function(element){
|
||||||
this.$onEval(function(){
|
this.$onEval(function(){
|
||||||
toBoolean(this.$eval(expression)) ? element.show() : element.hide();
|
element.css('display', toBoolean(this.$eval(expression)) ? '' : 'none');
|
||||||
}, element);
|
}, element);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
@ -779,7 +779,7 @@ angularDirective("ng:show", function(expression, element){
|
||||||
angularDirective("ng:hide", function(expression, element){
|
angularDirective("ng:hide", function(expression, element){
|
||||||
return function(element){
|
return function(element){
|
||||||
this.$onEval(function(){
|
this.$onEval(function(){
|
||||||
toBoolean(this.$eval(expression)) ? element.hide() : element.show();
|
element.css('display', toBoolean(this.$eval(expression)) ? 'none' : '');
|
||||||
}, element);
|
}, element);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -47,8 +47,6 @@
|
||||||
* - [text()](http://api.jquery.com/text/)
|
* - [text()](http://api.jquery.com/text/)
|
||||||
* - [trigger()](http://api.jquery.com/trigger/)
|
* - [trigger()](http://api.jquery.com/trigger/)
|
||||||
* - [eq()](http://api.jquery.com/eq/)
|
* - [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
|
* ## Additionally these methods extend the jQuery and are available in both jQuery and jQuery lite
|
||||||
* version:
|
* version:
|
||||||
|
|
@ -456,32 +454,6 @@ forEach({
|
||||||
return element.getElementsByTagName(selector);
|
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
|
clone: JQLiteClone
|
||||||
}, function(fn, name){
|
}, function(fn, name){
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -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() {
|
describe('eq', function() {
|
||||||
it('should select the nth element ', function() {
|
it('should select the nth element ', function() {
|
||||||
var element = jqLite('<div><span>aa</span></div><div><span>bb</span></div>');
|
var element = jqLite('<div><span>aa</span></div><div><span>bb</span></div>');
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue