Issue#13 update dialogcard js

[nexttee]

add a span wrapper around the output for the Turn button

[tajakobsen]

@nexttee Why do you want to add a <span> around the button text?

[nexttee]

@tajakobsen thanks for the response...
The Dialog Card displays a button on the bottom to Turn the card.
There is CSS that assigns an font awesome glyph using :before.
We want to keep the glyph but remove the text that says 'Turn'.

[tajakobsen]

Hi @nexttee. Unfortunately I can't merge in this solution. It's not hurting anything, but it's not generally useful either.

But thank you for being part of the community! I hope this doesn't discourage you from creating more pull requests.

[nexttee]

It's your product.
I'm only disappointed because I need to remove that text.
Do you have a solution that will work to hide the text but retain the symbol?
If you have time, please let me know.

[nexttee]

My current solution is to process a JQuery override for the button after the H5P data loads.
$('iframe.h5p-iframe.h5p-initialized').ready(launchChangeTurnLabel);

this sets a timeout function that checks for the existence of the Turn button
setTimeout(function () {
if ($('iframe.h5p-iframe.h5p-initialized').contents().find('.h5p-dialogcards-turn').size()) {

Do you think I can do better?

[tajakobsen]

Hi @nexttee .

This is a bit hacky, but it should work.

.h5p-dialogcards .h5p-joubelui-button.h5p-dialogcards-turn,
.h5p-dialogcards .h5p-joubelui-button.h5p-dialogcards-turn:hover {
  color: transparent;
  width: 42px;
}

.h5p-dialogcards .h5p-joubelui-button.h5p-dialogcards-turn:before {
  color: white;
}

I just hide the text by setting it transparent, and make the icon white again. And I force the width of the button.