Contents

let Button = {
  target : ".button-wrap.switch-button"
};

const ButtonSwitch = (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")
    }
  };

  let before = [Text.dis.before,Text.dat.before],
      after  = [Text.dis.after,Text.dat.after];

  if (btn.hasClass("undo")) {

    if (type === "down") {

      gsap.set([btn,bg],{
        clearProps : "all"
      });

    } else if (type === "up") {

      $(btn).removeClass("undo");

      gsap.set([before,after],{
        clearProps : "all"
      });

      gsap.set(text,{
        text : "Switch"
      });
    }


  } else {

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

    else if (type === "up") {

     let tl = gsap.timeline();

      tl
      .to(before,{
        duration : 0.2,
        opacity : 0
      })
      .set([btn,bg],{
        backgroundColor : Color.green
      })
      .set(text,{
        text  : "Undo"
      })
      .set(before,{
        display : "none",
      })
      .set(after,{
        display : "block"
      })
      .to(bg,{
        duration : 0.5,
        scaleX   : 1.2,
        scaleY   : 1.3,
        opacity  : 0
      })
      .call(()=>{
        $(btn).addClass("undo");
      })
      ;
    }
  }
}

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

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
futuro-0.7.2	assets/js/footer/custom/SwitchButton.js