Skip to content

Commit 037cebf

Browse files
monferamonfera
committed
lisp casing and factoring out class names - table
1 parent a89d01a commit 037cebf

File tree

2 files changed

+72
-47
lines changed

2 files changed

+72
-47
lines changed

‎src/traces/table/constants.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,30 @@ module.exports = {
2828
scrollbarCaptureWidth: 18,
2929
scrollbarOffset: 5,
3030
scrollbarHideDelay: 1000,
31-
scrollbarHideDuration: 1000
31+
scrollbarHideDuration: 1000,
32+
cn: {
33+
// general class names
34+
table: 'table',
35+
tableControlView: 'table-control-view',
36+
scrollBackground: 'scroll-background',
37+
yColumn: 'y-column',
38+
columnBlock: 'column-block',
39+
scrollAreaClip: 'scroll-area-clip',
40+
scrollAreaClipRect: 'scroll-area-clip-rect',
41+
columnBoundary: 'column-boundary',
42+
columnBoundaryClippath: 'column-boundary-clippath',
43+
columnBoundaryRect: 'column-boundary-rect',
44+
columnCells: 'column-cells',
45+
columnCell: 'column-cell',
46+
cellRect: 'cell-rect',
47+
cellText: 'cell-text',
48+
cellTextHolder: 'cell-text-holder',
49+
50+
// scroll related class names
51+
scrollbarKit: 'scrollbar-kit',
52+
scrollbar: 'scrollbar',
53+
scrollbarSlider: 'scrollbar-slider',
54+
scrollbarGlyph: 'scrollbar-glyph',
55+
scrollbarCaptureZone: 'scrollbar-capture-zone'
56+
}
3257
};

‎src/traces/table/plot.js‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ var Color = require('../../components/color');
2121

2222
module.exports = function plot(gd, wrappedTraceHolders) {
2323

24-
var table = gd._fullLayout._paper.selectAll('.table')
24+
var table = gd._fullLayout._paper.selectAll('.' + c.cn.table)
2525
.data(wrappedTraceHolders.map(function(wrappedTraceHolder) {
2626
var traceHolder = gup.unwrap(wrappedTraceHolder);
2727
var trace = traceHolder.trace;
@@ -32,7 +32,7 @@ module.exports = function plot(gd, wrappedTraceHolders) {
3232

3333
table.enter()
3434
.append('g')
35-
.classed('table', true)
35+
.classed(c.cn.table, true)
3636
.attr('overflow', 'visible')
3737
.style('box-sizing', 'content-box')
3838
.style('position', 'absolute')
@@ -48,12 +48,12 @@ module.exports = function plot(gd, wrappedTraceHolders) {
4848
return 'translate(' + d.translateX + ',' + d.translateY + ')';
4949
});
5050

51-
var tableControlView = table.selectAll('.tableControlView')
51+
var tableControlView = table.selectAll('.' + c.cn.tableControlView)
5252
.data(gup.repeat, gup.keyFun);
5353

5454
tableControlView.enter()
5555
.append('g')
56-
.classed('tableControlView', true)
56+
.classed(c.cn.tableControlView, true)
5757
.style('box-sizing', 'content-box')
5858
.on('mousemove', function(d) {tableControlView.filter(function(dd) {return d === dd;}).call(renderScrollbarKit, gd);})
5959
.on('mousewheel', function(d) {
@@ -71,12 +71,12 @@ module.exports = function plot(gd, wrappedTraceHolders) {
7171

7272
// scrollBackground merely ensures that mouse events are captured even on crazy fast scrollwheeling
7373
// otherwise rendering glitches may occur
74-
var scrollBackground = tableControlView.selectAll('.scrollBackground')
74+
var scrollBackground = tableControlView.selectAll('.' + c.cn.scrollBackground)
7575
.data(gup.repeat, gup.keyFun);
7676

7777
scrollBackground.enter()
7878
.append('rect')
79-
.classed('scrollBackground', true)
79+
.classed(c.cn.scrollBackground, true)
8080
.attr('fill', 'none');
8181

8282
scrollBackground
@@ -86,12 +86,12 @@ module.exports = function plot(gd, wrappedTraceHolders) {
8686
tableControlView
8787
.each(function(d) {Drawing.setClipUrl(d3.select(this), scrollAreaBottomClipKey(gd, d));});
8888

89-
var yColumn = tableControlView.selectAll('.yColumn')
89+
var yColumn = tableControlView.selectAll('.' + c.cn.yColumn)
9090
.data(function(vm) {return vm.columns;}, gup.keyFun);
9191

9292
yColumn.enter()
9393
.append('g')
94-
.classed('yColumn', true);
94+
.classed(c.cn.yColumn, true);
9595

9696
yColumn
9797
.attr('transform', function(d) {return 'translate(' + d.x + ' 0)';})
@@ -137,12 +137,12 @@ module.exports = function plot(gd, wrappedTraceHolders) {
137137

138138
yColumn.each(function(d) {Drawing.setClipUrl(d3.select(this), columnBoundaryClipKey(gd, d));});
139139

140-
var columnBlock = yColumn.selectAll('.columnBlock')
140+
var columnBlock = yColumn.selectAll('.' + c.cn.columnBlock)
141141
.data(splitData.splitToPanels, gup.keyFun);
142142

143143
columnBlock.enter()
144144
.append('g')
145-
.classed('columnBlock', true)
145+
.classed(c.cn.columnBlock, true)
146146
.attr('id', function(d) {return d.key;});
147147

148148
columnBlock
@@ -170,20 +170,20 @@ module.exports = function plot(gd, wrappedTraceHolders) {
170170
renderColumnCellTree(gd, tableControlView, headerColumnBlock, columnBlock);
171171
renderColumnCellTree(gd, tableControlView, cellsColumnBlock, columnBlock);
172172

173-
var scrollAreaClip = tableControlView.selectAll('.scrollAreaClip')
173+
var scrollAreaClip = tableControlView.selectAll('.' + c.cn.scrollAreaClip)
174174
.data(gup.repeat, gup.keyFun);
175175

176176
scrollAreaClip.enter()
177177
.append('clipPath')
178-
.classed('scrollAreaClip', true)
178+
.classed(c.cn.scrollAreaClip, true)
179179
.attr('id', function(d) {return scrollAreaBottomClipKey(gd, d);});
180180

181-
var scrollAreaClipRect = scrollAreaClip.selectAll('.scrollAreaClipRect')
181+
var scrollAreaClipRect = scrollAreaClip.selectAll('.' + c.cn.scrollAreaClipRect)
182182
.data(gup.repeat, gup.keyFun);
183183

184184
scrollAreaClipRect.enter()
185185
.append('rect')
186-
.classed('scrollAreaClipRect', true)
186+
.classed(c.cn.scrollAreaClipRect, true)
187187
.attr('x', -c.overdrag)
188188
.attr('y', -c.uplift)
189189
.attr('fill', 'none');
@@ -192,30 +192,30 @@ module.exports = function plot(gd, wrappedTraceHolders) {
192192
.attr('width', function(d) {return d.width + 2 * c.overdrag;})
193193
.attr('height', function(d) {return d.height + c.uplift;});
194194

195-
var columnBoundary = yColumn.selectAll('.columnBoundary')
195+
var columnBoundary = yColumn.selectAll('.' + c.cn.columnBoundary)
196196
.data(gup.repeat, gup.keyFun);
197197

198198
columnBoundary.enter()
199199
.append('g')
200-
.classed('columnBoundary', true);
200+
.classed(c.cn.columnBoundary, true);
201201

202-
var columnBoundaryClippath = yColumn.selectAll('.columnBoundaryClippath')
202+
var columnBoundaryClippath = yColumn.selectAll('.' + c.cn.columnBoundaryClippath)
203203
.data(gup.repeat, gup.keyFun);
204204

205205
// SVG spec doesn't mandate wrapping into a <defs> and doesn't seem to cause a speed difference
206206
columnBoundaryClippath.enter()
207207
.append('clipPath')
208-
.classed('columnBoundaryClippath', true);
208+
.classed(c.cn.columnBoundaryClippath, true);
209209

210210
columnBoundaryClippath
211211
.attr('id', function(d) {return columnBoundaryClipKey(gd, d);});
212212

213-
var columnBoundaryRect = columnBoundaryClippath.selectAll('.columnBoundaryRect')
213+
var columnBoundaryRect = columnBoundaryClippath.selectAll('.' + c.cn.columnBoundaryRect)
214214
.data(gup.repeat, gup.keyFun);
215215

216216
columnBoundaryRect.enter()
217217
.append('rect')
218-
.classed('columnBoundaryRect', true)
218+
.classed(c.cn.columnBoundaryRect, true)
219219
.attr('fill', 'none');
220220

221221
columnBoundaryRect
@@ -245,12 +245,12 @@ function renderScrollbarKit(tableControlView, gd, bypassVisibleBar) {
245245
return firstRowAnchor(blocks, blocks.length - 1) + rowsHeight(blocks[blocks.length - 1], Infinity);
246246
}
247247

248-
var scrollbarKit = tableControlView.selectAll('.scrollbarKit')
248+
var scrollbarKit = tableControlView.selectAll('.' + c.cn.scrollbarKit)
249249
.data(gup.repeat, gup.keyFun);
250250

251251
scrollbarKit.enter()
252252
.append('g')
253-
.classed('scrollbarKit', true)
253+
.classed(c.cn.scrollbarKit, true)
254254
.style('shape-rendering', 'geometricPrecision');
255255

256256
scrollbarKit
@@ -272,31 +272,31 @@ function renderScrollbarKit(tableControlView, gd, bypassVisibleBar) {
272272
return 'translate(' + xPosition + ' ' + headerHeight(d) + ')';
273273
});
274274

275-
var scrollbar = scrollbarKit.selectAll('.scrollbar')
275+
var scrollbar = scrollbarKit.selectAll('.' + c.cn.scrollbar)
276276
.data(gup.repeat, gup.keyFun);
277277

278278
scrollbar.enter()
279279
.append('g')
280-
.classed('scrollbar', true);
280+
.classed(c.cn.scrollbar, true);
281281

282-
var scrollbarSlider = scrollbar.selectAll('.scrollbarSlider')
282+
var scrollbarSlider = scrollbar.selectAll('.' + c.cn.scrollbarSlider)
283283
.data(gup.repeat, gup.keyFun);
284284

285285
scrollbarSlider.enter()
286286
.append('g')
287-
.classed('scrollbarSlider', true);
287+
.classed(c.cn.scrollbarSlider, true);
288288

289289
scrollbarSlider
290290
.attr('transform', function(d) {
291291
return 'translate(0 ' + d.scrollbarState.topY + ')';
292292
});
293293

294-
var scrollbarGlyph = scrollbarSlider.selectAll('.scrollbarGlyph')
294+
var scrollbarGlyph = scrollbarSlider.selectAll('.' + c.cn.scrollbarGlyph)
295295
.data(gup.repeat, gup.keyFun);
296296

297297
scrollbarGlyph.enter()
298298
.append('line')
299-
.classed('scrollbarGlyph', true)
299+
.classed(c.cn.scrollbarGlyph, true)
300300
.attr('stroke', 'black')
301301
.attr('stroke-width', c.scrollbarWidth)
302302
.attr('stroke-linecap', 'round')
@@ -318,12 +318,12 @@ function renderScrollbarKit(tableControlView, gd, bypassVisibleBar) {
318318
.transition().delay(c.scrollbarHideDelay).duration(c.scrollbarHideDuration)
319319
.attr('stroke-opacity', 0);
320320

321-
var scrollbarCaptureZone = scrollbar.selectAll('.scrollbarCaptureZone')
321+
var scrollbarCaptureZone = scrollbar.selectAll('.' + c.cn.scrollbarCaptureZone)
322322
.data(gup.repeat, gup.keyFun);
323323

324324
scrollbarCaptureZone.enter()
325325
.append('line')
326-
.classed('scrollbarCaptureZone', true)
326+
.classed(c.cn.scrollbarCaptureZone, true)
327327
.attr('stroke', 'white')
328328
.attr('stroke-opacity', 0.01) // some browser might get rid of a 0 opacity element
329329
.attr('stroke-width', c.scrollbarCaptureWidth)
@@ -385,12 +385,12 @@ function renderColumnCellTree(gd, tableControlView, columnBlock, allColumnBlock)
385385

386386
function renderColumnCells(columnBlock) {
387387

388-
var columnCells = columnBlock.selectAll('.columnCells')
388+
var columnCells = columnBlock.selectAll('.' + c.cn.columnCells)
389389
.data(gup.repeat, gup.keyFun);
390390

391391
columnCells.enter()
392392
.append('g')
393-
.classed('columnCells', true);
393+
.classed(c.cn.columnCells, true);
394394

395395
columnCells.exit()
396396
.remove();
@@ -400,12 +400,12 @@ function renderColumnCells(columnBlock) {
400400

401401
function renderColumnCell(columnCells) {
402402

403-
var columnCell = columnCells.selectAll('.columnCell')
403+
var columnCell = columnCells.selectAll('.' + c.cn.columnCell)
404404
.data(splitData.splitToCells, function(d) {return d.keyWithinBlock;});
405405

406406
columnCell.enter()
407407
.append('g')
408-
.classed('columnCell', true);
408+
.classed(c.cn.columnCell, true);
409409

410410
columnCell.exit()
411411
.remove();
@@ -415,24 +415,24 @@ function renderColumnCell(columnCells) {
415415

416416
function renderCellRect(columnCell) {
417417

418-
var cellRect = columnCell.selectAll('.cellRect')
418+
var cellRect = columnCell.selectAll('.' + c.cn.cellRect)
419419
.data(gup.repeat, function(d) {return d.keyWithinBlock;});
420420

421421
cellRect.enter()
422422
.append('rect')
423-
.classed('cellRect', true);
423+
.classed(c.cn.cellRect, true);
424424

425425
return cellRect;
426426
}
427427

428428
function renderCellText(cellTextHolder) {
429429

430-
var cellText = cellTextHolder.selectAll('.cellText')
430+
var cellText = cellTextHolder.selectAll('.' + c.cn.cellText)
431431
.data(gup.repeat, function(d) {return d.keyWithinBlock;});
432432

433433
cellText.enter()
434434
.append('text')
435-
.classed('cellText', true)
435+
.classed(c.cn.cellText, true)
436436
.style('cursor', function() {return 'auto';})
437437
.on('mousedown', function() {d3.event.stopPropagation();});
438438

@@ -441,12 +441,12 @@ function renderCellText(cellTextHolder) {
441441

442442
function renderCellTextHolder(columnCell) {
443443

444-
var cellTextHolder = columnCell.selectAll('.cellTextHolder')
444+
var cellTextHolder = columnCell.selectAll('.' + c.cn.cellTextHolder)
445445
.data(gup.repeat, function(d) {return d.keyWithinBlock;});
446446

447447
cellTextHolder.enter()
448448
.append('g')
449-
.classed('cellTextHolder', true)
449+
.classed(c.cn.cellTextHolder, true)
450450
.style('shape-rendering', 'geometricPrecision');
451451

452452
return cellTextHolder;
@@ -692,7 +692,7 @@ function makeDragRow(gd, allTableControlView, optionalMultiplier, optionalPositi
692692
var tableControlView = allTableControlView.filter(function(dd) {return d.key === dd.key;});
693693
var multiplier = optionalMultiplier || d.scrollbarState.dragMultiplier;
694694
d.scrollY = optionalPosition === void(0) ? d.scrollY + multiplier * d3.event.dy : optionalPosition;
695-
var cellsColumnBlock = tableControlView.selectAll('.yColumn').selectAll('.columnBlock').filter(cellsBlock);
695+
var cellsColumnBlock = tableControlView.selectAll('.' + c.cn.yColumn).selectAll('.' + c.cn.columnBlock).filter(cellsBlock);
696696
updateBlockYPosition(gd, cellsColumnBlock, tableControlView);
697697
};
698698
}
@@ -749,7 +749,7 @@ function wrapTextMaker(columnBlock, element, tableControlView) {
749749
cellTextHolder.selectAll('tspan.line').remove();
750750

751751
// resupply text, now wrapped
752-
populateCellText(cellTextHolder.select('.cellText'), tableControlView, columnBlock);
752+
populateCellText(cellTextHolder.select('.' + c.cn.cellText), tableControlView, columnBlock);
753753
d3.select(element.parentNode.parentNode).call(setCellHeightAndPositionY);
754754
};
755755
}
@@ -774,7 +774,7 @@ function updateYPositionMaker(columnBlock, element, tableControlView, gd, d) {
774774
l.rows[rowIndex].rowHeight = finalHeight;
775775

776776
columnBlock
777-
.selectAll('.columnCell')
777+
.selectAll('.' + c.cn.columnCell)
778778
.call(setCellHeightAndPositionY);
779779

780780
updateBlockYPosition(null, columnBlock.filter(cellsBlock), 0);
@@ -791,10 +791,10 @@ function updateYPositionMaker(columnBlock, element, tableControlView, gd, d) {
791791
var element = this;
792792
var columnCellElement = element.parentNode;
793793
var box = columnCellElement.getBoundingClientRect();
794-
var rectBox = d3.select(element.parentNode).select('.cellRect').node().getBoundingClientRect();
794+
var rectBox = d3.select(element.parentNode).select('.' + c.cn.cellRect).node().getBoundingClientRect();
795795
var currentTransform = element.transform.baseVal.consolidate();
796796
var yPosition = rectBox.top - box.top + (currentTransform ? currentTransform.matrix.f : c.cellPad);
797-
return 'translate(' + xPosition(d, d3.select(element.parentNode).select('.cellTextHolder').node().getBoundingClientRect().width) + ' ' + yPosition + ')';
797+
return 'translate(' + xPosition(d, d3.select(element.parentNode).select('.' + c.cn.cellTextHolder).node().getBoundingClientRect().width) + ' ' + yPosition + ')';
798798
});
799799

800800
d.settledY = true;
@@ -819,7 +819,7 @@ function setCellHeightAndPositionY(columnCell) {
819819
var yOffset = rowAnchor + headerHeight;
820820
return 'translate(0 ' + yOffset + ')';
821821
})
822-
.selectAll('.cellRect')
822+
.selectAll('.' + c.cn.cellRect)
823823
.attr('height', function(d) {return getRow(getBlock(d), d.key).rowHeight;});
824824
}
825825

0 commit comments

Comments
 (0)