search

uikit / uikit

A lightweight and modular front-end framework for developing fast and powerful web interfaces
http://getuikit.com
MIT License
18.28k stars 2.32k forks source link

[Feature Request] Update settings of a component #3872

Open TomS- opened 5 years ago

TomS- commented 5 years ago

I feel like this is an important one. For example with parallax you can use media: @m; however, it would be good if you could change the settings of any component responsively. For example, having draggable disabled on desktop but enabled on mobile. This currently isn't an option without knowing all the current settings of each slider.

UIkit.slider(elm).update({ draggable: false });

Would be good.

janschoenherr commented 5 years ago

Did you try?

elm.dataset.draggable = false;

TomS- commented 5 years ago

@janschoenherr I did

var slider= UIkit.slider(elm);

slider.draggable = false;

which works. I have yet to test it with things like center but I'll close this as soon as I've done enough testing.

TomS- commented 5 years ago

@janschoenherr I can confirm this method does not work. Using this for the Slider Parallax component to change the way the parallax behaviour is on mobile has no baring.

Trying both going through the component and through the dataset, but do not work.

janschoenherr commented 5 years ago

https://codepen.io/anon/pen/LoQGeb

I think it might depend on how you initialized the component. But the examples in the codepen should all work.

TomS- commented 5 years ago

@janschoenherr in this example: https://codepen.io/anon/pen/arqJaN it does not work - however, https://getuikit.com/docs/javascript#component-configuration I can see how the data approach should work. This is not always the case. Not every component prioritises data attributes.

This means currently the best way to do responsive components is a little more complex - https://codepen.io/anon/pen/zQRzvj

I actually don't mind this approach, but it might be a little confusing as defaults must be defined in javascript.

The main thing is - sometimes UIkit is mobile first an sometimes not. However, the main grid system is mobile first so writing the javascript in that way makes sense.

I wonder if there could be a utility written to help with that? Having more control over components responsively would be amazing. I know at the moment we sometimes have media: @m for example. But this will extend on that for those who want more granular control. For example parallax elements can tie with any CSS break points (for example making something smaller may need a weaker parallax effect to prevent overlap).

janschoenherr commented 5 years ago

I believe the prioritization to be the same for all components.

https://getuikit.com/docs/javascript#precedence

https://codepen.io/anon/pen/QRQaLm https://codepen.io/anon/pen/QRQOPa

I understand how having component options based on media queries could be useful. However I don't think we'll implement that anytime soon.

TomS- commented 5 years ago

@janschoenherr did you not check my examples? If above is true then there is a bug in uk-slider-parallax and likely uk-slideshow-parallax.

janschoenherr commented 5 years ago

My codepens are forks from your codepen: https://codepen.io/anon/pen/arqJaN

Sorry, they should work now. Forgot to hit 'save'

TomS- commented 5 years ago

@janschoenherr sorry, yes got it - https://codepen.io/anon/pen/zQRzvj is probably the best approach in that case. Should I leave this open?