From b25059b10d81a4606855dadfe1656dd5316231aa Mon Sep 17 00:00:00 2001 From: tsv2013 Date: Thu, 11 Jul 2024 15:04:02 +0300 Subject: [PATCH] Create standalone survey UI package (#8537) * Fixed jquery-ui bundle size * Added localization to test pages * Added example/test pages and functional/visual test scripts * Fixed example page * Get rid of unneeded build artifacts * Try to fix f- and vr- tests * Try to fix f- and vr- tests * Fixed lint * Fixed f-tests * Fixed ranking item template test * Fixed vr-tests --------- Co-authored-by: tsv2013 --- .../tsconfig.plugins.themes.typing.json | 17 - .../survey-jquery-ui/webpack.config.js | 5 - .../survey-jquery-ui/webpack.themes.config.js | 77 -- .../tsconfig.plugins.themes.typing.json | 17 - build-scripts/survey-ui/webpack.config.js | 5 - .../survey-ui/webpack.themes.config.js | 77 -- examples/jquery-ui/index.html | 6 +- examples/survey-ui/index.html | 23 + examples/survey-ui/index.js | 984 ++++++++++++++++++ examples_test/bootstrap/jquery-ui.html | 1 + examples_test/bootstrap/survey-ui.html | 20 + examples_test/customWidget/jquery-ui.html | 3 +- examples_test/customWidget/survey-ui.html | 61 ++ examples_test/default/jquery-ui.html | 3 +- examples_test/default/survey-ui.html | 21 + examples_test/defaultV2/jquery-ui.html | 3 +- examples_test/defaultV2/survey-ui.html | 19 + examples_test/modern/jquery-ui.html | 3 +- examples_test/modern/survey-ui.html | 19 + package.json | 11 +- src/entries/jquery-ui.ts | 28 +- src/entries/ui.ts | 12 +- testCafe/helper.js | 49 +- testCafe/survey/customCss.js | 4 + testCafe/survey/popup.js | 3 + .../tests/defaultV2/buttongroup.ts | 9 +- 26 files changed, 1230 insertions(+), 250 deletions(-) delete mode 100644 build-scripts/survey-jquery-ui/tsconfig.plugins.themes.typing.json delete mode 100644 build-scripts/survey-jquery-ui/webpack.themes.config.js delete mode 100644 build-scripts/survey-ui/tsconfig.plugins.themes.typing.json delete mode 100644 build-scripts/survey-ui/webpack.themes.config.js create mode 100644 examples/survey-ui/index.html create mode 100644 examples/survey-ui/index.js create mode 100644 examples_test/bootstrap/survey-ui.html create mode 100644 examples_test/customWidget/survey-ui.html create mode 100644 examples_test/default/survey-ui.html create mode 100644 examples_test/defaultV2/survey-ui.html create mode 100644 examples_test/modern/survey-ui.html diff --git a/build-scripts/survey-jquery-ui/tsconfig.plugins.themes.typing.json b/build-scripts/survey-jquery-ui/tsconfig.plugins.themes.typing.json deleted file mode 100644 index 02c6c25c28..0000000000 --- a/build-scripts/survey-jquery-ui/tsconfig.plugins.themes.typing.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "baseUrl": ".", - "paths": { - "survey-core": [ - "../../build/survey-core" - ] - }, - "declaration": true, - "emitDeclarationOnly": true, - "outDir": "../../build/survey-jquery-ui/themes/typings/" - }, - "include": [ - "../../src/themes/index.ts" - ] -} \ No newline at end of file diff --git a/build-scripts/survey-jquery-ui/webpack.config.js b/build-scripts/survey-jquery-ui/webpack.config.js index 4fafc7a437..16bb91cb79 100644 --- a/build-scripts/survey-jquery-ui/webpack.config.js +++ b/build-scripts/survey-jquery-ui/webpack.config.js @@ -7,11 +7,6 @@ var packageJson = require("./package.json"); var path = require("path"); const config = { - entry: { - survey: path.resolve(__dirname, "../../src/main.scss"), - modern: path.resolve(__dirname, "../../src/modern.scss"), - defaultV2: path.resolve(__dirname, "../../src/defaultV2-theme/defaultV2.scss") - }, resolve: { alias: { "react": "preact/compat", diff --git a/build-scripts/survey-jquery-ui/webpack.themes.config.js b/build-scripts/survey-jquery-ui/webpack.themes.config.js deleted file mode 100644 index ecd7caf8fd..0000000000 --- a/build-scripts/survey-jquery-ui/webpack.themes.config.js +++ /dev/null @@ -1,77 +0,0 @@ -"use strict"; - -const webpackCommonConfigCreator = require("../webpack.common"); -const { merge } = require("webpack-merge"); -var FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries"); -const DtsGeneratorPlugin = require("../webpack-dts-generator"); -var path = require("path"); - -const config = { - entry: { - "default-light": path.resolve(__dirname, "../../src/themes/default-light.ts"), - "default-dark": path.resolve(__dirname, "../../src/themes/default-dark.ts"), - "default-light-panelless": path.resolve(__dirname, "../../src/themes/default-light-panelless.ts"), - "default-dark-panelless": path.resolve(__dirname, "../../src/themes/default-dark-panelless.ts"), - "sharp-light": path.resolve(__dirname, "../../src/themes/sharp-light.ts"), - "sharp-dark": path.resolve(__dirname, "../../src/themes/sharp-dark.ts"), - "sharp-light-panelless": path.resolve(__dirname, "../../src/themes/sharp-light-panelless.ts"), - "sharp-dark-panelless": path.resolve(__dirname, "../../src/themes/sharp-dark-panelless.ts"), - "borderless-light": path.resolve(__dirname, "../../src/themes/borderless-light.ts"), - "borderless-dark": path.resolve(__dirname, "../../src/themes/borderless-dark.ts"), - "borderless-light-panelless.": path.resolve(__dirname, "../../src/themes/borderless-light-panelless.ts"), - "borderless-dark-panelless": path.resolve(__dirname, "../../src/themes/borderless-dark-panelless.ts"), - "flat-light": path.resolve(__dirname, "../../src/themes/flat-light.ts"), - "flat-dark": path.resolve(__dirname, "../../src/themes/flat-dark.ts"), - "flat-light-panelless": path.resolve(__dirname, "../../src/themes/flat-light-panelless.ts"), - "flat-dark-panelless": path.resolve(__dirname, "../../src/themes/flat-dark-panelless.ts"), - "plain-light": path.resolve(__dirname, "../../src/themes/plain-light.ts"), - "plain-dark": path.resolve(__dirname, "../../src/themes/plain-dark.ts"), - "plain-light-panelless": path.resolve(__dirname, "../../src/themes/plain-light-panelless.ts"), - "plain-dark-panelless": path.resolve(__dirname, "../../src/themes/plain-dark-panelless.ts"), - "doubleborder-light": path.resolve(__dirname, "../../src/themes/doubleborder-light.ts"), - "doubleborder-dark": path.resolve(__dirname, "../../src/themes/doubleborder-dark.ts"), - "doubleborder-light-panelles": path.resolve(__dirname, "../../src/themes/doubleborder-light-panelless.ts"), - "doubleborder-dark-panelless": path.resolve(__dirname, "../../src/themes/doubleborder-dark-panelless.ts"), - "layered-light": path.resolve(__dirname, "../../src/themes/layered-light.ts"), - "layered-dark": path.resolve(__dirname, "../../src/themes/layered-dark.ts"), - "layered-light-panelless": path.resolve(__dirname, "../../src/themes/layered-light-panelless.ts"), - "layered-dark-panelless": path.resolve(__dirname, "../../src/themes/layered-dark-panelless.ts"), - "solid-light": path.resolve(__dirname, "../../src/themes/solid-light.ts"), - "solid-dark": path.resolve(__dirname, "../../src/themes/solid-dark.ts"), - "solid-light-panelless": path.resolve(__dirname, "../../src/themes/solid-light-panelless.ts"), - "solid-dark-panelless": path.resolve(__dirname, "../../src/themes/solid-dark-panelless.ts"), - "three-dimensional-light": path.resolve(__dirname, "../../src/themes/threedimensional-light.ts"), - "three-dimensional-dark": path.resolve(__dirname, "../../src/themes/threedimensional-dark.ts"), - "three-dimensional-light-panelless": path.resolve(__dirname, "../../src/themes/threedimensional-light-panelless.ts"), - "three-dimensional-dark-panelless": path.resolve(__dirname, "../../src/themes/threedimensional-dark-panelless.ts"), - "contrast-light": path.resolve(__dirname, "../../src/themes/contrast-light.ts"), - "contrast-dark": path.resolve(__dirname, "../../src/themes/contrast-dark.ts"), - "contrast-light-panelless": path.resolve(__dirname, "../../src/themes/contrast-light-panelless.ts"), - "contrast-dark-panelless": path.resolve(__dirname, "../../src/themes/contrast-dark-panelless.ts"), - "index": path.resolve(__dirname, "../../src/themes/index.ts"), - }, - plugins: [new FixStyleOnlyEntriesPlugin()], - externals: { - "survey-core": { - root: "Survey", - commonjs2: "survey-core", - commonjs: "survey-core", - amd: "survey-core" - } - } -}; - -module.exports = function (options) { - options.platform = ""; - options.libraryName = "SurveyTheme"; - if (options.buildType !== "prod") { - config.plugins.push(new DtsGeneratorPlugin({ - tsConfigPath: "./build-scripts/survey-jquery-ui/tsconfig.plugins.themes.typing.json", - filePath: "build/survey-jquery-ui/themes/index.d.ts", - moduleName: "survey-jquery-ui/themes", - importName: "index" - })); - } - - return merge(webpackCommonConfigCreator(options, { "name": "survey-themes" }, "survey.themes", "survey-jquery-ui/themes"), config); -}; diff --git a/build-scripts/survey-ui/tsconfig.plugins.themes.typing.json b/build-scripts/survey-ui/tsconfig.plugins.themes.typing.json deleted file mode 100644 index 60ea9eb327..0000000000 --- a/build-scripts/survey-ui/tsconfig.plugins.themes.typing.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "baseUrl": ".", - "paths": { - "survey-core": [ - "../../build/survey-core" - ] - }, - "declaration": true, - "emitDeclarationOnly": true, - "outDir": "../../build/survey-ui/themes/typings/" - }, - "include": [ - "../../src/themes/index.ts" - ] -} \ No newline at end of file diff --git a/build-scripts/survey-ui/webpack.config.js b/build-scripts/survey-ui/webpack.config.js index b6d330942b..036e3ff120 100644 --- a/build-scripts/survey-ui/webpack.config.js +++ b/build-scripts/survey-ui/webpack.config.js @@ -7,11 +7,6 @@ var packageJson = require("./package.json"); var path = require("path"); const config = { - entry: { - survey: path.resolve(__dirname, "../../src/main.scss"), - modern: path.resolve(__dirname, "../../src/modern.scss"), - defaultV2: path.resolve(__dirname, "../../src/defaultV2-theme/defaultV2.scss") - }, resolve: { alias: { "react": "preact/compat", diff --git a/build-scripts/survey-ui/webpack.themes.config.js b/build-scripts/survey-ui/webpack.themes.config.js deleted file mode 100644 index 7d82e26707..0000000000 --- a/build-scripts/survey-ui/webpack.themes.config.js +++ /dev/null @@ -1,77 +0,0 @@ -"use strict"; - -const webpackCommonConfigCreator = require("../webpack.common"); -const { merge } = require("webpack-merge"); -var FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries"); -const DtsGeneratorPlugin = require("../webpack-dts-generator"); -var path = require("path"); - -const config = { - entry: { - "default-light": path.resolve(__dirname, "../../src/themes/default-light.ts"), - "default-dark": path.resolve(__dirname, "../../src/themes/default-dark.ts"), - "default-light-panelless": path.resolve(__dirname, "../../src/themes/default-light-panelless.ts"), - "default-dark-panelless": path.resolve(__dirname, "../../src/themes/default-dark-panelless.ts"), - "sharp-light": path.resolve(__dirname, "../../src/themes/sharp-light.ts"), - "sharp-dark": path.resolve(__dirname, "../../src/themes/sharp-dark.ts"), - "sharp-light-panelless": path.resolve(__dirname, "../../src/themes/sharp-light-panelless.ts"), - "sharp-dark-panelless": path.resolve(__dirname, "../../src/themes/sharp-dark-panelless.ts"), - "borderless-light": path.resolve(__dirname, "../../src/themes/borderless-light.ts"), - "borderless-dark": path.resolve(__dirname, "../../src/themes/borderless-dark.ts"), - "borderless-light-panelless.": path.resolve(__dirname, "../../src/themes/borderless-light-panelless.ts"), - "borderless-dark-panelless": path.resolve(__dirname, "../../src/themes/borderless-dark-panelless.ts"), - "flat-light": path.resolve(__dirname, "../../src/themes/flat-light.ts"), - "flat-dark": path.resolve(__dirname, "../../src/themes/flat-dark.ts"), - "flat-light-panelless": path.resolve(__dirname, "../../src/themes/flat-light-panelless.ts"), - "flat-dark-panelless": path.resolve(__dirname, "../../src/themes/flat-dark-panelless.ts"), - "plain-light": path.resolve(__dirname, "../../src/themes/plain-light.ts"), - "plain-dark": path.resolve(__dirname, "../../src/themes/plain-dark.ts"), - "plain-light-panelless": path.resolve(__dirname, "../../src/themes/plain-light-panelless.ts"), - "plain-dark-panelless": path.resolve(__dirname, "../../src/themes/plain-dark-panelless.ts"), - "doubleborder-light": path.resolve(__dirname, "../../src/themes/doubleborder-light.ts"), - "doubleborder-dark": path.resolve(__dirname, "../../src/themes/doubleborder-dark.ts"), - "doubleborder-light-panelles": path.resolve(__dirname, "../../src/themes/doubleborder-light-panelless.ts"), - "doubleborder-dark-panelless": path.resolve(__dirname, "../../src/themes/doubleborder-dark-panelless.ts"), - "layered-light": path.resolve(__dirname, "../../src/themes/layered-light.ts"), - "layered-dark": path.resolve(__dirname, "../../src/themes/layered-dark.ts"), - "layered-light-panelless": path.resolve(__dirname, "../../src/themes/layered-light-panelless.ts"), - "layered-dark-panelless": path.resolve(__dirname, "../../src/themes/layered-dark-panelless.ts"), - "solid-light": path.resolve(__dirname, "../../src/themes/solid-light.ts"), - "solid-dark": path.resolve(__dirname, "../../src/themes/solid-dark.ts"), - "solid-light-panelless": path.resolve(__dirname, "../../src/themes/solid-light-panelless.ts"), - "solid-dark-panelless": path.resolve(__dirname, "../../src/themes/solid-dark-panelless.ts"), - "three-dimensional-light": path.resolve(__dirname, "../../src/themes/threedimensional-light.ts"), - "three-dimensional-dark": path.resolve(__dirname, "../../src/themes/threedimensional-dark.ts"), - "three-dimensional-light-panelless": path.resolve(__dirname, "../../src/themes/threedimensional-light-panelless.ts"), - "three-dimensional-dark-panelless": path.resolve(__dirname, "../../src/themes/threedimensional-dark-panelless.ts"), - "contrast-light": path.resolve(__dirname, "../../src/themes/contrast-light.ts"), - "contrast-dark": path.resolve(__dirname, "../../src/themes/contrast-dark.ts"), - "contrast-light-panelless": path.resolve(__dirname, "../../src/themes/contrast-light-panelless.ts"), - "contrast-dark-panelless": path.resolve(__dirname, "../../src/themes/contrast-dark-panelless.ts"), - "index": path.resolve(__dirname, "../../src/themes/index.ts"), - }, - plugins: [new FixStyleOnlyEntriesPlugin()], - externals: { - "survey-core": { - root: "Survey", - commonjs2: "survey-core", - commonjs: "survey-core", - amd: "survey-core" - } - } -}; - -module.exports = function (options) { - options.platform = ""; - options.libraryName = "SurveyTheme"; - if (options.buildType !== "prod") { - config.plugins.push(new DtsGeneratorPlugin({ - tsConfigPath: "./build-scripts/survey-ui/tsconfig.plugins.themes.typing.json", - filePath: "build/survey-ui/themes/index.d.ts", - moduleName: "survey-ui/themes", - importName: "index" - })); - } - - return merge(webpackCommonConfigCreator(options, { "name": "survey-themes" }, "survey.themes", "survey-ui/themes"), config); -}; diff --git a/examples/jquery-ui/index.html b/examples/jquery-ui/index.html index 3de1f29e76..d9c32ed14a 100644 --- a/examples/jquery-ui/index.html +++ b/examples/jquery-ui/index.html @@ -8,9 +8,9 @@ - - - + + + diff --git a/examples/survey-ui/index.html b/examples/survey-ui/index.html new file mode 100644 index 0000000000..de0c43d1ff --- /dev/null +++ b/examples/survey-ui/index.html @@ -0,0 +1,23 @@ + + + + Welcome to JQuery + + + + + + + + + + + + + + +
+
+ + + diff --git a/examples/survey-ui/index.js b/examples/survey-ui/index.js new file mode 100644 index 0000000000..eff43bd3ef --- /dev/null +++ b/examples/survey-ui/index.js @@ -0,0 +1,984 @@ +function init() { + //Add the price property into choices + Survey.Serializer.addProperty("itemvalue", "price:number"); + + var getItemPrice = function (params) { + //this.row property available in cells of dropdown and dynamic matrices questions + var question = !!this.row + ? this.row.getQuestionByColumnName(params[0]) + : null; + //if we can't find a question inside the cell (by row and column name) then return + if (!question) return 0; + + //get the selected item/choice + var selItem = question.selectedItem; + //return 0 if a user did not select the item yet. + return !!selItem ? selItem.price : 0; + }; + //Register the custom function + Survey.FunctionFactory.Instance.register("getItemPrice", getItemPrice); + + var json = { + showProgressBar: "both", + title: "Survey New Design Test", + logo: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg", + logoPosition: "left", + questions: [ + { + name: "signature", + type: "signaturepad", + title: "Sign here", + isRequired: true + }, + { + name: "name", + type: "text", + title: "Text", + placeHolder: "Jon Snow", + isRequired: true + }, + { + name: "birthdate", + type: "text", + inputType: "date", + title: "Text Date", + isRequired: true + }, + { + name: "color", + type: "text", + inputType: "color", + title: "Text Color" + }, + { + name: "email", + type: "text", + inputType: "email", + title: "Text Email", + placeHolder: "jon.snow@nightwatch.org", + isRequired: true, + validators: [ + { + type: "email" + } + ] + }, + { + type: "dropdown", + name: "cars", + title: "Dropdown", + isRequired: true, + showNoneItem: true, + colCount: 4, + choices: [ + "Ford", + "Vauxhall", + "Volkswagen", + "Nissan", + "Audi", + "Mercedes-Benz", + "BMW", + "Peugeot", + "Toyota", + "Citroen" + ] + }, + { + type: "checkbox", + name: "car", + title: "Checkbox", + isRequired: true, + showSelectAllItem: true, + showNoneItem: true, + colCount: 4, + choices: [ + "Ford", + "Vauxhall", + "Volkswagen", + "Nissan", + "Audi", + "Mercedes-Benz", + "BMW", + "Peugeot", + "Toyota", + "Citroen" + ] + }, + { + type: "radiogroup", + name: "carss", + title: "Radiogroup", + isRequired: true, + colCount: 4, + choices: [ + "None", + "Ford", + "Vauxhall", + "Volkswagen", + "Nissan", + "Audi", + "Mercedes-Benz", + "BMW", + "Peugeot", + "Toyota", + "Citroen" + ] + }, + { + type: "image", + name: "banner", + imageHeight: "300px", + imageWidth: "450px", + imageLink: + "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" + }, + { + type: "imagepicker", + name: "choosepicture", + title: "Imagepicker", + imageHeight: "150px", + imageWidth: "225px", + choices: [ + { + value: "lion", + imageLink: + "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" + }, + { + value: "giraffe", + imageLink: + "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg" + }, + { + value: "panda", + imageLink: + "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg" + }, + { + value: "camel", + imageLink: + "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg" + } + ] + }, + { + type: "boolean", + name: "bool", + title: "Boolean", + label: "Are you 21 or older?", + isRequired: true + }, + { + type: "matrix", + name: "Quality", + title: "Matrix", + columns: [ + { + value: 1, + text: "Strongly Disagree" + }, + { + value: 2, + text: "Disagree" + }, + { + value: 3, + text: "Neutral" + }, + { + value: 4, + text: "Agree" + }, + { + value: 5, + text: "Strongly Agree" + } + ], + rows: [ + { + value: "affordable", + text: "Product is affordable" + }, + { + value: "does what it claims", + text: "Product does what it claims" + }, + { + value: "better than others", + text: "Product is better than other products on the market" + }, + { + value: "easy to use", + text: "Product is easy to use" + } + ] + }, + { + type: "matrix", + name: "planningPerformance", + title: "Matrix Rubric", + columns: [ + "Ineffective", + "Improvement Necessary", + "Effective", + "Highly Effective" + ], + rows: [ + { + value: "dataToPlan", + text: "Utilizes Assessment Data to Plan" + }, + { + value: "ambitiousGoals", + text: "Ambitious and Measurable Achievement Goal" + }, + { + value: "developsStandards", + text: + "Develops Standards.
Based Unit Plans and Assessments.
Evaluation Values." + }, + { + value: "createsObjective", + text: "Creates Objective - Driven Lesson Plans and Assessments" + } + ], + cells: { + dataToPlan: { + Ineffective: + "Teacher rarely or never uses formal and informal assessment data when planning", + "Improvement Necessary": + "Teacher uses formal and informal assessment data to formulate
- Achievement goals, unit plans, or lesson plans, but not all of these", + Effective: + "Teacher uses formal and informal assessment data to formulate
- Achievement goals, unit plans, and lesson plans", + "Highly Effective": + "Teacher uses formal and informal assessment data to formulate achievement goals, unit plans, and lesson plans
- Incorporates differentiated instructional strategies in planning to reach every student at his/her level of understanding" + }, + ambitiousGoals: { + Ineffective: + "Teacher rarely or never develops achievement goals for the class, or goals are developed but are too general to be helpful for planning purposes", + "Improvement Necessary": + "Teacher develops an annual student achievement goalthat lacks one or more of these traits:
- Measurable
- Aligned to content standards
- Includes benchmarks to help monitor learning and inform interventions throughout the year", + Effective: + "Teacher develops an annual student achievement goal that
- Is measurable
- Is aligned to content standards
- Includes benchmarks to help monitor learning and inform interventions throughout the year", + "Highly Effective": + "Teacher develops an annual student achievement goal that
- Is measurable
- Is aligned to content standards where applicable
- Includes benchmarks to help monitor learning and informinterventions throughout the year" + }, + developsStandards: { + Ineffective: + "Teacher rarely or never plans by identifying content standards that students will master in each unit, or there is little to no evidence that teacher plans units at all", + "Improvement Necessary": + "Based on achievement goals, teacher plans units but omits one or more of these steps:
- Identifying content standards that students will master in each unit
- Creating assessments before planning units
- Allocating an instructionally appropriate amount of time for each unit", + Effective: + "Based on achievement goals, teacher plans units by
- Identifying content standards that students will master in each unit
- Creating assessments before each unit begins for backwards planning
- Allocating an instructionally appropriate amount of time for each unit", + "Highly Effective": + "Based on achievement goals, teacher plans units by
- Identifying content standards that students will master in each unit
- Creating assessments before each unit begins for backwards planning
- Allocating an instructionally appropriate amount of time for each unit" + }, + createsObjective: { + Ineffective: + "Teacher rarely or never uses a system to track student assessment/progress data and/or has an ineffective grading system", + "Improvement Necessary": + "Teacher uses a data tracking system to record student assessment / progress data and maintain a grading system but fails in one or more of the following steps
- Use data to analyze student progress toward mastery or to plan future lessons / units
- Have a grading system that appropriately aligns with student learning goals", + Effective: + "Teacher uses an effective data tracking system for
- Recording student assessment / progress data
- Analyzing student progress towards mastery and planning future lessons/units accordingly
- Maintaining a grading system aligned to student learning goals", + "Highly Effective": + "Teacher uses an effective data tracking system that
- Records student assessment / progress data
- Analyzes student progress toward mastery and plans future lessons/units accordingly
- Maintains a grading system aligned to student learning goals" + } + } + }, + { + type: "matrix Dropdown", + name: "frameworksRate", + title: "Matrixdropdown", + choices: ["Excelent", "Good", "Average", "Fair", "Poor"], + columns: [ + { + name: "using", + title: "Do you use it?", + choices: ["Yes", "No"], + cellType: "radiogroup" + }, + { + name: "experience", + title: "How long do you use it?", + choices: [ + { + value: 5, + text: "3-5 years" + }, + { + value: 2, + text: "1-2 years" + }, + { + value: 1, + text: "less than a year" + } + ] + }, + { + name: "strength", + title: "What is main strength?", + choices: ["Easy", "Compact", "Fast", "Powerfull"], + cellType: "checkbox" + }, + { + name: "knowledge", + title: "Please describe your experience", + cellType: "text" + }, + { + name: "rate", + title: "Please rate the framework itself" + } + ], + rows: [ + { + value: "angularv1", + text: "angularjs v1.x" + }, + { + value: "angularv2", + text: "angularjs v2" + }, + { + value: "knockoutjs" + }, + { + value: "reactjs" + } + ] + }, + { + type: "matrixdynamic", + name: "teachersRate", + title: "Matrix Dynamic", + addRowText: "Add Subject", + horizontalScroll: true, + columnMinWidth: "130px", + columnColCount: 1, + cellType: "radiogroup", + choices: [ + { + value: 1, + text: "Yes" + }, + { + value: 0, + text: "Sometimes" + }, + { + value: -1, + text: "No" + } + ], + columns: [ + { + name: "subject", + cellType: "dropdown", + title: "Select a subject", + isRequired: true, + minWidth: "300px", + choices: [ + "English: American Literature", + "English: British and World Literature", + "Math: Consumer Math", + "Math: Practical Math", + "Math: Developmental Algebra", + "Math: Continuing Algebra", + "Math: Pre-Algebra", + "Math: Algebra", + "Math: Geometry", + "Math: Integrated Mathematics", + "Science: Physical Science", + "Science: Earth Science", + "Science: Biology", + "Science: Chemistry", + "History: World History", + "History: Modern World Studies", + "History: U.S. History", + "History: Modern U.S. History", + "Social Sciences: U.S. Government and Politics", + "Social Sciences: U.S. and Global Economics", + "World Languages: Spanish", + "World Languages: French", + "World Languages: German", + "World Languages: Latin", + "World Languages: Chinese", + "World Languages: Japanese" + ] + }, + { + name: "explains", + title: "Clearly explains the objectives" + }, + { + name: "interesting", + title: "Makes class interesting" + }, + { + name: "effective", + title: "Uses class time effectively" + }, + { + name: "knowledge", + title: "Knows the subject matter" + }, + { + name: "recognition", + title: "Recognizes and acknowledges effort" + }, + { + name: "inform", + title: "Keeps me informed of my progress" + }, + { + name: "opinion", + title: "Encourages and accepts different opinions" + }, + { + name: "respect", + title: "Has the respect of the student" + }, + { + name: "cooperation", + title: "Encourages cooperation and participation" + }, + { + name: "parents", + title: "Communicates with my parents" + }, + { + name: "selfthinking", + title: "Encourages me to think for myself" + }, + { + name: "frusturation", + cellType: "comment", + title: "Is there anything about this class that frustrates you?", + minWidth: "250px" + }, + { + name: "likeTheBest", + cellType: "comment", + title: "What do you like best about this class and/or teacher?", + minWidth: "250px" + }, + { + name: "improvements", + cellType: "comment", + title: + "What do you wish this teacher would do differently that would improve this class?", + minWidth: "250px" + } + ], + rowCount: 2 + }, + { + type: "matrixdynamic", + name: "Current Level of Function", + title: "Matrix Dynamic (vertical columns)", + columnLayout: "vertical", + minRowCount: 1, + maxRowCount: 5, + columns: [ + { + name: "Date", + title: "Date", + cellType: "text", + inputType: "date" + }, + { + name: "AmbDistance", + title: "Amb Distance", + cellType: "text" + }, + { + name: "Amb Assistance", + cellType: "dropdown", + choices: ["D", "MAX", "MOD", "MIN"] + }, + { + name: "Standing Tolerance", + cellType: "text" + }, + { + name: "UE Strength", + cellType: "text" + }, + { + name: "Cognitive Function", + cellType: "comment" + } + ], + choices: [1], + cellType: "comment", + confirmDelete: true, + addRowText: "Add Date +", + removeRowText: "Remove" + }, + { + type: "matrixdynamic", + name: "orderList", + rowCount: 1, + minRowCount: 1, + title: "Matrix Dynamic (totals)", + addRowText: "Add new item", + columns: [ + { + name: "id", + title: "Id", + cellType: "expression", + expression: "{rowIndex}" + }, + { + name: "phone_model", + title: "Phone model", + isRequired: true, + totalType: "count", + totalFormat: "Items count: {0}", + choices: [ + { + value: "iPhone7-32", + text: "iPhone 7, 32GB", + price: 449 + }, + { + value: "iPhone7-128", + text: "iPhone 7, 128GB", + price: 549 + }, + { + value: "iPhone7Plus-32", + text: "iPhone 7 Plus, 32GB", + price: 569 + }, + { + value: "iPhone7Plus-128", + text: "iPhone 7 Plus, 128GB", + price: 669 + }, + { + value: "iPhone8-64", + text: "iPhone 8, 64GB", + price: 599 + }, + { + value: "iPhone8-256", + text: "iPhone 8, 256GB", + price: 749 + }, + { + value: "iPhone8Plus-64", + text: "iPhone 8 Plus, 64GB", + price: 699 + }, + { + value: "iPhone8Plus-256", + text: "iPhone 8 Plus, 256GB", + price: 849 + }, + { + value: "iPhoneXR-64", + text: "iPhone XR, 64GB", + price: 749 + }, + { + value: "iPhoneXR-128", + text: "iPhone XR, 128GB", + price: 799 + }, + { + value: "iPhoneXR-256", + text: "iPhone XR, 256GB", + price: 899 + }, + { + value: "iPhoneXS-64", + text: "iPhone XS, 64GB", + price: 999 + }, + { + value: "iPhoneXS-256", + text: "iPhone XS, 256GB", + price: 1149 + }, + { + value: "iPhoneXS-512", + text: "iPhone XS, 512GB", + price: 1349 + }, + { + value: "iPhoneXSMAX-64", + text: "iPhone XS Max, 64GB", + price: 1099 + }, + { + value: "iPhoneXSMAX-256", + text: "iPhone XS Max, 256GB", + price: 1249 + }, + { + value: "iPhoneXSMAX-512", + text: "iPhone XS, 512GB", + price: 1449 + } + ] + }, + { + name: "price", + title: "Price", + cellType: "expression", + expression: "getItemPrice('phone_model')", + displayStyle: "currency" + }, + { + name: "quantity", + title: "Quantity", + isRequired: true, + cellType: "text", + inputType: "number", + totalType: "sum", + totalFormat: "Total phones: {0}", + validators: [ + { + type: "numeric", + minValue: 1, + maxValue: 100 + } + ] + }, + { + name: "total", + title: "Total", + cellType: "expression", + expression: "{row.quantity} * {row.price}", + displayStyle: "currency", + totalType: "sum", + totalDisplayStyle: "currency", + totalFormat: "Total: {0}" + } + ] + }, + { + name: "vatProcents", + type: "text", + title: "VAT (in %)", + defaultValue: 20, + inputType: "number", + validators: [ + { + type: "numeric", + minValue: 0, + maxValue: 40 + } + ] + }, + { + name: "vatTotal", + type: "expression", + title: "VAT", + expression: "{orderList-total.total} * {vatProcents} / 100", + displayStyle: "currency", + startWithNewLine: false + }, + { + name: "total", + type: "expression", + title: "Total", + expression: "{orderList-total.total} + {vatTotal}", + displayStyle: "currency", + startWithNewLine: false + }, + { + type: "multipletext", + name: "pricelimit", + title: "Multipletext", + colCount: 2, + items: [ + { + name: "mostamount", + title: "Most amount you would every pay for a product like ours" + }, + { + name: "leastamount", + title: "The least amount you would feel comfortable paying" + } + ] + }, + { + type: "rating", + name: "satisfaction", + title: "Rating", + minRateDescription: "Not Satisfied", + maxRateDescription: "Completely satisfied" + }, + { + type: "comment", + name: "suggestions", + title: "Comment" + }, + { + type: "file", + title: "File", + name: "image", + storeDataAsText: false, + showPreview: true, + imageWidth: 150, + maxSize: 102400 + }, + { + type: "panel", + title: "Panel", + innerIndent: 1, + elements: [ + { + type: "checkbox", + choices: [ + { + value: "1", + text: "Customer relationship" + }, + { + value: "2", + text: "Service quality" + }, + { + value: "3", + text: "Support response time" + } + ], + name: "What should be improved?" + }, + { + type: "comment", + name: "suggestions", + title: "What would make you more satisfied with the Product?" + } + ] + }, + { + type: "paneldynamic", + name: "relatives", + title: "Panel Dynamic", + renderMode: "progressTop", + templateTitle: "Information about: {panel.relativeType}", + templateElements: [ + { + name: "relativeType", + type: "dropdown", + title: "Relative", + choices: [ + "father", + "mother", + "brother", + "sister", + "son", + "daughter" + ], + isRequired: true + }, + { + name: "isalive", + type: "radiogroup", + title: "Alive?", + startWithNewLine: false, + isRequired: true, + colCount: 0, + choices: ["Yes", "No"] + }, + { + name: "liveage", + type: "dropdown", + title: "Age", + isRequired: true, + startWithNewLine: false, + visibleIf: "{panel.isalive} = 'Yes'", + choicesMin: 1, + choicesMax: 115 + }, + { + name: "deceasedage", + type: "dropdown", + title: "Deceased Age", + isRequired: true, + startWithNewLine: false, + visibleIf: "{panel.isalive} = 'No'", + choices: [ + { + value: -1, + text: "Unknown" + } + ], + choicesMin: 1, + choicesMax: 115 + }, + { + name: "causeofdeathknown", + type: "radiogroup", + title: "Cause of Death Known?", + isRequired: true, + colCount: 0, + startWithNewLine: false, + visibleIf: "{panel.isalive} = 'No'", + choices: ["Yes", "No"] + }, + { + name: "causeofdeath", + type: "text", + title: "Cause of Death", + isRequired: true, + startWithNewLine: false, + visibleIf: + "{panel.isalive} = 'No' and {panel.causeofdeathknown} = 'Yes'" + }, + { + type: "panel", + name: "moreInfo", + state: "expanded", + title: "Detail Information about: {panel.relativeType}", + elements: [ + { + type: "matrixdynamic", + name: "relativeillness", + title: "Describe the illness or condition.", + rowCount: 0, + columns: [ + { + name: "illness", + cellType: "dropdown", + title: "Illness/Condition", + choices: [ + "Cancer", + "Heart Disease", + "Diabetes", + "Stroke/TIA", + "High Blood Pressure", + "High Cholesterol or Triglycerides", + "Liver Disease", + "Alcohol or Drug Abuse", + "Anxiety, Depression or Psychiatric Illness", + "Tuberculosis", + "Anesthesia Complications", + "Genetic Disorder", + "Other – describe" + ], + isRequired: true + }, + { + name: "description", + cellType: "text", + title: "Describe", + isRequired: true + } + ] + } + ] + } + ], + panelCount: 2, + panelAddText: "Add a blood relative", + panelRemoveText: "Remove the relative" + }, + { + type: "panel", + title: "Expression Example Panel", + innerIndent: 1, + elements: [ + { + type: "paneldynamic", + name: "items", + title: "Items", + keyName: "name", + showQuestionNumbers: "none", + templateTitle: "item #{panelIndex}", + templateElements: [ + { + type: "text", + name: "name", + title: "Name:", + isRequired: true + }, + { + type: "text", + name: "cost", + inputType: "number", + title: "Item Cost:", + isRequired: true, + startWithNewLine: false + }, + { + type: "text", + name: "vendor", + title: "Vendor:", + isRequired: true + }, + { + type: "text", + name: "quantity", + inputType: "number", + title: "Quantity:", + isRequired: true, + startWithNewLine: false + }, + { + type: "text", + name: "link", + title: "Link:", + isRequired: true + }, + { + type: "expression", + name: "total", + title: "Total Item Cost:", + expression: "{panel.cost} * {panel.quantity}", + displayStyle: "currency", + currency: "EUR", + startWithNewLine: false + } + ], + minPanelCount: 1, + panelAddText: "Add another item", + panelRemoveText: "Remove item" + }, + { + type: "panel", + title: "Totals", + elements: [ + { + type: "expression", + name: "totalQuantity", + title: "Total Quantity:", + expression: "sumInArray({items}, 'quantity'" + }, + { + type: "expression", + name: "totalCost", + title: "Total Cost:", + expression: "sumInArray({items}, 'total'", + displayStyle: "currency", + currency: "EUR", + startWithNewLine: false + } + ] + } + ] + } + ] + }; + + //Survey.StylesManager.applyTheme("default"); + //Survey.StylesManager.applyTheme("modern"); + Survey.StylesManager.applyTheme("defaultV2"); + + window.survey = new Survey.Model(json); + survey.onComplete.add(function (result) { + document.querySelector("#surveyResultElement").innerHTML = + "result: " + JSON.stringify(result.data); + }); + + SurveyUI.renderSurvey(survey, document.getElementById("surveyElement")); +} + +if (!window["%hammerhead%"]) { + init(); +} \ No newline at end of file diff --git a/examples_test/bootstrap/jquery-ui.html b/examples_test/bootstrap/jquery-ui.html index c06b598d1b..24f34d61fa 100644 --- a/examples_test/bootstrap/jquery-ui.html +++ b/examples_test/bootstrap/jquery-ui.html @@ -9,6 +9,7 @@ + diff --git a/examples_test/bootstrap/survey-ui.html b/examples_test/bootstrap/survey-ui.html new file mode 100644 index 0000000000..c6d420f053 --- /dev/null +++ b/examples_test/bootstrap/survey-ui.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/examples_test/customWidget/jquery-ui.html b/examples_test/customWidget/jquery-ui.html index 0a92b2302b..3f4ee3b706 100644 --- a/examples_test/customWidget/jquery-ui.html +++ b/examples_test/customWidget/jquery-ui.html @@ -9,9 +9,10 @@ - + + diff --git a/examples_test/customWidget/survey-ui.html b/examples_test/customWidget/survey-ui.html new file mode 100644 index 0000000000..9e621d3d31 --- /dev/null +++ b/examples_test/customWidget/survey-ui.html @@ -0,0 +1,61 @@ + + + + + Welcome to Jquery UI + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/examples_test/default/jquery-ui.html b/examples_test/default/jquery-ui.html index 05255b3132..5039a2f901 100644 --- a/examples_test/default/jquery-ui.html +++ b/examples_test/default/jquery-ui.html @@ -6,9 +6,10 @@ - + + diff --git a/examples_test/default/survey-ui.html b/examples_test/default/survey-ui.html new file mode 100644 index 0000000000..a36af41a56 --- /dev/null +++ b/examples_test/default/survey-ui.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/examples_test/defaultV2/jquery-ui.html b/examples_test/defaultV2/jquery-ui.html index dd688158cd..f36a38580c 100644 --- a/examples_test/defaultV2/jquery-ui.html +++ b/examples_test/defaultV2/jquery-ui.html @@ -6,9 +6,10 @@ - + + diff --git a/examples_test/defaultV2/survey-ui.html b/examples_test/defaultV2/survey-ui.html new file mode 100644 index 0000000000..9def346062 --- /dev/null +++ b/examples_test/defaultV2/survey-ui.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/examples_test/modern/jquery-ui.html b/examples_test/modern/jquery-ui.html index 002adb957c..493d353137 100644 --- a/examples_test/modern/jquery-ui.html +++ b/examples_test/modern/jquery-ui.html @@ -6,9 +6,10 @@ - + + diff --git a/examples_test/modern/survey-ui.html b/examples_test/modern/survey-ui.html new file mode 100644 index 0000000000..cf47b46301 --- /dev/null +++ b/examples_test/modern/survey-ui.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/package.json b/package.json index f5fadfeaa4..2d967b4ebd 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,10 @@ "testcafe:ko": "http-server --silent & testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless testCafe/ --reporter minimal --env=knockout", "testcafe:jquery-ui": "testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome testCafe/ --app \"http-server --silent\" --env=jquery-ui", "testcafe:jquery-ui:ci": "http-server --silent & testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless testCafe/ --reporter minimal --env=jquery-ui", + "testcafe:survey-ui": "testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome testCafe/ --app \"http-server --silent\" --env=survey-ui", + "testcafe:survey-ui:ci": "http-server --silent & testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless testCafe/ --reporter minimal --env=survey-ui", "vrt:jquery-ui:ci": "testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=jquery-ui", + "vrt:survey-ui:ci": "testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=survey-ui", "testcafe:react": "http-server --silent & testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless testCafe/ --reporter minimal --env=react", "testcafe:vue": "http-server --silent & testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless testCafe/ --reporter minimal --env=vue", "release": "commit-and-tag-version --message \"Release: %s [azurepipelines skip]\" ", @@ -25,10 +28,10 @@ "build_vue_prod": "webpack --config ./build-scripts/survey-vue/webpack.config.js --env.buildType prod && webpack --config ./build-scripts/survey-vue/webpack.themes.config.js --env.buildType prod", "build_jquery_dev": "webpack --config ./build-scripts/survey-jquery/webpack.config.js --env.buildType dev && webpack --config ./build-scripts/survey-jquery/webpack.themes.config.js --env.buildType dev", "build_jquery_prod": "webpack --config ./build-scripts/survey-jquery/webpack.config.js --env.buildType prod && webpack --config ./build-scripts/survey-jquery/webpack.themes.config.js --env.buildType prod", - "build_jquery_ui_dev": "webpack --config ./build-scripts/survey-jquery-ui/webpack.config.js --env.buildType dev && webpack --config ./build-scripts/survey-jquery-ui/webpack.themes.config.js --env.buildType dev", - "build_jquery_ui_prod": "webpack --config ./build-scripts/survey-jquery-ui/webpack.config.js --env.buildType prod && webpack --config ./build-scripts/survey-jquery-ui/webpack.themes.config.js --env.buildType prod", - "build_ui_dev": "webpack --config ./build-scripts/survey-ui/webpack.config.js --env.buildType dev && webpack --config ./build-scripts/survey-ui/webpack.themes.config.js --env.buildType dev", - "build_ui_prod": "webpack --config ./build-scripts/survey-ui/webpack.config.js --env.buildType prod && webpack --config ./build-scripts/survey-ui/webpack.themes.config.js --env.buildType prod", + "build_jquery_ui_dev": "webpack --config ./build-scripts/survey-jquery-ui/webpack.config.js --env.buildType dev", + "build_jquery_ui_prod": "webpack --config ./build-scripts/survey-jquery-ui/webpack.config.js --env.buildType prod", + "build_ui_dev": "webpack --config ./build-scripts/survey-ui/webpack.config.js --env.buildType dev", + "build_ui_prod": "webpack --config ./build-scripts/survey-ui/webpack.config.js --env.buildType prod", "build_angular_dev": "webpack --config ./build-scripts/survey-angular/webpack.config.js --env.buildType dev", "build_angular_prod": "webpack --config ./build-scripts/survey-angular/webpack.config.js --env.buildType prod", "build_i18n_dev": "webpack --config ./build-scripts/survey-core/webpack.i18n.js --env.buildType dev", diff --git a/src/entries/jquery-ui.ts b/src/entries/jquery-ui.ts index e1a20dc0ba..04e79b11a2 100644 --- a/src/entries/jquery-ui.ts +++ b/src/entries/jquery-ui.ts @@ -3,10 +3,8 @@ import * as ReactDOM from "react-dom"; import jQuery from "jquery"; import { Survey, PopupSurvey } from "./jquery-ui-model"; -// localization -import "./chunks/localization"; -import { SurveyModel } from "./core"; +import { SurveyModel, checkLibraryVersion } from "survey-core"; jQuery["fn"].extend({ Survey: function (props: any) { @@ -24,25 +22,6 @@ function doPopupSurvey(props: any): void { var model: Survey = props.model; const survey = React.createElement(PopupSurvey, { ...props }); ReactDOM.render(survey, this); - - // var popupSurvey = props.popupModel || new PopupSurvey(model); - - // if (props.expanded !== undefined) { - // popupSurvey.isExpanded = props.expanded; - // } - // if (props.isExpanded !== undefined) { - // popupSurvey.isExpanded = props.isExpanded; - // } - // if (props.allowClose !== undefined) { - // popupSurvey.allowClose = props.allowClose; - // } - // if (props.allowFullScreen !== undefined) { - // popupSurvey.allowFullScreen = props.allowFullScreen; - // } - // if (props.closeOnCompleteTimeout !== undefined) { - // popupSurvey.closeOnCompleteTimeout = props.closeOnCompleteTimeout; - // } - // popupSurvey.show(); }); } @@ -55,9 +34,4 @@ export * from "./core-export"; export { SurveyModel as Model } from "survey-core"; -export * from "../utils/responsivity-manager"; -export { unwrap } from "../utils/utils"; - -import { checkLibraryVersion } from "survey-core"; - checkLibraryVersion(`${process.env.VERSION}`, "survey-jquery-ui"); \ No newline at end of file diff --git a/src/entries/ui.ts b/src/entries/ui.ts index e6b57b1758..6a1fbe3c92 100644 --- a/src/entries/ui.ts +++ b/src/entries/ui.ts @@ -7,19 +7,19 @@ import { SurveyModel } from "survey-core"; const jQuery = window["jQuery"] || window["$"]; -export function renderSurvey(model: SurveyModel, element: HTMLElement) { - const survey = React.createElement(Survey, { model }); +export function renderSurvey(model: SurveyModel, element: HTMLElement, props: any = {}) { + const survey = React.createElement(Survey, { model, ...props }); ReactDOM.render(survey, element); } -export function renderPopupSurvey(model: SurveyModel, element: HTMLElement) { - const survey = React.createElement(PopupSurvey, { model }); +export function renderPopupSurvey(model: SurveyModel, element: HTMLElement, props: any = {}) { + const survey = React.createElement(PopupSurvey, { model, ...props }); ReactDOM.render(survey, element); } function doPopupSurvey(props: any): void { return this.each(function () { - renderPopupSurvey(props.model, this); + renderPopupSurvey(props.model, this, props); }); } @@ -27,7 +27,7 @@ if (!!jQuery) { jQuery["fn"].extend({ Survey: function (props: any) { return this.each(function () { - renderSurvey(props.model, this); + renderSurvey(props.model, this, props); } as any); }, PopupSurvey: doPopupSurvey, diff --git a/testCafe/helper.js b/testCafe/helper.js index cea8788062..56548f3832 100644 --- a/testCafe/helper.js +++ b/testCafe/helper.js @@ -61,6 +61,9 @@ export const initSurvey = ClientFunction( window["$"]("#surveyElement").Survey({ model: model }); + } else if (framework === "survey-ui") { + document.getElementById("surveyElement").innerHTML = ""; + SurveyUI.renderSurvey(model, document.getElementById("surveyElement")); } else if (framework === "react") { document.getElementById("surveyElement").innerHTML = ""; const root = window["ReactDOM"].createRoot(document.getElementById("surveyElement")); @@ -117,6 +120,13 @@ export const initSurveyPopup = ClientFunction( allowClose: true, allowFullScreen: true }); + } else if (framework === "survey-ui") { + document.getElementById("surveyElement").innerHTML = ""; + SurveyUI.renderPopupSurvey(model, document.getElementById("surveyElement"), { + isExpanded: true, + allowClose: true, + allowFullScreen: true + }); } else if (framework === "react") { document.getElementById("surveyElement").innerHTML = ""; const root = window["ReactDOM"].createRoot(document.getElementById("surveyElement")); @@ -180,8 +190,8 @@ export const registerCustomToolboxComponent = ClientFunction( return window["React"].createElement(CustomActionButton, props); } ); - } else if (framework === "jquery-ui") { - const preact = window["SurveyJquery"]["preact"]; + } else if (framework === "jquery-ui" || framework === "survey-ui") { + const preact = (window["SurveyJquery"] || window["SurveyUI"])["preact"]; window.React = { createElement: preact.createElement }; class CustomActionButton extends preact.Component { @@ -199,7 +209,7 @@ export const registerCustomToolboxComponent = ClientFunction( } } - window["SurveyJquery"].ReactElementFactory.Instance.registerElement( + (window["SurveyJquery"] || window["SurveyUI"]).ReactElementFactory.Instance.registerElement( "svc-custom-action", (props) => { return preact.createElement(CustomActionButton, props); @@ -267,13 +277,13 @@ export const registerCustomItemComponent = ClientFunction( return window["React"].createElement(ItemTemplateComponent, props); } ); - } else if (framework === "jquery-ui") { - const preact = window["SurveyJquery"]["preact"]; + } else if (framework === "jquery-ui" || framework === "survey-ui") { + const preact = (window["SurveyJquery"] || window["SurveyUI"])["preact"]; window.React = { createElement: preact.createElement }; class ItemTemplateComponent extends preact.Component { render() { const item = this.props.item; - var Survey = window["SurveyJquery"]; + var Survey = window["SurveyJquery"] || window["SurveyUI"]; item.iconName = "icon-defaultfile"; item.hint = item.title + " - Description"; @@ -298,7 +308,7 @@ export const registerCustomItemComponent = ClientFunction( /* eslint-enable */ } } - window["SurveyJquery"].ReactElementFactory.Instance.registerElement( + (window["SurveyJquery"] || window["SurveyUI"]).ReactElementFactory.Instance.registerElement( "new-item", (props) => { return preact.createElement(ItemTemplateComponent, props); @@ -387,6 +397,31 @@ export const registerCustomItemContentComponent = ClientFunction( return preact.createElement(ItemContentTemplateComponent, props); } ); + } else if (framework === "survey-ui") { + const preact = window["SurveyUI"]["preact"]; + window.React = { createElement: preact.createElement }; + class ItemContentTemplateComponent extends preact.Component { + render() { + const locText = this.props.item.locText; + const styles = { + "display": "flex", + "alignItems": "center", + "gap": "8px" + }; + return ( +
+ + {SurveyUI.SurveyElementBase.renderLocString(locText)} +
+ ); + } + } + window["SurveyUI"].ReactElementFactory.Instance.registerElement( + "new-item-content", + (props) => { + return preact.createElement(ItemContentTemplateComponent, props); + } + ); } else if (framework === "vue") { Vue.component("new-item-content", { props: { diff --git a/testCafe/survey/customCss.js b/testCafe/survey/customCss.js index 3c2633082c..9fa67a05fc 100644 --- a/testCafe/survey/customCss.js +++ b/testCafe/survey/customCss.js @@ -48,6 +48,10 @@ const initSurvey = ClientFunction((framework, json) => { window["$"]("#surveyElement").Survey({ model: model }); + } else if (framework === "survey-ui") { + model.css = myCss; + document.getElementById("surveyElement").innerHTML = ""; + window["SurveyUI"].renderSurvey(model, document.getElementById("surveyElement")); } window["survey"] = model; }); diff --git a/testCafe/survey/popup.js b/testCafe/survey/popup.js index 9269bdba6c..1423191cc2 100644 --- a/testCafe/survey/popup.js +++ b/testCafe/survey/popup.js @@ -48,6 +48,9 @@ const initPopupSurvey = ClientFunction( window["$"]("#surveyElement").PopupSurvey({ model: model }); + } else if (framework === "survey-ui") { + document.getElementById("surveyElement").innerHTML = ""; + window["SurveyUI"].renderPopupSurvey(model, document.getElementById("surveyElement")); } window["survey"] = model; } diff --git a/visualRegressionTests/tests/defaultV2/buttongroup.ts b/visualRegressionTests/tests/defaultV2/buttongroup.ts index f92d5a8b42..b780436481 100644 --- a/visualRegressionTests/tests/defaultV2/buttongroup.ts +++ b/visualRegressionTests/tests/defaultV2/buttongroup.ts @@ -25,11 +25,18 @@ const registerButtongroup = ClientFunction((framework) => { } if (framework === "jquery-ui") { const SurveyJquery = (window).SurveyJquery; - const preact = window["SurveyJquery"]["preact"]; + const preact = SurveyJquery["preact"]; SurveyJquery.ReactQuestionFactory.Instance.registerQuestion("buttongroup", props => { return preact.createElement(SurveyJquery.SurveyQuestionButtonGroup, props); }); } + if (framework === "survey-ui") { + const SurveyUI = (window).SurveyUI; + const preact = SurveyUI["preact"]; + SurveyUI.ReactQuestionFactory.Instance.registerQuestion("buttongroup", props => { + return preact.createElement(SurveyUI.SurveyQuestionButtonGroup, props); + }); + } if (framework === "knockout") { Survey.Serializer.overrideClassCreator("buttongroup", function () { return new Survey.QuestionButtonGroup("");