<button type="button" class="Button Button--default js-fr-offcanvas-open" aria-controls="menu">
		Apri
	</button>

<section class="Offcanvas Offcanvas--right Offcanvas--modal js-fr-offcanvas u-jsVisibilityHidden u-nojsDisplayNone u-hiddenPrint" id="menu">
    <h2 class="u-hiddenVisually">Menu di navigazione</h2>
    <div class="Offcanvas-content u-background-white">
        <div class="Offcanvas-toggleContainer u-background-70 u-jsHidden">
            <a class="Hamburger-toggleContainer u-block u-color-white u-padding-bottom-xxl u-padding-left-s u-padding-top-xxl js-fr-offcanvas-close" aria-controls="menu" aria-label="esci dalla navigazione" title="esci dalla navigazione" href="#">
        <span class="Hamburger-toggle is-active" aria-hidden="true"></span>
      </a>
        </div>
        <nav>
            <ul class="Linklist Linklist--padded Treeview Treeview--default js-Treeview u-text-r-xs">
                <li><a href="https://example.com">Ipsum quaerat tempore</a>
                    <ul>
                        <li><a href="https://example.com">Quasi recusandae placeat</a></li>
                        <li><a href="https://example.com">Aspernatur magni saepe</a></li>
                        <li>
                            <a href="https://example.com">Culpa ab voluptatem</a>
                            <ul>
                                <li><a href="https://example.com">Praesentium repellendus qui</a></li>
                                <li><a href="https://example.com">Ut rerum voluptatem</a>
                                    <ul>
                                        <li><a href="https://example.com">Ut rerum voluptatem</a></li>
                                        <li><a href="https://example.com">Sed consequuntur aut</a></li>
                                        <li><a href="https://example.com">Qui corporis quasi</a></li>
                                    </ul>
                                </li>
                                <li><a href="https://example.com">Alias explicabo praesentium</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Incidunt facilis ab</a></li>
                        <li><a href="https://example.com">Ipsum quaerat tempore</a></li>
                    </ul>
                </li>
                <li><a href="https://example.com">Alias explicabo praesentium</a>
                    <ul>
                        <li><a href="https://example.com">Culpa ab voluptatem</a></li>
                        <li><a href="https://example.com">Aspernatur magni saepe</a></li>
                        <li><a href="https://example.com">Quasi recusandae placeat</a>
                            <ul>
                                <li><a href="https://example.com">Sed consequuntur aut</a></li>
                                <li><a href="https://example.com">Ut rerum voluptatem</a></li>
                                <li><a href="https://example.com">Praesentium repellendus qui</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Qui corporis quasi</a></li>
                        <li><a href="https://example.com">Alias explicabo praesentium</a>
                            <ul>
                                <li><a href="https://example.com">Incidunt facilis ab</a></li>
                                <li><a href="https://example.com">Quasi recusandae placeat</a></li>
                                <li><a href="https://example.com">Aspernatur magni saepe</a></li>
                                <li><a href="https://example.com">Culpa ab voluptatem</a></li>
                                <li><a href="https://example.com">Praesentium repellendus qui</a></li>
                                <li><a href="https://example.com">Ut rerum voluptatem</a></li>
                                <li><a href="https://example.com">Sed consequuntur aut</a></li>
                                <li><a href="https://example.com">Qui corporis quasi</a></li>
                                <li><a href="https://example.com">Alias explicabo praesentium</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li data-megamenu-class="u-hidden">
                    <a class="Button u-border-none u-color-95 u-background-compl u-text-r-xxs" href="#">Accedi</a>
                </li>
            </ul>

        </nav>
    </div>
</section>
  • Content:
    @import "fr-offcanvas/offcanvas.css";
    
    /** @define Offcanvas; */
    
    :root {
      --Offcanvas-width: 22em;
      --Offcanvas-max-width: 80%;
    }
    
    /* postcss-bem-linter: ignore */
    
    .Offcanvas,
    .Offcanvas-content {
      max-width: var(--Offcanvas-max-width);
      width: var(--Offcanvas-width);
    }
    
    .no-js .Offcanvas:target {
      @extend .u-block;
    }
    
    .Offcanvas-toggleContainer {
      cursor: pointer;
    }
    
    .Offcanvas:target .Offcanvas-content,
    .Offcanvas.is-ready .Offcanvas-content {
      @extend .u-zindex-max;
      @extend .u-borderShadow-m;
    
      height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      position: fixed;
      top: 0;
      transform: translateX(0);
      transition: transform 200ms ease-out;
      will-change: translateX;
    }
    
    .Offcanvas--right:target .Offcanvas-content,
    .Offcanvas--right.is-ready .Offcanvas-content {
      left: 100%;
    }
    
    .Offcanvas--left:target .Offcanvas-content,
    .Offcanvas--left.is-ready .Offcanvas-content {
      right: 100%;
    }
    
    /* postcss-bem-linter: ignore */
    
    .Offcanvas:not(:target) .Offcanvas-content,
    .Offcanvas.is-ready[aria-hidden="true"] .Offcanvas-content {
      transition: transform 200ms ease-out, visibility 200ms;
    }
    
    /* postcss-bem-linter: ignore */
    
    .Offcanvas--right:target .Offcanvas-content,
    .Offcanvas--right.is-ready[aria-hidden="false"] .Offcanvas-content {
      transform: translateX(-100%);
    }
    
    /* postcss-bem-linter: ignore */
    
    .Offcanvas--left:target .Offcanvas-content,
    .Offcanvas--left.is-ready[aria-hidden="false"] .Offcanvas-content {
      transform: translateX(100%);
    }
    
    .Offcanvas--modal:target::after,
    .Offcanvas--modal.is-active::after {
      @extend .u-zindex-50;
    
      background: black;
      content: " ";
      display: block;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: fixed;
      top: 0;
      width: 100%;
    }
    
  • URL: /components/raw/offcanvas/index.css
  • Filesystem Path: src/components/offcanvas/index.css
  • Size: 1.7 KB
  • Content:
    import $ from 'jquery'
    
    import Froffcanvas from 'fr-offcanvas/offcanvas'
    
    const opts = {
      // String - panel
      panelSelector: '.Offcanvas',
    
      // String - content
      contentSelector: '.Offcanvas-content',
    
      // String - content
      modalSelector: '.Offcanvas--modal',
    
      // String - trigger
      jsSelector: '.js-fr-offcanvas-open',
    
      // String - Selector for the open button(s)
      openSelector: '.js-fr-offcanvas-open',
    
      // String - Selector for the close button
      closeSelector: '.js-fr-offcanvas-close',
    
      // String - Class name that will be added to the selector when the component has been initialised
      readyClass: 'is-ready',
    
      // String - Class name that will be added to the selector when the panel is visible
      activeClass: 'is-active'
    }
    
    /*
     *  Prevent scroll on body when offcanvas is visible
     *  (the touchmove handler targets iOS devices)
     */
    const _handleModalScroll = () => {
      $(opts.contentSelector).on('transitionend', function() {
        if (!$(opts.panelSelector).hasClass(opts.activeClass)) {
          $(window).off('scroll.offcanvas')
          $(document).off('touchmove.offcanvas')
        } else {
          const _scrollTop = $(window).scrollTop()
          $(window).on('scroll.offcanvas', () => $(window).scrollTop(_scrollTop))
          $(document).on('touchmove.offcanvas', () => $(window).scrollTop(_scrollTop))
        }
      })
    }
    
    /*
     *	FIXME: hack to show / hide the background panel
     */
    const _handleModal = (e) => {
      if (e && $(opts.panelSelector).hasClass(opts.activeClass) &&
        !$(e.target).is(opts.contentSelector)) {
        // for some odd reason plain jquery click() does not work here
        // // so we add that get(0) call
        $(e.target).find(opts.closeSelector).get(0).click()
      }
      // we're using "one" here instead of "bind" because
      // otherwise $(opts.closeSelector).click() would trigger
      // a click on modal again looping forever
      $(opts.modalSelector).one('click', _handleModal)
    }
    
    let _exports = {
      Froffcanvas,
      opts
    }
    
    $(document).ready(() => {
      let _scrollTop = $(window).scrollTop()
    
      $(opts.openSelector)
        .add($(opts.closeSelector))
        .click((e) => {
          _scrollTop = $(window).scrollTop()
          e.preventDefault()
        })
    
      $(opts.panelSelector).on('focus', () => {
        $(window).scrollTop(_scrollTop)
      })
    
      _handleModal()
      _handleModalScroll()
    
      _exports.offcanvas = Froffcanvas(opts)
    })
    
    export default _exports
    
  • URL: /components/raw/offcanvas/index.js
  • Filesystem Path: src/components/offcanvas/index.js
  • Size: 2.4 KB

There are no notes for this item.