manifestwebdesign / angular-gridster Goto Github PK

When resizing the parent gridster containing the items, no call to resize() will be triggered since the only check is made on the window size:

angular.element(window).on('resize', function(){
    resize();
    scope.$apply();
});

Since dynamic layouts are very common, could you consider using something like jquery-resize to bind to the gridster instead?

I added angular-gridster to my bower.json file, and grunt serve picks up and inserts the .js file into the index.html just fine, but not the CSS.

How can you get the size and position in the event hooks? I have something like this at the moment:

$scope.gridsterConfig = {
    resize: {
        stop: function (event, ui, $element) {
            var position = ui.position,
                  size = ui.size;
        }
    }
};

But these values are incorrect because I would expect a value like 1, 2, 3 or any low number however I keep getting values like 439 and 1023 which are throwing my chart completely off wack.

Is there a different way or is this the official method?

First off, thanks for the great module. I've been toying around with it a lot at work and it is exactly what I need for the product we are building. One problem I'm running into is we are dynamically adding module content to a module editor page. This module content is what I want to be a gridster draggable/resizable item. I've toyed around how to add the content either via a directive, ng-include, or ui-view using ui router. In every case the gridster resizable container does not adjust to the height of the content. I'm wondering if I have to specify a sizeY property on the fly for every item or if there is a way to re-initialize the gridster resizable JS after adding the module. I'm assuming this has something to do with directive element size not being fully defined in the link function, as I have run into this problem many times in the past and not found a fix for it. An example of the code is below and I've attached a screenshot:

  <div class="wrapper row" gridster="gridsterOpts">
    <div ng-repeat="template in templates" gridster-item="template">
      <div ng-if=" template.name == 'share_photo' " ui-view="share_photo">
      </div>
      <div ng-if=" template.name == 'share_video' " ui-view="share_video">
      </div>
    </div>
  </div>

In the screenshot you can also see if I do not adjust the resizable container to contain the content after it is rendered to the page, the gridster item below it will push up through the content to the bottom of the resizable box. I tried making a directive with a $timeout to adjust the gridster-item height to the content height, but then the positioning of the gridster items below reference from the initial position and push up into the above content

I have to say, this is a fantastic project! I slaved over hacking together an angular version of gridster and had it working, but this is a much more susceptible solution. So, well done!

The bug itself is extremely minor, but it's noticable. On window resize, all the items will have their sizes recalculated. This can lead to items being inside or outside of the grid div.

Maybe add controller.updateHeight(); after calling redraw.

                    angular.element(window).on('resize', function(){
                        var width = $elem.width();
                        if (
                            width === prevWidth
                            || $elem.find('.gridster-item-moving').length > 0
                        ) {
                            return;
                        }
                        $elem.removeClass('gridster-loaded');
                        controller.redraw();
                        controller.updateHeight();
                        $elem.addClass('gridster-loaded');
                        scope.$apply();
                    });

Also, one thing I'd like to add when doing my migration from Gridster. Gridster's row/columns are 1-based, where you guys are 0-based. That was the only thing I found, that confused me at first.

Is it possible to create a draggable list that can drag widgets too the Gridster grid and interact with the gridster?

Right now I got it working to drag an item in the gridster, but I wonder if it's possible to also let my draggable interact with gridster like its already a 'widget' inside the grid.

I hope my question is clear and anyone can give me an answer :)

i have no idea if it's doable easily, as gridster itself is not responsive.
something like masonry (also angular-masonry) would be very good

Hi, nice work.

I'm playing around this a bit and found a problem.

The steps to reproduce it:

1. Expand a widget with a full width.
2. Expand the widget to the left exceeding the border of the container.

it would be very good to add an option to fill the grid from right to left
i.e. position (0, 0) be the top-right point of grid

thanks for the great project

When you assign overflow auto to the widgets to contain their contents within the widget there is a problem when you also have resizable.
When your content actually fit is your widget no scroll-bars are show as you would expect. BUT, when you hover over the widget scroll-bars suddenly appear.

This is because the grabbing area's for the resizing extend beyond the borders of the widget and therefore trigger the overflow.

This should be easily fixable by pulling the grabbing area's within the actual gridster-item li element by changing their CSS.

Regards,

Reinier

It's nice to have as a landing page but is not ideal for documentation since it requires extra work to keep in sync. We've already confused one guy #45.

I propose we keep documentation only in the readme and add the demo via iframe to gh-pages.

whattayathink?

Hello,

is it possible to call methods of the gridster outside "GridsterCtrl" ? (from other service)
for example: i wanna to call these methods: toJSON, getColumns, ...

THX.

i want to add some elements like images, ... to grid items, so i need to set grid items manually in template, not to iterating trough $scope.something
using

<li gridster-item  row="0" col="0" size-x="2" size-y="1">
 <div> item specific code </div>
</li>

throws "TypeError: Cannot read property 'defaultSizeX' of null"
setting defaultSizeX config does not work

Setting draggable.enabled or resizable.enabled to false makes no effect.

You can see this bug in Live demo:
https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/main

If you go to the https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html and navigate to the dashboard, the items do not drag. If you go back to the main demo and click "enable dragging", and return to dashboard, they do.
Dragging works as expected on the dashboard if you go straight to the dashboard. ie. following https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/dashboard

Is there a way to drag items across multiple gridster?
I would like to create something like the Win8 start screen - which also has multiple containers and dragging between containers is possible there.

Hi there,

Is it possible to restrict dragging, unless specific class is clicked/dragged?
I see there is

draggable: {
           enabled: true, // whether dragging items is supported
           handle: '.my-class', // optional selector for resize handle
}

but that doesn't work for me. Also not sure if 'resize handle' is mistake, whether that should be 'drag handle'?

I've just spent some time debugging why my layouts didn't always render correctly when reloading my items from storage.

Having spent some time on it I've discovered it's import to ensure the items being rendered by ng-repeat are correctly sorted ie. row ASC, col ASC otherwise the internal calls to the functions like floatItemsUp etc…

Can I suggest adding a note in the README near the following line:
"Which expects a scope setup like the following:"

I hadn't picked up that the items had to be ordered correctly, and just assumed they had been for the neatness of the example.

After updating this morning to latest version, I had a version about 1-2 months old.

After grabbing this and putting into my existing application, I was not able to resize/drag the right most item to the last column. Previously, I was able to do this fine. This video shows after update and then on refresh previous to update.

http://www.screencast.com/t/cqJB5tAO

I tried debugging to determine the issue, putting a console.log in canItemOccupy it is returning false now instead of true before. Subtracting this column value allows it to works 'kinda'. I'm thinking a 0 index might got of replace with a 1 somewhere?

I tried to open it via Chrome, via Firefox, from local and from localhost, too but it doesn't work, I only get the blue background.

Update: It happened because of the bower_components/../ path.

I'm trying to add some more tests to cover the resizing and am stumped as to why this test is failing. Also see travis output.

For some reason, additional resize attempts simulated by jquery.simulate have no effect.

The gridster module itself has no effect on the problem as I reduced the test down to its simplest form, (ie. not including the module and doing a resize on a plain ol div) and the same thing happens.

See the jquery ui resizable tests for an idea of what I'm trying to do.

@danomatic can you take a peek at this before I pull the rest of my hair out?

Changing the row field on the demo doesn't always work.

if you set it to "1" the input immediately changes back to "0" and does not move.

some bower parsers like brunch needs this

see this

First off, love the widget. I've been fighting a angular directive of my own.

A demo page on gh-pages would be much appreciated to show a working demo.

When you have angular-animate (https://docs.angularjs.org/api/ngAnimate) in your project's angular.module included, removing widgets crashes and works in weird way.

Enhancement:
For example: You want rows to be 30px but want each box to have a minimum height of 60px.

PS: Very cool project!

Can you activate travis on this repo so we can add a build status to the readme? I'll work on writing more tests as time permits.

Hi,

You missed "this" before updateHeight() inside function "removeItem" on line 256 and therefore updateHeight does not work after you try to remove item.

Thanks for great project.

Hello,
In my project, i need to provide the ability to create an element withing gridster via drag-and-drop from outside the gridster area. It would be great to hear recomendations about whats a better way to do this. Currently i am using angular-dragdrop, but i have a weird feeling its not a best way
Thank you for your time

just a feature request that would be handy:

able to pass minRow / maxRow so the item is not able to be resized outside of those values. The jQuery UI resizable plugin already has this ability.

If I get some time within the next few weeks, I'll add this feature.

Getting the following error in the demo since #53

Error: cannot call methods on resizable prior to initialization; attempted to call method 'option'

Working on a fix.

I'm running into display issues when trying to use angular-gridster because enabling drag and drop causes jquery-ui to add position: relative to the styles of the grid items.

I've tried your example, and noticed this doesn't happen, and I've tried to make my app as similar to yours as I can, but it continues to add position relative to the items. I'm running the same versions of the dependencies as you are as far as I can tell, so I'm not really sure what I'm doing here that is causing this behavior to happen, when it doesn't happen to your example.

Any help or tips on what might be doing this?

I know it's specified in the Readme that this isn't supported, but I think it would be a good feature to have. I'll work on a pull request if I have the time.

if you have more then 1 gridster instances on page then you drag widgets in one gridster positions changing both. this can be reproduced in Live Demo https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html. take a look to Custom Items and Custom Items2.
if use angular.copy for creating second list this issue not reproduce. In my opinion its bug in directive. possible using isolated scope in gridsterItem directive can fix this.

The grid is out of the box really touch friendly, but:

• Touch scrolling down a page full of grid items it often catches a grid item and tries to move it.
• Interacting with elements inside the grid often moves or resizes the grid

I was thinking about long touch events to start move would resolve first and only listening for drag events on a specific element might fix the second but then there is the case of users wanting to be able to drag static items. Thoughts?

bower.json contains a dependency to jquery-ui, which in turn depends on jquery
they are not needed at all, right?

Hello,
first of all great project.

1- I have 2 types i items, widgets and icons, i would like for the icons to not be resizable.
Is there a way to do that?

2- I've tryed
''
resizable: {
enabled: true,
start: function(event,uiWidget,$element){
console.log(event);
console.log(uiWidget);
console.log($element);
}
}

to check if it an icon and avoid resizing it but the event does not get fired.

Best regards,
Eduardo Oliveira

I have a use-case that may prove useful to other angular-gridster users.

I have a chart-drawing directive which is nested inside a gridster directive and is dynamically drawn to fill the available size of the gridster item.

Currently, I do not have a very straightforward way to know (from the perspective of my directive's scope) when the gridster element has been assigned its width and height.
So I have a race condition where sometimes the chart is drawn correctly and sometimes it is drawn prior to gridster finishing its width-calc.

It would be useful for this case if the gridster-directive would broadcast a "gridster-loaded" event so that a user can have explicit knowledge that the width has been calculated.

scope.$broadcast('gridster-loaded');

could be added in the same timeout inside the directive's compile:post function which adds the gridster-loaded class.
compile post timeout gridster.js #L592-L595

Or it could be placed in the end of the redraw function in the controller

When using the ui.bootstrap modal I received an error "$digest already in progress". It seemed the $scope.$apply function was aggressively being called on resize? Wrapping everything in a $timeout with a 0 delay would allow angular to properly queue the $digest... (I am still a little iffy in my understanding of Angular's digest cycle).

Anyway this code has my application working as expected: (starting at line 536)

function resize() {
    $timeout(function () {
        var width = $elem.width();
        if (
            width === prevWidth
                || $elem.find('.gridster-item-moving').length > 0
            ) {
            return;
        }
        prevWidth = width;
        $elem.removeClass('gridster-loaded');
        controller.redraw();
        updateHeight();
        scope.$broadcast('gridster-resized', [width, $elem.height()]);
        $elem.addClass('gridster-loaded');
    }, 0, true);
    //scope.$apply();
}

When placing a debugger command in the callback functions of resizable it is never triggered.

This is odd because for draggeble it works fine.

I need this to instruct the data inside the widget to adjust to the new size.

Regards,
Reinier

How do you guys feel about changing the project namespace? I've read that the angular guys suggest 3rd party modules not use "angular" in the name.

Perhaps we could call it "mwd-gridster". That way we can prefix our events with mwd-gridster and keep things tidy. Obviously this will introduce some BC issues.

The height of the gridster container remains the same after the mobile break point. It seems that a check would need to be added at line 518 (gridster.js).

Do you have any guidance on how to loop through the grid and get the sizeX of every item?
-or-
Just a better way to update the height when "isMobile === true"

I was thinking about doing something like this (but as I am sure you know it will not work as it is written)

function updateHeight() {
    if(controller.isMobile) {
        var height = 0;
        for(var i = 0; i < controller.grid.length; i++ ){
            height = height + (controller.grid[i].sizeX * controller.rowHeight);
        }
        controller.$element.css('height', height + controller.margins[0] + 'px');
    } else {
        controller.$element.css('height', (controller.gridHeight * controller.rowHeight) + controller.margins[0] + 'px');
    }
}

I have a link in gridster-item, the ng-click event will fire after it stops dragging!

    <div gridster>
        <ul>
            <li gridster-item="item" ng-repeat="item in standardItems">
              <a href="" ng-click="click()" style="display: table; width: 100%;height: 100%;">click me</a>
            </li>
        </ul>
    </div>

We are loving your directive so far, had tried to build something ourselves but it was much more of a hack onto the jQuery library.

The big issue is all of our logic is build around column and row numbering starting at 1 cause thats the way regular gridster is. Is it possible to have an option to switch between 0 and 1 numbering? Would be a huge help for us

Will be keeping a close eye on the project for sure, great work!

gidster -> gridster !

When describing $scope.gridsterOpts, documentation mentions "resize: { enabled: true, ... }" but should say "resizable: { enabled: true, ...}".

The following question is from your website http://manifestwebdesign.github.io/angular-gridster/ ,not github.

In you example code,you wrote the 'enabled' in resize to achieve the unresizable effect .
I have tried it,but it doesn't work.
Then I read your source code,line 40 is the resizable.
I set the enabled to resizable,then it worked.
so should the 'enabled' property be in 'resizable' in your example code?

     resize: {
         enabled: true,//doesn't work
         start: function(event, uiWidget, $element) {}, // optional callback fired when resize is started,
         resize: function(event, uiWidget, $element) {}, // optional callback fired when item is resized,
         stop: function(event, uiWidget, $element) {} // optional callback fired when item is finished resizing
      }

But from github example code ,likes this

     resizable: {
         enabled: true,
         start: function(event, uiWidget, $element) {}, 
         resize: function(event, uiWidget, $element) {}, //doesn't work
         stop: function(event, uiWidget, $element) {} 
      }

This is right,but the callback function doesn't work.

so i wrote my code as:

resizable:{
   enabled:false
},
resize: {
   handles:'se',
   //enabled:false,//doesn't work
   start: function(e, ui, $element) {},
   resize: function(e, ui, $element) {},
   stop: function(e, ui, $element) {}
}

Am i right?

If you resort your grid items and 'save' the serialization to something they are not sorted correctly for rendering on the next init.

Example as it starts off:
[ { id: 1, col: 1, row: 0 }, { id: 2, col: 1, row: 1 } ]

then I resort it on the ui to be like:
[ { id:1, col: 1, row: 1 }, { id: 2, col: 1, row: 0 } ]

when it redraws , say a refresh, then it renders in the wrong order. I realize this is a specific requirement but if thats so you should atleast resort the list when they change like this I suppose.