CMS Developers

{{ require_js("https://cdn.jsdelivr.net/npm/enhanced-bind-polyfill@0.0.2/index.min.js", "head") }}
{{ require_js("https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js", "head") }}
{% require_css %}
  <style>
    @import url('https://fonts.googleapis.com/css?family=Roboto');
    .belch-floating-search-super-container .bfss-trigger {
      background: {{ module.icon_background_color.color }};
      fill: {{ module.icon_color.color }};
    }
    .belch-floating-search-super-container .go-btn {
      background: transparent;
      fill: {{ module.go_icon_color.color }};
    }
    .belch-floating-search-super-container .bfss-search-box {
      background: {{ module.search_box_background_color.color }};
    }
  </style>
{% end_require_css %}
<div class="belch-floating-search-super-container">
  <div class="bfss-inner">
    <div class="bfss-trigger">
      {% icon
        name="{{ module.search_icon.name }}"
        style="{{ module.search_icon.type }}"
        unicode="{{ module.search_icon.unicode }}"
      %}
    </div>
    <div class="bfss-search-box">
      <div class="bfss-search-pseudo-trigger"></div>
      <div class="bfss-search-inner">
        <form action="{{ module.search_results_link }}" class="bfss-form" method="GET">
          <input name="term" type="text" placeholder="Search" />
          <button type="submit" class="go-btn">
            {% icon
              name="{{ module.go_icon.name }}"
              style="{{ module.go_icon.type }}"
              unicode="{{ module.go_icon.unicode }}"
            %}
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

          
        

          
            .belch-floating-search-super-container {
  position: fixed;
  top: 50px;
  right: 50px;
  z-index: 214748363;
}
.belch-floating-search-super-container .bfss-inner {
  position: relative;
}
.belch-floating-search-super-container .bfss-trigger {
  position: relative;
  z-index: 2;
  width: 25px;
  height: 25px;
  padding: 20px;
  background: red;
  border-radius: 105px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
  fill: white;
  cursor: pointer;
  border: 1px solid white;
  box-sizing: content-box;
}
.belch-floating-search-super-container .bfss-social {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: 0;
  height: 0;
}
.belch-floating-search-super-container .bfss-search-box {
  position: absolute;
  height: 67px;
  display: flex;
  justify-content:center;
  align-items: center;
  top: -200px;
  right: 90px;
  padding: 0 15px;
  border-radius: 5px;
  border: 1px solid white;
  -webkit-box-shadow: rgba(0, 0, 0, 0.26) 0px 2px 5px 0px, rgba(0, 0, 0, 0.22) 0px 2px 10px 0px;
          box-shadow: rgba(0, 0, 0, 0.26) 0px 2px 5px 0px, rgba(0, 0, 0, 0.22) 0px 2px 10px 0px
}
.belch-floating-search-super-container .bfss-search-box form {
  margin: 0 !important;
}
.belch-floating-search-super-container .bfss-search-box input {
  min-width: 300px;
  padding: 11px;
  padding-right: 40px;
  border-radius: 2px;
  border: 0 solid white;
  font-family: "Roboto";
  font-size: 16px;
  margin: 0 !important;
}
.belch-floating-search-super-container .bfss-search-box input:active,
.belch-floating-search-super-container .bfss-search-box input:focus,
.belch-floating-search-super-container .go-btn:focus,
.belch-floating-search-super-container .go-btn:active {
  outline: none;
}
.belch-floating-search-super-container .go-btn {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 19px; right: 24px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}

          
        

          
            var belchfssc_ = (function(){
	return {
    container: ".belch-floating-search-super-container",
    trigger:   ".belch-floating-search-super-container .bfss-trigger",
    searchBox: ".belch-floating-search-super-container .bfss-search-box",
    init: function(){
      window.$(this.container).closest('.widget-span').css({'min-height': 0});
      this.searchTransitionTimeline = new TimelineMax({paused: true});
      this.searchButtonTimeline     = new TimelineMax({paused: true});
      this.initAnimation();
      this.createListeners();
    },
    initAnimation: function(){
      this.searchTransitionTimeline.set( this.searchBox, {autoAlpha: 0});
      this.searchButtonTimeline.to( this.trigger, .3, {
        rotationX:      '-30',
        transformOrigin:'center center',
        boxShadow:      '0 5px 11px 0 rgba(0, 0, 0, 0.28), 0 19px 15px 0 rgba(0, 0, 0, 0.25)'
      });
      this.searchTransitionTimeline.to( this.searchBox, .7, {
          top: "0px",
          autoAlpha: 1,
          ease: Back.easeOut.config(1.7)
        });
    },
    on: function(action, callback) {
      window.addEventListener(action, callback, { passive: false });
    },
    createListeners: function(){
      this.on("keydown", this.tryClosing.bind(this));
      window.$(this.trigger).on('mouseenter', function(){
        this.searchButtonTimeline.play();
      }.bind(this));
      window.$(this.trigger).on('mouseleave', function(){
        this.searchButtonTimeline.reverse();
      }.bind(this));
      window.$(this.trigger).on('click', function(){
        if(window.$(this.trigger).hasClass('active')){
          this.searchTransitionTimeline.reverse()
          window.$(this.trigger).removeClass('active');
        }else{
          this.searchTransitionTimeline.play()
          window.$(this.trigger).addClass('active');
        }
      }.bind(this));
    },
    tryClosing: function(event){
      if(event.key == "Escape" && $(this.trigger).hasClass('active')){
        this.searchTransitionTimeline.reverse()
        window.$(this.trigger).removeClass('active');
      }
    }
  }
})();
$(function(){
  belchfssc_.init();
});