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

jsPanel 3.0.0 Beta #55

Closed Flyer53 closed 8 years ago

Flyer53 commented 8 years ago

jsPanel 3.0.0 is now in beta status. So I won't make any more changes to the API. To each item on the API pages I added a short info concerning migration from 2.x to 3.0.0. To anyone who bothers to take a look ... I really would appreciate some feedback. jsPanel 3 Beta also seems to work fine with jQuery 3.0.0 Beta 1 http://beta.jspanel.de/

AviHafner commented 8 years ago

Hello Stefan Congratulations I'm waiting to try the innovations in the new version, I apologize for my late response. Stefan I have a few questions for you.

1) Is the JsPanel 3 version supports jQuery Version 3, Another great product that I use it is tablesorter,

Their Developers have stated in one of the versions of the product that is up to date and ready to work with jQuery version 3

2) How ready and stable is beta version, I can try it on a real project, In the case when all is Working , can I Move it to production environment

Thanks and good day yours Hafner Avi

Flyer53 commented 8 years ago

Hi Avi, thanks a lot ... and don't worry, everything's fine :)

Your questions: 1) My first tests with jQuery 3 work fine, but I have yet to test every single jsPanel feature together with jQuery 3. And since jQuery 3 itself just turned Beta I don't know whether there will be any changes to jQuery 3 affecting jsPanel. I have one project using tablesorter as well and I'll check that with jQuery 3 2) I think jsPanel 3 Beta is stable. At least I didn't have any problems in my tests and the few projects where I use it. I won't make changes anymore to the API. So changes that might come will not affect the current features. And I currently don't plan to add something new ... or is there something you would like to see in jsPanel?

I didn't have that much time lately to take care of jsPanel. But I intend to check out jsPanel 3 together with jQuery 3 next week ...

Hope I could give you some answers ..

My best regards, Stefan

Flyer53 commented 8 years ago

@AviHafner Hey Avi, just made a quick check in one of my projects using:

... looks :+1:

But realized that Boorstrap 3.x does not work with jQuery 3 Beta

AviHafner commented 8 years ago

Hey Stefan Unfortunately I did not implement the bootstrap in my projects, JQuery 3 - i Implement in my projects when it will not be a beta, I'll check and implement JsPanel 3 Next week .

Thank you and Good Day

vincentteyssier commented 8 years ago

Hey :) Just installed it and I would suggest that on your doc you make an explicit note on the main page about including the jspanel files to your html. I got confused by the jquery.jspanel-compiled.js :)

Everything works smoothly, tinyMCE does not have anymore focus issues.

I just have some css issues compared to v2.x. For ex on the content, options of a select are all displayed on the same line (this happens only in Firefox).

Also have problems with float properties in the footer, but have not yet checked what it comes from. I'll come back to you later.

In chrome I got a console error: "Unexpected token =" jquery.jspanel.js:1653. But I don't see it affecting anything yet, the jspanel works anyway.

You made a really great work on this :)

Flyer53 commented 8 years ago

Hi again :) Yes, you're correct, I have to make a note concerning the two js files. You should use jquery.jspanel-compiled.js because this is the one where ES6 features are compiled to ES5. I guess the Chrome error message will disappear then.

Your problems with float properties in the footer: As of jsPanel 3 he footer toolbar container (.jsPanel-ftr) uses css display: flex by default (I have to make a note on this in the docs as well). So there is no need for floats. And depending on your needs the items in the footer should then be flex items.

The problem with option selects is new to me and I can't say something useful about this at the moment....

Keep testing ;) and thanks for your feedback :+1:

vincentteyssier commented 8 years ago

Yes the chrome error disappear when I remove jquery.jspanel.js and attach only the compiled file.

Oh ok for the flex display. Just one thing doesn't sound very logical to me, why have you chosen flex-direction as row-reverse ? It would be logical that the flex-item get displayed in the order they have been coded.

Flyer53 commented 8 years ago

@thecenz1 Footer flex-direction: row-reverse Well, I simply want any footer toolbar items - which I think will be buttons in most cases - right aligned by default. But if that does not meet your needs you can easily override the css.

Flyer53 commented 8 years ago

Just updated the beta documentation a bit and added a few migration infos to the jsPanel Beta homepage http://beta.jspanel.de

Flyer53 commented 8 years ago

The Beta got a little update where I corrected a few minor issues with the CSS when using option.headerRemove http://beta.jspanel.de/api/

Flyer53 commented 8 years ago

Just uploaded jsPanel 3 Beta 1.2

Flyer53 commented 8 years ago

@gbaumgart http://beta.jspanel.de/downloads/jsPanel-3.0.0-Beta.zip

The bootstrap support is there. There's just no option.bootstrap anymore. It's implemented now within option.theme like:

$.jsPanel({
    theme: 'bootstrap-primary'
});

Should even work with Bootstrap 4, but since Bootstrap 4 itself is still an alpha version I wouldn't rely on that too much.

Flyer53 commented 8 years ago

Made a slight modification to the method .reposition(arg) If used without arg it defaults to the current value of option.position Take a look at http://beta.jspanel.de/api/#method/reposition Example 3 to see it in action.

Further I went over the API docs, corrected a few issues there and added the one or the other better example.

Download the modified Beta http://beta.jspanel.de/downloads/jsPanel-3.0.0-Beta.zip

vincentteyssier commented 8 years ago

Hey :) still testing and I have to admit the v3 works really great and looks really neat! Got a little issue with content. If I set a div with height 100%, and I set a footer, then when I inspect my content div, its height includes the footer. If I remember well it wasn't like that in v2.

EDIT: not a jspanel issue actually. content with 100% height is behaving as expected in a fresh project. Sorry for bothering :)

Flyer53 commented 8 years ago

@thecenz1 That's nice to hear ... thank you very much :)

I'm not sure wether I understand your content issue. I tried to reproduce this by taking an panel with footer toolbar, adding a div (with height set to 100%) to the content section. Works fine, no issue! So maybe that's not what you mean. Could you please explain this some more ... or post some sample code?

Flyer53 commented 8 years ago

@thecenz1 Tried something and I have an idea what you might mean. Could it be that your content section is something like the code example below?

<div class="jsPanel-content">
    <div style="height:100%">some content</div>
    <div style="position:absolute;bottom:0;widht:100%;height40px;">your footer</div>
</div>

If so, the behaviour you described is fully normal because the footer div is taken out of the normal flow of elements due to the positioning. And then the first div extends fully down to the bottom.

In this case you could set ccs height for the first div like:

<div style="height:calc(100% - 40px);">some content</div>
Flyer53 commented 8 years ago

@thecenz1 May I first suggest that you rewrite this function. You don't need to repeat _popup_document = popupdocument + all the time:

function build_jsPanel_document_body() {
    var popup_document ="<div style='height:100%; width:100%;'>"+ 
    "<div class='new_document_td_models_list'>"+
        "<div id='dl-menu' class='dl-menuwrapper'>"+
            "<button class='dl-trigger'>Utiliser un modèle</button>"+
            "<img class='new_document_image' src='./img/clickhere.png' alt='Sélectionnez un modèle' height='35px'>"+
        "</div>"+
    "</div>"+
    "<table id='new_document_nav_container'>"+
        "<tr id='new_document_text_body' class='new_document_div' valign='middle'>"+ // document text
            "<td id='document_text_td' valign='middle'><form id='new_document_form' method='post'><textarea id='new_document_body'></textarea></form></td>"+
        "</tr>"+
    "</table>"+
"</div>";
    return popup_document;
}

Then a few questions:

Would you mind moving this issue to email? info@jspanel.de This really doesn't seem to be a jsPanel issue.

vincentteyssier commented 8 years ago

Yeah you're right, I've coded a fresh panel example and I can't reproduce the issue. I have deleted my earlier messages so it doesn't fill the thread with not related issues. I'll figure out the issue, but thanks for your help

Flyer53 commented 8 years ago

@thecenz1 Don't worry ... welcome any time ... :)

Flyer53 commented 8 years ago

Just uploaded Beta 1.3 with a little change in option.contentAjax Inside the callback functions done(), fail(), always() and then() the this keyword now refers to the jsPanel and not to the content section as before. I made this change in order to have the value the this keyword refers to more consistent acrooss the whole project. Now it's the same for option.contentAjax and option.callback

http://beta.jspanel.de/downloads/jsPanel-3.0.0-Beta.zip

Flyer53 commented 8 years ago

Once again the Beta got an update:

http://beta.jspanel.de/ http://beta.jspanel.de/downloads/jsPanel-3.0.0-Beta.zip

Flyer53 commented 8 years ago

Two more small issues with tooltips solved

http://beta.jspanel.de/api/#option/paneltype http://beta.jspanel.de/downloads/jsPanel-3.0.0-Beta.zip

Flyer53 commented 8 years ago

New Added a simple way to add custom themes to jsPanel. Take a look at http://beta.jspanel.de/#customthemes Download latest Beta http://beta.jspanel.de/downloads/jsPanel-3.0.0-Beta.zip

vincentteyssier commented 8 years ago

Hey, I'd like to cascade the panels with offsetX & offsetY. Typically I would multiply a value, let's say 10, by the panels array length or the panel nr.... is there such option somewhere, didn't find it in the doc ?

Flyer53 commented 8 years ago

@thecenz1 Hi again, there is no specific option just for this. But you can easily achieve this with:

$.jsPanel({
  position: {
    my: 'left-top',
    at: 'left-top',
    modify: function(){
      var count = $('.jsPanel').length - 1;
      return {left: count * 30, top: count * 30};
    }
  }
});

or if you prefer to use offsetX and offsetY:

$.jsPanel({
  position: {
    my: 'left-top',
    at: 'left-top',
    offsetX: function() {
      var count = $('.jsPanel').length -1;
      return count * 30;
    },
    offsetY: function() {
      var count = $('.jsPanel').length -1;
      return count * 30;
    }
  }
});

These two example of course count all panels in the page. If you want to limit the count to certain panels I would add a specific class name to the panels you want to position like this.

Flyer53 commented 8 years ago

Request your opinion With the latest beta update I uploaded a few minutes ago I added a new feature for which I'd like to get some opinions: So far the only way to call a method of an individual panel was to call the method on a reference you safed when creating a panel like:

var mypanel = $.jsPanel();
mypanel.close();

But what if you don't have such a reference, for whatever reason? The latest beta extends the outer div element of each individual panel (not the element prototype) with the property jsPanel and this prop stores some of the panel methods. So you just need to identify the panel somehow and then call the method on the element like:

$.jsPanel({
    id: "mypanel-1"
});
document.getElementById("mypanel-1").jsPanel.close();
// or with jquery
$("#mypanel-1")[0].jsPanel.close();

For test purposes only the methods close, minimize, maximize, normalize and smallify can be called this way. I know, some people say it's not a good idea to extend a native element. But how likely is it that some day an HTMLElement will have a native property named jsPanel?

What do you think?

vincentteyssier commented 8 years ago

Hi, I think it's a good idea. I anyway always call my panels by their id, not by var reference. One example I find usefull is to store the instances in an array. For example the wysiwig editor tinyMCE, when you have multiple editor instances, can be called this way: tinymce.getEditor(x).method where x can be the editor id or the position in the editor array. This way the number of editors can be quickly reached tinymce.editors.length(), and treatments can be applied in sequences to all editors. I think it is a more convenient way than extending a native element, but that's only my opinion ;)

genachka commented 8 years ago

@Flyer53 Many jquery plugins I use do it that way and I would support this approach.

Flyer53 commented 8 years ago

@thecenz1 @genachka Thanks for the comments :) @thecenz1 It reads a bit like "Would be nice to have some built in tracking of active panels" ?

genachka commented 8 years ago

@Flyer53 Hmm "active panel" tracking would be useful for me. ;)

vincentteyssier commented 8 years ago

I would find it very useful :) and @genachka is right, I use also a lot of plugins in that way too

Flyer53 commented 8 years ago

@genachka @thecenz1 Ok folks! Copied. I'll put this on the TODO list. But I don't promise this to be in the first release of version 3. More probably in a 3.1.

Flyer53 commented 8 years ago

@genachka @thecenz1 Now folks take a look at http://beta.jspanel.de/api/#method/resize Scroll all the way down to see the news :) This works currently with all jsPanel methods.

vincentteyssier commented 8 years ago

Wonderful!! Thanks for the great job!

I was thinking about it this afternoon ;) I also have a suggestion of feature for you: the possibility to link panels between each other physically. Let me detail.... imagine you have 2 panels. The right edge of the first one is glued to the left edge of the second one. When you hover this glue line, the resize pointer displays. I you resize the first panel left (reducing its width), then it automatically resize the second panel . This glue effect would allow to make a multipanel dashboard where windows could be arranged but always using the same space.

Flyer53 commented 8 years ago

@thecenz1 That's a very interesting idea! I made a little research and found a jquery plugin that more or less does exactly what you propose. Just added an example that opens a jsPanel with 2 divs and a seperator inbetween that behaves as you described. Go to http://beta.jspanel.de/api/#option/contentAjax and scroll down to example 7. I think this is even better than having 2 jsPanels you have to "glue" together somehow. What do you think?

vincentteyssier commented 8 years ago

Yes that's quite cool, have to think about that^^ but imo gluing panels would allow more flexibility in combination, and for ex minimizing of only one part of the dashboard.... but that's already a great tool as it is right now! Congrats that you keep it open sourced, most of the people would have put it on code canyon^^

genachka commented 8 years ago

Nice!

On Thu, Mar 24, 2016 at 4:28 PM, Stefan Sträßer notifications@github.com wrote:

@genachka https://github.com/genachka @thecenz1 https://github.com/thecenz1 Now folks take a look at http://beta.jspanel.de/api/#method/resize Scroll all the way down to see the news :)

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/Flyer53/jsPanel/issues/55#issuecomment-201005475

Flyer53 commented 8 years ago

@thecenz1 @genachka Thanks :) ... Yep, it's open source .... and that's it! @thecenz1 Ok, I understand. Since you can nest jsPanels I'm asking myself whether this might be half the thing already. The code below opens an outer panel with 4 childpanels appended to the content section of the outer panel. The childpanel's draging is confined to the parent panel. You minimize the outer panel, the childpanels are sort of minimized as well. If I could add some code that makes selected panels responsive to changes in other panels ... that might do the trick???

var outer = $.jsPanel({
    headerTitle: "outer Panel",
    theme: "rebeccapurple filled",
    contentSize: {
        width: function(){return $(window).width()-40},
        height: function(){return $(window).height()-81}
    }
});

var w = outer.content.width()/2-10;
var h = outer.content.height()/2-51;
var commonconfig = {
    container: outer.content,
    contentSize: { width: w, height: h },
    draggable: {containment: "parent"}
};

var innerLT = $.jsPanel({
    headerTitle: "inner panel left-top",
    position: "left-top 5 5",
    content: "<p style='padding:10px'>Draging of inner panels is confined to content section of outer panel.</p>",
    config: commonconfig
});

var innerRT = $.jsPanel({
    headerTitle: "inner panel right-top",
    position: "right-top -5 5",
    config: commonconfig
});

var innerLB = $.jsPanel({
    headerTitle: "inner panel left-bottom",
    position: "left-bottom 5 -5",
    config: commonconfig
});

var innerRB = $.jsPanel({
    headerTitle: "inner panel right-bottom",
    position: "right-bottom -5 -5",
    config: commonconfig
});
Flyer53 commented 8 years ago

The next beta update is online. I reworked the events in jsPanel and now use jQuery.trigger() to do the custom events ... less code and easier to handle. A handler for a jsPanel event now looks like:

$(document).on("jspanelloaded", function (event, id) {
  // event is the event object
  // id is the id attribute value of the panel triggering the event
});
Flyer53 commented 8 years ago

The next beta update is available.

http://beta.jspanel.de/downloads/jsPanel-3.0.0-Beta.zip http://beta.jspanel.de/#windowjspanel

Flyer53 commented 8 years ago

@thecenz1 Just added an example to the api doc of option.resizable. Take a look at example 4. It combines 2 jsPanels ...

I think that already has quite a lot of your idea, and it's done with the current code base http://beta.jspanel.de/api/#option/resizable

Flyer53 commented 8 years ago

Next improvement: jsPanels that are appended to another jsPanel as childpanel will minimize to the lower left corner of the parent panel and not to the lower left corner of the viewport.

vincentteyssier commented 8 years ago

hey, easter weekend pushed me away from the internet ;) Yes it is exactly what I was meaning. Just the link doesn't look very neat.... probably cause of the box shadow. I would suggest that together with the example number you put a title to the example. For SEO purpose it would be great and people who are searching for something like that would find it more easily. Also if you want a good example of panels usage, you can have a look at hootsuite. They have a free trial. I like a lot their UI and its flexibility. It can be good inspiration for you :)

Flyer53 commented 8 years ago

@thecenz1 Quite normal ... I had some spare time ;) Your correct, it's the box shadow ... but for demo purposes ... Just added example 5 that's quite similar but wraps those two panels in a parent panel. Resize the parent panel and the two "childpanels" resize as well on mouseup to fill the complete content section of the parent panel: http://beta.jspanel.de/api/#option/resizable And thanks for the tip :)

Flyer53 commented 8 years ago

Beta update online http://beta.jspanel.de/downloads/jsPanel-3.0.0-Beta.zip

You might also take a look at the documentation about selected properties/methods of the global object jsPanel. For example it shows a simple example of how to use jsPanel.position() for other elements than a jsPanel and some methods dealing with color calculations that might be useful. For example calculating perceived brightness for a given color or lighten/darken a color, tranformations to other color formats ... http://beta.jspanel.de/#windowjspanel

Flyer53 commented 8 years ago

jsPanel 3 is now a release candidate

http://beta.jspanel.de/downloads/jsPanel-3.0.0-RC1.zip

I don't want to make any more changes until releasing a first version 3, just bugfixes if something comes up.

One thing I'm not sure about yet: Should I create a new repo for version 3 or should I just go on with the current jsPanel repo? What do you think?

Flyer53 commented 8 years ago

jsPanel version 3 is now in its own repo! https://github.com/Flyer53/jsPanel3