From d046b352bf3eb8ecf83a254a1e432bc921a01c49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20B=C5=82a=C5=BCejewicz=20=28Peter=20Blazejewicz=29?= Date: Thu, 6 Aug 2020 02:07:30 +0200 Subject: [PATCH] feat(headroom.js): correctted module definition (#46487) This commit corrects definition of `headroom.js` to support proper NPM name and also adds some more details to the implementation. Authors of `types/headroom` are left as the owners of original implementation in this PR. Changes: - package name - DT header details - default settings for linter/styles - maintainer added https://github.com/WickyNilliams/headroom.js https://github.com/WickyNilliams/headroom.js/blob/master/src/Headroom.js See tests of the 'types/headroom' version, which does not match package name: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/6970a8fffa0743f0f5fc918e187fa37f0d2675df/types/headroom/headroom-tests.ts#L1 and the header of current `types/headroom`: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/6970a8fffa0743f0f5fc918e187fa37f0d2675df/types/headroom/index.d.ts#L1 The types should be `types/headroom.js`: https://www.npmjs.com/package/headroom.js https://github.com/DefinitelyTyped/DefinitelyTyped/blob/6970a8fffa0743f0f5fc918e187fa37f0d2675df/types/headroom/tslint.json#L8 Thanks! --- types/headroom.js/headroom.js-tests.ts | 33 +++++++ types/headroom.js/index.d.ts | 119 +++++++++++++++++++++++++ types/headroom.js/tsconfig.json | 24 +++++ types/headroom.js/tslint.json | 1 + 4 files changed, 177 insertions(+) create mode 100644 types/headroom.js/headroom.js-tests.ts create mode 100644 types/headroom.js/index.d.ts create mode 100644 types/headroom.js/tsconfig.json create mode 100644 types/headroom.js/tslint.json diff --git a/types/headroom.js/headroom.js-tests.ts b/types/headroom.js/headroom.js-tests.ts new file mode 100644 index 0000000000..d5d3113d50 --- /dev/null +++ b/types/headroom.js/headroom.js-tests.ts @@ -0,0 +1,33 @@ +import Headroom = require('headroom.js'); + +new Headroom(document.getElementById('siteHead')!); + +new Headroom(document.getElementsByClassName('siteHead')[0]); + +new Headroom(document.getElementsByClassName('siteHead')[0], { + tolerance: 34, +}); + +new Headroom(document.getElementsByClassName('siteHead')[0], { + classes: { + bottom: 'headroom--bottom', + frozen: 'headeroom--frozen', + initial: 'headroom', + notBottom: 'headroom--not-bottom', + notTop: 'headeroom--not-top', + pinned: 'headeroom--pinned', + top: 'headroom--top', + unpinned: 'headroom--unpinned', + }, + offset: 500, +}); + +const header = document.querySelector('header')!; + +const headroom = new Headroom(header); +headroom.init(); +headroom.freeze(); +headroom.pin(); +headroom.unpin(); +headroom.unfreeze(); +headroom.destroy(); diff --git a/types/headroom.js/index.d.ts b/types/headroom.js/index.d.ts new file mode 100644 index 0000000000..0d8e9fb7b6 --- /dev/null +++ b/types/headroom.js/index.d.ts @@ -0,0 +1,119 @@ +// Type definitions for headroom.js 0.11 +// Project: http://wicky.nillia.ms/headroom.js +// Definitions by: Jakub Olek +// Juninho Cruz +// Piotr Błażejewicz +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +export as namespace Headroom; + +/** + * UI enhancement for fixed headers. + * Hides header when scrolling down + * Shows header when scrolling up + */ +declare class Headroom { + constructor(element: HTMLElement | Node, options?: headroom.HeadroomOptions); + + static options: headroom.HeadroomOptions; + static cutsTheMustard: boolean; + + /** initialise */ + init(): void; + + /** destroy the headroom instance, removing event listeners and any classes added */ + destroy(): void; + + /** forcibly set the headroom instance's state to pinned */ + pin(): void; + + /** forcibly set the headroom instance's state to unpinned */ + unpin(): void; + + /** freeze the headroom instance's state (pinned or unpinned), and no longer respond to scroll events */ + freeze(): void; + + /** resume responding to scroll events */ + unfreeze(): void; +} + +declare namespace headroom { + interface HeadroomOptions { + /** + * vertical offset in px before element is first unpinned + * @default 0 + */ + offset?: number; + /** scroll tolerance in px before state changes or you can specify tolerance individually for up/down scroll */ + tolerance?: Tolerance | number; + /** css classes to apply multiple classes are also supported with a space-separated list */ + classes?: { + /** + * when element is initialised + * @default 'headroom' + */ + initial?: string; + /** + * when scrolling up + * @default 'headroom--pinned' + */ + pinned?: string; + /** + * when scrolling down + * @default 'headroom--unpinned' + */ + unpinned?: string; + /** + * when above offset + * @default 'headroom--top' + */ + top?: string; + /** + * when below offset + * @default 'headroom--not-top' + */ + notTop?: string; + /** + * when at bottom of scroll area + * @default 'headroom--bottom' + */ + bottom?: string; + /** + * when not at bottom of scroll area + * @default 'headroom--not-bottom' + */ + notBottom?: string; + /** + * when frozen method has been called + * @default 'headroom--frozen' + */ + frozen?: string; + }; + /** + * element to listen to scroll events on + * @default window + */ + scroller?: HTMLElement; + /** callback when pinned, `this` is headroom object */ + onPin?: () => void; + /** callback when unpinned, `this` is headroom object */ + onUnpin?: () => void; + /** callback when above offset, `this` is headroom object */ + onTop?: () => void; + /** callback when below offset, `this` is headroom object */ + onNotTop?: () => void; + /** callback when at bottom of page, `this` is headroom object */ + onBottom?: () => void; + /** callback when moving away from bottom of page, `this` is headroom object */ + onNotBottom?: () => void; + } + + interface Tolerance { + /** @default 0 */ + up?: number; + /** @default 0 */ + down?: number; + } +} + +export = Headroom; diff --git a/types/headroom.js/tsconfig.json b/types/headroom.js/tsconfig.json new file mode 100644 index 0000000000..f035940729 --- /dev/null +++ b/types/headroom.js/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "DOM" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "headroom.js-tests.ts" + ] +} diff --git a/types/headroom.js/tslint.json b/types/headroom.js/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/headroom.js/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }