<div class="form-item form-item--fake js-modal-form-item">
    <label for="fullname" class="label">Full Name</label>
    <span class="input input--fake-editable">
    <span data-value-id="fullname-first-name">John</span>
    <span data-value-id="fullname-last-name">Doe</span>

    <button class="button button--plain-text js-modal-open-link js-modal-form-item-edit-button" data-modal-id="fullname-edit" formnovalidate>Edit</button>

    </span>
</div>
<div class="form-item form-item--fake{{#if editButton}} js-modal-form-item{{/if}}">
  {{> @label value=label}}
  <span class="input input--fake{{#if editButton}}-editable{{/if}}">
    {{#each editableValues}}
    <span data-value-id="{{@key}}">{{{this}}}</span>
    {{/each}}
    {{{value}}}
    {{#if editButton}}
    {{render '@buttons--plain-text' editButton}}
    {{/if}}
  </span>
</div>
{
  "id": "fullname",
  "editableValues": {
    "fullname-first-name": "John",
    "fullname-last-name": "Doe"
  },
  "label": "Full Name",
  "editButton": {
    "modifier": "plain-text",
    "buttonValue": "Edit",
    "buttonModal": "fullname-edit",
    "noValidate": true,
    "classes": [
      "js-modal-form-item-edit-button"
    ]
  },
  "pageModals": [
    {
      "component": "form-modal",
      "context": {
        "id": "fullname-edit",
        "title": "Edit Full Name",
        "form": "fullname-edit",
        "formContext": {
          "columns": 1
        }
      }
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      function handleModalFormEdit(e) {
        const button = e.target;
        const instance = button.closest('.js-modal-form-item');
        const modal = document.getElementById(button.getAttribute('data-modal-id'));
    
        // A modal must exist with an id matching the button's `data-modal-id`.
        if (modal) {
          const instanceId = instance.querySelector('label').getAttribute('for');
          const instanceIdField = modal.querySelector('[id$="-modal-form-item-id"]');
          const modalFields = modal.querySelectorAll('input, select');
    
          // The item label's `for` attribute value on the element is used to
          // populate a hidden field within the modal form. That field must have an
          // id with the suffix `-modal-form-item-id`. This value can then be used
          // on form submission to determine which item was updated/submitted.
          if (instanceId && instanceIdField) {
            instanceIdField.value = instanceId;
          }
    
          for (let i = 0; i < modalFields.length; i++) {
            // To prepopulate a field within the modal form, an element within the
            // `.js-modal-form-item` element must have a `data-value-id` attribute
            // value that matches the id of the field to prepopulate.
            const modalFieldData = instance.querySelector(`[data-value-id="${modalFields[i].id}"]`);
    
            if (modalFieldData) {
              // If an element has a `data-value-value` attribute value, it will be
              // used to prepopluate the form item. This is useful for select
              // elements whose keys differ from the displayed value. If the element
              // doesn't have that attribute, it's displayed data is used instead.
              if (modalFieldData.getAttribute('data-value-value')) {
                modalFields[i].value = modalFieldData.getAttribute('data-value-value');
              }
              else {
                modalFields[i].value = modalFieldData.innerText;
              }
            }
            else {
              // Empty the field because there was no matching data.
              modalFields[i].value = '';
            }
    
            // Changing a field value with JS won't trigger the events that using a
            // keyboard does, so trigger them manually for any JS that is listening.
            triggerNativeEvent(modalFields[i], (modalFields[i].nodeName == 'SELECT') ? 'change' : 'input');
          }
        }
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-modal-form-item');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            const formButton = instances[i].querySelector('.js-modal-form-item-edit-button');
    
            if (formButton) {
              formButton.addEventListener('click', handleModalFormEdit);
            }
    
            instances[i].classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/input-fake/input-fake.js
  • Filesystem Path: src/components/01-elements/form-items/input-fake/input-fake.js
  • Size: 3 KB
  • Content:
    .form-item--fake {
      .input--fake,
      .input--fake-editable {
        min-height: 0;
        padding: 0;
        border-width: 0 0 1px;
        border-color: $color-light;
        color: $color-medium-dark;
        font-size: 1.4rem;
        line-height: 1.7rem;
    
        @include breakpoint($breakpoint-xl) {
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
      }
    
      .input--fake-editable {
        color: $color-dark;
      }
    
      .button {
        min-width: 0;
        padding: 0;
        float: right;
        color: $color-darkest;
        font-weight: normal;
        line-height: inherit;
        text-decoration: none;
        text-transform: none;
      }
    }
    
  • URL: /components/raw/input-fake/input-fake.scss
  • Filesystem Path: src/components/01-elements/form-items/input-fake/input-fake.scss
  • Size: 596 Bytes

There are no notes for this item.