Bootstrap Buttons

Button

Bootstrap-Buttons können über den Konstruktor Alvine.Package.UI.Dialog.Button(content, options) erstellt werden.

button = new Alvine.Package.UI.Dialog.Button('OK', options);

Über Optionen können verschiedene Aspekte des Buttons definiert werden.

Schlüssel Beschreibung Default Beispiel
autofocus Dieses Element soll den Autofocus erhalten undefined
class CSS-Klasse des Buttons btn btn-primary btn btn-secondary
class-icon-prefix Icon-Klasse, das vor dem Inhalt angezeigt wird undefined
class-icon-suffix Icon-Klasse die nach den Inhalt angezeigt wird (wird für Spinner verwendet) undefined
content Schatfläche des Buttons OK
disabled Sperren des Buttons undefined WAHR
form ID des zugehörigen Formulars undefined
formaction Aktion des Formulars undefined
formenctype Encoding des Formulars undefined
formmethod Methode des Formulars undefined
formtarget Zeil im Formular undefined
id ID des Buttons zufällige ID myID
on Übergabe von Eventhandler an den button undefined click': function(event)
placement Position (wird bei Tooltip aus dem tooltipPosition übernommen) undefined
target Setzt den Wert data-target und wird zum Beispiel zum öffnen für Modal-Dialoge verwendet. undefined #myid
title Im Falle eines Tooltips wird title mit dem Wert aus tooltipText überschrieben undefined
toggle Alternatives Toggle zum Beispiel für Dropdown oder Collapse undefined
tooltipPosition Positon des Tooltips top bottom
tooltipText Text des Tooltips undefined Das ist ein Tooltip
type Typ des Buttons undefined submit
value Wert der mit dem Button übertragen werden soll undefined submit

Wird ein Tooltip über tooltipText definiert, so kann keine andere Funktion (Dropdown, Collapse) definiert werden.

Die Methode Button.showSpinner() zeigt ein Spinner-Icon an und deaktiviert den Button. Mit Button.hideSpinner() kann der Spinner wieder deaktiviert werden. Neben dem Spinner kann auch ein Erfolgsicon mit Button.showSuccess() und ein Icon für den Fehlerfall mit Button.showFailure() angzeigt werden.

Button mit Spinner

Die Methode Button.removeIcons() entfertn alle Icon-Klassen und aktiviert den Button. Die Methode Button.hideSpinner() ist ein Alias für Button.removeIcon().

Button

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
   "content": "OK",
   "options": {},
}
button = new Alvine.Package.UI.Dialog.Button.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

json = {
   "icons": ['fal fa-file', 'fal fa-angle-right', 'fal fa-save'],
   "options": {},
}
button = new Alvine.Package.UI.Dialog.Button.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Ein DropdownButton besitzt ein Menü, das durch Klick auf den Button geöffnet wird und verschiedene Menüeinträge enthalten kann.

button = new Alvine.Package.UI.Dialog.DropdownButton(content, options);

Über Optionen können verschiedene Aspekte des Buttons definiert werden, siehe hierzu die Tabelle bei Buttons.

Hinweis

Ein Dropdown-Button kann keinen Toltip enthalten.

Neue Menüeinträge können über die Methode DropdownButton.addItem(item) dem Button hinzugefügt werden. Über die Methode DropdownButton.hasItem(item) kann geprüft werden, ob ein Item enthalten ist und über DropdownButton.removeItem(item) kann ein Eintrag wieder entfernt werden. Mit Hilfe der Methode DropdownButton.getItem() kann ein Eintrag ausgelesen werden.

Alle Items bekommt man über die Methode DropdownButton.getItems()

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
    "content": "OK",
    "options": {},
    "items": [
        {
            "name": "Alvine.Package.UI.Dialog.DropdownButtonItem",
            "dataset": {
                "value":"wert1",
                "label":"Item 1",
                "options": {}
            }
        },
        {
            "name": "Alvine.Package.UI.Dialog.DropdownButtonItem",
            "dataset": {
                "value":"wert2",
                "label":"Item 2",
                "options": {}
            }
        }
    ]
}
dropdownButton = new Alvine.Package.UI.Dialog.DropdownButton.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

json = {
    "icons": ['fal fa-file', 'fal fa-angle-right', 'fal fa-save'],
    "options": {},
    "items": []
}
dropdownButton = new Alvine.Package.UI.Dialog.DropdownButton.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Menüeinträge des DropdownButton sind Objekte vom Typ DropdownButtonItem.

button = new Alvine.Package.UI.Dialog.DropdownButton(options);
button.addItem(new Alvine.Package.UI.Dialog.DropdownButtonItem(target, label, options));

Ein Menüeintrag kann folgende Optionen besitzen:

Schlüssel Beschreibung Default Beispiel
id ID des Buttons zufällige ID myID
value Ziel des Menüeintrages #
label Bezeichnung des Menüeintrages - Liste
class CSS-Klasse des Eintrages dropdown-item

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
    "target":"#dasisteinziel",
    "label":"Item 1",
    "options": {}
}
dropdownButtonItem = new Alvine.Package.UI.Dialog.DropdownButtonItem.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

ButtonGroup

Mehrere Buttons können mit Hilfe einer ButtonGroup zusammengefasst werden. Über die Methde ButtonGroup.addButton(button) werden Buttons zur Gruppe hinzugefügt. Über ButtonGroup.getButtons() können alle Buttons der Gruppe ermittelt werden. Über ButtonGroup.hasButton(button) kann geprüft werden ob ein Button bereits enthalten ist und über ButtonGroup.removeButton(button) kann ein Button entfernt werden. hasButton und removeButton prüfen vom Button die ID und den Inhalt, sind diese identisch, so werden die Buttons als gleich angesehen.

group = new Alvine.Package.UI.Dialog.ButtonGroup();
group.addButton(new Alvine.Package.UI.Dialog.Button(content));

Eine ButtonGroup besitzt nur die Eigenschaft id:

Schlüssel Beschreibung Standard Beispiel
class CSS-Klasse btn-group mr-2 btn
id ID undefined myID

Über die Methode ButtonGroup::getInstanceFromDataset() wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
    "options": {},
    "buttons": [
        {
            "name": "Alvine.Package.UI.Dialog.Button",
            "dataset": {
                "content":"A",
                "options": {}
            }
        },
        {
            "name": "Alvine.Package.UI.Dialog.Button",
            "dataset": {
                "content":"B",
                "options": {}
            }
        }
    ]
}

buttonGroup = Alvine.Package.UI.Dialog.ButtonGroup.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Objektreferenz

ButtonGroup(options)

Neue Button-Gruppe erstellen


Parameter-Liste

options (Object)

Optionen (siehe Tabelle)

Rückgabewert

Alvine.Package.UI.Dialog.ButtonGroup

ButtonGroup.addButton(button)

Button zur Gruppe hinzufügen


Parameter-Liste

button (Alvine.Package.UI.Dialog.Button)

Button

Rückgabewert

Alvine.Package.UI.Dialog.ButtonGroup

ButtonGroup.getButtons()

Alle Buttons


Rückgabewert

Alvine.Types.Collection

ButtonGroup.hasButton(button)

Überprüfen ob der Button enthalten ist


Parameter-Liste

button (Alvine.Package.UI.Dialog.Button)

Button-Objekt

Rückgabewert

bool

ButtonGroup.removeButton(button)

Button entfernen


Parameter-Liste

button (Alvine.Package.UI.Dialog.Button)

Zu entfernender Button

Rückgabewert

Alvine.Package.UI.Dialog.ButtonGroup

ConfirmationButton

Der Alvine.Package.UI.Dialog.ConfirmationButton() erlaubt die Abfrage einer Bestätigung direkt an einem ElementFür die Funktionalität wird bootstrap-confirmation.js verwendet.


new Alvine.Package.UI.Dialog.ConfirmationButton(
        '<i class="fal fa-trash"></i>',
        {
            'class': 'btn btn-secondary',
            'on': {
                'click': (event)=>console.log(event)
            }
        })

Schlüssel Beschreibung Standard Beispiel
autofocus Autofokus undefined true
class Klasse des Buttons btn btn-primary btn btn-primary
class-icon-prefix Icon vor dem Buttontext undefined fal fa-atom
class-icon-suffix Icon nach dem Buttontext undefined fal fa-atom
confirm-btn-cancel-class CSS-Klasse des Buttons undefined btn btn-primary
confirm-btn-cancel-icon-class Icon Klasse undefined -
confirm-btn-cancel-icon-content Icon Inhalt undefined -
confirm-btn-cancel-label Label des Abbruch-Buttons i18n:cancel abbruch
confirm-btn-ok-class CSS-Klasse des Buttons undefined btn btn-primary
confirm-btn-ok-icon-class CSS-Klasse des Buttons undefined btn btn-primary
confirm-btn-ok-icon-content Button-Icon Inhalt undefined -
confirm-btn-ok-label Label des OK-Buttons i18n:ok OK
confirm-content Inhalt undefined -/-
confirm-popout Soll das Popover beim Klick ausserhalb verschwinden true true
confirm-singleton true, wenn nur ein Popover erlaubt ist true true
confirm-title Im Popover erscheinende Frage i18n:tooltip.delete Sicher?
content Inhalt des Buttons <i class="fal fa-question-circle"></i> Klick hier
control-group Zugehörige Kontrollgruppe undefined my-control-group
disabled Button deaktivieren undefined disabled
form Zugehöriges Formular undefined myform
formaction Action undefined -/-
formenctype Definiert wie der Wert encodes wird. undefined multipart/form-data
formmethod Methode undefined -/-
formtarget Target undefined -/-
function Verfügbare Funktionen des Controls undefined mycontrol
function-options Optionen für die Funktion (zum Beispiel der Dateiname oder eine ID) undefined myid
id ID des Buttons Zufällige ID mybutton
on Struktur für die Eventhandler des Buttons undefined
placement Platzierung top top
role Rolle des Buttons button button
target Ziel undefined mytarget
title Titel des Buttons undefined My Button
toggle Toggle-Modus confirmation tooltip
type Button Typ button button
value Wert des Buttons undefined mybavlue

Objektreferenz

ConfirmationButton(content, options)

Erstellt ein neues Confirmation-Control


Parameter-Liste

content (mixed)

Inhalt

options (Object)

Optionen (siehe Tabelle)

Rückgabewert

ConfirmationButton-Control

ButtonToolbar

Mehrere ButtonGroup-Objekte können zu einer ButtonToolbar(options) zusammengefasst werden. Neue Gruppen werden über die Methode ButtonToolbar.addButtonGroup(buttongroup) hinzugefügt.

toolbar = new Alvine.Package.UI.Dialog.ButtonToolbar();
toolbar.addButtonGroup(new Alvine.Package.UI.Dialog.ButtonGroup());

Eine ButtonGroup besitzt nur die Eigenschaft id:

Schlüssel Beschreibung Standard Beispiel
class CSS-Klasse undefined toolbar
id Zufällige ID Zufällige ID myToolbar

Über die Methode ButtonToolbar.getButtonsByFilter(callback) kann man sich alle Buttons einer Toolbar holen. Der Filter muss eine Zeichenkette für den Key zurückgeben.

Das Ergebnis des folgenden Aufrufes ist ein Objekt vom Typ Alvine.Types.Map mit allen Buttons - ausser dem Button mit der ID mybutton - der Toolbar. Der Schlüssel in der Map die ID des Buttons.

buttons = toolbar.getButtonsByFilter(button => {
    if(button.get('id')==='mybutton') return null;
    return button.get('id');
});

Objektreferenz

ButtonToolbar(options)

Neues ButtonToolbar-Objekt


Parameter-Liste

options (Object)

Optionen (siehe Tabelle)

Rückgabewert

ButtonToolbar-Objekt

ButtonToolbar.addButtonGroup(buttongroup)

Button-Gruppe hinzufügen


Parameter-Liste

buttongroup (Alvine.Package.UI.Dialog.ButtonGroup)

Buttongruppe

Rückgabewert

Alvine.Package.UI.Dialog.ButtonToolbar

ButtonToolbar.getButtonsByFilter(callback)

Button der Toolbar mit einem Callback filtern und zurückgeben. Die Callbackfunktion muss true, bzw. false zurückgeben.


Parameter-Liste

callback (Function)

Filterfunktion

Rückgabewert

Alvine.Types.Map

createButtonToolbar()

Mit Hilfe der Funktion createButtonToolbar() kann schnell und einfach eine ButtonToolbar definiert werden. Die Funktion erwartet als einziges Argument ein Array von einfachen Javascript Objekt-Array mit der gewünschten Konfiuration. Die Werte im Objekt sind identisch mit den Standardwerten eines Buttons.

Neben der Struktur kann auch ein Button-Objekt hinzugefügt werden.

buttonToolbar = Alvine.Package.UI.Dialog.createButtonToolbar([
    [
        {
            'id': 'editorbuttonSave',
            'icons': ['fa fa-file-o', 'fa fa-angle-right', 'fa fa-floppy-o'],
            'tooltip': 'i18n:editorbuttonsave'
        },

        new Alvine.Package.UI.Dialog.Button(...),  // Button-Objekt direkt integrieren.

        {
            'id': 'editorbuttonSaveAll',
            'icons': ['fa fa-files-o', 'fa fa-angle-right', 'fa fa-floppy-o'],
            'tooltip': 'i18n:editorbuttonsaveall',
            'tooltipPosition': 'bottom'
        },
        {
            'id': 'opendSessionButton',
            'type': 'DropdownButton',
            'icons': ['fal fa-folder-open'],
            'items': [
                {
                    "target": "#target1",
                    "label": "Ziel 1"
                },
                 {
                    "target": "#target2",
                    "label": "Ziel 2"
                }
            ],
            'tooltip': 'i18n:tooltip.sessions'
        }
    ], [ 
         // weitere Buttons ... 
        ] 
    ]);

Dropdown-Buttons lassen sich über diese Funktion ebenfalls einfach hinzufügen:

{
    'id': 'opendSessionButton',
    'type': 'DropdownButton',
    'icons': ['fa fa-folder-o'],
    'items': [
            {'target': '#1', 'label':'Item 01'},
            {'target': '#2', 'label':'Item 02'}
    ],
    'tooltip': 'i18n:opendsessionbutton'
}

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

7809407d-00f4-43ac-d697-9baa98fefb75

ButtonGroup

Submit-Button

Für das Formular gibt es keinen gesonderten Submit-Button. Vielmehr kommt der Standardbutton Alvine.Package.UI.Dialog.Button zum Einsatz. Der Button erhält den Typ submit. In der Variante mit Grid-System müssen die entsprechenden Klassen gesetzt werden.

form.addControl(new Alvine.Package.UI.Dialog.Button('absenden', {
                                'type': 'submit',
                                'class': 'btn btn-primary offset-sm-2',
                                'value': 'submit'
                            }));

Soll das Formular direkt abgesendet werden, so muss data-prevent im Formular-Tag entfernt weren.

Button