Ghost/ghost/admin/app/components/gh-skip-link.js
Kevin Ansfield 983110d931 Switched from ember-cli-shims to new module imports (#779)
no issue

- add eslint-plugin-ember, configure no-old-shims rule
- run `eslint --fix` on `app`, `lib`, `mirage`, and `tests` to move imports to the new module imports
- further cleanup of Ember globals usage
- remove event-dispatcher initializer now that `canDispatchToEventManager` is deprecated
2017-08-22 14:53:26 +07:00

36 lines
1.2 KiB
JavaScript

import $ from 'jquery';
import Component from '@ember/component';
import {htmlSafe} from '@ember/string';
export default Component.extend({
tagName: 'a',
anchor: '',
classNames: ['sr-only', 'sr-only-focusable'],
// Add attributes to component for href
// href should be set to retain anchor properties
// such as pointer cursor and text underline
attributeBindings: ['href'],
// Used so that upon clicking on the link
// anchor behaviors or ignored
href: htmlSafe('javascript:;'),
click() {
let anchor = this.get('anchor');
let $el = $(anchor);
if ($el) {
// Scrolls to the top of main content or whatever
// is passed to the anchor attribute
$('body').scrollTop($el.offset().top);
// This sets focus on the content which was skipped to
// upon losing focus, the tabindex should be removed
// so that normal keyboard navigation picks up from focused
// element
$($el).attr('tabindex', -1).on('blur focusout', function () {
$(this).removeAttr('tabindex');
}).focus();
}
}
});