agorum.clipboardButton

Mit diesem Widget stellen Sie eine Schaltfläche dar, die Inhalte in die Zwischenablage des Browsers kopieren kann.

• Das System kopiert den Inhalt des Parameters html in die Zwischenablage.
• agorum.clipboardButton verhält sich ansonsten wie eine normale Schaltfläche, siehe agorum.button, agorum.menuItem.

Verwendung

---

let aguila = require('common/aguila');

let button = aguila.create({
  type: 'agorum.clipboardButton',
  text: 'copy html',
  html: '<b style="color:green">A text in bold with green color</b>'
});

button;

Events

---

Dieses Widget erbt alle Events von agorum.button, agorum.menuItem und enthält zusätzlich die folgenden Events.

copied

Löst aus, sobald:

• ein Benutzer auf die Schaltfläche geklickt hat
• das System den Inhalt des Parameters html in die Zwischenablage gelegt hat

Rückgabewerte

Sie erhalten den Parameter success mit true oder false zurück.

Wert	Beschreibung
true	Das Kopieren war erfolgreich.
false	Das Kopieren war erfolglos.

Beispiel

let aguila = require('common/aguila');

let button = aguila.create({
  type: 'agorum.clipboardButton',
  text: 'copy html',
  html: '<b style="color:green">A text in bold with green color</b>'
});

button.on('copied', success => {
  console.log('copy finished, success? ', success);
});

button;

Parameter

---

Dieses Widget erbt alle Parameter von agorum.button, agorum.menuItem und enthält zusätzlich die folgenden Parameter.

html

Definiert den Inhalt, den das System in die Zwischenablage kopiert.

• Der Inhalt muss HTML-Code sein.
• Das System legt den HTML-Code als HTML-Element in die Zwischenablage und fügt den Code beim Einfügen in ein HTML-fähiges Programm (etwa MS Office oder ein E-Mail-Client) korrekt wieder mit allen angegebenen Formatierungen ein.

Beispiel mit einem Link

let aguila = require('common/aguila');

let button = aguila.create({
  type: 'agorum.clipboardButton',
  text: 'copy link',
  html: '<a href="https://www.agorum.com" target="_blank">Link to agorum Website</a>'
});

button;

• Der kopierte Link muss ein HTML-Element sein.
• Programme, etwa MS Office, stellen diesen HTML-Code als Link dar.
• Fügen Sie den Inhalt in eine Browserzeile oder einen Texteditor ein, so fügt das System nur den Text ein ohne HTML-Code.

Beispiel: Den „rohen“ Link in die Zwischenablage kopieren

let aguila = require('common/aguila');

let button = aguila.create({
  type: 'agorum.clipboardButton',
  text: 'copy link',
  html: 'https://www.agorum.com'
});

button;

Funktionen

---

keine

Beispiele

---

Komplettes Beispiel mit verschiedenen Links

Das folgende Beispiel zeigt zusätzlich, wie eine Rückmeldung an den Benutzer erfolgen kann, wenn der Benutzer den Link kopiert hat.

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  width: 300,
  height: 400,
  items: [
    {
      type: 'agorum.textDisplay',
      text: 'Some samples for copying to browser clipboard.'
    },
    {
      type: 'agorum.clipboardButton',
      text: 'copy text',
      name: 'testCopyText',
      html: 'This text should be in the clipboad now'
    },
    {
      type: 'agorum.clipboardButton',
      text: 'copy link',
      name: 'testCopyLink',
      html: '<a href="https://www.agorum.com">The agorum website</a>'
    },
    {
      type: 'agorum.clipboardButton',
      text: 'copy raw link',
      name: 'testCopyRawLink',
      html: 'https://www.agorum.com'
    },
    {
      type: 'agorum.clipboardButton',
      text: 'copy html',
      name: 'testCopyHtml',
      html: '<b style="color:green">A text in bold with green color</b>'
    }
  ]
});

registerEvent('testCopyText');
registerEvent('testCopyLink');
registerEvent('testCopyRawLink');
registerEvent('testCopyHtml');

function registerEvent(name) {
  let clipboardButton = widget.down(name);

  // when copy is done, the copied event is called, with a success info
  clipboardButton.on('copied', success => {
    // remember the original text of the button
    let origText = clipboardButton.text;
    
    // set the button text to copied, to inform the user, that the copy is done
    clipboardButton.text = success ? 'copied' : 'error';

    // reset back the button text after 2 seconds
    clipboardButton.setTimeout(() => {
      clipboardButton.text = origText;
    }, 2000);
  });
}

widget;

Beispiel zur Verwendung mit form in einer list

let aguila = require('common/aguila');

let form = aguila.create({
  type: 'agorum.composite.form.basic',
  width: 500,
  height: 400,
  readOnly: true,
  elements: [
    {
      type: 'agorum.composite.form.element.list',
      name: 'listField',
      maxItems: 5,
      label: 'List',
      template: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'col1',
          label: 'Spalte 1',
          flexible: true,
          hidden: false,
          validation: [
            {
              required: true
            }
          ]
        },
        {
          type: 'agorum.clipboardButton',
          name: 'col2',
          readOnlyHidden: false,
          text: 'copy'
        }
        
      ],
      value: [
        {
          col1: 'Something to copy',
          col2: {
            type: 'custom',
            html: '<a href="https://www.agorum.com">Link aus list</a>'
          }
        }
      ]
    }
  ]
});

form;