Skip to content

Commit

Permalink
Work for #6779: fix after render function for imagepicker
Browse files Browse the repository at this point in the history
  • Loading branch information
dk981234 committed Aug 28, 2023
1 parent f007ac4 commit 9273fe7
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 2 deletions.
6 changes: 4 additions & 2 deletions src/question_imagepicker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -411,9 +411,11 @@ export class QuestionImagePickerModel extends QuestionCheckboxBase {
private reCalcGapBetweenItemsCallback: () => void;
public afterRender(el: HTMLElement): void {
super.afterRender(el);
if(el && el.querySelector(this.getObservedElementSelector())) {
const selector = this.getObservedElementSelector();
const observedElement = el && selector ? el.querySelector(selector): undefined;
if(!!observedElement) {
this.reCalcGapBetweenItemsCallback = () => {
this.gapBetweenItems = Math.ceil(Number.parseFloat(window.getComputedStyle(el.querySelector(this.getObservedElementSelector())).gap)) || 16;
this.gapBetweenItems = Math.ceil(Number.parseFloat(window.getComputedStyle(observedElement).gap)) || 16;
};
this.reCalcGapBetweenItemsCallback();
}
Expand Down
39 changes: 39 additions & 0 deletions tests/questionImagepicker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -339,4 +339,43 @@ QUnit.test("check contentNotLoaded and contentMode flags behavior", function(ass
assert.notOk(choice.contentNotLoaded);
question.contentMode = "video";
assert.ok(choice.contentNotLoaded);
});

QUnit.test("check reCalcGap", function(assert) {
const survey = new SurveyModel(
{
"elements": [
{
"type": "imagepicker",
"name": "question2",
"choices": [
{
"value": "lion",
"imageLink": "test"
},
],
}
]
}
);
const question = <QuestionImagePickerModel>survey.getAllQuestions()[0];
survey.css = defaultV2Css;
const container = document.createElement("div");
const itemsContainer = document.createElement("div");
itemsContainer.className = survey.css.imagepicker.root;
container.appendChild(itemsContainer);

assert.notOk(question["reCalcGapBetweenItemsCallback"]);
question.afterRender(container);
assert.ok(!!question["reCalcGapBetweenItemsCallback"]);

question["reCalcGapBetweenItemsCallback"] = undefined as any;
question.cssClasses.root = "";
question.afterRender(container);
assert.notOk(!!question["reCalcGapBetweenItemsCallback"]);

container.innerHTML = "";
survey.cssClasses.root = "some-class";
question.afterRender(container);
assert.notOk(!!question["reCalcGapBetweenItemsCallback"]);
});

0 comments on commit 9273fe7

Please sign in to comment.