<div class="form-item form-item--fake">
    <label for="email-address" class="label">Email Address</label>
    <span class="input input--fake">
    johndoe@email.com
  </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": "email-address",
  "label": "Email Address",
  "value": "johndoe@email.com"
}
  • 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.