+ *
+ *
+ *
+ *
+ *
+ *
+ * Accordion Body #1
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * Accordion Body #2
*
- *
- *
- * This is test section A.
- *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * Accordion Body #3
*
*
+ *
*
+ *
+ *
+ *
*/
-$(() => {
- $('body').on('click', '.accordion-controls a', (e) => {
- e.preventDefault();
- const currentTarget = $(e.currentTarget);
- const target = $(e.target);
- const direction = target.attr('data-toggle-direction');
- const parentTargetName = currentTarget.parent().attr('data-parent');
- if (direction) {
- // Selects all .panel elements where the parent is currentTarget.attr('data-parent') and
- // after gets the immediately children whose class selector is panel-collapse
- const parentTarget = $(`#${parentTargetName}`).length ? $(`#${parentTargetName}`) : $(`.${parentTargetName}`);
- $(parentTarget).find('.panel').find('.panel-collapse').each((i, el) => {
- const panelCollapse = $(el);
- // Expands or collapses the panel according to the
- // direction passed (e.g. show --> expands, hide --> collapses)
- if (direction === 'show') {
- if (!panelCollapse.find('.panel-body').attr('data-loaded') || !panelCollapse.hasClass('in')) {
- panelCollapse.prev()[0].click();
- }
- } else {
- panelCollapse.collapse(direction);
+
+$(() => $('body').on('click', '.accordion-controls a[data-toggle-direction]', (e) => {
+ e.preventDefault();
+ const currentTarget = $(e.currentTarget);
+ const target = $(e.target);
+ const direction = target.attr('data-toggle-direction');
+ const parentTargetName = currentTarget.parent().attr('data-parent');
+
+ if (direction) {
+ // Selects all .accordion-item elements where the parent is
+ // currentTarget.attr('data-parent') and
+ // after gets the immediate children whose class selector is accordion-item
+ const parentTarget = $(`#${parentTargetName}`).length ? $(`#${parentTargetName}`) : $(`.${parentTargetName}`);
+ parentTarget.children('.accordion-item').each((i, el) => {
+ // We use $() to get Jquery HTML element from native Dom element
+ const accordionItem = $(el);
+ // Not these are Jquery HTML elements, again using $()
+ const accordionHeader = $(accordionItem.children('.accordion-header').get(0));
+ const accordionButton = $(accordionHeader.children('.accordion-button').get(0));
+ const accordionCollapse = $(accordionItem.children('.accordion-collapse').get(0));
+ // Expands or collapses according to the
+ // direction passed (e.g. show --> expands, hide --> collapses)
+ if (direction === 'show') {
+ // To check if element with class .accordion-body has attribute data-loaded
+ // we use the native Dom element so we can use hasAttribute()
+ // and getAttribute() methods.
+ const accordionBodyNativeDomEl = accordionCollapse.children('.accordion-body').get(0);
+ if (accordionBodyNativeDomEl.hasAttribute('data-loaded')
+ && accordionBodyNativeDomEl.getAttribute('data-loaded') === 'false') {
+ // We need the native om element of the button to
+ // to trigger click as the jquery trigger('click')
+ // does not work for rails-ujs
+ const accordionButtonNativeDomEl = accordionHeader.children('.accordion-button').get(0);
+ accordionButtonNativeDomEl.click();
}
- // Sets icon at panel-title accordingly
- panelCollapse.prev().find('i.fa')
- .removeClass('fa-plus fa-minus').addClass(direction === 'show' ? 'fa-minus' : 'fa-plus');
- });
- }
- });
-});
+ accordionButton.removeClass('collapsed');
+ accordionCollapse.addClass('show');
+ }
+
+ if (direction === 'hide') {
+ accordionButton.addClass('collapsed');
+ accordionCollapse.removeClass('show');
+ }
+ });
+ }
+}));
diff --git a/app/javascript/src/utils/modalSearch.js b/app/javascript/src/utils/modalSearch.js
index 2bc8bf1888..eca1eca6fe 100644
--- a/app/javascript/src/utils/modalSearch.js
+++ b/app/javascript/src/utils/modalSearch.js
@@ -16,8 +16,8 @@ $(() => {
if (selectionsBlock.length > 0) {
const clone = selectedBlock.clone();
- clone.find('.modal-search-result-selector').addClass('hidden');
- clone.find('.modal-search-result-unselector').removeClass('hidden');
+ clone.find('.modal-search-result-selector').addClass('d-none');
+ clone.find('.modal-search-result-unselector').removeClass('d-none');
clone.find('.tags').remove();
selectionsBlock.append(clone);
selectedBlock.remove();
diff --git a/app/javascript/src/utils/popoverHelper.js b/app/javascript/src/utils/popoverHelper.js
deleted file mode 100644
index 68770bb450..0000000000
--- a/app/javascript/src/utils/popoverHelper.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import 'bootstrap/js/popover';
-
-$(() => {
- $('[data-toggle="popover"]').popover({
- animated: 'fade',
- placement: 'right',
- });
-});
diff --git a/app/javascript/src/utils/requiredField.js b/app/javascript/src/utils/requiredField.js
index 6bb826a509..6b4995e65a 100644
--- a/app/javascript/src/utils/requiredField.js
+++ b/app/javascript/src/utils/requiredField.js
@@ -17,7 +17,7 @@ export const addAsterisk = (el) => {
// Else place the asterisk before the corresponding label
} else {
- const label = target.closest('.form-group').find('label');
+ const label = target.prev();
if (isObject(label)) {
$(label[0]).before(asterisk);
}
diff --git a/app/javascript/src/utils/sectionUpdate.js b/app/javascript/src/utils/sectionUpdate.js
index d31ce3331a..a6bec9c0df 100644
--- a/app/javascript/src/utils/sectionUpdate.js
+++ b/app/javascript/src/utils/sectionUpdate.js
@@ -2,19 +2,24 @@
export const updateSectionProgress = (id, numSecAnswers, numSecQuestions) => {
const progressDiv = $(`#section-panel-${id}`).find('.section-status');
progressDiv.html(`(${numSecAnswers} / ${numSecQuestions})`);
- const heading = progressDiv.closest('.panel-heading');
+
+ /**
+ // THIS CODE MAY BE OBSOLETE.
+ // RETAINING IT TILL SURE.
+ const heading = progressDiv.closest('.card-heading');
if (numSecQuestions === 0) { // disable section if empty
if (heading.parent().attr('aria-expanded') === 'true') {
heading.parent().trigger('click');
}
heading.addClass('empty-section');
- heading.closest('.panel').find(`#collapse-${id}`).hide();
- heading.closest('.panel').find('i.fa-plus, i.fa-minus').removeClass('fa-plus').removeClass('fa-minus');
+ heading.closest('.card').find(`#collapse-${id}`).hide();
+ heading.closest('.card').find('i.fa-plus, i.fa-minus').removeClass('fa-plus').removeClass('fa-minus');
} else if (heading.hasClass('empty-section')) { // enable section if questions re-added
heading.removeClass('empty-section');
- heading.closest('.panel').find('i[aria-hidden="true"]').addClass('fa-plus');
- heading.closest('.panel').find(`#collapse-${id}`).css('display', '');
+ heading.closest('.card').find('i[aria-hidden="true"]').addClass('fa-plus');
+ heading.closest('.card').find(`#collapse-${id}`).css('display', '');
}
+ */
};
// given a question id find the containing div
diff --git a/app/javascript/src/utils/spinner.js b/app/javascript/src/utils/spinner.js
index 9298e9f009..6102b10c76 100644
--- a/app/javascript/src/utils/spinner.js
+++ b/app/javascript/src/utils/spinner.js
@@ -5,9 +5,9 @@ const toggleSpinner = (visible) => {
if (spinnerBlock.length > 0) {
if (visible) {
- spinnerBlock.removeClass('hidden');
+ spinnerBlock.removeClass('d-none');
} else {
- spinnerBlock.addClass('hidden');
+ spinnerBlock.addClass('d-none');
}
}
};
diff --git a/app/javascript/src/utils/tinymce.js b/app/javascript/src/utils/tinymce.js
index 3c7eb73c47..de778da215 100644
--- a/app/javascript/src/utils/tinymce.js
+++ b/app/javascript/src/utils/tinymce.js
@@ -16,6 +16,7 @@ import 'tinymce/plugins/lists';
import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/link';
import 'tinymce/plugins/advlist';
+import 'tinymce/plugins/autolink';
// Other dependencies
import { isObject, isString, isUndefined } from './isType';
@@ -27,7 +28,7 @@ export const defaultOptions = {
statusbar: true,
menubar: false,
toolbar: 'bold italic | bullist numlist | link | table',
- plugins: 'table autoresize link advlist lists',
+ plugins: 'table autoresize link advlist lists autolink',
browser_spellcheck: true,
advlist_bullet_styles: 'circle,disc,square', // Only disc bullets display on htmltoword
target_list: false,
@@ -37,7 +38,7 @@ export const defaultOptions = {
autoresize_bottom_margin: 10,
branding: false,
extended_valid_elements: 'iframe[tooltip] , a[href|target=_blank]',
- paste_as_text: true,
+ paste_as_text: false,
paste_block_drop: true,
paste_merge_formats: true,
paste_tab_spaces: 4,
diff --git a/app/javascript/src/utils/tooltipHelper.js b/app/javascript/src/utils/tooltipHelper.js
index f67edd2192..cfcfae0a08 100644
--- a/app/javascript/src/utils/tooltipHelper.js
+++ b/app/javascript/src/utils/tooltipHelper.js
@@ -1,8 +1,6 @@
-import 'bootstrap/js/tooltip';
-
$(() => {
// When using a tooltip on a tinymce textarea, add the HTML attributes for the tooltips to
- // the parent `