Created item actions frozen column on right side

[BenjaminNeilDavis]

Fixes #1267

• Creates new frozen actions column if enabled
• there will be two follow up pull requests
• one to solve this issue https://github.com/ExactTarget/fuelux/issues/1311 and one to integrate this with actions / frozen columns

ex:

list_actions:  {
                        width: 50,
                        items: [
                            {
                                name: 'edit',
                                html: function () {
                                    return '<div class="fuelux-icon fuelux-icon-pencil"></div> Edit'
                                }
                            },
                            {
                                name: 'copy',
                                html: function () {
                                    return '<div class="fuelux-icon fuelux-icon-copy"></div> Copy'
                                }
                            },
                            {
                                name: 'delete',
                                html: function () {
                                    return '<div class="fuelux-icon fuelux-icon-delete"></div> Delete'
                                },
                                clickAction: function(helpers, callback) {
                                    console.log('hey it worked');
                                    console.log(helpers);
                                    callback();
                                }
                            }
                        ]
                    },

[kevinparkerson]

Noticing the rows being off by about a pixel in Firefox, but not in Chrome. In IE 9 & 10, the rows don't have bottom borders present within the actions table. Going to be problematic getting this cross-browser, might need to add a small browser-sniffing utility function in the repeater-less.js file to add a class to target specific browsers. Attempt pure LESS first though

[kevinparkerson]

I think we should call this option list_actions to simplify (replacing the name throughout the control). Then, I'd suggest making this accept an object vs an array. The object would have an items attribute, which would be the array of action items :) The reason for the object is I think we need other attributes here, such as label and width. Since the actions column, while fixed, is essentially an additional column, we need a means to set it's column label and width just like we have via the columns settings.

[kevinparkerson]

We will essentially need to create an automatic additional column for actions if list_actions is set to an object. The reasoning for this is that if you have lots of content in the last column, it will be obscured by the actions column (try putting a paragraph of lorem ipsum for content in last column of the incoming data to see this currently). As such, the actions column needs to be an actual column on the repeater-list, with the fixed table positioned above it so that it does not scroll (similar to the floating columns on the left).

The settings for the additional column should be as follows:

{
    label: this.viewOptions.list_actions.label || '',
    property: '',
    sortable: false,
    width: (this.viewOptions.list_actions.width !== undefined) ? this.viewOptions.list_actions.width : {{defaultActionsWidth}}
}

This additional column should be added in renderThead. To prevent the differentColumns function from acknowledging this dynamically added column, add a line before line 470 in differentColumns that says var oldColsLength = (this.viewOptions.list_actions !== false) ? oldCols.length - 1 : oldCols.length;, then modify the conditional on line 473 to say if (!oldCols || (newCols.length !== oldColsLength)) {. Then, after line 610 where this.list_columns is set to columns, add the conditional if (this.viewOptions.list_actions !== false) { and within that add the above object to the end of this.list_columns. That should make the appropriate actions column so that the last column never goes beneath it. Because property is set to '' for the action column in the renderColumn function there is one other change needed before line 414: content = (content!==undefined) ? content : ''; This is to prevent unexpected results from adding content to a column, because for actions the property will not be found in the column definition and as such when it looks up the content for that particular item it will come back as undefined.

[kevinparkerson]

Note: I modified my suggestions for the dynamic column in renderThead after realizing a potential issue.

[cmcculloh-kr]

Needs:

• unit tests
• dev examples (in /index.html and markup/)
• documentation

[BenjaminNeilDavis]

@CormacMcCarthy That is correct working on all of that now thanks!

[kevinparkerson]

@BenjaminNeilDavis Code looks good, still seeing some stylistic issues in Firefox involving the action column rows not aligning with the rest of the row. Might need to change that specialBrowserClass function to return the string of classes b-{{browser}} v-{{browserVersion}}, that way you could add those to the repeater wrapper and target Firefox specifically if you need to via b-firefox

also noticing an issue in Chrome where the actions column has a left border that is appearing above the repeater-list-heading