Skip to content

Commit

Permalink
Pass in style attribute to style attachment
Browse files Browse the repository at this point in the history
Allows passing in a safe string as a style which will be applied to the
tooltip or attachment element.
  • Loading branch information
jrjohnson committed May 17, 2018
1 parent ac00306 commit f78f427
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 6 deletions.
20 changes: 15 additions & 5 deletions addon/components/attach-popover.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ import { cancel, debounce, later, next, run } from '@ember/runloop';
import { computed, observer } from '@ember/object';
import { getOwner } from '@ember/application';
import { guidFor } from '@ember/object/internals';
import { htmlSafe } from '@ember/string';
import { htmlSafe, isHTMLSafe } from '@ember/string';
import { stripInProduction } from 'ember-attacher/-debug/helpers';
import { warn } from '@ember/debug';
import { isEmpty } from '@ember/utils';

export default Component.extend({
layout,
Expand Down Expand Up @@ -56,6 +57,7 @@ export default Component.extend({
showDelay: DEFAULTS.showDelay,
showDuration: DEFAULTS.showDuration,
showOn: DEFAULTS.showOn,
style: DEFAULTS.style,

/**
* ================== PRIVATE IMPLEMENTATION DETAILS ==================
Expand Down Expand Up @@ -110,6 +112,18 @@ export default Component.extend({
return `ember-attacher-${this.get('animation')} ${this.get('class') || ''} ${showOrHideClass}`;
}),

_style: computed('style', '_transitionDuration', function () {
const style = this.get('style');
const transitionDuration = this.get('_transitionDuration');
warn(
'@ember/string/htmlSafe must be used for any `style` passed to ember-attacher',
isEmpty(style) || isHTMLSafe(style),
{ id: 'ember-attacher-require-html-safe-style' }
);

return htmlSafe(`transition-duration: ${transitionDuration}ms; ${style}`);
}),

// This is memoized so it can be used by both attach-popover and attach-tooltip
_config: computed(function() {
return getOwner(this).resolveRegistration('config:environment').emberAttacher || {};
Expand Down Expand Up @@ -206,10 +220,6 @@ export default Component.extend({

_transitionDuration: 0,

_transitionDurationCss: computed('_transitionDuration', function() {
return htmlSafe(`transition-duration: ${this.get('_transitionDuration')}ms`);
}),

/**
* ================== LIFECYCLE HOOKS ==================
*/
Expand Down
1 change: 1 addition & 0 deletions addon/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,6 @@ export default {
showDelay: 0,
showDuration: 300,
showOn: 'mouseenter focus',
style: null,
tooltipClass: 'ember-attacher-popper ember-attacher-tooltip'
};
2 changes: 1 addition & 1 deletion addon/templates/components/attach-popover.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
popperTarget=_currentTarget
registerAPI=(action 'registerAPI')
renderInPlace=renderInPlace as |emberPopper|}}
<div class="{{_class}}" style="{{_transitionDurationCss}}">
<div class="{{_class}}" style="{{_style}}">
{{yield (hash emberPopper=emberPopper hide=(action 'hide'))}}

{{#if arrow}}
Expand Down
40 changes: 40 additions & 0 deletions tests/integration/components/attach-tooltip-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import hbs from 'htmlbars-inline-precompile';
import { find } from 'ember-native-dom-helpers';
import { getOwner } from '@ember/application';
import { moduleForComponent, test } from 'ember-qunit';
import { htmlSafe } from '@ember/string';

QUnit.assert.contains = function(actual, expected, message) {
this.pushResult({
Expand Down Expand Up @@ -96,6 +97,45 @@ test('uses the user-supplied default tooltip class', function(assert) {
);
});

test('uses style passed in by user', function (assert) {
this.set('style', htmlSafe('cursor: pointer;'));
this.render(hbs`
<div>
{{#attach-tooltip id='tooltip-with-style' style=style}}
tooltip text
{{/attach-tooltip}}
</div>
<div>
{{#attach-tooltip id='tooltip-with-no-style'}}
tooltip text
{{/attach-tooltip}}
</div>
`);

const tooltipWithStyle = find('#tooltip-with-style > .ember-attacher-tooltip');

assert.equal(
tooltipWithStyle.style.getPropertyValue('cursor'),
'pointer',
'it adds the user style to tooltips'
);

assert.equal(
tooltipWithStyle.style.getPropertyValue('transition-duration'),
'0ms',
'it adds the default style to tooltips'
);

const tooltipWithNoStyle = find('#tooltip-with-no-style > .ember-attacher-tooltip');

assert.equal(
tooltipWithNoStyle.style.getPropertyValue('transition-duration'),
'0ms',
'it adds the default style to tooltips with no user style'
);
});

test('adds aria-describedby to the target', function(assert) {
this.set('showTooltip', true);

Expand Down

0 comments on commit f78f427

Please sign in to comment.