Jump to content
  • entries
    5
  • comments
    7
  • views
    623

BS #1

SooR

594 views

За месяц использования 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 Comments


Recommended Comments

pimur

Posted (edited)

Отмена авто закрытия 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

Edited by pimur

Share this comment


Link to comment

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

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

Share this comment


Link to comment

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

// Симуляция 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

 

Share this comment


Link to comment

Вышел 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

Share this comment


Link to comment
5 часов назад, SooR сказал:

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

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

Share this comment


Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.