From 0ee6b10f8b67183a72eee434978ec42ecb85aadb Mon Sep 17 00:00:00 2001 From: Jennifer Eiss Date: Wed, 12 Aug 2020 16:22:53 +0100 Subject: [PATCH 1/7] Converted js and hbs files to use React andjsx --- js/adapt-contrib-text.js | 79 +++++++++++++++++++--------------------- templates/text.hbs | 3 -- templates/text.jsx | 7 ++++ 3 files changed, 45 insertions(+), 44 deletions(-) delete mode 100644 templates/text.hbs create mode 100644 templates/text.jsx diff --git a/js/adapt-contrib-text.js b/js/adapt-contrib-text.js index b23dc38..aee8fcc 100644 --- a/js/adapt-contrib-text.js +++ b/js/adapt-contrib-text.js @@ -1,58 +1,55 @@ -define([ - 'core/js/adapt', - 'core/js/views/componentView', - 'core/js/models/componentModel' -], function(Adapt, ComponentView, ComponentModel) { +import Adapt from 'core/js/adapt'; +import ComponentView from 'core/js/views/componentView'; +import ComponentModel from 'core/js/models/componentModel'; - class TextView extends ComponentView { +class TextView extends ComponentView { - preRender() { - this.checkIfResetOnRevisit(); - } + preRender() { + this.checkIfResetOnRevisit(); + } - postRender() { - this.setReadyStatus(); + postRender() { + this.setReadyStatus(); - this.setupInview(); - } - - setupInview() { - const selector = this.getInviewElementSelector(); - if (!selector) { - this.setCompletionStatus(); - return; - } + this.setupInview(); + } - this.setupInviewCompletion(selector); + setupInview() { + const selector = this.getInviewElementSelector(); + if (!selector) { + this.setCompletionStatus(); + return; } - /** - * determines which element should be used for inview logic - body, instruction or title - and returns the selector for that element - */ - getInviewElementSelector() { - if (this.model.get('body')) return '.component__body'; + this.setupInviewCompletion(selector); + } - if (this.model.get('instruction')) return '.component__instruction'; + /** + * determines which element should be used for inview logic - body, instruction or title - and returns the selector for that element + */ + getInviewElementSelector() { + if (this.model.get('body')) return '.component__body'; - if (this.model.get('displayTitle')) return '.component__title'; + if (this.model.get('instruction')) return '.component__instruction'; - return null; - } + if (this.model.get('displayTitle')) return '.component__title'; + + return null; + } - checkIfResetOnRevisit() { - const isResetOnRevisit = this.model.get('_isResetOnRevisit'); + checkIfResetOnRevisit() { + const isResetOnRevisit = this.model.get('_isResetOnRevisit'); - // If reset is enabled set defaults - if (isResetOnRevisit) { - this.model.reset(isResetOnRevisit); - } + // If reset is enabled set defaults + if (isResetOnRevisit) { + this.model.reset(isResetOnRevisit); } } +} - TextView.template = 'text'; +TextView.template = 'text.jsx'; - return Adapt.register('text', { - model: ComponentModel.extend({}),// create a new class in the inheritance chain so it can be extended per component type if necessary later - view: TextView - }); +export default Adapt.register('text', { + model: ComponentModel, + view: TextView }); diff --git a/templates/text.hbs b/templates/text.hbs deleted file mode 100644 index 0729c24..0000000 --- a/templates/text.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
- {{> component this}} -
diff --git a/templates/text.jsx b/templates/text.jsx new file mode 100644 index 0000000..985ca3d --- /dev/null +++ b/templates/text.jsx @@ -0,0 +1,7 @@ +import { templates } from 'core/js/reactHelpers'; + +export default function(view, model) { + return
+ {templates.component(view, model)} +
; +} From 677317b40caf487d56c756a30e66b0057eea0585 Mon Sep 17 00:00:00 2001 From: Jennifer Eiss Date: Mon, 17 Aug 2020 12:11:20 +0100 Subject: [PATCH 2/7] Switched to model, view in jsx; separated view file; extended TextModel from ComponentModel --- js/adapt-contrib-text.js | 53 +++------------------------------------- js/textView.js | 50 +++++++++++++++++++++++++++++++++++++ templates/text.jsx | 4 +-- 3 files changed, 55 insertions(+), 52 deletions(-) create mode 100644 js/textView.js diff --git a/js/adapt-contrib-text.js b/js/adapt-contrib-text.js index aee8fcc..e2a5e37 100644 --- a/js/adapt-contrib-text.js +++ b/js/adapt-contrib-text.js @@ -1,55 +1,8 @@ import Adapt from 'core/js/adapt'; -import ComponentView from 'core/js/views/componentView'; -import ComponentModel from 'core/js/models/componentModel'; - -class TextView extends ComponentView { - - preRender() { - this.checkIfResetOnRevisit(); - } - - postRender() { - this.setReadyStatus(); - - this.setupInview(); - } - - setupInview() { - const selector = this.getInviewElementSelector(); - if (!selector) { - this.setCompletionStatus(); - return; - } - - this.setupInviewCompletion(selector); - } - - /** - * determines which element should be used for inview logic - body, instruction or title - and returns the selector for that element - */ - getInviewElementSelector() { - if (this.model.get('body')) return '.component__body'; - - if (this.model.get('instruction')) return '.component__instruction'; - - if (this.model.get('displayTitle')) return '.component__title'; - - return null; - } - - checkIfResetOnRevisit() { - const isResetOnRevisit = this.model.get('_isResetOnRevisit'); - - // If reset is enabled set defaults - if (isResetOnRevisit) { - this.model.reset(isResetOnRevisit); - } - } -} - -TextView.template = 'text.jsx'; +import TextView from './TextView'; +import ComponentModel from 'core/js/models/ComponentModel'; export default Adapt.register('text', { - model: ComponentModel, + model: class TextModel extends ComponentModel {}, view: TextView }); diff --git a/js/textView.js b/js/textView.js new file mode 100644 index 0000000..99e82e0 --- /dev/null +++ b/js/textView.js @@ -0,0 +1,50 @@ +import ComponentView from 'core/js/views/componentView'; + +class TextView extends ComponentView { + + preRender() { + this.checkIfResetOnRevisit(); + } + + postRender() { + this.setReadyStatus(); + + this.setupInview(); + } + + setupInview() { + const selector = this.getInviewElementSelector(); + if (!selector) { + this.setCompletionStatus(); + return; + } + + this.setupInviewCompletion(selector); + } + + /** + * determines which element should be used for inview logic - body, instruction or title - and returns the selector for that element + */ + getInviewElementSelector() { + if (this.model.get('body')) return '.component__body'; + + if (this.model.get('instruction')) return '.component__instruction'; + + if (this.model.get('displayTitle')) return '.component__title'; + + return null; + } + + checkIfResetOnRevisit() { + const isResetOnRevisit = this.model.get('_isResetOnRevisit'); + + // If reset is enabled set defaults + if (isResetOnRevisit) { + this.model.reset(isResetOnRevisit); + } + } +} + +TextView.template = 'text.jsx'; + +export default TextView; \ No newline at end of file diff --git a/templates/text.jsx b/templates/text.jsx index 985ca3d..aeaae7a 100644 --- a/templates/text.jsx +++ b/templates/text.jsx @@ -1,7 +1,7 @@ import { templates } from 'core/js/reactHelpers'; -export default function(view, model) { +export default function(model, view) { return
- {templates.component(view, model)} + {templates.component(model, view)}
; } From f990c2b0f39e091222039f46f350983228279295 Mon Sep 17 00:00:00 2001 From: Jennifer Eiss Date: Mon, 17 Aug 2020 17:05:37 +0100 Subject: [PATCH 3/7] Split model class definition into own file --- js/adapt-contrib-text.js | 4 ++-- js/textModel.js | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 js/textModel.js diff --git a/js/adapt-contrib-text.js b/js/adapt-contrib-text.js index e2a5e37..ffbcd1c 100644 --- a/js/adapt-contrib-text.js +++ b/js/adapt-contrib-text.js @@ -1,8 +1,8 @@ import Adapt from 'core/js/adapt'; import TextView from './TextView'; -import ComponentModel from 'core/js/models/ComponentModel'; +import TextModel from './TextModel'; export default Adapt.register('text', { - model: class TextModel extends ComponentModel {}, + model: TextModel, view: TextView }); diff --git a/js/textModel.js b/js/textModel.js new file mode 100644 index 0000000..717505b --- /dev/null +++ b/js/textModel.js @@ -0,0 +1,3 @@ +import ComponentModel from 'core/js/models/ComponentModel'; + +export default class TextModel extends ComponentModel {} From 76115d6565747f7f9e965d495f2fb91c4f2e55ab Mon Sep 17 00:00:00 2001 From: Jennifer Eiss Date: Mon, 17 Aug 2020 17:25:14 +0100 Subject: [PATCH 4/7] added newline end of textView --- js/textView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/textView.js b/js/textView.js index 99e82e0..6276ac1 100644 --- a/js/textView.js +++ b/js/textView.js @@ -47,4 +47,4 @@ class TextView extends ComponentView { TextView.template = 'text.jsx'; -export default TextView; \ No newline at end of file +export default TextView; From a1a717994b0cbc6300164083407cfdca12f07c02 Mon Sep 17 00:00:00 2001 From: Jennifer Eiss Date: Tue, 18 Aug 2020 11:23:23 +0100 Subject: [PATCH 5/7] Matched import statements capitalisation to filenames --- js/adapt-contrib-text.js | 4 ++-- js/textModel.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/js/adapt-contrib-text.js b/js/adapt-contrib-text.js index ffbcd1c..00a22f3 100644 --- a/js/adapt-contrib-text.js +++ b/js/adapt-contrib-text.js @@ -1,6 +1,6 @@ import Adapt from 'core/js/adapt'; -import TextView from './TextView'; -import TextModel from './TextModel'; +import TextView from './textView'; +import TextModel from './textModel'; export default Adapt.register('text', { model: TextModel, diff --git a/js/textModel.js b/js/textModel.js index 717505b..d431f9a 100644 --- a/js/textModel.js +++ b/js/textModel.js @@ -1,3 +1,3 @@ -import ComponentModel from 'core/js/models/ComponentModel'; +import ComponentModel from 'core/js/models/componentModel'; export default class TextModel extends ComponentModel {} From b7882a0af2c048db8ea4ba2cbf90719f985f5546 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Mon, 10 May 2021 13:38:03 +0100 Subject: [PATCH 6/7] issue/3105 Updated to react fixes --- js/textView.js | 22 +--------------------- templates/text.jsx | 5 +++-- 2 files changed, 4 insertions(+), 23 deletions(-) diff --git a/js/textView.js b/js/textView.js index 6276ac1..98a1161 100644 --- a/js/textView.js +++ b/js/textView.js @@ -2,23 +2,14 @@ import ComponentView from 'core/js/views/componentView'; class TextView extends ComponentView { - preRender() { - this.checkIfResetOnRevisit(); - } - postRender() { this.setReadyStatus(); - this.setupInview(); } setupInview() { const selector = this.getInviewElementSelector(); - if (!selector) { - this.setCompletionStatus(); - return; - } - + if (!selector) return this.setCompletionStatus(); this.setupInviewCompletion(selector); } @@ -27,22 +18,11 @@ class TextView extends ComponentView { */ getInviewElementSelector() { if (this.model.get('body')) return '.component__body'; - if (this.model.get('instruction')) return '.component__instruction'; - if (this.model.get('displayTitle')) return '.component__title'; - return null; } - checkIfResetOnRevisit() { - const isResetOnRevisit = this.model.get('_isResetOnRevisit'); - - // If reset is enabled set defaults - if (isResetOnRevisit) { - this.model.reset(isResetOnRevisit); - } - } } TextView.template = 'text.jsx'; diff --git a/templates/text.jsx b/templates/text.jsx index aeaae7a..5ee5ed9 100644 --- a/templates/text.jsx +++ b/templates/text.jsx @@ -1,7 +1,8 @@ +import React from 'react'; import { templates } from 'core/js/reactHelpers'; -export default function(model, view) { +export default function Text(props) { return
- {templates.component(model, view)} +
; } From 4fac2210d89356c977250f241f68914c38dc437d Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Thu, 26 Aug 2021 09:48:56 +0100 Subject: [PATCH 7/7] issue/2876 Suggestions --- js/{textModel.js => TextModel.js} | 0 js/{textView.js => TextView.js} | 0 js/adapt-contrib-text.js | 4 ++-- templates/text.jsx | 8 +++++--- 4 files changed, 7 insertions(+), 5 deletions(-) rename js/{textModel.js => TextModel.js} (100%) rename js/{textView.js => TextView.js} (100%) diff --git a/js/textModel.js b/js/TextModel.js similarity index 100% rename from js/textModel.js rename to js/TextModel.js diff --git a/js/textView.js b/js/TextView.js similarity index 100% rename from js/textView.js rename to js/TextView.js diff --git a/js/adapt-contrib-text.js b/js/adapt-contrib-text.js index 00a22f3..ffbcd1c 100644 --- a/js/adapt-contrib-text.js +++ b/js/adapt-contrib-text.js @@ -1,6 +1,6 @@ import Adapt from 'core/js/adapt'; -import TextView from './textView'; -import TextModel from './textModel'; +import TextView from './TextView'; +import TextModel from './TextModel'; export default Adapt.register('text', { model: TextModel, diff --git a/templates/text.jsx b/templates/text.jsx index 5ee5ed9..8c739c6 100644 --- a/templates/text.jsx +++ b/templates/text.jsx @@ -2,7 +2,9 @@ import React from 'react'; import { templates } from 'core/js/reactHelpers'; export default function Text(props) { - return
- -
; + return ( +
+ +
+ ); }