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	`'class': '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	`'on': {'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.

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

Ü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));

DropDownButton¶

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));

DropdownButtonItem¶

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.

d61f33a1-0aa8-4f90-bcbc-544f92aaf387

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.