[Finalized] Clipboard and Popup (Semantic UI)

Official Snippet Used


geeky stuff
#popup | #semantic | #clipboardjs

In relation to my [1] previous entry of the same subject matter, I finally am able to finalize the code which makes the popup functionality works exactly how I want it to where it brings the following features:-

  1. 'Copy to clipboard' tooltip displays upon hovering over the button;
  2. Ability to have the button 'auto-' triggered and clicked without having to bring the cursor to the button itself as I utilize Vimium extension for Chromium browser. This extension allows users to open a link by typing the letter(s) associated with it;
    Shown in the photo above is an example. A user can just press the 'F' key to open the link should it be associated with a URL. In this case however, it executes the 'copy' function followed by the popup set.
  3. Following a successful 'copy to clipboard' occasion, a tooltip pops up with 'Copied' message;
  4. It returns to the initial popup display when hovered over again.
Please note though that this is just meant for Demo1.

The codes are as follows:-

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

<script>
(function($) {
  'use strict'

  $(function() {

    $('.clip').before('<button class="button-demo" data-clipboard-target><i class="copy icon"></i></button>')
    $('[data-clipboard-target]')
      .popup({
        content: 'Copy to clipboard',
        //variation: 'inverted',
        position: 'left center',
      })

    var clipboard = new ClipboardJS('[data-clipboard-target]', {
      target: function(trigger) {
        return trigger.nextElementSibling;
      }
    })

    clipboard.on('success', function(e) {
      e.clearSelection();
      $(e.trigger)
        .attr('title', 'Copied')
        .popup('fixTitle')
        .popup({
          onCreate: function() {
            $(e.trigger)
              .popup({
                //variation: 'inverted',
                position: 'left center',
              })
              .popup('toggle');
          }
        })
        .popup('show')
        .attr('title', 'Copy to clipboard')
        .popup('fixTitle')
        .popup('show')
    })

    clipboard.on('error', function(e) {
      $(e.trigger)
        .attr('title', 'Please copy manually')
        .popup('fixTitle')
        .popup({
          onCreate: function() {
            $(e.trigger)
              .popup({
                //variation: 'inverted',
                position: 'left center',
              })
              .popup('toggle');
          }
        })
        .popup('show')
        .attr('title', 'Copy to clipboard')
        .popup('fixTitle')
        .popup('show')
    })

  })

}(jQuery))
</script>
<div class="clip clip-demo">
  "Lorem ipsum dolor sit amet."
</div>

<div class="clip clip-demo" contenteditable="true">
  https://wraihan.com
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />

/* CUSTOM CSS */ 

.clip-demo {
  font-size: 95%;
  padding: .5em;
  display: flex;
  line-height: normal;
  width: auto;
  margin: auto;
  margin-bottom: 2em;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.button-demo {
  padding: .45em .25em .4em .3em;
  color: #fff;
  background: #008aa0;
  border: 1px solid #eee;
  border-radius: 2px;
  float: right;
  overflow: hidden;
}
"Lorem ipsum dolor sit amet."
https://wraihan.com
OR you can play with the code itself on JSFiddle.


Kali terakhir halaman ini dikemaskini/disemak semula adalah pada .
Top