span copy

trying to copy a span to clipboard thru jqueryui menu

by Basile Starynkevitch

HTML

<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.5/clipboard.min.js"></script>
<!-- HTML code -->
<div id='maindiv_id'>

  <h2>about</h2>
  <p>
    This uses <a href='http://clipboardjs.com/'>clipboard.js</a> by Zeno Rocha, <a href='http://jquery.com'>JQuery 2.2</a>, <a href='http://jqueryui.com/'>JQueryUI</a> 1.11 menus. The real program motivating this is the <a href='https://github.com/bstarynk/melt-monitor-2015'>MELT monitor</a>    (GPLv3 licensed) on <tt>github</tt>. In that program, the relevant <span class='momitemref_cl'>words</span> are in fact some kind of identifiers or variables.
  </p>

  <hr/>
  <h2>demo</h2>
  <p>Some <span class='momitemref_cl'>words</span> here <span class='momitemref_cl'>are</span> in <span class='momitemref_cl'>red</span> &amp; <span class='momitemref_cl'>italics</span> (in HTML5 <span class='momitemref_cl'>they</span> are <tt>span</tt>-s
  of <tt>class='momitemref_cl'</tt>); right-mouse-click on <span class='momitemref_cl'>them</span>, a dynamically generated <span class='momitemref_cl'>menu</span> (a JQueryUI <span class='momitemref_cl'>one</span>) should appear. If you choose <tt>Hilight</tt> in that <span class='momitemref_cl'>menu</span>, every occurence of that
    word should be hilighted. If you choose <tt>Copy</tt>, the word should be selected and copied to the clipboard. BTW, a few <span class='momitemref_cl'>words</span> may occur several times in <span class='momitemref_cl'>red</span>, <span class='momitemref_cl'>they</span>    would hilight together.</p>
</div>

<hr/> 

<p>
See <a href='http://stackoverflow.com/q/35340862/841108'>my question</a> on StackOverflow.
<br/>
<br/> Maybe I should have a different approach.
<br/> Perhaps I should use <tt>contextmenu</tt>-s.
</p>

CSS

/* CSS code */

body {
  font-size: 90%;
}

span.momitemref_cl {
  color: darkred;
  font-family: Helvetica;
  font-style: oblique;
}

span.momhilight_cl {
  background-color: orange;
  border: 2px dotted green;
}

span.momitemref_cl:hover {
  color: red;
  font-family: Helvetica;
  font-style: oblique;
  background-color: yellow;
  border: 1px dotted #340939;
}

ul.mommenu_cl {
  color: navy;
  align-items: flex-start;
  position: absolute;
  width: auto;
  display: table;
  /* see http://stackoverflow.com/a/34753674/841108 */
}

JavaScript

/// javascript code
var $clipboardh;
var $maindiv;
var mom_menuitemcount = 0;
var mom_menuitem = null;

// destroy the menu
function destroy_menu() {
  if (!mom_menuitem) return;
  console.log("destroy_menu mom_menuitem=", mom_menuitem);
  $(mom_menuitem).menu("destroy"); // destroy the JqueryUI menu
  mom_menuitem.remove(); // remove it from the DOM
  mom_menuitem = null; // forget it for the GC
}

console.log("before make_menu");
// make a menu for the given span
function make_menu(spa) {
  console.log("make_menu spa=", spa);
  var name = $(spa).text();
  mom_menuitemcount++;
  var menuid = "menuid_" + mom_menuitemcount;
  console.log("make_menu name=", name, " menuid=", menuid);
  $maindiv.after("<ul class='mommenu_cl' id='" + menuid + "'>"
               + "<li class='ui-state-disabled'>* <i>" + name + "</i> *</li>"
    // the text inside the following <li> matters
    + "<li>Hilight</li>" + "<li>Copy</li>" + "</ul>");
  var mymenu = $('#' + menuid);
  mymenu.menu({
    select: function(ev, ui) {
      var uitem = ui.item;
      var utext = uitem.text();
      console.log("mymenu-select ev=", ev, " ui=", ui, " name=", name,
        " uitem=", uitem, " utext=", utext);
      switch (utext) {
        case "Hilight":
          $maindiv.find(".momitemref_cl").each(function(ix, el) {
            var etext = $(el).text();
            console.log("hilighting el=", el, " etext=", etext);
            if (etext == name) {
              $(el).toggleClass("momhilight_cl");
            }
          });
          break;
        case "Copy":
          //// what should go here?
          break;
      };
      setTimeout(200, destroy_menu);
    },
    position: {
      my: "left top",
      at: "bottom left",
      of: spa
    }
  });
  mom_menuitem = mymenu;
  console.log("make_menu spa=", spa, " mymenu=", mymenu);
  return mymenu;
}

console.log("before ready");

$(document).ready(function() {
  $maindiv = $('#maindiv_id');
  $clipboardh = new Clipboard(".momitemref_cl", {
 ...