General discussion about jsPanel version 2

Flyer53 commented 10 years ago

Today I begun work on jsPanel version 2. While I currently dont't have additional features in mind I want to review all the code there currently is and identify things to improve. jsPanel-bootstrap will get the same improvements of course but for now I concentrate on the standard version.

Previews will be available here: http://jspanel.de/beta/api.html

Changes already implemented:

option.size will not set the size of the jsPanel as a whole but the dimensions of the content div of the jsPanel.
The header section has a smaller height by default and expands height only when an additional header toolbar is set.

Whoever thinks jsPanel is a useful tool and has ideas how to make it better... tell me!

devmondo commented 10 years ago

great to hear you are working on V2

questions that pop into my mind are you planning to implement Hints and Tooltip in V2 or V1 ?

Flyer53 commented 10 years ago

Isn't it already there... option.tooltip! Whether you call it popup, hint or tooltip.... basically it's just the same I think and only a matter of content and setup you apply. There sure is room for improvement of this feature and I'll think about it. But I don't want to make it too complicated. Do you have anything particular in mind thinking about hint vs tooltip vs popup?

devmondo commented 10 years ago

sorry, i said pop up, while i what i really meant is hints here is an example http://codeseven.github.io/toastr/

Flyer53 commented 10 years ago

Yep! Toastr is a great tool. Thanks for the tip :-) While something similar is already possible with the options provided by jsPanel I understand that it might be a lot easier with some predefined setups - like for the modal. I'm going to implement this in version 2.

Angular: Meanwhile I did some reading... services, controllers, directives, $q ... and so on. To me it seems like a great tool made from professional programmers for professional programmers. Not really easy on first glance... at least for someone as me who's not a trained programmer.

devmondo commented 10 years ago

great to hear v2 is coming with this feature

regarding Angular, hang on there man, dont worry, it starts like that, but once you start doing some test and code, you will see how the whole picture is much easier and simpler, and you will never go back, i have been there and first time i tried Angular, i said this is so complicated, then i gave it another try and i said wow why i was doing this Javascript spaghetti code before, i tried backbone like 3 times and never liked it, angular is so easy once you understand the conventions of it and your code will look so beautiful, and the best part of it is that most of tedious stuff are built in for you.

also there are some outstanding plugins for it like https://github.com/mgonto/restangular https://github.com/angular-ui/ui-router also check ngmodules.org and you will see many plugins there.

you say you are not trained programmer? hahhahaa man your knowledge is at least 3 levels above me :)

if you need any help i am ready :)

devmondo commented 10 years ago

here are too great simple tuts that explains Angular Directives, hope they help out

http://weblogs.asp.net/dwahlin/archive/2014/04/29/creating-custom-angularjs-directives-part-i-the-fundamentals.aspx http://weblogs.asp.net/dwahlin/archive/2014/05/11/creating-custom-angularjs-directives-part-2-isolate-scope.aspx

Flyer53 commented 10 years ago

Thanks again for your valuable links :-) I'll come back to them in time.

On http://jspanel.de/beta/ you find an updated v2.0 beta with a first impression how option.hint could look like. There's nothing in the documentation yet. But when you enter the following code into the firebug console and execute it something should happen...

$('body').jsPanel({
    hint: 'hint-success',
    show: 'slideDown',
    controls: { iconfont: 'bootstrap' },
    autoclose: -1,
    position: { top: 5, left: 'center' },
    size: { width: 500, height: 'auto' },
    content: '<p style="padding:27px 0 14px;font-size:20px;">Success Hint</p>'
});

For the time being it works also with 'hint-info' or 'hint-error'

devmondo commented 10 years ago

you are always welcome :)

this is so great man, i tried it and i love it.

some ideas to make hint perfect -set time for hint to automatically disappear. -ability to define position of hint, top right, top left, bottom left, bottom right, center top, center bottom. -right now if i execute the code above more than one time the hints pile above each other, they should be pushed below each other. -the close button is great but there should be ability for disabling it. -callback for the hint on show and on disapear or hide or clicking close button. -ability to have custom content.

thank you very much for the hard work and speed.

Flyer53 commented 10 years ago

:-) Most of your ideas are already implemented... you'll see the details when the documentation is up to date. For now:

hint will close automaically after 10 sec unless you set something else via option.autoclose. The autoclose setting -1 in the example code disables autoclose.
positioning is the same as with a standard jsPanel, so all shortcuts or other settings work here as well
Yep! The piling is something I have to care about
My thinking about the close button was always give the user the ability the close the thing whenever he choses to, surely something you can argue about
Yep! Callbacks might be usefull
add your content with option.content, option.load, option.ajax or with the callback of the jsPanel method just as usual.

After all the hint is a jsPanel, just without any header or toolbars and of course different styling. Almost all jsPanel options work as usual except a few options that don't make any sense with a hint

Flyer53 commented 10 years ago

Forgot something:

Since the hint is a jsPanel after all the events onjspanelloaded and onjspanelclosed fire. So you can attach callbacks to the events...
The positioning shortcuts "center left", "center" and "center right" don't work with the hint. I don't really know why but I guess it's due to the css position: fixed I use for the hint. To me they don't make sense for a hint anyhow...

devmondo commented 10 years ago

man, you are very smart :)

now with Hint implemented, you can see the benefit of all previous options that implemented in JSPanle can be reused here, now that is what i call a real code reusage.

-regarding positioning, Toaster is not that very best, Noty on hte other hand is cool http://ned.im/noty/ -regarding closing button, i agree with you totally, specially that you implemented the autoclose option, then there is no harm in keeping it.

Flyer53 commented 10 years ago

Thanks buddy... I try hard ;-)

Updated once more. The other 3 shortcut positioning options using center now work as well for the hint and the hints remain in position in relation to the browser window when scrolling.

noty... cool thing :)

devmondo commented 10 years ago

awesome,

what are the other positioning format ?

Flyer53 commented 10 years ago

All positioning shortcuts work for the hint as well: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left, center. Next I'll try to take care of the piling hints. But I guess preventing this will work only for hints using the positioning shortcuts.

devmondo commented 10 years ago

thanks man, positioning works great.

regarding piling, i agree with you, it makes since only on corner positions and not center.

may i suggest another idea which is block ui, i was thinking as long as JSPanel, has modal nature, we could utilize it as blocking mechanism like this below http://plnkr.co/edit/XWRfHX?p=preview

but the thing that confuses me is how JSPanel will block certain elements like in the demo above.

maybe it is not a good idea, but hey i brain storm to much :)

Flyer53 commented 10 years ago

Well, right now I don't see what the benefit would be for jsPanel to block anything more than the modal feature does by default... of course only until it's closed....

One other thing bothers me: I repeatedly think about making jsPanel a jQuery function rather than a jQuery method. So it would not be: $( selector ).jsPanel( [ { options }, callback ] ); but: $.jsPanel( [ selector, { options }, callback ] );

Why: Regardless of what the selector is with the version right now:

A modal will always be appended to a special container
A hint works only when appended to the body element.
And a tooltip will always be appended to a special container

And that causes me a little pain with the positioning functions/features because modal, tooltip and hint always need some extra handling that doesn't make it easier... Can't really make up my mind what's better...

devmondo commented 10 years ago

i totally agree with you, on all what you mentioned above, and yeah it is big pain but may i suggest to stick to first one and maybe use the following workaround i dont know if jquery has a functionality to detect selector, so in your code, if the option is hint you just remove the panel with jquery "clone" and "remove" and append it to body using jquery "append"

maybe this is stupid, but just my 2 cents.

Flyer53 commented 10 years ago

The way it's done right now works quite well, that's not the point... although I didn't get into the piling issue with the hints yet. To put the panel in the correct container is not the point, it's calculating the position values depending on whether it's a normal jsPanel or a modal or a hint or a tooltip... that's confusing somehow...

And I just think it's not logical or intuitive having to set a selector although it will not be used and is not necessary in the first place when you want a modal or hint. You know the more peculiarities you have to consider in the positioning code, the more error prone and difficult it gets... and more complicated to maintain. I'll see what it looks like when I get to the hint piling solution and than I'll think it over again...

devmondo commented 10 years ago

you are more advanced than me :)

Flyer53 commented 10 years ago

Oh thanks man :) ... but right now I have severe doubts... fighting with the piling issue and not getting to something useful :(

devmondo commented 10 years ago

take your time man, sometimes we need to get away from something so we can think about it correctly :)

Flyer53 commented 10 years ago

You're absolutely right !

Sometimes it's so easy that you don't even think about it. There was just one single line of code I had to move up 2 lines and one problem was solved. Now the hint feature is usable to some extent I'd say, even if it's not perfect.

Piling: After some experimenting I came to the conclusion that it's best to simply apply an offset to each new hint. So they don't settle exactly on top of each other while not taking to much space of the page. All hints remain in position when the page scrolls. The only issue I don't like yet is that hints don't get repositioned when one of multiple hints closes...

As a positive side effect I found a bunch of small issues to improve in the rest of the code :)

gederer commented 10 years ago

Thanks for this excellent widget.

I need to have a status bar at the bottom of my panel. The toolbarFooter would do the trick. But, it's a bit tall. I was able to reduce the height of the title bar by overriding a couple of styles. Is there an easy way to change the height of the toolbarFooter?

Also, for v2, it would be nice to have a setContent or replaceContent method. I can call $( '.jsPanel-content' , myJsPanel ).html(content). But, it would be convenient to have a public method for this.

Flyer53 commented 10 years ago

@gederer Thanks a lot for your comments :)

toolbarFooter: So far my thinking was that a toolbarFooter will always have buttons that need some space. I admit I didn't think of using it as status bar. But I see this is a logical use and so I'll try to consider this for v2. Right now I don't see a quick workaround, but I'll check. By the way, the header of v2 will already be smaller in height by default and gets higher only when a toolbarHeader is set.

See http://jspanel.de/beta/ for the current state of developement... though the api documentation might not always be up to date on the beta page

replaceContent: I had this idea as well but decided against it because I couldn't see a real benefit so far and it wouldn't save you much code to write. Your solution works fine I guess or you could do $( '.jsPanel-content' , myJsPanel ).load( url ); to use jQuery's load method. But I'll think about this once more.... if you see a real benefit I miss, tell me...

devmondo commented 10 years ago

@Flyer53

i am glad things are sorting out for you :)

regarding hint, maybe this is stupid, but maybe create a hidden container that has the same width of all hints and hight is automatic, and use jquery "append" to append the new hints to this div, this way it will be guaranteed that hints will not pile and when previous hints start to disappear, latest hints will automatically go to the top of that container.

Flyer53 commented 10 years ago

@gederer Assuming you use the standard version of jsPanel ( not bootstrap ) I have a workaround for a smaller toolbarFooter. Try the following example to reduce toolbarFooter height from 46 to 23 pixels:

var arr = [
    {
        item: '<div style="float:left;padding:0 0 0 5px;">Simple Text ...</div>',
        event: 'click',
        callback: function( event ) {
            alert( "The click happened at (" + event.pageX + ", " + event.pageY + ")" );
        }
    }
];
var my_panel = $("body").jsPanel({
    toolbarFooter: arr,
    overflow: 'hidden',
    position: 'center'
});
var toolbarFooterHeight = $('.jsPanel-ftr', my_panel).height();
$('.jsPanel-content', my_panel ).removeClass( 'jsPanel-content-footer');
// the class would set content height to "calc(100% - 92px) !important" though the
// !important seems to be obsolete (I removed it without any negative effect)
$('.jsPanel-content', my_panel).css( 'height', 'calc(100% - 69px)' );
$('.jsPanel-ftr', my_panel).css( 'height', toolbarFooterHeight - 23 + 'px' );

This seems to work quite well. I didn't check this with the bootstrap version tough...

Please let me know whether this works for you...

Flyer53 commented 10 years ago

@devmondo No I don't think it's stupid.... at least I had the same thought ;) But it would cause other complications, so I dropped that idea.

My thoughts currently are:

Do you really need a centered hint? If it's so important that you want it centered make it a modal.
Do you really need hints at "center left" or "center right"? I personally think No
Where do you normally expect a hint to appear. Somewhere at the top of the page would be my answer.

I tend to limit the hints to the positions at the top of the window. It would make things a lot easier...

devmondo commented 10 years ago

thanks man for answering, good to know that i have some of your logic :)

i think hint with "center left" is a no no as you said, that is crazy :)

but i do believe that we should cover all corners, because of 2 reasons, some clients like it on top and some clients like it on bottom, and we have the RTL issue.

what is exactly the issue? and why the proposed solution does not work?

if it is all that complicated, why not create a new separate Hint Project that is based on JSPanel and make code specific for it, it at least it will show that you have 2 projects :)

Flyer53 commented 10 years ago

@devmondo Your proposed solution with an extra wrapper would work fine for the top positions, but there I don't have a problem anyhow. For all the other positions I would have to make sure that the wrapper is no bigger than the hints it takes because otherwise the wrapper would overlay parts of the page and possibly block other elements. And that means that the wrapper needs to be sized and positioned as well according to the sizes of the hints (and you would need to consider every new hint that goes in the wrapper). Having hints with different widths would result in a wrapper that overlays part of the page. Additionally a wrapper at the bottom would extend downwards with each hint added and thus a hint would not be visible unless you move the wrapper upwards (add dynamic content and you don't know in advance what size the hint will have). There might be errors in my understanding, but to me that solution doesn't sound easier or even preferable.

In the end I might have to rethink the whole thing. Up to now I tried to use the same positioning code for all panels, no matter whether it's a standard jsPanel, a modal or a hint. That, I think, is one thing that kept the code relatively small. Maybe I have to change that for the hints...

I do not prefer a second project. As you showed me, there are great tools for hints already and I don't want to invent a new wheel.

Since I started this project I learned quite a lot. And I don't intend to stop learning.... so one day I will learn the one thing...

gederer commented 10 years ago

@Flyer53 Thanks for the the quick response. Your solution works splendidly.

I saw that you have a shorter default title bar in the beta. This is a good feature. It might be nice (though certainly not essential) if there were options for setting the title bar height, toolbar footer height and status bar height.

I created a similar widget for an application I built several years ago. I have been asked to revisit this application, and would like to use your jsPanel in place of mine (less code for me to maintain!) Here's the legacy application:

http://earlywarning.usgs.gov:8080/EWX/index.html

Most of the buttons in the main toolbar cause an update of panel content. Also, it's possible to launch multiple panels (by double clicking leaf nodes in the tree). These panels can be linked (right set of controls) so that stepping through time updates each of the linked panels. Hence, lots of panel content updates. Of course, it's not a huge burden to use jQuery to replace the content. Again, many thanks.

Flyer53 commented 10 years ago

@gederer You're welcome

If jsPanel is good enough for your needs I would be pleased to see it used. Concerning header and footer heights my prefered solution would be an automatic adjustment to the contents of header and footer so that you don't have to worry about it at all. Maybe I get something like this done in v2... though I can't promise. But I do promise to think about the one or the other convenience method to update/replace content.

devmondo commented 10 years ago

@Flyer53 , man i told you, you are smarter than me, i have totally forgot about different sizes for hints when content size is different, but maybe because i assumed that they all should have same width and let their content flow vertically.

as for second project, i totally agree with you, when i started talking to you and you generously accepted adding new features and suggestions, i said to myself, this is the one and only solution for any pop up div, let it be modal, hint or tooltip and i wholeheartedly wish it will stay one project, the 2 projects suggestion was merely my attempt to try to help :) but if you can do all this and keep it as one and be patient with our complaints and suggestions then hurray :)

Flyer53 commented 10 years ago

@devmondo You know... I just had the advantage that I already thought about this extra wrapper solution. By the way that's what I use for the minimized panels. They go into an extra container at the bottom of the page. While working on v2 I found a bunch of glitches and things to improve internally. So I probably will release a version 1.11 before I continue with v2 and the hints.... and the bootstrap version is waiting for the improvements as well...

Flyer53 commented 10 years ago

@gederer @devmondo

A beta of 1.11 is published here: http://jspanel.de/beta1.11/api.html#option-statusbar

I implemented a new option.statusbar that offers the ability to reduce toolbarFooter height to 23px by setting statusbar: true. This option only has an effect if a toolbarFooter is set and checks as well whether a toolbarHeader is set additionally. While this still is more or less a workaround it seems to work quite well.

An important change in v1.11 affects option.size. Check the API please.

Further v1.11 will have all the small issues fixed I found while working on v2. But no option.hint yet.

devmondo commented 10 years ago

:+1: this is really good, i just thought of a use for it on my client app, thank you very much :)

gederer commented 10 years ago

@Flyer53 Great. Is there a download link for 1.11beta yet? Thanks!

Flyer53 commented 10 years ago

@gederer Not yet. If you can wait 2 or 3 days I'll have a new beta for 1.11 that will even include the one or the other method to add/alter/replace/delete content within a jsPanel content area. I'll post a download link then...

Go to http://jspanel.de/beta1.11/api.html#method-addContent and there is one already. Just updated the 1.11 beta page ...

Feedback very much appriciated ...

gederer commented 10 years ago

@Flyer53 Please take your time. I don't seem to see that API doc for addContent on the 1.11beta API page. But, that sounds like a complete set of methods.

On May 22, 2014, at 9:50 AM, Stefan Sträßer notifications@github.com wrote:

@gederer Not yet. If you can wait 2 or 3 days I'll have a new beta for 1.11 that will even include the one or the other method to add/alter/replace/delete content within a jsPanel content area. I'll post a download link then...

Go to http://jspanel.de/beta1.11/api.html#method-addContent and there is one already. Just updated the 1.11 beta page ...

Feedback very much appriciated ...

— Reply to this email directly or view it on GitHub.

Flyer53 commented 10 years ago

@gederer Mmmh... the link above works on my machine and gets me right to the spot. Only the left hand menu doesn't jump to the correct spot. Browser cache issue maybe?

gederer commented 10 years ago

@Flyer53 You were right about the caching issue. Looks good. I look forward to seeing the other methods (especially replace). Again, please take your time. Thanks.

On May 22, 2014, at 10:02 AM, Stefan Sträßer notifications@github.com wrote:

@gederer Mmmh... the link above works on my machine and gets me right to the spot. Only the left hand menu doesn't jump to the correct spot. Browser cache issue maybe?

— Reply to this email directly or view it on GitHub.

Flyer53 commented 10 years ago

@gederer I will... don't worry ;)

gederer commented 10 years ago

@Flyer53 :)

On May 22, 2014, at 10:23 AM, Stefan Sträßer notifications@github.com wrote:

@gederer I will... don't worry ;)

— Reply to this email directly or view it on GitHub.

Flyer53 commented 10 years ago

Your thoughts requested...

Now having the first methods dealing with content of the jsPanel in place and experimenting with a few more I start having doubts whether all these methods really make much of a sense. Why? They don't save code or make it easier and jQuery already provides everything you need.

Wouldn't it be more useful to simply add a jsPanel property content representing the panel content? Then you could do something like this:

$( selector , jsPanel.content ).append( content );

compared with:

jsPanel.addContent( "append", content, selector );

One more point: All the custom methods need something like close to 100 lines of code in the jsPanel script. A porperty for the content only one single line.

gederer commented 10 years ago

@Flyer53 I think that's a great solution.

Flyer53 commented 10 years ago

@gederer I updated tbe beta1.11 page once again: http://jspanel.de/beta1.11/api.html It now includes all the custom methods plus a jsPanel property content. Some documentation is online for both methods and property including examples. So you can test both. But when I look at the examples I really don't know what you would need the methods for unless there's a benefit I can't see with my limited abilities as programmer ...

You can download the beta1.11 here: http://jspanel.de/downloads/jsPanel-1.11beta3.zip

The download includes the complete beta1.11 folder. So you have the api page as well.

devmondo commented 10 years ago

@Flyer53

thanks for the new updates mate, regarding the "content" property, is it because there is no clear mention that you don't need it " as i suggested before",because most of us assume that you need to create some html and then apply JSPanel to it, or maybe @gederer is talking about changing the Content dynamically by calling the API?

Flyer53 commented 10 years ago

@devmondo The property content is just an additional way to get access to the content of an existing jsPanel. @gederer plans an app where he has to replace/update content dynamically quite often and therefore asked for methods that might make that easier. As you can see in the 1.11 beta I tried a bunch of methods and they work fine. But I personally don't think they make it any easier or safe coding. And then I head the idea with a property that represents the panel content. As far as I'm concerned only the property will make it in the 1.11 release.

There is no change on how you have to create a jsPanel! Everything as usual!

The great majority of changes in 1.11 take place under the hood and don't affect the api. Only option.size is a bit different. I finally managed to have it set the size of the content area instead of the whole jsPanel. The header section is smaller in height by default and extends only when a toolbarHeader is set and the new option.statusbar offers a way to meka the toolbarFooter smaller in height as well in case you need only something like a statubar without buttons needing some height.

Now I work on the bootstrap version to get it up to date as well...

devmondo commented 10 years ago

@Flyer53 regarding @gederer case, this is exactly what i meant :)

as for the new updates, man i really wish we can have more dedicated open source coders like, you dont stop, what can i say German quality for sure :)

Flyer53 commented 10 years ago

@devmondo Thanks a lot buddy :) And ther're still ideas circling my head. So don't worry... I won't stop...

devmondo commented 10 years ago

all the best mate :)

Flyer53 / jsPanel

General discussion about jsPanel version 2 #6