New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP - Version 0.5.0 #173

Closed
wants to merge 11 commits into
base: master
from

Conversation

Projects
None yet
5 participants
@fabien-d
Owner

fabien-d commented Oct 6, 2013

The todo list will be growing...

Todo

Alert

  • Set passed title message
  • OK button

Confirm

  • Set passed title message
  • OK button
  • Cancel button

Prompt

  • Set passed title message
  • OK button
  • Cancel button
  • Input field
  • Set default input field value

Common

  • Finalize base theme. #187
  • Set proper alertify--TYPE class name
  • Handle attempt to open multiple dialogs at one time.
  • Keep focus inside dialog
  • Reset the focus to the last focused element before the dialog was open
  • Show cover when dialog opens
  • Update ARIA attributes based on state
  • Keyboard shortcut - ESC = cancel, Enter = OK

Questions

  • Add growl notifications? Or open separate repo...
  • Allow dialogs to queue? #174

This PR will most likely be long running and changing over time.


New look

Alert

image

Confirm

image

Prompt

image

New API & Usage

Only supports dialog at the moment. I am thinking of moving the growl notification into its own project. 0.5.0 moves away from dynamically creating the alert dialogs and now includes the markup directly in the page.

Usage

<!-- in the head tag -->
<link rel="stylesheet" href="PATH_TO/alertify.core.css">
<link rel="stylesheet" href="PATH_TO/alertify.default.css">

<!-- preferably just before the closing body tag -->
<div id="alertifyCover" class="alertify-cover alertify-hidden" aria-hidden="true"></div>
<section id="alertifyDialog" class="alertify alertify-close" aria-labelledby="alertifyTitle" aria-hidden="true">
    <div class="alertify-body">
        <p id="alertifyTitle" class="alertify-title"></p>
        <input type="text" id="alertifyInput" class="alertify-input" aria-hidden="true">
        <nav id="alertifyButtons" class="alertify-buttons">
            <button id="alertifyButtonCancel" class="alertify-button alertify-button-cancel" aria-hidden="true"></button>
            <button id="alertifyButtonOk" class="alertify-button alertify-button-ok" aria-hidden="true"></button>
        </nav>
        <a id="alertifyFocusReset" class="alertify-focus-reset" href="#" aria-hidden="true"></a>
    </div>
</section>

<script src="PATH_TO/alertify[.min].js"></script>

Alert

// basic
alertify.alert( 'Title' ).show();

// advanced
var alert = alertify.alert( 'Title' );
alert.ok = function () {
    // OK
};
alert.show();

Confirm

// basic
alertify.confirm( 'Title' ).show();

// advanced
var confirm = alertify.confirm( 'Title' );
confirm.ok = function () {
    // OK
};
confirm.cancel = function () {
    // Cancel
};
confirm.show();

Prompt

// basic
alertify.prompt( 'Title' ).show();

// advanced
var prompt = alertify.prompt( 'Title' );
prompt.ok = function ( val ) {
    // OK
    // val => Value of input field
};
prompt.cancel = function () {
    // Cancel
};
prompt.show();

Extra methods

A few extra methods are available on each dialog.

var alert = alertify.alert( 'Title' );
alert.onshow = function () {
    // called on dialog show
};
alert.onclose = function () {
    // called on dialog closed
};
alert.onfocus = function () {
    // called after focus to element has been set
};

alert.show(); // shows the dialog

// close() is available if a dialog must be closed programmatically, 
// it's automatically call on click of a button
alert.close(); // closes the dialog
@fritx

This comment has been minimized.

Show comment
Hide comment
@fritx

fritx Mar 7, 2014

Any idea to make a dialog which provides certain items to select? 😄

fritx commented Mar 7, 2014

Any idea to make a dialog which provides certain items to select? 😄

@fabien-d

This comment has been minimized.

Show comment
Hide comment
@fabien-d

fabien-d Mar 7, 2014

Owner

Any idea to make a dialog which provides certain items to select

That's more of a modal than a dialog. The intention of this library is to replace the native dialogs so at this time that would not really be possible.

Owner

fabien-d commented Mar 7, 2014

Any idea to make a dialog which provides certain items to select

That's more of a modal than a dialog. The intention of this library is to replace the native dialogs so at this time that would not really be possible.

@fritx

This comment has been minimized.

Show comment
Hide comment
@fritx

fritx Mar 7, 2014

@fabien-d thanks it's pretty kind of your stuff to be responsive on a mobile phone 😆

fritx commented Mar 7, 2014

@fabien-d thanks it's pretty kind of your stuff to be responsive on a mobile phone 😆

@ValsiS

This comment has been minimized.

Show comment
Hide comment
@ValsiS

ValsiS Mar 22, 2014

when do you think you will make first relase of this version ? because i want to use it in a project ...

ValsiS commented Mar 22, 2014

when do you think you will make first relase of this version ? because i want to use it in a project ...

@fritx

This comment has been minimized.

Show comment
Hide comment
@fritx

fritx Mar 22, 2014

Yes, when can I just install it thro bower?

fritx commented Mar 22, 2014

Yes, when can I just install it thro bower?

@fabien-d

This comment has been minimized.

Show comment
Hide comment
@fabien-d

fabien-d Mar 22, 2014

Owner

I'm going to try to get some bug fixes for 0.3 today and if I get a chance I'll try to release a 0.5.0rc1 as well.

Owner

fabien-d commented Mar 22, 2014

I'm going to try to get some bug fixes for 0.3 today and if I get a chance I'll try to release a 0.5.0rc1 as well.

@fritx

This comment has been minimized.

Show comment
Hide comment
@fritx

fritx Mar 22, 2014

Sorry to have registered an entry alertify-v0.5 in bower...
I don't know how to undo it.

fritx commented Mar 22, 2014

Sorry to have registered an entry alertify-v0.5 in bower...
I don't know how to undo it.

@fabien-d

This comment has been minimized.

Show comment
Hide comment
@fabien-d

fabien-d Mar 22, 2014

Owner

there is no way to unregister at this time, see: bower/bower#120

Owner

fabien-d commented Mar 22, 2014

there is no way to unregister at this time, see: bower/bower#120

@fabien-d

This comment has been minimized.

Show comment
Hide comment
@fabien-d

fabien-d Mar 22, 2014

Owner

Closing. Created - 0.5 branch

Owner

fabien-d commented Mar 22, 2014

Closing. Created - 0.5 branch

@fabien-d fabien-d closed this Mar 22, 2014

@fritx

This comment has been minimized.

Show comment
Hide comment
@fritx

fritx Mar 22, 2014

Yeah I posted my will.
I registered the 0.5 branch as https://github.com/weixinjs/alertify.js to Bower.

fritx commented Mar 22, 2014

Yeah I posted my will.
I registered the 0.5 branch as https://github.com/weixinjs/alertify.js to Bower.

@fabien-d

This comment has been minimized.

Show comment
Hide comment
@fabien-d

fabien-d Mar 22, 2014

Owner

Released 0.5.0rc1. Usage example can be found here.

More documentation and an example site will be up shortly

Owner

fabien-d commented Mar 22, 2014

Released 0.5.0rc1. Usage example can be found here.

More documentation and an example site will be up shortly

@fritx

This comment has been minimized.

Show comment
Hide comment
@fritx

fritx Mar 22, 2014

Fine. 👍
By the way, I find the new dialog is too white, to fit some white background,
a bit eye-harming, any way to solve that?

fritx commented Mar 22, 2014

Fine. 👍
By the way, I find the new dialog is too white, to fit some white background,
a bit eye-harming, any way to solve that?

@fabien-d

This comment has been minimized.

Show comment
Hide comment
@fabien-d

fabien-d Mar 23, 2014

Owner

I find the new dialog is too white

Agreed. I have an issue opened for it (#187) was hoping to get a designer to coming in and help out. Even if only with a visual and not code

Owner

fabien-d commented Mar 23, 2014

I find the new dialog is too white

Agreed. I have an issue opened for it (#187) was hoping to get a designer to coming in and help out. Even if only with a visual and not code

@yuvii

This comment has been minimized.

Show comment
Hide comment
@yuvii

yuvii Apr 2, 2014

Is there any intent to expand the API? I'm currently using 0.3.11. While the library is fantastic, the API is kinda limited and I find myself messing with the source code attempting to customize certain features (such as changing the animation style, customizing alert positioning, etc.)

yuvii commented Apr 2, 2014

Is there any intent to expand the API? I'm currently using 0.3.11. While the library is fantastic, the API is kinda limited and I find myself messing with the source code attempting to customize certain features (such as changing the animation style, customizing alert positioning, etc.)

@fabien-d

This comment has been minimized.

Show comment
Hide comment
@fabien-d

fabien-d Apr 2, 2014

Owner

such as changing the animation style, customizing alert positioning

alertify.js was built so only the core was in the JS. These two items are controlled via CSS. The original goal was to build a theme library which would cover various animations and positions but I just never had time or contributions for it -

Owner

fabien-d commented Apr 2, 2014

such as changing the animation style, customizing alert positioning

alertify.js was built so only the core was in the JS. These two items are controlled via CSS. The original goal was to build a theme library which would cover various animations and positions but I just never had time or contributions for it -

@fritx

This comment has been minimized.

Show comment
Hide comment
@fritx

fritx Apr 2, 2014

The original goal was to build a theme library which would cover various animations and positions

agreed. 👍

fritx commented Apr 2, 2014

The original goal was to build a theme library which would cover various animations and positions

agreed. 👍

@hzg0403

This comment has been minimized.

Show comment
Hide comment
@hzg0403

hzg0403 Jul 16, 2014

0.5 When officially released?

hzg0403 commented Jul 16, 2014

0.5 When officially released?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment