Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS selectors not working #19

Open
echo66 opened this issue Nov 12, 2015 · 1 comment
Open

CSS selectors not working #19

echo66 opened this issue Nov 12, 2015 · 1 comment

Comments

@echo66
Copy link

echo66 commented Nov 12, 2015

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
Copy link
Contributor

b-ma commented Nov 12, 2015

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 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants