Different image on cardback v1 #11
Conversation
- Code indentation - Camelcase for Javascript variables as per coding convention - Removed unnecessay boolean variable to check if same image should be used on both front & back - Accessing object attributes as per coding convention
There was a problem hiding this comment.
Looks good so far :) There are some parts that needs to be cleaned up and the animation needs some love before it can be merged in. Please have a look at the comments, and down hesitate to ask if you need any help with the implementations.
You also need to add the object to the language files, when making changes to semantics.json. This means adding any semantic fields that was added to semantic.json to all languages files in the language/ folder (i.e. nb.json, fr.json, etc.). It should be fairly obvious how to add this by studying the pattern for other translations and follow that style.
| self.truncateRetryButton(); | ||
| self.resizeOverflowingText(); | ||
| } | ||
| self.addTipToCard($c, turned ? 'front' : 'back'); |
There was a problem hiding this comment.
Please fix indentation here, use 2 spaces instead of tab.
| @@ -21,8 +21,8 @@ | |||
| "type": "list", | |||
| "widgets": [ | |||
| { | |||
| "name": "VerticalTabs", | |||
| "label": "Default" | |||
| "name": "VerticalTabs", | |||
| } | ||
| ] | ||
| } | ||
| { |
| self.turnCard($(this).parents('.h5p-dialogcards-cardwrap')); | ||
| }).appendTo($cardFooter); | ||
| //Create Turn button only if either answer or back image exists | ||
| if(card.answer != "" || card.backImage != undefined) |
There was a problem hiding this comment.
card is undefined for self.createCardFooter() in line L#315, which makes this crash
| @@ -490,9 +492,14 @@ H5P.Dialogcards = (function ($, Audio, JoubelUI) { | |||
| // Check if card has been turned before | |||
| var turned = $c.hasClass('h5p-dialogcards-turned'); | |||
|
|
|||
| //Show the front image only if a back image is not uploaded. | |||
| //P.S. Adding this snippet after changeText() caused image sizing problems | |||
| if (self.params.dialogs[$card.index()].backImage.length) { | |||
There was a problem hiding this comment.
If backImage is not defined we get a JS error here
There was a problem hiding this comment.
Also backImage is not an array, it is an object, so we should probably not check its length, I suppose checking that it is defined would suffice.
| */ | ||
| C.prototype.changeImage = function ($card, imgSrc) { | ||
| var $cardImage = $card.find('.h5p-dialogcards-image'); | ||
| if(imgSrc != undefined) |
There was a problem hiding this comment.
Please start curly brace on the same line as the if-statement
| * @param $card | ||
| * @param imgSrc | ||
| */ | ||
| C.prototype.changeImage = function ($card, imgSrc) { |
There was a problem hiding this comment.
Image is changed momentarily once we click the "turn" button, image should change when the card has transitioned halfway through.
| "description": "Optional image for the card. (The card may use just an image, just a text or both)" | ||
| }, | ||
| { | ||
| "name": "backImage", |
There was a problem hiding this comment.
backImage needs translations to all languages (you don't actually have to translate them, just make sure the languages structures are correct)
|
Including this would be nice :-) (I'm not capable right now regarding my h5p beginner skills) Also mentioned in forum: https://h5p.org/node/70099 |
No description provided.