[BUG] lastChild is null Error on dymanical content...

[PaykomanVll]

Hello,

i like this plugin but now i have a first conflict that i can not solved :(
I use jq owlCarousel and on this section have clamp.js problems :(

<div class="thisCarousel">
    <div class="aucSlidItem">
        <div style="background-image: url('<?php echo IMG_URI; ?>dummy/01.jpg');"></div>
        <div class="clamp"><a id="auc_1" data-mode="win" href="<?php link::get('auction/view?id=%s', ['test_auktion_1']); ?>" onclick="contentWindow( $(this) ); return false;">1Erster Versuch - stilvolles Date langer name</a></div>
        <div>Deutschland<span>xxxx</span></div>
        <div class="auCtn cal" data-end="11/11/2017 16:00:00"></div>
        <div><?php wwmCalc::getAucPrice(999, 'EUR', '["2017-12-18 20:00:00",5.55]'); ?></div>
    </div>
    <div class="aucSlidItem">
        <div style="background-image: url('<?php echo IMG_URI; ?>dummy/01.jpg');"></div>
        <div class="clamps"><a id="auc_2" data-mode="win" href="<?php link::get('auction/view?id=%s', ['test_auktion_2']); ?>" onclick="contentWindow( $(this) ); return false;">2Erster Versuch - stilvolles Date2</a></div>
        <div>Deutschland<span>xxxx</span></div>
        <div class="auCtn cal" data-end="11/11/2017 16:00:00"></div>
        <div><?php wwmCalc::getAucPrice(999, 'EUR', '["2017-12-18 20:00:00",5.55]'); ?></div>
    </div>
    <!-- more items.... -->
</div>
<script type="text/javascript">
$('.thisCarousel').owlCarousel({
    loop: false,
	margin: 20,
	nav: false,
	dots: false,
	autoplay: true,
	autoplayTimeout: 2500,
	lazyLoad: true,
	responsiveClass: true,
	responsive: {
		0: { items: 2 },
		700: { items: 3 },
		1200: { items: 4 }
	}
});
setTimeout(function(){
    var items = document.getElementsByClassName('clamp');
    
    for( i in items ){
        if( items.hasOwnProperty(i) ){
            $clamp(items[i], {clamp: (( items[i].hasAttribute("data-clamp") ) ? items[i].getAttribute("data-clamp") : 'auto')});
        }
    }
}, 1500); 
// result TypeError: a.lastChild is null on getLastchild() #121
<script>

This error is only on browsers without webkitLineClamp

I hope any can help me to fix :(

[jackkoppa]

Yeah, ran into the same issue. At least in my case, the only way clamp.js has worked for us is with useNativeClamp: true (which is the default), on the browsers where webkit-line-clamp is supported.

i.e. it's not working for us, unfortunately, with the same error as above. Don't have time to dig in right now, but may come back to this if possible; it's a bit tricky to figure out where things might be off without some specs in place. Obviously, the library has been around for a long time with plenty of people getting benefit out of it, so maybe it's something different in our setup 🤔

[hkovesdi]

The problem

The issue occurs because the library keeps removing all the children until none are left.
If you take a closer look at the condition in https://github.com/josephschmitt/Clamp.js/blob/master/clamp.js#L121
You will see that it decides whether to remove the element if the children's nodeValue is falsy.
However, element nodes don't ever have a value of their own, so the script thinks they are empty.

For example, lets say you have the following where we only want to display the first line.

<div class="clamp">
  <p>I am the first line of text.</p>
  <p>I am the second line of text.</p>
</div>

The getLastChild function checks the nodeValue of the paragraphs which return null because there is another node in them (the text node) that contains the text.

Solution

Unfortunately you need to modify the source code, by replacing all nodeValue accessors with textContent.
So elem.lastChild.nodeValue should be elem.lastChild.textContent.