thecodeholic / lobipanel Goto Github PK

View Code? Open in Web Editor NEW

168.0 22.0 75.0 1.08 MB

jQuery plugin for bootstrap panels. It extends panels with several common and useful functions.

License: MIT License

CSS 23.40% JavaScript 49.28% HTML 27.32%

lobipanel's Introduction

LobiPanel

jQuery plugin for bootstrap panels. It extends panels with several common and useful functions.

View Demo

Features

Sort, drag, expand, resize, minimize bootstrap panels
Specify url and load content in panel from this url
Change the name of the panel
Customize action icons and action tooltips
Works for nested panels
HTML5 localStorage support
- Save panel state: (pinned, unpinned, collapsed, fullscreen, minimized) and apply it on page load
- Save panel position among siblings and apply on next time

Installation and dependecies

LobiPanel is depended on jQuery, jQuery ui and bootstrap.

1. Include necessary css/js files

<!DOCTYPE html>
<html>
   <head>
        <!--Default installation-->
        <link rel="stylesheet" href="lib/jquery-ui.min.css"/>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css"/>

        <!--Installation using bower. Preferred!!! -->
        <!--<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>-->
        <!--<link rel="stylesheet" href="bower_components/jquery-ui/themes/ui-lightness/jquery-ui.min.css"/>-->
        <!--Run `bower install font-awesome` and uncomment this line to see font awesome examples-->
        <!--<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"/>-->

        <link rel="stylesheet" href="dist/css/lobipanel.min.css"/>
   </head>

    <body>
        ...
        <!--Default installation-->
        <script src="lib/jquery.1.11.min.js"></script>
        <script src="lib/jquery-ui.min.js"></script>
        <script src="lib/jquery.ui.touch-punch.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>

        <!--Installation using bower. Preferred!!! -->
        <!--<script src="bower_components/jquery/dist/jquery.min.js"></script>-->
        <!--<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>-->
        <!--<script src="bower_components/jquery-ui-touch-punch-improved/jquery.ui.touch-punch-improved.js"></script>-->
        <!--<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>-->

        <script src="dist/js/lobipanel.js"></script>

   </body>
</html>

2. Initialize plugin and use it

Stateful panels

In order stateful panels to works you need to:

Give stateful: true to panel options.
Give data-inner-id to lobipanel element and parent element to keep track of the child which contacts lobipanels as unique identifier

For documentation and examples visit the plugin's home page

lobipanel's People

Contributors

Stargazers

Watchers

Forkers

carabina pandahisham emaiqi yashilanka pkdevboxy srikanthj09 frankie-666 lionelmeroni mattellison hattoriheiji alqxyz derricksimpson alpar extremeyu resbootstrap shawnhuang2015 xixiang230 swapnil0545 deawx sionnaouattara daltarys xlongtang wahtherewahhere bv99 saddem019 sangkyunyoon ss34nirala34 leandro-m irfanquresh drjonnicholson michiweber hnlg1112 rebortboss davgit nixks kaizo emrekara37 oguzozgen isn-lab kazimolmez xiawjane slinjez leokofi chinhls unalsamet sanekt197 szymonmat bisbase wrestrtdr rdiere jones2130 marcosharbs ashishshukla16 machinacore bikramth19 chadgit rahulmeshram arboshiki voidmars oneandzeros escyld samehri

lobipanel's Issues

Lobi Panel Unpin

Does anyone else have a issue with lobipanel's unpin functionality.

When I unpin an object and then maximise the panel all the input fields become readonly.

I can still scroll the list elements but can not select anything in that list.

I have tried changing the position and z-index and that did not work.

Thanks

MYC

No method named "destroy"

Well, I'm using bootstrap4 in my application, but if I use lobipanel with bootstrap4 it gives a resizable error. And you know what it could be?

onMinimeze event problem

onMinimeze event don't triger when pinned.

Anyone knows a fix for the following issue? Unpin a form then move it up in your browser until the header is not visible anymore. You won't be able to pin the window or take control of the form anymore without refreshing the entire page.

Resize feature not working

It seems the resize feature is not working. Can you please confirm if this is working on your end?

Can not drag panel to the column which has no panel from begining.

Is this the specification of jquery-UI? Do I need to add a dummy (not visible) panel?

Cannot set position

$('.lobipanel').lobiPanel("setPosition", 400, 360);
I typed this script in Chrome Console, it is not working.
but $('.lobipanel').lobiPanel("getPosition"); it is OK

Unpinned lobipanel gives wrong height after resizing

I'm using it with the fullcalendar plugin in the panel. That works fine, but one of the problems the height setting of the calendar when the unpinned lobipanel is resized.
For the full screen option and the pinned smallsize it works fine when I implement the following events:
$('.panel').on('onFullScreen.lobiPanel onSmallSize.lobiPanel resizeStop.lobiPanel', function (ev, lobiPanel) {
var $body = lobiPanel.$el.find('.fc-left');
if ($body.html() != null) {
$('#calendar').fullCalendar('option', 'height', parent);
};

When the panel is unpinned and the user resizes it, the event resizeStop is fired, but than probably there is something wrong with the setting of the internal panel height. The calendar height is not adjusted. A check learns that the getHeight function always returns the same size (691,2 in the windows console), whatever size the panel really has.....

SuggetionCan we get this plugin onto a CDN somewhere?

Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method 'destroy'

I cannot activate this plugin - it only works on the first panel and stops.

This is the line that eventually triggers the error https://github.com/arboshiki/lobipanel/blob/master/js/lobipanel.js#L542

I have a very simple example here (see the console) http://s.codepen.io/thecristen/debug/pEZjLy

Is there onReload / beforeReload event?

I want to refresh panel content with my Ajax process without loadUrl option. Is there event that is triggered when reload button is clicked?

Don't remove DOM content on close event

It's possible to get the content before closing to load the same content after?

$('.panel-move').on('beforeClose.lobiPanel', function(ev, lobiPanel){ var instance = $('.panel-move').data('lobiPanel'); console.log(ev.preventDefault); console.log(ev.stopPropagation); console.log(instance); return; });

I'm trying to get the instance and prevent to remove the DOM content from page before close, but this doesn't work :(

Input get blocked when panel is maximize

First of all, thank you for sharing such a great plugins. Today I get some problem when using input form in panel. When panel is maximize, the inner input get blocked, so do input select. Anyone has resolve this problem? please help and thank you

Dragging an undocked panel when the page has a floating nav bar

We're looking at using lobipanel to create a user dashboard. Our site has a nav bar div containing the site menus that snaps to the top of the screen when scrolling down the page so its always visible.
When we unpin our test panels with the nav bar "in line" on the page it works fine but when the nav bar snaps to the top of the page as we scroll down and panels we unpin move down the page when dragged and dropped so that they are not always visible even when scrolling right to the bottom of the page.

We know it should work as the lobipanel has its own fixed nav bar at the top of the page. Do you have any pointers as to why this is happening so we can look at changing how we deploy our nav bar?

Maximized / Minimized / Save State

When you maximize the panel and then minimize from the state of pinned, the panel save the state as unpinned.
On the lobipanel.js line 583 toSmallSize : function change
me._updateUnpinnedState();
with
me._saveState('pinnned');

set panels order

How do i set/change the order of the panels (by js method), by invoking an action?
Is there an option/function to get the current order of the panels as displayed?

Thank you
Andreas

lobi-panel, basic-usage, not working

i want to remove reload,close,editTitle button from panel
but they still showing
struggling for one day,
what is wrong ?

//==============================================
$(document).ready(function(){ //
//==============================================
$('#lobi_panel_1').lobiPanel({
reload:false,
close:false,
editTitle:false
}); // return -> null
});

  <div class="panel-heading">
    <div class="panel-title">
        <h4>Panel title</h4>
    </div>
  </div>

  <div class="panel-body" id="panel_body_1">
        Panel content
   </div>

</div>     <!-- panel -->

Verify input title

How do I confirm that the title is not input blank before finishTitleEditing

thanks.

Can save position lobipanel ?

Want to save panel position when reload the page...

Fix funky characters in invalid search modal

z-index of pulldown menu in case of mobile

I found a small issue. I set z-index to ul.dropdown-menu. But, It does not appear in the front. Can I deal with CSS?

Angualar js Support

Hi,
I guess this is a place to place feature request. If so, could you please add a feature to use lobipanel with Angular 1.x?

Best,
Ramesh

Fullscren Input and select focus not working

https://i.hizliresim.com/pGg0Mr.jpg normal is ok
but fullscreen
https://i.hizliresim.com/NOqp8a.jpg

onMinimize.lobiPanel event is not triggered

The "onMinimize.lobiPanel" event is not triggered..

Bug with minimize function while unpined on IE11

Hi,

When I try to minimize two or more unpined panels on IE11, these are stacking on the bottom left corner.
Here is a screenshot:

It is working well on FF/Chrome. Do you think it is possible to fix it ?

Thanks for your work.

Event 'onClose.lobiPanel' is not triggered

Hello,

It seem that the 'onClose.lobiPanel' event is not triggered.

How to use stateful option

Hey,

This is a very good piece of work you guys have put it. This looks great. However I am struggling with one thing:

The documentation says, stateful expects a boolean value and a specified data-inner-id.

This confuses me, can you please show this as an example of how to use this in order to remember the states.

Also what is data-inner-id that is required while setting the value of stateful and why is it significant?

Thank you.

disable dropdown menu

Hello,

I have tried to include the panel plugin in my setup. my panels are custom css and the problem I am facing is that the panel-heading is not read correctly in width as a result the panel controls to be shown as a dropdown and not side by side.

Is there a way to disable to auto dropdown the icons?

Thanks

Just a little question

on LobiAdminRoutes, how to pass parameters?

i mean, /index.php#page1?param=value&param2=value2
or /index.php#page1/funcion/param1/param2

return 404.

Thanks

Saved state issue

Hi,

First of all, great plugin. Works like a charm and looks nice.

I have one problem which i cannot seem to get fixed. I use the bootstrap grid to split the screen in half and display an amount of panels in there, like so:

<div class="row">
    <div class="col-md-6 lobipanel-parent-sortable ui-sortable" data-lobipanel-child-inner-id="lobipanel-data-attributes-2 lobipanel-data-attributes-3 lobipanel-data-attributes-4 lobipanel-data-attributes-5 lobipanel-data-attributes-6 lobipanel-data-attributes-7">
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-3" data-index="NaN" style="display: block;"></div>
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-5" data-index="1" style="display: block;"></div>
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-2" data-index="NaN" style="display: block;"></div>
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-4" data-index="NaN" style="display: block;"></div>
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-6" data-index="5" style="display: block;"></div>
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-7" data-index="6" style="display: block;"></div>
    </div>
    <div class="col-md-6 lobipanel-parent-sortable ui-sortable" data-lobipanel-child-inner-id="lobipanel-data-attributes-8 lobipanel-data-attributes-9 lobipanel-data-attributes-10 lobipanel-data-attributes-11 lobipanel-data-attributes-12">
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-8" data-index="0" style="display: block;"></div>
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-9" data-index="1" style="display: block;"></div>
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-10" data-index="3" style="display: block;"></div>
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-11" data-index="NaN" style="display: block;"></div>
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-11" style="display: block;" data-index="5"></div>
        <div class="panel panel-default lobipanel lobipanel-sortable" data-inner-id="lobipanel-data-attributes-12" data-index="6" style="display: block;"></div>
    </div>
</div>

As you can see, i have a little NaN action going on. But this doesn't seem to affect anything.
My problem is that i cant seem to save the position of panels that are moved from the left to the right (or the other way around). It does save the top to bottom arrangement. If i look at the html using firebug i do see the id of the panel added to the child-inner-id element but after a refresh it just places it back in the col where it started in the first place.

Am i doing something wrong or is this some sort of bug?

Suggetion: Upload this plugin onto a CDN somewhere?

I tend to use CDN's during development a lot and this is the only plugin in my project that is not available through one. Any chance you'd be willing to push this to CDNJS or another reliable source?
Thank you.

Iframe inside lobipanel reloads each time panel gets maximized, minimized, unpinned

Hi,

i have an application that uses lobipanel to embed iframes. I have noticed that each time the lobipanel panels get maximized, minimized or unpinned (or other similar actions probably) the iframe gets reloaded and the contents get refreshed.

Is there any way to avoid such behavior? Meaning that iframe should not reload.

thanks!

Restore fullscreen mode doesn't change state in localstorage

When fullscreen mode, the state is saved, but when restore fullscreen mode the state in localstorage remain fullscreen.

Two state toolbutton icons and tooltips

Two state buttons (pin/unpin, minimize/restore, fullscreen/normalstate) should have alternate icons and tooltip. Users must see the state by the icon.

ex: By pressing minimize button the user see minimize tooltip and same icon as before minimizing.

Thx!

about dragged.lobiPanel

Thank you for your excellent plugin. Now, I'm testing it. One issue exists on my environment. My environment is same with "Multiple panels with drag & drop" example.
http://lobianijs.com/site/lobipanel#lobipanel-multiple
When I dragged panel, "dragged.lobiPanel" event do not occur. But, another panel events occur.
For example, when I dragged panelA from left side to right side, events of panelB and panelC occur.
Do I have a basic misunderstanding about "dragged.lobiPanel" event?
Best regards.

Use this in bootstrap 4 beta it is error

Hi Bro! i trying use this plus in with bootstrap 4 and it don't run. can u give me a guid?

Thank Pro

$j (...).lobiPanel is not a function

I'm having an issue regarding the tooltip function. I'm also using 2 jQueries available on my page.

Here is the error message throwing every time i click the tooltip:
$j (...).lobiPanel is not a function

Here is the arrangement of my sources:
link rel='stylesheet' href='css/jquery-ui.min.css'/>
link rel='stylesheet' href='css/bootstrap.min.css'/>
link rel='stylesheet' href='css/lobipanel.min.css'/>
script type='text/javascript' src='js/jquery.1.11.min.js'></script>
script type='text/javascript' src='js/jquery-ui.min.js'></script>
script type='text/javascript' src='js/bootstrap.min.js'></script>
script type='text/javascript'>
var $j = jQuery.noConflict(true);
/script>
script type='text/javascript' src='js/lobipanel.min.js'></script>

I don't know if there's a conflict between 2 jQueries or what. Thanks in advance for the help :)

Save position among siblings doesn't work

Feature, "Save panel position among siblings and apply on next time" doesn't work.
The positions of panels return default after reload de browser.

onMinimize event is not triggered!

Suggestion: Docking of unpinned panels

(posting here as requested by @arboshiki)

What an excellent plugin! This is great work, and very much appreciated.

There's a feature that I'd love to see: the ability to "dock" an unpinned panel to a given pre-set position of the viewport.

This could be exposed by having an option called "dock" and a method called "setDock", which could have the following values:

"top-left": places the panel up against the top-left corner of the viewport
"top": places the panel at the top of the viewport, horizontally centred
"top-full": places the panel at the top of the viewport, occupying full width
"top-right": places the panel against the top-right corner of the viewport
"right": places the panel at the right of the viewport, vertically centred
"right-full": places the panel at the right of the viewport, occupying full height
"bottom-right": places the panel against the bottom-right corner of the viewport
"bottom": places the panel at the bottom of the viewport, horizontally centred
"bottom-full": places the panel at the bottom of the viewport, occupying full width
"bottom-left": places the panel against the bottom-left corner of the viewport
"left": places the panel at the left of the viewport, vertically centred
"left-full": places the panel at the left of the viewport, occupying full height

There could also be some helpful additional docks, such as:

"dialog": places the dialog horizontally centred, with its top 1/3 from top of viewport

It might also be a good idea to have an option to enforce a dock setting (lockDock?), so that a panel could not be resized on whichever sides that are docked.

Cheers

Geoff.

Don`t save position after reload page.

I have issues with "Multiple panels with drag & drop", don`t save position after reload page.

Unable to drag panels to the left

This panel system is awesome and is going to solve a massive problem for me creating a user customisable dashboard. In testing I did get one issue. It's a bit of an edge case though, so not a killer problem.

Using the demo code, which has two columns of panels, I dragged all the panels to the right side, intending to reorder them by dragging them back to the left in the required order. With all the panels dragged to the right, you cannot drag a panel to the left. It always drops back in to its original position.

Events are not working

I copy all these
$('.lobipanel').on('init.lobiPanel', function(ev, lobiPanel){ window.console.log("init event called"); });
$('.lobipanel').on('beforeUnpin.lobiPanel', function(ev, lobiPanel){ window.console.log("Before unpin", lobiPanel); });
$('.lobipanel').on('onSmallSize.lobiPanel', function(ev, lobiPanel){ window.console.log("On small size", ev, lobiPanel); });
$('.lobipanel').on('loaded.lobiPanel', function(ev, lobiPanel, result, status, xhr){ window.console.log("Loaded", ev, lobiPanel, result, status, xhr); });

but i don't see anything console logs

sort panels problem

in your examples, when you sort all panels to the left, you cant put back a panel to the right side.

bower installation

Hi,
When I install using "bower install lobipanel" it installs v0.3.1. Can you check why that happens?
I had to explicitly install using "bower install https://github.com/arboshiki/lobipanel.git#v0.7" . This is not really a issue but wanted to mention it.

For state unpinned save also position and width and height

Panel positions after sorting

Hi!

It's a really cool feature with being able to sort the panel by dragging. However, is there a functionality to get the positions of the panels after dragging?

Cheers,
Andrius

thecodeholic / lobipanel Goto Github PK

lobipanel's Introduction

LobiPanel

Features

Installation and dependecies

1. Include necessary css/js files

2. Initialize plugin and use it

Stateful panels

For documentation and examples visit the plugin's home page

lobipanel's People

Contributors

Stargazers

Watchers

Forkers

lobipanel's Issues

Recommend Projects

Recommend Topics

Recommend Org