From f96e1d80d8163d0969b3b9ae9b426523a68d3b25 Mon Sep 17 00:00:00 2001 From: bekzod Date: Thu, 17 Mar 2016 17:46:37 +0500 Subject: [PATCH 1/9] added delay option to tooltip --- addon/mixins/components/tooltips.js | 7 ++- addon/utils/render-tooltip.js | 69 ++++++++++++++++------------- 2 files changed, 43 insertions(+), 33 deletions(-) diff --git a/addon/mixins/components/tooltips.js b/addon/mixins/components/tooltips.js index c9119f29..6cb8573e 100644 --- a/addon/mixins/components/tooltips.js +++ b/addon/mixins/components/tooltips.js @@ -1,7 +1,7 @@ import Ember from 'ember'; import renderTooltip from 'ember-tooltips/utils/render-tooltip'; -const { on } = Ember; +const { on, run } = Ember; const { Tooltip } = window; export default Ember.Mixin.create({ @@ -34,6 +34,7 @@ export default Ember.Mixin.create({ 'showOn', 'spacing', 'tabIndex', + 'delay', 'typeClass', 'visibility', ], @@ -49,6 +50,7 @@ export default Ember.Mixin.create({ tooltipPlace: 'top', tooltipShowOn: null, tooltipSpacing: 10, + tooltipDelay: 0, tooltipTabIndex: 0, // A positive integer (to enable) or -1 (to disable) tooltipTypeClass: null, tooltipVisibility: null, // for manual-mode triggering @@ -212,8 +214,9 @@ export default Ember.Mixin.create({ _tooltipVisibilityDidChange: function() { const tooltip = this.get('tooltip'); + run.cancel(this._delayTimer); if (this.get('tooltipVisibility')) { - tooltip.show(); + this._delayTimer = run.later(tooltip, 'show', this.get('tooltipDelay')); } else { tooltip.hide(); } diff --git a/addon/utils/render-tooltip.js b/addon/utils/render-tooltip.js index ff790d39..fbc032d5 100644 --- a/addon/utils/render-tooltip.js +++ b/addon/utils/render-tooltip.js @@ -21,7 +21,7 @@ export default function renderTooltip(domElement, options, context) { const $domElement = $(domElement); const parsedOptions = parseTooltipOptions(options); - const { content, duration, event, hideOn, tabIndex, showOn } = parsedOptions; + const { content, duration, event, hideOn, tabIndex, showOn, delay } = parsedOptions; const tooltipId = `tooltip-${tooltipIndex}`; let $tooltip, tooltip; @@ -38,6 +38,8 @@ export default function renderTooltip(domElement, options, context) { run.debounce(function() { + run.cancel(tooltip._delayTimer); + /* If we're setting visibility to the value it already is, do nothing... */ @@ -49,40 +51,34 @@ export default function renderTooltip(domElement, options, context) { return; } - /* Else, set the visbility */ - - const visibilityMethod = shouldShow ? 'show' : 'hide'; - - tooltip[visibilityMethod](); - $tooltip.attr('aria-hidden', shouldShow); - - if (context) { - context.set('tooltipVisibility', shouldShow); - } + /* Clean previously queued removal (if present) */ + run.cancel(tooltip._hideTimer); if (shouldShow) { - $domElement.attr('aria-describedby', tooltipId); + tooltip._delayTimer = run.later(function() { + tooltip.show(); + $tooltip.attr('aria-hidden', true); + if (context) { + context.set('tooltipVisibility', true); + } + $domElement.attr('aria-describedby', tooltipId); + if (duration) { + /* Hide tooltip after specified duration */ + const hideTimer = run.later(tooltip, 'hide', duration); + + /* Save timer ID for cancelling should an event + hide the tooltop before the duration */ + tooltip._hideTimer = hideTimer; + } + }, delay); } else { + tooltip.hide(); + $tooltip.attr('aria-hidden', false); + if (context) { + context.set('tooltipVisibility', false); + } $domElement.removeAttr('aria-describedby'); } - - /* Clean previously queued removal (if present) */ - - run.cancel(tooltip._hideTimer); - - if (shouldShow && duration) { - - /* Hide tooltip after specified duration */ - - const hideTimer = run.later(function() { - tooltip.hide(); - }, duration); - - /* Save timer ID for cancelling should an event - hide the tooltop before the duration */ - - tooltip._hideTimer = hideTimer; - } }, 150); } @@ -95,7 +91,7 @@ export default function renderTooltip(domElement, options, context) { function parseTooltipOptions(options = {}) { const newOptions = options; - const { content, duration, event, tabIndex, typeClass } = newOptions; + const { content, duration, event, tabIndex, typeClass, delay } = newOptions; /* Prefix type class */ @@ -139,6 +135,17 @@ export default function renderTooltip(domElement, options, context) { newOptions.duration = cleanDuration; } + if (delay && typeof delay === 'string') { + let cleanDelay = parseInt(delay, 10); + + /* Remove invalid parseInt results */ + + if (isNaN(cleanDelay) || !isFinite(cleanDelay)) { + cleanDelay = 0; + } + + newOptions.delay = cleanDelay; + } /* Make tab index a string */ if (typeof tabIndex === 'number') { From 663adbd7e19747cfa66f638809eab1b8927e5d39 Mon Sep 17 00:00:00 2001 From: bekzod Date: Tue, 17 May 2016 20:47:41 +0500 Subject: [PATCH 2/9] fixed test --- addon/mixins/components/tooltips.js | 2 +- tests/unit/mixins/components/tooltips-test.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/addon/mixins/components/tooltips.js b/addon/mixins/components/tooltips.js index 6cb8573e..a260ab37 100644 --- a/addon/mixins/components/tooltips.js +++ b/addon/mixins/components/tooltips.js @@ -27,6 +27,7 @@ export default Ember.Mixin.create({ 'auto', 'content', 'duration', + 'delay', 'effectClass', 'event', 'hideOn', @@ -34,7 +35,6 @@ export default Ember.Mixin.create({ 'showOn', 'spacing', 'tabIndex', - 'delay', 'typeClass', 'visibility', ], diff --git a/tests/unit/mixins/components/tooltips-test.js b/tests/unit/mixins/components/tooltips-test.js index 1b96c2d7..5a68a0de 100644 --- a/tests/unit/mixins/components/tooltips-test.js +++ b/tests/unit/mixins/components/tooltips-test.js @@ -21,6 +21,7 @@ test('The mixin adds the public properties', function(assert) { 'auto', 'content', 'duration', + 'delay', 'effectClass', 'event', 'hideOn', From 07c7ca7f859452e4199a6c780e0b0ff01292f7f7 Mon Sep 17 00:00:00 2001 From: Jonathan Lepolt Date: Tue, 17 May 2016 20:01:41 -0400 Subject: [PATCH 3/9] Added acceptance tests for tooltip `delay` property --- tests/acceptance/tooltip-delay-open-test.js | 93 +++++++++++++++++++ tests/dummy/app/router.js | 1 + .../app/snippets/tooltip-delay-open-1.hbs | 13 +++ .../app/snippets/tooltip-delay-open-2.hbs | 7 ++ tests/dummy/app/templates/application.hbs | 4 + .../app/templates/tooltip-delay-open.hbs | 50 ++++++++++ 6 files changed, 168 insertions(+) create mode 100644 tests/acceptance/tooltip-delay-open-test.js create mode 100644 tests/dummy/app/snippets/tooltip-delay-open-1.hbs create mode 100644 tests/dummy/app/snippets/tooltip-delay-open-2.hbs create mode 100644 tests/dummy/app/templates/tooltip-delay-open.hbs diff --git a/tests/acceptance/tooltip-delay-open-test.js b/tests/acceptance/tooltip-delay-open-test.js new file mode 100644 index 00000000..db8ada60 --- /dev/null +++ b/tests/acceptance/tooltip-delay-open-test.js @@ -0,0 +1,93 @@ +import Ember from 'ember'; +import { module, test } from 'qunit'; +import startApp from '../helpers/start-app'; +import selectorFor from '../helpers/selector-for'; + +let application; + +module('Acceptance | tooltip delay open', { + + beforeEach() { + application = startApp(); + }, + + afterEach() { + Ember.run(application, 'destroy'); + }, + +}); + +test('Setting the delay property should wait before making tooltip visible', function(assert) { + const delay = 1000; + + visit('/tooltip-delay-open'); + + assert.expect(8); + + let tooltip = 'delay-open-basic'; + let start = Date.now(); + + mouseOver(tooltip); + andThen(function() { + let end = Date.now(); + let diff = end - start; + + assert.equal(Ember.$('.tooltip').length, 1, 'The tooltip should be added to the DOM on hover in the basic test'); + assert.ok(diff > delay, 'The tooltip should be visible after 1000ms in the basic test'); + }); + + mouseOut(tooltip); + + // ...and then start the next test + andThen(function() { + tooltip = 'delay-open-component'; + start = Date.now(); + + mouseOver(tooltip); + andThen(function() { + let end = Date.now(); + let diff = end - start; + + assert.equal(Ember.$('.tooltip').length, 1, 'The tooltip should be added to the DOM in the component test'); + assert.ok(diff > delay, 'The tooltip should be visible after 1000ms in the component test'); + }); + + mouseOut(tooltip); + + }); + + // ...and then start the next test + andThen(function() { + tooltip = 'delay-open-data'; + start = Date.now(); + + click(selectorFor(tooltip)); + andThen(function() { + let end = Date.now(); + let diff = end - start; + + assert.equal(Ember.$('.tooltip').length, 1, 'The tooltip should be added to the DOM in the data test'); + assert.ok(diff > delay, 'The tooltip should be visible after 1000ms in the data test'); + }); + + click(selectorFor(tooltip)); + }); + + // ...and then start the next test + andThen(function() { + tooltip = 'delay-open-input'; + start = Date.now(); + + triggerEvent(selectorFor(tooltip), 'focus'); + andThen(function() { + let end = Date.now(); + let diff = end - start; + + assert.equal(Ember.$('.tooltip').length, 1, 'The tooltip should be added to the DOM in the input test'); + assert.ok(diff > delay, 'The tooltip should be visible after 1000ms in the input test'); + }); + + triggerEvent(selectorFor(tooltip), 'blur'); + }); + +}); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index f631ee26..ab2fad05 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -13,6 +13,7 @@ Router.map(function() { this.route('tooltip-manual-trigger'); this.route('tooltip-auto-close'); this.route('tooltip-with-safestring'); + this.route('tooltip-delay-open'); }); export default Router; diff --git a/tests/dummy/app/snippets/tooltip-delay-open-1.hbs b/tests/dummy/app/snippets/tooltip-delay-open-1.hbs new file mode 100644 index 00000000..ff883250 --- /dev/null +++ b/tests/dummy/app/snippets/tooltip-delay-open-1.hbs @@ -0,0 +1,13 @@ +{{!-- BEGIN-SNIPPET tooltip-delay-open-1 --}} +{{#test-calling-component}} +
+ Click me +
+{{/test-calling-component}} +{{!-- END-SNIPPET --}} diff --git a/tests/dummy/app/snippets/tooltip-delay-open-2.hbs b/tests/dummy/app/snippets/tooltip-delay-open-2.hbs new file mode 100644 index 00000000..7d21588a --- /dev/null +++ b/tests/dummy/app/snippets/tooltip-delay-open-2.hbs @@ -0,0 +1,7 @@ +{{!-- BEGIN-SNIPPET tooltip-delay-open-2 --}} +{{#test-component data-test='auto-close-component'}} + {{#tooltip-on-parent delay='1000' event='mouseenter'}} + Using a component with delay set + {{/tooltip-on-parent}} +{{/test-component}} +{{!-- END-SNIPPET --}} diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 5834973f..c06274f8 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -40,6 +40,10 @@ Automatic close durations {{/paper-item}} + {{#paper-item action='transitionTo' param='tooltip-delay-open'}} + Delay tooltip visibility + {{/paper-item}} + {{paper-divider}} {{#paper-item action='linkTo' param='https://github.com/sir-dunxalot/ember-tooltips'}} diff --git a/tests/dummy/app/templates/tooltip-delay-open.hbs b/tests/dummy/app/templates/tooltip-delay-open.hbs new file mode 100644 index 00000000..c2a48435 --- /dev/null +++ b/tests/dummy/app/templates/tooltip-delay-open.hbs @@ -0,0 +1,50 @@ +
    + +
  • + {{#test-component + tooltipContent='This shows on a hover event after 1000ms' + data-test='delay-open-basic' + tooltipDelay=1000 + }} + Hover over me + {{/test-component}} +
    • + +
  • + {{#test-component data-test='delay-open-component'}} + {{#tooltip-on-parent delay='1000'}} + Using a component with tooltip delay set + {{/tooltip-on-parent}} + Hover over me + {{/test-component}} +
    • + +
  • + {{#test-calling-component}} +
    + Click me +
    + {{/test-calling-component}} +
    • + +
  • + {{input + type='text' + data-test='delay-open-input' + tooltipEvent='focus' + tooltipContent='Delay-opening tooltip on {{input}}' + tooltipDelay='1000' + placeholder='Focus field' + }} +
    • + +
+ +{{code-snippet name='tooltip-delay-open-1.hbs'}} +{{code-snippet name='tooltip-delay-open-2.hbs'}} From e97973d60a487e04dafa482179e378da0e6c4e24 Mon Sep 17 00:00:00 2001 From: Jonathan Lepolt Date: Tue, 17 May 2016 20:15:28 -0400 Subject: [PATCH 4/9] Updated README.md file with `delay` docs --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index da1e5b76..f75949f9 100644 --- a/README.md +++ b/README.md @@ -160,6 +160,7 @@ This addon aims to maintain parity with all the [Tooltip library](https://github Current tooltip properties this addon supports are: - `auto` (`true` or `false`. Defaults to `true`) +- `delay` (time in milliseconds. No default) - `duration` (time in milliseconds. No default) - `effectClass` (`'none'`, `'fade'`, `'slide'`, or `'grow'`. Defaults to `'slide'`) - `event` (see [events](#events)) @@ -282,6 +283,18 @@ You can set a timer on a tooltip to close it after an amount of time using the ` In the above example, the tooltip shows on focus and then closes after 1000ms. + +You can also set a timer on a tooltip to delay its visibility using the `delay` property. Delay should be any number of milliseconds. + +```hbs +{{some-component + tooltipContent='Something excellent' + tooltipDelay='1000' +}} +``` + +In the above example, the tooltip will show on hover after 1000ms. + ### Accessibility This addon aims to meet 508 compliance. From 2595939074075bcd8bcaa1f050d2160a2849873d Mon Sep 17 00:00:00 2001 From: Jonathan Lepolt Date: Wed, 18 May 2016 10:56:59 -0400 Subject: [PATCH 5/9] Fix issue where using bindings with SafeStrings would crash the Tooltip library. Added tests. --- addon/mixins/components/tooltips.js | 7 +++++- .../tooltip-with-safestring-test.js | 22 +++++++++++++++++++ .../controllers/tooltip-with-safestring.js | 18 +++++++++++++++ .../app/templates/tooltip-with-safestring.hbs | 4 ++++ 4 files changed, 50 insertions(+), 1 deletion(-) diff --git a/addon/mixins/components/tooltips.js b/addon/mixins/components/tooltips.js index a260ab37..3f00404b 100644 --- a/addon/mixins/components/tooltips.js +++ b/addon/mixins/components/tooltips.js @@ -199,7 +199,12 @@ export default Ember.Mixin.create({ const tooltip = this.get('tooltip'); if (tooltip) { - tooltip.content(this.get('tooltipContent')); + let tooltipContent = this.get('tooltipContent'); + if (tooltipContent instanceof Ember.Handlebars.SafeString) { + // Convert SafeString to regular string + tooltipContent = tooltipContent.toString(); + } + tooltip.content(tooltipContent); } }, diff --git a/tests/acceptance/tooltip-with-safestring-test.js b/tests/acceptance/tooltip-with-safestring-test.js index 31a3a5c4..a1aa051b 100644 --- a/tests/acceptance/tooltip-with-safestring-test.js +++ b/tests/acceptance/tooltip-with-safestring-test.js @@ -1,6 +1,7 @@ import Ember from 'ember'; import { module, test } from 'qunit'; import startApp from '../helpers/start-app'; +import selectorFor from '../helpers/selector-for'; let application; @@ -25,3 +26,24 @@ test('Rendering safestring works', function(assert) { }); }); + +test('Binding to property that returns different safestrings works', function(assert) { + + visit('/tooltip-with-safestring'); + + assert.expect(12); + + assertTooltipProperties(assert, 'toggle-safestrings', { + content: 'SafeString 1', + }); + + // Clicking button will toggle the text + click(selectorFor('button')); + + andThen(function() { + assertTooltipProperties(assert, 'toggle-safestrings', { + content: 'SafeString 2', + }); + }); + +}); diff --git a/tests/dummy/app/controllers/tooltip-with-safestring.js b/tests/dummy/app/controllers/tooltip-with-safestring.js index 7a4c6afa..684ad761 100644 --- a/tests/dummy/app/controllers/tooltip-with-safestring.js +++ b/tests/dummy/app/controllers/tooltip-with-safestring.js @@ -6,8 +6,26 @@ export default Ember.Controller.extend({ debugging() { this.transitionToRoute('index'); }, + + toggle() { + this.toggleProperty('toggle'); + }, }, safeString: new Ember.Handlebars.SafeString('this is a test'), + toggle: true, + + safeStringToggle: Ember.computed('toggle', function() { + let toggle = this.get('toggle'); + let safeString; + + if (toggle) { + safeString = new Ember.Handlebars.SafeString('SafeString 1'); + } else { + safeString = new Ember.Handlebars.SafeString('SafeString 2'); + } + + return safeString; + }), }); diff --git a/tests/dummy/app/templates/tooltip-with-safestring.hbs b/tests/dummy/app/templates/tooltip-with-safestring.hbs index 0558df07..f46dc069 100644 --- a/tests/dummy/app/templates/tooltip-with-safestring.hbs +++ b/tests/dummy/app/templates/tooltip-with-safestring.hbs @@ -1 +1,5 @@ {{test-component tooltipContent=safeString data-test='on-inline-component'}} + +{{test-component tooltipContent=safeStringToggle data-test='toggle-safestrings'}} + +
Click me!
From 9c85ac43d25025414f33690aedae1c593cb4deb9 Mon Sep 17 00:00:00 2001 From: Sam De Maeyer Date: Thu, 19 May 2016 22:32:11 +0100 Subject: [PATCH 6/9] fix aria-hidden bug --- addon/utils/render-tooltip.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addon/utils/render-tooltip.js b/addon/utils/render-tooltip.js index fbc032d5..450bcc46 100644 --- a/addon/utils/render-tooltip.js +++ b/addon/utils/render-tooltip.js @@ -57,7 +57,7 @@ export default function renderTooltip(domElement, options, context) { if (shouldShow) { tooltip._delayTimer = run.later(function() { tooltip.show(); - $tooltip.attr('aria-hidden', true); + $tooltip.attr('aria-hidden', false); if (context) { context.set('tooltipVisibility', true); } @@ -73,7 +73,7 @@ export default function renderTooltip(domElement, options, context) { }, delay); } else { tooltip.hide(); - $tooltip.attr('aria-hidden', false); + $tooltip.attr('aria-hidden', true); if (context) { context.set('tooltipVisibility', false); } From ee59a389f4d0e0407828a9027175acbf1d73ab8c Mon Sep 17 00:00:00 2001 From: Ricardo Mendes Date: Sat, 21 May 2016 16:34:56 +0100 Subject: [PATCH 7/9] Skips JavaScript import if on FastBoot (#55) * Skips JavaScript import if on FastBoot * Adds missing negation operator. --- index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 5a959fde..71f073df 100644 --- a/index.js +++ b/index.js @@ -9,7 +9,9 @@ module.exports = { /* Load from vendor until browserify becomes first-class in Ember CLI */ - app.import('vendor/tooltip/tooltip.js'); + if (!process.env.EMBER_CLI_FASTBOOT) { + app.import('vendor/tooltip/tooltip.js'); + } app.import('vendor/tooltip/tooltip.css'); app.import('vendor/tooltip/tooltip-custom.css'); From da2ab6a39f1105100341e6715e28722b88ee2529 Mon Sep 17 00:00:00 2001 From: Jonathan Lepolt Date: Sat, 21 May 2016 11:35:19 -0400 Subject: [PATCH 8/9] Add new `delayOnChange` option to quickly open subsequent tooltips (#63) * Add new `delayOnChange` option * Fixed tests --- addon/mixins/components/tooltips.js | 2 + addon/utils/render-tooltip.js | 13 +++++- tests/acceptance/tooltip-delay-open-test.js | 45 +++++++++++++++++++ .../app/snippets/tooltip-delay-open-3.hbs | 16 +++++++ .../app/templates/tooltip-delay-open.hbs | 22 +++++++++ tests/unit/mixins/components/tooltips-test.js | 5 ++- 6 files changed, 100 insertions(+), 3 deletions(-) create mode 100644 tests/dummy/app/snippets/tooltip-delay-open-3.hbs diff --git a/addon/mixins/components/tooltips.js b/addon/mixins/components/tooltips.js index 3f00404b..5b407fcb 100644 --- a/addon/mixins/components/tooltips.js +++ b/addon/mixins/components/tooltips.js @@ -28,6 +28,7 @@ export default Ember.Mixin.create({ 'content', 'duration', 'delay', + 'delayOnChange', 'effectClass', 'event', 'hideOn', @@ -51,6 +52,7 @@ export default Ember.Mixin.create({ tooltipShowOn: null, tooltipSpacing: 10, tooltipDelay: 0, + tooltipDelayOnChange: true, // tooltips should listen to the above `delay` option by default tooltipTabIndex: 0, // A positive integer (to enable) or -1 (to disable) tooltipTypeClass: null, tooltipVisibility: null, // for manual-mode triggering diff --git a/addon/utils/render-tooltip.js b/addon/utils/render-tooltip.js index 450bcc46..68749c3c 100644 --- a/addon/utils/render-tooltip.js +++ b/addon/utils/render-tooltip.js @@ -21,7 +21,7 @@ export default function renderTooltip(domElement, options, context) { const $domElement = $(domElement); const parsedOptions = parseTooltipOptions(options); - const { content, duration, event, hideOn, tabIndex, showOn, delay } = parsedOptions; + const { content, duration, event, hideOn, tabIndex, showOn, delay, delayOnChange } = parsedOptions; const tooltipId = `tooltip-${tooltipIndex}`; let $tooltip, tooltip; @@ -55,6 +55,15 @@ export default function renderTooltip(domElement, options, context) { run.cancel(tooltip._hideTimer); if (shouldShow) { + + let showTooltipDelay = delay; + if (!delayOnChange) { + // If the `delayOnChange` property is set to false, we don't want to delay opening this tooltip if there is + // already a tooltip visible in the DOM. Check that here and adjust the delay as needed. + let visibleTooltips = Ember.$('.tooltip').length; + showTooltipDelay = visibleTooltips ? 0 : delay; + } + tooltip._delayTimer = run.later(function() { tooltip.show(); $tooltip.attr('aria-hidden', false); @@ -70,7 +79,7 @@ export default function renderTooltip(domElement, options, context) { hide the tooltop before the duration */ tooltip._hideTimer = hideTimer; } - }, delay); + }, showTooltipDelay); } else { tooltip.hide(); $tooltip.attr('aria-hidden', true); diff --git a/tests/acceptance/tooltip-delay-open-test.js b/tests/acceptance/tooltip-delay-open-test.js index db8ada60..3828a58b 100644 --- a/tests/acceptance/tooltip-delay-open-test.js +++ b/tests/acceptance/tooltip-delay-open-test.js @@ -91,3 +91,48 @@ test('Setting the delay property should wait before making tooltip visible', fun }); }); + +test('Setting the delayOnChange property should make tooltip visible immediately if another tooltip is open', function(assert) { + const delay = 1000; + + assert.expect(4); + + visit('/tooltip-delay-open'); + + let tooltip = 'delay-on-change-2'; + let start = Date.now(); + + mouseOver(tooltip); + andThen(function() { + let end = Date.now(); + let diff = end - start; + + assert.equal(Ember.$('.tooltip').length, 1, 'The tooltip should be added to the DOM on hover with delayOnChange set to false and no other tooltips visible'); + assert.ok(diff > delay, 'The tooltip should be visible after 1000ms in the default delayOnChange test'); + + mouseOut(tooltip); + }); + + andThen(function() { + tooltip = 'delay-on-change-1'; + + mouseOver(tooltip); + andThen(function() { + tooltip = 'delay-on-change-2'; + start = Date.now(); + + assert.equal(Ember.$('.tooltip').length, 1, 'The first tooltip should be added to the DOM like normal'); + + mouseOver(tooltip); + andThen(function() { + let end = Date.now(); + let diff = end - start; + + assert.ok(diff < delay, 'The tooltip should be visible before 1000ms with delayOnChange set to false and another tooltip already visible'); + }); + + }); + + }); + +}); diff --git a/tests/dummy/app/snippets/tooltip-delay-open-3.hbs b/tests/dummy/app/snippets/tooltip-delay-open-3.hbs new file mode 100644 index 00000000..8c51aa7b --- /dev/null +++ b/tests/dummy/app/snippets/tooltip-delay-open-3.hbs @@ -0,0 +1,16 @@ +{{!-- BEGIN-SNIPPET tooltip-delay-open-3 --}} +{{#test-component + tooltipContent='This will open after 1000ms' + tooltipDelay=1000 +}} +Hover over me first +{{/test-component}} + +{{#test-component + tooltipContent='This will open immediately if there is already another tooltip visible, otherwise will delay 1000ms' + tooltipDelay=1000 + tooltipDelayOnChange=false +}} + Hover over me second +{{/test-component}} +{{!-- END-SNIPPET --}} diff --git a/tests/dummy/app/templates/tooltip-delay-open.hbs b/tests/dummy/app/templates/tooltip-delay-open.hbs index c2a48435..ef2bd5b1 100644 --- a/tests/dummy/app/templates/tooltip-delay-open.hbs +++ b/tests/dummy/app/templates/tooltip-delay-open.hbs @@ -44,7 +44,29 @@ }} +
  • + {{#test-component + data-test='delay-on-change-1' + tooltipContent='This will open after 1000ms' + tooltipDelay=1000 + }} + Hover over me first + {{/test-component}} + + {{#test-component + data-test='delay-on-change-2' + tooltipContent='This will open immediately if there is already another tooltip visible, otherwise will delay 1000ms' + tooltipDelay=1000 + tooltipDelayOnChange=false + }} + Hover over me second + {{/test-component}} +
    • + {{code-snippet name='tooltip-delay-open-1.hbs'}} {{code-snippet name='tooltip-delay-open-2.hbs'}} + +
    Using `delayOnChange=false` with `delay`
    +{{code-snippet name='tooltip-delay-open-3.hbs'}} diff --git a/tests/unit/mixins/components/tooltips-test.js b/tests/unit/mixins/components/tooltips-test.js index 5a68a0de..4f7a4675 100644 --- a/tests/unit/mixins/components/tooltips-test.js +++ b/tests/unit/mixins/components/tooltips-test.js @@ -22,6 +22,7 @@ test('The mixin adds the public properties', function(assert) { 'content', 'duration', 'delay', + 'delayOnChange', 'effectClass', 'event', 'hideOn', @@ -35,6 +36,8 @@ test('The mixin adds the public properties', function(assert) { tooltipAuto: true, tooltipContent: null, tooltipDuration: null, + tooltipDelay: 0, + tooltipDelayOnChange: true, tooltipEffectClass: 'slide', tooltipEvent: 'hover', tooltipHideOn: null, @@ -46,7 +49,7 @@ test('The mixin adds the public properties', function(assert) { tooltipVisibility: null, }; - assert.expect(14); + assert.expect(16); Object.keys(expectedProperties).forEach(function(expectedProperty) { const expectedValue = expectedProperties[expectedProperty]; From 2935cb21b070782ee9135c497d7791644785b441 Mon Sep 17 00:00:00 2001 From: Duncan Graham Walker Date: Sat, 21 May 2016 11:38:33 -0400 Subject: [PATCH 9/9] Release 0.7.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f5c873be..dfad4a9b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ember-tooltips", - "version": "0.6.0", + "version": "0.7.0", "description": "The default blueprint for ember-cli addons.", "directories": { "doc": "doc",