<div class="customize js-customize customize--rimless customize--rimless-shapes">
    <div class="customize__options">
        <div class="customize__option js-customize-option">
            <div class="customize__option-label">
                Rectangle
                <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                <div class="tooltip">Pellentesque viverra in nibh ut consectetur.</div>
            </div>
            <ul class="customize__items">
                <li class="customize__item">
                    <div class="form-item form-item--radio">
                        <input type="radio" id="mjo2001" value="mjo2001" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2001-140" data-frame-style="mjo2001-140" data-frame="Matte Black - mockdata2001" data-lens="Clear  - mockdata2001" data-material="MauiPure - The lightest weight choice for long days in the sun.  - mockdata2001">
                        <label for="mjo2001">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2001.svg">
    <span class="radio__label-text u-visually-hidden">MJO2001</span>
  </label>
                    </div>

                </li>
                <li class="customize__item">
                    <div class="form-item form-item--radio">
                        <input type="radio" id="mjo2007" value="mjo2007" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2007-140" data-frame-style="mjo2007-140" data-frame="Matte Black - mockdata2007" data-lens="Clear - mockdata2007" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2007">
                        <label for="mjo2007">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2007.svg">
    <span class="radio__label-text u-visually-hidden">MJO2007</span>
  </label>
                    </div>

                </li>
                <li class="customize__item">
                    <div class="form-item form-item--radio">
                        <input type="radio" id="mjo2008" value="mjo2008" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2008-140" data-frame-style="mjo2008-140" data-frame="Matte Black - mockdata2008" data-lens="Clear - mockdata2008" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2008">
                        <label for="mjo2008">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2008.svg">
    <span class="radio__label-text u-visually-hidden">MJO2008</span>
  </label>
                    </div>

                </li>
                <li class="customize__item">
                    <div class="form-item form-item--radio">
                        <input type="radio" id="mjo2009" value="mjo2009" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2009-140" data-frame-style="mjo2009-140" data-frame="Matte Black - mockdata2009" data-lens="Clear - mockdata2009" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2009">
                        <label for="mjo2009">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2009.svg">
    <span class="radio__label-text u-visually-hidden">MJO2009</span>
  </label>
                    </div>

                </li>
                <li class="customize__item">
                    <div class="form-item form-item--radio">
                        <input type="radio" id="mjo2010" value="mjo2010" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2010-140" data-frame-style="mjo2010-140" data-frame="Matte Black - mockdata2010" data-lens="Clear - mockdata2010" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2010"
                            checked="true">
                        <label for="mjo2010">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2010.svg">
    <span class="radio__label-text u-visually-hidden">MJO2010</span>
  </label>
                    </div>

                </li>
            </ul>
        </div>
        <div class="customize__option js-customize-option">
            <div class="customize__option-label">
                Oval
                <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                <div class="tooltip">Morbi semper sed elit eu tempus.</div>
            </div>
            <ul class="customize__items">
                <li class="customize__item">
                    <div class="form-item form-item--radio">
                        <input type="radio" id="mjo2002" value="mjo2002" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2002-140" data-frame-style="mjo2002-140" data-frame="Matte Black - mockdata2002" data-lens="Clear - mockdata2002" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2002">
                        <label for="mjo2002">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2002.svg">
    <span class="radio__label-text u-visually-hidden">MJO2002</span>
  </label>
                    </div>

                </li>
                <li class="customize__item">
                    <div class="form-item form-item--radio">
                        <input type="radio" id="mjo2003" value="mjo2003" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2003-140" data-frame-style="mjo2003-140" data-frame="Matte Black - mockdata2003" data-lens="Clear - mockdata2003" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2003">
                        <label for="mjo2003">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2003.svg">
    <span class="radio__label-text u-visually-hidden">MJO2003</span>
  </label>
                    </div>

                </li>
                <li class="customize__item">
                    <div class="form-item form-item--radio">
                        <input type="radio" id="mjo2004" value="mjo2004" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2004-140" data-frame-style="mjo2004-140" data-frame="Matte Black - mockdata2004" data-lens="Clear - mockdata2004" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2004">
                        <label for="mjo2004">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2004.svg">
    <span class="radio__label-text u-visually-hidden">MJO2004</span>
  </label>
                    </div>

                </li>
            </ul>
        </div>
        <div class="customize__option js-customize-option">
            <div class="customize__option-label">
                Round
                <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                <div class="tooltip">Maecenas blandit ex nec nunc condimentum facilisis.</div>
            </div>
            <ul class="customize__items">
                <li class="customize__item">
                    <div class="form-item form-item--radio">
                        <input type="radio" id="mjo2005" value="mjo2005" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2005-140" data-frame-style="mjo2005-140" data-frame="Matte Black - mockdata2005" data-lens="Clear - mockdata2005" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2005">
                        <label for="mjo2005">
    <img class="radio__image" src="/assets/images/silhouettes/round/mjo2005.svg">
    <span class="radio__label-text u-visually-hidden">MJO2005</span>
  </label>
                    </div>

                </li>
            </ul>
        </div>
        <div class="customize__option js-customize-option">
            <div class="customize__option-label">
                Square
                <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                <div class="tooltip">Quisque pellentesque malesuada eros.</div>
            </div>
            <ul class="customize__items">
                <li class="customize__item">
                    <div class="form-item form-item--radio">
                        <input type="radio" id="mjo2006" value="mjo2006" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2006-140" data-frame-style="mjo2006-140" data-frame="Matte Black - mockdata2006" data-lens="Clear - mockdata2006" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2006">
                        <label for="mjo2006">
    <img class="radio__image" src="/assets/images/silhouettes/square/mjo2006.svg">
    <span class="radio__label-text u-visually-hidden">MJO2006</span>
  </label>
                    </div>

                </li>
            </ul>
        </div>
    </div>
</div>
<div class="customize js-customize customize--{{modifier}} customize--{{_self.name}}">
  <div class="customize__options">
    {{#each options}}
    <div class="customize__option{{#each modifiers}} customize__option--{{this}}{{/each}} js-customize-option">
      <div class="customize__option-label">
        {{label}}{{#if valueInLabel}}: <span class="customize__option-value js-customize-option-value">{{#each items}}{{#if context.checked}}{{context.label}}{{/if}}{{/each}}</span>{{/if}}
        {{#if tooltip}}
        <button class="customize__tooltip-trigger js-tooltip-open-link">
          {{render '@icons--question-mark-circle'}}
        </button>
        {{> @tooltip tooltip}}
        {{/if}}
      </div>
      <ul class="customize__items{{#if disabled}} js-customize-disabled{{/if}}">
        {{#each items}}
        <li class="customize__item{{#if disabled}} js-customize-disabled{{/if}}">
          {{#if input}}
          {{render (dynamicVariant component variant) context}}
          {{/if}}
          {{#if options}}
          <div class="select-wrapper">
            <select id="{{id}}" name="{{name}}" class="select js-select">
              {{#each options}}
              <option value="{{@key}}">{{this}}</option>
              {{/each}}
            </select>
          </div>
          {{/if}}
        </li>
        {{/each}}
      </ul>
    </div>
    {{/each}}
    {{#if customizeOptions}}
    <div class="customize__options-help">
      {{#each customizeOptions}}
      {{render (dynamicComponent component) context}}
      {{/each}}
    </div>
    {{/if}}
  </div>
</div>
{
  "pageCss": [
    "products"
  ],
  "modifier": "rimless",
  "options": [
    {
      "name": "rectangle",
      "label": "Rectangle",
      "valueInLabel": null,
      "tooltip": {
        "value": "Pellentesque viverra in nibh ut consectetur."
      },
      "items": [
        {
          "input": true,
          "component": "radio",
          "variant": "image",
          "context": {
            "id": "mjo2001",
            "name": "frame-style",
            "value": "mjo2001",
            "image": "/assets/images/silhouettes/rectangular/mjo2001.svg",
            "modifier": "image",
            "label": "MJO2001",
            "checked": null,
            "dataAttributes": [
              {
                "name": "value",
                "value": "MJO2001-140"
              },
              {
                "name": "frame-style",
                "value": "mjo2001-140"
              },
              {
                "name": "frame",
                "value": "Matte Black - mockdata2001"
              },
              {
                "name": "lens",
                "value": "Clear  - mockdata2001"
              },
              {
                "name": "material",
                "value": "MauiPure - The lightest weight choice for long days in the sun.  - mockdata2001"
              }
            ],
            "inputClasses": [
              "js-customize-item-input"
            ],
            "labelTextClasses": [
              "u-visually-hidden"
            ]
          }
        },
        {
          "input": true,
          "component": "radio",
          "variant": "image",
          "context": {
            "id": "mjo2007",
            "name": "frame-style",
            "value": "mjo2007",
            "image": "/assets/images/silhouettes/rectangular/mjo2007.svg",
            "modifier": "image",
            "label": "MJO2007",
            "checked": null,
            "dataAttributes": [
              {
                "name": "value",
                "value": "MJO2007-140"
              },
              {
                "name": "frame-style",
                "value": "mjo2007-140"
              },
              {
                "name": "frame",
                "value": "Matte Black - mockdata2007"
              },
              {
                "name": "lens",
                "value": "Clear - mockdata2007"
              },
              {
                "name": "material",
                "value": "MauiPure - The lightest weight choice for long days in the sun. - mockdata2007"
              }
            ],
            "inputClasses": [
              "js-customize-item-input"
            ],
            "labelTextClasses": [
              "u-visually-hidden"
            ]
          }
        },
        {
          "input": true,
          "component": "radio",
          "variant": "image",
          "context": {
            "id": "mjo2008",
            "name": "frame-style",
            "value": "mjo2008",
            "image": "/assets/images/silhouettes/rectangular/mjo2008.svg",
            "modifier": "image",
            "label": "MJO2008",
            "checked": null,
            "dataAttributes": [
              {
                "name": "value",
                "value": "MJO2008-140"
              },
              {
                "name": "frame-style",
                "value": "mjo2008-140"
              },
              {
                "name": "frame",
                "value": "Matte Black - mockdata2008"
              },
              {
                "name": "lens",
                "value": "Clear - mockdata2008"
              },
              {
                "name": "material",
                "value": "MauiPure - The lightest weight choice for long days in the sun. - mockdata2008"
              }
            ],
            "inputClasses": [
              "js-customize-item-input"
            ],
            "labelTextClasses": [
              "u-visually-hidden"
            ]
          }
        },
        {
          "input": true,
          "component": "radio",
          "variant": "image",
          "context": {
            "id": "mjo2009",
            "name": "frame-style",
            "value": "mjo2009",
            "image": "/assets/images/silhouettes/rectangular/mjo2009.svg",
            "modifier": "image",
            "label": "MJO2009",
            "checked": null,
            "dataAttributes": [
              {
                "name": "value",
                "value": "MJO2009-140"
              },
              {
                "name": "frame-style",
                "value": "mjo2009-140"
              },
              {
                "name": "frame",
                "value": "Matte Black - mockdata2009"
              },
              {
                "name": "lens",
                "value": "Clear - mockdata2009"
              },
              {
                "name": "material",
                "value": "MauiPure - The lightest weight choice for long days in the sun. - mockdata2009"
              }
            ],
            "inputClasses": [
              "js-customize-item-input"
            ],
            "labelTextClasses": [
              "u-visually-hidden"
            ]
          }
        },
        {
          "input": true,
          "component": "radio",
          "variant": "image",
          "context": {
            "id": "mjo2010",
            "name": "frame-style",
            "value": "mjo2010",
            "image": "/assets/images/silhouettes/rectangular/mjo2010.svg",
            "modifier": "image",
            "label": "MJO2010",
            "checked": true,
            "dataAttributes": [
              {
                "name": "value",
                "value": "MJO2010-140"
              },
              {
                "name": "frame-style",
                "value": "mjo2010-140"
              },
              {
                "name": "frame",
                "value": "Matte Black - mockdata2010"
              },
              {
                "name": "lens",
                "value": "Clear - mockdata2010"
              },
              {
                "name": "material",
                "value": "MauiPure - The lightest weight choice for long days in the sun. - mockdata2010"
              }
            ],
            "inputClasses": [
              "js-customize-item-input"
            ],
            "labelTextClasses": [
              "u-visually-hidden"
            ]
          }
        }
      ]
    },
    {
      "name": "oval",
      "label": "Oval",
      "valueInLabel": null,
      "tooltip": {
        "value": "Morbi semper sed elit eu tempus."
      },
      "items": [
        {
          "input": true,
          "component": "radio",
          "variant": "image",
          "context": {
            "id": "mjo2002",
            "name": "frame-style",
            "value": "mjo2002",
            "image": "/assets/images/silhouettes/oval/mjo2002.svg",
            "modifier": "image",
            "label": "MJO2002",
            "checked": null,
            "dataAttributes": [
              {
                "name": "value",
                "value": "MJO2002-140"
              },
              {
                "name": "frame-style",
                "value": "mjo2002-140"
              },
              {
                "name": "frame",
                "value": "Matte Black - mockdata2002"
              },
              {
                "name": "lens",
                "value": "Clear - mockdata2002"
              },
              {
                "name": "material",
                "value": "MauiPure - The lightest weight choice for long days in the sun. - mockdata2002"
              }
            ],
            "inputClasses": [
              "js-customize-item-input"
            ],
            "labelTextClasses": [
              "u-visually-hidden"
            ]
          }
        },
        {
          "input": true,
          "component": "radio",
          "variant": "image",
          "context": {
            "id": "mjo2003",
            "name": "frame-style",
            "value": "mjo2003",
            "image": "/assets/images/silhouettes/oval/mjo2003.svg",
            "modifier": "image",
            "label": "MJO2003",
            "checked": null,
            "dataAttributes": [
              {
                "name": "value",
                "value": "MJO2003-140"
              },
              {
                "name": "frame-style",
                "value": "mjo2003-140"
              },
              {
                "name": "frame",
                "value": "Matte Black - mockdata2003"
              },
              {
                "name": "lens",
                "value": "Clear - mockdata2003"
              },
              {
                "name": "material",
                "value": "MauiPure - The lightest weight choice for long days in the sun. - mockdata2003"
              }
            ],
            "inputClasses": [
              "js-customize-item-input"
            ],
            "labelTextClasses": [
              "u-visually-hidden"
            ]
          }
        },
        {
          "input": true,
          "component": "radio",
          "variant": "image",
          "context": {
            "id": "mjo2004",
            "name": "frame-style",
            "value": "mjo2004",
            "image": "/assets/images/silhouettes/oval/mjo2004.svg",
            "modifier": "image",
            "label": "MJO2004",
            "checked": null,
            "dataAttributes": [
              {
                "name": "value",
                "value": "MJO2004-140"
              },
              {
                "name": "frame-style",
                "value": "mjo2004-140"
              },
              {
                "name": "frame",
                "value": "Matte Black - mockdata2004"
              },
              {
                "name": "lens",
                "value": "Clear - mockdata2004"
              },
              {
                "name": "material",
                "value": "MauiPure - The lightest weight choice for long days in the sun. - mockdata2004"
              }
            ],
            "inputClasses": [
              "js-customize-item-input"
            ],
            "labelTextClasses": [
              "u-visually-hidden"
            ]
          }
        }
      ]
    },
    {
      "name": "round",
      "label": "Round",
      "valueInLabel": null,
      "tooltip": {
        "value": "Maecenas blandit ex nec nunc condimentum facilisis."
      },
      "items": [
        {
          "input": true,
          "component": "radio",
          "variant": "image",
          "context": {
            "id": "mjo2005",
            "name": "frame-style",
            "value": "mjo2005",
            "image": "/assets/images/silhouettes/round/mjo2005.svg",
            "modifier": "image",
            "label": "MJO2005",
            "checked": null,
            "dataAttributes": [
              {
                "name": "value",
                "value": "MJO2005-140"
              },
              {
                "name": "frame-style",
                "value": "mjo2005-140"
              },
              {
                "name": "frame",
                "value": "Matte Black - mockdata2005"
              },
              {
                "name": "lens",
                "value": "Clear - mockdata2005"
              },
              {
                "name": "material",
                "value": "MauiPure - The lightest weight choice for long days in the sun. - mockdata2005"
              }
            ],
            "inputClasses": [
              "js-customize-item-input"
            ],
            "labelTextClasses": [
              "u-visually-hidden"
            ]
          }
        }
      ]
    },
    {
      "name": "square",
      "label": "Square",
      "valueInLabel": null,
      "tooltip": {
        "value": "Quisque pellentesque malesuada eros."
      },
      "items": [
        {
          "input": true,
          "component": "radio",
          "variant": "image",
          "context": {
            "id": "mjo2006",
            "name": "frame-style",
            "value": "mjo2006",
            "image": "/assets/images/silhouettes/square/mjo2006.svg",
            "modifier": "image",
            "label": "MJO2006",
            "checked": null,
            "dataAttributes": [
              {
                "name": "value",
                "value": "MJO2006-140"
              },
              {
                "name": "frame-style",
                "value": "mjo2006-140"
              },
              {
                "name": "frame",
                "value": "Matte Black - mockdata2006"
              },
              {
                "name": "lens",
                "value": "Clear - mockdata2006"
              },
              {
                "name": "material",
                "value": "MauiPure - The lightest weight choice for long days in the sun. - mockdata2006"
              }
            ],
            "inputClasses": [
              "js-customize-item-input"
            ],
            "labelTextClasses": [
              "u-visually-hidden"
            ]
          }
        }
      ]
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      function camelCase(string) {
        return string.replace(/-([a-z])/g, (original, match) => (match[0].toUpperCase()));
      }
    
      function getElementData(el) {
        const attributes = [...el.attributes];
        const data = {};
    
        for (let i = 0; i < attributes.length; i++) {
          if (/^data-/.test(attributes[i].name)) {
            data[camelCase(attributes[i].name)] = attributes[i].value;
          }
        }
    
        return data;
      }
    
      function handleInputChange(e) {
        const input = e.target;
        const option = input.closest('.js-mymaui-customize-option, .js-customize-option');
    
        if (option) {
          const optionValue = option.querySelector('.js-mymaui-customize-option-value, .js-customize-option-value');
          const inputValue = input.getAttribute('data-value');
    
          if (optionValue && inputValue) {
            optionValue.innerText = inputValue;
          }
        }
      }
    
      // Note that this function is not sophisticated enough to cope with e.g. TWO
      // completely separate customization components on one page.
      //
      // Currently, there is only one multi-customization configuration, namely
      // the Rimless Optical products where the user must select both Shape and
      // Color.
      //
      // The function is meant to satisfy the requirements of that specific config
      // AND single-configuration situations only.
      function customizationsNotify(e) {
        const selections = document.querySelectorAll('.js-customize input[type=radio]:checked');
        const customizations = {};
        const rimless = document.querySelector('.js-customize.customize--rimless');
        const clipon = document.querySelector('.js-customize.customize--core-clip-on');
    
    
        for (let i = 0; i < selections.length; i++) {
          const data = getElementData(selections[i]);
    
          if (data.hasOwnProperty('dataFrameColor') && selections.length > 1) {
            delete data.dataValue;
          }
    
          Object.assign(customizations, data);
        }
    
        if (rimless) {
          customizations.dataFrameStyle = customizations.dataFrameStyle.replace(/-[a-z0-9]+$/i, '')
          customizations.rimless = true;
        }
    
        if (clipon) {
          customizations.clipon = true;
        }
    
        componentEvents.emitEvent('customization-options-notify', [customizations]);
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-mymaui-customize, .js-customize');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            const instance = instances[i];
            const inputs = instance.querySelectorAll('.js-mymaui-customize-item-input, .js-customize-item-input');
    
            for (let i = 0; i < inputs.length; i++) {
              inputs[i].addEventListener('change', handleInputChange);
    
              if (inputs[i].type === 'radio') {
                inputs[i].addEventListener('click', customizationsNotify);
              }
            }
    
            // Prevent an instance from being initialized more than once.
            instance.classList.add('js-component-init');
          }
        }
    
        // Establish the current state of customizations on page load.
        window.addEventListener('load', customizationsNotify);
      }
    
      // 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/customize/customize.js
  • Filesystem Path: src/components/02-components/customize/customize.js
  • Size: 3.3 KB
  • Content:
    .customize,
    .mymaui-customize {
      position: relative;
    
      &:before {
        position: absolute;
        right: $gutter-width-half;
        bottom: 0;
        left: $gutter-width-half;
        width: calc(100% - 20px);
        border-bottom: 1px solid $color-light;
        content: '';
        z-index: 1;
      }
    
      @include breakpoint($breakpoint-xl) {
        &:before {
          content: none;
        }
      }
    }
    
    .customize__options,
    .mymaui-customize__options {
      padding: 0 20px;
      border-top: 1px solid $color-lighter;
    
      @include breakpoint($breakpoint-xl) {
        padding: 0;
        border: 0;
      }
    }
    
    .mymaui-customize__options {
      padding-bottom: 30px;
    }
    
    .customize__option,
    .mymaui-customize__option {
      @include clearfix;
    
      &:last-child {
        .tooltip {
          top: auto;
          right: 25px;
          bottom: -5px;
        }
    
        .tooltip::before {
          top: auto;
          bottom: 5px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        &:last-child {
          .tooltip {
            bottom: 0;
          }
        }
      }
    }
    
    .customize__option-label,
    .mymaui-customize__option-label {
      position: relative;
      margin: 20px 0 5px;
      color: $color-dark;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: normal;
      line-height: 1.7rem;
    
      .tooltip {
        display: none;
        position: absolute;
        top: -10px;
        right: 25px;
    
        &:before {
          top: 5px;
          right: -5px;
          left: auto;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-left: 5px solid #0db287;
          border-right-style: none;
        }
      }
    
      .js-tooltip--open {
        display: block;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .customize__tooltip-trigger,
    .mymaui-customize__tooltip-trigger {
      position: absolute;
      right: 0;
      margin: 0;
      padding: 0;
      border-style: none;
      background: transparent;
      cursor: pointer;
      fill: $color-medium-dark;
    
      @include breakpoint($breakpoint-xl) {
        top: 5px;
      }
    }
    
    .customize__option-value,
    .mymaui-customize__option-value {
      font-weight: $font-weight-normal;
    }
    
    .customize__items,
    .mymaui-customize__items {
      @include reset-list;
    }
    
    .customize__item,
    .mymaui-customize__item {
      margin-right: 10px;
      float: left;
    
      .customize__option--select &,
      .mymaui-customize__option--select & {
        width: 100%;
      }
    
      .customize__option--label &,
      .mymaui-customize__option--label & {
        width: 50%;
        margin: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        margin-right: 40px;
    
        .customize__option--select &,
        .mymaui-customize__option--select & {
          width: 50%;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-right: 30px;
    
        .customize__option--select &,
        .mymaui-customize__option--select & {
          width: 100%;
        }
      }
    }
    
    .radio + .mymaui-customize__item-label {
      height: 40px;
      line-height: 40px;
    
      &:before {
        top: 7px;
        left: 7px;
        width: 26px;
        height: 26px;
      }
    
      &:after {
        width: 40px;
        height: 40px;
        border-width: 3px;
      }
    
      .customize__option--square &,
      .mymaui-customize__option--square & {
        &:before,
        &:after {
          border-radius: 0;
        }
      }
    
      .customize__option--label &,
      .mymaui-customize__option--label & {
        padding-left: 50px;
      }
    
      @include breakpoint($breakpoint-md) {
        height: 60px;
        line-height: 60px;
    
        &:before {
          top: 10px;
          left: 10px;
          width: 40px;
          height: 40px;
        }
    
        &:after {
          width: 60px;
          height: 60px;
        }
    
        .customize__option--label &,
        .mymaui-customize__option--label & {
          padding-left: 70px;
        }
      }
    }
    
    .radio:checked + .customize__item-label,
    .radio:checked + .mymaui-customize__item-label {
      font-weight: $font-weight-bold;
    }
    
    .mymaui-customize__item-alternate-fill {
      position: absolute;
      top: 7px;
      left: 7px;
      width: 26px;
      height: 26px;
      z-index: 1;
      box-sizing: border-box;
    
      .customize__option--round &,
      .mymaui-customize__option--round & {
        border-radius: 50%;
      }
    
      @include breakpoint($breakpoint-md) {
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
      }
    }
    
    .js-customize-disabled {
      display: none;
    }
    
    .customize__option-value {
      font-weight: $font-weight-normal;
    }
    
    .customize__items {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
    }
    
    .customize__item {
      flex: 0 0 85px;
      margin: 0 15px 15px 0;
      list-style-type: none;
    
      .form-item--radio {
        margin: 0;
      }
    
      .radio__image {
        margin: 0;
      }
    
      @include breakpoint($breakpoint-lg) {
        flex: 0 0 100px;
      }
    }
    
    .customize__options-help {
      margin-top: 35px;
      padding-bottom: 20px;
    
      .paragraph {
        font-size: 1.4rem;
        line-height: 2.0rem;
      }
    }
    
    .customize__option {
      .customize__items {
        margin-top: 15px;
      }
    
      .customize__item {
        flex: 0 0 30px;
        margin-right: 15px;
    
        @include breakpoint($breakpoint-md) {
          flex: 0 0 60px;
          margin-right: 20px;
        }
      }
    
      .customize__item-label {
        width: 30px;
        height: 30px;
        padding-left: 0;
    
        @include breakpoint($breakpoint-md) {
          width: 60px;
          height: 60px;
        }
      }
    
      .radio--alternate ~ label {
        &:before {
          display: none;
        }
    
        &:after {
          @include breakpoint($breakpoint-md) {
            width: 60px;
            height: 60px;
            border-width: 3px;
          }
        }
    
        .radio__alternate-fill {
          @include breakpoint($breakpoint-md) {
            top: 10px;
            left: 10px;
            width: 40px;
            height: 40px;
          }
        }
      }
    
      .radio--alternate:not(:checked) ~ label {
        .radio__alternate-fill {
          opacity: 1;
        }
      }
    }
    
    // Note:
    //
    // .customize__option--round has no special styles because:
    //
    // a) The radio--alternate-fill variant itself is round, and
    // b) Customizations of size etc for this context are common to round and
    //    square (so found in .customize__option).
    .customize__option--square {
      .radio--alternate ~ label {
        &:after,
        .radio__alternate-fill {
          border-radius: 0;
        }
      }
    }
    
    .customize__option--switch {
      border-top: 1px solid $color-light;
    
      .customize__items {
        display: block;
      }
    
      .customize__item {
        display: block;
        width: 100%;
        margin-right: 0;
      }
    }
    
    .customize--core-clip-on {
      .customize__option--square {
        margin-bottom: 25px;
      }
    
      .customize__items {
        margin-top: 5px;
      }
    }
    
    .customize--rimless {
      .customize__item {
        flex: 0 0 83px;
        margin: 0 $gutter-width-half $gutter-width-half 0;
    
        @include breakpoint($breakpoint-md) {
          flex: 0 0 100px;
        }
      }
    
      .radio__image {
        width: 55px;
        padding: 14px 12px;
    
        @include breakpoint($breakpoint-md) {
          width: 80px;
          padding: 19px 8px;
        }
      }
    
      .radio__image--narrow {
        width: 75px;
        padding: 3px 2px;
    
        @include breakpoint($breakpoint-md) {
          width: 92px;
        }
      }
    }
    
    .customize--rimless-colors {
      .customize__option-label {
        display: none;
    
        @include breakpoint($breakpoint-lg) {
          display: block;
        }
      }
    }
    
  • URL: /components/raw/customize/customize.scss
  • Filesystem Path: src/components/02-components/customize/customize.scss
  • Size: 6.9 KB

Customize Events

The Customize component emits an event, customization-options-notify, on the load of a page containing the component, and subsequently, each time one of the component’s child radio buttons is clicked.

Various other components listen for this type of event and modify their own internal states or that of other elements in the dom.

The event should contain an object with the following properties:

  • dataFrameStyle: that part of the product sku designating the frame, e.g. MJO2001. Specified by the value attribute of a radio with the name attribute set to lens-shape.
  • dataFrameColor: that part of the product sku designating the color, e.g. 30. Specified by the value attribute of a radiowith thenameattribute set toframe-color`.
  • dataValue: the name of the frame, as used in e.g. the Product Detail component. Specified by the data-value attribute of a radio.

The event object could also contain the following property:

  • dataTempleLength: that part of the product sku containing the temple length.

These properties will be combined using the @product-detail component’s data-sku-form attribute.