From df9f42facf030f37363b6f06f5087b5efbc91419 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sat, 16 Feb 2019 15:52:11 +0100 Subject: [PATCH] Allow displaying buttons on single highlight elements --- .eslintrc.json | 1 - src/common/constants.js | 6 ++++-- src/core/popover.js | 18 +++++++++++++++++- src/driver.scss | 19 ++++++++++++++++--- src/index.js | 34 +++++++++++++++++----------------- 5 files changed, 54 insertions(+), 24 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 96b5943..504ef44 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,7 +4,6 @@ "browser": true }, "rules": { - "no-console": "off", "no-underscore-dangle": "off", "no-plusplus": "off", "no-cond-assign": "off", diff --git a/src/common/constants.js b/src/common/constants.js index 5f29118..f8cf097 100644 --- a/src/common/constants.js +++ b/src/common/constants.js @@ -27,6 +27,8 @@ export const CLASS_CLOSE_BTN = 'driver-close-btn'; export const CLASS_NEXT_STEP_BTN = 'driver-next-btn'; export const CLASS_PREV_STEP_BTN = 'driver-prev-btn'; export const CLASS_BTN_DISABLED = 'driver-disabled'; +export const CLASS_CLOSE_ONLY_BTN = 'driver-close-only-btn'; +export const CLASS_NAVIGATION_BTNS = 'driver-navigation-btns'; // NOTE: It must match the one set in the animations in CSS file export const ANIMATION_DURATION_MS = 300; @@ -37,9 +39,9 @@ export const POPOVER_HTML = (className = '') => `
Popover Title
Popover Description
-
+
- + diff --git a/src/core/popover.js b/src/core/popover.js index d33498e..eeb9e93 100644 --- a/src/core/popover.js +++ b/src/core/popover.js @@ -2,6 +2,7 @@ import Element from './element'; import { CLASS_BTN_DISABLED, CLASS_CLOSE_BTN, + CLASS_CLOSE_ONLY_BTN, CLASS_NEXT_STEP_BTN, CLASS_POPOVER_DESCRIPTION, CLASS_POPOVER_FOOTER, @@ -190,12 +191,27 @@ export default class Popover extends Element { this.prevBtnNode.innerHTML = this.options.prevBtnText; this.closeBtnNode.innerHTML = this.options.closeBtnText; + const hasSteps = this.options.totalCount && this.options.totalCount !== 1; + // If there was only one item, hide the buttons - if (!this.options.showButtons || !this.options.totalCount || this.options.totalCount === 1) { + if (!this.options.showButtons) { this.footerNode.style.display = 'none'; return; } + // If this is just a single highlighted element i.e. there + // are no other steps to go to – just hide the navigation buttons + if (!hasSteps) { + this.nextBtnNode.style.display = 'none'; + this.prevBtnNode.style.display = 'none'; + this.closeBtnNode.classList.add(CLASS_CLOSE_ONLY_BTN); + } else { + // @todo modify CSS to use block + this.nextBtnNode.style.display = 'inline-block'; + this.prevBtnNode.style.display = 'inline-block'; + this.closeBtnNode.classList.remove(CLASS_CLOSE_ONLY_BTN); + } + this.footerNode.style.display = 'block'; if (this.options.isFirst) { this.prevBtnNode.classList.add(CLASS_BTN_DISABLED); diff --git a/src/driver.scss b/src/driver.scss index 41790e8..090556e 100644 --- a/src/driver.scss +++ b/src/driver.scss @@ -107,8 +107,7 @@ div#driver-popover-item { .driver-popover-footer { display: block; - clear: both; - margin-top: 5px; + margin-top: 10px; button { display: inline-block; @@ -123,7 +122,6 @@ div#driver-popover-item { background-color: $button-bg; border-radius: 2px; zoom: 1; - margin: 10px 0 0; line-height: 1.3; } @@ -137,6 +135,10 @@ div#driver-popover-item { float: left; } + .driver-close-only-btn { + float: right; + } + .driver-btn-group { float: right; } @@ -162,6 +164,17 @@ div#driver-popover-item { } } +.driver-clearfix:before { + content: ""; + display: table; +} + +.driver-clearfix:after { + clear: both; + content: ""; + display: table; +} + .driver-stage-no-animation { -webkit-transition: none !important; -moz-transition: none !important; diff --git a/src/index.js b/src/index.js index 934082f..95615a2 100644 --- a/src/index.js +++ b/src/index.js @@ -182,13 +182,17 @@ export default class Driver { return; } - // Arrow keys to only perform if it is stepped introduction - if (this.steps.length !== 0) { - if (event.keyCode === RIGHT_KEY_CODE) { - this.handleNext(); - } else if (event.keyCode === LEFT_KEY_CODE) { - this.handlePrevious(); - } + // If there is no highlighted element or there is a highlighted element + // without popover or if the popover does not allow buttons - ignore + const highlightedElement = this.getHighlightedElement(); + if (!highlightedElement || !highlightedElement.popover || !highlightedElement.popover.options.showButtons) { + return; + } + + if (event.keyCode === RIGHT_KEY_CODE) { + this.handleNext(); + } else if (event.keyCode === LEFT_KEY_CODE) { + this.handlePrevious(); } } @@ -226,7 +230,7 @@ export default class Driver { // Call the bound `onNext` handler if available const currentStep = this.steps[this.currentStep]; - if (currentStep.options.onNext) { + if (currentStep && currentStep.options && currentStep.options.onNext) { currentStep.options.onNext(this.overlay.highlightedElement); } @@ -246,7 +250,7 @@ export default class Driver { // Call the bound `onPrevious` handler if available const currentStep = this.steps[this.currentStep]; - if (currentStep.options.onPrevious) { + if (currentStep && currentStep.options && currentStep.options.onPrevious) { currentStep.options.onPrevious(this.overlay.highlightedElement); } @@ -357,7 +361,7 @@ export default class Driver { * @private */ prepareElementFromStep(currentStep, allSteps = [], index = 0) { - let elementOptions = {}; + let elementOptions = { ...this.options }; let querySelector = currentStep; // If the `currentStep` is step definition @@ -388,23 +392,19 @@ export default class Driver { ].filter(c => c).join(' '); const popoverOptions = { - ...this.options, + ...elementOptions, ...elementOptions.popover, className: mergedClassNames, totalCount: allSteps.length, currentIndex: index, isFirst: index === 0, - isLast: index === allSteps.length - 1, + isLast: allSteps.length === 0 || index === allSteps.length - 1, // Only one item or last item }; popover = new Popover(popoverOptions, this.window, this.document); } - const stageOptions = { - ...this.options, - ...elementOptions, - }; - + const stageOptions = { ...elementOptions }; const stage = new Stage(stageOptions, this.window, this.document); return new Element({ -- GitLab