jPopup, new jquery function I wrote

[Seahorsepip Veteran]

I wrote my own popup function since none of the currently existing functions fullfilled the needs of my projects.

https://github.com/seahorsepip/jPopup

 

It supports IE7+* and is fully responsive. It's dynamic, all popup properties can be changed even after the popup has been opened.

 

Example popup code:

 

var example = new jPopup({
	title: "<h2>Hello world!</h2>",
	content: "<p>Sudo make me a sandwich?</p>",
	buttons: [{
		text: "Sure!",
		value: true
	}, {
		text: "Nope",
		value: false
	}],
	draggable: true
});
example.open(function(r) {
	alert("Value of clicked button: "+r);
});

 

A webpage and complete documentation are in the making. 

 

Let me know what you think about it and if you have any suggestions or ideas

 

 

_{*Yes I even made sure it works on very old useless browsers} 

[Depicus]

Very nice

[pqt]

The UX of it wasn't the best (I can't put my finger on to why specifically yet though, I'll get back to you about that when I can gather my thoughts on it and test it a bit more).

 

The interface though is clean and concise, love it.

 

All around a very solid piece of code you've posted here 

[Seahorsepip Veteran]

  On 14/01/2016 at 23:02, Mur said:

The UX of it wasn't the best (I can't put my finger on to why specifically yet though, I'll get back to you about that when I can gather my thoughts on it and test it a bit more).

 

The interface though is clean and concise, love it.

 

All around a very solid piece of code you've posted here 

Expand  

UX?

How do you mean? The properties and functions don't seem too complicated to me.

 

The interface is just some visual styling, the popups even work without adding any styles, though I'd recommend adding some styles at least to make it work properly.

 

I'll add a "stretch" option in the next update that will replace the "top", "bottom", "left" and "right" classes.

Also I'll add "popup_position_*position variable*" as a class to the popupwrapper and "popup_stretch" when stretch is true.

[pqt]

UX (User Experience) meaning the experience of using - the 'thrill' in a sense, there's something that takes away from the usage of the demo itself. Again I don't have proper words for it yet, I have to sit down and really think about it, you've got a really good item here for sure. It's something minor but I can't put my finger on it.

[Seahorsepip Veteran]

  On 14/01/2016 at 23:27, Mur said:

UX (User Experience) meaning the experience of using - the 'thrill' in a sense, there's something that takes away from the usage of the demo itself. Again I don't have proper words for it yet, I have to sit down and really think about it, you've got a really good item here for sure. It's something minor but I can't put my finger on it.

Expand  

Hmm the plugin has support for all the interface elements I can imagine, the demo of course is just a quick thing I wrote. The actual homepage with the demos will be more clear and visually appealing. I'll showcase how dynamic the plugin is, it can be easily made into a lightbox as example since the content and buttons can be changed at any moment with content()  and buttons().

[Seahorsepip Veteran]

Also I need to add support for 4 more positions before I forget: "topLeft", "topRight", "bottomLeft", "bottomRight".

[Royalty]

Wow, I love this thing here. I just love it.

[Seahorsepip Veteran]

Working on a new experimental feature:

 

 

Yes madness  I'm gonna call the feature popout.

[Seahorsepip Veteran]

  On 14/01/2016 at 23:27, Mur said:

UX (User Experience) meaning the experience of using - the 'thrill' in a sense, there's something that takes away from the usage of the demo itself. Again I don't have proper words for it yet, I have to sit down and really think about it, you've got a really good item here for sure. It's something minor but I can't put my finger on it.

Expand  

Still waiting for any suggestions/improvements.

Check my last post about a new experimental feature I'm working on.

[TAZMINATOR]

  On 16/01/2016 at 22:18, Seahorsepip said:

Working on a new experimental feature:

 

[img snipped]

 

Yes madness  I'm gonna call the feature popout.

Expand  

That's impressive. I was like WHOA!

[pqt]

  On 16/01/2016 at 22:32, Seahorsepip said:

Still waiting for any suggestions/improvements.

Check my last post about a new experimental feature I'm working on.

Expand  

Sorry! Got caught up with a new client at work so that's where about 90% of my time has been going (other ~10% to sleep I guess?)

 

 

On the "nope" option you're forced to give feedback, instead of an option to close it (I don't know if this is mean't to be an explicit action) but forced (surprise) feedback is a good way to get a lot of "asdasd" entries.

 

You're also not able to close the main popup interface, another forced action is required (again not sure if this is explicit)

 

 

Those were the two things I couldn't quite put my finger on. Overall though it's a really, really solid setup.

[Seahorsepip Veteran]

  On 17/01/2016 at 02:07, Mur said:

Sorry! Got caught up with a new client at work so that's where about 90% of my time has been going (other ~10% to sleep I guess?)

 

 

On the "nope" option you're forced to give feedback, instead of an option to close it (I don't know if this is mean't to be an explicit action) but forced (surprise) feedback is a good way to get a lot of "asdasd" entries.

 

You're also not able to close the main popup interface, another forced action is required (again not sure if this is explicit)

 

 

Those were the two things I couldn't quite put my finger on. Overall though it's a really, really solid setup.

Expand  

Looooooooooooooool

Those popups were just quick total random demos not meant to mean anything or to be taken serious ^^ You didn't see the joke :P?

I'll make a project page soon with actual demos that make sense.

 

What do you think about my new popout feature?

[pqt]

  On 17/01/2016 at 04:54, Seahorsepip said:

Looooooooooooooool

Those popups were just quick total random demos not meant to mean anything or to be taken serious ^^ You didn't see the joke :P?

I'll make a project page soon with actual demos that make sense.

 

What do you think about my new popout feature?

Expand  

Oh no, I understand the joke dialogue, but there should be a way to skip it still. The only option is to enter into a required field (I get the satire don't worry!  )

 

I'll take a look at the popout feature in a quick while

[adrynalyne]

  On 17/01/2016 at 22:55, Mur said:

Oh no, I understand the joke dialogue, but there should be a way to skip it still. The only option is to enter into a required field (I get the satire don't worry!  )

 

I'll take a look at the popout feature in a quick while

Expand  

I think you miss the point.

 

If I am building something that requires info to be entered, I'd never want them to be able to skip it.

[Seahorsepip Veteran]

  On 17/01/2016 at 23:01, adrynalyne said:

I think you miss the point.

 

If I am building something that requires info to be entered, I'd never want them to be able to skip it.

Expand  

Indeed it was showcasing the optional checkForm feature with a textarea that had the required attribute

[pqt]

  On 17/01/2016 at 23:01, adrynalyne said:

I think you miss the point.

 

If I am building something that requires info to be entered, I'd never want them to be able to skip it.

Expand  

Agreed. However, there's effectively an option that's given:

 

a) do something

b) opt out

 

b -> leads into asking "why" you don't want to. This should be optional in my opinion. Making a required field in a form is one thing, but I don't feel like this is the most appropriate case.

 

That said though, since @Seahorsepip is making a function I feel like it should have those options since it's a very possible use-case. ¯¯\(°_o)/¯¯ 

[Seahorsepip Veteran]

  On 18/01/2016 at 00:56, Mur said:

Agreed. However, there's effectively an option that's given:

 

a) do something

b) opt out

 

b -> leads into asking "why" you don't want to. This should be optional in my opinion. Making a required field in a form is one thing, but I don't feel like this is the most appropriate case.

 

That said though, since @Seahorsepip is making a function I feel like it should have those options since it's a very possible use-case. ¯¯\(°_o)/¯¯ 

Expand  

The demo showing the function is just total random madness that shouldn't be making sense, it was an attempt at humor

Anyway I'm working on the landing page that will have humor that actually makes sense.

[adrynalyne]

  On 18/01/2016 at 01:07, Seahorsepip said:

The demo showing the function is just total random madness that shouldn't be making sense, it was an attempt at humor

Anyway I'm working on the landing page that will have humor that actually makes sense.

Expand  

Does it halt all execution like an alert when waiting for a response?

[Seahorsepip Veteran]

  On 18/01/2016 at 01:13, adrynalyne said:

Does it halt all execution like an alert when waiting for a response?

Expand  

A popup is opened with open() and the function inside open() is called with the button value as return value and the form also as return value when a button in the popup is clicked.

new popup({
    title: "Example",
    buttons: [{
        text: "Example button",
        value: "something"
    }]
}).open(function(r) {
    alert("value of the clicked button: "+r);
});

It does not halt any js code below open(). If you want that as feature lemme know and I'll add it as an option.
The code I'll probably use:

function popup() {
    this.open = function() {
        //Open the popup
        var popupClosed = false;
        while (!popupClosed) {
            //We do absolutely nothing except halt any code after open() since js keeps thinking that open() is still running :P
        }
    };
    function close() {
        //Closes popup
        //Cleanup browser events
        popupClosed = true;
    }
}

Keep in mind pausing code execution in js is a messy thing and not something that's meant to be

[adrynalyne]

  On 18/01/2016 at 01:25, Seahorsepip said:

A popup is opened with open() and the function inside open() is called with the button value as return value and the form also as return value when a button in the popup is clicked.

new popup({
    title: "Example",
    buttons: [{
        text: "Example button",
        value: "something"
    }]
}).open(function(r) {
    alert("value of the clicked button: "+r);
});

It does not any js code below open(). If you want that as feature lemme know and I'll add it as an option.

Expand  

Well what I mean is that I've run into issues where I need a complete halt on all code execution ( even if not part of the current function) when an alert is active. This is possible with a native JS alert (and I really dislike alert). All the jQuery solutions I've found so far don't do this. 

[Seahorsepip Veteran]

  On 18/01/2016 at 01:45, adrynalyne said:

Well what I mean is that I've run into issues where I need a complete halt on all code execution ( even if not part of the current function) when an alert is active. This is possible with a native JS alert (and I really dislike alert). All the jQuery solutions I've found so far don't do this. 

Expand  

Hmm it seems after some experimenting with while() etc and some research that's not possible, anyting besides alert prompt etc is part of the browser thread which means the browser can also not register events when it's thread is paused. This is no problem for alert since it's not part of the browser dom but any html popup is part of the dom that has just been paused.

 

So instead of thinking about pausing the thread consider changing the code design. I can't imagine that pausing the whole code execution is the only simple solution.

[adrynalyne]

  On 18/01/2016 at 02:44, Seahorsepip said:

Hmm it seems after some experimenting with while() etc and some research that's not possible, anyting besides alert prompt etc is part of the browser thread which means the browser can also not register events when it's thread is paused. This is no problem for alert since it's not part of the browser dom but any html popup is part of the dom that has just been paused.

 

So instead of thinking about pausing the thread consider changing the code design. I can't imagine that pausing the whole code execution is the only simple solution.

Expand  

I think I worked around it last time with building a call back into my function. I was just wondering if you found a way around that limitation. 

 

Thanks for checking

 

 

[Seahorsepip Veteran]

  On 18/01/2016 at 02:52, adrynalyne said:

I think I worked around it last time with building a call back into my function. I was just wondering if you found a way around that limitation. 

 

Thanks for checking

 

 

Expand  

Seems there might be a away with javascript 1.7 async js but that's making things only more complex

[pqt]

Started to contribute to the Github Repo  I actually find this to be super useful and really look forward to working on it with you in the future!

 

Do you use asset managers at all? I converted your CSS to SCSS but didn't want to pull your project in a direction you didn't like so I didn't prepare a full asset-management setup.

[Seahorsepip Veteran]

  On 31/01/2016 at 06:11, Mur said:

Started to contribute to the Github Repo  I actually find this to be super useful and really look forward to working on it with you in the future!

 

Do you use asset managers at all? I converted your CSS to SCSS but didn't want to pull your project in a direction you didn't like so I didn't prepare a full asset-management setup.

Expand  

I use less css mostly but if a project uses something else I'm also fine with it. I used css in this case since it requires no compiling for the user, it's ready to be used.

 

It might be a good idea to add a scss or less file and a css file so it can be used directly without any trouble(css) and developers can modify/learn from the scss/less file.

 

I'm currently looking into optimizing the js code, it can de reduced quite a bit I hope. Also There's a bug for IE8, buttons can have a "class" property that causes errors, to fix this I'll change it to buttonClass.