Merge remote-tracking branch 'origin/master'

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.9.134](https://github.com/surveyjs/survey-library/compare/v1.9.133...v1.9.134) (2024-03-13)
+
 ## [1.9.133](https://github.com/surveyjs/survey-library/compare/v1.9.132...v1.9.133) (2024-03-06)
 
 ## [1.9.132](https://github.com/surveyjs/survey-library/compare/v1.9.131...v1.9.132) (2024-02-28)

package.json

@@ -96,7 +96,7 @@
     "prepare": "husky install",
     "test:postcss": "postcss build/survey-core/defaultV2.css --silent  -u postcss-calc -u autoprefixer -u postcss-fail-on-warn -o defaultV2.postcss.css && rimraf defaultV2.postcss.css"
   },
-  "version": "1.9.133",
+  "version": "1.9.134",
   "name": "survey-library",
   "private": true,
   "devDependencies": {

packages/survey-angular-ui/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.9.134](https://github.com/surveyjs/surveyjs/compare/v1.9.133...v1.9.134) (2024-03-13)
+
 ## [1.9.133](https://github.com/surveyjs/surveyjs/compare/v1.9.132...v1.9.133) (2024-03-06)
 
 ## [1.9.132](https://github.com/surveyjs/surveyjs/compare/v1.9.131...v1.9.132) (2024-02-28)

packages/survey-angular-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-angular-ui",
-  "version": "1.9.133",
+  "version": "1.9.134",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",

packages/survey-vue3-ui/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.9.134](https://github.com/surveyjs/survey-library/compare/v1.9.133...v1.9.134) (2024-03-13)
+
 ## [1.9.133](https://github.com/surveyjs/survey-library/compare/v1.9.132...v1.9.133) (2024-03-06)
 
 ## [1.9.132](https://github.com/surveyjs/survey-library/compare/v1.9.131...v1.9.132) (2024-02-28)

packages/survey-vue3-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-vue3-ui",
-  "version": "1.9.133",
+  "version": "1.9.134",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

src/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+	"rules": {
+		"no-restricted-properties": [
+			"error",
+			{
+				"object": "window",
+				"property": "document"
+			}
+		],
+		"no-restricted-globals": [
+			"error",
+			{
+				"name": "document",
+				"message": "Do not use document into survey-core. Use methods from DomDocumentHelper"
+			},
+			{
+				"name": "window",
+				"message": "Do not use window into survey-core. Use method from DomWindowHelper"
+			}
+		]
+	}
+}

src/dragdrop/choices.ts

@@ -3,6 +3,7 @@ import { ImageItemValue } from "../question_imagepicker";
 import { ItemValue } from "../itemvalue";
 import { QuestionSelectBase } from "../question_baseselect";
 import { DragDropCore } from "./core";
+import { DomDocumentHelper } from "../global_variables_utils";
 
 export class DragDropChoices extends DragDropCore<QuestionSelectBase> {
   private imagepickerControlsNode: HTMLElement;
@@ -19,7 +20,9 @@ export class DragDropChoices extends DragDropCore<QuestionSelectBase> {
     if (this.parentElement.getType() === "imagepicker") {
       return this.createImagePickerShortcut(this.draggedElement, text, draggedElementNode, event);
     }
-    const draggedElementShortcut: any = document.createElement("div");
+    const draggedElementShortcut: any = DomDocumentHelper.createElement("div");
+    if(!draggedElementShortcut) return;
+
     // draggedElementShortcut.innerText = text;
     draggedElementShortcut.style.cssText = ` 
           cursor: grabbing;
@@ -66,7 +69,9 @@ export class DragDropChoices extends DragDropCore<QuestionSelectBase> {
   }
 
   private createImagePickerShortcut(item: ImageItemValue, text: string, draggedElementNode: HTMLElement, event: PointerEvent) {
-    const draggedElementShortcut: any = document.createElement("div");
+    const draggedElementShortcut: any = DomDocumentHelper.createElement("div");
+    if(!draggedElementShortcut) return;
+
     draggedElementShortcut.style.cssText = ` 
       cursor: grabbing;
       position: absolute;

src/dragdrop/core.ts

@@ -4,6 +4,7 @@ import { IShortcutText, ISurvey, ISurveyElement } from "../base-interfaces";
 import { DragTypeOverMeEnum } from "../survey-element";
 import { IDragDropEngine } from "./engine";
 import { DragDropDOMAdapter, IDragDropDOMAdapter } from "./dom-adapter";
+import { DomDocumentHelper } from "../global_variables_utils";
 
 export abstract class DragDropCore<T> implements IDragDropEngine {
   private _isBottom: boolean = null;
@@ -44,10 +45,14 @@ export abstract class DragDropCore<T> implements IDragDropEngine {
   }
 
   public startDrag(event: PointerEvent, draggedElement: any, parentElement?: any, draggedElementNode?: HTMLElement, preventSaveTargetNode: boolean = false): void {
-    this.domAdapter.rootContainer = this.survey?.rootElement;
+    this.domAdapter.rootContainer = this.getRootElement(this.survey, this.creator);
     this.domAdapter.startDrag(event, draggedElement, parentElement, draggedElementNode, preventSaveTargetNode);
   }
 
+  private getRootElement(survey: SurveyModel, creator: any): HTMLElement {
+    return creator ? creator.rootElement : survey.rootElement;
+  }
+
   public dragInit(event: PointerEvent, draggedElement: any, parentElement?: any, draggedElementNode?: HTMLElement): void {
     this.draggedElement = draggedElement;
     this.parentElement = parentElement;
@@ -78,9 +83,11 @@ export abstract class DragDropCore<T> implements IDragDropEngine {
     draggedElementNode?: HTMLElement,
     event?: PointerEvent
   ): HTMLElement {
-    const draggedElementShortcut = document.createElement("div");
-    draggedElementShortcut.innerText = text;
-    draggedElementShortcut.className = this.getDraggedElementClass();
+    const draggedElementShortcut = DomDocumentHelper.createElement("div");
+    if(!!draggedElementShortcut) {
+      draggedElementShortcut.innerText = text;
+      draggedElementShortcut.className = this.getDraggedElementClass();
+    }
     return draggedElementShortcut;
   }
 
@@ -116,7 +123,9 @@ export abstract class DragDropCore<T> implements IDragDropEngine {
     const displayProp = this.domAdapter.draggedElementShortcut.style.display;
     //this.domAdapter.draggedElementShortcut.hidden = true;
     this.domAdapter.draggedElementShortcut.style.display = "none";
-    let dragOverNode = <HTMLElement>document.elementFromPoint(clientX, clientY);
+
+    if(!DomDocumentHelper.isAvailable()) return null;
+    let dragOverNode = <HTMLElement>DomDocumentHelper.getDocument().elementFromPoint(clientX, clientY);
     // this.domAdapter.draggedElementShortcut.hidden = false;
     this.domAdapter.draggedElementShortcut.style.display = displayProp || "block";
 

src/dragdrop/dom-adapter.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-globals */
 import { findScrollableParent, isShadowDOM } from "../utils/utils";
 import { IsMobile, IsTouch } from "../utils/devices";
 import { settings, ISurveyEnvironment } from "../settings";

src/dragdrop/matrix-rows.ts

@@ -1,3 +1,4 @@
+import { DomDocumentHelper } from "../global_variables_utils";
 import { MatrixDropdownRowModelBase } from "../question_matrixdropdownbase";
 import { QuestionMatrixDynamicModel } from "../question_matrixdynamic";
 import { DragDropCore } from "./core";
@@ -9,16 +10,21 @@ export class DragDropMatrixRows extends DragDropCore<QuestionMatrixDynamicModel>
   protected restoreUserSelectValue: string;
 
   protected onStartDrag(): void {
-    this.restoreUserSelectValue = document.body.style.userSelect;
-    document.body.style.userSelect = "none";
+    const _body = DomDocumentHelper.getBody();
+    if(!!_body) {
+      this.restoreUserSelectValue = _body.style.userSelect;
+      _body.style.userSelect = "none";
+    }
   }
 
   protected createDraggedElementShortcut(
     text: string,
     draggedElementNode: HTMLElement,
     event: PointerEvent
   ): HTMLElement {
-    const draggedElementShortcut: any = document.createElement("div");
+    const draggedElementShortcut: any = DomDocumentHelper.createElement("div");
+    if(!draggedElementShortcut) return;
+
     // draggedElementShortcut.innerText = text;
     draggedElementShortcut.style.cssText = ` 
           cursor: grabbing;
@@ -173,7 +179,10 @@ export class DragDropMatrixRows extends DragDropCore<QuestionMatrixDynamicModel>
     this.parentElement.clearOnDrop();
     this.fromIndex = null;
     this.toIndex = null;
-    document.body.style.userSelect = this.restoreUserSelectValue || "initial";
+    const _body = DomDocumentHelper.getBody();
+    if(!!_body) {
+      _body.style.userSelect = this.restoreUserSelectValue || "initial";
+    }
     super.clear();
   }
 }

src/dragdrop/ranking-choices.ts

@@ -2,6 +2,7 @@ import { ItemValue } from "../itemvalue";
 import { DragDropChoices } from "./choices";
 import { CssClassBuilder } from "../utils/cssClassBuilder";
 import { IsMobile } from "../utils/devices";
+import { DomDocumentHelper } from "../global_variables_utils";
 export class DragDropRankingChoices extends DragDropChoices {
   protected get draggedElementType(): string {
     return "ranking-item";
@@ -12,7 +13,9 @@ export class DragDropRankingChoices extends DragDropChoices {
     draggedElementNode: HTMLElement,
     event: PointerEvent
   ): HTMLElement {
-    const draggedElementShortcut: any = document.createElement("div");
+    const draggedElementShortcut: any = DomDocumentHelper.createElement("div");
+    if(!draggedElementShortcut) return;
+
     draggedElementShortcut.className = this.shortcutClass + " sv-ranking-shortcut";
     draggedElementShortcut.style.cssText = ` 
           cursor: grabbing;

src/dropdownListModel.ts

@@ -1,5 +1,6 @@
 import { IAction } from "./actions/action";
 import { Base } from "./base";
+import { DomDocumentHelper } from "./global_variables_utils";
 import { ItemValue } from "./itemvalue";
 import { property } from "./jsonobject";
 import { ListModel } from "./list";
@@ -351,9 +352,7 @@ export class DropdownListModel extends Base {
   };
   constructor(protected question: Question, protected onSelectionChanged?: (item: IAction, ...params: any[]) => void) {
     super();
-    if ("undefined" !== typeof document) {
-      this.htmlCleanerElement = document.createElement("div");
-    }
+    this.htmlCleanerElement = DomDocumentHelper.createElement("div") as HTMLDivElement;
     question.onPropertyChanged.add(this.qustionPropertyChangedHandler);
     this.showInputFieldComponent = this.question.showInputFieldComponent;
 

src/element-helper.ts

@@ -1,9 +1,11 @@
+import { DomDocumentHelper } from "./global_variables_utils";
+
 export class ElementHelper {
   static focusElement(element: Element) {
     element && (<HTMLElement>element).focus();
   }
   static visibility(node: Element): boolean {
-    var style = window.getComputedStyle(node);
+    var style = DomDocumentHelper.getComputedStyle(node);
     if (style.display === "none" || style.visibility === "hidden") return false;
     return node.parentElement ? this.visibility(node.parentElement) : true;
   }

src/entries/chunks/model.ts

@@ -2,6 +2,8 @@
 // import "../../main.scss";
 //import "../../modern.scss";
 
+import { DomWindowHelper } from "../../global_variables_utils";
+
 export var Version: string;
 export var ReleaseDate: string;
 Version = `${process.env.VERSION}`;
@@ -57,8 +59,9 @@ function checkPrefix(prefix: string): boolean {
   if (index < 0) return true;
   const ds = prefix.substring(index + s.length).toLowerCase().split(",");
   if (!Array.isArray(ds) || ds.length === 0) return true;
-  if (typeof window !== "undefined" && !!window.location && !!window.location.hostname) {
-    const hn = window.location.hostname.toLowerCase();
+  const location = DomWindowHelper.getLocation();
+  if (!!location && !!location.hostname) {
+    const hn = location.hostname.toLowerCase();
     ds.push("localhost");
     for (let i = 0; i < ds.length; i++) {
       if (hn.indexOf(ds[i]) > -1) return true;

src/flowpanel.ts

@@ -3,6 +3,7 @@ import { IElement, IQuestion } from "./base-interfaces";
 import { PanelModel } from "./panel";
 import { LocalizableString } from "./localizablestring";
 import { Question } from "./question";
+import { DomWindowHelper } from "./global_variables_utils";
 
 /**
  * The flow panel object. It is a container with flow layout where you can mix questions with markdown text.
@@ -113,17 +114,14 @@ export class FlowPanelModel extends PanelModel {
     }
   }
   private insertTextAtCursor(text: string, prevName: string = null): boolean {
-    if (
-      !this.isDesignMode ||
-      typeof document === "undefined" ||
-      !window.getSelection
-    )
-      return false;
-    let sel = window.getSelection();
+    if (!this.isDesignMode || !DomWindowHelper.isAvailable()) return false;
+
+    let sel = DomWindowHelper.getSelection();
     if (sel.getRangeAt && sel.rangeCount) {
       let range = sel.getRangeAt(0);
       range.deleteContents();
-      range.insertNode(document.createTextNode(text));
+      const textElement = new Text(text);
+      range.insertNode(textElement);
       var self = <any>this;
       if (self.getContent) {
         var str = self.getContent(prevName);