Spinner¶

Die Framework Erweiterung Spinner stellt die Funktionen für die Darstellungen einer Anzeige beim laden von Inhalten zu Verfügung.

Installation¶

//cdn.alvine.io/libs/alvine/spinner/jquery.alvinespinner-0.1.0.js

Bibliotheken¶

Kopiervorlage für die Installation

<script src="//cdn.alvine.io/libs/alvine/framework/alvine.framework-1.11.0.min.js"></script>
<script src="//cdn.alvine.io/libs/alvine/spinner/jquery.alvinespinner-0.1.0.js"></script>

Verwedung in anderen Plugins¶

Die Konfiguration des Spinners, wird mit einem JSON Objekt an dem DOM Element gesteuert.
Das Plugin muss in den DEFAULTS, den Schlüssel spinner definieren, so das die Konfiguration vorgenommern werden kann.
Über die Methode self.component.getSetting('spinner') wird die Konfiguration an das Plugin übergeben.

/**
 * Standardwerte des Plugins
 * 
 * @return {object} Standardwerte
 */
InternalPlugin.prototype.getDefaults = function () {
    return {
        spinner: undefined
    };
};

/**
 * Spinner anzeigen
 * 
 * @param {string} targetSelector
 * 
 * @returns {undefined}
 */
function showSpinner(targetSelector) {
    var self = this, spinner, options = {};
    spinner = new Alvine.Package.Plugin.AlvineSpinner();

    options = self.component.getSetting('spinner');
    spinner.show(targetSelector, options);
    return this;
}

Html Beispiel einer Konfiguration

<div class="alvineMyPlugin" data-alvinemyplugin-spinner='{"mode":"replace"}' >
</div>

Templates¶

Über Templates wird die Anzeige des Spinners gesteuert.
Diese Templates werden verwendet, wenn kein Template im HTML gefunden wird.

<template class="alvineSpinner" data-name="defaultTemplate" >
    <i class="fa fa-refresh fa-spin"></i>
</template>
<template class="alvineSpinner" data-name="successTemplate" >
   <i class="fa fa-check-circle"></i>
</template>
<template class="alvineSpinner" data-name="failTemplate" >
    <i class="fa fa-exclamation-circle"></i>
</template>

Die Icons werden von Font Awesome verwendet.

Funktionen¶

Name	Parameter	Beschreibung
show	selector / object ,optionen	einblenden des Spinners
hide	selector / object ,optionen	ausblenden des Spinners
success	selector / object ,optionen	einblenden eines Erfolg Icons
fail	selector / object ,optionen	einblenden eines Fehler Icons

Beispiele¶

var spinner = new Alvine.Package.Plugin.AlvineSpinner();
var options={
    templateName: 'myTemplate',
};
// Spinner anzeigen
spinner.show('#my-id', options);

// Spinner ausblenden
spinner.hide('#my-id');

Konfigurationen¶

Mit dem option Objekt kann die Darstellung gesteuert werden

var option={
   'mode':'append';
};

Schlüssel	Type	Beschreibung
mode	string	Position des Spinners innherhalb des Elements. Mögliche Werte sind : append,prepend,replace
templateName	string	Definiert welches Standard Template verwendet werden soll
failTemplateName	string	Definiert welches Fehler Template verwendet werden soll
successTemplateName	string	Definiert welches Erfolgs Template verwendet werden soll

Historie¶

Version	Änderung	Jira
0.1.0	neue Struktur mit Alvine Frontend Framework	ALEJS-148

Abhängigkeiten¶

Komponente	Version
jQuery	2.1.4
Alvine Framework	1.11.0