jsdifflib icon indicating copy to clipboard operation
jsdifflib copied to clipboard

Feature - knockoutjs customBindingHandler

Open jmvtrinidad opened this issue 8 years ago • 0 comments

This is a simple binding handlers for knockout js.

    ko.bindingHandlers['jsDiffLib'] = {
            update: function (element, valueAccessor) {
                function getHtml(table){
                    var elems = [];
                    $(table).find("tbody>tr>td").each(function (item, elem) {
                        if(elem.className === "equal"){
                            elems.push("<span>" + elem.innerHTML + "</span>");
                        }
                        if(elem.className === "insert"){
                            elems.push("<ins>" + elem.innerHTML + "</ins>");
                        }
                        if(elem.className === "delete"){
                            elems.push("<del>" + elem.innerHTML + "</del>");
                        }
                    });
                    elems.splice(0, 1);
                    return elems.join("<br/>");
                }

                var options = valueAccessor();

                var base = difflib.stringAsLines("\n" + options.old()),
                    newtxt = difflib.stringAsLines("\n" + options.new()),
                    sm = new difflib.SequenceMatcher(base, newtxt),
                    opcodes = sm.get_opcodes();

                var currentTable = diffview.buildView({
                    baseTextLines: base,
                    newTextLines: newtxt,
                    opcodes: opcodes,
                    baseTextName: "Base Text",
                    newTextName: "New Text",
                    contextSize: null,
                    viewType: 1
                });
                var html = getHtml(currentTable);

                $(element).html(html);
            }
        }

jmvtrinidad avatar May 05 '16 03:05 jmvtrinidad