Responsive Accessible Text Cropping Library – cropCopyRestore.js

Preview:

Description:

cropCopyRestore.js is a standalone JavaScript library which allows to truncate long text by lines and provides an accessible way to toggle the truncated content with a smooth sliding effect.

How to use it:

Wrap your long text into DIV elements as shown below. The ‘data-cropCopyRestore’ attribute is used to specify how many lines you’d like to truncate the text.

<div class=CCR>
  <div class=CCR_txt data-cropCopyRestore=2>
    Long Text Here
  </div>
</div>

Include the main JavaScript file ‘cropCopyRestore.xx.min.js’ at the end of your html document.

<script src="js/cropCopyRestore.2.1.min.js"></script>

The helper classes.

* { box-sizing: border-box; }
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

The main CSS styles.

.CCR {
  /* Animated via JS embedding inline max-height values */
  /* Note: 1ms shorter than SVG rotation duration */
  overflow: hidden;
  transition: max-height .6s ease-out;
}
.CCR_txt {
  /* Optional, adjust to meet individual project */
  color: #fff;
  background-color: #000;
 padding: .75rem 1rem;
}
.CCR_txt[role="button"] { cursor: pointer; }

The icon styles.

.CCR_icon {
  /* SVG container (required) */
  /* Fixes Safari's focus/hover state box-shadow */
  /* Override colours here if required: */
  /* color: #fff; */
  background-color: #3a3a3a;
  float: right;
  margin: 0 0 .75rem .75rem;
  /* Today we look through the round window */
  border-radius: 100%;
  overflow: hidden;
  display: block;
  width: 1.5em;
  height: 1.5em;
  -webkit-transition: box-shadow .3s ease-out;
  transition: box-shadow .3s ease-out;
}
.CCR_svg {
  background-color: transparent;
  color: currentColor;
  border: .125em solid currentColor;
  border: 2px solid #3a3a3a;
  border-radius: 100%;
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 4;
  stroke-linecap: square;
  stroke: currentColor;
  /* Note: 1ms longer than SVG rotation duration */
  -webkit-transition: transform .7s ease-out;
  transition: transform .7s ease-out;
}

The icon animation.

.CCR-expanded .CCR_svg { /* 360deg provides a slower rotation */
transform: rotateZ(180deg); }
.CCR_use-plus {
  /* Note: same as SVG rotation duration */
  -webkit-transition: opacity .7s ease-out;
  transition: opacity .7s ease-out;
}
.CCR-expanded .CCR_use-plus { opacity: 0; }
/* Acts as focus state indicator for the control */
/* A requirement to meet WCAG 2 */
.CCR_txt:hover > .CCR_icon, .CCR_txt:focus > .CCR_icon { box-shadow: 0 0 0 4px #99BAD9; }