From eaa3a27328b87d22e56c0c8a54b1362affb18815 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Thu, 2 Oct 2014 17:10:33 -0600 Subject: [PATCH] Add text-editor-element-spec and fix handling of focus and attributes --- spec/text-editor-element-spec.coffee | 36 ++++++++++++++++++++++++++++ src/text-editor-element.coffee | 15 ++++++++++-- src/text-editor.coffee | 2 ++ 3 files changed, 51 insertions(+), 2 deletions(-) create mode 100644 spec/text-editor-element-spec.coffee diff --git a/spec/text-editor-element-spec.coffee b/spec/text-editor-element-spec.coffee new file mode 100644 index 000000000..1c1a47731 --- /dev/null +++ b/spec/text-editor-element-spec.coffee @@ -0,0 +1,36 @@ +TextEditorElement = require '../src/text-editor-element' + +# The rest of text-editor-component-spec will be moved to this file when React +# is eliminated. This covers only concerns related to the wrapper element for now +describe "TextEditorElement", -> + jasmineContent = null + + beforeEach -> + jasmineContent = document.body.querySelector('#jasmine-content') + + describe "instantiation", -> + it "honors the mini attribute", -> + jasmineContent.innerHTML = "
" + element = jasmineContent.firstChild + expect(element.getModel().isMini()).toBe true + + it "honors the placeholder-text attribute", -> + jasmineContent.innerHTML = "
" + element = jasmineContent.firstChild + expect(element.getModel().getPlaceholderText()).toBe 'testing' + + describe "::focus()", -> + it "transfers focus to the hidden text area and does not emit 'focusout' or 'blur' events", -> + element = new TextEditorElement + jasmineContent.appendChild(element) + + focusoutCalled = false + element.addEventListener 'focusout', -> focusoutCalled = true + blurCalled = false + element.addEventListener 'blur', -> blurCalled = true + + element.focus() + expect(focusoutCalled).toBe false + expect(blurCalled).toBe false + expect(element.hasFocus()).toBe true + expect(element.querySelector('input')).toBe document.activeElement diff --git a/src/text-editor-element.coffee b/src/text-editor-element.coffee index 9c1fc71c5..98763c6d5 100644 --- a/src/text-editor-element.coffee +++ b/src/text-editor-element.coffee @@ -18,6 +18,8 @@ class TextEditorElement extends HTMLElement @initializeContent() @createSpacePenShim() @addEventListener 'focus', @focused.bind(this) + @addEventListener 'focusout', @focusedOut.bind(this) + @addEventListener 'blur', @blurred.bind(this) initializeContent: (attributes) -> @classList.add('editor', 'react', 'editor-colors') @@ -51,8 +53,8 @@ class TextEditorElement extends HTMLElement softWrapped: false tabLength: 2 softTabs: true - mini: @getAttribute('mini') - placeholderText: placeholderText + mini: @hasAttribute('mini') + placeholderText: @getAttribute('placeholder-text') )) mountComponent: -> @@ -75,10 +77,19 @@ class TextEditorElement extends HTMLElement else @focusOnAttach = true + focusedOut: (event) -> + event.stopImmediatePropagation() if @contains(event.relatedTarget) + + blurred: (event) -> + event.stopImmediatePropagation() if @contains(event.relatedTarget) + addGrammarScopeAttribute: -> grammarScope = @model.getGrammar()?.scopeName?.replace(/\./g, ' ') @setAttribute('data-grammar', grammarScope) + hasFocus: -> + this is document.activeElement or @contains(document.activeElement) + stopCommandEventPropagation = (commandListeners) -> newCommandListeners = {} for commandName, commandListener of commandListeners diff --git a/src/text-editor.coffee b/src/text-editor.coffee index a73207cdd..d1fca0412 100644 --- a/src/text-editor.coffee +++ b/src/text-editor.coffee @@ -501,6 +501,8 @@ class TextEditor extends Model @mini = mini @updateInvisibles() + isMini: -> @mini + # Set the number of characters that can be displayed horizontally in the # editor. #