stefangabos / zebra_dialog Goto Github PK

Hello,

When there is an input in the content, the focus is lost when selecting it: we cannot enter value!

Observed on 2 Android tabs, not on PC or iPad

Sample:

	new $.Zebra_Dialog('Enter your value: <input type="text" maxlength="12"/>', {
	    width: 600,
	    title: 'Focus lost on Android'
	});

Do you observed this issue?

Can you provide an example of usage on Vb.net?
I have:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">    window.jQuery || document.write('<script src="path/to/jquery-1.12.0.js"><\/script>')</script>
    <link rel="stylesheet" href="css/zebra_dialog.css" type="text/css" />
 <script type="text/javascript">

        $(anchor).bind('click', function (e) {
            e.preventDefault();
            $.Zebra_Dialog('The link was clicked!');
        });

        </script>

Now how can I apply zebra dialog on a button, like:

<asp:ImageButton ID="btnDelete" runat="server" CausesValidation="False" CommandName="Delete"
                                                        Text="Elimina" ImageUrl="~/images/delete-email-alt.png" AlternateText="Elimina"
                                                        ToolTip="Elimina" OnClientClick="return confirm('Sei sicuro?');" 
                                                        ></asp:ImageButton>

Thanks

It would be very useful to have an option to make the dialog draggable

For example:

$.Zebra_Dialog("Test dialog", {
    title: "Test Title",
    custom_class: "test_draggable",
    draggable: true
});

Demo

Something similar can be achieved:

/**
 * 
 * @param {HTMLElement} draggable_element- The whole element you want to make draggable
 * @param {HTMLElement} trigger_element- The element that is going to trigger the drag
 */
function makeElementDraggable(draggable_element, trigger_element) {
		var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

		if(trigger_element ){
			initDrag(trigger_element)

			trigger_element.style.cursor = "grab";
		}
		else if (document.getElementById(draggable_element.id + "-header")) {
			// if present, the header is where you move the DIV from:
			initDrag(document.getElementById(draggable_element.id + "-header"))
			document.getElementById(draggable_element.id + "-header").style.cursor = "grab";
		}
		else if (draggable_element.querySelector(".ZebraDialog_Title")) {
			// if it's a Zebra Dialog, init from the Title
			initDrag(draggable_element.querySelector(".ZebraDialog_Title"))
			draggable_element.querySelector(".ZebraDialog_Title").style.cursor = "grab";
		} else {
			// otherwise, move the DIV from anywhere inside the DIV:
			initDrag(draggable_element)
		}

		// Save original position
		draggable_element.dataset.beforeMovableTop = getComputedStyle(draggable_element).top;
		draggable_element.dataset.beforeMovableLeft = getComputedStyle(draggable_element).left;
		draggable_element.classList.add("isDraggable");

		

		function initDrag(e) {
			e.onmousedown = dragMouseDown;
		}

		function dragMouseDown(e) {
			e = e || window.event;
			e.preventDefault();
			// get the mouse cursor position at startup:
			pos3 = e.clientX;
			pos4 = e.clientY;
			document.onmouseup = closeDragElement;
			// call a function whenever the cursor moves:
			document.onmousemove = elementDrag;
		}
	
		function elementDrag(e) {
			e = e || window.event;
			e.preventDefault();
			// calculate the new cursor position:
			pos1 = pos3 - e.clientX;
			pos2 = pos4 - e.clientY;
			pos3 = e.clientX;
			pos4 = e.clientY;
			// set the element's new position:
			draggable_element.style.top = (draggable_element.offsetTop - pos2) + "px";
			draggable_element.style.left = (draggable_element.offsetLeft - pos1) + "px";
		}
	
		function closeDragElement() {
			// stop moving when mouse button is released:
			document.onmouseup = null;
			document.onmousemove = null;
		}
	}

Then:

$.Zebra_Dialog("Test dialog", {
    title: "Test Title",
    custom_class: "test_draggable"
});

var element= document.querySelector(".ZebraDialog.test_draggable");
makeElementDraggable(element)

Or you could use this similar answer or even jQueryUI's draggable

Result

If you want i could try and make a PR when i have the time :)

It's opens the dialog as type:info when we don't define type as the "No title bar" example. Is it possible to change it to behave like it set to false?

Problem

Buttons don't center even if center_buttons is set in the configuration object for Zebra_Dialog

Description

The problem is in the latest minified css at line 55-57 (not minified):

As you can see in the next Screenshot, the ZebraDialog_Buttons class is on the same element as ZebraDialog_Buttons_Centered class:

FIX

To fix it, remove the extra space between the two classes on line 55

Before:

.ZebraDialog_Buttons_Centered .ZebraDialog_Buttons {
    text-align: center
}

After:

.ZebraDialog_Buttons_Centered.ZebraDialog_Buttons {
       text-align: center
}

I have an issue with dialogues being "cut-off" as a user scrolls down a page when one or more dialogues are being shown - but, only on the Microsoft Edge Browser.

There is a post detailing this issue more on [http://wpmaia.azurewebsites.net/using-microsoft-edge-browser/] and, of course, there are many sample on that UA website to test the problem against.

Any ideas?

How I can reload the page after Zebra_dialog is closed.
Thanks

Similar to the onClose event it would be useful to have an onOpen event.

It would be even better in my opinion if they were properties of the config object. Example:

$.Zebra_Dialog("Test onOpen", {
    title: "Test Title",
    onOpen: function () {
          console.log("Dialog has opened")
    },
    onClose: function () {
          console.log("Dialog has closed")
    }
});

The onClose event could still be present to add retrocompatibility.

This way i think it would be less polluted with "anonymous" events (an onClose event could be from any library or framework)

What do you think?

There are no iframe scrollbars on iPhones / touch devices, when the iframe content is higher than the dialog.
This fixes the issue, add these lines to class ".ZebraDialog .ZebraDialog_Body":

-webkit-overflow-scrolling: touch;
overflow-y: scroll;

Scrolling="No" or "Yes" is not supported anymore in HTML5.

I started using this dialog to replace Bootstrap/BootBox since modal on modal doesn't work well, and this allowed layers.

I discovered a weird issue though when jQuery Validation sets focus to an input in error while this dialog is shown. Part of it happens in Zebra and Bootbox- If something happens on focus of the input like a datepicker or browser autocomplete/autofill then they will appear and often on top of the dialog since some z-order we have no control over. The other half only happens in Zebra- Pressing tab will cycle through tab order, typing types text, and Enter will click buttons instead of closing the Zebra dialog. When in Edge the cursor will also blink through the dialog.

The Bootstrap/Bootbox way must monitor blur/hasFocus and steal focus back, but I'm not finding it in the source there yet. They don't keep track of avtiveElement to restore it either since nothing has focus when the dialog is closed.

I'm not sure how to resolve it other than monitoring with a timer or something then check if there is focus and either blur the activeElement or set focus to the dialog. It would be a plus to restore focus to what it was or what it became while the dialog was running too.

I'm using jquery + jquery.mobile plus zebra_dialog 1.3.12.

One one page in my mobile app I have a taphold event for deleting a record from an li inside a ul defined as a listview.

$(".alerts").delegate("li", "taphold", function(e) {
    deleteAlert(this.id);
});

On the taphold event, the zebra_dialog pops up, masks out the background, and prompts for a Yes/No response. The Yes response has a callback that calls the delete function and then updates an element with a success message. Like this:

$.Zebra_Dialog("<strong>Killing It!</strong><br>Do you really want to delete this message?", {
   'type':     'question',
   'title':    'Really?',
  'buttons':  [
                {caption: 'Yes', callback: function() { 
                          serDeleteAlert(msg_id, function(rs) {
                              var $toRemove = $('#' + msg_id); // element to remove
                              var $list = $toRemove.parent('ul'); // element's parent
                              $toRemove.remove(); // remove it
                              $('#fetch-result').html("Alert was deleted!");        
                          });
                }},
                {caption: 'No', callback: function() { 
                            $('#' +msg_id).attr('data-theme', btn_theme);
                            $('#' +msg_id).attr('class', btn_class);
                }} 
            ]
});  

The problem is, it looks like the taphold is causing two instances of the dialog to be drawn and only one instance is fully working. Here are two symptoms:

1. The background is completely invisible as two layers of opacity is in place
2. If you dismiss the dialog or decline the delete, you see the dialog animate up the screen revealing a second dialog underneath.

If, in the top dialog you tap on Yes, the code in the Yes callback gets excuted, the alert is deleted, the li is removed etc. and the function returns to the jquery taphold event manager and the top level dialog is dismissed. However, I'm left with that second (or first created) zebra_dialog on the screen and the background is still opaque (but only half so) and I can't navigate off this screen. The buttons on this dialog seem to be active but they don't function as expected. I'll explain that next.

If the top level dialog is dismissed or the delete declined, I'm left with the second (first created dialog). The dismiss button does nothing, the No button does nothing, however the Yes button will execute the code needed to delete the alert, remove the li and update the status message.

Without looking, I suspect that some code to check for and not allow duplicate dialogs might be needed.

Any way to add more info (only in some special cases), after the initial dialog has been created? Thanks!

Creating new dialog with something like:

var onSave = function(){ return false; };

dialog = new $.Zebra_Dialog({
    type: false,
    buttons: [{
            caption: 'My caption,
            callback: onSave
    }],
    source: {
        ajax: {
            url: url
        }
    },
    title: title,
    width: width
});

If onSave callback returns false and then I close dialog with (X), "My caption" button is permanently disabled even if I create another dialog using another new call. This is indeed strange. Shouldn't the dialog be destroyed when closed?

Hi!
IE8 throwing error (expected identifier string or number). Reserved word class is used..
Can you fix this please!

Could you please tell me in which way the modal dialog boxes are responsive as mentioned in the description?
Within the css the dimensions are defined with pixel values and there are also no media queries
Also when testing it with the demo code on mobile phones it is breaking the viewport.

Two inputs, one of them does not align properly, screenshot on flickr.
https://www.flickr.com/photos/34575286@N00/24709433080/in/datetaken-public/

The call is simple, the calendar from #data_pif has some hidden divs above it, tables... etc, the inputs have no special styles!

    $('#dataFactura').Zebra_DatePicker();
    $('#data_pif').Zebra_DatePicker();

Like:

new $.Zebra_Dialog("Message", {
	type: "information",
	title: "Title",
	buttons: [
		{
			caption: "Right", background: "green"
		},
		{
			caption: "Error", background: "red"
		},
		{
			caption: "Nothing", background: "yellow"
		}
	],
	center_buttons: true
});

I'm trying to emulate the confirm javascript function, in order to obtain this:

$('#removebuttonstyle i').click(function() {
    console.log("you click!");
    var c = confirm("Are you sure that you want to continue?");
    return c;
  });

I build this with zebradialog:

$('#removebuttonstyle i').on('click', function(e) {
    e.preventDefault();
    var t = $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
      type: 'question',
      title: 'Custom buttons',
      buttons: [
      {caption: 'Yes'},
      {caption: 'No'}
      ],
      onClose: function(caption) {
        if (caption == 'Yes') {
          caption = true;
        } else {
          caption = false;
        }
        console.log(caption);
        return caption;
      }
    });
  });

So I can set the value from caption but I'm not able to return it. Any thought?

parent.???.close();

thanks.

First of all, I really like your library. Good job!

However, it would be good if it provides the current version in a public variable, for instance accessible by $.Zebra_Dialog.version.

I can think of several use cases for such information:

• allow people to build plugins for a certain version
• check current version and github version for updates

Of course, you will need to remember to modify this variable each time you release a new version.
But I think it is always worth the hassle.

Example of implementation (that I find useful) : DataTables (jQuery plugin):
https://github.com/DataTables/DataTables/blob/master/media/js/jquery.dataTables.js#L9416

I could submit a PR if you want.

Thanks!

As done in the dialog itself, can we have custom_class setting for each button?

As far as I can tell right now a dialog always closes when a button is clicked. I'd like a way to control whether it should close or not in the button callback.

e.g.

'buttons': [
    'Cancel',
    {
        caption: "Add",
        callback: function () {
            if (dialogModel.isValid()) {
                return true;
            }
            dialogModel.errors.showAllMessages();
            return false;
        }
    }
]

I made this change to zebra_dialog.js:

// handle the button's click event
button.bind('click', function() {
    var shouldClose = true;
    // execute the callback function when button is clicked
    if (undefined != value.callback) shouldClose = value.callback(plugin.dialog);

    // remove the overlay and the dialog box from the DOM
    // also pass the button's label as argument
    if (shouldClose) plugin.close(undefined != value.caption ? value.caption : value)

});

You might want to modify if so that callbacks that don't return any value still close for backwards compatibility.

Hi, javascript "focus()" doesn't work after call zebra dialog as it work with default javascript alert. Its a field valitation in my case and this function is very important. Thank you.

$.Zebra_Dialog('test');
//alert("test");
form.frm_custo_pessoa_pf.focus();

As stated, the buttons are not displayed in the proper order (inverse order of the corresponding array)