Stylable mailform

[Tata]

I suggest to add two more variables in mailform section in config.php

Code: Select all

$cf['mailform']['cols']="";
$cf['mailform']['rows']="";

adjust corresponding line #302 in Mailform.php

Code: Select all

$o .= '<textarea rows="'.$cf['mailform']['rows'].'" cols="'.$cf['mailform']['cols'].'" name="' . $name . '">'

and the class in core/css/stylesheet.css

Code: Select all

.xh_mailform textarea{
	min-height: 100px;
}

This way especially the height of the mailform can be easy specified in the backend.

[cmb]

Do we really want to introduce two additional config options for this? (We would have to consider to add a config option for the size attribute of the inputs as well.)

IMHO both attributes are borderline cases for HTML, as I consider the dimensions of a textarea belonging to CSS. The only valid reason for using cols and rows are clients that don't process CSS at all, which should be (nearly) out of use. And actually, I would remove both attributes, if they were not required by HTML 4.01 (what is most likely to change with HTML5).

However, I have put it on the roadmap for XH 1.6.3.

[Tata]

I have googled and have found this:

Code: Select all

<script type="text/javascript">
function haut(idt) {
   if (document.getElementById(idt).scrollTop > 0) aug(idt);
}
function aug(idt) {
   var h = parseInt(document.getElementById(idt).style.height);
   document.getElementById(idt).style.height = h + 10 +"px";
   haut(idt);
}
function top(idt) {
   document.getElementById(idt).scrollTop = 100000;
   haut(idt);
}
</script>

<textarea name="txt_test" style="width: 700px; height: 150px" id="txt_test" onkeyup="javascript: haut(this.id)" onfocus="javascript: top(this.id)"></textarea>

Seems very promissing. But how to embed/use it with Mailform.php?
I will try it later.

[cmb]

I have googled and have found this:

If I'm not mistaken this script increases the height of the textarea with regard to its content. If so, we are already using something similar for the language configuration. You may consider putting a slight modified copy of XH.makeAutosize() in a separate JS file and include that (you can do it from within the template for some quick tests):

Code: Select all

function makeAutosize(textarea) {
    function resize(textarea) {
        var border = textarea.offsetHeight - textarea.clientHeight;
        var h0 = textarea.scrollHeight, h1;

        // Several layout engines increase the scrollHeight
        // after the following. Temporarily setting style.height="auto"
        // seems to work around this issue.
        textarea.style.height = (textarea.scrollHeight  + border ) + "px";
        h1 = textarea.scrollHeight;
        if (h0 != h1) {
            textarea.style.height = "auto";
            textarea.style.height = (textarea.scrollHeight  + border ) + "px";
        }
    }

    function onResize(event) {
        var ev = event || window.event;
        var textarea = ev.target || ev.srcElement;

        resize(textarea);
    }

    function onPropertyChange(event) {
        var ev = event || window.event;
        var textarea = ev.target || ev.srcElement;

        if (ev.propertyName == "value") {
            resize(textarea);
        }
    }

    function onBlur(event) {
        var ev = event || window.event;
        var textarea = ev.target || ev.srcElement;

        textarea.style.height = null;
    }

    if (typeof textarea.addEventListener != "undefined") {
        textarea.addEventListener("focus", onResize, false);
        //textarea.addEventListener("blur", onBlur, false);
        if (typeof textarea.oninput != "undefined") {
            textarea.addEventListener("input", onResize, false);
        } else if (typeof textarea.onpropertychange != "undefined") {
            textarea.addEventListener("onpropertychange", onPropertyChange,
                    false);
        } else {
            textarea.addEventListener("keypress", onResize, false);
        }
    } else {
        textarea.attachEvent("onfocus", onResize);
        //textarea.attachEvent("onblur", onBlur);
        textarea.attachEvent("onpropertychange", onPropertyChange);
    }
    // the following would be nice, but it's very slow for many textareas
    //resize(textarea);
};

addEventListener("load", function() {
    makeAutosize(document.querySelector("form.xh_mailform textarea"));
});

(untested; requires a decent browser--IE 8 and below are not supported)

Seems very promissing.

Maybe with regard to the desired functionality, but not with regard to the code. E.g. the javascript labels at the beginning of the attribute values are superfluous at best (obviously the programmer confused them with the javascript pseudo URL protocol, which should be avoided, however), so

Code: Select all

<textarea name="txt_test" style="width: 700px; height: 150px" id="txt_test" onkeyup="javascript: haut(this.id)" onfocus="javascript: top(this.id)"></textarea>

should rather be

Code: Select all

<textarea name="txt_test" style="width: 700px; height: 150px" id="txt_test" onkeyup="haut(this.id)" onfocus="top(this.id)"></textarea>

Furthermore function top() is sloppyly written: it calls haut() (is that French, BTW?) while it could call aug() directly instead[1]. And the complete algorithm seems to be a work-around to avoid using the textarea's offsetHeight and clientHeight properties (for whatever reason--perhaps compatibility with old browsers?).

PS: [1] After reconsideration I have to admit, that calling haut() instead of aug() is necessary.