Copy environment

Cell Edit 

<div class="cell-edit js-cell-edit">
    <div class="cell-edit__inner">
        <button type="button" class="cell-edit__content js-cell-edit-cell">
            <span class="cell-edit__content-inner">
                <span class="cell-edit__text ">
                    +372 555 5555
                </span>
                <svg class="icon  cell-edit__icon" focusable="false">
                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#edit"></use>
                </svg>
            </span>
        </button>
        <div class="cell-edit__textfield-wrapper js-cell-edit-input">

            <div class="textfield cell-edit__textfield">
                <label class="textfield__label  h-visually-hidden" for="input1">
                    Textfield label
                </label>
                <div class="textfield__inner">
                    <input class="textfield__input" type="text" id="input1" name="textfield" value="+372 555 5555">
                </div>
            </div>
            <button type="button" class="cell-edit__button js-cell-edit-button">
                <span class="cell-edit__button-inner">
                    <span class="cell-edit__button-text">check</span>
                    <svg class="icon  cell-edit__button-icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                    </svg>
                </span>
            </button>
        </div>
    </div>
</div>
 
<div class="cell-edit js-cell-edit">
    <div class="cell-edit__inner">
        {% if data.text %}
            <button type="button" class="cell-edit__content js-cell-edit-cell">
                <span class="cell-edit__content-inner">
                        <span class="cell-edit__text ">
                            {{ data.text }}
                        </span>
                    {% include '@icon' with {
                        name: 'edit',
                        modifier: '',
                        class: 'cell-edit__icon'}
                    %}
                </span>
            </button>
        {% endif %}
        {% if data.textfield %}
            <div class="cell-edit__textfield-wrapper js-cell-edit-input">
                {% include '@textfield' with {
                    data: data.textfield|merge({ value: data.text }),
                    class: 'cell-edit__textfield',
                    modifier: ''
                } %}
                <button type="button" class="cell-edit__button js-cell-edit-button">
                    <span class="cell-edit__button-inner">
                        <span class="cell-edit__button-text">{{ data.buttonText }}</span>
                        {% include '@icon' with {
                            name: 'check',
                            modifier: '',
                            class: 'cell-edit__button-icon'}
                        %}
                    </span>
                </button>
            </div>
        {% endif %}
    </div>
</div>

{
  "language": "en-US",
  "data": {
    "text": "+372 555 5555",
    "textfield": {
      "label": "Textfield label",
      "id": "input1",
      "name": "textfield",
      "isLabelHidden": true
    },
    "buttonText": "check"
  }
}
  • Content: 
    .cell-edit {
    display: inline-block;
}

.cell-edit__inner {
    display: flex;
    align-items: center;
    position: relative;
}

.cell-edit__text {
    color: $L-text;
}

.cell-edit__content {
    position: relative;
    display: inline-block;
    background-color: transparent;
    border: none;
    border-radius: $border-radius-base;
    outline: none;
    padding: 0;
    margin-left: -8px;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    transition: background-color $transition-duration-s $transition-easing;

    &:hover {
        background-color: $L-border-table;
    }

    html[data-whatinput='keyboard'] &:focus {
        outline: 2px solid $L-filter-focus;
        outline-offset: 2px;
    }
}

.cell-edit__content-inner {
    display: flex;
    align-items: center;
    padding: 8px;
}

.cell-edit__icon {
    opacity: 1;
    margin-left: 16px;

    .cell-edit__content:hover & {
        opacity: 1;
    }

    @include bp(lg-min) {
        opacity: 0;
        margin-left: 8px;
    }
}

.cell-edit__textfield-wrapper {
    display: none;
    position: absolute;
    z-index: 1;
    align-items: center;
    top: 50%;
    margin-left: -16px;
    margin-right: -56px;
    max-width: 210px;
    min-width: 100%;
    transform: translateY(-50%);

    .cell-edit.is-editing & {
        display: flex;
    }
}

.textfield__input {
    .cell-edit__textfield & {
        padding: 9px 56px 9px 16px;
    }
}

.cell-edit__button {
    position: absolute;
    top: 50%;
    right: 8px;
    padding: 0;
    background-color: transparent;
    color: $brand-primary;
    border: none;
    outline: none;
    transform: translateY(-50%);
    -webkit-appearance: none;
    cursor: pointer;
}

.cell-edit__button-inner {
    display: flex;
    align-items: center;
    padding: 8px;
}

.cell-edit__button-icon {
    flex: 0 0 24px;
    font-size: 24px;
}

.cell-edit__button-text {
    @include visually-hidden;
}
  • URL: /components/raw/cell-edit/cell-edit.scss
  • Filesystem Path: src/patterns/components/cell-edit/cell-edit.scss
  • Size: 1.9 KB
  • Content: 
    import Component from '../component/component';

import './cell-edit.scss';

export interface ICellEditSettings {
    cellSelector?: string;
    inputSelector?: string;
}

export const profileSettings: ICellEditSettings = {
    cellSelector: '.js-cell-edit-cell',
    inputSelector: '.js-cell-edit-input',
};

export default class CellEdit extends Component {
    static initSelector: string = '.js-cell-edit';

    cells: JQuery<HTMLElement>;
    inputs: JQuery<HTMLElement>;
    textFields: JQuery<HTMLElement>;
    settings: ICellEditSettings;

    constructor(target: HTMLElement) {
        super(target);

        this.settings = profileSettings;

        this.cells = this.element.find(this.settings.cellSelector);
        this.inputs = this.element.find(this.settings.inputSelector);
        this.textFields = this.inputs.find('input[type=text]');

        this.cells.on('click', this.onCellClick.bind(this));
        this.inputs.find('.cell-edit__button').on('click', this.updateTextValue.bind(this));
        $(document).on('click', this.hide.bind(this));
    }

    onCellClick(): void {
        this.element.toggleClass('is-editing');

        if (this.element.hasClass('is-editing')) {
            this.textFields.trigger('focus');
        }
    }

    hide(event: Event): void {
        if ($(event.target).closest(this.element).length === 0) {
            this.element.removeClass('is-editing');
        }
    }

    updateTextValue(): void {
        const textValue: string = this.textFields.val().toString();
        const textElement: JQuery<HTMLElement> = this.cells.find('.cell-edit__text');

        textElement.text(textValue);

        this.element.removeClass('is-editing');
    }
}
  • URL: /components/raw/cell-edit/cell-edit.ts
  • Filesystem Path: src/patterns/components/cell-edit/cell-edit.ts
  • Size: 1.7 KB
  • Handle: @cell-edit--default
  • Filesystem Path: src/patterns/components/cell-edit/cell-edit.twig
  • References (2): @icon, @textfield