Gebruiker:Bmulckhu/kladblok29

bron: codepen

JS

Opnemen in MediaWiki:Common.js

(function() {
  "use strict";

  function copyToClipboard(elem) {
    var target = elem;

    // select the content
    var currentFocus = document.activeElement;

    target.focus();
    target.setSelectionRange(0, target.value.length);

    // copy the selection
    var succeed;

    try {
      succeed = document.execCommand("copy");
    } catch (e) {
      console.warn(e);

      succeed = false;
    }

    // Restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
      currentFocus.focus();
    }

    if (succeed) {
      $(".copied").animate({ top: -25, opacity: 0 }, 700, function() {
        $(this).css({ top: 0, opacity: 1 });
      });
    }

    return succeed;
  }

  $("#copyButton, #copyTarget").on("click", function() {
    copyToClipboard(document.getElementById("copyTarget"));
  });
})();

Voorbeeld

CSS

.input-group {
  margin-top: 30px;
  position: relative;
}

.input-group {
  position: relative;
}

.input-group-addon {
  border: none;
}

.linkname {
  display: none;
}

#copyButton {
  cursor: pointer;
  background: #f1bb3a;
}

#copyTarget {
  border-left: none;
}

.copied {
  opacity: 1;
  position: absolute;
  left: 55px;
}

@media (min-width: 768px) {
  .copied {
    left: 135px;
  }

  .linkname {
    display: block;
    background: #3b3e45;
    color: #fff;
  }
}

HTML

<div class="container">
  <div class="input-group">
    <span class="input-group-addon hidden-xs linkname">
      <strong>My link</strong>
    </span>
    <span id="copyButton" class="input-group-addon btn" title="Click to copy">
      <i class="fa fa-clipboard" aria-hidden="true"></i>
    </span>
    <input type="text" id="copyTarget" class="form-control" value="mylink.com">
    <span class="copied">Copied !</span>
  </div>
</div>

Lukt niet met extensie:inputbox

<inputbox>
type=text
</inputbox>

Moet dus opgelost worden met Widget

My link Gekopieerd naar clipboard!

NB:

• Functioneert ok (in die zin dat de tekst gekopieerd wordt naar het Clipboard...)
• Niet goed:
  • Eerste onderdelen (My link) niet nodig
  • Copybutton wellicht erachter plaatsen
  • Tekst "Gekopieerd naar Clipboard" is altijd zichtbaar (oude Bootstrap ??)
  • Meerdere versies op 1 pagina werkt niet;
  • id="copyTarget" en id="copyButton" moeten variabel gemaakt worden !! Oeff.... :
    • in HTML,
    • maar ook in de "listener" / Jquery onderdeel van de Javascript...

Gekopieerd naar clipboard!

Verdere ontwikkeling

Specifieke widget aanmaken voor alleen de input-tag

Widget:Input

<includeonly><input <!--{$pars}-->>
</includeonly>

<includeonly><input 
<!--{if isset($type)}--> type="<!--{$type|validate:html}-->"<!--{else}--><!--{/if}-->
<!--{if isset($id)}--> id="<!--{$id|validate:html}-->"<!--{else}--><!--{/if}-->
<!--{if isset($class)}--> class="<!--{$class|validate:html}-->"<!--{else}--><!--{/if}-->
<!--{if isset($value)}--> value="<!--{$value|validate:html}-->"<!--{else}--><!--{/if}-->
>
</includeonly>

PS: Kan misschien ook met Formulier ??

TBD...