parallax/ddt

DDT (Drag and Drop Tables) is a library that adds drag and drop reordering support to HTML tables.

ddt's Issues

Need to remove .idea from the repo....

Tbody styles aren't copied.

DDT.defineSelector creates a new style tag each time it is used

gulp-typescript-compiler isn't the best

We should look at replacing it. It seems to ignore a lot of errors that tsc reports, and can't generation '.d.ts' files which we will probably need to generate before rc.

Add sourcemaps

Document bindings

If rows are moved too fast, the other rows are sometimes not shuffled

Not possible to interact with elements inside of the table

Need the ability to remove event handlers

• The library
• The knockout binding

Need to document support for across browsers

• Chrome
• Safari
• Firefox
• Opera
• IE (lol)

If you swap a row and move it back before dropping, then a change will still be reported

Shadow tables receive the same borders as the initial table

Sometimes this is a bad thing, sometimes it isn't.

Sadly, there's not really a good way to detect if you need this besides making it an option.

Looks like we'll be releasing version 0.5 today. Guess semver isn't that great.

Scrolling is buggy....

Clarify Firefox support

Needs a boatload of optimization

Page should scroll when you dragging and you get to the end of the page.

Is not possible to limit to the vertical axis.

Should we support dragging rows between tables?

Right now you can only reorder rows within a table. What if we were able to support dragging between different tables.

Some concerns with this

• Different column sizes
• Different amounts of columns
• Styles

I'd say that we shouldn't hold back on releasing version 1 for this idea. It's just something to think about for the future.

I'll just leave this here so we can judge support for this feature.

What licensing do we want for this?

Be able to pass options through to the ddt.init helper.

Drag and drop is activated on right click

Seriously slow with large structures

Weird stuff happens when table rows are different heights

When table rows are different heights, there are issues with the calculation we use (that we stole from jQuery) to decide if we should swap rows.

If we fix this, then we'll be one step closer to fixing #37 too.

Separate DDT into separate modules

DDT has lots of distinct parts that could probably be separated and then dependency injected.

The following identifiers can be moved into their own module

• DDTPoint, DDTAxis
• DDTCSS
• DDTElement, DDTPositionableElement, DDTRow, DDTShadowRow, DDTTable, DDTShadowTable, DDTBounds
• DragAndDropTable, DragAndDropTableOptions
• toNumber (Util module?)

The current setbacks for this is that as we are using RequireJS as our TypeScript module output, there doesn't seem to be a nice way to concat all our modules into one module in one file. (We only want to export one module). If we don't concat, we run into issues were the user has to define paths for every internal module which isn't nice at all.

ACE editor seems to have gotten around this issue somehow but I'm not sure how.

Include knockout, angular, and jquery plugins

• Knockout
• jQuery
• Angular

Need to be able to pass flags to the table from knockout binding.

Some weird stuff going on with the value reports.

Headers are still reported as values with the reorder event.

Touch support?

UMD instead of AMD?

Issues with this is TypeScript doesn't technically support UMD. We'd have to write/find a tool to convert from AMD/commonjs to UMD.

Include angular binding

We have jQuery and knockout bindings. We should also include an angular binding.

DDTPoint minus and add affect both axis

DDTPoint has this really weird thing that by default arithmetic affects both axis - this is almost never what you want.

We should add a syntax that looks more like this

var point = new DDTPoint(5, 10);
var newPoint = point.add(DDTPoint.X, 5);

newPoint.x
// 10

newPoint.y
// 10

Add build instructions to README

New event syntax

Currently we listen to events like this

table.emitter.on('ddt.order', function(order) {
    // order
});

This is the syntax that I think would work better

table.on('reorder', function(order) {
    // order
});

This would mean that DragAndDropTable would have to inherit from eventEmitter (which is fine, TypeScript should take care of that for us). We'd also have to drop the 'ddt.' prefix from our events, and rename the following events.

 - ddt.order => reorder

Investigate nested tables?

When borders exist on the table body, row shadows are created at the wrong size.

Not possible to bound movement to table.

Shadow rows can appear behind other elements.

Need to be able to handle events when using the knockout binding

Automated Testing

We really need to add automated testing to this library before we can release the RC.

The issue we have is a lot of the code in this library can't be easily unit tested, as it is heavy UI code. There are a few classes that can be easily unit tested, which are the following

• DDTPoint
• DDTCSS

Parts of the following classes can easily be united tested, whereas others cannot

• DDTElement
  • getNode
  • offsetTop
  • show
  • hide
  • calculateBounds (Maybe?)
  • getLeftPaddingAndBorder
  • getParentWithSelector
  • getVerticalBorders

This leaves the following classes and methods that cannot be easily unit tested and we will therefore have to find another way.

• DDTElement
  • swap
  • clone
  • getUniqueStyles
  • cloneStyles
  • cloneUniqueStyles
  • cloneAttributes
  • getInheritedBackgroundColor
• DDTPositionableElement
• DDTTable
• DDTShadowTable

The following classes do not need to be unit tested as they don't have any extra functionality (but can't be removed for various reasons)

• DDTRow
• DDTShadowRow

Possible to move table headers.

Right now it's possible to move table headers. This shouldn't be possible.

Need an event for reorder once we've let go.

When tables have borders, you can't drag to the bottom of the table.

Add IE support

We want to add IE support at some point.

This is what support we have for IE at the moment

IE 11 and IE 10

Seems to be mostly working. Some issues with table borders disappearing but we should be okay. This will be the easiest to fix.

IE 9

Completely broken. Probably due to errors with the DDTCSS class not being properly supported in older browsers (due to using some new APIs for dynamically inserting selectors not existing).

Version 0.3

This should be the first usable beta.

Images loose their source attributes.

When rows have no background, we should calculate the inherited background.

Weird stuff happens if you try to drag a row outside of the window really quickly.

Speed up by keeping an internal track of the value orders

Right now whenever you swap a row, the order array is recalculated (by selecting all rows and mapping over them).

This could become a bottleneck for large tables. We should look at keeping an internal array of the values and swapping the values when swapping rows.

Potential issues with this

• If new rows are added we need to observe that
• If rows are deleted, we need to observe that