Vebego Component Library

Company Overview 

<div class="tpl-company-overview">
    <div class="vebego-container">
        <div class="mol-title title-underline">
            <span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>

        </div>

        <div class="company-hightlights">
            <div>
                <div class="mol-company">
                    <div>
                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/290/130" alt="">
                        </picture>
                    </div>
                    <div>
                        <a class="atm-button atm-button-primary  button-md no-icon  ">
                            <div class="button-content-wrapper">
                                <span class="button-content">
                                    <span>Button</span>
                                    <i class="atm-icon  fal fa-arrow-right   "></i>

                                </span>
                            </div>
                            <span class="button-triangle"></span>
                        </a>

                    </div>
                </div>
            </div>
            <div>
                <div class="mol-company">
                    <div>
                        <picture class="atm-image ">
                            <img class="" src="https://picsum.photos/290/130" alt="">
                        </picture>
                    </div>
                    <div>
                        <a class="atm-button atm-button-primary  button-md no-icon  ">
                            <div class="button-content-wrapper">
                                <span class="button-content">
                                    <span>Button</span>
                                    <i class="atm-icon  fal fa-arrow-right   "></i>

                                </span>
                            </div>
                            <span class="button-triangle"></span>
                        </a>

                    </div>
                </div>
            </div>
        </div>
        <div class="company-list">
            <div class="left">
                <div class="mol-title title-underline">
                    <span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>

                </div>

                <div class="company-list-wrapper">

                    <div id="company-popup-wrapper" class="mol-company-card"></div>
                </div>
                <div class="atm-pager">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="atm-icon  far fa-chevron-left   "></i>

                            </a>
                        </li>

                        <li>
                            <a class="" href="#">
                                1
                            </a>
                        </li>
                        <li>
                            <a class="" href="#">
                                2
                            </a>
                        </li>
                        <li>
                            <a class="active" href="#">
                                3
                            </a>
                        </li>
                        <li>
                            <a class="" href="#">
                                4
                            </a>
                        </li>
                        <li>
                            <a class="" href="#">
                                5
                            </a>
                        </li>
                        <li>
                            <a class="" href="#">
                                6
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="atm-icon  far fa-chevron-right   "></i>

                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="wrapper-checkbox">
                    <h5 class="atm-heading ">The quick brown fox jumps over the lazy dog</h5>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Antwerpen</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Antwerpen</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Antwerpen</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Antwerpen</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Antwerpen</label>

                    </div>

                </div>
                <div class="wrapper-checkbox">
                    <h5 class="atm-heading ">The quick brown fox jumps over the lazy dog</h5>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Antwerpen</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Antwerpen</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Antwerpen</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Antwerpen</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Antwerpen</label>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="tpl-company-overview">
    <div class="vebego-container">
        {{render '@title'}}
        <div class="company-hightlights">
            {{#each company-highlight}}
            <div>
                {{render '@company'}}
            </div>
            {{/each}}
        </div>
        <div class="company-list">
            <div class="left">
                {{render '@title'}}
                <div class="company-list-wrapper">
                    {{#each company-list}}
                        {{render '@company-card' this merge=true}}
                    {{/each}}
                    <div id="company-popup-wrapper" class="mol-company-card"></div>
                </div>
                {{render '@pager'}}
            </div>
            <div class="right">
                <div class="wrapper-checkbox">
                    {{render '@heading--h5'}}
                    {{#each checkbox}}
                    {{render '@checkbox'}}
                    {{/each}}
                </div>
                <div class="wrapper-checkbox">
                    {{render '@heading--h5'}}
                    {{#each checkbox}}
                    {{render '@checkbox'}}
                    {{/each}}
                </div>
                {{!-- {{render '@button-primary--icon-lg'}} --}}
            </div>
        </div>
    </div>
</div>
 
{
  "company-highlight": [
    {},
    {}
  ],
  "company-list": [
    {
      "index": 0
    },
    {
      "index": 1
    },
    {
      "index": 2
    },
    {
      "index": 3
    },
    {
      "index": 4
    },
    {
      "index": 5
    },
    {
      "index": 6
    }
  ],
  "checkbox": [
    {},
    {},
    {},
    {},
    {}
  ]
}
  • Content: 
    .tpl-company-overview {
    @apply pt-[8.5rem] overflow-hidden;

    .mol-title {
        @apply mb-10;
    }

    .company-hightlights {
        @apply grid;
        @apply grid-cols-1;
        @apply md:grid-cols-2;
        @apply gap-4;
        @apply mb-20;
    }

    .company-list {
        @apply grid;
        @apply grid-cols-12;
        @apply md:gap-16;
        @apply mb-20;

        .left {
            @apply order-2 md:order-1;
            @apply col-span-12 md:col-span-8;

            .company-list-wrapper {
                @apply grid;
                @apply grid-cols-1;
                @apply lg:grid-cols-2;
                @apply xl:grid-cols-3;
                @apply gap-4;

                .company-card-popup {
                    @apply hidden;
                }

                #company-popup-wrapper {
                    @apply hidden;
                    @apply col-span-1 lg:col-span-2 xl:col-span-3 !important;
                }
            }

            .atm-pager {
                @apply mt-10;
                @apply pt-10;
                @apply border-t;
                @apply border-solid;
                @apply border-shade;
            }
        }

        .right {
            @apply order-1 md:order-2;
            @apply col-span-12 md:col-span-4;
            @apply mb-10;

            .mol-inline-search {
                @apply mb-12;
            }

            .wrapper-checkbox {
                @apply mb-8;
            }

            .atm-heading {
                @apply mb-6;
            }
        }
    }
}
  • URL: /components/raw/company-overview/company-overview.css
  • Filesystem Path: src\components\05-templates\company-overview\company-overview.css
  • Size: 1.6 KB
  • Content: 
    class CompanyOverview {

    constructor($el) {

        this.$el = $el;
        this.currentIndex = -1;

        this.cardSelector = '.mol-company-card';
        this.popupWrapperSelector = '#company-popup-wrapper';

        this.$cards = $(this.$el).find(this.cardSelector).not(this.popupWrapperSelector);
        this.$popupWrapper = $(this.$el).find(this.popupWrapperSelector);
    }

    init() {

        var self = this;

        // Open popup
        self.$cards.find('.company-card-teaser').on('click', function (e) {

            // Copy HTML to popup wrapper
            self.copy(this);

            // Move wrapper to correct DOM position
            self.move(this);

            // Show popup in popup wrapper
            self.show(this);
        });

        // Close popup
        self.$cards.find('.company-card-popup .company-popup-close').on('click', function (e) {

            self.close(this);
        });
    }

    copy(el) {

        var $popup = $(el).parents(this.cardSelector).find('.company-card-popup');
        this.$popupWrapper.html($popup.clone(true));
    }

    move(el) {

        var $card = $(el).parents(this.cardSelector);
        var index = parseInt($card.data('index'));

        var cols = this.cols();
        var remain = cols - index % cols;
        var newIndex = Math.min(this.$cards.length, index + remain);

        if (this.currentIndex != newIndex) {

            this.$popupWrapper.insertAfter(this.$cards.filter('[data-index="' + (newIndex - 1) + '"]'));
            this.currentIndex = newIndex;
        }
    }

    cols() {

        var w = $(window).outerWidth();

        if (w >= 1280) return 3;
        else if (w >= 1024) return 2;
        else return 1;
    }

    close(el) {

        var self = this;

        self.$popupWrapper.find('.company-card-popup').slideUp(50, function(e) {

            self.$popupWrapper.hide();
        });
    }

    show(el) {

        var self = this;

        self.$popupWrapper.show();
        self.$popupWrapper.find('.company-card-popup').slideDown(200);     
    }
}

(function () {


    'use strict';

    [...document.querySelectorAll('.tpl-company-overview')].forEach(($el) => {

        const inst = new CompanyOverview($el);
        inst.init();
    });

})();
  • URL: /components/raw/company-overview/company-overview.js
  • Filesystem Path: src\components\05-templates\company-overview\company-overview.js
  • Size: 2.4 KB

No notes defined.