Improve color legend class name to avoid css class conflict with common UI libraries
MODIFY
src/ui/colorLegendWidget.js
src/ui/colorLegendWidget.js
@@ -80,7 +80,7 @@ var colorLegendWidget = function (arg) {
* Clear the DOM container and create legends.
*/
this._draw = function () {
- d3.select(m_this.canvas()).selectAll('div.legends').remove();
+ d3.select(m_this.canvas()).selectAll('div.geojs-color-legends').remove();
if (!m_categories.length) {
d3.select(m_this.canvas()).style('display', 'none');
@@ -91,7 +91,7 @@ var colorLegendWidget = function (arg) {
var container = d3.select(m_this.canvas())
.append('div')
- .attr('class', 'legends');
+ .attr('class', 'geojs-color-legends');
var width = m_width;
var margin = 20;
@@ -99,11 +99,11 @@ var colorLegendWidget = function (arg) {
m_categories.forEach(function (category, index) {
var legendContainer = container
.append('div')
- .attr('class', 'legend');
+ .attr('class', 'geojs-color-legend');
legendContainer
.append('div')
- .attr('class', 'title')
+ .attr('class', 'geojs-title')
.text(category.name);
var legendSvg = legendContainer

MODIFY
src/ui/colorLegendWidget.styl
src/ui/colorLegendWidget.styl
&:hover
background-color rgba(255, 255, 255, 1)
- .legends
+ .geojs-color-legends
- .legend
+ .geojs-color-legend
margin-bottom 10px
- .title
+ .geojs-title
text-align center
svg.svg
white-space nowrap
z-index 100000
opacity 0
-

MODIFY
tests/cases/colorLegend.js
tests/cases/colorLegend.js
@@ -97,7 +97,7 @@ describe('color legend', function () {
});
it('Create basic color legend widget', function () {
- expect($(container).find('.legend').length).toBe(1);
+ expect($(container).find('.geojs-color-legend').length).toBe(1);
});
it('Create color legend widget without initial categories', function () {
@@ -106,7 +106,7 @@ describe('color legend', function () {
legendWidget = uiLayer.createWidget('colorLegend', {
categories: []
});
- expect($(container).find('.legend').length).toBe(0);
+ expect($(container).find('.geojs-color-legend').length).toBe(0);
});
it('Use unsupported scale', function () {
@@ -133,20 +133,20 @@ describe('color legend', function () {
it('set new categories', function () {
legendWidget.categories([allCategories[1], allCategories[2]]);
- expect($(container).find('.legend').length).toBe(2);
+ expect($(container).find('.geojs-color-legend').length).toBe(2);
expect(legendWidget.categories().length).toBe(2);
});
it('add remove categories', function () {
legendWidget.addCategories([allCategories[1], allCategories[2]]);
- expect($(container).find('.legend').length).toBe(3);
+ expect($(container).find('.geojs-color-legend').length).toBe(3);
legendWidget.removeCategories([allCategories[1], allCategories[2]]);
- expect($(container).find('.legend').length).toBe(1);
+ expect($(container).find('.geojs-color-legend').length).toBe(1);
});
it('test different kind of categories', function () {
legendWidget.categories(allCategories);
- var legends = $(container).find('.legend');
+ var legends = $(container).find('.geojs-color-legend');
expect(legends.length).toBe(allCategories.length);
expect($(legends[0]).find('svg>rect').length).toBe(4);
expect($(legends[0]).find('svg>rect:first').attr('fill')).toBe('red');
@@ -214,12 +214,12 @@ describe('color legend', function () {
container[0].dispatchEvent(CreateEvent('mouseleave'));
legendWidget.categories([allCategories[1], allCategories[6]]);
- var x = Math.floor($('.legends', container).offset().left) + 115,
- y = Math.floor($('.legends', container).offset().top) + 555;
+ var x = Math.floor($('.geojs-color-legends', container).offset().left) + 115,
+ y = Math.floor($('.geojs-color-legends', container).offset().top) + 555;
var mouseout = CreateEvent('mouseout');
var mousemove = CreateEvent('mousemove', {x: x, y: y});
- var legends = $(container).find('.legend');
+ var legends = $(container).find('.geojs-color-legend');
$(legends[0]).find('svg>rect')[0].dispatchEvent(mousemove);
$(legends[0]).find('svg>rect')[0].dispatchEvent(mouseout);
expect($(container).find('.color-legend-popup').text()).toBe('100 - 200');

Improve color legend class name to avoid css class conflict with common UI libraries