Skip to content

Commit

Permalink
Add global anchorPlacement setting
Browse files Browse the repository at this point in the history
  • Loading branch information
michalsnik committed Jun 24, 2018
1 parent 676b927 commit a084dd7
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 21 deletions.
75 changes: 75 additions & 0 deletions cypress/integration/settings_anchorPlacement_spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
describe('setting: anchorPlacement', function() {
beforeEach(() => {
cy.visit('/index.html');
cy.viewport(1280, 700);
});

context('global setting', () => {
it('Should be respected by all elements', () => {
cy.initAOS({
offset: 0,
anchorPlacement: 'top-center'
});

cy.get('.aos-animate').should('have.length', 6);

cy.scrollTo(0, 300);
cy.get('.aos-animate').should('have.length', 9);
});

it('Should respect default offset', () => {
cy.initAOS({
offset: 120,
anchorPlacement: 'top-center'
});

cy.get('.aos-animate').should('have.length', 3);

cy.scrollTo(0, 120);
cy.get('.aos-animate').should('have.length', 6);
});
});

context('inline setting', () => {
it('Should override global setting and reset default offset', () => {
cy.document().then(document => {
const el = document.querySelector('[data-id="6"]');
el.dataset.aosAnchorPlacement = 'bottom-center';
});

cy.initAOS({
offset: 400,
anchorPlacement: 'top-center'
});

cy.get('[data-id="6"]').should('not.have.class', 'aos-animate');

cy.scrollTo(0, 290);
cy.get('[data-id="6"]').should('not.have.class', 'aos-animate');

cy.scrollTo(0, 300);
cy.get('[data-id="6"]').should('have.class', 'aos-animate');
});

it('Should respect inline offset', () => {
cy.document().then(document => {
const el = document.querySelector('[data-id="6"]');
el.dataset.aosAnchorPlacement = 'bottom-center';
el.dataset.aosOffset = 100;
});

cy.initAOS({
offset: 400,
anchorPlacement: 'top-center'
});

cy.get('[data-id="6"]').should('not.have.class', 'aos-animate');

cy.scrollTo(0, 300);
cy.get('[data-id="6"]').should('not.have.class', 'aos-animate');

cy.scrollTo(0, 400);
cy.get('[data-id="6"]').should('have.class', 'aos-animate');
});
});
});
11 changes: 10 additions & 1 deletion cypress/plugins/index.js
Original file line number Diff line number Diff line change
@@ -1 +1,10 @@
module.exports = (on, config) => {};
module.exports = (on, config) => {
on('before:browser:launch', (browser = {}, args) => {
console.log(browser, args); // see what all is in here!

if (browser.name === 'chrome') {
args.push('--disable-gpu');
return args;
}
});
};
1 change: 1 addition & 0 deletions src/js/aos.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ let options = {
disable: false,
once: false,
mirror: false,
anchorPlacement: 'top-bottom',
startEvent: 'DOMContentLoaded',
animatedClassName: 'aos-animate',
initClassName: 'aos-init',
Expand Down
7 changes: 4 additions & 3 deletions src/js/helpers/offsetCalculator.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,14 @@
import getOffset from './../libs/offset';
import getInlineOption from './getInlineOption';

export const getPositionIn = (el, defaultOffset) => {
export const getPositionIn = (el, defaultOffset, defaultAnchorPlacement) => {
const windowHeight = window.innerHeight;
const anchor = getInlineOption(el, 'anchor');
const anchorPlacement = getInlineOption(el, 'anchor-placement');
const inlineAnchorPlacement = getInlineOption(el, 'anchor-placement');
const additionalOffset = Number(
getInlineOption(el, 'offset', anchorPlacement ? 0 : defaultOffset)
getInlineOption(el, 'offset', inlineAnchorPlacement ? 0 : defaultOffset)
);
const anchorPlacement = inlineAnchorPlacement || defaultAnchorPlacement;
let finalEl = el;

if (anchor && document.querySelectorAll(anchor)) {
Expand Down
2 changes: 1 addition & 1 deletion src/js/helpers/prepare.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const prepare = function($elements, options) {
}

el.position = {
in: getPositionIn(el.node, options.offset),
in: getPositionIn(el.node, options.offset, options.anchorPlacement),
out: mirror && getPositionOut(el.node, options.offset)
};

Expand Down
51 changes: 35 additions & 16 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,8 @@
"@types/jquery" "*"

"@types/chai@*":
version "4.1.3"
resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.1.3.tgz#b8a74352977a23b604c01aa784f5b793443fb7dc"
version "4.1.4"
resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.1.4.tgz#5ca073b330d90b4066d6ce18f60d57f2084ce8ca"

"@types/chai@4.0.8":
version "4.0.8"
Expand All @@ -121,8 +121,8 @@
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.38.tgz#c1be40aa933723c608820a99a373a16d215a1ca2"

"@types/jquery@*":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.1.tgz#55758d44d422756d6329cbf54e6d41931d7ba28f"
version "3.3.4"
resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.4.tgz#f1850fb9a70041a14ace4f81a7ed782db8548317"

"@types/jquery@3.2.16":
version "3.2.16"
Expand Down Expand Up @@ -152,8 +152,8 @@
"@types/sinon" "*"

"@types/sinon@*":
version "4.3.3"
resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-4.3.3.tgz#97cbbfddc3282b5fd40c7abf80b99db426fd4237"
version "5.0.1"
resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-5.0.1.tgz#a15b36ec42f1f53166617491feabd1734cb03e21"

"@types/sinon@4.0.0":
version "4.0.0"
Expand Down Expand Up @@ -1166,12 +1166,22 @@ code-point-at@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"

color-convert@^1.3.0, color-convert@^1.9.0:
color-convert@^1.3.0:
version "1.9.1"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
dependencies:
color-name "^1.1.1"

color-convert@^1.9.0:
version "1.9.2"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.2.tgz#49881b8fba67df12a96bdf3f56c0aab9e7913147"
dependencies:
color-name "1.1.1"

color-name@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"

color-name@^1.0.0, color-name@^1.1.1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
Expand Down Expand Up @@ -1280,7 +1290,11 @@ convert-source-map@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"

core-js@^2.4.0, core-js@^2.5.0:
core-js@^2.4.0:
version "2.5.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"

core-js@^2.5.0:
version "2.5.6"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.6.tgz#0fe6d45bf3cac3ac364a9d72de7576f4eb221b9d"

Expand Down Expand Up @@ -4143,8 +4157,8 @@ rx-lite@*, rx-lite@^4.0.8:
resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"

rxjs@^5.0.0-beta.11:
version "5.5.10"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.10.tgz#fde02d7a614f6c8683d0d1957827f492e09db045"
version "5.5.11"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.11.tgz#f733027ca43e3bec6b994473be4ab98ad43ced87"
dependencies:
symbol-observable "1.0.1"

Expand All @@ -4156,7 +4170,7 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0,
version "5.1.2"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"

"safer-buffer@>= 2.1.2 < 3":
"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"

Expand Down Expand Up @@ -4338,13 +4352,14 @@ sprintf-js@~1.0.2:
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"

sshpk@^1.7.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.1.tgz#130f5975eddad963f1d56f92b9ac6c51fa9f83eb"
version "1.14.2"
resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.2.tgz#c6fc61648a3d9c4e764fd3fcdf4ea105e492ba98"
dependencies:
asn1 "~0.2.3"
assert-plus "^1.0.0"
dashdash "^1.12.0"
getpass "^0.1.1"
safer-buffer "^2.0.2"
optionalDependencies:
bcrypt-pbkdf "^1.0.0"
ecc-jsbn "~0.1.1"
Expand Down Expand Up @@ -4416,7 +4431,11 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"

stringstream@~0.0.4, stringstream@~0.0.5:
stringstream@~0.0.4:
version "0.0.6"
resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"

stringstream@~0.0.5:
version "0.0.5"
resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"

Expand Down Expand Up @@ -4629,8 +4648,8 @@ uniqs@^2.0.0:
resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"

universalify@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
version "0.1.2"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"

unix-crypt-td-js@^1.0.0:
version "1.0.0"
Expand Down

0 comments on commit a084dd7

Please sign in to comment.