From 9fd82f06da7d03d3db94c13ca00fafc040339c2a Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Mon, 20 Jun 2016 15:20:25 +0100 Subject: [PATCH] Fix un-bound HTML attributes for `gh-trim-focus-input` no issue - updates `gh-trim-focus-input` to extend from `gh-input`/`one-way-input` to get the auto-binding attribute behaviour for passed-in HTML attributes - renames `focus` property to `shouldFocus` so that we're not overriding default DOM functions - fixes signin page issues with missing placeholders and no autofocus --- app/components/gh-trim-focus-input.js | 106 +++--------------- app/templates/components/gh-navitem.hbs | 2 +- app/templates/editor/edit.hbs | 2 +- .../components/gh-trim-focus-input-test.js | 4 +- 4 files changed, 20 insertions(+), 94 deletions(-) diff --git a/app/components/gh-trim-focus-input.js b/app/components/gh-trim-focus-input.js index 306e9a4ea..64fef1cf9 100644 --- a/app/components/gh-trim-focus-input.js +++ b/app/components/gh-trim-focus-input.js @@ -1,9 +1,8 @@ /*global device*/ import Ember from 'ember'; -import boundOneWay from 'ghost-admin/utils/bound-one-way'; -import {InvokeActionMixin} from 'ember-invoke-action'; +import GhostInput from 'ghost-admin/components/gh-input'; -const {Component, computed} = Ember; +const {computed} = Ember; /** * This doesn't override the OneWayInput component because @@ -11,113 +10,40 @@ const {Component, computed} = Ember; * parts from both the OneWayInput component and Ember's default * input component */ -const TrimFocusInputComponent = Component.extend(InvokeActionMixin, { - tagName: 'input', - type: 'text', - focus: true, - classNames: 'gh-input', +const TrimFocusInputComponent = GhostInput.extend({ - // This is taken from Ember's input component - attributeBindings: [ - 'autofocus', - '_value:value', - 'accept', - 'autocomplete', - 'autosave', - 'dir', - 'formaction', - 'formenctype', - 'formmethod', - 'formnovalidate', - 'formtarget', - 'height', - 'inputmode', - 'lang', - 'list', - 'multiple', - 'name', - 'pattern', - 'size', - 'step', - 'type', - 'value', - 'width' - ], + shouldFocus: true, - // These were in Ember's component - // so they are reproduced here - size: null, - pattern: null, - max: null, - min: null, - - _value: boundOneWay('value'), + attributeBindings: ['autofocus'], autofocus: computed(function () { - if (this.get('focus')) { + if (this.get('shouldFocus')) { return (device.ios()) ? false : 'autofocus'; } return false; }), - keyEvents: { - '13': 'onenter', - '27': 'onescape' - }, - - input() { - this._handleChangeEvent(); - }, - - change() { - this._handleChangeEvent(); - }, - - keyUp(event) { - this._interpretKeyEvents(event); - }, - - _interpretKeyEvents(event) { - let method = this.get(`keyEvents.${event.keyCode}`); - - if (method) { - this._sanitizedValue = null; - this._handleChangeEvent(method); - } - }, - - _handleChangeEvent(method = 'update') { - let value = this.readDOMAttr('value'); - this.invokeAction(method, value); - }, - - _trimValue() { - let text = this.readDOMAttr('value'); - this.invokeAction('update', text.trim()); + init() { + this._super(...arguments); }, didInsertElement() { this._super(...arguments); - this._setFocus(); + this._focus(); }, - _setFocus() { + sanitizeInput(input) { + return input.trim(); + }, + + _focus() { // Until mobile safari has better support // for focusing, we just ignore it - if (this.get('focus') && !device.ios()) { - this.$().focus(); + if (this.get('shouldFocus') && !device.ios()) { + this.element.focus(); } - }, - - focusOut() { - this._super(...arguments); - this._trimValue(); } }); -TrimFocusInputComponent.reopenClass({ - positionalParams: ['value'] -}); - export default TrimFocusInputComponent; diff --git a/app/templates/components/gh-navitem.hbs b/app/templates/components/gh-navitem.hbs index c84c59cb3..2c0f547d5 100644 --- a/app/templates/components/gh-navitem.hbs +++ b/app/templates/components/gh-navitem.hbs @@ -6,7 +6,7 @@
{{#gh-validation-status-container tagName="span" class="gh-blognav-label" errors=navItem.errors property="label" hasValidated=navItem.hasValidated}} - {{gh-trim-focus-input navItem.label focus=navItem.last placeholder="Label" keyPress=(action "clearLabelErrors") update=(action (mut navItem.label))}} + {{gh-trim-focus-input navItem.label shouldFocus=navItem.last placeholder="Label" keyPress=(action "clearLabelErrors") update=(action (mut navItem.label))}} {{gh-error-message errors=navItem.errors property="label"}} {{/gh-validation-status-container}} {{#gh-validation-status-container tagName="span" class="gh-blognav-url" errors=navItem.errors property="url" hasValidated=navItem.hasValidated}} diff --git a/app/templates/editor/edit.hbs b/app/templates/editor/edit.hbs index 55bbbc1c4..a9b06c7b4 100644 --- a/app/templates/editor/edit.hbs +++ b/app/templates/editor/edit.hbs @@ -1,7 +1,7 @@
{{#gh-view-title classNames="gh-editor-title" openMobileMenu="openMobileMenu"}} - {{gh-trim-focus-input model.titleScratch type="text" id="entry-title" placeholder="Your Post Title" tabindex="1" focus=shouldFocusTitle focus-out="updateTitle" update=(action (mut model.titleScratch))}} + {{gh-trim-focus-input model.titleScratch type="text" id="entry-title" placeholder="Your Post Title" tabindex="1" shouldFocus=shouldFocusTitle focus-out="updateTitle" update=(action (mut model.titleScratch))}} {{/gh-view-title}} {{#if scheduleCountdown}}