From 7797b674ebf3d9ead5c668877e052c67d61ad1cb Mon Sep 17 00:00:00 2001 From: a15n Date: Sat, 21 Jan 2017 10:24:23 -0800 Subject: [PATCH 1/2] organized component to fix eslint order-warning --- addon/components/lazy-render-wrapper.js | 141 ++++++++++++++---------- 1 file changed, 80 insertions(+), 61 deletions(-) diff --git a/addon/components/lazy-render-wrapper.js b/addon/components/lazy-render-wrapper.js index ef00df8f..026f8500 100644 --- a/addon/components/lazy-render-wrapper.js +++ b/addon/components/lazy-render-wrapper.js @@ -75,8 +75,24 @@ const PASSABLE_ACTIONS = [ const PASSABLE_OPTIONS = PASSABLE_PROPERTIES.concat(PASSABLE_ACTIONS); export default Component.extend({ + + /* 1. Services */ + + /* 2. Defaults */ + tagName: '', layout, + enableLazyRendering: false, + event: 'hover', // Options are: hover, click, focus, none + childView: null, // This is set during the childView's didRender and is needed for the hide action + + _hasUserInteracted: false, + _hasRendered: false, + _shouldShowOnRender: false, + + /* 3. Single line Computed Property */ + + /* 4. Multiline Computed Property */ passedPropertiesObject: computed(...PASSABLE_OPTIONS, function() { return PASSABLE_OPTIONS.reduce((passablePropertiesObject, key) => { @@ -105,9 +121,53 @@ export default Component.extend({ }, {}); }), - enableLazyRendering: false, - _hasUserInteracted: false, - _hasRendered: false, + /** + * A jQuery element that the _lazyRenderEvents will be + * attached to during didInsertElement and + * removed from during willDestroyElement + * + * @public + * @property $target + * @type jQuery element + * @default the parent jQuery element + */ + + $target: computed('target', 'tetherComponentName', function() { + const target = this.get('target'); // #some-id + let $target; + + if (target) { + $target = $(target); + } else if (this.get('tetherComponentName').indexOf('-on-component') >= 0) { + + /* TODO(Andrew) + + Refactor this once we've gotten rid of the -on-component approach + share the functionality with `onComponentTarget` + */ + + const targetView = this.get('parentView'); + + if (!targetView) { + warn('No targetView found'); + + return null; + } else if (!targetView.get('elementId')) { + warn('No targetView.elementId'); + + return null; + } + + const targetViewElementId = targetView.get('elementId'); + + $target = $(`#${targetViewElementId}`); + } else { + $target = getParent(this); + } + + return $target; + }), + _shouldRender: computed('isShown', 'tooltipIsVisible', 'enableLazyRendering', '_hasUserInteracted', function() { /* If isShown, tooltipIsVisible, !enableLazyRendering, or _hasUserInteracted then @@ -136,9 +196,7 @@ export default Component.extend({ return false; }), - _shouldShowOnRender: false, - event: 'hover', // Options are: hover, click, focus, none _lazyRenderEvents: computed('event', function() { /* The lazy-render wrapper will only render the tooltip when @@ -164,52 +222,9 @@ export default Component.extend({ return _lazyRenderEvents; }), - /** - * A jQuery element that the _lazyRenderEvents will be - * attached to during didInsertElement and - * removed from during willDestroyElement - * - * @public - * @property $target - * @type jQuery element - * @default the parent jQuery element - */ - - $target: computed('target', 'tetherComponentName', function() { - const target = this.get('target'); // #some-id - let $target; - - if (target) { - $target = $(target); - } else if (this.get('tetherComponentName').indexOf('-on-component') >= 0) { - - /* TODO(Andrew) - - Refactor this once we've gotten rid of the -on-component approach - share the functionality with `onComponentTarget` - */ - - const targetView = this.get('parentView'); - - if (!targetView) { - warn('No targetView found'); - - return null; - } else if (!targetView.get('elementId')) { - warn('No targetView.elementId'); - - return null; - } + /* 5. Observers */ - const targetViewElementId = targetView.get('elementId'); - - $target = $(`#${targetViewElementId}`); - } else { - $target = getParent(this); - } - - return $target; - }), + /* 6. Lifecycle Hooks */ didInsertElement() { this._super(...arguments); @@ -250,7 +265,20 @@ export default Component.extend({ }); }, - childView: null, // This is set during the childView's didRender and is needed for the hide action + willDestroyElement() { + this._super(...arguments); + + const $target = this.get('$target'); + + this.get('_lazyRenderEvents').forEach((entryInteractionEvent) => { + $target.off(`${entryInteractionEvent}.${targetEventNameSpace}`); + }); + + $target.off(`mouseleave.${targetEventNameSpace}`); + }, + + /* 7. All actions */ + actions: { hide() { const childView = this.get('childView'); @@ -265,15 +293,6 @@ export default Component.extend({ }, }, - willDestroyElement() { - this._super(...arguments); - - const $target = this.get('$target'); - - this.get('_lazyRenderEvents').forEach((entryInteractionEvent) => { - $target.off(`${entryInteractionEvent}.${targetEventNameSpace}`); - }); + /* 8. Custom / private methods */ - $target.off(`mouseleave.${targetEventNameSpace}`); - }, }); From 1e5339a68703f6ce962af81de20d0fea517286a1 Mon Sep 17 00:00:00 2001 From: a15n Date: Sat, 21 Jan 2017 10:26:28 -0800 Subject: [PATCH 2/2] renamed to _lazyRenderEvent, _childView, & TARGET_EVENT_NAMESPACE --- addon/components/lazy-render-wrapper.js | 28 +++++++++---------- addon/components/tether-popover-on-element.js | 2 +- .../components/render-events-test.js | 4 +-- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/addon/components/lazy-render-wrapper.js b/addon/components/lazy-render-wrapper.js index 026f8500..3af7429c 100644 --- a/addon/components/lazy-render-wrapper.js +++ b/addon/components/lazy-render-wrapper.js @@ -11,7 +11,7 @@ const { warn, } = Ember; -export const targetEventNameSpace = 'target-lazy-render-wrapper'; +export const TARGET_EVENT_NAMESPACE = 'target-lazy-render-wrapper'; /* Beware: use of private API! :( @@ -84,7 +84,7 @@ export default Component.extend({ layout, enableLazyRendering: false, event: 'hover', // Options are: hover, click, focus, none - childView: null, // This is set during the childView's didRender and is needed for the hide action + _childView: null, // This is set during the childView's didRender and is needed for the hide action _hasUserInteracted: false, _hasRendered: false, @@ -247,15 +247,15 @@ export default Component.extend({ if the user has mouseenter and not mouseleave immediately afterwards. */ - $target.on(`mouseleave.${targetEventNameSpace}`, () => { + $target.on(`mouseleave.${TARGET_EVENT_NAMESPACE}`, () => { this.set('_shouldShowOnRender', false); }); } - this.get('_lazyRenderEvents').forEach((entryInteractionEvent) => { - $target.on(`${entryInteractionEvent}.${targetEventNameSpace}`, () => { + this.get('_lazyRenderEvents').forEach((_lazyRenderEvent) => { + $target.on(`${_lazyRenderEvent}.${TARGET_EVENT_NAMESPACE}`, () => { if (this.get('_hasUserInteracted')) { - $target.off(`${entryInteractionEvent}.${targetEventNameSpace}`); + $target.off(`${_lazyRenderEvent}.${TARGET_EVENT_NAMESPACE}`); } else { this.set('_hasUserInteracted', true); this.set('_shouldShowOnRender', true); @@ -270,25 +270,25 @@ export default Component.extend({ const $target = this.get('$target'); - this.get('_lazyRenderEvents').forEach((entryInteractionEvent) => { - $target.off(`${entryInteractionEvent}.${targetEventNameSpace}`); + this.get('_lazyRenderEvents').forEach((_lazyRenderEvent) => { + $target.off(`${_lazyRenderEvent}.${TARGET_EVENT_NAMESPACE}`); }); - $target.off(`mouseleave.${targetEventNameSpace}`); + $target.off(`mouseleave.${TARGET_EVENT_NAMESPACE}`); }, /* 7. All actions */ actions: { hide() { - const childView = this.get('childView'); + const _childView = this.get('_childView'); - /* The childView.actions property is not available in Ember 1.13 - We will use childView._actions until we drop support for Ember 1.13 + /* The _childView.actions property is not available in Ember 1.13 + We will use _childView._actions until we drop support for Ember 1.13 */ - if (childView && childView._actions && childView._actions.hide) { - childView.send('hide'); + if (_childView && _childView._actions && _childView._actions.hide) { + _childView.send('hide'); } }, }, diff --git a/addon/components/tether-popover-on-element.js b/addon/components/tether-popover-on-element.js index 9c267aba..41e49a27 100644 --- a/addon/components/tether-popover-on-element.js +++ b/addon/components/tether-popover-on-element.js @@ -95,7 +95,7 @@ export default TooltipAndPopoverComponent.extend({ const parentView = this.get('parentView'); if (parentView) { - parentView.set('childView', this); + parentView.set('_childView', this); } }, didInsertElement() { diff --git a/tests/integration/components/render-events-test.js b/tests/integration/components/render-events-test.js index f8b30586..5c813230 100644 --- a/tests/integration/components/render-events-test.js +++ b/tests/integration/components/render-events-test.js @@ -1,7 +1,7 @@ import Ember from 'ember'; import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -import { targetEventNameSpace } from 'ember-tooltips/components/lazy-render-wrapper'; +import { TARGET_EVENT_NAMESPACE } from 'ember-tooltips/components/lazy-render-wrapper'; const { $, run } = Ember; @@ -34,7 +34,7 @@ function assertTargetHasLazyRenderEvents(assert, $target, eventType = 'hover') { assert.equal(eventHandler.origType, event, `the eventHandler's origType property should equal ${event}`); - assert.ok(eventHandler.namespace.indexOf(targetEventNameSpace) >= 0, + assert.ok(eventHandler.namespace.indexOf(TARGET_EVENT_NAMESPACE) >= 0, 'the eventHandler\'s namespace property be unique to ember-tooltips'); }