From 10f80709c25eeedc2d1dc53c2bf175a5a5cccf92 Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Fri, 8 Jan 2021 12:20:57 +0530 Subject: [PATCH 01/11] FEATURE: text length counter for text type fields --- assets/javascripts/wizard/helpers/char-counter.js.es6 | 9 +++++++++ .../wizard/templates/components/wizard-field.hbs | 4 ++++ assets/stylesheets/wizard/custom/base.scss | 4 ++++ config/locales/client.en.yml | 2 ++ 4 files changed, 19 insertions(+) create mode 100644 assets/javascripts/wizard/helpers/char-counter.js.es6 diff --git a/assets/javascripts/wizard/helpers/char-counter.js.es6 b/assets/javascripts/wizard/helpers/char-counter.js.es6 new file mode 100644 index 00000000..98778a36 --- /dev/null +++ b/assets/javascripts/wizard/helpers/char-counter.js.es6 @@ -0,0 +1,9 @@ +import { registerUnbound } from "discourse-common/lib/helpers"; +import I18n from "I18n"; + +export default registerUnbound("char-counter", function(body) { + let bodyLength = body ? body.length : 0; + let characterString = bodyLength == 1 ? 'wizard.character' : 'wizard.characters'; + let finalString = `
${bodyLength} ${ I18n.t(characterString)}
`; + return new Handlebars.SafeString(finalString); +}); \ No newline at end of file diff --git a/assets/javascripts/wizard/templates/components/wizard-field.hbs b/assets/javascripts/wizard/templates/components/wizard-field.hbs index c8c785b0..3a75c200 100644 --- a/assets/javascripts/wizard/templates/components/wizard-field.hbs +++ b/assets/javascripts/wizard/templates/components/wizard-field.hbs @@ -16,6 +16,10 @@ {{/if}} +{{#if textType}} + {{char-counter field.value}} +{{/if}} + {{#if field.errorDescription}}
{{{field.errorDescription}}}
{{/if}} diff --git a/assets/stylesheets/wizard/custom/base.scss b/assets/stylesheets/wizard/custom/base.scss index 1e4023d5..791ec94a 100644 --- a/assets/stylesheets/wizard/custom/base.scss +++ b/assets/stylesheets/wizard/custom/base.scss @@ -80,3 +80,7 @@ textarea { } } +.body-length { + text-align: right; + font-weight: bold; +} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index be138d48..de60aca9 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -469,6 +469,8 @@ en: requires_login: "You need to be logged in to access this wizard." reset: "Reset this wizard." step_not_permitted: "You're not permitted to view this step." + characters: "Characters" + character: "Character" wizard_composer: show_preview: "Preview Post" From ea5b4202536b8c4940db8a32a80e0653c98dac9c Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Fri, 8 Jan 2021 12:24:51 +0530 Subject: [PATCH 02/11] code formatting --- assets/javascripts/wizard/helpers/char-counter.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/javascripts/wizard/helpers/char-counter.js.es6 b/assets/javascripts/wizard/helpers/char-counter.js.es6 index 98778a36..b488d409 100644 --- a/assets/javascripts/wizard/helpers/char-counter.js.es6 +++ b/assets/javascripts/wizard/helpers/char-counter.js.es6 @@ -6,4 +6,4 @@ export default registerUnbound("char-counter", function(body) { let characterString = bodyLength == 1 ? 'wizard.character' : 'wizard.characters'; let finalString = `
${bodyLength} ${ I18n.t(characterString)}
`; return new Handlebars.SafeString(finalString); -}); \ No newline at end of file +}); From 25021edd82207059038c594c02398fc7a2de8a21 Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Fri, 8 Jan 2021 12:42:58 +0530 Subject: [PATCH 03/11] added a computed property --- .../wizard/initializers/custom-wizard-field.js.es6 | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 b/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 index 75327413..7202432e 100644 --- a/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 +++ b/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 @@ -15,6 +15,10 @@ export default { FieldComponent.reopen({ classNameBindings: ["field.id"], + textType: function() { + return ['text', 'textarea', 'composer'].includes(this.get('field.type')); + }.property("field.type"), + cookedDescription: function () { return cook(this.get("field.description")); }.property("field.description"), From ba029c797367002daffc927359400d42c0ca7300 Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Tue, 12 Jan 2021 13:03:20 +0530 Subject: [PATCH 04/11] Renamed computed property --- .../javascripts/discourse/components/wizard-custom-field.js.es6 | 2 +- .../discourse/templates/components/wizard-custom-field.hbs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/javascripts/discourse/components/wizard-custom-field.js.es6 b/assets/javascripts/discourse/components/wizard-custom-field.js.es6 index b17464d4..97f003df 100644 --- a/assets/javascripts/discourse/components/wizard-custom-field.js.es6 +++ b/assets/javascripts/discourse/components/wizard-custom-field.js.es6 @@ -21,7 +21,7 @@ export default Component.extend(UndoChanges, { showPrefill: or('isText', 'isCategory', 'isTag', 'isGroup', 'isDropdown'), showContent: or('isCategory', 'isTag', 'isGroup', 'isDropdown'), showLimit: or('isCategory', 'isTag'), - showLengthControls: or('isText', 'isTextarea', 'isComposer'), + isTextType: or('isText', 'isTextarea', 'isComposer'), categoryPropertyTypes: selectKitContent(['id', 'slug']), showAdvanced: alias('field.type'), messageUrl: 'https://thepavilion.io/t/2809', diff --git a/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs b/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs index 2792fdc5..464a201b 100644 --- a/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs +++ b/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs @@ -70,7 +70,7 @@ url=messageUrl component='field'}} -{{#if showLengthControls}} +{{#if isTextType}}
From 57b51c297268bcfbf3aeaedaa508a3d110bc39da Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Tue, 12 Jan 2021 16:16:24 +0530 Subject: [PATCH 05/11] Added a wizard setting to toggle displaying character counter --- .../templates/components/wizard-custom-field.hbs | 13 +++++++++++++ .../wizard/templates/components/wizard-field.hbs | 6 ++++-- config/locales/client.en.yml | 2 ++ controllers/custom_wizard/admin/wizard.rb | 1 + extensions/wizard_field.rb | 2 ++ lib/custom_wizard/builder.rb | 1 + lib/custom_wizard/field.rb | 7 +++++-- .../custom_wizard/wizard_field_serializer.rb | 7 ++++++- 8 files changed, 34 insertions(+), 5 deletions(-) diff --git a/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs b/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs index 464a201b..563ab716 100644 --- a/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs +++ b/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs @@ -98,6 +98,19 @@ class="small"}}
+ +
+
+ +
+ +
+ {{i18n 'admin.wizard.field.char_counter_placeholder'}} + {{input + type="checkbox" + checked=field.char_counter}} +
+
{{/if}} {{#if isUpload}} diff --git a/assets/javascripts/wizard/templates/components/wizard-field.hbs b/assets/javascripts/wizard/templates/components/wizard-field.hbs index 3a75c200..86e209c2 100644 --- a/assets/javascripts/wizard/templates/components/wizard-field.hbs +++ b/assets/javascripts/wizard/templates/components/wizard-field.hbs @@ -16,8 +16,10 @@ {{/if}} -{{#if textType}} - {{char-counter field.value}} +{{#if field.char_counter}} + {{#if textType}} + {{char-counter field.value}} + {{/if}} {{/if}} {{#if field.errorDescription}} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index de60aca9..fef9c870 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -166,6 +166,8 @@ en: min_length_placeholder: "Minimum length in characters" max_length: "Max Length" max_length_placeholder: "Maximum length in characters" + char_counter: "Character Counter" + char_counter_placeholder: "Display Character Counter" file_types: "File Types" limit: "Limit" property: "Property" diff --git a/controllers/custom_wizard/admin/wizard.rb b/controllers/custom_wizard/admin/wizard.rb index a9a01035..9859f115 100644 --- a/controllers/custom_wizard/admin/wizard.rb +++ b/controllers/custom_wizard/admin/wizard.rb @@ -98,6 +98,7 @@ class CustomWizard::AdminWizardController < CustomWizard::AdminController :type, :min_length, :max_length, + :char_counter, :file_types, :format, :limit, diff --git a/extensions/wizard_field.rb b/extensions/wizard_field.rb index 9fd8d6d1..49744fa7 100644 --- a/extensions/wizard_field.rb +++ b/extensions/wizard_field.rb @@ -6,6 +6,7 @@ module CustomWizardFieldExtension :key, :min_length, :max_length, + :char_counter, :file_types, :format, :limit, @@ -20,6 +21,7 @@ module CustomWizardFieldExtension @key = attrs[:key] @min_length = attrs[:min_length] @max_length = attrs[:max_length] + @char_counter = attrs[:char_counter] @file_types = attrs[:file_types] @format = attrs[:format] @limit = attrs[:limit] diff --git a/lib/custom_wizard/builder.rb b/lib/custom_wizard/builder.rb index d7d5a517..035490a6 100644 --- a/lib/custom_wizard/builder.rb +++ b/lib/custom_wizard/builder.rb @@ -159,6 +159,7 @@ class CustomWizard::Builder params[:key] = field_template['key'] if field_template['key'] params[:min_length] = field_template['min_length'] if field_template['min_length'] params[:max_length] = field_template['max_length'] if field_template['max_length'] + params[:char_counter] = field_template['char_counter'] if field_template['char_counter'] params[:value] = prefill_field(field_template, step_template) if !build_opts[:reset] && (submission = @wizard.current_submission) diff --git a/lib/custom_wizard/field.rb b/lib/custom_wizard/field.rb index 53a8b5da..0c19b321 100644 --- a/lib/custom_wizard/field.rb +++ b/lib/custom_wizard/field.rb @@ -4,16 +4,19 @@ class CustomWizard::Field text: { min_length: nil, max_length: nil, - prefill: nil + prefill: nil, + char_counter: nil }, textarea: { min_length: nil, max_length: nil, - prefill: nil + prefill: nil, + char_counter: nil }, composer: { min_length: nil, max_length: nil, + char_counter: nil }, text_only: {}, date: { diff --git a/serializers/custom_wizard/wizard_field_serializer.rb b/serializers/custom_wizard/wizard_field_serializer.rb index c331dda2..829a7fa9 100644 --- a/serializers/custom_wizard/wizard_field_serializer.rb +++ b/serializers/custom_wizard/wizard_field_serializer.rb @@ -7,7 +7,8 @@ class CustomWizard::FieldSerializer < ::WizardFieldSerializer :format, :limit, :property, - :content + :content, + :char_counter def label return object.label if object.label.present? @@ -54,4 +55,8 @@ class CustomWizard::FieldSerializer < ::WizardFieldSerializer def include_choices? object.choices.present? end + + def char_counter + object.char_counter + end end \ No newline at end of file From b2cdc1c29e9b44654001454c72b298b5c7d1009b Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Sat, 16 Jan 2021 17:27:38 +0530 Subject: [PATCH 06/11] REFACTOR: used new syntax for computed property --- .../wizard/initializers/custom-wizard-field.js.es6 | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 b/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 index 7202432e..a520f5dd 100644 --- a/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 +++ b/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 @@ -1,4 +1,5 @@ import { dasherize } from "@ember/string"; +import discourseComputed from "discourse-common/utils/decorators"; export default { name: "custom-wizard-field", @@ -15,9 +16,10 @@ export default { FieldComponent.reopen({ classNameBindings: ["field.id"], - textType: function() { - return ['text', 'textarea', 'composer'].includes(this.get('field.type')); - }.property("field.type"), + @discourseComputed("field.type") + textType(fieldType) { + return ['text', 'textarea', 'composer'].includes(fieldType); + }, cookedDescription: function () { return cook(this.get("field.description")); From 4f70aea729132684d85a6efdba223f5d683db538 Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Sat, 16 Jan 2021 17:34:37 +0530 Subject: [PATCH 07/11] character count should be regular text --- assets/stylesheets/wizard/custom/base.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/stylesheets/wizard/custom/base.scss b/assets/stylesheets/wizard/custom/base.scss index 791ec94a..c9f3b120 100644 --- a/assets/stylesheets/wizard/custom/base.scss +++ b/assets/stylesheets/wizard/custom/base.scss @@ -82,5 +82,4 @@ textarea { .body-length { text-align: right; - font-weight: bold; } From f27ca60d24d698243787d99074ffcd5b382312d0 Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Tue, 19 Jan 2021 12:17:07 +0530 Subject: [PATCH 08/11] updated char counter logic --- .../javascripts/wizard/helpers/char-counter.js.es6 | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/assets/javascripts/wizard/helpers/char-counter.js.es6 b/assets/javascripts/wizard/helpers/char-counter.js.es6 index b488d409..4cc12463 100644 --- a/assets/javascripts/wizard/helpers/char-counter.js.es6 +++ b/assets/javascripts/wizard/helpers/char-counter.js.es6 @@ -1,9 +1,16 @@ import { registerUnbound } from "discourse-common/lib/helpers"; import I18n from "I18n"; -export default registerUnbound("char-counter", function(body) { +export default registerUnbound("char-counter", function(body, maxLength) { let bodyLength = body ? body.length : 0; - let characterString = bodyLength == 1 ? 'wizard.character' : 'wizard.characters'; - let finalString = `
${bodyLength} ${ I18n.t(characterString)}
`; + let length = maxLength || bodyLength; + let characterString = length == 1 ? 'wizard.character' : 'wizard.characters'; + let finalString; + + if(maxLength) { + finalString = `
${bodyLength} / ${maxLength} ${ I18n.t(characterString)}
`; + } else { + finalString = `
${bodyLength} ${ I18n.t(characterString)}
`; + } return new Handlebars.SafeString(finalString); }); From 5f121215d5fec4890eea238e02e99fb506d4ba56 Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Tue, 19 Jan 2021 12:17:54 +0530 Subject: [PATCH 09/11] serialize max length attribute for wizard fields --- serializers/custom_wizard/wizard_field_serializer.rb | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/serializers/custom_wizard/wizard_field_serializer.rb b/serializers/custom_wizard/wizard_field_serializer.rb index 829a7fa9..2fb8b514 100644 --- a/serializers/custom_wizard/wizard_field_serializer.rb +++ b/serializers/custom_wizard/wizard_field_serializer.rb @@ -8,6 +8,7 @@ class CustomWizard::FieldSerializer < ::WizardFieldSerializer :limit, :property, :content, + :max_length, :char_counter def label @@ -56,6 +57,10 @@ class CustomWizard::FieldSerializer < ::WizardFieldSerializer object.choices.present? end + def max_length + object.max_length + end + def char_counter object.char_counter end From 36094d70d6d8121fb66dd2286201b1ed0170270c Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Tue, 19 Jan 2021 12:21:37 +0530 Subject: [PATCH 10/11] fixed formatting for composer field type --- .../wizard/initializers/custom-wizard-field.js.es6 | 2 +- .../templates/components/wizard-field-composer.hbs | 8 +++++++- .../wizard/templates/components/wizard-field.hbs | 2 +- assets/stylesheets/wizard/custom/composer.scss | 11 +++++++---- 4 files changed, 16 insertions(+), 7 deletions(-) diff --git a/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 b/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 index a520f5dd..efeaaefd 100644 --- a/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 +++ b/assets/javascripts/wizard/initializers/custom-wizard-field.js.es6 @@ -18,7 +18,7 @@ export default { @discourseComputed("field.type") textType(fieldType) { - return ['text', 'textarea', 'composer'].includes(fieldType); + return ['text', 'textarea'].includes(fieldType); }, cookedDescription: function () { diff --git a/assets/javascripts/wizard/templates/components/wizard-field-composer.hbs b/assets/javascripts/wizard/templates/components/wizard-field-composer.hbs index 1fe2bde6..3160d9fb 100644 --- a/assets/javascripts/wizard/templates/components/wizard-field-composer.hbs +++ b/assets/javascripts/wizard/templates/components/wizard-field-composer.hbs @@ -7,6 +7,12 @@ togglePreview=(action "togglePreview") afterRefresh=(action "afterRefresh")}} +
\ No newline at end of file + + +{{#if field.char_counter}} + {{char-counter field.value field.max_length}} +{{/if}} +
diff --git a/assets/javascripts/wizard/templates/components/wizard-field.hbs b/assets/javascripts/wizard/templates/components/wizard-field.hbs index 86e209c2..5f524e92 100644 --- a/assets/javascripts/wizard/templates/components/wizard-field.hbs +++ b/assets/javascripts/wizard/templates/components/wizard-field.hbs @@ -18,7 +18,7 @@ {{#if field.char_counter}} {{#if textType}} - {{char-counter field.value}} + {{char-counter field.value field.max_length}} {{/if}} {{/if}} diff --git a/assets/stylesheets/wizard/custom/composer.scss b/assets/stylesheets/wizard/custom/composer.scss index c360e76a..d747bfcb 100644 --- a/assets/stylesheets/wizard/custom/composer.scss +++ b/assets/stylesheets/wizard/custom/composer.scss @@ -50,10 +50,6 @@ display: none; } -.custom-wizard .wizard-field-composer .toggle-preview { - margin-top: 20px; -} - .d-editor-textarea-wrapper, .d-editor-preview-wrapper { background-color: var(--secondary); @@ -230,3 +226,10 @@ bottom: -40px; right: 0; } + +.bottom-bar { + display: flex; + justify-content:space-between; + margin-top: 20px; + align-items: center; +} From 7bc7c4013eb2fa4facb2c4588c2a40450b008fa1 Mon Sep 17 00:00:00 2001 From: Faizaan Gagan Date: Wed, 20 Jan 2021 14:22:52 +0530 Subject: [PATCH 11/11] simplified pluralization logic --- assets/javascripts/wizard/helpers/char-counter.js.es6 | 9 ++++----- config/locales/client.en.yml | 5 +++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/assets/javascripts/wizard/helpers/char-counter.js.es6 b/assets/javascripts/wizard/helpers/char-counter.js.es6 index 4cc12463..c27c0818 100644 --- a/assets/javascripts/wizard/helpers/char-counter.js.es6 +++ b/assets/javascripts/wizard/helpers/char-counter.js.es6 @@ -3,14 +3,13 @@ import I18n from "I18n"; export default registerUnbound("char-counter", function(body, maxLength) { let bodyLength = body ? body.length : 0; - let length = maxLength || bodyLength; - let characterString = length == 1 ? 'wizard.character' : 'wizard.characters'; let finalString; - if(maxLength) { - finalString = `
${bodyLength} / ${maxLength} ${ I18n.t(characterString)}
`; + if (maxLength) { + finalString = `
${bodyLength} / ${I18n.t('wizard.x_characters', { count: parseInt(maxLength) })}
`; } else { - finalString = `
${bodyLength} ${ I18n.t(characterString)}
`; + finalString = `
${I18n.t('wizard.x_characters', { count: parseInt(bodyLength) })}
`; } + return new Handlebars.SafeString(finalString); }); diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index fef9c870..28304120 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -471,8 +471,9 @@ en: requires_login: "You need to be logged in to access this wizard." reset: "Reset this wizard." step_not_permitted: "You're not permitted to view this step." - characters: "Characters" - character: "Character" + x_characters: + one: "%{count} Character" + other: "%{count} Characters" wizard_composer: show_preview: "Preview Post"