jsPanel 3 Alpha - Githubissues

Flyer53 commented 9 years ago

Hey folks, today I uploaded an Alpha version of a possible jsPanel 3 to http://beta.jspanel.de/ with the following changes ... to list only the most important ones:

internal use of ES6 Arrow Functions
internal use of ES6 string templates
use CSS flexbox for header and footer sections
new positioning

Positioning: Since jQuery UI core has the method .position() built in anyhow I decided to remove my own positioning functions and use jQuery UI .position() instead.

ES6 and flexbox will require a modern browser of course. As far as I checked the desktop versions of FF and Edge are the only ones working right now.

All in all filesize of jsPanel 3 Alpha is about 40% smaller than jsPanel 2.5.2 and about 90% of the features are working already (not working yet are corners for tooltips and layout export/import for example). Please visit http://beta.jsPanel.de/api.html and take a look. I updated the API docs but probably missed the one or the other thing.

Feedback welcome :)

genachka commented 9 years ago

@Flyer53 Great to hear such news! Looking forward to playing with 3.0 as it matures.

Running on Chrome Version 43.0.2357.130 (64-bit) for Linux and wasn't able to get it to come up on http://beta.jspanel.de , noticed these errors in console: Uncaught SyntaxError: Unexpected token ) jquery.jspanel.js:6 Uncaught ReferenceError: jsPanel is not defined

Flyer53 commented 9 years ago

@genachka Hi there :) Well, I currently do all my Alpha testing on FF where it works quite well ... so far. Thanks for the hint ... I'll look into this ...

devmondo commented 9 years ago

@Flyer53 aweosme work man, i am so glad you are moving forward, and finally utilized es6 :)

by the way alpha not working in chrome :(

some shameful suggestions. -droping jquery and jquery ui all together -submit jspanel to jspm registry( best and the the future of client side libs manager, think of it as npm for node.js)

all the best again mate :)

Flyer53 commented 9 years ago

@genachka Did a quick check on http://kangax.github.io/compat-table/es6/#arrow_functions Even the most recent Chrome doesn't support arrow functions yet. So you have to be patient it seems :(

Flyer53 commented 9 years ago

@devmondo Hey there :) Nice to hear again from you. What's your kid doing? Everyrthing alright?

Well, I never thought about dropping jquery so far, have to admit that I never really looked into other JavaScript libraries. Dropping jquery ui is something I do consider from time to time. But so far I didn't find satisfying replacements for draggable and resizable ... I'll keep looking ... And thanks for the jspm tip :)

genachka commented 9 years ago

@Flyer53 Ahh. Nice catch. ;) Guess we wait...

devmondo commented 9 years ago

@Flyer53 thanks fr asking man, life is more complicated now with kid :(

regarding resizable and draggable there are many libs on net now, and you can also use native html5 ones if you dont care about to much old browsers compatibility, here is one good article http://codepen.io/zz85/blog/resizing-moving-snapping-windows-with-js-css

all in all, everyone is moving away from jquery, and alternatives are already there, this will make your Panel dependency free and much smaller :)

hope i was of good help :)

by the way i am using Aurelia framework now it is the framework of the future ES6/ES7 check it out you would love it :)

Flyer53 commented 9 years ago

@devmondo Thanks for the link to the codepen (and all your other tips of course) ... looks interesting :) If I ever make an effort to get rid of jQuery than it shall be a version without any dependencies rather than switching from one library to another ... just pure JavaScript....

Updated the Alpha: now also uses Array.prototype.find So far only desktop versions of FF and IE EDGE work with the Alpha

devmondo commented 9 years ago

@Flyer53 yeah i really advice to drop jquery completely whenever you can, gone is the age of jquery, now most stuff can be done with pure javascript :)

Flyer53 commented 9 years ago

@devmondo @genachka @AviHafner Played a little bit with Windows 10/EDGE in a virtual machine. The problems of EDGE with jsPanel 3 alpha seem all to be related to size and positioning. Found a workaround for size, but not for positioning yet. But since EDGE is still very buggy and crashes quite often I don't want to spend to much time with this until EDGE is ready and stable. So I put this whole thing aside for the moment ...

On FF it works really well though :)

genachka commented 9 years ago

I think that's a very sensible approach. Until Chrome and Edge catch up, no need to support them and make special workarounds for them. I'm hopeful Chrome will be there within the next release or two. :)

On Wed, Jul 15, 2015 at 1:26 AM, Stefan Sträßer notifications@github.com wrote:

@devmondo https://github.com/devmondo @genachka https://github.com/genachka @AviHafner https://github.com/AviHafner Played a little bit with Windows 10/EDGE in a virtual machine. The problems of EDGE with jsPanel 3 alpha seem all to be related to size and positioning. Found a workaround for size, but not for positioning yet. But since EDGE is still very buggy and crashes quite often I don't want to spend to much time with this until EDGE is ready and stable. So I put this whole thing aside for the moment ...

On FF it works really well though :)

— Reply to this email directly or view it on GitHub https://github.com/Flyer53/jsPanel/issues/42#issuecomment-121492410.

-- Gena

devmondo commented 9 years ago

i agree, chrome, firefox and current ie is enough, edge is not even official yet :)

Flyer53 commented 9 years ago

@devmondo @genachka Hey folks! Though I don't think I'll part with jQuery I made a decision for a future version of jsPanel to get rid of jQuery-UI. So far I have ...

a completely new positioning function that's pure JaveScript and without any dependencies (not even jQuery) and should be usable for more than just jsPanels
a basic dragable function (needs jQuery)
a basic resizable function (currently no dependency)

I set up a simple demo page: http://stefanstraesser.eu/projekte/jsUtilities/

Seems to work on FF, Chrome (I use the dev channel), Opera, IE11 and EDGE. No support for touch devices yet.

What you think?

devmondo commented 9 years ago

awesome man, for dragging you dont even need jquery, here is awesome lib that is pure js https://github.com/bevacqua/dragula

Flyer53 commented 9 years ago

@devmondo Thanks for the tip pointing me to dragula. That seems to be a great tool. But if I understand it correctly it's for drag and drop only. So that's not exactly what i need for jsPanel.

One idea circling my head is to still use jQuery-UI draggable and resizable if available because someone uses jQuery-UI anyhow, but fall back to a built-in jQuery-UI-free version if needed.

Flyer53 commented 9 years ago

Missed a little detail ... drop IE11 from the list of compatible browsers. For FF, Chrome, Opera and EDGE it seems to work fine atm.

devmondo commented 9 years ago

darn :(

genachka commented 9 years ago

@Flyer53 I like your direction! Seems like there's an overall effort these days by other libs to remove the jQuery / jQuery-UI dependencies when possible. Most of the other libs I use still require jQuery so I don't expect that to go away all that soon. I like that you're trying to shed the jQuery-UI for 3.0. You can always re-evaluate in a year if jQuery can be removed entirely. :)

@devmondo dragula seems very cool, and gave me an idea for another project, thanks for sharing. ;)

devmondo commented 9 years ago

@genachka :)

Flyer53 commented 9 years ago

@genachka @devmondo @AviHafner Hey folks, I just uploaded a new jsPanel 3 Alpha http://beta.jspanel.de/api/jspanelfunction

Removed the dependency on jQuery-UI and it should work in FF and EDGE now
Removed option.load since it can't do anything option.ajax does just as well or even better
option.offset is now part of option.position
option.selector is renamed to option.container

Almost all features seem to work fine in my tests and I tried to update the API documentation accordingly.

Not yet: export/import of panel layouts support for mobile devices

Just take a look and tell me what you think :-)

AviHafner commented 9 years ago

Hello Stefan It looks good on Firefox browser and Microsoft's new edge Browser

it Does not work in internet explorer, chrome and Opera Yours Hafner

Flyer53 commented 9 years ago

Hi Avi, you're correct. IE, Chrome and Opera lack sufficient support of ES6. Won't be a problem with Chrome and Opera in the future, but IE most probably won't ever get support for ES6 features.

Once I have a version ready that I think is good enough for a beta I'll make some tests with Babel and/or Traceur to make it compatible with browsers that don't offer sufficient ES6 support.

Regards, Stefan

Note: Chrome will have support for arrow functions in version 45 and Opera will have it in version 33

AviHafner commented 9 years ago

Hi Stefan, I do not see myself giving up on customers who using IE. I think that Other developers will have the same attitude.

i will be happy if you can identify Browsers that support of ES6, And then call Jspanel version 3, all the rest of the Browsers that do not supported ES6 your script will call the Jspanel version 2.5.?

Yours Avi

Flyer53 commented 9 years ago

Hi Avi, I do agree with you, but please consider that version 3 is strictly Alpha at the time being.

Nevertheless I updated the Alpha again:

polyfill for Array.prototype.find
polyfill for Object.assign
jsPanel Events distinguish between modern browsers and IE < 11
the loaded script on the beta page is transpiled to ES5 using Babel

So it should work with the current versions of Firefox, EDGE, Chrome, Opera and IE11

Check it out http://beta.jspanel.de/

Regards, Stefan

genachka commented 9 years ago

@AviHafner I don't share your view. Once @Flyer53 releases 3.0, I don't expect him to support browsers that aren't following standards (especially since you can still always use the 2.5.x version for older ones). While it might be nice to support IE 11, he can do that if he chooses (which sounds like he's planning to from a recent post) by using Babel but that would be a short stop gap as ultimately I'd like smaller codebase. But as Windows 10 now has Edge and IE 11 is being killed off, and the other major browsers already support ES6 or likely will by the time 3.0 is released I'd rather he moves forward.

And instead of the code in jsPanel dropping back to 2.5, you can do that in your own code and determine based on browser support which version to use.

Flyer53 commented 9 years ago

@genachka Couldn't have said it better ...

Nevertheless, the extra code to already support Chrome, Opera, IE11 and even IE10(with one restriction) is less thsn 35 lines of code. I can live with that since you don't neccessarily need jquery-ui any more. But I won't do any effort to support IE < 10.

Updated Alpha: http://beta.jspanel.de/

AviHafner commented 9 years ago

Hi @genachka and Stefan. Stefan I Admire what you done with jsPanel. In my view jsPanel is the best panel.

And Despite my positive opinion of jsPanel. When I check in google trends trends paneling Google Trends jsPanel, fancybox, lightbox in Year 2015 I find the use of zero in jsPanel

When I compare the degree of use of google trends of ie9 2015 Google trends ie9, ie10, ie11 I see that ie9 still widely used.

Just for my own curiosity Comparison of the Browsers Google trends ie, firefox, chrome, opera, Microsoft edge

When I'm writing project that is closed to Professors , staff or students at the university where I work, I force my customers to work with advanced browsers, But I cannot do it in projects that is open to walk-in customers.

My point is that we do not develop the software as an art for its own sake, but to develop software that would work in the real world.

Stefan i am going to test version 3 , and i will reply to you in another post Your always Avi

Flyer53 commented 9 years ago

Hi Avi, thanks a lot for your valuable comments. I absolutely do understand you, but please consider the following:

the current alpha of jsPanel 3 doesn't have a feature that's not available in 2.5.3 as well. So if you need to support IE9 simply continue to use 2.5.x which remains available.
jsPanel 3 just does things different and it's my goal to do without features that are officially marked as deprecated and to make use of modern features that will be supported by all major browsers in the near future. I never understood the policy of Microsoft not to make the newer IEs available to older Microsoft Operating Systems.
Then please consider that I never had anything to do with programming in my professional life. I started with jsPanel because I needed something for a very special project of my own and couldn't find something useful for me. At some point I decided to make jsPanel available to others as well. But I won't be able to meet everyones needs.

I hope you understand me as well :-)

My best regards, Stefan

PS: I'll make the alpha available for download within the next days.

Flyer53 commented 9 years ago

@AviHafner @genachka @devmondo New Alpha online with an important change:

Looking for a better solution concerning the dragable/resizable interactions I came back to interact.js and implemented it in this Alpha. interact.js has no dependencies and is widely used. Although I personally don't see it as lightweight I think it's a good choice. Your thoughts?

@AviHafner As I said before I don't see a coming jsPanel 3 as a complete replacement for version 2.5.x. But it might please you that I consider something like is coming with the new jquery version 3. Meaning I think about having 2 jsPanel 3 scripts. One standard script for the modern browsers supporting flexbox, ES6 and so on, and a second compat script for some older browsers.

AviHafner commented 9 years ago

Hi Stefan I checked the version 3 and it looks good on your site, Can you show us one example of main difference between version 3 version 2.

i am going to change in my projects: users who Using ie 9, I will Redirect them to use more advanced browser.

about Your comment: "_I never had anything to do with programming in my professional life_"

Stefan I am a programmer all my entire Mature life, And I tend not to judge other people's work, But I'm going to judge your statement:

you created a piece of art, and I dream that in my professional life I can have a touch that Effect on other professional's programmers like your Influence our professional life with JsPanel.

My best regards, Avi

Flyer53 commented 9 years ago

Hi Avi, thank you very much for your kind words. I truly appreciate this :-)

Because it's still an Alpha version there might still be changes to the API. But once I'm ready to publish a Beta I will put together something like a migration guide to help on the change from version 2 to version 3.

For now I focus on compatibility to devices with touch screen (that's one reason why I try interact.js).

Thanks again Avi and have a nice weekend.

My best regards, Stefan

Flyer53 commented 9 years ago

Once again updated the Alpha version to better support mobile/touch devices (though I can test only on an iPad Air and my Galaxy S6 Edge).

This Alpha can be downloaded from http://beta.jspanel.de/downloads/jsPanel-3.0.0-Alpha4.zip

I tried my best to update the alpha API page as well, so please refer to the API for all changes. The most important things to look at:

former option.selector is renamed to option.container
the positioning is completely new, so take a close look at option.position
former option.offset is removed and offsets are implemented in option.position
option.paneltype is changed for all 3 paneltypes (modals, hints and tooltips)
option.dragable (note there's only one 'g' in dragable) and option.resizable are now realized with interact.js (included in the download), so these configurations changed quite a bit
jsPanel events are changed
for a complete overview please refer to http://beta.jspanel.de/api.html

Flyer53 commented 9 years ago

@AviHafner @genachka @devmondo Well ... I'm back to jquery-ui for drag and resize. Why I dropped interact.js again:

While interact.js works fine on desktop browsers, on mobile browsers with touch input it's not working as expected
You can't specify options seperately for drag and resize operations. Most options apply to both interactions. Example: If you specify a handle for the draging interactions it applies also to the resize interaction. But it makes absolutely no sense to resize a panel with the header as handle.
jQuery-UI offers a lot more options for use in jsPanel and it works on both desktops and mobiles

http://beta.jspanel.de/

devmondo commented 9 years ago

@Flyer53 hahaha, it seems jquery is the inescapable beast :)

by the way the site is not working, complaining about pushstate issues

Flyer53 commented 9 years ago

@devmondo Sorry, works again ... uploaded a wrong file.

Guess you're correct ... I tried for days and really looked for another solution. But couldn't find anything that even comes close to jquery ui. Interact.js looked promising at first ... until you go mobile or need some more options :( Tried some other scripts as well, but they all had the one or the other drawback.

devmondo commented 9 years ago

@Flyer53 i am always amazed how you keep improving this lib, you rock man!

i still say jquery will go soon, it is just a matter of time, now we are in the new era of javascript, i my self still use a lot of jquery plugins because there is no escape yet :)

Flyer53 commented 9 years ago

@devmondo Thanks a lot :) I personally don't think that jQuery will go that soon. The jQuery people very well know that times are changing and the coming version 3 of jQuery shows this already. There are simply to much websites out there using jQuery and its uge amount of plugins to let it go. Don't you think that one reason why webstandards evolve is because jQuery introduced a lot of features making live easier?

PS: Basically jsPanel 3 Alpha works fine with jQuery 3.0.0-Alpha1. It's just jQuery Ui that doesn't support jQuery 3 yet ...

Another remark: If IE/EDGE would support the CSS resize property there almost wouldn't be a need of a resize plugin at all!

Flyer53 commented 9 years ago

Added a MutationObserver() polyfill to the latest alpha preview. So all features should work with the current versions of EDGE, FF, Chrome, Opera and with IE11/IE10.

http://beta.jspanel.de/

devmondo commented 9 years ago

@Flyer53 awesome man!!!!

i personally have no issues with jquery, in fact i love it, it is still the most flexible lib out there, and as i said i still use it :)

Flyer53 commented 9 years ago

Next update of jsPanel 3 Alpha is online.

use of function default parameters
added the possibility to set option.position with a shorthand string instead of the object. So you can write ...

$.jsPanel({
    position: "left-top"
});

instead of:

$.jsPanel({
    position: {
        my: "left-top",
        at: "left-top"
    }
});

Or optionally with additional offsets:

$.jsPanel({
    position: "left-top 50 50"
});

instead of:

$.jsPanel({
    position: {
        my: "left-top",
        at: "left-top",
        offsetX: 50,
        offsetY: 50
    }
});

All other option.position parameters are of course set to their defaults when using the shorthand string. http://beta.jspanel.de/

devmondo commented 9 years ago

cool :) more semantic

Flyer53 commented 9 years ago

Yeah! And the next update (probably tomorrow) will bring a greatly improved autopositioning. Autoposition will be possible for all 9 basic positions, not only for the 'top row', and all positions will support autoposition down, up, right or left. The shorthand for option.position will also be updated to have a value for autoposition.

Flyer53 commented 9 years ago

Ok, the updates noted above are online! Additionally the current Alpha does without a MutationObserver -> no need for the polyfill -> reduces file size by more than 20kb. Docs should be up to date and a download is available. Have to do some testing, but I think it's close to a Beta version. http://beta.jspanel.de/api.html

devmondo commented 9 years ago

looking great man, keep up the good work :)

Flyer53 commented 9 years ago

@devmondo Thanks a lot :) Added a small goodie for you. When using option.rtl the resizer icon moves from the lower right corner to the lower left.

Argun commented 9 years ago

@Flyer53

Hi, Stefan

Could you please support hide panel function ? like this

Thanks in advance.

Flyer53 commented 9 years ago

@Argun Hi there, I posted a suggestion on stackoverflow: http://stackoverflow.com/questions/32758401/how-to-stop-function-in-event-handler/32760852#32760852 Let me know whether this is a solution for you.

Argun commented 9 years ago

@Flyer53 nice guy! :+1:

Your solution is perfect! Thank you for your help again.

Flyer53 commented 9 years ago

@Argun Welcome any time ... One more note on that topic in case you consider switching to jQuery 3 once it's released (and jQuery UI is compatible with it): As far as I know the show/hide methods might not work anymore in jQuery 3. So maybe it's worth to think about not hiding the panel but moving it off screen for example.

Argun commented 9 years ago

@Flyer53 OK, thank you for your remind.

Flyer53 / jsPanel

jsPanel 3 Alpha #42