Proposal: Link-Feld

[christophboecker]

Bin grade nicht drüber im Klaren, wie Du hier mit assets und feldtypen etc. hantieren willst, also rein strukturell betrachtet. Anyway: hier mal ein Vorschlag für einen Feldtypen:

Erweitert ein Text-Feld speziell für Links (Mail, externer Link) mit einem klickbaren Button und einer Client-Feldvalidierung. Klick auf den Button öffnet entweder eine Mail oder einen Link in einem neuen Fenster.

(nicht wundern, bei mir heißt alles kv30..., auch Namenskonzepte müssten konzeptionell harmonisiert werden, oder?)

(Falls es schon eine offizielle Lösung gibt - mir ist sie nicht bekannt. Dann ignorier gerne meinen Vorschlag.)

Code:

class rex_yform_value_kv30_link extends rex_yform_value_text
{

    public function parse($template, $params = [])
    {
        extract($params);
        $prepend = $prepend ? $prepend : '';
        if( $this->getElement('icon') == 2 ) {
            $icon_class = 'envelope';
            $this->setElement( 'attributes' , ['placeholder'=>'[email protected]','pattern'=>'^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$'] );
            $type = 'email';
            $command = 'document.location=\'mailto:\'+l.value';
            $onclick = 'kv30.yform_openmail(this,\''.$this->getFieldId().'\')';
        } else  {
            $icon_class = 'external-link';
            $this->setElement( 'attributes' , ['placeholder'=>'http[s]://....','pattern'=>'^(https?://).*?$'] );
            $type = 'url';
            $command = 'window.open(l.value)';
            $onclick = 'kv30.yform_openlink(this,\''.$this->getFieldId().'\')';
        }
        $prepend = $prepend.'<i onclick="'.$onclick.'" class="rex-icon rex-icon-'.$icon_class.'" style="cursor: pointer;"></i>';
        ob_start();
        include $this->params['this']->getTemplatePath($template);
        return ob_get_clean();
    }

    public function getDescription()
    {
        $description = parent::getDescription();
        return substr_replace( $description, $this->getDefinitions()['name'], 0, strpos($description,'|') ) . '|1=externer Link, 2=Mail';
    }

    public function getDefinitions()
    {
        $definitions = parent::getDefinitions();
        $definitions['name'] = 'kv30_link';
        $definitions['description'] = 'Externer Link mit Test-Button';
        $definitions['famous'] = false;
        $definitions['values']['icon'] = ['label' => 'Icon', 'type'=>'select','options'=>'Link=1,Mail=2', 'default'=>1];
        return $definitions;
    }

}

JS:

kv30.yform_openlink = function ( source, targetName ){
    let target = kv30.asNode( targetName);
    if( !target || !target.value || !target.reportValidity() ) {
        alert('Kein (formal gültiger) Link angegeben');
        return;
    }
    window.open(target.value);
}
kv30.yform_openmail = function ( source, targetName ){
    let target = kv30.asNode( targetName);
    if( !target || !target.value || !target.reportValidity() ) {
        alert('Keine (formal gültige) Mail-Adresse angegeben');
        return;
    }
    document.location='mailto:'+target.value;
}

[alxndr-w]

Finde ich gut! Könntest du das Markup noch in ein Fragment auslagern?

Assets in einer JS-Datei können wir gerne machen und über die boot.php hinzuladen, wenn man sich innerhalb von YForm-Table-Manager-Seiten befindet.

[alxndr-w]

Als clientseitige Validierung hätte ich jedoch eher das HTML5 pattern-Attribut vorgeschlagen.

[christophboecker]

Als clientseitige Validierung hätte ich jedoch eher das HTML5 pattern-Attribut vorgeschlagen.

Hatte ich ursprünglich mal angedacht (also type=...), klappte damals aber nicht so wie ich es mir vorgestellt hatte. Muss ich mal drüber nachdenken ...

[christophboecker]

Könntest du das Markup noch in ein Fragment auslagern?

Du meinst diese Zeile hier:

$prepend = $prepend.'<i onclick="'.$onclick.'" class="rex-icon rex-icon-'.$icon_class.'" style="cursor: pointer;"></i>';

Die eigentliche Arbeit macht das Template value.text.tpl.php und $prepend ist eine der Eingaben. Kaskadierte Templates? Hm?

[alxndr-w]

Ah, OK, habe es mir nicht genau angesehen sondern nur Markup gesehen.

Trotzdem die Frage: HTML5-Validierung gleich mitliefern?

[christophboecker]

1. HTML-Validierung ist generell mit drin. (Siehe $type=...)
2. Die beiden Zeilen bzgl. Pattern und Placeholder können auch raus. Mir hat nur damals das Standard-Pattern von HTML5 nicht gepasst (zu großzügig). Aber das kann sich ja jeder wieder selbst einstellen)
3. Das Icon müsste noch einen title-Tag erhalten (wg. Tooltip)
4. Texte nach lang-Datei auslagern

Kann ich alles angehen, aber mach bitte erst noch Vorgaben zur Namenssystematik und so (#2)

[alxndr-w]

1. ok
2. Mit dem Pattern 'pattern'=>'^(https?://).*?$' sorgst du dafür, dass auch ungültige URLs eingetragen werden können, oder nicht?
3. ok
4. ok

Hab dir geantwortet in #2.

Wir sind ja hier nicht so eng gebunden in der Umsetzung wie YForm, aber ich finde es super, dass du dir dazu auch in #2 grundsätzliche Gedanken machst.

[alxndr-w]

Ich habe mit #60 eine Alternative, die direkt aus mform stammt und erprobt ist, mit freundlicher Erlaubnis von Joachim.