Page tree
Skip to end of metadata
Go to start of metadata

Auf dieser Seite geht es um die Alvine-Javascript-Plugins.

 

Installation

Die Javascript- und CSS-Dateien können vom Alvine-CDN geladen werden. Die genaue URL ist auf der entsprechenden Seite verlinkt.

//cdn.alvine.io/libs/alvine 

Aufbau der Dateien im CDN

https://cdn.alvine.io/libs/alvine/ <paketname>/<system>.alvine <name>- <version>.min.<type>

  
paketnameName des Paketes (ohne alvine als Prefix)
systemSystem wie zum Beispiel "jquery, bootstrap, angular, ..."
nameName des konkreten Plugins mit dem prefix alvine
versionVersion im Schema <major>.<minor>.<fix>
typeDateiendung (js, css)

 

Versionsverwaltung

 

Wir verwenden im wesentlichen bei allen Veröffentlichungen die Systematik der Semantic Versioning
siehe auch http://semver.org/

Patch version Z (x.y.Z | x > 0) MUST be incremented if only backwards compatible bug fixes are introduced. A bug fix is defined as an internal change that fixes incorrect behavior.
Hide cardhttp://semver.org/lang/de/

Die Nummerierung von Versionen fängt immer bei 0 an
1.1.0
0.9.0
etc
0.9.1 ist somit das erste BUGFIX vom 0.9 Zweig

Konfigurieren

 Die Plugins sind in der Regel (soweit es UI-Plugins sind) per Selector aktivierbar. Die konfiguration kann auch per Javascript erfolgen. 

$(document).ready(function() {
    
    // Default Einstellungen können zentral überschrieben werden
	$.fn.alvinePLUGINNAME.settings = $.extend({}, $.fn.alvinePLUGINNAME.settings, {
         url: 'http://localhost:8010/upload.php'
    })
    
    //mit diesen Aufrufen wird das Plugin initialisiert
    $('.meinecssklasse').alvinePLUGINNAME();
    //identischer Aufruf  
	$('.meinecssklasse').alvinePLUGINNAME('init');
    
    //die Einstellungen beim initialisieren sind höher Gewichtet
	$('.meinecssklasse').alvinePLUGINNAME({'key':'value'});
    $('.meinecssklasse').alvinePLUGINNAME('init',{'key':'value'});
 
    //public Methode eines Plugins verwenden
    $('.meinecssklasse').alvinePLUGINNAME('foo', {'key': 'value'});
    $.fn.alvinePLUGINNAME('foo', {'key': 'value'});  
});

Die höchste Gewichtung der Einstellungen kann direkt am Element vorgenommen werden. Hierzu werden die Werte als JSON Objekt in ein data Attribute geschrieben. 

CamelCase 

Plugin Settings die Camel Case definiert sind, 

/**
  * Standard Einstellungen des Plugins
  */
$.fn[PLUGINNAME].defaults = {
        // <editor-fold defaultstate="collapsed" desc="defaults">
        /**
         * keyValue
         */
        keyValue: 'Wert',
        // </editor-fold>
};

können wie folgt überschrieben  werden:

<div class="alvineExample" data-alvineexample-key-value="neuer Wert">
 
</div>

Sehen Sie hierzu auch : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Was nicht funktioniert ist ' data-alvineexample-keyValue="neuer Wert" '

Definition im Tag

Die Werte können entweder als JSON oder als Einzelwerte angegeben werden.

<div id="dropzone" data-alvinepluginname='{"key":"value"}' data-alvinepluginname-key="value"></div>

Beim data Atribute ist die Reihenfolge der Anführungszeichen wichtig. Das JSON Objekt muss in einfachen Anführungszeichen stehen. Die Werte in doppelten.

Vorlage

Alvine-jQuery-Plugins werden immer in der gleichen Grundstruktur angelegt. Die Plugins fangen immer mit dem Namen "alvine" an.

komplettes Script
 /**
 * ALVINE
 *
 * COPYRIGHT: All  title   and  proprietary  rights,  including  trade
 * secrets,   in   the   Software   and   any   copies thereof and the
 * accompanying  written   materials,   are  owned  by   schukai  GmbH
 * and  are  protected  by  German  copyright  laws,  other applicable
 * copyright   laws  and  international  treaty  provisions.
 *
 * @category   Javascript
 * @package    Alvine\
 * @author     schukai GmbH <info@schukai.de>
 * @copyright  2002 - 2016 schukai GmbH
 * @license    http://alvine.io/license/ Licence
 * @version    Release: $Revision$
 * @link       http://alvine.io/ Alvine
 */
;
;
/**
 * alvineExample
 *
 * Das ist ein Beipiel Plugin welches als Vorlage dienen soll, für alle weiteren Plugins
 * Der Pluginname muss in der Konstante PLUGINNAME definiert werden
 *
 * @category   Javascript
 * @package    Alvine\
 * @author     schukai GmbH <info@schukai.de>
 * @license    http://alvine.io/license/ Licence
 * @version    Release: $Revision$
 * @link       http://alvine.io/ Alvine
 * @since      20160429
 * 
 * @param {function}  $
 * @param {object}    window
 * @param {object}    document
 * @param {undefined} undefined
 *
 */
(function($, window, document, undefined) {

    /**
     * undefined ist als die undefinierte Variable in 
     * ECMAScript 3. undefined darf nicht übergeben werden,
     * so das der Wert wirklich undefiniert ist. In
     * ES5 kann undefined nicht mehr geändert werden.
     */

    /**
     * @type strict
     */
    "use strict";

    /**
     * Konstanten
     */
    var PLUGINNAME = 'alvineExample';

    /**
     * öffentliche Methoden
     */
    var accessible = {
        /**
         * Initialisierne des Plugins
         * 
         * @param {array} options
         * 
         * @returns {jquery.alvineexample_L34.accessible@call;each}
         */
        init: function(options) {
            return this.each(function() {
                // <editor-fold defaultstate="collapsed" desc="Init">

                /** Element und Jquery-Element */
                var element = this;
                var jqElement = $(element);

                /** Elememt für die öffentliche Methoden bereitstellen */
                accessible.element = element;

                /**
                 * Ein Element darf nur einmal initialisiert werden. 
                 */
                if(jqElement.data((PLUGINNAME+'IsInit').toLowerCase())==='true') {
                    return;
                }
                jqElement.data((PLUGINNAME+'IsInit').toLowerCase(), 'true');

                /**
                 * Plugin Einstellungen zusammenführen
                 * und an das Element hängen
                 */
                element[PLUGINNAME+'Defaults'] = $.extend({}, $.fn[PLUGINNAME].defaults, options);
                /**
                 * Data Attribute des Elements überschreibt die Einstellungen
                 * die Werte am Objekt haben die höchste Gewichtung
                 * es wird das Data Attribute mit dem Namen des Plugins gesucht
                 * wichtig das Attribute darf nur aus Kleinbuchstaben bestehen
                 */
                var elementSettings = jqElement.data(PLUGINNAME.toLowerCase());
                if(typeof elementSettings!=='undefined'&&(typeof elementSettings)==='object') {
                    element[PLUGINNAME+'Defaults'] = $.extend({}, element[PLUGINNAME+'Defaults'], elementSettings);
                }
                /**
                 * Werte die direkt im Objekt definiert sind auslesen.
                 */
                for(var key in element[PLUGINNAME+'Defaults']) {
                    var dataSetting = jqElement.data(PLUGINNAME.toLowerCase()+'-'+key);
                    if((typeof dataSetting)==='undefined'||(typeof dataSetting)==='object') {
                        continue;
                    }
                    element[PLUGINNAME+'Defaults'][key] = dataSetting;
                }
                // </editor-fold>
                /**
                 * PLUGIN-CODE Start
                 * element ist das DOM-Objekt
                 */
                internal.initLocale();
                accessible.notify('Das ist der Titel', 'meine message', 'tolles icon');
                /**
                 * PLUGIN-CODE End
                 */
            });
        },
        /**
         * Nachricht an den User übermitteln
         * 
         * Callback für die Benachrichtigung des Users
         * notify: function (title, message, icon)
         * Wenn diese Null ist wird der Standardnotifier notify
         * (falls installiert) angesprochen.
         * 
         * @param {string} title
         * @param {string} message
         * @param {string} icon
         * @param {object} notifyElement
         * 
         * @returns {object} dieses Objekt
         */
        notify: function(title, message, icon, notifyElement) {

            /** Settings aus dem Element */
            var defaults = accessible.element[PLUGINNAME+'Defaults'];

            /** Wurde eine log Methode definiert in den Settings, wird diese verwendet */
            if(typeof defaults.notify==='function') {
                defaults.log(arguments);
                return this;
            }

            /** alvineNotify Plugin prüfen */
            if(typeof $.fn.alvineNotify!=='function') {
                accessible.log(PLUGINNAME+': alvineNotify is not installed.');
                return;
            }

            /** NotifyObject erstellen  */
            var config = {};
            config.title = title;
            config.icon = icon;
            config.notifyElement = notifyElement;
            config.sequence = defaults.notifysequence;

            var notifyObject = new $.fn.alvineNotify('notifyObject', message, config);

            /** Nachricht an den User */
            $.fn.alvineNotify('show', notifyObject);

            return this;
        },
        /**
         * Nachricht zurück zu setzen
         * 
         * @param {object} notifyElement Element für den Tooltip
         * 
         * @returns {object} dieses Objekt
         */
        notifyreset: function(notifyElement) {

            /** Settings aus dem Element */
            var defaults = accessible.element[PLUGINNAME+'Defaults'];

            /** Wurde eine log Methode definiert in den Settings, wird diese verwendet */
            if(typeof defaults.notifyreset==='function') {
                defaults.log(arguments);
                return this;
            }

            /** NotifyObject erstellen  */
            var config = {};
            config.notifyElement = notifyElement;

            var notifyObject = new $.fn.alvineNotify('notifyObject', null, config);

            /** Nachricht zurücksetzten */
            $.fn.alvineNotify('hide', notifyObject);

            return this;
        },
        /**
         * Fehlermeldung in der Konsole ausgeben
         * 
         * @returns {object} dieses Objekt
         */
        log: function() {
            /** Settings aus dem Element */
            var defaults = accessible.element[PLUGINNAME+'Defaults'];

            /** Wurde eine log Methode definiert in den Settings, wird diese verwendet */
            if(typeof defaults.log==='function') {
                defaults.log(arguments);
                return this;
            }

            var i = -1, l = arguments.length, args = [], fn = 'console.log(args)';
            while(++i<l) {
                args.push('args['+i+']');
            }
            fn = new Function('args', fn.replace(/args/, args.join(',')));
            fn(arguments);

            return this;
        },
        /**
         * Beispiel für eine öffentliche Methode
         * 
         * @param {type} value description
         * 
         */
        foo: function(value) {
            /**
             * Methode wurde über einen Selector aufgerufen
             * $('.meinecssklasse').alvineExample.foo('foo', {'key': 'value'});
             * 
             * "this" ist eine JQuery Kollection mit den gefunden Objekten
             */
            if(this&&this instanceof jQuery&&this.constructor.prototype.jquery) {
                /**
                 * mit each durch die gefunden Objekte iterieren
                 */
                return this.each(function() {
                    /**
                     * this ist das DOM Element
                     */
                });
            } else {
                /**
                 * Methode wurde ohne Selector aufgerufen
                 * $.fn.alvineExample.foo('foo', {'key': 'value'});
                 * "this" ist das reine JQuery Objekt
                 */
            }
        }
    };
    /**
     * private Methoden
     */
    var internal = {
        // <editor-fold defaultstate="collapsed" desc="internal">
        /**
         * Lokale initialisieren
         * 
         * @returns {undefined}
         */
        initLocale: function() {
            if(typeof $.fn.alvineI18nLocale!=='function') {
                return;
            }
            /** Die Lokale sollten Global verfübar sein */
            $('body').alvineI18nLocale('setLocaleStringDefaults', {
                // key : "value",
            });
        },
        /**
         * Foo
         * 
         * @param {type} element description
         */
        foo: function(element) {

        },
        /**
         * Bar
         * 
         * @param {type} element description
         */
        bar: function(element) {

        }
        // </editor-fold>
    };
    /**
     * Alvine Plugin
     */
    $.fn[PLUGINNAME] = function() {
        // <editor-fold defaultstate="collapsed" desc="Plugin">
        /**
         * Kopierte Argumente für den Aufruf
         * 
         * @type @var;arguments|@exp;Array@pro;prototype@pro;slice@call;call
         */
        var callArguments = arguments;
        /**
         * erster Parameter ist eine Methode des Plugins
         */
        var method = arguments[0];
        /** 
         * prüfen ob die Methode definiert wurde
         */
        if(accessible[method]) {
            /**
             * Wenn die Methode definiert ist, wird diese aufgerufen
             */
            method = accessible[method];
            /**
             * weiter Parameter sind Argumente für die Methode
             */
            callArguments = Array.prototype.slice.call(arguments, 1);
        } else if(typeof (method)==='object'||!method) {
            /**
             * wenn keine Methode gefunden wurde wird die accessible-Methode 'init' aufrufen
             */
            method = accessible.init;
        } else {
            /**
             *  Fehlermeldung ausgeben, wenn die Methode nicht definiert wurde
             */
            accessible.log(PLUGINNAME+' - Method "'+method+'" does not exist.');
            return this;
        }
        /**
         * Methode mit den Parametern aufrufen
         */
        method.apply(this, callArguments);
        /**
         * das Plugin muss immer sich selbst wieder zurück geben
         * so können Ketten gebaut werden
         * $("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();
         */
        return this;
        // </editor-fold>
    };
    /**
     * Standard Einstellungen des Plugins
     */
    $.fn[PLUGINNAME].defaults = {
        // <editor-fold defaultstate="collapsed" desc="Settings">
        /**
         * key1
         */
        key1: 'value',
        /**
         * key2
         */
        key2: 'value',
        /**
         * Reihenfolge der Prüfung auf Benachrichtigungssysteme
         */
        notifysequence: ['notify', 'tooltip']
            // </editor-fold>
    };
    /**
     * Das Plugin initialisiert sich selbst, bei Verwendung der richtigen Klasse
     * Namespace der CSS Klasse alvine[Name des Plugins]
     */
    $(function() {
        /**
         * Plugin in der Liste der zu initialisierenden Plugins aufnehmen
         */
        if(typeof $.fn['alvineInit']==='function') {
            $(document).alvineInit('addInitPlugin', '.'+PLUGINNAME, PLUGINNAME);
        }
        $("."+PLUGINNAME)[PLUGINNAME]();
    });
})(jQuery, window, document);


Minimieren

Die Option --nomunge schaltet das aus obfuscate aus. Dies ist notwendig, bei Javascripts die nach einer Optimierung nicht mehr funktionieren.

java -jar yuicompressor-2.4.8.jar --nomunge -o name.min.js 


 

 

Anzeigen von User Benachrichtigungen

Der Standard arbeitet mit dem Notify Plugin von Bootsrap :  http://bootstrap-notify.remabledesigns.com/
Dieses Plugin kann über cdnjs eingebunden werden:

https://cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.5/bootstrap-notify.min.js

Ajax

Alvine Plugins melden sich über das Plugin AlvineInit am Dokument an.
Wenn per Ajax Inhalt nachgeladen wird, werden die neuen DOM Elemente mit allen angemeldeteten Plugins initialisiert.

Referenzen

 

data-alvineexample-key-value="neuer Wert"
  • No labels

3 Comments

  1. Anonymous

    direct lender installment loans cornerstone loans money lender loan lenders
  2. Anonymous

    loan lenders lender payday lender lender
  3. Anonymous

    casino blackjack caesars online casino slots for real money borgata online casino | https://onlinecasinogamesplay.us.org/ - online casino slots https://onlinecasinogamesplay.us.org/ - online gambling casino