Copy-with-Style reviews and mentions

• Bringing it all together: Copy With Style
  1 project | dev.to | 5 Jan 2022

  Argument Default value Description button None an HTML element that can be clicked. Ideally a button element. If it has a progress element as a child or sibling this can be used for monitoring progress on style in-lining. Unnecessary unless you are copying very large HTML elements with many 10s or 100s of thousands of children. element None an HTML element that will be copied ()with all its children) to the clipboard when button is clicked. stylesheets [] An array of strings that represent CSS style sheets. For example ["default.css", "extras.css"]. If this is a non empty array then only styles from these sheets will be included in the copy. if you know your element only draws styles from specific sheets, then specifying them can speed up the style inlining and/or shrink the size of the copy. Otherwise all the stylesheets the document includes will be used. mode "attribute" A string. Either "attribute" or "tag". If "tag" then a tag is added to the copy and the element's style attributes are left untouched. This is fast and can conserve pseudo elements like :hover. Most email clients can't cope with this, but it will produce a rich copy in HTML contexts that do.
  If "attribute" then the style attributes of element and all its children will be updated with style information taken from the stylesheets and the browsers computed styles, to produce as true a copy as possible. This produces a larger copy generally than "tag" but is respected by most email clients today. It's also a lot slower to produce if your element is large enough canhave significant processing costs. defer [50000,0] Meaningful only if mode == "attribute" and determines if and how often the style in-liner will defer to to UI to keep the UI responsive. Possible values are:
  true: defer to the UI after ever element is processed. Not recommended, slows down processing immensely.
  false: never defer to the UI while in-lining. Will lock the UI until finished. No problem for small elements, can be bothersome for very large elements.
  [threshold, frequency]: The UI is deferred to only if more than threshold elements are being copied, and only once ever frequency elements are processed. If frequency is 0 and a progress bar is specified, it is is optimised to be number of elements per progress bar pixel triggers ["button"] Meaningful only if mode == "attribute" and determines how and when style in-lining is triggered. This is an array of triggers and can contain:
  "button": to request that style in-lining happen when the copy button is clicked.
  "schedule": to schedule a style in-lining once the DOM is fully rendered.
  "observe": to request that element be observed, and if it's seen to change, then a style in-lining will be triggered. This is useful if element is responsive to user interactions. If defer is set to maintain a responsive UI any change to element will trigger a request for any existing in-lining to bail and start one anew.
  Sensible combinations are:
  ["button"] for small and moderate elements.
  ["schedule", "observe"] for extremely large elements. progress false Meaningful only if mode == "attribute" and requests that a progress bar be displayed to convey the progress of style in-lining. Accepts the following values:
  false: no progress bar is used.
  true: a progress bar is used if an HTML progress element is found as a sibling or child of element.
  an HTML progress element: specify an element if you prefer and it will be used.
  If a progress bar is being used then defer is also set, to [0, 0] if it is not set (false) or the threshold is set to 0 if it is an Array of 2 elements. This is necessary because without a deferral to UI the progress bar will not update (render). copy_wrapper true element is wrapped in a simple

  with id copy_me_with_style before styling (either by tag or attribute as specified by mode). If true the wrapper will be place on the clipboard, if false only its contents will be (i.e element and any style information added). class_button "copy_with_style" The CSS class assigned to the provided button. This is the buttons rest state though it conserves this class across all states. When clicked in this state the button will trigger a copy preparation if necessary and a copy of prepared data to the clipboard. class_preparing "preparing_for_copy" The CSS class assigned to the provided button when copy preparation is in progress. This may be very very quick (near instantaneous) or take some while, depending on choice of mode and size of the element. Most things are very fast, but "attribute" mode with very large elements can be slow. When in this state the button will either be disabled or trigger a restart of the preparation depending on configuration. class_ready "ready_to_copy" The CSS class assigned to the provided button when copy preparation is in complete and a copy is ready to place on the clipboard. When in this state the button will simply copy the prepared texts and HTML to the clipboard. deep_exclusions null Meaningful only if mode == "attribute" and provides a function to call, which accepts an HTML element as its only argument, and returns true if that element and all its children should be excluded from the copy.
  The default implementation excludes all hidden (not visible) elements.
  If provided, this function replaces the default implementation. shallow_exclusions null Meaningful only if mode == "attribute" and provides a function to call, which accepts an HTML element as its only argument, and returns true if that element and and only that element should be excluded from the copy (its children are grafted onto the parent).
  The default implementation excludes all all A tags that link internal to the site (href begins with /) and DIV tags that have the class "tooltip".
  If provided, this function replaces the default implementation. extra_deep_exclusions null Identical to deep_exclusions, except that it augments rather than replaces the default implementation. extra_shallow_exclusions null Identical to shallow_exclusions, except that it augments rather than replaces the default implementation. debug false If true, debugging information will be written to the console. Useful for checking the scheduling and observation and copy event triggers and such. Was used in developing and tuning this little class and remains in place for future use. log_performance false If true will log style in-lining performance to the console. This was used to arrive at the performance statistics discussed above. log_HTML_to_console false If true will log the styled HTML to the console, where it can be inspected. Useful for debugging if pasting brings no joy. log_text_to_console false If true will log the styled text to the console, where it can be inspected. Useful for debugging if pasting brings no joy. check_clone_integrity false When adding styles element is cloned and it is this clone that is styled and added to the clipboard. true request that after cloning its integrity is checked. It's never failed, and there's no reason it should, and this is unlikely to be of any great use. classes_to_debug [] An array of CSS class names. If specified will break in the browser debugger during style in-lining when an element with one of the named classes is being processed. A nice way to drill down to specific classes to inspect the JavaScript variables if for any reason in-lining is not producing joy for a given class. styles_to_debug [] An array of style names. If specified will break in the browser debugger during style in-lining when an element with one of the named styles being applied is being processed. A nice way to drill down to specific styles to inspect the JavaScript variables if for any reason in-lining is not producing joy for a given class. if classes_to_debug are defined will break if both a class and style match are found. This can of course easily be tuned in code as needed.

  Conclusion

  And that brings this 12 part series to a conclusion, having introduced a small JavaScript class/library, Copy With Style:

  https://github.com/bernd-wechner/Copy-with-Style/blob/master/README.md

  It is currently 857 lines, albeit unminimised runs at 35kB thanks to what is hopefully clean documented code. It does drop to 16kB when minimised and comments all stripped:

  https://www.minifier.org/
  https://html-cleaner.com/js/

  though few minimisers I tried cope with the class definition (bizarrre).

  I hope it finds some use. After the survey of existing options failed to provide a sensible one for a client side Copy button, I was stuck writing one and it was a journey.

• Copy With Style: JavaScript Curios
  3 projects | dev.to | 27 Dec 2021