Cut/Copy/Paste

cut-copy-paste.markdown

Cut/Copy/Paste

CodePen multi-button challenge

A Pen by Adam Kuhn on CodePen.

License.

index.haml

#wrap.nocut
  %p
    Somebody once told me the world is gonna roll me //
    I ain't the sharpest tool in the shed //
    She was looking kind of dumb with her finger and her thumb //
    In the shape of an "L" on her forehead
    <br><br>
    Well the years start coming and they don't stop coming //
    Fed to the rules and I hit the ground running //
    Didn't make sense not to live for fun //
    Your brain gits smart but your head gits dumb //
    So much to do, so much to see //
    So what's wrong with taking the back streets? //
    You'll never know if you don't go //
    You'll never shine if you don't glow
    <br><br>
    Hey now, you're an all-star, get your game on, go play //
    Hey now, you're a rock star, get the show on, get paid //
    And all that glitters is gold //
    Only shooting stars break the mold
.multi-button
  %button.cut Cut
  %button.copy Copy
  %button.paste Paste
  .close

script.js

function surroundSelection() {
    var span = document.createElement("span");
    span.classList.add('selection');
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

$(".cut").on('click', function(){
  $('#wrap').removeClass("nocut");
  $('.selection').attr('data-splitting', 'words');
  Splitting();
    setTimeout(function(){
      $('.selection').remove();
      $('#wrap').addClass("nocut");
    }, 1500);
    setTimeout(function(){
      $('.multi-button').removeClass('visible');
      $('#wrap').removeClass("copy").removeClass('active');
    }, 1800);
});

$('.cut, .copy').click(function(){
    var selected = window.getSelection().toString();
    localStorage.setItem('text', selected);
});

$('.paste').on('click', function(){
  $('#wrap').addClass('pasted');
  setTimeout(function(){
        var newtext = localStorage.getItem('text');
        $('.selection').text(newtext);
    }, 1000);
  setTimeout(function(){
        $('.multi-button').removeClass('visible');
        $('#wrap').removeClass('pasted').removeClass('active');
    }, 1700);
});

$(".copy").on('click', function(){
  $('#wrap').addClass("copy");
      setTimeout(function(){
      $('.multi-button').removeClass('visible');
      $('#wrap').removeClass("copy").removeClass('active');
    }, 2600);
});

$("button").click(function(){
  $(this).addClass('active');
  $('body').addClass('active');
  var sel = window.getSelection ? window.getSelection() : document.selection;
      if (sel) {
          if (sel.removeAllRanges) {
              sel.removeAllRanges();
          } else if (sel.empty) {
              sel.empty();
          }
      }
  setTimeout(function(){
      $("button").removeClass('active');
    }, 1200);
  setTimeout(function(){
      $("body").removeClass('active');
    }, 3500);
})

$("#wrap").on('mousedown', function(){
  if ($(this).hasClass('nocut')){
    $('#wrap p span').contents().unwrap();
    $('#wrap p span').remove();
    $('.multi-button').removeClass('visible');
    $('#wrap').removeClass('active');
  }
});

$(".close").click(function(){
  $('.multi-button').removeClass('visible');
});

$("#wrap").on('mouseup', function(){
  var content = window.getSelection().toString().length;
  
    if (content > 0){
      $('.multi-button').addClass('visible'); 
      $('#wrap').addClass('active');
      $('#wrap').removeClass("copy");
    }
    else{
      $('.multi-button').removeClass('visible');
      $('#wrap').removeClass('active');
    }
    if ($(this).hasClass('nocut')){
      surroundSelection();
      var topPos = ($("#wrap p .selection").position().top - 50);
      var leftPos = ($("#wrap p .selection").position().left - 125);
      var width = ($("#wrap p .selection").width()/2);
      $('.multi-button').css({
           top:   topPos,
           left:  leftPos + width,
        });
    }
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/splitting@1.0.5/dist/splitting.min.js"></script>

style.scss

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  font-size:100%;
  &:before{
    content:'☝️ select some text';
    position:absolute;
    font-family:'Comfortaa', sans-serif;
    bottom:0;
    left:50%;
    display:inline-block;
    transform:translate(-50%, -20px);
    font-size:14px;
    padding:0 5px;
    border-bottom:1px solid yellow;
  }
  &.active{
    pointer-events:none;
  }
  .multi-button{
    position:absolute;
    transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease-in-out, top 0s ease-in-out, left 0s ease-in-out;
    transition-delay:0.3s, 0.0s, 0.6s, 0.6s;
    width:250px;
    display:flex;
    justify-content:space-between;
    border-radius:5px;
    transform-origin:bottom;
    transform:scaleY(0);
    transform-style:preserve-3d;
    perspective:100px;
    box-shadow:0 0px 20px -10px rgba(0,0,0,0);
    .close{
      content:'';
      position:absolute;
      width:15px;
      height:15px;
      background:linear-gradient(-45deg, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(45deg, red calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), red calc(50% + 1px));
      border-radius:100%;
      box-shadow:inset 0 0 0 2px red, 0 0 0 2px #222;
      right:-7.5px;
      top:-7.5px;
      transform:scale(0);
      transition:0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      cursor:pointer;
    }
    &:before{
      transition:0.3s ease-in-out;
      content:'';
      position:absolute;
      width:125%;
      height:112.5%;
      top:-25%;
      left:-12.5%;
      background:rgba(255,255,255,0);
      backdrop-filter: blur(0px);
      box-shadow:0px -25px 25px 10px redrgba(255,255,255,0);
      border-radius:10px;
    }
    button{
      outline:none; 
      padding:10px;
      background:#fff;
      border:none;
      font-family:'Comfortaa', sans-serif;
      text-transform:uppercase;
      font-weight:900;
      letter-spacing:2px;
      width:33.333%;
      cursor:pointer;
      box-shadow:0 0 0 1px #222, inset 0 0 0 1px #555;
      transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease-in-out, padding 0.2s ease-in-out;
      transition-delay:0.2s, 0.3s, 0s;
      backface-visibility:hidden;
      overflow:hidden;
      position:relative;
      box-sizing:border-box;
      &:before, &:after{
        content: '';
        width: 15px;
        height: 15px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        left: 10px;
        transform:translateY(-300%);
        transition:0.2s ease-in-out;
      }
      &:after{
        width:20px;
        height:20px;
        transform:translateY(300%);
        background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/like.svg');
      }
      &.cut{
        &:before{
          background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/cut%20(1).svg');
        }
      }
      &.copy{
        &:before{
          background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/copy.svg');
        }
      }
      &.paste{
        &:before{
          background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/paste.svg');
        }
      }
      &:first-of-type{
        transform-origin:right;
        transform:rotateY(-90deg);
        background:#ccc;
        border-radius:5px 0 0 5px;
      }
      &:nth-of-type(3){
        transform-origin:left;
        transform:rotateY(90deg);
        background:#ccc;
        border-radius:0 5px 5px 0;
      }
    }
    &.visible{
      transform:scaleY(1);
      transition-delay:0s, 0.2s, 0s, 0s;
      box-shadow:0 20px 20px -10px rgba(0,0,0,0.5);
      .close{
        transition-delay:0.75s;
        transform:scale(1);
        &:hover{
          transform:scale(1) rotate(90deg);
          transition-delay:0s;
        }
      }
      &:before{
        transition-delay:0.3s;
        background:rgba(255,255,255,0.25);
        backdrop-filter: blur(0.25px);
        box-shadow:0px -25px 450px 10px rgba(255,255,255,0.25);
      }
      button{
        transition-delay:0.4s, 0s, 0s;
        transform:rotateY(0deg);
        background:#fff;
        &.active{
          padding-left:20px;
          padding-right:0px;
          &.cut{
            padding-left:10px;
          }
          &:before{
            transition-delay:0.25s;
            transform:translateY(-300%);
          }
          &:hover{
            &:before{
              transition-delay:0.25s;
              transform:translateY(-300%);
            }
          }
          &.paste{
            &:after{
              transition-delay:0.25s;
              transform:translateY(calc(-50% - 2.5px)) translateX(-2.5px);
            }
          }
          &:after{
            transition-delay:0.25s;
            transform:translateY(calc(-50% - 2.5px));
          }
        }
        &:hover{
          background:yellow;
          padding-left:20px;
          padding-right:0px;
          &.cut{
            padding-left:10px;
          }

          &:before{
            transform: translateY(-50%);
          }
        }
      }
    }
  }
  #wrap{
    width:90%;
    max-width:700px;
    &.pasted{
      p{
        .selection{
          animation:paste 1s ease-in-out 2 alternate;
          @keyframes paste{
            to{
              color:transparent;
            }
          }
        }
      }
    }
    &:not(.nocut).active{
      .selection{
        background:transparent;
      }
    }
    &:not(.nocut){
      .selection{
        color:transparent;
        transition:none;
        span.word{
          &:before, &:after{
            animation:remove1 1.4s ease-in-out 1 forwards;
            @keyframes remove1{
              to{
                transform:translate(calc(-50% + 100px), 50vh) rotate(90deg);
                opacity:0;
              }
            }
            @keyframes remove2{
              to{
                transform:translate(calc(-50% - 100px), 50vh) rotate(-90deg);
                opacity:0;
              }
            }
          }
          &:after{
            animation:remove2 1.4s ease-in-out 1 forwards;
          }
        }
      }
    }
    &.active{
      &.copy{
        .selection{
          position:relative;
          z-index:-1;
          &:before{
            content:'';
            position:absolute;
            width:200vw;
            height:10px;
            background:#fff;
            box-shadow:0 0 40px 20px #fff;
            left:-50vw;
            top:-50px;
            animation:scan 2s ease-in-out 1 forwards, glow 2s ease-in-out 1 forwards;
            @keyframes scan{
              to{
                top:calc(100% + 50px);
              }
            }
            @keyframes glow{
              0%{
                opacity:0.25;
              }
              10%{
                opacity:1;
              }
              45%{
                box-shadow:0 0 40px 20px #fff;
              }
              50%{
                box-shadow:0 0 40px 80px #fff;
              }
              55%{
                box-shadow:0 0 40px 20px #fff;
              }
              90%{
                opacity:1;
              }
              100%{
                opacity:0.25;
              }
            }
          }
        }
      }
      .selection{
        animation:shift 0.4s ease-in-out 1 forwards;
        background:linear-gradient(to right, yellow 50%, #222 50%);
        background-size:200% 200%;
        background-position:0% 50%;
        @keyframes shift{
          from{
            background-position:0% 50%;
            color:#222;
          }
          to{
            background-position:-100% 50%;
            color:#fff;
          }
        }
        @keyframes shift2{
          0%{
            background-position:0% 50%;
            color:#fff;
          }
          25%{
            background-position:0% 50%;
            color:#fff;
          }
          75%{
            background-position:-100% 50%;
            color:#222;
          }
          100%{
            background-position:-100% 50%;
            color:#222;
          }
        }
      }
      *{
        &::selection {
          background: transparent;
        }
        &:focus, &:active{
          &::selection {
            background: transparent;
          }
        }
      }
    }
    &.nocut:not(.active){
      *{
        &::selection {
          background: yellow;
        }
        &:focus, &:active, &::first-letter{
          &::selection {
            background: yellow;
          }
        }
      }
    }
    p{
      font-family:'Crimson Text', serif;
      font-size:1.25rem;
      line-height:1.5;
      color:#222;
      padding:10px;
      display:inline-block;
      overflow:hidden;
      .selection{
        position:relative;
        background:transparent;
        transition:0.3s ease-in-out;
        padding:5px 0;
        span.word{
          position:relative;
          color:transparent;
          transition:none;
          width:auto;
          box-sizing:border-box;
          display:inline-block;
          @for $i from 1 through 20{
            &:nth-of-type(#{$i}n){
              &:before, &:after{
                animation-delay:#{$i/60}s;
              }
              &:nth-of-type(even){
                &:before, &:after{
                  animation-delay:#{$i/60}s;
                }
              }
            }
          }
          @for $j from 1 through 12{
            &:nth-of-type(#{$j}n){
              &:before, &:after{
                animation-duration:#{0.75 + ($j/10)}s;
              }
            }
          }
          &:before, &:after{
            content:attr(data-word);
            color:#222;
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%, -50%) rotate(0deg);
            display:inline-block;
            will-change:transform;
            backface-visibility:hidden;
            width:100%;
            box-sizing:border-box;
            clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
          }
          &:after{
            clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
          }
        }
      }
    }
  }
}