diff --git a/docs/rules/no-animate.md b/docs/rules/no-animate.md index 5e2eb0d..92b55ce 100644 --- a/docs/rules/no-animate.md +++ b/docs/rules/no-animate.md @@ -2,7 +2,7 @@ # no-animate -Disallows the [`.animate`](https://api.jquery.com/animate/) method. Use the `allowScroll` option to allow animations which are just used for scrolling. Prefer CSS transitions. +Disallows the [`.animate`](https://api.jquery.com/animate/)/[`.stop`](https://api.jquery.com/stop/)/[`.finish`](https://api.jquery.com/finish/) methods. Use the `allowScroll` option to allow animations which are just used for scrolling. Prefer CSS transitions. 📋 This rule is enabled in `plugin:no-jquery/slim`. @@ -13,6 +13,8 @@ Disallows the [`.animate`](https://api.jquery.com/animate/) method. Use the `all ❌ Examples of **incorrect** code: ```js $( 'div' ).animate(); +$( 'div' ).stop(); +$( 'div' ).finish(); $div.animate(); $( 'div' ).first().animate(); $( 'div' ).append( $( 'input' ).animate() ); @@ -28,6 +30,14 @@ animate(); [].animate(); div.animate(); div.animate; +stop(); +[].stop(); +div.stop(); +div.stop; +finish(); +[].finish(); +div.finish(); +div.finish; ``` ❌ Examples of **incorrect** code with `[{"allowScroll":false}]` options: @@ -39,6 +49,8 @@ $div.animate( { scrollTop: 100 } ); ```js $div.animate(); $div.animate( { scrollTop: 100, width: 300 } ); +$( 'div' ).stop( { scrollTop: 100, scrollLeft: 200 } ); +$( 'div' ).finish( { scrollTop: 100, scrollLeft: 200 } ); ``` ✔️ Examples of **correct** code with `[{"allowScroll":true}]` options: diff --git a/src/rules/no-animate.js b/src/rules/no-animate.js index 6066b8a..3daf83f 100644 --- a/src/rules/no-animate.js +++ b/src/rules/no-animate.js @@ -2,13 +2,15 @@ const utils = require( '../utils.js' ); +const methods = [ 'animate', 'stop', 'finish' ]; + module.exports = { meta: { type: 'suggestion', docs: { description: - 'Disallows the ' + utils.jQueryCollectionLink( 'animate' ) + - ' method. Use the `allowScroll` option to allow animations which are just used for scrolling. Prefer CSS transitions.' + 'Disallows the ' + methods.map( utils.jQueryCollectionLink ).join( '/' ) + + ' methods. Use the `allowScroll` option to allow animations which are just used for scrolling. Prefer CSS transitions.' }, schema: [ { @@ -27,12 +29,12 @@ module.exports = { 'CallExpression:exit': ( node ) => { if ( node.callee.type !== 'MemberExpression' || - node.callee.property.name !== 'animate' + !methods.includes( node.callee.property.name ) ) { return; } const allowScroll = context.options[ 0 ] && context.options[ 0 ].allowScroll; - if ( allowScroll ) { + if ( node.callee.property.name === 'animate' && allowScroll ) { const arg = node.arguments[ 0 ]; // Check properties list has more than just scrollTop/scrollLeft if ( arg && arg.type === 'ObjectExpression' ) { diff --git a/tests/rules/no-animate.js b/tests/rules/no-animate.js index 3815aa8..b116977 100644 --- a/tests/rules/no-animate.js +++ b/tests/rules/no-animate.js @@ -13,6 +13,14 @@ ruleTester.run( 'no-animate', rule, { '[].animate()', 'div.animate()', 'div.animate', + 'stop()', + '[].stop()', + 'div.stop()', + 'div.stop', + 'finish()', + '[].finish()', + 'div.finish()', + 'div.finish', { code: '$div.animate({scrollTop: 100})', options: [ { allowScroll: true } ] @@ -31,6 +39,14 @@ ruleTester.run( 'no-animate', rule, { code: '$("div").animate()', errors: [ error ] }, + { + code: '$("div").stop()', + errors: [ error ] + }, + { + code: '$("div").finish()', + errors: [ error ] + }, { code: '$div.animate()', errors: [ error ] @@ -73,6 +89,16 @@ ruleTester.run( 'no-animate', rule, { code: '$div.animate({scrollTop: 100, width: 300})', options: [ { allowScroll: true } ], errors: [ errorNoScroll ] - } + }, + { + code: '$("div").stop({scrollTop: 100, scrollLeft: 200})', + options: [ { allowScroll: true } ], + errors: [ error ] + }, + { + code: '$("div").finish({scrollTop: 100, scrollLeft: 200})', + options: [ { allowScroll: true } ], + errors: [ error ] + }, ] } );