bootstrap 3 integration

devmondo commented 10 years ago

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

thanks in advanced.

Flyer53 commented 10 years ago

... and still on fast forward... :)

I photoshopped another resize icon. It's a bit bigger but looks better I'd say. For the time being I think I can tick off themes...

Thinking about events I came to the conclusion that the available functions might be enough in most cases... but are a not really the same as "real" events. So I tried my best with implementing the events "onjspanelloaded" and "onjspanelclosed". onjspanelloaded will fire when the fading in of the jsPanel is completed onjspanelclosed fires after removal of the jsPanel It's not in the api documentation yet but you can see a message in the firebug console when creating or closing a jsPanel on the beta page. The event for a closed panel proved to be tricky though...

$( 'body' ).on( 'onjspanelloaded', function( event, jsPanelID ) {
        console.log( 'jsPanel added with ID: ' + jsPanelID )
});
$( 'body' ).on( 'onjspanelclosed', function( event, jsPanelID ) {
        console.log( 'Node removed ID: ' + jsPanelID )
});

Seems to work quite well, but I never handled custom events before.... check it out

Another thing not documented yet is option.show with the choice between 'fadeIn' and 'slideDown' as entry animation. You can see both in action on... http://jspanel.de/beta/index.html

Flyer53 commented 10 years ago

... and updated the beta documentation as well, including examples ...

devmondo commented 10 years ago

just great man, really :)

the callbacks are more than enough now and tried them and they are working great, and the new resize Icon is much better, but why did you photoshop a new one it is the same as the one i photoshoped for you :)

regarding the animation, i am really not to keen on the one in the beta page, it flyes from left to right to top to bottom, to distracting, sorry to say that :)

i really really encourge you to adapt one of the CSS3 animation frame works, they offer a lot and fallback to flash, or to make it better, give us an option for 2 types of built in animations, Slide, Fade, and adapt one of those frameworks, the cool thing about them is you dont have to do anything, it is just a punch of css classes , here are links http://minimamente.com/example/magic_animations/ http://h5bp.github.io/Effeckt.css/

Flyer53 commented 10 years ago

Oh, your icon was the same! Didn't realize it... sorry...

Animation: I don't know wether I get you right here. You choose either a fadeIn at the configured position or a slideDown to the position you configured. That's it. But never a combination and definitely no flying across the screen of a single panel. I would absolutely hate that. Animations are great when used carefully... very carefully! In the very most cases I would choose the fadeIn. And maybe the slideDown in situations where you want the panel in the top left or top right corner, you know like the panel that opens when you want to log out from google for example. I personally am totally satisfied with the two options. Please no puffing.. exploding.. folding.. bouncing... and stuff like that...

After some more testing I think I can release 1.6. What do you think? And then I'll take a look at the css frameworks you propose. But there won't be any more dependencies in the master branch. Any more libraries/frameworks will go in a branch. I don't want to prevent people from using jsPanel because there is a dependency they simply don't like or don't want to have for whatever reason. I hope you understand that.

And there still are the popup and/or tooltip additions circling my mind....

Thanks again for all the input... keep talking :)

devmondo commented 10 years ago

thank you for the detailed response mate, and i agree with all above, things look stable, and branching with bootstrap will be great as first.

pop, notification, is the next thing i cant wait to see it :)

please let me know if i can help with anything.

Flyer53 commented 10 years ago

Released 1.6.0 ... I think it's quite a good thing now and compared with 1.0 I really made a huge step forward, thanks to your support!

Now I'll start collecting infos about some frameworks/libraries and than I'll see what's next.

Looked already at the two links you posted concerning animations. Really nice work, but at the moment I can't see a reason to implement more animation stuff for the panel itself. Might change when I start working on the tooltip/infopopup thing though ...

devmondo commented 10 years ago

you say huge step? i say a gigantic step and it is all thanks to you, really sorry i could not help more.

regarding animation, i agree with you, but as i said before, it will not create dependency, you don't even have to implement them, just give us a new option to disable built in animation and another to add custom css classes, and it will work, so no more code on your part. all will be done in css in the background.

cant wait for new implementations

Flyer53 commented 10 years ago

You drive me crazy ... ;-) ... just kidding ... go to http://jspanel.de/beta/index.html and wait a moment.

I modified the script a bit. When option.show is a string != 'fadeIn' or != 'slideDown' it will be interpreted as class name to add to the jsPanel. On the index page of the beta I included magic.css for testing. I really didn't have an idea what's possible with css transformations.

Important limitation: It does not work when option.position.bottom is used or either one of the positioning shortcuts 'bottom right', 'bottom center' or 'bottom left' unless you know the exact height of the panel and choose bottom acordingly. And probably onjspanelloaded won't fire at the correct time ...

Example Code:

var panel = $("body").jsPanel({
    controls: { buttons: 'all', iconfont: 'bootstrap' },
    title:    "magic.css - experimental",
    theme:    "danger",
    size:     { width:350, height:'auto' },
    position: { top:10, left:10 },
    overflow: 'hidden',
    show:     'magictime twisterInDown',
    content:  '<h2 style="padding:20px;text-align:center;">magic.css - experimental</h2>'            
});

Flyer53 commented 10 years ago

And now I have a javascript question: I want to chain a function to a jQuery collection or a variable representing a jQuery collection. How do I do this when I don't know the name of the function to chain because the name of the function is a value of a parameter in a configuration object that I don't know when the script is loaded?

Flyer53 commented 10 years ago

Worksl with animate.css too... but I have to correct my statement from above. Wether the animations work or not seems to be a metter of finetuning position and type of animation. Some work without a problem, some don't work at all and some need specific positioning to work.

devmondo commented 10 years ago

are you kidding? you are the one who is driving me crazy, i cant believe the speed of your integration "touch wood again" :)

the animation integration looks great, seriously awesome, and regarding positions, you are correct, some css animations require positioning, though, the whole idea of integrating with css animation that i suggested, is to avoid javascript slow animations which will make JsPanel more appealing and light in code and not for those fancy animations :)

and i also noticed, that the new resize icon, is great and not jaggy, what did you change? also kudo on removing the header toolbar from dragging, now when i hover on them or spaces between them i don't see dagging icon.

regarding chaining of functions, i don't know if these links help or not http://stackoverflow.com/questions/21068105/javascript-prototype-inheritance-and-chaining-constructs-for-an-object http://schier.co/post/method-chaining-in-javascript http://stackoverflow.com/questions/9338439/how-to-chain-functions-without-using-prototype

keep the goodies and choring mate, you are great :)

Flyer53 commented 10 years ago

No the links didn't help very much. Thanks anyhow. Posted a question on stackoverflow myself and got the answer I was looking for. You just have to use bracket notation like

$( selector )[ option.show ]();

So on the beta page it works like this now: Either option.show is a string without a space, then it's used as method to blend in the jsPanel. Or it's a string with a space, then it's interpreted as a class name e.g. magictime twisterInDown that's to be added to the jsPanel and no function is used. Of course that works onlyas intended when there are at least two class names to add like with animate.css and magic.css. I didn't make a thourough search for other pure css animation frameworks... but for a start it gives you enough options I think.

Yeah I optimized the one or the other little issue... I guess jsPanel now is something you can really use. Please let me know in case you use it somewhere open to the public. Ok!?

devmondo commented 10 years ago

glad you got your issue solved, i understood what you mean now, i sued this technique before great for dynamic stuff.

the animation addition is seriously great, thanks again, and if you want to add the option to not use those libraries and let us do the animation ourselves you can always do the following, when initiating the panel add the css class and any normal css animation will work and that is how all those animation framework do it, here are very simple examples http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load http://bavotasan.com/2011/a-simple-fade-with-css3/

regarding usage, i will once i use it in public place i promise, currently i am using it in administration area.

a tip to make your Panel more known, add it to those following sites, i brows them everyday for new plugins http://www.jqueryrain.com/ http://www.webresourcesdepot.com/ http://www.webappers.com/ http://www.unheap.com/ https://plugins.jquery.com/ http://jquery-plugins.net/

hope that helps. i really want to see more people use this Gem, really...

Flyer53 commented 10 years ago

Yep! On some sites it's already registered. https://plugins.jquery.com/ was the very first one I did myself. Somebody else put it on jqueryrain already and on some others I'm working on.

I might have something for you now. Do you know this already:

http://cbavota.bitbucket.org/css3-tips/

Amazing !!

devmondo commented 10 years ago

hahhaa, now i remember how i got to know your plugins, it was through jquery rain, so it is working :)

the reason there is not much adaption for JSPanel yet, is because it does not have the bootstrap fancy name associated with it. trust me once you add this it will skyrocket,though i don't like some parts about bootstrap and there are better frameworks like http://foundation.zurb.com/ http://semantic-ui.com/ but still bootstrap is the king in terms of adaption.

the link is great, and this shows as i told you how much your life will be easy with CSS, of course CSS has limitations that is why we still use Javascript, not forget browsers compatibility, which is getting alot alot alot better now.

and i really want you to go here the people there do some awesome Javascript tutorials as plugins and some stuff are just mind blowing, it will inspire you really. http://tympanus.net/codrops/

hope it helps :)

Flyer53 commented 10 years ago

Jesus.... right now I suffer from a severe input overload ;) Quite a bunch of frameworks/libraries/tools to look at... where to start... can't do everything at once...

Concerning bootstrap the only idea I have so far is to check wether I can use the one or the other bootstrap class by default... with some adjustments maybe within jsPanel. Beyond this the jsPanel homepage shows that it works trouble-free in a bootstrap environment as far as I can say... and hopefully with other frameworks as well. What I don't like about bootstrap: It lacks documentation severely. Particularly for the js parts. The Affix thing for example is practically unusable unless you search the net for thirdparty help and tutorials.

Foundation seems to be great...

All the tools I saw so far lack one thing: They don't offer a component that can be dragged around the page freely and is higly configurable. That's the unique feature of jsPanel I think. Just have o find a way to promote this.

Happy Easter Holidays :)

PS: I think about setting up a blog. Might be more suitable for a general discussion like this...

devmondo commented 10 years ago

Happy Easter to you my friend :)

totally agree with you on the lack of documentation, and you are 100 % about JSPanel uniqueness, there is nothing in all those frame works that matches, that is why i told you it will be the ultimate one.

and to tell you the truth if i had time and knowledge, i will never use any of them, i will create my own CSS and JS components, sadly i am too small for that :( but with Angular.js i am really getting better, and more productive, i will drop jquery whenever it is possible.

by the way i will try to create Angular Directive for JSPanel, i cant promise when, cause i am still learning, but you might not know, with Angular, you don't have to start from scratch, you will just create wrapper directive around JSPanel "though it is not the recommended way, because Jquery adds to much useless code" but a lot of people do it, and that is whet i will do hopefully...

there is no need to integrate with bootstrap javascript, JSPanel got it all, only css layout, like buttons, header, other tan that JSPanel is Perfect.

setting a blog is great, i love to read what you will write, you have great skills and spirit and me and others will learn a lot. good luck on that.

on a side note, how did you create the demo page, how do you integrate it with GitHub? i use ASP.NET, and it takes time to do such a thing, and i am sure there are simpler ways.

all the best matey :)

Flyer53 commented 10 years ago

Had to make a little update to 1.6.1 for a small bug in option.toolbarHeader and updated option.show and option.controls.

I have yet to take a look into angular. So I don't know what you are talking about concerning the angular directive... I'll find out or you tell me when ready.

Well, and I started work on a branch that supports bootstrap themes by default. Can't say when there is something to get out as beta... I'll try my best.

Which demo page do you mean? The very first one or the actual api page? Well, it doesn't matter. I wrote both line by line with my prefered IDE PHPStorm. I never worked with ASP.NET. When it comes to server side code it's PHP.

Have Fun ...

devmondo commented 10 years ago

thank you for update man,

regarding angular, i will try my best too, i am waiting for, Hint, Tooltip to come in, then i will start working on one.

regarding bootstrap, i am sure you will come up with great integration, German quality :)

regarding demo, what i meant, is how can i host my asp.net demo page on GitHub? or it does not matter because i have to host it on my server and just add link in GitHub ?

Flyer53 commented 10 years ago

Oh ... well I don't think GitHub hosts complete websites or pages. But I actually never thought about that. I added simply the link to http://jspanel.de

Regarding the tooltip I think it's best to simply integrate the pure css3 tooltip I found recently... with adjusted styling. For a simple tooltip that's more than enough I think. To accomodate more features the popup feature will be some more work. I still have to determine what I realyy want ...

devmondo commented 10 years ago

thank you for the tip on the hosting, now i get it.

regarding other features, do what you think is the best and you feel you like doing :)

Flyer53 commented 10 years ago

After some experiments I'm making good progress on the jsPanel for Bootstrap version/branch. I think I can publish a first beta within the next few days :)

devmondo commented 10 years ago

awesome, if any help needed, please tell me :)

Flyer53 commented 10 years ago

Wanna take a look ... a first preview of the bootstrap branch is online at:

http://jspanel.de/branch-bootstrap/api.html

Basically the header section is a bootstrap navbar, the content part is a bootstrap panel and the footer toolbar is a bootstrap navbar as well. option.theme is gone since the styling comes from the bootstrap.css. And I dropped option.toolbarHeader and the method .addToolbar(). Don't know yet whether an extra header toolbar really is necessary. Most of the other options work the same.

I wonder whether it's worth the label "Made in Germany" ;)

devmondo commented 10 years ago

i love it, i love it, i love it this is just wonderful man, thank you so much, if i may suggest some improvments -the http://jspanel.de/branch-bootstrap/api.html#option-toolbarFooter has problem with buttons placement, they are hidden. same goes for the animated panel here http://jspanel.de/branch-bootstrap/index.html -regarding buttons, it is really worth it to have the ability to add custom class to them, cause sometimes we want to use bootstrap "btn-sm" class -regarding header.toolbar, one of the things that made me go crazy is the ability to have those small buttons they made JSPanel different and more optional. -regarding the multiple themes demos, you could add a drop down button like in http://bootswatch.com/ to switch between themes. -regarding the demo page, could you also please add a sample HTML of what the Div that we will apply JSPanel too look like, currently there is only javascript code samples.

i cant believe you did all that that fast, really great and generous of you and it is most definitely in Deutschland gemacht :)

Flyer53 commented 10 years ago

:) Sure, feedback is always welcome.

I can't reproduce a problem with hidden buttons. Everything seems to be ok on my machine. Which buttons do you mean? Or could it be that you copy and paste the example code... than the class names are missing in the example code of the footer toolbar.
custom classes of buttons would only apply to the modal presets since the "normal" footer toolbar buttons are completely custom anyhow. I Think I'll get that done.
Yep! I'm working on a new header toolbar. The standard one just didn't go well with the bootstrap version... but it will come back
good idea on the multiple themes switching button.
Do you mean a complete sample HTML file? With header, body, scripts and all that stuff?

devmondo commented 10 years ago

thanks for reply,

-regarding HTML Code sample is like bootstrap, what is the basic HTML Code we need to initiate the Panel, something like this

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

-regarding footer buttons misplacement, it happens in Chrome, windows, i attached screenshot here http://www.fileswap.com/dl/lXJUPxhonk/

-regarding the buttons CSS Classes how can i for example add "btn-sm" class to this code

var mp_yesno = $( '#option-modal' ).jsPanel({
    title: 'Modal Yes or No',
    modal: 'modal-yesno',
    size:  { width: 300, height: 185 },
    toolbarFooter: [
        {
            buttontext: 'Yes',
            callback:   function(){ alert('You clicked the Yes button!') }
        },
        {
            buttontext: 'No',
            callback:   function(){ mp_yesno.close(); }
        }
    ]
});

Flyer53 commented 10 years ago

Ok I see it. So far I checked the bootstrap version only on Firefox since it is the first preview. I will do some more testing before I release the bootstrap version on GitHub. It will get its own repo.

Adding classnames for the buttons on the modal presets is in work and will go like this:

var mp_yesno = $( '#option-modal' ).jsPanel({
    title: 'Modal Yes or No',
    modal: 'modal-yesno',
    size:  { width: 300, height: 185 },
    toolbarFooter: [
        {
            buttontext: 'Yes',
            buttonclass: 'btn-xs',
            callback:   function(){ alert('You clicked the Yes button!') }
        },
        {
            buttontext: 'No',
            buttonclass: 'btn-xs',
            callback:   function(){ mp_yesno.close(); }
        }
    ]
});

If not set the buttonclass will default to "btn-sm"

devmondo commented 10 years ago

just perfect, the customization abilities in JSPanel is just mind blowing, nothing matches it FULL STOP, i am 100 % there will be thousands of users who will use it once it is known more.

Flyer53 commented 10 years ago

I wish you're wright :) ... we'll see...

Go to http://jspanel.de/branch-bootstrap/api.html#option-modal

buttonclass is there and should work

Didn't check the Chrome issue yet ....

Flyer53 commented 10 years ago

... the footer toolbar now works in Chrome as well and the div with the "Simple Text ..." floats left as I intended anyhow. Also in Firefox and IE. Buttons float right by default as in bootstrap css specified.

devmondo commented 10 years ago

just great, everything works fine now, thanks a lot man,

one more important thing with bootstrap is that if you follow their styling guide, we can support Right to left languages, like Arabic, which i suffer a lot from, but with this https://github.com/ratnic/bootstrap-rtl all issues solved beautifully by just including the file, you can add this as feature to JSPanel that it supports right to left.

Flyer53 commented 10 years ago

toolbarHeader is back in the bootstrap version. Go to:

http://jspanel.de/branch-bootstrap/api.html#option-toolbarHeader

scroll down to the toolbarFooter and there is an example with both header and footer toolbar

The rtl language thing will be considered... I'll take a look at it ...

As far as I tested the bootstrap version works quite well. Guess I can release it as jsPanel-bootstrap 1.0.0 pretty soon.

devmondo commented 10 years ago

this is so awesome, i am out of words, thank you very much.

please please consider the RTL integration.

Flyer53 commented 10 years ago

Your proposed style switcher on the demo api page for the bootstrap version is online :-)

http://jspanel.de/branch-bootstrap/api.html#

And thanks a lot for the comment on my blog. I didn't publish the link to it yet. Want to have some text on each page first...

devmondo commented 10 years ago

this is so cool, what can i say, looking at what JSPanel both Demo page and features compared to first release is so amazing, all the best man.

and you are welcome on your blog comment, this is the least i can do :)

Flyer53 commented 10 years ago

There was a little issue with the height of the content area of the bootstrap version when using toolbarHeader or/and toolbarFooter. I fixed that with an updated beta. Would you mind checking out the new beta a bit? I think it's pretty close to being ready for a release...

devmondo commented 10 years ago

i have checked in Chrome, firefox and IE and all is fine for both Footer and header Toolbar samples.

Flyer53 commented 10 years ago

Updated the bootstrap beta again. For option.position and option.size I removed limitations concerning the possible values. option.size now accepts any string that's ok for the css property. So you can use percentage values as well for example. The same applies to option.position UNLESS the jsPanel is appended to the body element.

And I replaced duplicate code with a few functions, so I saved about 100 lines of code.

devmondo commented 10 years ago

wowowha, this is great for responsive sites, thanks a lot man.

by the way i tested the demo site with this chrome neat extension https://chrome.google.com/webstore/detail/viewport-resizer/kapnjjcfcncngkadhpmijlkblpibdcgm which i am sure you will love it and use it daily, it allows you to resize the viewport and see your site on diffrent devices sites, and your site works perfectly :)

Flyer53 commented 10 years ago

Hey, thanks a lot for the tests and infos :)

By the way, yesterday I started to work on the popup feature and I'm getting along quite well. I let you know as soon as I have a first preview online...

devmondo commented 10 years ago

cant wait for that, all the best mate :)

Flyer53 commented 10 years ago

Just released the first version of jsPanel for bootstrap in its own repo...

Homepage is http://jspanel.de/bootstrap/ now

And the viewport-resizer tool is really nice :)

Flyer53 commented 10 years ago

Wanna take a look at the first popup beta... than go to

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

It's at the very top of the api page. I wonder what you say...

devmondo commented 10 years ago

this is wonderful, seriously, thank you very very much man.

it acts as a tooltip, right ?

some of my usual boring comments :) -when we hover over the popup it disappears, sometimes you want that but sometimes you don't, as you might want to click on something inside the pop, you had this partially with the popup top example and it is really cool, but it does not disappear when you hover out of it. in simple words, it would be really great if there is sticky, and semi sticky option. -the style of tooltip or pop up should be different from normal panel, to give some tooltip feeling. -if you resize the browser, you would see that the popups disappear under the browser window because the window is to small, qtip fixes this, but i dont know how :)

really great to see tooltip coming along, i am sure you will polish it to perfection and i cant wait for the hint panel too :)

any help i am ready.

Flyer53 commented 10 years ago

Not boring at all... keep on talking.

I agree on all points and I sure will keep on working to improve it. It was not meant to be more than a first step anyhow... Let's see where I can get this to....

In theorie there is everything possible from classical tooltp replacement to popups with whatever content you want. I think of a maximum of let's say 3 modes like classic tooltip replacement, simple popup without header or footer and the full version with all jsPanel features... So far Iget along with only one HTML template for the panel. Might need one or two more. Mmmmh...!? Don't want the code to become too complicated.

Flyer53 commented 10 years ago

Another thing. Would you mind moving this topic to the General Discussion page of my blog? If you register I would give you a userrole Author and you can publish/edit/delete your comments....

Flyer53 commented 10 years ago

There you go semisticky ...

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

:)

devmondo commented 10 years ago

this is great man, i love it, thank you very much :)

how can i register in your blog, i would love too

Flyer53 commented 10 years ago

Go to http://jspanel.de/blog/ and in the right column pretty close to the bottom you find a link called "register". When registered I can change your user role.

Flyer53 / jsPanel

bootstrap 3 integration #2