Перейти к содержанию
  • запись
    1
  • комментариев
    5
  • просмотра
    104

BS #1

SooR

287 просмотров

За месяц использования Bootstrap 4 накопилось немного фиксов и решений.

Публикую как минимум для себя, в текстовиках уже надоело хранить.

 

1. Упрощенная реализация валидации форм на JQ

$('body').on('submit', 'form.needs-validation', function(e) {
  if (this.checkValidity() === false) {
    e.preventDefault();
    e.stopPropagation();
  }

  $(this).addClass('was-validated');
});

2. Инициализация Popover с возможностью указания контейнера границ и контента

$('[data-toggle="popover"]').each(function(i) {
  var $element = $(this), options = $element.data();

  if ($element.attr('data-content-element')) {
    options.html = true;

    options.content = function() {
      return $($(this).attr('data-content-element')).html();
    };
  }

  if ($element.attr('data-boundary-element')) {
    options.boundary = $($(this).attr('data-boundary-element')).get(0);
  }

  $element.popover(options);
});
<a href="#" class="text-dark" data-toggle="popover" data-content-element="#popover-cart" data-boundary-element="#content">Корзина</a>

<div id="#popover-cart"> ... </div>

3. Скрытие popover блока при клике вне его зоны с триггером click

$('body').on('click', function(e) {
  $('[data-toggle="popover"], [aria-describedby^="popover"]').each(function() {
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
      $(this).popover('hide');
    }
  });
});

4. Делаем кнопку × в контенте popover'a для его скрытия

$('body').on('click', '[data-dismiss="popover"]', function(e) {
  $('[aria-describedby="' + $(this).closest('.popover').attr('id') + '"]').popover('hide');
});
<button type="button" class="close text-dark" data-dismiss="popover"><i class="fas fa-times"></i></button>

5. Плавное изменение высоты (контента) при переключении слайдов карусели

$('.carousel').on('slide.bs.carousel', function(e) {
  var nextH = $(e.relatedTarget).height();

  $(this).find('.carousel-item.active').parent().animate({ height: nextH }, 250);
});

6. Делаем возможным выход контента за границы активного слайда карусели 

По умолчанию контент слайда имеет правило overflow: hidden и, например, если вы решите сделать увеличение элемента при hover с выходом за границы, то он обрежется.

Чтобы это предотвратить оставим правило overflow: hidden только при смене слайдов.

$(document).on({
  // start
  'slide.bs.carousel': function() {
    $(this).find('.carousel-inner').removeClass('o-visible');
  },
  // end
  'slid.bs.carousel': function() {
    $(this).find('.carousel-inner').addClass('o-visible');
  }
}, '.carousel');
.o-visible {
  overflow: visible!important;
}
<div id="carousel-product-items" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
  <div class="carousel-inner o-visible" role="listbox">
    ...
  </div>
</div>
  

7. Возвращаем $.button из BS 3 в BS 4

Не понимаю кому мешал этот скромный, но полезный плагин

Вызов будет доступен в таком виде 

$('button[type="submit"]').btnState('loading');
Спойлер

/* ========================================================================
 * Bootstrap: button.js v3.3.7
 * http://getbootstrap.com/javascript/#buttons
 * ========================================================================
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */
+function($) {
  'use strict';

  // BUTTON PUBLIC CLASS DEFINITION
  // ==============================

  var Button = function (element, options) {
    this.$element  = $(element)
    this.options   = $.extend({}, Button.DEFAULTS, options)
    this.isLoading = false
  }

  Button.VERSION  = '3.3.7'

  Button.DEFAULTS = {
    loadingText: 'loading...'
  }

  Button.prototype.setState = function (state) {
    var d    = 'disabled'
    var $el  = this.$element
    var val  = $el.is('input') ? 'val' : 'html'
    var data = $el.data()

    state += 'Text'

    if (data.resetText == null) $el.data('resetText', $el[val]())

    // push to event loop to allow forms to submit
    setTimeout($.proxy(function () {
      $el[val](data[state] == null ? this.options[state] : data[state])

      if (state == 'loadingText') {
        this.isLoading = true
        $el.addClass(d).attr(d, d).prop(d, true)
      } else if (this.isLoading) {
        this.isLoading = false
        $el.removeClass(d).removeAttr(d).prop(d, false)
      }
    }, this), 0)
  }

  // BUTTON PLUGIN DEFINITION
  // ========================

  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.button')
      var options = typeof option == 'object' && option

      if (!data) $this.data('bs.button', (data = new Button(this, options)))
      if (option) data.setState(option)
    })
  }

  $.fn.btnState             = Plugin
  $.fn.btnState.Constructor = Button
}(jQuery);

 

 



5 Комментариев


Рекомендуемые комментарии

Отмена авто закрытия dropdown при клике на самом dropdown

$('.dropdown').on({
    'click': function () {
        this.data = true;
    },
    'hide.bs.dropdown': function () {
        if(this.data) {
            this.data = false;
            return this.closable = false;
        }
        return this.closable = true;
    }
});

Кстати не советую stopPropagation();

https://learn.javascript.ru/event-bubbling#prekraschenie-vsplytiya

Изменено пользователем pimur

Поделиться этим комментарием


Ссылка на комментарий

@pimur , спасибо за дополнение про DD, еще один способ в копилку.

По линке читал давно, использую с осторожностью :)

Поделиться этим комментарием


Ссылка на комментарий

Закину, думаю будет полезно. Недавно была острая необходимость в велосипеде.

// Симуляция Keydown
// Взято отсюда http://qaru.site/questions/22829/keydown-simulation-in-chrome-fires-normally-but-not-the-correct-key
//ctrl+shift+(charCode)

const Simulation = {};
Simulation.keydown = function(k) {
    var oEvent = document.createEvent('KeyboardEvent');

    // Chromium Hack
    Object.defineProperty(oEvent, 'keyCode', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     
    Object.defineProperty(oEvent, 'which', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     

    if (oEvent.initKeyboardEvent) {
                                                                            //ctrl         shift
        oEvent.initKeyboardEvent('keydown', true, true, document.defaultView, true, false, true, false, k, k);
    } else {                                                           //ctrl         shift
        oEvent.initKeyEvent('keydown', true, true, document.defaultView, true, false, true, false, k, 0);
    }

    oEvent.keyCodeVal = k;

    if (oEvent.keyCode !== k) {
        alert('keyCode mismatch ' + oEvent.keyCode + '(' + oEvent.which + ')');
    }

    document.dispatchEvent(oEvent);
}
//И вызов Simulation.keydown('код кнопки')
//Проверял в chrome, opera, firefox

 

Поделиться этим комментарием


Ссылка на комментарий

Вышел BS 4.2.1, а с ним и новые баги.

Пол часа ломал голову, почему же у меня не хочет срабатывать

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

а они в классе ошиблись. 3by4 у них в CSS.

Ну да ладно, предупредил. 

Наконец-то добавили свайп карусели, докинули новых кастомных полей в формы, xl-сайзинг модального, отрицательные margin'ы (что очень полезно), дополнительные классы для font-* и еще по мелочам.

TWBS потихоньку превращается в большой helper, свои велосипеды можно удалять.

Жду 4.3, скорее всего, будет последней в 4-й ветке.

Активно говорят о пятёрке, хотят отказаться от jQuery - и правильно, пользуются то они всего лишь событиями и манипуляциями с DOM.

 

  • +1 1

Поделиться этим комментарием


Ссылка на комментарий
5 часов назад, SooR сказал:

хотят отказаться от jQuery

Будет отличненько!

Поделиться этим комментарием


Ссылка на комментарий

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.