data-show for inline elements

[arumtaunsaram]

data-show for inline elements

[soundstep]

What kind of special attributes? And what would they do?

There's a big chance that most of what you want to do will work on inline elements, unless it is a special functionality, such as the data-src on an img tag. Simple string replacement for example should just work.

Can you provide some examples?

[arumtaunsaram]

I'd like to use data-show attribute for img tags with a static src value. My problem is that the img tags I use is inline elements but when I set data-show attributes in HTML and true in JavaScript to the tags, they are turned to be block elements.

<!-- In a template -->
<img data-show="{{post.isFlamed}}" src="img/flamed.png">

So now I write code as below.
HTML:

<!-- In a template -->
<img style="display:{{post.styleFlamed}}" src="img/flamed.png">

JS:

template.scope.styleFlamed = 'inline'
// or
template.scope.styleFlamed = 'none'

It is good If I can eliminate css styles from JS codes in the purview of management of graphic designs.
So, I desire special attributes like data-show-inline or wish the template engine detect computed display style value when it makes templates and apply the value when it is shown.

[soundstep]

oh css inline, right.
Yes data-show and data-hide is using block and none.

However data-show if just a convenience. Check if this would solve your problem:

<img class="{{post.getIsFlamed()}}" src="img/flamed.png">

.styleFlamed {
    display: inline;
}
.styleNotFlamed {
    display: none;
}

scope.post.getIsFlamed = function() {
    return condition ? 'styleFlamed' : 'styleNotFlamed';
}

You can also send parameters to the getIsFlamed function, string or other variables from the scope.

[arumtaunsaram]

Thank you for your nice suggestion. I'll take this approach.

[soundstep]

Great!

[uiii]

There is a simple solution for that. Just remove the display: none instead of setting display: block. It can be done by using element.style.display = ''

[arumtaunsaram]

@uiii
Thank you for your kind recommendation. I will take it into consideration for future use.

[uiii]

@arumtaunsaram Just to be sure - my recomenadation is for the soma-template developer not for soma-template user.

[soundstep]

@uiii
I'll re-open that one and see what it involves.

[uiii]

There is just one thing to consider - what are data-show and data-hide attributes intended for. If they just set inline style display:none if particular condition occures, then my recommendation is the right one. But if data-show evaluated to true should show element otherwise should hide it despite of the styles set to the element in css stylesheet (data-hide analogicaly) then my solution does not satisfy it.

[soundstep]

If you write this:

<img data-show="false" />

Then yes it should be hidden.

[uiii]

So, when I write this

<style>
.hidden {
   display: none;
}
</style>

<img data-show="true" class="hidden" />

Will be img hidden or not?

EDIT: I vote for hidden.

[uiii]

I've created a pull request for this. #4

[soundstep]

That's the other way around. Inline styles take priority on classes, that's why it is kind of bad using them.
http://plnkr.co/edit/QS1pY2Kr8LiAJZRcJE7a?p=preview

[soundstep]

Pull request is merged. I close.
Thanks @uiii