Guía interactiva para la aplicación web-driver. js

Vista prévia

Descripción

Driver. js es una biblioteca de JavaScript ligera pero potente para crear una guía visual animada, interactiva y fácil de usar para cualquier elemento Web.

Características

• Con o sin animaciones.
• Con o sin superposición de fondo.
• Resalta los elementos Web cuando la guía está activa.
• Estilo popover guía paso a paso.

¿Cómo funciona?

Instalación.

# Yarn
$ yarn add driver.js

# NPM
$ npm install driver.js --save

Inserte los archivos JavaScript y CSS de driver. js en el documento HTML.

<link rel="stylesheet" href="/path/to/driver.min.css">
<script src="/path/to/driver.min.js"></script>

Crea una nueva instancia de driver y estamos listos para irnos.

const myDriver = new Driver();

Resalte un elemento específico dentro del documento.

myDriver.highlight('#element');

Resalte un elemento específico con un popover.

myDriver.highlight({

element: '#element',

popover: {


title: 'Popover Title',


description: 'Description',

}
});

Cree una guía paso a paso.

// define your steps
myDriver.defineSteps([

{


element: '#element-1',


popover: {



title: 'Title 1',



description: 'Desc 1',



position: 'left',



offset: 20


}

},

{


element: '#element-2',


popover: {



title: 'Title 2',



description: 'Desc 2',



position: 'right'


}

},

{


element: '#element-3',


popover: {



title: 'Title 3',



description: 'Desc 3',



position: 'right'


}

},

...
]);

// start the guide
driver.start();

Todas las opciones posibles para el driver. js.

const driver = new Driver({




// className to wrap driver.js popover



className: 'scoped-class',








// enable the animation



animate: true,




// background opacity



opacity: 0.75,





 // padding of element











 padding: 10,




 // is closable?



allowClose: true,




 // Allow controlling through keyboard (escape to close, arrow keys to move)



keyboardControl: true,




// Whether the click on overlay should move next



overlayClickNext: false,







// text on the Done button



doneBtnText: 'Done',




 // text on the Close button



closeBtnText: 'Close',






// background color







stageBackground: '#ffffff',




// text on the Next button



nextBtnText: 'Next',




// text on the Prev button



prevBtnText: 'Previous',




// shows navigation buttons



showButtons: false,




// scrollIntoView options



scrollIntoViewOptions: {},




// callback functions



onHighlightStarted: (Element) {},



onHighlighted: (Element) {},



 onDeselected: (Element) {},




onReset: () {},




 onNext: () {},



onPrevious: () {}





 });

Todas las opciones posibles para los pasos.

myDriver.defineSteps([

{



// element to highlight


element: '#some-item',



 // custom stage background color


stageBackground: '#ffffff',



popover: {












 className: 'popover-class',



 title: 'Title',



description: 'Description',



 showButtons: false,



 doneBtnText: 'Done',



closeBtnText: 'Close',



nextBtnText: 'Next',



 prevBtnText: 'Previous',


},



// callbacks


onNext: () => {},


onPrevious: () => {}

}
]);

API methods.

// checkes if is activated
myDriver.isActivated

// defines steps
driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]);

// starts a specified step
driver.start(stepNumber = 0);

// moves to the next step
driver.moveNext();

// moves to the previous step
driver.movePrevious();

// checks if has the next step
driver.hasNextStep();

// checks if has the previous step
driver.hasPreviousStep();

// prevents the current move
driver.preventMove();

// highlights a specified element/step
driver.highlight(string|stepDefinition);

// refreshes the driver.js
driver.refresh();

// resets the driver.js
driver.reset();

// clear immediately or not
driver.reset(clearImmediately = false);

// checks if has highlighted element
driver.hasHighlightedElement()

// gets the currently highlighted element
const activeElement = driver.getHighlightedElement();

// gets the last highlighted element
const lastActiveElement = driver.getLastHighlightedElement();

// gets screen co-ordinates of the active element
activeElement.getCalculatedPosition();

 // hides the popover
activeElement.hidePopover();

// shows the popover
activeElement.showPopover();

// gets the DOM node of the highlighted element
activeElement.getNode();

Registro de cambios

v0.9.3 (02/24/2019)

• actualizar

v0.9.2 (02/10/2019)

• Agregue más opciones
• Doc ha actualizado

v0.7.1 (10/12/2018)

• Agregue más opciones
• Optimizar

v0.6.0 (06/30/2018)

• Agregue compatibilidad con acciones asincrónicas

v0.5.2 (05/23/2018)

• Agregue la opción keyboardControl y el error tipográfico en el archivo Léame