CSS selectors not working

[echo66]

Greetings!

I'm trying to modify the style attributes using CSS when an item is selected. I have the following code:

function randomColor(alpha) {
    var R = ~~(Math.random() * 255);
    var G = ~~(Math.random() * 255);
    var B = ~~(Math.random() * 255);
    return 'rgba(' + [ R, G, B, alpha || 1 ] + ')';
}

var markersLayerHeight = 120;
var duration = 20;
var $timeline = document.querySelector('#track');
var screenWidth = $timeline.getBoundingClientRect().width;
var pixelsPerSecond = screenWidth / duration;
var timeline = new wavesUI.core.Timeline(pixelsPerSecond, screenWidth);
var track = timeline.createTrack($timeline, markersLayerHeight);
var timeContext = new wavesUI.core.LayerTimeContext(timeline.timeContext);

var markersLayer = new wavesUI.core.Layer('collection', [{ x: 2 }, { x: 4 }, { x: 7 }, { x: 8 }], {
    height: markersLayerHeight
});
markersLayer.setTimeContext(timeContext);
markersLayer.configureShape(wavesUI.shapes.Marker, {
    color: function() {
        return 'orange';
    }
});
markersLayer.setBehavior(new wavesUI.behaviors.MarkerBehavior());

timeline.addLayer(markersLayer, track);


var segmentsLayer = new wavesUI.core.Layer('collection', [{ x: 2, width: 1, color: randomColor(0.5)}, { x: 4, width: 1, color: randomColor(0.5)}], {
    height: markersLayerHeight
});
segmentsLayer.setTimeContext(timeContext);
segmentsLayer.setBehavior(new wavesUI.behaviors.SegmentBehavior());
segmentsLayer.configureShape(wavesUI.shapes.Segment, {
    x: function(d, v) {
        if (v !== undefined) { d.x = v; }
        return d.x;
    },
    width: function(d, v) {
        if (v !== undefined) { d.width = v; }
        return d.width;
    },
});

timeline.addLayer(segmentsLayer, track);

function edit() {
    timeline.state = new wavesUI.states.SimpleEditionState(timeline);
}

and the CSS selector:

.selected {
    opacity: 0.5;
}

When I select a certain item, the opacity remains the same one as the one specified in the WAVES UI classes (Layer and Shape subclasses). In order to make the selector work, I need to override the element's style in the following way:

.selected {
    opacity: 0.5 !important;
}

Is this what the devs intended to happen? Usually, including !important in CSS stylesheets is considered a bad practise...

[b-ma]

Hey @echo66 ,

You point a real problem here that we didn't manage to solve properly. I agree that the !important in css is considered as a bad practice and surely it is. But, if we don't want to have to set it this way, our only solution would be to stop styling through JavaScript (which imo is quite handy for most of the use cases) as marking a rule as !important is the only way to override a style created with javascript (because it is set in the DOM and then has the higher priority).

Maybe a more (intellectually) satisfying solution would be to listen to your selection with events, mark your datum as selected and:

1. override the shape in order to create an accessor for this selected attribute and use it in its update method.
2. define your opacity accessor this kind of way:

segmentsLayer.configureShape(wavesUI.shapes.Segment, {
   // ...
   opacity: (d) {
       return d.selected ? 0.5 : 1;
   }
});

But it leads to write more JavaScript code instead of 3 lines of css (with !important). So, if you reuse this kind of shape everywhere in a large application, it could be a proper solution but probably an overhead in a small one.

I'm sorry I don't have a cleaner answer to propose for that problem, every proposal / idea would be really welcome here !