Question

I have a problem with a piece of code in JavaScript + dojo. I’m making a widget that given a certain height and a string, the widget displays that string with an ellipsis at the end if the string overflows. There’s two ways of using this widget, you can either feed it the actual string or give it a URL to a text file.

The problem is that if you feed the actual string to the widget, it fails but if you give it the URL it works perfectly. Here’s the code:

define(["dojo/_base/declare","dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./template/template.html", "dojo/_base/xhr", "dojo/dom-style", "dojo/_base/lang"],

function(declare, WidgetBase, TemplatedMixin, template, xhr, domStyle, lang){

 return declare([WidgetBase, TemplatedMixin], {

        templateString: template,

        textSrc: "",

        content: "",

        height: 100,

        ellipsis: "...",

        endPoint: "Read more...",

        postCreate: function(){
            this.inherited(arguments);

        },

        _setHeightAttr: function(av) {
            this._set("height", av);
            domStyle.set(this.domNode, "height", this.height +"px");
        },

        _setContentAttr: function(av) {
            this._set("content", av);
            if(this.content!=""){
            this._addText(this.content);
            }
        },

        _setTextSrcAttr: function(av) {

            this._set("textSrc", av);
            if(this.textSrc!=""){
                var articleText = xhr.get({
                    url: this.textSrc,
                    handleAs: "text"
                });
                var domNode = this;
                articleText.then( function(text){
                    domNode._addText(text);
                });
            }
        },

        _addText: function(text){
            var index = 0;

            while( this.measureNode.scrollHeight < this.height && index < text.length )
            {       
                this.containerNode.innerHTML += text.charAt(index);
                index++;
            }

            if(index < text.length){
                this.containerNode.innerHTML = text.substring(0,index-1);
            }
            else{
                this.ellipsisNode.innerHTML = "";
                this.endPointNode.innerHTML = "";
            }
        }   

    });
})

So essentially how this widget works is that if I call content and not textSrc, the string in content is sent to addText() to display it. Otherwise, xhr reads the URL of textSrc and sends the string in the URL to addText(). addText() adds a character from the string until the measureNode height surpasses the desired height (containerNode is in measureNode) or there are no characters left. There would be space at the end for an ellipsis and a “read more” anchor. Now the problem is that using content never works and here are some of the “symptoms”

1. The entire string is displayed even if there is overflow
2. The reason is that this.measureNode.scrollHeight is always 0. This is bizarre because it produces expected numbers when I use it with a URL of textSrc.

I fed just a string to both textSrc and content so something like this._addText("blah blah blah blah ...") in _setContentAttr and domNode._addtext("etc") in textSrc and the result was the same. Also I replaced instances of when I called this widget using textSrc with content and vice versa and again, only textSrc succeeds. This means that it’s not a CSS problem. My guess is that it has something to do with deferred since xhr deferred the execution of the textSrc addText command while content did not. Can anyone explain to me what is going on and how I can solve this problem?

edit: So I think I isolated the problem to that the offsetHeight, clientHeight of a domNode in the widget are not active because maybe the html hasn’t been rendered yet. Deferring the URL worked because by that time, the rendering was complete. However I still can’t find a reasonable solution. The postCreate event doesn’t work for some reason. Anyone know a workaround? Thanks!

Answer 1

Okay I figured it out. So as I suspected postCreate and _set(something)Attr take place during the variable creation of your widget. The container for this widget used a placeAt command to put the widget in there. However _addText(...) was called before placeAt was called and so the widget was calculating clientHeight when it didn’t even exist on the page yet. All I had to do was move the _addText(...) call after the widget’s container placeAt call and everything worked out fine.