0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
ghost/core/client/app/components/gh-skip-link.js
Kevin Ansfield 3d6856614f Use es6 across client and add ember-suave to enforce rules
no issue
- add ember-suave dependency
- upgrade grunt-jscs dependency
- add a new .jscsrc for the client's tests directory that extends from client's base .jscsrc
- separate client tests in Gruntfile jscs task so they pick up the test's .jscsrc
- standardize es6 usage across client
2015-11-30 10:41:01 +00:00

36 lines
1.2 KiB
JavaScript

/*jshint scripturl:true*/
import Ember from 'ember';
const {Component, on} = Ember;
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: Ember.String.htmlSafe('javascript:;'),
scrollTo: on('click', function () {
let anchor = this.get('anchor');
let $el = Ember.$(anchor);
if ($el) {
// Scrolls to the top of main content or whatever
// is passed to the anchor attribute
Ember.$('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
Ember.$($el).attr('tabindex', -1).on('blur focusout', function () {
$(this).removeAttr('tabindex');
}).focus();
}
})
});