diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 3a682cea88..1167e28df6 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -10,7 +10,7 @@ import Class from './Class'; import Text from './Text'; import { namespaces } from '../../utils/namespaces'; import map_children from './shared/map_children'; -import { isNameContenteditable, getContenteditableAttr } from '../utils/contenteditable'; +import { is_name_contenteditable, get_contenteditable_attr } from '../utils/contenteditable'; import { dimensions } from '../../utils/patterns'; import fuzzymatch from '../../utils/fuzzymatch'; import list from '../../utils/list'; @@ -769,10 +769,8 @@ export default class Element extends Node { message: `'${binding.name}' is not a valid binding on void elements like <${this.name}>. Use a wrapper element instead` }); } - } else if ( - isNameContenteditable(name) - ) { - const contenteditable = getContenteditableAttr(this); + } else if (is_name_contenteditable(name)) { + const contenteditable = get_contenteditable_attr(this); if (!contenteditable) { component.error(binding, { code: 'missing-contenteditable-attribute', diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 5124006235..cbfac0fb85 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -26,7 +26,7 @@ import Action from '../../../nodes/Action'; import MustacheTagWrapper from '../MustacheTag'; import RawMustacheTagWrapper from '../RawMustacheTag'; import is_dynamic from '../shared/is_dynamic'; -import { isNameContenteditable, hasContentEditableAttr } from '../../../utils/contenteditable'; +import { is_name_contenteditable, has_contenteditable_attr } from '../../../utils/contenteditable'; interface BindingGroup { events: string[]; @@ -43,8 +43,8 @@ const events = [ { event_names: ['input'], filter: (node: Element, name: string) => - isNameContenteditable(name) && - hasContentEditableAttr(node) + is_name_contenteditable(name) && + has_contenteditable_attr(node) }, { event_names: ['change'], @@ -547,7 +547,7 @@ export default class ElementWrapper extends Wrapper { this.node.name === 'select' || binding_group.bindings.find(binding => ( binding.node.name === 'indeterminate' || - isNameContenteditable(binding.node.name) || + is_name_contenteditable(binding.node.name) || binding.is_readonly_media_attribute() )) ); diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts index ee93e31ede..336d649c03 100644 --- a/src/compiler/compile/render_ssr/handlers/Element.ts +++ b/src/compiler/compile/render_ssr/handlers/Element.ts @@ -1,5 +1,5 @@ import { is_void } from '../../../utils/names'; -import { isNameContenteditable, isContenteditable } from '../../utils/contenteditable'; +import { is_name_contenteditable, is_contenteditable } from '../../utils/contenteditable'; import { get_attribute_value, get_class_attribute_value } from './shared/get_attribute_value'; import { boolean_attributes } from './shared/boolean_attributes'; import Renderer, { RenderOptions } from '../Renderer'; @@ -16,7 +16,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption // awkward special case let node_contents; - const contenteditable = isContenteditable(node); + const contenteditable = is_contenteditable(node); renderer.add_string(`<${node.name}`); @@ -102,7 +102,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption if (name === 'group') { // TODO server-render group bindings - } else if (contenteditable && isNameContenteditable(name)) { + } else if (contenteditable && is_name_contenteditable(name)) { node_contents = expression.node; // TODO where was this used? diff --git a/src/compiler/compile/utils/__test__.ts b/src/compiler/compile/utils/__test__.ts index a2138765d0..169d3aa920 100644 --- a/src/compiler/compile/utils/__test__.ts +++ b/src/compiler/compile/utils/__test__.ts @@ -1,12 +1,12 @@ import * as assert from 'assert'; import get_name_from_filename from './get_name_from_filename'; import { - isContenteditable, - isInputOrTextarea, - isAttrContentEditable, - hasContentEditableAttr, - isNameContenteditable, - getContenteditableAttr, + is_contenteditable, + is_input_or_textarea, + is_attr_contenteditable, + has_contenteditable_attr, + is_name_contenteditable, + get_contenteditable_attr, CONTENTEDITABLE_ATTR, CONTENTEDITABLE_BINDINGS, } from './contenteditable'; @@ -28,85 +28,85 @@ describe('get_name_from_filename', () => { }); describe('contenteditable', () => { - describe('isContenteditable', () => { + describe('is_contenteditable', () => { it('returns false if node is input', () => { const node = { name: 'input' } as Element; - assert.equal(isContenteditable(node), false); + assert.equal(is_contenteditable(node), false); }); it('returns false if node is textarea', () => { const node = { name: 'textarea' } as Element; - assert.equal(isContenteditable(node), false); + assert.equal(is_contenteditable(node), false); }); it('returns false if node is not input or textarea AND it is not contenteditable', () => { const attr = { name: 'href' } as Attribute; const node = { name: 'a', attributes: [attr] } as Element; - assert.equal(isContenteditable(node), false); + assert.equal(is_contenteditable(node), false); }); it('returns true if node is not input or textarea AND it is contenteditable', () => { const attr = { name: CONTENTEDITABLE_ATTR } as Attribute; const node = { name: 'a', attributes: [attr] } as Element; - assert.equal(isContenteditable(node), true); + assert.equal(is_contenteditable(node), true); }); }); - describe('isInputOrTextarea', () => { + describe('is_input_or_textarea', () => { it('returns true if node is input', () => { const node = { name: 'input' } as Element; - assert.equal(isInputOrTextarea(node), true); + assert.equal(is_input_or_textarea(node), true); }); it('returns true if node is textarea', () => { const node = { name: 'textarea' } as Element; - assert.equal(isInputOrTextarea(node), true); + assert.equal(is_input_or_textarea(node), true); }); it('returns false if node is not input or textarea', () => { const node = { name: 'div' } as Element; - assert.equal(isInputOrTextarea(node), false); + assert.equal(is_input_or_textarea(node), false); }); }); - describe('isAttrContentEditable', () => { + describe('is_attr_contenteditable', () => { it('returns true if attribute is contenteditable', () => { const attr = { name: CONTENTEDITABLE_ATTR } as Attribute; - assert.equal(isAttrContentEditable(attr), true); + assert.equal(is_attr_contenteditable(attr), true); }); it('returns false if attribute is not contenteditable', () => { const attr = { name: 'href' } as Attribute; - const actual = isAttrContentEditable(attr); + const actual = is_attr_contenteditable(attr); assert.equal(actual, false); }); }); - describe('hasContentEditableAttr', () => { + describe('has_contenteditable_attr', () => { it('returns true if attribute is contenteditable', () => { const attr = { name: CONTENTEDITABLE_ATTR } as Attribute; const node = { attributes: [attr] } as Element; - assert.equal(hasContentEditableAttr(node), true); + assert.equal(has_contenteditable_attr(node), true); }); it('returns false if attribute is not contenteditable', () => { const attr = { name: 'href' } as Attribute; const node = { attributes: [attr] } as Element; - assert.equal(hasContentEditableAttr(node), false); + assert.equal(has_contenteditable_attr(node), false); }); }); - describe('isNameContenteditable', () => { + describe('is_name_contenteditable', () => { it('returns true if name is a contenteditable type', () => { - assert.equal(isNameContenteditable(CONTENTEDITABLE_BINDINGS[0]), true); + assert.equal(is_name_contenteditable(CONTENTEDITABLE_BINDINGS[0]), true); }); it('returns false if name is not contenteditable type', () => { - assert.equal(isNameContenteditable('value'), false); + assert.equal(is_name_contenteditable('value'), false); }); }); - describe('getContenteditableAttr', () => { + describe('get_contenteditable_attr', () => { it('returns the contenteditable Attribute if it exists', () => { const attr = { name: CONTENTEDITABLE_ATTR } as Attribute; const node = { name: 'div', attributes: [attr] } as Element; - assert.equal(getContenteditableAttr(node), attr); + assert.equal(get_contenteditable_attr(node), attr); }); it('returns undefined if contenteditable attribute cannot be found', () => { const node = { name: 'div', attributes: [] } as Element; - assert.equal(getContenteditableAttr(node), undefined); + assert.equal(get_contenteditable_attr(node), undefined); }); }); diff --git a/src/compiler/compile/utils/contenteditable.ts b/src/compiler/compile/utils/contenteditable.ts index 6d5da614af..0f186ea521 100644 --- a/src/compiler/compile/utils/contenteditable.ts +++ b/src/compiler/compile/utils/contenteditable.ts @@ -15,7 +15,7 @@ export const CONTENTEDITABLE_BINDINGS = [ * Returns true if node is an 'input' or 'textarea'. * @param {Element} node The element to be checked */ -export function isInputOrTextarea(node: Element): boolean { +export function is_input_or_textarea(node: Element): boolean { return node.name === 'textarea' || node.name === 'input'; } @@ -23,7 +23,7 @@ export function isInputOrTextarea(node: Element): boolean { * Check if a given attribute is 'contenteditable'. * @param {Attribute} attribute A node.attribute */ -export function isAttrContentEditable(attribute: Attribute): boolean { +export function is_attr_contenteditable(attribute: Attribute): boolean { return attribute.name === CONTENTEDITABLE_ATTR; } @@ -31,23 +31,23 @@ export function isAttrContentEditable(attribute: Attribute): boolean { * Check if any of a node's attributes are 'contentenditable'. * @param {Element} node The element to be checked */ -export function hasContentEditableAttr(node: Element): boolean { - return node.attributes.some(isAttrContentEditable); +export function has_contenteditable_attr(node: Element): boolean { + return node.attributes.some(is_attr_contenteditable); } /** * Returns true if node is not textarea or input, but has 'contenteditable' attribute. * @param {Element} node The element to be tested */ -export function isContenteditable(node: Element): boolean { - return !isInputOrTextarea(node) && hasContentEditableAttr(node); +export function is_contenteditable(node: Element): boolean { + return !is_input_or_textarea(node) && has_contenteditable_attr(node); } /** * Returns true if a given binding/node is contenteditable. * @param {string} name A binding or node name to be checked */ -export function isNameContenteditable(name: string): boolean { +export function is_name_contenteditable(name: string): boolean { return CONTENTEDITABLE_BINDINGS.includes(name); } @@ -55,6 +55,6 @@ export function isNameContenteditable(name: string): boolean { * Returns the contenteditable attribute from the node (if it exists). * @param {Element} node The element to get the attribute from */ -export function getContenteditableAttr(node: Element): Attribute | undefined { - return node.attributes.find(isAttrContentEditable); +export function get_contenteditable_attr(node: Element): Attribute | undefined { + return node.attributes.find(is_attr_contenteditable); }