Skip to content

Instantly share code, notes, and snippets.

@hans2103

hans2103/rsform-preview.js

Last active December 19, 2022 12:51
Show Gist options
  • Save hans2103/f1c679bc41f9033a7da966d784912dd0 to your computer and use it in GitHub Desktop.
Save hans2103/f1c679bc41f9033a7da966d784912dd0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hans2103 revised this gist Nov 2, 2021. 2 changed files with 47 additions and 42 deletions.
    41 changes: 0 additions & 41 deletions form adjustments
    View file
    Original file line number Diff line number Diff line change
    @@ -1,41 +0,0 @@
    - edit Joomla Administrator > Components > RSForm! Pro > RSForm! Pro Multipage example

    # Adjust Fields
    - add new field
    - type = `Pagebreak`
    - name = `Page3`
    - add New Row after added PageBreak
    - move fields _Submit_ and _Footer_ to newly created row
    - add new field
    - type = `Free Text`
    - name = `previewForm`
    - HTML =
    ```
    <div id="previewForm">
    <h3>Header</h3>
    <dl id="previewFormHeader">
    </dl>
    <h3>Company</h3>
    <dl id="previewFormCopany">
    </dl>
    <h3>Contact</h3>
    <dl id="previewFormContact">
    </dl>
    </div>
    ```
    - move new field before `Submit`

    # Call to script
    - Form Properties > Scripts > PHP Scripts > Script called on form display
    - ```
    use Joomla\CMS\HTML\HTMLHelper;
    HTMLHelper::_('script', 'rsform-preview.js', ['version' => 'auto', 'relative' => true]);
    ```

    # Trigger the script
    - Form Properties > Scripts > PHP Scripts > Script called on form display
    - ```
    $formLayout = str_replace('rsfp_changePage(','previewBeforeSubmit(',$formLayout);
    ```

    note: this example does not cover the Date field yet
    48 changes: 47 additions & 1 deletion rsform-preview.js
    View file
    Original file line number Diff line number Diff line change
    @@ -256,4 +256,50 @@ function addRow(fieldLabel, fieldValues, elementId = 'reviewFormTrainer') {
    elementDD.innerHTML = fieldValue;
    DL.appendChild(elementDD);
    });
    }
    }


    /**
    *
    * - edit Joomla Administrator > Components > RSForm! Pro > RSForm! Pro Multipage example
    *
    * # Adjust Fields
    * - add new field
    * - type = `Pagebreak`
    * - name = `Page3`
    * - add New Row after added PageBreak
    * - move fields _Submit_ and _Footer_ to newly created row
    * - add new field
    * - type = `Free Text`
    * - name = `previewForm`
    * - HTML =
    * ```
    * <div id="previewForm">
    * <h3>Header</h3>
    * <dl id="previewFormHeader">
    * </dl>
    * <h3>Company</h3>
    * <dl id="previewFormCopany">
    * </dl>
    * <h3>Contact</h3>
    * <dl id="previewFormContact">
    * </dl>
    * </div>
    * ```
    * - move new field before `Submit`
    *
    * # Call to script
    * - Form Properties > Scripts > PHP Scripts > Script called on form display
    * - ```
    * use Joomla\CMS\HTML\HTMLHelper;
    * HTMLHelper::_('script', 'rsform-preview.js', ['version' => 'auto', 'relative' => true]);
    * ```
    *
    * # Trigger the script
    * - Form Properties > Scripts > PHP Scripts > Script called on form display
    * - ```
    * $formLayout = str_replace('rsfp_changePage(','previewBeforeSubmit(',$formLayout);
    * ```
    *
    * note: this example does not cover the Date field yet
    **/
  2. hans2103 revised this gist Nov 2, 2021. 2 changed files with 19 additions and 7 deletions.
    4 changes: 3 additions & 1 deletion form adjustments
    View file
    Original file line number Diff line number Diff line change
    @@ -36,4 +36,6 @@ HTMLHelper::_('script', 'rsform-preview.js', ['version' => 'auto', 'relative' =>
    - Form Properties > Scripts > PHP Scripts > Script called on form display
    - ```
    $formLayout = str_replace('rsfp_changePage(','previewBeforeSubmit(',$formLayout);
    ```
    ```

    note: this example does not cover the Date field yet
    22 changes: 16 additions & 6 deletions rsform-preview.js
    View file
    Original file line number Diff line number Diff line change
    @@ -29,7 +29,7 @@ function previewBeforeSubmit(formIdValue, previewPageNumber, totalPages, validat
    'previewFormContact':
    [
    'ContactBy',
    'ContactWhen'
    //'ContactWhen'
    ]
    };

    @@ -123,7 +123,7 @@ function getFieldLabel(id, type = '') {
    }

    // type = textarea, text
    const inputTypes = ['textarea', 'text', 'file', 'email', 'number'];
    const inputTypes = ['textarea', 'text', 'file', 'email', 'number', 'select'];
    if (inputTypes.indexOf(type) >= 0) {
    element = document.getElementById(id);
    }
    @@ -143,7 +143,7 @@ function getFieldLabel(id, type = '') {
    * @returns {*[]|number}
    */
    function getFieldValue(id, type = '') {
    // type = radio or checkbox
    // type = radio or checkbox
    if (type === 'radio' || type === 'checkbox') {
    let i;
    let elementName = `form[${id}]`;
    @@ -160,8 +160,18 @@ function getFieldValue(id, type = '') {

    return outputChoice;
    }

    // type = select
    if (type === 'select') {
    var outputSelect = [];
    var select = document.getElementById(id);

    outputSelect.push = select.options[select.selectedIndex].value;

    // type = file
    return outputSelect;
    }

    // type = file
    if (type === 'file') {
    var outputFile = [];
    var files = document.getElementById(id).files;
    @@ -173,7 +183,7 @@ function getFieldValue(id, type = '') {
    return outputFile;
    }

    // type = textarea, text, email, number
    // type = textarea, text, email, number
    var inputTypes = ['textarea', 'text', 'email', 'number'];
    if (inputTypes.indexOf(type) >= 0) {
    var output = [];
    @@ -235,7 +245,7 @@ function addRow(fieldLabel, fieldValues, elementId = 'reviewFormTrainer') {

    var DL = document.getElementById(elementId);

    // Cleanup field Label
    // Cleanup field Label
    fieldLabel = fieldLabel.replace('<strong class="formRequired">*</strong>', '');
    var elementDT = document.createElement('dt');
    elementDT.innerHTML = fieldLabel;
  3. hans2103 revised this gist Nov 2, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion rsform-preview.js
    View file
    Original file line number Diff line number Diff line change
    @@ -33,7 +33,7 @@ function previewBeforeSubmit(formIdValue, previewPageNumber, totalPages, validat
    ]
    };

    if (previewPageNumber === 4) {
    if (previewPageNumber === 3) {
    for (const key in blocks) {
    if (blocks.hasOwnProperty(key)) {
    const questions = blocks[key];
  4. hans2103 created this gist Nov 2, 2021.
    39 changes: 39 additions & 0 deletions form adjustments
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    - edit Joomla Administrator > Components > RSForm! Pro > RSForm! Pro Multipage example

    # Adjust Fields
    - add new field
    - type = `Pagebreak`
    - name = `Page3`
    - add New Row after added PageBreak
    - move fields _Submit_ and _Footer_ to newly created row
    - add new field
    - type = `Free Text`
    - name = `previewForm`
    - HTML =
    ```
    <div id="previewForm">
    <h3>Header</h3>
    <dl id="previewFormHeader">
    </dl>
    <h3>Company</h3>
    <dl id="previewFormCopany">
    </dl>
    <h3>Contact</h3>
    <dl id="previewFormContact">
    </dl>
    </div>
    ```
    - move new field before `Submit`

    # Call to script
    - Form Properties > Scripts > PHP Scripts > Script called on form display
    - ```
    use Joomla\CMS\HTML\HTMLHelper;
    HTMLHelper::_('script', 'rsform-preview.js', ['version' => 'auto', 'relative' => true]);
    ```

    # Trigger the script
    - Form Properties > Scripts > PHP Scripts > Script called on form display
    - ```
    $formLayout = str_replace('rsfp_changePage(','previewBeforeSubmit(',$formLayout);
    ```
    249 changes: 249 additions & 0 deletions rsform-preview.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,249 @@
    // Store this script in templates/<your-template>/js/rsform-preview.js

    /**
    * Create the Review Field based on array with questions
    *
    * @param formIdValue
    * @param previewPageNumber
    * @param totalPages
    * @param validateOnChangingPage
    */
    function previewBeforeSubmit(formIdValue, previewPageNumber, totalPages, validateOnChangingPage) {
    /**
    * Object with items to be filled on review
    * [key] should be present as a `<dl id=[key]></dl>` in form field with name = formReview
    * [value] is an array of items that should return in the review list
    * @type {{reviewFormTrainer: string[], reviewFormPractical: string[]}}
    */
    var blocks = {
    'previewFormHeader': [
    'FullName',
    'Email'
    ],
    'previewFormCompany':
    [
    'CompanySize',
    'Position'
    ]
    ,
    'previewFormContact':
    [
    'ContactBy',
    'ContactWhen'
    ]
    };

    if (previewPageNumber === 4) {
    for (const key in blocks) {
    if (blocks.hasOwnProperty(key)) {
    const questions = blocks[key];

    // Clean preview block
    document.getElementById(key).innerHTML = '';

    // Render Questions
    renderQuestions(key, questions);

    // Cleanup Block if empty
    cleanupEmptyBlock(key);
    }
    }
    }
    rsfp_changePage(formIdValue, previewPageNumber, totalPages, validateOnChangingPage);
    }

    /**
    * Check if given id is shown or not
    *
    * @param id
    * @returns {boolean}
    */
    function isShown(id) {
    var sanitizedId = id.replaceAll('_', '-')
    .replaceAll('--', '-')
    .toLowerCase();
    var elem = document.querySelector('.rsform-block-' + sanitizedId);

    if (!elem) {
    return false;
    }

    return (elem.style.display !== 'none');
    }

    /**
    * Return the field type of given id
    *
    * @param id
    * @returns {string|boolean}
    */
    function getFieldType(id) {
    var element = document.getElementById(id);
    if (!element) {
    element = document.getElementsByName(`form[${id}][]`);
    if (element.length > 0) {
    return 'checkbox';
    }

    element = document.getElementsByName(`form[${id}]`);
    if (element.length > 0) {
    return 'radio';
    }

    return false;
    }

    var tagName = element.tagName.toLowerCase();
    if (tagName !== 'input') {
    return tagName;
    }
    return element.getAttribute('type')
    .toLowerCase();
    }

    /**
    * Return the field label of given id
    *
    * @param id
    * @param type
    * @returns {string}
    */
    function getFieldLabel(id, type = '') {
    let element = '';

    // type = radio or checkbox
    if (type === 'radio' || type === 'checkbox') {
    let elementName = `form[${id}]`;

    if (type === 'checkbox') {
    elementName += '[]';
    }

    element = document.getElementsByName(elementName)[0];
    }

    // type = textarea, text
    const inputTypes = ['textarea', 'text', 'file', 'email', 'number'];
    if (inputTypes.indexOf(type) >= 0) {
    element = document.getElementById(id);
    }

    if (!element) {
    return '';
    }

    return element.closest('.rsform-block').firstElementChild.textContent;
    }

    /**
    * Return the field value of given id
    *
    * @param id
    * @param type
    * @returns {*[]|number}
    */
    function getFieldValue(id, type = '') {
    // type = radio or checkbox
    if (type === 'radio' || type === 'checkbox') {
    let i;
    let elementName = `form[${id}]`;
    let outputChoice = [];
    if (type === 'checkbox') {
    elementName += '[]';
    }

    for (i = 0; i < document.getElementsByName(elementName).length; i++) {
    if (document.getElementById(id + i).checked) {
    outputChoice.push(document.getElementById(id + i).value);
    }
    }

    return outputChoice;
    }

    // type = file
    if (type === 'file') {
    var outputFile = [];
    var files = document.getElementById(id).files;

    for (var k = 0; k < files.length; k++) {
    outputFile.push(files[k].name);
    }

    return outputFile;
    }

    // type = textarea, text, email, number
    var inputTypes = ['textarea', 'text', 'email', 'number'];
    if (inputTypes.indexOf(type) >= 0) {
    var output = [];
    output.push(document.getElementById(id).value);

    return output;
    }

    return [];
    }

    /**
    *
    * @param id
    * @param questions
    */
    function renderQuestions(id, questions) {
    questions.forEach(function (question) {
    if (isShown(question)) {
    addRow(
    getFieldLabel(question, getFieldType(question)),
    getFieldValue(question, getFieldType(question)),
    id
    );
    }
    });
    }

    /**
    * Hide Title and Block when the latter is empty
    *
    * @param id
    */
    function cleanupEmptyBlock(id) {
    var element = document.getElementById(id);
    if (!element) {
    return;
    }

    if (element.innerHTML !== '') {
    return;
    }

    element.previousElementSibling.style.display = 'none';
    element.style.display = 'none';
    }

    /**
    * Add new row to definition list
    *
    * @param fieldLabel string
    * @param fieldValues array
    * @param elementId string
    */
    function addRow(fieldLabel, fieldValues, elementId = 'reviewFormTrainer') {
    if (Array.isArray(fieldValues) && !fieldValues.length) {
    return;
    }

    var DL = document.getElementById(elementId);

    // Cleanup field Label
    fieldLabel = fieldLabel.replace('<strong class="formRequired">*</strong>', '');
    var elementDT = document.createElement('dt');
    elementDT.innerHTML = fieldLabel;
    DL.appendChild(elementDT);

    fieldValues.forEach(function (fieldValue) {
    var elementDD = document.createElement('dd');
    elementDD.innerHTML = fieldValue;
    DL.appendChild(elementDD);
    });
    }