Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ember-hiding-menu

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-hiding-menu - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

.eslintrc.js

82

addon/components/hiding-menu.js
import Ember from 'ember';
import layout from '../templates/components/hiding-menu';
const {run, inject, $} = Ember;
const { run, inject } = Ember;

@@ -9,9 +9,11 @@ export default Ember.Component.extend({

hidingScroll: inject.service(),
tagName: 'nav',
classNames: ['hiding-menu'],
throttleTime: 150,
throttleTime: 30,
tolerance: 0,
topTolerance: 50,
bottomTolerance: 20,
bottomTolerance: 50,
class: null,

@@ -23,6 +25,9 @@ style: null,

hidingScroll: inject.service(),
didInsertElement() {
this.setupScrollMenuToggle();
this.setMenuHeight();
this.setupScrollEventHandling();
this.bodyElement = this.get('hidingScroll.bodyElement');
this.configScrollContainerElement = this.get('hidingScroll.configScrollContainerElement');
},

@@ -34,58 +39,49 @@

hidingScroll.off('scrollingDown', this, this.onScrollDown);
},
},
onScrollUp() {
this.raf(() => this.showMenu());
if (!this.get('isDestroyed')) {
this.raf(() => this.showMenu());
}
},
onScrollDown(newScrollTop) {
this.raf(() => this.hideMenu(newScrollTop));
if (!this.get('isDestroyed')) {
this.raf(() => this.hideMenu(newScrollTop));
}
},
setupScrollMenuToggle(){
let $el = $(this.element);
let $menu = $el;
let hidingScroll = this.get('hidingScroll');
this.set('_menuHeight', this.get('menuHeight') || $menu.outerHeight());
if(parseInt(this.get('throttleTime')) === 150){
hidingScroll.on('scrollingUp', this, this.onScrollUp);
hidingScroll.on('scrollingDown', this, this.onScrollDown);
} else {
hidingScroll.on('scroll', () => {
this.raf(() => {
run.throttle(this, this.onScroll, this.get('throttleTime'));
});
});
setMenuHeight() {
if (!this.get('menuHeight')) {
// if menuHeight is not passed from the outside
this.set('menuHeight', this.element.offsetHeight || this.element.clientHeight);
}
},
setupScrollEventHandling(){
const hidingScroll = this.get('hidingScroll');
hidingScroll.on('scrollingUp', this, () => run.throttle(this, this.onScrollUp, this.get('throttleTime')));
hidingScroll.on('scrollingDown', this, newScrollTop => run.throttle(this, this.onScrollDown, newScrollTop, this.get('throttleTime')));
},
raf(cb){
let fn = window.requestAnimationFrame || window.setTimeout;
fn(cb);
},
onScroll(){
if(!this.get('isDestroyed')){
let newScrollTop = $('html').scrollTop() || $('body').scrollTop();
if(newScrollTop > this.get('bodyScrollTop')){
this.onScrollDown(newScrollTop);
} else {
this.onScrollUp();
}
this.set('bodyScrollTop', newScrollTop);
if ('requestAnimationFrame' in window) {
window.requestAnimationFrame(run.bind(this, cb));
} else {
run.next(this, cb);
}
},
getFixedScrollHeight() {
const containerElement = this.configScrollContainerElement || this.bodyElement;
return containerElement.scrollHeight - window.innerHeight;
},
hideMenu(newScrollTop){
// check for Top Tollerance
if(newScrollTop > (document.body.scrollHeight - window.innerHeight - this.get('bottomTolerance') - this.get('_menuHeight'))){
this.set('isHidden', false);
} else if(!this.get('isHidden') && newScrollTop > this.get('_menuHeight') + this.get('topTolerance')){
this.set('isHidden', true);
if (newScrollTop > (this.getFixedScrollHeight() - this.get('bottomTolerance') - this.get('menuHeight'))) {
this.set('isHidden', false);
} else if (!this.get('isHidden') && newScrollTop > this.get('menuHeight') + this.get('topTolerance')) {
this.set('isHidden', true);
}
},

@@ -92,0 +88,0 @@

56

addon/services/hiding-scroll.js
import Ember from 'ember';
const {$, run} = Ember;
const { run } = Ember;
export default Ember.Service.extend(Ember.Evented, {
init(){
init() {
this._super(...arguments);
$(window).on('scroll.hiding-menu', () => {
if (typeof FastBoot === 'undefined') {
this.saveScrollingElements();
this._setScrollListener();
}
},
_setScrollListener() {
const scrollEventElement = this.configScrollContainerElement || window;
//TODO passive true?
this._scrollListener = this._scrollListener.bind(this);
scrollEventElement.addEventListener('scroll', this._scrollListener, { passive: true });
},
_scrollListener() {
run(() => {
this.trigger('scroll');
// run.throttle(this, this._onScroll, 20);
this._onScroll();

@@ -16,17 +29,36 @@ });

_onScroll(){
let newScrollTop = $('html').scrollTop() || $('body').scrollTop();
if(newScrollTop > this.get('bodyScrollTop')){
this.trigger('scrollingDown', newScrollTop);
} else {
this.trigger('scrollingUp', newScrollTop);
saveScrollingElements() {
const config = Ember.getOwner(this).resolveRegistration('config:environment');
this.configScrollContainerElement = document.querySelector(config.APP.scrollContainerElement);
this.bodyElement = document.querySelector('body');
this.htmlElement = document.querySelector('html');
},
getScrollTop() {
if (this.configScrollContainerElement) {
return this.configScrollContainerElement.scrollTop;
}
this.set('bodyScrollTop', newScrollTop);
return this.bodyElement.scrollTop || this.htmlElement.scrollTop;
},
_onScroll() {
if (!this.get('isDestroyed')) {
let newScrollTop = this.getScrollTop();
if (newScrollTop > this.get('previousScrollTop')) {
this.trigger('scrollingDown', newScrollTop);
} else {
this.trigger('scrollingUp', newScrollTop);
}
this.set('previousScrollTop', newScrollTop);
}
},
destroy() {
this._super(...arguments);
$(window).off('scroll.hiding-menu');
if (typeof FastBoot === 'undefined') {
window.removeEventListener('scroll', this._scrollListener);
}
},
});

37

package.json
{
"name": "ember-hiding-menu",
"version": "0.1.3",
"version": "0.2.0",
"description": "Ember addon which adds functionality to toggle class on scroll down",

@@ -21,24 +21,23 @@ "directories": {

"devDependencies": {
"broccoli-asset-rev": "^2.4.2",
"ember-ajax": "^2.0.1",
"ember-cli": "2.11.0",
"ember-cli-app-version": "^1.0.0",
"ember-cli-dependency-checker": "^1.2.0",
"broccoli-asset-rev": "^2.5.0",
"ember-cli": "2.14.0",
"ember-cli-app-version": "^3.0.0",
"ember-cli-dependency-checker": "^2.0.1",
"ember-cli-eslint": "^4.1.0",
"ember-cli-github-pages": "0.1.2",
"ember-cli-inject-live-reload": "^1.4.0",
"ember-cli-jshint": "^1.0.0",
"ember-cli-qunit": "^2.0.0",
"ember-cli-htmlbars-inline-precompile": "^0.4.0",
"ember-cli-inject-live-reload": "^1.6.0",
"ember-cli-qunit": "^4.0.0",
"ember-cli-release": "^0.2.9",
"ember-cli-sass": "5.5.0",
"ember-cli-sri": "^2.1.0",
"ember-cli-test-loader": "^1.1.0",
"ember-cli-test-loader": "^2.1.0",
"ember-cli-uglify": "^1.2.0",
"ember-data": "^2.7.0",
"ember-disable-prototype-extensions": "^1.1.0",
"ember-composable-helpers": "2.0.3",
"ember-disable-prototype-extensions": "^1.1.2",
"ember-export-application-global": "^1.0.5",
"ember-load-initializers": "^0.5.1",
"ember-native-dom-event-dispatcher": "0.5.4",
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
"ember-resolver": "^2.0.3",
"loader.js": "^4.0.1"
"ember-load-initializers": "^1.0.0",
"ember-native-dom-event-dispatcher": "0.6.3",
"ember-resolver": "^4.2.1",
"loader.js": "^4.5.1"
},

@@ -49,4 +48,4 @@ "keywords": [

"dependencies": {
"ember-cli-htmlbars": "^1.0.3",
"ember-cli-babel": "^5.1.6"
"ember-cli-htmlbars": "^2.0.2",
"ember-cli-babel": "^6.5.0"
},

@@ -53,0 +52,0 @@ "ember-addon": {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc