# DEMO Progressive Enhancement

package Public::Estash;

use base main;
use strict;
use warnings;
use Scaliger;

sub init{
    my $self = shift;
    $self->nocache; # Seite nicht cachen
}

# Wenn keine Parameter im Request anliegen 
sub browse{
    my $self = shift;
    # Eingabefeld mit aktuellem Datum vorbelegen
    my $sca = Scaliger->new;
    $self->{STASH}{date} = $sca->gregdate;
}

# Parameter Controller
sub control{
    my $self = shift;
    $self->{STASH}{param} = 1;
    # Eingegebenes Datum prüfen
    if( $self->param('cc') ){
        $self->{STASH}{date} = $self->trim($self->ents($self->param('date'))) || 'Nichts eingegeben!';    
        # Scaliger nutzt das Exceptionmodell
        my $sca = Scaliger->new( date => $self->{STASH}{date}) ||
            return $self->errorP( "Das eingegebene Datum ist ungültig!" );
        # Platzhalter fürs HTML Template befüllen        
        if($sca){
            $self->{STASH}{result}    = 'Das Datum ist gültig!';
            $self->{STASH}{valide}    = 1;
            $self->{STASH}{julidate}  = $sca->julidate;
            $self->{STASH}{gregdate}  = $sca->gregdate;
            $self->{STASH}{wochentag} = $sca->wochentag;
            $self->{STASH}{age}       = $sca->age eq 'G' ? 'Gregorianischer Kalender' : 'Julianischer Kalender';
            $self->{STASH}{jd}        = $sca->jd;
            $self->{STASH}{isleap}    = $sca->leap eq 'Y' ? 'Ja' : 'Nein';
        }
        else{
            # Eingegebenes Datum ungültig
            $self->{STASH}{result} = $@;
            $self->errorP( descr => $@ );
        }
        
        # Ajax, da wird nur der STASH serialisiert
        $self->{CONTENT} = $self->encode_stash if $ENV{HTTP_X_HR};
    } # Diese Datei im Browser ausgeben   
    elsif( $self->param('src') ){
        $self->nocache;
        $self->header('Content-Type','text/plain; Charset=UTF-8');
        my $fh = IO::File->new;
        $fh->open($INC{'Public/Estash.pm'},'r') or die "$!\n";
        read($fh, $self->{CONTENT}, -s $fh);
        $fh->close;
    }
}
# HTML Template unterhalb des DATA Token
1;#########################################################################
__DATA__
<script src="/jquery.min.js"></script>
<script src="/request.js"></script>

<p>Diese Anwendung ist eine DEMO. Wenn es seitens Browser möglich ist, erfolgt der Request mit Ajax, ansonsten als ein normaler Submit.</p>

<h2>Zu Prüfen ist ein eingegebenes Datum</h2>

<form>
    <fieldset><legend><strong><label for="date">Bitte ein Datum:</label></strong></legend>
    <div class="together">
        <input name="date" id="date" value="%date%" autocomplete="off">
        <button name="cc" value="1">Prüfen</button>
    </div>
    </fieldset>
</form>

%if_valide%
<h2>Das Datum ist gültig</h2>
<p>Weitere Angaben</p>
<ul>
    <li><strong>Zeitalter:</strong> %age%</li>
    <li><strong>Datum nach Julianischen Kalender:</strong> %julidate%</li>
    <li><strong>Datum nach Gregorianischen Kalender:</strong> %gregdate%</li>
    <li><strong>Wochentag:</strong> %wochentag%</li>
    <li><strong>Julianischer Tag:</strong> %jd%</li>
    <li><strong>Schaltjahr:</strong> %isleap%</li>
</ul>
%endif%

%if_param%<p><a href="%url%">Seite neu laden</a></p>%endif%


<script>
function subm(e){
    e.preventDefault();
    var param = new FormData( e.target );
    param.append('cc','c');
    var xhr = new XMLHttpRequest();
    xhr.open('POST','%url%');
    xhr.responseType = 'document';
    throbber(true);
    xhr.onload = function(){
        throbber(false);
        document.body = this.response.body;
        document.forms[0].addEventListener('submit', subm, false);
    };
    xhr.send(param);
}


//Event submit abfangen
document.forms[0].addEventListener('submit', subm, false);
</script>

<h2>Erläuterungen, Progressive Enhancement</h2>

<p><a href="%url%?src=1">Werfen Sie einen Blick auf die Sources!</a> Was Sie sehen ist eine sogenannte Kompaktklasse, Perlcode und HTML Template in einer einzigen Datei und doch sauber voneinander getrennt. Das native HTML-Template erkennen Sie an der Schreibweise der Platzhalter wie <code>&#x25;wochentag&#x25;</code>. Zum Anreichern der Anwendung mit JavaScript wird das Submit-Event abgefangen und das Senden des Formulars einer JavaScript-Funktion überlassen. Diese Funktion feuert mit den eingegebenen Formulardaten einen AJAX-Request, nimmt von der Response den Body und tauscht den im Browwser vorliegenden Body mit diesem aus: </p>

<pre>
  document.body = this.response.body;
</pre>

<p>Das ist das ganze Geheimnis eines Progressive Enhancement!</p>