05.01.2024 - mdc

romankupchak93 · Jan 5, 2024 · 4dae387 · 4dae387
1 parent c5c652b
commit 4dae387
Show file tree

Hide file tree

Showing 3 changed files with 237 additions and 0 deletions.
diff --git a/js/src/ripple.js b/js/src/ripple.js
@@ -0,0 +1,130 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Ripple.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+import { MDCRipple } from '@material/ripple'
+import BaseComponent from './base-component.js'
+import EventHandler from './dom/event-handler.js'
+import SelectorEngine from './dom/selector-engine.js'
+import { defineJQueryPlugin } from './util/index.js'
+
+const NAME = 'ripple'
+const DATA_KEY = 'bs.ripple'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
+const CLASS_NAME_RIPPLE = 'mdc-ripple-surface'
+
+// const SELECTOR_NAV_LINK = '.nav-link'
+// const NOT_SELECTOR_NAV_LINK = `:not(${SELECTOR_NAV_LINK})`
+const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
+const SELECTOR_COMPONENT_TAG_LINK = 'a.accordion-button, a.list-group-item'
+const SELECTOR_COMPONENT_TAG_BUTTON = 'button.accordion-button, button.list-group-item'
+const SELECTOR_COMPONENT = `.btn, ${SELECTOR_COMPONENT_TAG_LINK}, ${SELECTOR_COMPONENT_TAG_BUTTON}`
+const SELECTOR_COMPONENT_UNBOUNDED = '.btn-close, .btn-icon, .navbar-toggler'
+const SELECTOR_COMPONENTS = `${SELECTOR_COMPONENT}, ${SELECTOR_COMPONENT_UNBOUNDED}, ${SELECTOR_DROPDOWN_TOGGLE}`
+
+const Default = {
+  setActive: false,
+  setUnbounded: false
+}
+
+const DefaultType = {
+  setActive: '(boolean|string)',
+  setUnbounded: '(boolean|string)'
+}
+
+class Ripple extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+    this._ripple = null
+    this._element = element
+    this._init()
+  }
+
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  _init() {
+    if (!this._element || this._element.tagName.toLowerCase() === 'input') {
+      return
+    }
+
+    this._activate(this._element)
+  }
+
+  dispose() {
+    if (this._ripple) {
+      this._ripple.destroy()
+      this._ripple = null
+    }
+
+    super.dispose()
+  }
+
+  _checkInstance(element) {
+    const instance = Ripple.getInstance(element)
+    if (instance) {
+      instance.dispose()
+    }
+  }
+
+  _activate(element) {
+    this._checkInstance(element)
+    this._createElement(element)
+  }
+
+  _createElement(element) {
+    const rippleContainer = document.createElement('div')
+    rippleContainer.classList.add(CLASS_NAME_RIPPLE)
+    element.append(rippleContainer)
+    this._setRipple(element, rippleContainer)
+  }
+
+  _setRipple(element, rippleContainer) {
+    this._ripple = new MDCRipple(rippleContainer)
+    this._isUnbounded(element)
+  }
+
+  _isUnbounded(element) {
+    const isUnbound = element.matches(SELECTOR_COMPONENT_UNBOUNDED)
+    if (isUnbound) {
+      this._ripple.unbounded = true
+    }
+  }
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      const data = Ripple.getOrCreateInstance(this, config)
+
+      if (typeof config === 'string') {
+        if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
+          throw new TypeError(`No method named "${config}"`)
+        }
+
+        data[config]()
+      }
+    })
+  }
+}
+
+EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+  const rippleSurfaces = SelectorEngine.find(SELECTOR_COMPONENTS)
+  for (const surface of rippleSurfaces) {
+    Ripple.getOrCreateInstance(surface)
+  }
+})
+
+defineJQueryPlugin(Ripple)
+export default Ripple
diff --git a/scss/customize/mixins/_ripple.scss b/scss/customize/mixins/_ripple.scss
@@ -0,0 +1,28 @@
+//@mixin ripple-variant($color_value) {
+//  $gradient: rgba(
+//        $color: $color_value,
+//        $alpha: 0.2,
+//      )
+//      0,
+//    rgba(
+//        $color: $color_value,
+//        $alpha: 0.3,
+//      )
+//      40%,
+//    rgba(
+//        $color: $color_value,
+//        $alpha: 0.4,
+//      )
+//      50%,
+//    rgba(
+//        $color: $color_value,
+//        $alpha: 0.5,
+//      )
+//      60%,
+//    rgba(
+//        $color: $color_value,
+//        $alpha: 0,
+//      )
+//      70%;
+//  background-image: radial-gradient(circle, $gradient);
+//}
diff --git a/scss/customize/properties/_ripple.scss b/scss/customize/properties/_ripple.scss
@@ -0,0 +1,79 @@
+//// Ripple
+//$fade-in-duration: 75ms !default;
+//$fade-out-duration: 150ms !default;
+//$translate-duration: 225ms !default;
+//$states-wash-duration: 15ms !default;
+//// scss-docs-start ripple-variables
+//$ripple-wave-cubicBezier: cubic-bezier(0, 0, 0.15, 1) !default;
+//$ripple-wave-border-radius: 50% !default;
+//$ripple-wave-opacity: 0.5 !default;
+//$ripple-wave-transform: scale(0) !default;
+//$ripple-wave-z-index: 999 !default;
+//$ripple-wave-active-transform: scale(1) !default;
+//// scss-docs-end ripple-variables
+//
+//// scss-docs-start ripple-colors-map
+//$ripple: (
+//  'primary': $primary,
+//  'secondary': #e3ebf7,
+//  'success': $success,
+//  'danger': $danger,
+//  'warning': $warning,
+//  'info': $info,
+//  'light': $light,
+//  'dark': $dark,
+//) !default;
+//// scss-docs-end ripple-colors-map
+//
+//.ripple-surface {
+//  position: relative;
+//  overflow: hidden;
+//  display: inline-block;
+//  vertical-align: bottom;
+//}
+//
+//.ripple-surface-unbound {
+//  overflow: visible;
+//}
+//
+//.ripple-wave {
+//  --#{$prefix}ripple-wave-cubicBezier: #{$ripple-wave-cubicBezier};
+//  --#{$prefix}ripple-wave-border-radius: #{$ripple-wave-border-radius};
+//  --#{$prefix}ripple-wave-opacity: #{$ripple-wave-opacity};
+//  --#{$prefix}ripple-wave-transform: #{$ripple-wave-transform};
+//  --#{$prefix}ripple-wave-z-index: #{$ripple-wave-z-index};
+//  --#{$prefix}ripple-wave-active-transform: #{$ripple-wave-active-transform};
+//
+//  @include ripple-variant(black);
+//  border-radius: var(--#{$prefix}ripple-wave-border-radius);
+//  opacity: var(--#{$prefix}ripple-wave-opacity);
+//  pointer-events: none;
+//  position: absolute;
+//  touch-action: none;
+//  transition-duration: $fade-in-duration;
+//  transform: var(--#{$prefix}ripple-wave-transform);
+//  transition-property: transform, opacity;
+//  transition-timing-function: var(--#{$prefix}ripple-wave-cubicBezier),
+//    var(--#{$prefix}ripple-wave-cubicBezier);
+//  z-index: var(--#{$prefix}ripple-wave-z-index);
+//  &.active {
+//    transform: var(--#{$prefix}ripple-wave-active-transform);
+//    opacity: 0;
+//  }
+//}
+//
+//.btn .ripple-wave {
+//  @include ripple-variant(white);
+//}
+//
+//.input-wrapper .ripple-wave {
+//  @include ripple-variant(white);
+//}
+//
+//@each $color, $value in $ripple {
+//  .ripple-surface-#{$color} {
+//    .ripple-wave {
+//      @include ripple-variant($value);
+//    }
+//  }
+//}