Contents

let Confirm = {
  target : ".button-wrap.switch-button",
  lock   : false
};

const ButtonConfirm = (e,type) => {
  let text = $(e.target),
      bg   = text.siblings(".button-bg"),
      btn  = text.parent(),
      all  = [text,btn,bg];

  let Text = {
    dis : {
      before : $(btn).siblings(".before"),
      after  : $(btn).siblings(".after")
    },
    dat : {
      before : $(btn).parent().siblings().children(".before"),
      after  : $(btn).parent().siblings().children(".after")
    }
  };

  if (!Confirm.lock) {

    if (type == 'down') {
     gsap.set([btn,bg],{
        scale : 0.95
     });
    }

    else if (type == 'up') {

     let tl   = gsap.timeline(),
         swap = gsap.timeline();

     swap
     .to([Text.dis.before,Text.dat.before],{
       duration : 0.2,
       opacity : 0
     })
     .set([Text.dis.before,Text.dat.before],{
       display : "none",
       delay : 0.2
     })
     .set([Text.dis.after,Text.dat.after],{
       display : "block"
     });

      tl
      .call(()=>{
        Confirm.lock = true;
      })
      .set(all,{
        clearProps : "all"
      })
      .set([btn,bg],{
        backgroundColor : Color.green
      })
      .to(bg,{
        duration : 0.5,
        scaleX   : 1.2,
        scaleY   : 1.3,
        opacity  : 0
      })
      .set(all,{
        clearProps : "all",
        delay : 1
      })
      .call(()=>{
        Confirm.lock = false;
      })
      ;
    }
  }
}

$(Confirm.target)
.mousedown(function(e) {
  ButtonConfirm(e,'down');
})
.mouseup(function(e) {
  ButtonConfirm(e,'up');
});

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
futuro-0.7.1	assets/js/footer/custom/SwitchButton.js
futuro-0.7.0	assets/js/footer/custom/SwitchButton.js