html

webix.html

webix.html helper.

Please look into the linked official documentation.

References

helpers

delay(), isUndefined(), toNode(), uid().

External references

Official documentation page.

Code

webix.html={
    _native_on_selectstart:0,
    _style_element:{},
    denySelect:function(){
        if (!webix._native_on_selectstart)
            webix._native_on_selectstart = document.onselectstart;
        document.onselectstart = webix.html.stopEvent;
    },
    allowSelect:function(){
        if (webix._native_on_selectstart !== 0){
            document.onselectstart = webix._native_on_selectstart||null;
        }
        webix._native_on_selectstart = 0;

    },
    index:function(node){
        var k=0;
        //must be =, it is not a comparation!
        while ((node = node.previousSibling)) k++;
        return k;
    },
    _style_cache:{},
    createCss:function(rule, sufix){
        var text = "";
            sufix = sufix || "";

        for (var key in rule)
            text+= key+":"+rule[key]+";";

        var name = this._style_cache[text+sufix];
        if (!name){
            name = "s"+webix.uid();
            this.addStyle("."+name+(sufix||"")+"{"+text+"}");
            this._style_cache[text+sufix] = name;
        }
        return name;
    },
    addStyle:function(rule, group){
        var style = group ? this._style_element[group] :this._style_element["default"];
        if(!style){
            style = document.createElement("style");
            style.setAttribute("type", "text/css");
            style.setAttribute("media", "screen,print");
            document.getElementsByTagName("head")[0].appendChild(style);

            if (group)
                this._style_element[group] = style;
            else
                this._style_element["default"] = style;
        }
        /*IE8*/
        if (style.styleSheet)
            style.styleSheet.cssText += rule;
        else
            style.appendChild(document.createTextNode(rule));
    },
    removeStyle:function(group){
        var box = this._style_element[group||"default"];
        if (box)
            box.innerHTML = "";
    },
    create:function(name,attrs,html){
        attrs = attrs || {};
        var node = document.createElement(name);
        for (var attr_name in attrs)
            node.setAttribute(attr_name, attrs[attr_name]);
        if (attrs.style)
            node.style.cssText = attrs.style;
        if (attrs["class"])
            node.className = attrs["class"];
        if (html)
            node.innerHTML=html;
        return node;
    },
    //return node value, different logic for different html elements
    getValue:function(node){
        node = webix.toNode(node);
        if (!node) return "";
        return webix.isUndefined(node.value)?node.innerHTML:node.value;
    },
    //remove html node, can process an array of nodes at once
    remove:function(node){
        if (node instanceof Array)
            for (var i=0; i < node.length; i++)
                this.remove(node[i]);
        else if (node && node.parentNode)
            node.parentNode.removeChild(node);
    },
    //insert new node before sibling, or at the end if sibling doesn't exist
    insertBefore: function(node,before,rescue){
        if (!node) return;
        if (before && before.parentNode)
            before.parentNode.insertBefore(node, before);
        else
            rescue.appendChild(node);
    },
    //return custom ID from html element
    //will check all parents starting from event's target
    locate:function(e,id){
        var trg;
        if (e.tagName)
            trg = e;
        else {
            e=e||event;
            trg=e.target||e.srcElement;
        }

        while (trg){
            if (trg.getAttribute){    //text nodes has not getAttribute
                var test = trg.getAttribute(id);
                if (test) return test;
            }
            trg=trg.parentNode;
        }
        return null;
    },
    //returns position of html element on the page
    offset:function(elem) {
        if (elem.getBoundingClientRect) { //HTML5 method
            var box = elem.getBoundingClientRect();
            var body = document.body;
            var docElem = document.documentElement;
            var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
            var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
            var clientTop = docElem.clientTop || body.clientTop || 0;
            var clientLeft = docElem.clientLeft || body.clientLeft || 0;
            var top  = box.top +  scrollTop - clientTop;
            var left = box.left + scrollLeft - clientLeft;
            return { y: Math.round(top), x: Math.round(left), width:elem.offsetWidth, height:elem.offsetHeight };
        } else { //fallback to naive approach
            var top=0, left=0;
            while(elem) {
                top = top + parseInt(elem.offsetTop,10);
                left = left + parseInt(elem.offsetLeft,10);
                elem = elem.offsetParent;
            }
            return { y: top, x: left, width:elem.offsetHeight, height:elem.offsetWidth };
        }
    },
    //returns relative position of event
    posRelative:function(ev){
        ev = ev || event;
        if (!webix.isUndefined(ev.offsetX))
            return { x:ev.offsetX, y:ev.offsetY };    //ie, webkit
        else
            return { x:ev.layerX, y:ev.layerY };    //firefox
    },
    //returns position of event
    pos:function(ev){
        ev = ev || event;
        if (ev.touches && ev.touches[0])
            ev = ev.touches[0];

        if(ev.pageX || ev.pageY)    //FF, KHTML
            return {x:ev.pageX, y:ev.pageY};
        //IE
        var d  =  ((webix.env.isIE)&&(document.compatMode != "BackCompat"))?document.documentElement:document.body;
        return {
            x:ev.clientX + d.scrollLeft - d.clientLeft,
            y:ev.clientY + d.scrollTop  - d.clientTop
        };
    },
    //prevent event action
    preventEvent:function(e){
        if(e && e.preventDefault) e.preventDefault();
        if(e) e.returnValue = false;
        return webix.html.stopEvent(e);
    },
    //stop event bubbling
    stopEvent:function(e){
        e = (e||event);
        if(e.stopPropagation) e.stopPropagation();
        e.cancelBubble=true;
        return false;
    },
    triggerEvent:function(node, type, name){
        if(document.createEventObject){
            var ev = document.createEventObject();
            if (node.fireEvent)
                node.fireEvent("on"+name, ev);
        } else{
            var ev = document.createEvent(type);
            ev.initEvent(name, true, true);
            if (node.dispatchEvent)
                node.dispatchEvent(ev);
        }
    },
    //add css class to the node
    addCss:function(node,name,check){
        if (!check || node.className.indexOf(name) === -1)
            node.className+=" "+name;
    },
    //remove css class from the node
    removeCss:function(node,name){
        node.className=node.className.replace(RegExp(" "+name,"g"),"");
    },
    getTextSize:function(text, css){
        var d = webix.html.create("DIV",{"class":"webix_view webix_measure_size "+(css||"")},"");
        d.style.cssText = "width:auto;height:auto;visibility:hidden; position:absolute; top:0px; left:0px; overflow:hidden; white-space:nowrap;";
        document.body.appendChild(d);

        var all = (typeof text !==  "object") ? [text] : text;
        var width = 0;
        var height = 0;

        for (var i = 0; i < all.length; i++) {
            d.innerHTML = all[i];
            width = Math.max(width, d.offsetWidth);
            height = Math.max(height, d.offsetHeight);
        }

        webix.html.remove(d);
        return { width:width, height:height };
    },
    download:function(data, filename){
        var objUrl = false;

        if(typeof data =="object"){//blob
            if(window.navigator.msSaveBlob)
                return window.navigator.msSaveBlob(data, filename);
            else if (webix.env.isSafari){
                var reader = new FileReader();
                reader.onloadend = function() {
                    var base64Data = reader.result;
                    webix.html.download("data:attachment/file" + base64Data.slice(base64Data.search(/[,;]/)), filename);
                };
                reader.readAsDataURL(data);
                return;
            } else {
                data = window.URL.createObjectURL(data);
                objUrl = true;
            }
        }
        //data url or blob url
        var link = document.createElement("a");
        link.href = data;
        link.download = filename;
        document.body.appendChild(link);
        link.click();

        webix.delay(function(){
            if(objUrl) window.URL.revokeObjectURL(data);
            document.body.removeChild(link);
            link.remove();
        });
    },
    _getClassName: function(node){
        if(!node) return "";

        var className = node.className || "";
        if(className.baseVal)//'className' exist but not a string - IE svg element in DOM
            className = className.baseVal;

        if(!className.indexOf)
            className = "";

        return className;
    },
    setSelectionRange:function(node, start, end){
        start = start || 0;
        end  = end || start;

        node.focus();
        if(node.setSelectionRange)
            node.setSelectionRange(start, end);
        else{
            //ie8
            var textRange = node.createTextRange();
            textRange.collapse(true);
            textRange.moveEnd('character', end);
            textRange.moveStart('character', start);
            textRange.select();
        }
    },
    getSelectionRange:function(node){
        if("selectionStart" in node)
            return {start:node.selectionStart || 0, end:node.selectionEnd || 0};
        else{
            //ie8
            node.focus();
            var selection = document.selection.createRange();
            var bookmark = selection.getBookmark();
            var textRange = node.createTextRange();

            textRange.moveToBookmark(bookmark);
            var length = textRange.text.length;

            textRange.collapse(true);
            textRange.moveStart('character', -node.value.length);

            var start = textRange.text.length;
            return {start:start, end: start + length};
        }
    }
};