Web Toolkit

image/svg+xml GitHub

Offcanvas 

<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">Nulla rerum magni</a>
                    <ul>
                        <li><a href="https://example.com">Earum rem culpa</a></li>
                        <li><a href="https://example.com">Numquam sit veniam</a></li>
                        <li>
                            <a href="https://example.com">Voluptatem quia cum</a>
                            <ul>
                                <li><a href="https://example.com">Totam et amet</a></li>
                                <li><a href="https://example.com">Quo illo molestiae</a>
                                    <ul>
                                        <li><a href="https://example.com">Quo illo molestiae</a></li>
                                        <li><a href="https://example.com">Dolorum quod quia</a></li>
                                        <li><a href="https://example.com">Aliquid deleniti quae</a></li>
                                    </ul>
                                </li>
                                <li><a href="https://example.com">Aut illum aliquid</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Consequatur eius molestiae</a></li>
                        <li><a href="https://example.com">Nulla rerum magni</a></li>
                    </ul>
                </li>
                <li><a href="https://example.com">Aut illum aliquid</a>
                    <ul>
                        <li><a href="https://example.com">Voluptatem quia cum</a></li>
                        <li><a href="https://example.com">Numquam sit veniam</a></li>
                        <li><a href="https://example.com">Earum rem culpa</a>
                            <ul>
                                <li><a href="https://example.com">Dolorum quod quia</a></li>
                                <li><a href="https://example.com">Quo illo molestiae</a></li>
                                <li><a href="https://example.com">Totam et amet</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Aliquid deleniti quae</a></li>
                        <li><a href="https://example.com">Aut illum aliquid</a>
                            <ul>
                                <li><a href="https://example.com">Consequatur eius molestiae</a></li>
                                <li><a href="https://example.com">Earum rem culpa</a></li>
                                <li><a href="https://example.com">Numquam sit veniam</a></li>
                                <li><a href="https://example.com">Voluptatem quia cum</a></li>
                                <li><a href="https://example.com">Totam et amet</a></li>
                                <li><a href="https://example.com">Quo illo molestiae</a></li>
                                <li><a href="https://example.com">Dolorum quod quia</a></li>
                                <li><a href="https://example.com">Aliquid deleniti quae</a></li>
                                <li><a href="https://example.com">Aut illum aliquid</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.