npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-dialog

v3.1.0

Published

Ember Dialog is a simplest way to create dialogs

Downloads

150

Readme

ember-dialog license Build Status Code Climate Codacy Badge Codacy Badge dependencies Status devDependencies Status

A lightweight and powerful Ember Addon that allows you to easily create routable dialog windows and control their closing. It consists of a service that is available from any object and a component which is a dialog-window itself.

With ember-dialog you can create any popups like dialogs, modals, notices, bubbles etc. We have decided do not include realization of all this features to the library for minification reasons. Instead of it we have written absolute documentation how you can make it your own (see cookbook and tutorial with examples). You can look the library's code on github and get surprised how much code on aboard to realize all features, presented on this site.

Installation

Installing the library is as easy as:

ember install ember-dialog

About

The principle of work is simple. Service is instructed to display a modal window (show, alert, confirm or blank methods), creates a component instance with required layout and template, then renders it, and attaches it to the body. At this point, it also creates a Promise, "handles" of which puts into the component and returns it. The component has 2 actions on aboard: one for resolved closing, another one for rejected closing. Actions available within the template and can be called, for instance by clicking on the button (in the layout or in the template). When you call an action, one of the Promise's method is executed and triggered independent "accepted" or "declined" event. The dialog service when gets the event destroys component object and detaches it from the DOM.

Let's say you want to ask user confirm an action. You should call show method of the dialog service with a layout path (you needed dialog window with two buttons - confirm layout what you need) and a path to template that you want to show the user in the modal window. Method creates and shows dialog window and returns a Promise, that will become resolved or rejected when window closed (it's depend on which button user has clicked).

// The `dialog/confirm` - predefined layout template
// The `messages/hello` - template that you'd like to show.
// Notice: this template should be found in your project by path `app/templates/messages/hello`
const layoutName = "dialog/confirm";
const templateName = "messages/hello";
const promise = this.get("dialog").show(layoutName, templateName);

const yes = () => { console.log(`yes pressed`); };
const no = () => { console.log(`no pressed`); };

promise.then(yes, no);

For more information and demos, visit the site.

Dialog types (predefined layouts)

ember-dialog has next layouts on aboard: alert, confirm and blank.

Alert

This layout has only 'yes' - button clicking on which the modal window closes as resolved. It also has X-button which closes modal window as resolved. The promise object always resolved on modal closing. May be used for showing an information to the user. See docs.

Confirm

In practice, the most widely used layout. It has 2 buttons, which closes dialog window. One of them closes window as resolved, another one closes as rejected. It also has X-button which closes window as rejected (for obvious reasons). See docs.

Blank

The most simple layout. It has nothing on aboard. May be used for creating custom dialog windows with its own logic of showing elements and closing. In practice often used for showing forms, in this cases accept closing carried on submit action. Convenient to use in conjunction with ember-validation (TBD:Usecase). See docs.

Styles

Styles were written on sass language, you're able to include them into you project.

Add path to sassOptions.includePaths in your ember-cli-build.js (example below).

var app = new EmberApp(defaults, {
  sassOptions: {
    includePaths: [ 'node_modules/ember-dialog/addon/styles' ]
  }
});

Include them in your app/styles/app.scss:

@import "ember-dialog";

If you have your own style of the dialog windows you may use just structure styles:

@import "ember-dialog/structure";

Usage

Showing user a simple message from controller

export default Ember.Controller({

  showDialog() {
    // Will be used `app/templates/error-message.hbs`
    this.get("dialog").alert("error-message");
  }

});

Showing user a simple message from template

  <button onclick={{action dialog.alert "confirm-delete" this (hash acceptHandler=(action "deleteRecord"))}}>Delete record</button>

Showing user a simple message to confirm action

export default Ember.Controller({

  showDialog() {

    const yes = () => { console.log("Yes"); };
    const no = () => { console.log("No"); };

    // Will be used `app/templates/messages/are-you-sure.hbs`
    this.get("dialog").confirm("messages/are-you-sure").then(yes, no);

  }

});

Binding data in the dialog

Controller:

export default Ember.Controller({

  now: now Date(),

  model: { username: "ajile" },

  showDialog() {

    // Will be used `app/templates/messages/hello.hbs`
    this.get("dialog").alert("messages/hello", this);

  }

});

Template messages/hello.hbs:

<div>Hello, {{contextObject.model.username}}! Now: {{contextObject.now}}. Click <button onclick={{action "accept"}}>the button</button> to close the dialog.</div>

Interrupt closing of the dialog window

export default Ember.Controller({

  count: 0,

  showDialog() {
    // Will be used `app/templates/messages/click-counter.hbs`
    this.get("dialog").alert("messages/click-counter", null, {
      acceptHandler: "yesHandler"
    });
  },

  actions: {
    yesHandler(presenter) {
      const count = this.get("count");
      if (count < 5) {
        console.log("Count less then five");
        this.set("count", ++count);
      } else {
        presenter.accept();
      }
    }
  }

});

Manual closing dialog window

export default Ember.Controller({

  showDialog() {

    // Any created dialog will be closed in 1s
    this.get("dialog").on("created", (presenter) => {
      Ember.run.later(presenter, presenter.accept, 1000);
    });

    // Will be used `app/templates/messages/something.hbs`
    this.get("dialog").alert("messages/something");

  }

});

Creating new layouts

Controller:

export default Ember.Controller({

  showDialog() {
    // Will be used `app/templates/dialog-layouts/delete.hbs` as layout and
    // `app/templates/messages/are-you-sure.hbs` as template.
    this.get("dialog").show("dialog-layouts/delete", "messages/delete-user");
  }

});

Template dialog-layouts/delete.hbs:

<h1 style="color: #F00;">Confirm Deletion</h1>
<div class="body">
  {{#if templateName}}
    <div class="dialog-body">{{partial templateName}}</div>
  {{else}}
    {{component "dialog-body" layout=template contextObject=contextObject context=context class="dialog-body"}}
  {{/if}}
</div>
<button class="danger" onclick={{action "accept"}}>DELETE!</button>
<button onclick={{action "decline"}}>Cancel</button>

Template messages/delete-user.hbs:

Really?

The result:

<h1 style="color: #F00;">Confirm Deletion</h1>
<div class="body">
  Really?
</div>
<button class="danger" onclick="function(){...}">DELETE!</button>
<button onclick="function(){...}">Cancel</button>

Extend dialog manager

Execute ember g service dialog.

File app/services/dialog.js:

import Dialog from "ember-dialog/services/dialog";

export default Dialog.extend({

  confirmDelete() {
    const args = Array.prototype.slice.apply(arguments);
    args.unshift("dialog-layouts/delete");
    this.show(...args);
  }

});

Contributing

The library is under constant develoment. We stick to concept of Ember releases - every 6 monthes we release new version. We do so to sync with new Ember features.

If you find something lacking in the library functions - add issue on github, we shall process it. We are open to any cooperation. Feel free to send us Pull Requests.

Also you may send all incoming issues to slack.