search

Flyer53 / jsPanel

A jQuery Plugin to create highly configurable floating panels, modals, tooltips and hints/notifiers for use in a backend solution and other web applications.
http://v2.jspanel.de/
Other
163 stars 56 forks source link

bootstrap 3 integration #2

Closed devmondo closed 10 years ago

devmondo commented 10 years ago

hi, awesome work, is it possible to integrate with bootstrap 3

thanks in advanced.

Flyer53 commented 10 years ago

Hi, thanks for the praise :-) Well up to now I never worked with bootstrap and so far there are only two real world backends that use my plugin. Both of my working. So actually I don't know how it integrates in bootstrap. But sounds like a good idea to check out. If you want to try it... I would really appreciate that. Since I'm not what you would call a professional programmer it might take some time for me to check that out... doing this all in my spare time. Feedback always welcome ... Have fun

Flyer53 commented 10 years ago

I made a first and simple test with the bootstrap 3 basic template. The first impression is pretty good, I only found a glitch with the width of the content area of the jsPanel when you maximize the jsPanel. I will try to find the problem of course. A thorough test will take some time ...

devmondo commented 10 years ago

awesome reply man, i am a novice programmer myself :( integrating with bootstrap will make a lot more people use your work because bootstrap is the defacto, and i am yet to see another modal like yours with all those features.

if you also want to look ahead, check angular.js it is all the rage now in terms of client side development and my life was never easier after i started using, you will forget about Jquery mess and will live longer :)

all the best for you

Flyer53 commented 10 years ago

Thanks for the tips, I will definitely take a closer look to bootstrap. By the way I found the above mentioned glitch in my script and corrected it in the testfile for the bootstrap test. You can take a look at:

http://jspanel.stefanstraesser.eu/tests/bootstrap/

So far it's really nothing more than a very, very basic test ... and I have a few other things on my list before I can dive into this.

Thanks for the hint to angular.js. I heard of it of course, but never took a look at that either. Goes to the todo list as well...

The weekend is coming... have fun

devmondo commented 10 years ago

excuse my ignorance mate, but what did you do above in terms of Bootstrap integration, i dont seem to be able to find it.

happy weekend to you :)

Flyer53 commented 10 years ago

Could it be that I simply didn't get what exactly you mean with "bootstrap integration"? For now all I wanted to find out was wether both the bootstrap script and the jsPanel script with its dependencies can be in one document without interfering eachother. And that seems to work out pretty ok.

Might be a good idea if you explain what exactly you think of when talking abtut "bootstrap integration". Would help me a lot!

Have fun, Stefan

devmondo commented 10 years ago

sure man, what i meant is the HTML and CSS structure of bootstrap, bootstrap follows responsive design methodology, so when you change screen size everything adapts, thus your CSS and HTML has to follow that.

here is an example of the Bootstrap Modal html structure

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Flyer53 commented 10 years ago

Ok, thanks ... now I got it! I will look into this ... but don't ask me when, since this will need some more knowledge about the way bootstrap works. And for the time being I have a few other things on my list I want to get done first.

I'm thinking about doing the documentation and demopage in bootstrap to get to know it better ...

PS: By the end of the week I'll have version 1.2.0 with a few improvements released.

devmondo commented 10 years ago

awesome man,

all the best for you :)

Flyer53 commented 10 years ago

Just released version 1.3.0 with a few improvements and activated the new homepage for jsPanel

http://jspanel.de/

which is done with a lot of bootstrap ...

feedback appriciated very much :-)

Flyer53 commented 10 years ago

Concerning bootstrap: While writing the new jsPanel homepage I learned a few things about bootstrap .... and now I'm asking myself how a bootstrap integration of jsPanel might possibly look like? Since bootstrap doesn't have any components that are designed to be dragged around freely. As far as I can see jsPanel works pretty good in a bootstrap environment. What would be the benefit ... other than change the design to look more like bootstrap or integrating the one or the other element of bootstrap. More questions than answers.... any ideas?

devmondo commented 10 years ago

so awesome man, even the page design is much much better now, kudo really on your work.

some recommendations -use icon fonts like font awesome for the icons, it is the standard now and make customization a lot better. check redactor.js an awesome Editor that moved to Icon Fonts, it will inspire you -the Maximize option does not go full screen ("unless i am wrong") -Theming support. -integration with AbgularJS when ever you can andd add your panel to ngmodules.org so you will get more users. -when i hold the lower right resize part, the resizing is happening on the left part of the panel, until i move the panel then the resize happens correctly towards the direction of pulling the icon, same thing when i click maximize button, the panel jumps to the left side and resize it self. note this behaviour is not in all demos, it happens for example in the Title change demo -The over all design needs little work, check sencha.js for example for inspiration.

again you have done an awesome job on the new Work, i love it and thank you very much for giving us such a cool panel :)

Flyer53 commented 10 years ago

Thanks for the superfast answer :-)

and of course for all the tips, hints and recommendations ...

The maximize button will not go to full screen intentionally. I wanted it to maximize only within the element that contains the panel. Adding the panel to the body element will expand it much more...

The other things i'll have to check ...

Thanks again...

Flyer53 commented 10 years ago

Check out

http://jspanel.de/api.html

As far as I can see the resize problem you mentioned above occurs only when using option.position with bottom or right settings. I think I fixed this issue and even do without default functions now for the resizable/draggable start events.

devmondo commented 10 years ago

awesome man,

i have checked the demo page and all is fixed

thank you very much :)

Flyer53 commented 10 years ago

Just updated to version 1.4.0 .... New more minimalistic design I think is much more stylish and neutral and the css is more robust in different environments. Guess you'll like the additions in option.controls... take a look at the example in

http://jspanel.de/api.html#option-toolbarContent

devmondo commented 10 years ago

wowha,

that is seriously cool man, the new Styling is a lot better,really, and the option to use icon font is awesome, you are on fire, thanks man :)

if you don't mind me adding more thoughts, check this bootstrap theme, http://flatstrap.org/javascript.html#modals it will really inspire you to polish the design more

also ease up the shadow a little bit to give the panel a more modern look.

sorry for talking to much i just want to help :)

Flyer53 commented 10 years ago

Keep on talking buddy ;-)

You already gave me a lot of valuable tip that helped me enormously

And there are more things on the list:

You have more thoughts... don't hesitate to tell me :-)

devmondo commented 10 years ago

thank you mate :)

this list look great,

-regarding theming, if you base it completely on Bootstrap, it will be so easy for anyone one who is using different Bootstrap themes, because JSPanel will adapt to the new theme automatically and there won't be need for changes.

-Modal Panel is just Fantastic, this is one very essential area JSPanel is missing, i cant wait for it, so i can replace Bootstrap Modal.

-for Full screen, it should really mean full screen, because as you know we are all accustomed that when we press maximize button in any OS we expect it to really go Full screen.

i suggest if you want to integrate with Angular, is to start your whole Components Name space, so you might want to create your whole components set and not just the panel.

by the way here is a link to Angular UI which is the official Bootstrap version for angular.js, i am sure the source code will help you much.

http://angular-ui.github.io/bootstrap/

for me personally, i started dropping JQuery whenever it is possible, the amount of code you need to do the same thing in Angular is 20% to 50%, and i could not believe it until i really got into it.

all the best man

Flyer53 commented 10 years ago

Want to take a look at 1.5.0beta1 ...

option.modal is implemented and as far as I testet it works quite well.

http://jspanel.de/api-beta.html#option-modal

And a big thanks again for all the input. I'm already working on a basic support for themes. But I won't base it completely on bootstrap since I don't want to add more dependencies. A reasonable way - I think - would be to create a branch that specializes on bootstrap...

Next will be the maximize issue ...

.. and of course I won't forget to consider all the other tips you provided :-)

Have a nice weekend

devmondo commented 10 years ago

hi man,

the Modal looks great, but we also need it to have all other features like Maximize, etc..

a bootstrap branch sounds the right way, you are right, this way others can use it freely.

have a nice weekend you too :)

Flyer53 commented 10 years ago

Hey buddy, beta 7 of 1.5.0 is out to test: http://jspanel.de/api-beta.html

By the way: In case you don't know it already I happened accross a nice jQuery plugin that helps to alter/remove css classes with wildcard matching: https://gist.github.com/peteboere/1517285

Take care :-)

devmondo commented 10 years ago

awesome man, great work and efforts, thank you very much.

some notes

-the themes example maybe having a bug, when you click on each theme individually you get different icons from when you click on "Show all themes at once" which has better Icons in terms of design.

-Maximize works great, but if you make the animation type for JSPanel configurable it would be great, sometimes users want slide, fade, etc...

-regarding the Modal, i agree with you, maybe i was not clear, what i meant is usually we have 3 types of Modals, Prompt, Info, Confirm, we need ability to differentiate those, as each behaves differently.

man, that Alter/Remove class plugin is awesome, i was searching for something today, wow what are the odes, thank you very much...Take care :)

Flyer53 commented 10 years ago

No, it's not a bug in themes. Since you set the options for each jsPanel individually, they simply are configured differently. The "show all" example with the bootstrap icons and the single examples with the default icons. With version 1.5 I will add a few words about the defaults and how to change them globally in the api docs.

I'll think about the animation issue.... but I already have almost 1000 lines of code and I don't want to complicate it much more. One of the next things to do when 1.5. is out is going over the code and find possibilities to improve or simplify the code. You know .... I'm not a pro .... but trying hard ;-)

Now I see what you mean concerning the modal. One of the ideas in my mind is to include an optional bottom toolbar - that would take the necessary buttons for the modal for example. But this is something for the next major version. And you can already realize any content you want. I might set up a demo app with more "real life" examples when 1.5. is released.

Yeah that alter/remove plugin is great :-)

devmondo commented 10 years ago

thank you man, for the input,

what you said is correct, may i suggest something regarding animation? now a days most browsers support CSS3 animations and there are JS libraries that will do that for you and fall back to Javascript animation when css3 animation is not supported

here are some links https://github.com/minimit/minimit-anima http://labs.bigroomstudios.com/libraries/animo-js

hope that helps

Flyer53 commented 10 years ago

Version 1.5.0 is released :-) and it seems to work quite well

And I got the api documentation up to date including a few words about the defaults and how to change them.

Thanks again for your input, tips and hints ... always welcome!

The 2 scripts you mentioned above seem to be pretty cool stuff. I'll take a closer look. But since I don't want to create more dependencies this also might be better in a branch...

Happy coding :-)

devmondo commented 10 years ago

the Docs look great, thank you for the hard work man.

all the best for you :)

Flyer53 commented 10 years ago

Thanks man ... and already working on the next step. My architecture seems to be not so bad. Looks like I can integrate an optional footer toolbar quite easily (buttons for the modal for example ...). How about that ... ?

devmondo commented 10 years ago

An optional footer sounds great, specially if we can mimic windows explorer info in the footer, for example if user select a file in the modal, the footer shows the size of this file

Flyer53 commented 10 years ago

A first beta with option.toolbarFooter is online

http://jspanel.de/beta/api.html#option-toolbarFooter

devmondo commented 10 years ago

hey man, this really looks cool and i love it, thank you very much, and i love the fact that you are using bootstrap classes for the buttons there.

also if we could have the ability to plug not just buttons, also Text or any other template like i mentioned above it would be seriously great. as it will act as info footer.

another humble suggestions, is the ability to assign callbacks when adding buttons, it will ease up work, and scroll for contents if modal is fixed width, i bought this long time ago and i love it http://codecanyon.net/item/smart-alert/full_screen_preview/3554158

but yours has more options, check the examples for scroll and adding buttons call backs here

http://codeblog.cz/alert/doc/index.html

thanks a lot for your work and time.

Flyer53 commented 10 years ago

Wow ... that smart alert tool looks realy great! Where do you get al this from.... you must spend wekks searching for all this goodies ;-)

Well, what I have in mind is that the footer toolbar option accepts an array of objects where each object represents an item for the toolbar, configurable with element, event and callback.

I already think about integrating jQuery slimScroll. But I would make that optional in order not to introduce more mandatory dependencies...

By the way... I finetuned the css/themes a bit http://jspanel.de/beta/api.html#option-toolbarFooter

See you ...

Flyer53 commented 10 years ago

Just updated to the latest beta with extended option.toolbarFooter capabilities...

http://jspanel.de/beta/api.html#option-toolbarFooter

You can specify items to add to the footer toolbar and assign an eventtype/callback to each individual item. Try the buttons on the footerToolbar example...

devmondo commented 10 years ago

thank you :) i tend to have a problem and goodthing at hte same time in my personality, i strive for perfection, some time it helps and sometimes it kills your spirit hahahah

man, the new styling and toolbar option is just amazing, really such a great improve, it needs some more tweaking, but hey you are not a designer, and what you did on your own is just fantastic, really appreciated.

if we can grab Smart alert philosophy in terms of modal types, like, Alert, Prompt, etc... it will make jspanel more streamlined.

and man, i was really searching for a panel like yours, there are a lot on the net, but all lacking something or another, for example smart alert is great but lacking the header buttons like yours, yours is shaping to be my dream of a true Panel, thanks alot really :)

to be honest with you, i feel really ashamed of myself not able to contribute in coding instead of words, i wish i could do something better :(

devmondo commented 10 years ago

hi again,

i have noticed in the http://jspanel.de/beta/api.html#option-toolbarHeader

when you hover over the buttons on the left, the Drag functionality take over while we should be able to click the buttons, i maybe wrong but is this a bug ?

Flyer53 commented 10 years ago

It's not a bug. When the items have a callback attached it works as expected. I updated the example accordingly :-) http://jspanel.de/beta/api.html#option-toolbarHeader

Don't worry buddy ... your words already helped and inspired me a lot. jsPanel wouldn't have made this progress so fast without your tips. So keep on talking ...

I think about extending the modal capabilities ... not sure how to implement it though because I don't want to blow up the code to much. May be something like an extension for the plugin ??

Another thing is building up in my mind... optional use as basic tooltip, although there are already super plugins for that. My favorite: qTip2

And yep, a bit of more finetuning for the styles wouldn't hurt ... I'll do my best.

Take care

devmondo commented 10 years ago

thank you for your kind words man :)

now it works, though when you move between the spaces between the buttons, hte drag handler shows again, and it is confusing, i suggested using the jquery ui, exclude option, to exclude the toolbar that surrounds those buttons.

regarding extending the modal through plugins, it is a nice idea, but is it worth it? i mean look at X-editable http://vitalets.github.io/x-editable/ which is an amazing plugin i use a lot. it has like zillion features with no plugins, but again, opening up possibilities is awesome, the key point here is what should be extended and how.

regarding the tool tip, you have read my mind hahaha, i wanted to suggest such a feature but i was afraid, it would be to much talking :) qTip2 is great, and i think JSPanel to act as tooltip, servers a very legit and essential purpose at the end of the day it is a pop up and i would love for that to happen, an example of that that i use to much is this lovely time saver http://ethaizone.github.io/Bootstrap-Confirmation/ that is why i suggested before to adapt the Smart Alert pop types, this will allow us to do things like the bootstrap confirmation above, and right now i use it and jspanel, but why not use jspanel for all of that ? wouldnt that be cool and save maintenance :)

and if i may suggest, other than having tooltip which is great and a must, JsPanel could serve as a notifier, like this lovely plugin that i also use http://github.hubspot.com/messenger/

see at the end of the day when we are dealing with web application, we always need, Modal with custom content, Confirmation Modal , Prompt Modal, Alert Modal, tooltip Modal, and Notification Modal.

we can name them what we like let it be popup, tooltip, modal, etc... at the end of the day i need a div element that pops to the screen where i can interact with and JsPanel is just that, and it would be the ultimate and one and only tool needed for all of those, i really wish as i am sick of having to maintain all those plugins.

regarding the design, you are doing more than what you can, and what i do usually is i got to these sites http://bootswatch.com/ https://wrapbootstrap.com/

and try all the components in each theme, then using chrome dev tool bar i dig through the Css and learn it and use it in my app.

hope what i said would help in anyway :)

all hte best mate.

Flyer53 commented 10 years ago

Just a quick answer ... the garden chores are waiting ;-)

So you think my jsPanel could evolve to the super multifunctional all-in-one tool! Fetching idea... I'll do my very best. Let's see how far I come ...

Enjoy the weekend :-)

devmondo commented 10 years ago

garden chores, hahaha this is second time in my life i hear this :) i love this expression

yeah man, it can, and it will be, cleaning the API and streamline it will make everything fine.

if i can help in anyway please tell me, i cant wait to ditch all things and use only this :)

have a nice week end you too :)

Flyer53 commented 10 years ago

Just tweaked a bit on the css and themes ... and you'll notice I visited bootswatch :-)

http://jspanel.de/beta/api.html

And by the way... the garden looks great now ... lol ....

devmondo commented 10 years ago

awesome man, great improvement.

i feel talking more than helping so allowed myself to do some shameful photoshop Concept Theme maybe it will help you, and if we move to bootstrap things will be much better, really everyday i see it is a must to adapt a css framework.

here is the Link to the PSD and JPG http://s000.tinyupload.com/?file_id=09344257865333656561

Flyer53 commented 10 years ago

Your favorite word... awesome... Oh yeah! I like that example concept.... added an additional theme "white". It comes pretty close I'd say. I might want to adjust the others accordingly... http://jspanel.de/beta/api.html#option-theme Try the single theme white button, not the "open all..." one.

And I sure will make a branch that defaults to bootstrap. Just give me some time, because this needs a few more changes to work as intended. To me it's important to keep a branch that works without any additional dependencies.

A question: What machine are you working with? Since I don't have the resources to check my work on a zillion different machines and OS I test only on my Windows 7 system with Firefox, Chrome and IE. The day before yesterday I by chance could get hands on a Mac and found an issue: A Safari on Mac seems not Mac support javascript array.forEach(). Chnged that to a classical "for" loop.

Happy garden working ;-)

devmondo commented 10 years ago

hhha you have got to be kidding me man :)

you are on fire, i really love what you did, it is pretty damn close, but forgive me for saying that it will need some modification in terms of design, like there is no balance between the elements, for example the title font size should be bigger than status bar info font size. the buttons are to small, and some other nitty pitty stuff, but none the less, really great work, thank you :)

in terms of bootstrap, take your time man, you are in controller here

regrading my machine, i am using windows 8 x64 no issues so far, but for the saffari thing, i think it is the lack of es-5 Support, same thing happens with IE, to solve this everyone is including libs like underscore or lodash, but you can get away with simply installing this shim below https://github.com/es-shims/es5-shim

you must chose one of the above or revert back to for loop, i say to help with back, use the Shim, it is working perfectly for everyone, and will keep you from legacy code and improve your productivity.

i will be testing in all major browsers and report back to you.

happy Garden choring :)

Flyer53 commented 10 years ago

You're right on the font sizes and I adjusted that already a bit (online as well). But that's about as far as I want to go concerning this point. I don't think I want the buttons bigger though... needs some contemplating. A little ignorance is the small image for the resize handle. But I don't want to do completely without it.

On the download page I included a button to download the beta.

Well, the javascript issue is not a problem so far. array.forEach() was the only problem and the for() loop works quite as well. Some people say it's even significantly faster than forEach() and they won't remove it from javascript any time soon... they say...

devmondo commented 10 years ago

great man,

i saw the new modification, now it looks better, specially for people with bootstrap taste in their mouth like me :) i think the best way for perfecting themes, is once you finalize the structure and implementations above plus Bootstrap Branch, everything is changeable through CSS and anyone will be able to create his own theme the way it fits them, trust me people have a really wide range of taste on this :)

regarding Javascript issue, you are correct, after all Benchmarking let you chose whatever fits you the best.

happy coding :)

Flyer53 commented 10 years ago

Updated the beta again http://jspanel.de/beta/api.html#option-modal

option.modal now has a few predefined setups for a few standard situations.

Also tweaked the dimensions of header and footer a bit and finally enlarged the footer buttons one step... yeah I know... you told me so ;-)

Open for ideas concerning the modal setups... default content??... which buttons??

A default content for the modal setups that can be overruled might be not bad. What do you think? The other things I want to keep as flexible as possible. And of course there is no use in providing any default callbacks other than closing the panel maybe...

devmondo commented 10 years ago

great, man, i love the idea of optionmodal, might call it "ModalType" as it goes along with description better, as option might confuse users, i myself first thought it is some kind of extra options.

the idea is really neat and goes along with Smart alert, but we have got a problem -the buttons text is fixed, so we are having localization issues, i need to display text for my users in spanish, arabic, etc..

personally i think you should drop the login option, as in real world situations, login might contain extra fields, like remember password, social login, etc.. and it will complicate your work to add them all, let us do the work here while you drink your Jamaican Pina Colada :)

regarding theming, you are doing great, i think it is better to let users do the themeing and offer them basic theme, you will never satisfy us trust me :) take my comments above about after final code we will do the theming, it is the best way to go .

in terms of best theme you offered so far is http://jspanel.de/beta/api.html#option-toolbarHeader http://jspanel.de/beta/api.html#option-toolbarFooter and ahem my theme :) if you can change the resize icon with mine or a more sharp one it will b better as the current one is to jagged, even though the Sprite image you use here is fine http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/flick/images/ui-icons_ff0084_256x240.png, i dont know why this is happening, but there is a problem, maybe icon is resized in CSS ?

regarding default content overriding, yeah please it is a must, i have plenty of cases for that, specially Ajax loaded content, and it must be applicable for the new optionmodal

regarding callbacks, i see the callbacks you provided so far are totally adequate, but i see we need the following -on modal opened callback -on modal closed callback they are essential to interact with the rest of the application code andif more needed in future, you study the need and act upon it.

i am really in love with this panel, it is fulfilling many of my needs and i already started replacing other modals with this in my work, and when other options like tooltip and hint comes in, boy this will be chrismas gift :), your work is really invaluable thanks a lot really.

on a side note, running through your code on github, it really makes me cringe, when i see how much code you will save if this was does in angular, jquery is so old school now :)

Flyer53 commented 10 years ago

Ok, let me answer step by step.

Flyer53 commented 10 years ago

Updated the beta again to include custom button texts for the modal presets... http://jspanel.de/beta/api.html#option-modal The modal api changed a bit to get that done.

devmondo commented 10 years ago

haha, man, i wish i had your speed, touch on wood :) the text option is exactly what we want for localization, thank you. now i can put some fancy German words like "ehrfürchtige" :)

regarding call back, excuse me i did not see the default callback when modal is opened, and you are right about buttons, their call backs will suffice,but if user click close button as you said, we need callback here, to for example validate, prevent him from leaving the modal if he does not satisfy a requirement. but i think that close button acts like cancel or no button, so instead of duplicating work, why not make the close buttons share the cancel or no button callback ?

regarding resize icon, my humble opinion is that we should not create dependency on jquery ui, and you are right, we can always override with CSS, and again, once things finalized, we can replace whole theme with css, so i don think there is an issue there.

regarding default content, i think i miss understood you, no need for default content, as long as we can add our own content, via html or AJAX.

thank you for all the update man