[JS] Tekst afkorten zoals hier in update tracker

[HaTe]

Ik heb een functie gemaakt om tekst dynamisch af te korten bij een bepaalde breedte in pixels:

JavaScript:

function textwrap(text, maxWidth)
{
    if(getWidth(text) < maxWidth)
    {
        return text;
    }else
    {
        newText = '';
        stoppen = false;
        for(i=1; stoppen != true; i++)
        {
            newText = text.substring(0, i);
            if(getWidth(newText) > maxWidth || newText == text || getWidth(newText) > getWidth(text))
            {
                stoppen = true;
            }
        }
        return newText+'...';
    }
}
function getWidth(text)
{
    var spanElement = document.createElement('span');
    spanElement.style.whiteSpace = 'nowrap';
    spanElement.innerHTML = text;
    document.body.appendChild(spanElement);
    var width = spanElement.offsetWidth;
    document.body.removeChild(spanElement);

    return width;
}
function getElementsByClassName(className, tag, elm){
    var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for(var i=0; i<length; i++){
        current = elements[i];
        if(testClass.test(current.className)){
            returnElements.push(current);
        }
    }
    return returnElements;
}

Het werkt goed, maar de functie vaak moet worden uitgevoerd (zoals hier op Tweakers) merk je wel goed dat er echt een vertraging optreed van enkele seconden.
Dit wil ik niet. Hoe kan ik deze functie verbeteren?
Hoe gebeurt het hier op T.net? ?

[RobIII]

HaTe schreef op woensdag 24 juni 2009 @ 17:35:
Hoe gebeurt het hier op T.net? ?

Kijk eens in de broncode (function ellipsis)
Waarmee natuurlijk niet gezegd is dat je het zomaar 1:1 mag overnemen

[ Voor 30% gewijzigd door RobIII op 24-06-2009 17:41 ]

[Barleone]

offtopic:
Gaar dat dat op een domein staat waar expliciet img in voorkomt. Je zou eerder iets van tweaklib.net verwachten.

[Bosmonster]

Barleone schreef op woensdag 24 juni 2009 @ 17:44:

offtopic:
Gaar dat dat op een domein staat waar expliciet img in voorkomt. Je zou eerder iets van tweaklib.net verwachten.

What's in a name.. om dat nou als 'gaar' te bestempelen...

Ook beetje onzinnig om een nieuw domein te gaan registreren omdat je toevallig besloten hebt er in de loop van de tijd iets meer op te zetten dan alleen images

[ Voor 21% gewijzigd door Bosmonster op 24-06-2009 17:48 ]

[HaTe]

RobIII schreef op woensdag 24 juni 2009 @ 17:38:
[...]

Kijk eens in de broncode (function ellipsis)
Waarmee natuurlijk niet gezegd is dat je het zomaar 1:1 mag overnemen

Thnx, ik zal eens kijken.
Maar hoe denk je dat ik die functie had kunnen vinden?
1. ik moet weten in welke js file het staat.
2. ik moet weten welke functie !
3. ik moet de gecomprimeerde code ontrafelen.

[BasieP]

HaTe schreef op woensdag 24 juni 2009 @ 18:25:
[...]

Thnx, ik zal eens kijken.
Maar hoe denk je dat ik die functie had kunnen vinden?
1. ik moet weten in welke js file het staat.
2. ik moet weten welke functie !
3. ik moet de gecomprimeerde code ontrafelen.

1. download firebug, en je krijgt netjes alle files op een rijtje. download -> search
2. hij heeft genoemt hoe de functie heet (ellipses)
3. die is niet gecomprimeerd, maar geminimaliseerd, en dus nog 100% leesbaar (alleen whitespaces enters, commentaar etc. zijn er uit)

JavaScript:

function ellipsis(root,deep){if(ellipsis.__native==undefined){ellipsis.__native=true;if(document.defaultView&&document.defaultView.getComputedStyle){var foo=document.createElement('div');foo.style.cssText='text-overflow:ellipsis;-o-text-overflow:ellipsis';if(!foo.style.cssText)ellipsis.__native=false}};if(!ellipsis.__native)if(!root||deep){getElementsByClassName('ellipsis',null,root,ellipsis_do)}else ellipsis_do(root)}

function ellipsis_table(tableId){var productTable=getById(tableId);if(productTable){var hasColSpans=false;if(!is.ie&&!is.khtml)Array.forEach(productTable.getElementsByTagName('td'),function(td){if(td.colSpan&&td.colSpan>1){hasColSpans=true;td.parentNode.style.display='none'}});var cols=productTable.getElementsByTagName('col');if(cols){var totalWidth=0,col,i=0,ellipsisCol=null,clientWidth;while((col=cols[i++]))if(col.getAttribute('rel')=='ellipsis'){ellipsisCol=col}else if((clientWidth=col.clientWidth)){if(!col.width)col.width=clientWidth;totalWidth+=parseInt(col.width,10)};if(ellipsisCol&&totalWidth>0)ellipsisCol.width=productTable.parentNode.clientWidth-totalWidth};if(hasColSpans)Array.forEach(productTable.getElementsByTagName('td'),function(td){if(td.colSpan&&td.colSpan>1)td.parentNode.style.display=''});var diff=productTable.clientWidth-productTable.parentNode.clientWidth+4;if(diff>0){var tdwidth=[],colspan;Array.forEach(getElementsByClassName('ellipsis','td',productTable),function(td){colspan=td.colSpan||1;if(!(colspan in tdwidth))tdwidth[colspan]=td.clientWidth-diff-8;if(tdwidth[colspan]>0){var a=first_child(td,'a');if(a)a.style.width=tdwidth[colspan]+'px'}})}}}

function ellipsis_do(root){var ellipsis_word=false;if(root.clientWidth){if(root.nodeName!='TD'){root.style.width=root.clientWidth+'px';root.style.position='fixed'};var s=[root],e,o,w;while((e=s.pop()))do{switch(e.nodeType){case 1:if(e.style.display!='none')if(document.defaultView.getComputedStyle(e,null).getPropertyValue('overflow')=='hidden'){ellipsis_overflow(e,ellipsis_word)}else{if((o=e.nextSibling))s.push(o);e=e.firstChild;break};default:e=e.nextSibling}}while(e);root.style.position=''}}

function ellipsis_overflow(p,ellipsis_word){var w=p.clientWidth;if(w&&p.scrollWidth>w){var s=[p],e,o,q,l;while((e=s.pop()))do{switch(e.nodeType){case 1:if((o=e.previousSibling))s.push(o);e=e.lastChild;break;case 3:if(/[^\t\n\r ]/.test(e.data)){q=e.nodeValue;l=Math.floor((q.length*w)/p.scrollWidth)-1;if(l>0){do{e.nodeValue=q.substr(0,--l)+'...'}while(l&&(p.scrollWidth>w||(ellipsis_word&&e.nodeValue.charAt(l-1)!=' ')));if(l>0)return};e.nodeValue=''};default:e=e.previousSibling}}while(e)}}

[ Voor 68% gewijzigd door BasieP op 24-06-2009 18:29 ]

[HaTe]

BasieP schreef op woensdag 24 juni 2009 @ 18:27:
[...]

1. download firebug, en je krijgt netjes alle files op een rijtje. download -> search
2. hij heeft genoemt hoe de functie heet (ellipses)
3. die is niet gecomprimeerd, maar geminimaliseerd, en dus nog 100% leesbaar (alleen whitespaces enters, commentaar etc. zijn er uit)

JavaScript:

function ellipsis(root,deep){if(ellipsis.__native==undefined){ellipsis.__native=true;if(document.defaultView&&document.defaultView.getComputedStyle){var foo=document.createElement('div');foo.style.cssText='text-overflow:ellipsis;-o-text-overflow:ellipsis';if(!foo.style.cssText)ellipsis.__native=false}};if(!ellipsis.__native)if(!root||deep){getElementsByClassName('ellipsis',null,root,ellipsis_do)}else ellipsis_do(root)}

function ellipsis_table(tableId){var productTable=getById(tableId);if(productTable){var hasColSpans=false;if(!is.ie&&!is.khtml)Array.forEach(productTable.getElementsByTagName('td'),function(td){if(td.colSpan&&td.colSpan>1){hasColSpans=true;td.parentNode.style.display='none'}});var cols=productTable.getElementsByTagName('col');if(cols){var totalWidth=0,col,i=0,ellipsisCol=null,clientWidth;while((col=cols[i++]))if(col.getAttribute('rel')=='ellipsis'){ellipsisCol=col}else if((clientWidth=col.clientWidth)){if(!col.width)col.width=clientWidth;totalWidth+=parseInt(col.width,10)};if(ellipsisCol&&totalWidth>0)ellipsisCol.width=productTable.parentNode.clientWidth-totalWidth};if(hasColSpans)Array.forEach(productTable.getElementsByTagName('td'),function(td){if(td.colSpan&&td.colSpan>1)td.parentNode.style.display=''});var diff=productTable.clientWidth-productTable.parentNode.clientWidth+4;if(diff>0){var tdwidth=[],colspan;Array.forEach(getElementsByClassName('ellipsis','td',productTable),function(td){colspan=td.colSpan||1;if(!(colspan in tdwidth))tdwidth[colspan]=td.clientWidth-diff-8;if(tdwidth[colspan]>0){var a=first_child(td,'a');if(a)a.style.width=tdwidth[colspan]+'px'}})}}}

function ellipsis_do(root){var ellipsis_word=false;if(root.clientWidth){if(root.nodeName!='TD'){root.style.width=root.clientWidth+'px';root.style.position='fixed'};var s=[root],e,o,w;while((e=s.pop()))do{switch(e.nodeType){case 1:if(e.style.display!='none')if(document.defaultView.getComputedStyle(e,null).getPropertyValue('overflow')=='hidden'){ellipsis_overflow(e,ellipsis_word)}else{if((o=e.nextSibling))s.push(o);e=e.firstChild;break};default:e=e.nextSibling}}while(e);root.style.position=''}}

function ellipsis_overflow(p,ellipsis_word){var w=p.clientWidth;if(w&&p.scrollWidth>w){var s=[p],e,o,q,l;while((e=s.pop()))do{switch(e.nodeType){case 1:if((o=e.previousSibling))s.push(o);e=e.lastChild;break;case 3:if(/[^\t\n\r ]/.test(e.data)){q=e.nodeValue;l=Math.floor((q.length*w)/p.scrollWidth)-1;if(l>0){do{e.nodeValue=q.substr(0,--l)+'...'}while(l&&(p.scrollWidth>w||(ellipsis_word&&e.nodeValue.charAt(l-1)!=' ')));if(l>0)return};e.nodeValue=''};default:e=e.previousSibling}}while(e)}}

Nu hij de functie genoemd heeft ja, maar daarvoor
punt 3 is geen probleem

[crisp]

HaTe schreef op woensdag 24 juni 2009 @ 18:30:
[...]

Nu hij de functie genoemd heeft ja, maar daarvoor

Omdat het afkorten van tekst zo heet (zie Wikipedia: Ellipsis)?
De css-propertyvalue voor text-overflow die hetzelfde doet (in browsers die het ondersteunen) heet ook 'ellipsis'. Onze javascript is dan ook puur een fallback voor browsers die het niet native ondersteunen zoals Firefox.

punt 3 is geen probleem

RobIII linkte sowieso al naar de ongecomprimeerde javascript file

[danslo]

http://jsbeautifier.org/

Handig om minimized JS weet netjes op je scherm te krijgen