Tweeted @lukemelia a month ago asking if he planned to update ember-modal-dialog to remove this deprecation warning.
#targetAttachmentClass computed property was just overriden. This removes the computed property and replaces it with a plain value, and has been deprecated.
Was looking into it last night and saw someone submitted an issue about the deprecation around the same time . Told Luke if someone could guide me through it, I’d be happy to submit the PR. If you follow the link, you will see his reply:
Hi @jameshahn2 , the reason for this error is that targetAttachmentClass is a computed property. If a value is passed in for the property, Ember’s historical behavior is that the passed value would replace the computed function. This is now deprecated, hence the warning. So we need a new way to provide a default value for targetAttachmentClass. I think that a way to do it would be to make the init method of the component(s) set targetAttachmentClass if and only if this.targetAttachmentClass is undefined.
After searching the repo for “target” , I narrowed the problematic files down to what you see below.
This is not necessarily every file that needs to be fixed and there could be far fewer problematic files than I linked to here. However, I’m hoping they will help y’all see what needs to happen. If a couple of you could take a look and tell me how to fix the issue, I will git clone the directory, make the changes, and submit the PR.
Let’s make ember-modal-dialog great again!
import { assert } from '@ember/debug';
import { typeOf } from '@ember/utils';
import Component from '@ember/component';
import { capitalize } from '@ember/string';
import { observer, computed } from '@ember/object';
import { on } from '@ember/object/evented';
const SUPPORTED_TARGET_ATTACHMENTS = [
'top', 'right', 'bottom', 'left', 'center', 'elementCenter', 'none'
];
export default Component.extend({
// target - element selector, element, or Ember View
// targetAttachment - top, right, bottom, left, center, or none
// left, right, top, bottom (relative to target)
// center (relative to container)
targetAttachment: 'center',
isPositioned: computed('targetAttachment', 'target', 'renderInPlace', function() {
if (this.get('renderInPlace')) {
show original
import Controller from '@ember/controller';
export default Controller.extend({
isShowingTargetSelector: false,
isShowingTargetElement: false,
isShowingElementCenterModal: false,
exampleTargetAttachment: 'middle left',
exampleAttachment: 'middle right',
nextAttachment(val) {
switch (val) {
case 'middle right':
return 'bottom center';
case 'bottom center':
return 'middle left';
case 'middle left':
return 'top center';
case 'top center':
return 'middle right';
}
return false;
show original
import Controller from '@ember/controller';
export default Controller.extend({
isShowingBasic: false,
isShowingTranslucent: false,
isShowingTranslucentWithCallback: false,
isShowingWithoutOverlay: false,
isShowingWithoutOverlayClickOutsideToClose: false,
isShowingWithoutOverlayClickOutsideToCloseAnotherOne: false,
isShowingCustomStyles: false,
isShowingTargetSelector: false,
isShowingTargetElement: false,
isShowingSubclassed: false,
isShowingInPlace: false,
isShowingCenteredScrolling: false,
isShowingElementCenterModal: false,
exampleTargetAttachment: 'middle left',
exampleAttachment: 'middle right',
customContainerClassNames: 'custom-styles-modal-container',
nextAttachment(val) {
show original
import Controller from '@ember/controller';
import { set, get } from '@ember/object';
export default Controller.extend({
isShowingBasic: false,
isShowingTranslucent: false,
isShowingTranslucentWithCallback: false,
isShowingWithoutOverlay: false,
isShowingWithoutOverlayClickOutsideToClose: false,
isShowingWithoutOverlayClickOutsideToCloseAnotherOne: false,
isShowingTargetSelector: false,
isShowingTargetElement: false,
isShowingSubclassed: false,
isShowingCenteredScrolling: false,
isShowingElementCenterModal: false,
exampleTargetAttachment: 'middle left',
exampleAttachment: 'middle right',
nextAttachment(val) {
switch (val) {
case 'middle right':
show original
import { computed } from '@ember/object';
import { dasherize } from '@ember/string';
import BasicDialog from './basic-dialog';
import layout from '../templates/components/liquid-tether-dialog';
export default BasicDialog.extend({
layout,
targetAttachmentClass: computed('targetAttachment', function() {
let targetAttachment = this.get('targetAttachment') || '';
return `ember-modal-dialog-target-attachment-${dasherize(targetAttachment)}`;
}),
targetAttachment: null,
attachment: null,
didReceiveAttrs() {
this._super(...arguments);
if (!this.get('attachment')) {
this.set('attachment', 'middle center');
}
show original
import { computed } from '@ember/object';
import { dasherize } from '@ember/string';
import BasicDialog from './basic-dialog';
import layout from '../templates/components/tether-dialog';
export default BasicDialog.extend({
layout,
init(){
this._super(...arguments);
this._ensureAttachments();
},
targetAttachmentClass: computed('targetAttachment', function() {
let targetAttachment = this.get('targetAttachment') || '';
return `ember-modal-dialog-target-attachment-${dasherize(targetAttachment)}`;
}),
targetAttachment: null,
attachment: null,
didReceiveAttrs() {
this._super(...arguments);
show original
import { oneWay, readOnly } from '@ember/object/computed';
import Component from '@ember/component';
import { dasherize } from '@ember/string';
import { computed } from '@ember/object';
import { isEmpty } from '@ember/utils';
import { inject as service } from '@ember/service';
import layout from '../templates/components/modal-dialog';
import { warn } from '@ember/debug';
import { DEBUG } from '@glimmer/env';
const VALID_OVERLAY_POSITIONS = ['parent', 'sibling'];
export default Component.extend({
tagName: '',
layout,
modalService: service('modal-dialog'),
destinationElementId: oneWay('modalService.destinationElementId'),
modalDialogComponentName: computed('renderInPlace', 'tetherTarget', 'animatable', 'hasLiquidWormhole', 'hasLiquidTether', function(){
let tetherTarget = this.get('tetherTarget');
let hasLiquidTether = this.get('hasLiquidTether');
show original
import { visit } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
const dialogSelector = '.ember-modal-dialog';
const dialogCloseButton = [dialogSelector, 'button'].join(' ');
module('Acceptance: modal-dialog | tethered and animatable', function(hooks) {
setupApplicationTest(hooks);
hooks.beforeEach(function() {
return visit('/tethered-animatable');
});
test('target - selector', async function(assert) {
await assert.dialogOpensAndCloses({
openSelector: '#example-target-selector button',
dialogText: 'Target - Selector',
closeSelector: dialogCloseButton,
hasOverlay: false,
whileOpen() {
show original
import { visit } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
const dialogSelector = '.ember-modal-dialog';
const dialogCloseButton = [dialogSelector, 'button'].join(' ');
module('Acceptance: modal-dialog | tethered', function(hooks) {
setupApplicationTest(hooks);
test('target - selector', async function(assert) {
await visit('/tethered');
assert.dialogOpensAndCloses({
openSelector: '#example-target-selector button',
dialogText: 'Target - Selector',
closeSelector: dialogCloseButton,
hasOverlay: false,
whileOpen() {
assert.dom(dialogSelector).hasClass('ember-tether-target-attached-left', 'has targetAttachment class name');
}
show original
import Component from '@ember/component';
import { computed } from '@ember/object';
import { oneWay } from '@ember/object/computed';
import { isEmpty } from '@ember/utils';
import { inject as service } from '@ember/service';
import layout from '../templates/components/basic-dialog';
export default Component.extend({
tagName: '',
layout,
containerClassNames: null,
overlayClassNames: null,
wrapperClassNames: null,
modalService: service('modal-dialog'),
destinationElementId: oneWay('modalService.destinationElementId'),
variantWrapperClass: 'emd-static',
containerClassNamesString: computed('containerClassNames.[]', 'targetAttachmentClass', 'attachmentClass', 'containerClass', function() {
show original
import { click, find, visit } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { findContains } from '../helpers/modal-asserts';
import { setupApplicationTest } from 'ember-qunit';
const modalRootElementSelector = '#modal-overlays';
const overlaySelector = '.ember-modal-overlay';
const dialogSelector = '.ember-modal-dialog';
const dialogCloseButton = [dialogSelector, 'button'].join(' ');
module('Acceptance: modal-dialog | no animation, no tether', function(hooks) {
setupApplicationTest(hooks);
hooks.beforeEach(function() {
return visit('/');
});
test('basic modal', async function(assert) {
assert.isPresentOnce(modalRootElementSelector);
assert.isAbsent(overlaySelector);
assert.isPresentOnce('#example-basic button');
show original
1 Like
efx
September 18, 2019, 2:56pm
2
jameshahn2:
targetAttachmentClass
Thanks for doing the legwork here @jameshahn2 !
Here is an example refactor of one of the targetAttachmentClass computed properties:
https://github.com/yapplabs/ember-modal-dialog/compare/master...efx:refactor-computed?expand=1 .
I annotated the source with comments explaining each step. Let me know if that is clear and/or other tips to explain what is going on. This implements Lukes suggestion on the comment. It would need testing and applied to the other sections.
2 Likes
Makes sense to me. I’ll get on it this afternoon.
Thank you, sir!
1 Like
evanb2
November 26, 2019, 6:17pm
4
@jameshahn2 Any update on this?
1 Like
Goodness! Fell headlong through the Python, data science wormhole and forgot to make this happen. Working through a text summarization project I’ve been working on.
Will get this done today!
1 Like