Положение всплывающей панели

Главная

Вернуться к статьям

Положение всплывающей панели

  1. Кнопке назначить действие "Показать всплывающую панель" и в эту панель поместить ваше меню, которое должно оказаться сбоку.

  2. Кнопке присвоить один из классов перечисленных ниже и опубликовать страницу:
    popover-position-bottom-left = снизу-слева
    popover-position-bottom-right = снизу-справа
    popover-position-left = слева-центр
    popover-position-right = справа-центр
    popover-position-left-top = слева-сверху
    popover-position-left-bottom = слева-снизу
    popover-position-top сверху

  3. Создать плагин "Свой код"

  4. В поле перед /body добавить следующий код:

<script type="text/javascript">
cr.api(page => {
/**
* true = на мобильных работает только popover-position-top
* false = на мобильных работает все
* без указания класса = снизу-центр (по умолчанию)
* popover-position-bottom-left = снизу-слева
* popover-position-bottom-right = снизу-справа
* popover-position-left = слева-центр
* popover-position-left-top = слева-сверху
* popover-position-left-bottom = слева-снизу
* popover-position-top сверху
*/
const noMobile = true
/**
* true = показывать стрелку
* false = не показывать стрелку
*/
const showArrow = true
` page.waitForAppear('[class="popover-position"]', buttonWidget => { const button = $(buttonWidget).find('button[data-modal="popover"]').get(0) const classes = getClasses(buttonWidget) if (!button || !classes) return let popoverPosition, popoverExtPosition classes.forEach(className => { if (className.startsWith('popover-position-')) { popoverPosition = className .replace(/^popover-position-(top|left|right|bottom)(-.+)?$/, '$1') popoverExtPosition = className .replace(/^popover-position-[^-]+(-(top|left|right|bottom))?$/, '$2') } }) if (!popoverPosition) return const modalLink = getModalLink(buttonWidget) `` page.waitForAppear(.area-wrapper > .modal[data-uid="${modalLink}"], modal => { `` const modalDialog = modal.querySelector('.modal-dialog') const popoverContainer = modal.querySelector('.popover1-container') const popoverArrow = popoverContainer.querySelector('.popover1-arrow') const modalArrow = popoverArrow.querySelector('[cr-modal-arrow]') const css = $.fn.css $.fn.css = function() { const appCss = css.apply( this, arguments ) $(this).trigger('changed') return appCss } $(modal).on('changed', function() { const buttonRect = button.getBoundingClientRect() const buttonYCenter = buttonRect.top + pageYOffset + button.offsetHeight 0.5 const buttonXCenter = buttonRect.left + button.offsetWidth 0.5 const buttonTop = buttonRect.top + pageYOffset const arrowMargin = 6.6667 const styles = getPopoverStyles(popoverPosition) if (!styles || !styles.length) return popoverPosition && popoverPosition != 'bottom' ? cssImportant(popoverContainer, 'margin-top', 0) : false if (popoverExtPosition == 'top') { cssImportant(modalDialog, 'top', arrowMargin) cssImportant(popoverContainer, 'margin-top', -arrowMargin) } styles.forEach(style => { for (let key in style.props) { cssImportant(style.el, key, style.props[key]) } }) showArrow ? false : cssImportant(modalArrow, 'visibility', 'hidden') function getPopoverStyles(position) { return position == 'top' ? getTopStyles() : position == 'left' ? getLeftStyles() : position == 'right' ? getRightStyles() : position == 'bottom' ? getBottomStyles() : false } function getLeftStyles() { if (noMobile && window.innerWidth < 992) return const modalProps = { 'top': buttonYCenter - modal.offsetHeight 0.5, 'margin-left': buttonRect.left - modal.offsetWidth, 'text-align': 'right' } const modalArrowProps = { 'transform': 'translate(50%, -50%) rotate(135deg)', 'top': '50%', 'margin-top': 0 } const popoverArrowProps = { 'top': 0, 'bottom': 0, 'right': 0, 'left': 'auto' } const popoverContainerProps = { 'margin-right': arrowMargin } if (popoverExtPosition == 'top') { modalProps['top'] = buttonRect.bottom - modal.offsetHeight + pageYOffset modalArrowProps['top'] = modal.offsetHeight - button.offsetHeight 0.5 } else if (popoverExtPosition == 'bottom') { modalProps['top'] = buttonRect.top + pageYOffset modalArrowProps['top'] = button.offsetHeight 0.5 } return [ { el: modal, props: modalProps }, { el: modalArrow, props: modalArrowProps }, { el: popoverArrow, props: popoverArrowProps }, { el: popoverContainer, props: popoverContainerProps } ] } function getRightStyles() { if (noMobile && window.innerWidth < 992) return const modalProps = { 'top': buttonYCenter - modal.offsetHeight 0.5, 'margin-left': buttonRect.right, 'text-align': 'left' } const modalArrowProps = { 'transform': 'translate(-50%, -50%) rotate(-45deg)', 'top': '50%', 'margin-top': 0, 'margin-left': 0 } const popoverArrowProps = { 'top': 0, 'bottom': 0, 'right': 'auto', 'left': 0 } const popoverContainerProps = { 'margin-left': arrowMargin } if (popoverExtPosition == 'top') { modalProps['top'] = buttonRect.bottom - modal.offsetHeight + pageYOffset modalArrowProps['top'] = modal.offsetHeight - button.offsetHeight 0.5 } else if (popoverExtPosition == 'bottom') { modalProps['top'] = buttonRect.top + pageYOffset modalArrowProps['top'] = button.offsetHeight 0.5 } return [ { el: modal, props: modalProps }, { el: modalArrow, props: modalArrowProps }, { el: popoverArrow, props: popoverArrowProps }, { el: popoverContainer, props: popoverContainerProps } ] } function getTopStyles() { const modalProps = { 'top': buttonTop - modal.offsetHeight, 'margin-left': buttonXCenter - modal.offsetWidth 0.5 } const modalArrowProps = { 'transform': 'translate(0, 50%) rotate(-135deg)', 'bottom': 0, 'margin-top': 0, 'margin-left': 0 } const popoverArrowProps = { 'top': 'auto', 'bottom': 0, 'right': 0, 'left': 0 } const popoverContainerProps = { 'margin-bottom': arrowMargin } if (window.innerWidth > 991 || window.innerWidth < 992 && !noMobile) { if (popoverExtPosition == 'left') { modalProps['margin-left'] = buttonRect.left + button.offsetWidth - modal.offsetWidth modalProps['text-align'] = 'right' modalArrowProps['left'] = modal.offsetWidth 0.5 - button.offsetWidth 0.5 } else if (popoverExtPosition == 'right') { modalProps['margin-left'] = buttonRect.left modalProps['text-align'] = 'left' modalArrowProps['left'] = -modal.offsetWidth 0.5 + button.offsetWidth 0.5 } } return [ { el: modal, props: modalProps }, { el: modalArrow, props: modalArrowProps }, { el: popoverArrow, props: popoverArrowProps }, { el: popoverContainer, props: popoverContainerProps } ] } function getBottomStyles() { if (noMobile && window.innerWidth < 992) return const modalProps = {} const modalArrowProps = {} if (popoverExtPosition == 'left') { modalProps['margin-left'] = buttonRect.left + button.offsetWidth - modal.offsetWidth modalProps['text-align'] = 'right' modalArrowProps['left'] = modal.offsetWidth 0.5 - button.offsetWidth 0.5 } else if (popoverExtPosition == 'right') { modalProps['margin-left'] = buttonRect.left modalProps['text-align'] = 'left' modalArrowProps['left'] = -modal.offsetWidth 0.5 + button.offsetWidth 0.5 } return [ { el: modal, props: modalProps }, { el: modalArrow, props: modalArrowProps } ] } }) }) }) function getModalLink(el) { return $(el).find('> .modal').data('uid') || $(el).find('> .modal-link').data('uid') } function cssImportant(el, prop, value) { const unit = isNaN(+value) ? '' : 'px' value || value === 0 ? el.style.setProperty( `` prop,${value}${unit},'important' `` ) : false } function getClasses(el) { const classes = $(el).attr('class') return classes ? classes.split(' ') : false } }) `