Commit 243e4623 authored by chdorner's avatar chdorner

Move onfocus handler into JS file

Which fixes a CSP violation with having inline JavaScript.
parent f66de4c9
'use strict';
function FormSelectOnFocusController(root) {
this._elements = root.querySelectorAll('.js-select-onfocus');
for (var i = 0; i < this._elements.length; i++) {
var element = this._elements[i];
// In case the `focus` event has already been fired, select the element
if (element === document.activeElement) {
element.select();
}
element.addEventListener('focus', function(event) {
event.target.select();
});
}
}
module.exports = FormSelectOnFocusController;
'use strict';
// configure error reporting
var settings = require('./settings')(document);
if (settings.raven) {
......@@ -9,6 +11,7 @@ var page = require('page');
var CreateGroupFormController = require('./create-group-form');
var DropdownMenuController = require('./dropdown-menu');
var InstallerController = require('./installer-controller');
var FormSelectOnFocusController = require('./form-select-onfocus-controller');
// setup components
new DropdownMenuController(document);
......@@ -24,6 +27,18 @@ page('/groups/new', function () {
new CreateGroupFormController(document.body);
});
page('/login', function() {
new FormSelectOnFocusController(document.body);
});
page('/register', function() {
new FormSelectOnFocusController(document.body);
});
page('/forgot_password', function() {
new FormSelectOnFocusController(document.body);
});
document.addEventListener('DOMContentLoaded', function () {
page.start();
page.start({click: false});
});
'use strict';
var FormSelectOnFocusController = require('../form-select-onfocus-controller');
// helper to dispatch a native event to an element
function sendEvent(element, eventType) {
// createEvent() used instead of Event constructor
// for PhantomJS compatibility
var event = document.createEvent('Event');
event.initEvent(eventType, true /* bubbles */, true /* cancelable */);
element.dispatchEvent(event);
}
describe('FormSelectOnFocusController', function() {
var root;
beforeEach(function() {
root = document.createElement('div');
root.innerHTML = '<form id="js-users-delete-form">' +
'<input type="text" class="js-select-onfocus" value="some-test-value">';
document.body.appendChild(root);
});
afterEach(function() {
root.parentNode.removeChild(root);
});
it('it selects the element on focus event', function() {
new FormSelectOnFocusController(root);
var input = root.querySelector('input');
sendEvent(input, 'focus');
assert.strictEqual(input.selectionStart, 0);
assert.strictEqual(input.selectionEnd, input.value.length);
});
it('it selects the element without focus event when it is the active element', function() {
// Focus element before instantiating the controller
var input = root.querySelector('input');
input.focus();
new FormSelectOnFocusController(document.body);
assert.strictEqual(input.selectionStart, 0);
assert.strictEqual(input.selectionEnd, input.value.length);
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment