A confirmation dialog which should closely mimic the ability of a plain JavaScript confirm command. This dialog provides confirm and cancel callbacks to run based on what the user clicks. It is also highly customizable.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
gulp-tasks
test
.bowerrc
.editorconfig
.gitignore
.jscsrc
README.md
bower.json
build.properties
gulpfile.js
index.html
now-confirm-dialog.d.ts
now-confirm-dialog.html
now-confirm-dialog.js
now-confirm-dialog.js.map
now-confirm-dialog.ts
package-lock.json
package.json
tsconfig.json
wct.conf.js

README.md

<now-confirm-dialog>

A confirmation dialog which should closely mimic the ability of a plain JavaScript confirm command. This dialog provides confirm and cancel callbacks to run based on what the user clicks. It is also highly customizable.

Example

Below is a couple of examples of how to define now-confirm-dialog

<!-- This one will have a pink cancel button that says 'NOPE', purple confirm button that says 'YUP' -->
<now-confirm-dialog
	id="basic"
	dialog-title="Basic Confirmation Dialog Title"
	dialog-text="Here is some text for the dialog. Yes?"
	confirm-button-background="purple"
	confirm-button-color="black"
	cancel-button-background="pink"
	cancel-button-color="black"
	cancel-button-text="Nope"
	confirm-button-text="Yup">
</now-confirm-dialog>

<!-- This one will not have a cancel button -->
<now-confirm-dialog
	id="noCancel"
	dialog-title="Basic Confirmation Dialog Title"
	dialog-text="Here is some text for the dialog. Yes?"
	no-cancel-button>
</now-confirm-dialog>

Then to use it

	let dialog = document.querySelector('#basic');
	let confirmCallback = function() {
		// Do something if the dialog is confirmed
	};
	let cancelCallback = function() {
		// Do something else if the dialog is cancelled
	}
	dialog.open(confirmCallback, cancelCallback);

Setup

First, make sure you have Nodejs installed, so we can use the Node package manager (NPM) Next, install the other key tools:

You can install them with these commands:

[sudo] npm install --global gulp bower typescript typings web-component-tester

Next, install dependencies that are managed by NPM:

[sudo] npm install

Install dependencies that are managed by Bower:

bower install

Install the TypeScript type definitions:

typings install

Running

To view this element, its tests, and demo, simply point your browser to indexhtml

Building

This project is built using Gulp; the file gulpfilejs contains several build tasks Many IDEs and text editors have Gulp integration, so look for integration in your tool of choice

You can also run Gulp from the command line; here are some common tasks:

gulp serve - Builds the component and runs a local web server (usually on port 5000) that will automatically reload changes you make on disk in the browser After you run this command, just open your browser to http://localhost:5000/ The page should refresh automatically when you change the source

gulp - Default target; builds the component for distribution

test - Run the tests

NOTE: Make sure you check in js, map, and dts files generated by the build These will be used by projects that use your component

You can see the other tasks (such as clean) in the gulpfilejs

Customizing

To customize the project, just replace 'now-starter-element' with the name of your element (this includes file names as well as text inside of html and ts files) You will want to rename the TypeScript class as well

NOTE: Make sure you update bower.json so that the name of the component is correct! Otherwise when someone installs it, it'll be installed as now-starter-element.

Testing

Be sure to update the test suite in the test folder with tests for your component! with tests for your component!