Simpler Quotes-Generator mit Javascript und Dojo

Das ist ein einfaches Beispiel für einen simplen Quotes-Generator mit Darstellung in einem Popup. Zur Darstellung und Popup verwenden wir html und Dojo 1.6. Auf Tastendruck soll das Popup mit einem random Quote erscheinen.

Die Quotes halten wir in diesem einfachen Beispiel in einem Array.

var quotes =new Array();
quotes.push("\"Frankly, my dear, I don't give a damn.\"<div style='text-align:right;'>[Rhett Butler]</div>");
quotes.push("\"I'm going to make him an offer he can't refuse.\"<div style='text-align:right;'>[Vito Corleone]</div>");
quotes.push("\"Carpe diem. Seize the day, boys. Make your lives extraordinary.\"<div style='text-align:right;'>[John Keating]</div>");
...

Nun wollen wir mittels Dojo-Connect die Funktion zum Generieren und Anzeigen des Quotes an das Dokument binden.

dojo.connect(document, "onkeypress", function (event) {
    ...
}

Der Aufruf des Popups soll über KeyCodes gesteuert werden.

var keyCode = event.keyCode ? event.keyCode : event.charCode;
if (keyCode == 112 || keyCode == 113 || keyCode == 115 || keyCode == 117) {
event.preventDefault();  // verhindere Standardevent z.B. für F1 oder F3
    ...
}

Nun wird ein Zitat per Zufall gewählt.

var length = quotes.length;
var randomQuoteId=Math.round(Math.random()*(length-1));

Und schließlich erzeugen wir das Popup Window.

dojo.require('dijit.Dialog');
if(dijit.byId('quotes')) {
    var dialog = dijit.byId('quotes');
    dialog.destroyRecursive();
}

var html =
 "<div style='background-color: #000000; width:500px; height:150px;'>"+
 " <div style='float: left; width:120px; height: 120px; margin-top: 10px; margin-left: 10px; background-color: #fff; -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em;'>"+
 " <div style='margin-left: 27px; margin-top: 8px;'><img src='http://rapaukesklangwelt.files.wordpress.com/2014/05/movie-camera.gif' width='69px' height='101px' ></div>"+
 " </div>"+
 " <div style='color: white; font-size: medium; line-height: 1.2; font-style:italic; padding-left:150px; padding-top: 25px; padding-right: 20px;'>"+
 " "+ quotes[randomQuoteId]+""
 " </div>"+
 "<div>"+
 "";

 (new dijit.Dialog({
     id: 'quotes',
     title: 'Hilfe - Happy Ends gibt es nur im Kino.',
     style: 'width: 520px;',
     content: html,
     closable: true
 })).show();

So schaut es dann aus, unser Popup.

Und hier noch mal der Code komplett:

var quotes =new Array();
quotes.push("\"Frankly, my dear, I don't give a damn.\"<div style='text-align:right;'>[Rhett Butler]</div>");
quotes.push("\"I'm going to make him an offer he can't refuse.\"<div style='text-align:right;'>[Vito Corleone]</div>");
quotes.push("\"Carpe diem. Seize the day, boys. Make your lives extraordinary.\"<div style='text-align:right;'>[John Keating]</div>");
...
dojo.connect(document, "onkeypress", function (event) {
    var keyCode = event.keyCode ? event.keyCode : event.charCode;
    console.log("keyCode: ", keyCode);
    // F1, F2, F4, F6
    if (keyCode == 112 || keyCode == 113 || keyCode == 115 || keyCode == 117) {
        event.preventDefault();
        dojo.require('dijit.Dialog');
        if(dijit.byId('quotes')) {
            var dialog = dijit.byId('quotes');
            dialog.destroyRecursive();
        }

        var length = quotes.length;
        var randomQuoteId=Math.round(Math.random()*(length-1));

        var html =
                "<div style='background-color: #000000; width:500px; height:150px;'>"+
                "  <div style='float: left; width:120px; height: 120px; margin-top: 10px; margin-left: 10px; background-color: #fff; -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em;'>"+
                "    <div style='margin-left: 27px; margin-top: 8px;'><img src='http://rapaukesklangwelt.files.wordpress.com/2014/05/movie-camera.gif' width='69px' height='101px' ></div>"+
                "  </div>"+
                "  <div style='color: white; font-size: medium; line-height: 1.2; font-style:italic; padding-left:150px; padding-top: 25px; padding-right: 20px;'>"+
                "  "+ quotes[randomQuoteId]+""
                "  </div>"+
                "<div>"+
                "";

        (new dijit.Dialog({
            id: 'quotes',
            title: 'Hilfe - Happy Ends gibt es nur im Kino.',
            style: 'width: 520px;',
            content: html,
            closable: true
        })).show();
    }
});