init

.gitignore

@@ -0,0 +1,2 @@
+tsconfig.json
+build/

Makefile

@@ -0,0 +1,14 @@
+Sources=src/Styler.ts src/stringFunctions.ts
+OutFile=objectStyler.js
+BuildDir=build
+
+
+OUTPUT_FILE=$(BuildDir)/$(OutFile)
+
+all: $(OUTPUT_FILE)
+
+$(OUTPUT_FILE):$(Sources)
+	tsc --target es5 --out $@ $^
+
+clean:
+	rm -rf $(BuildDir)

README.rst

@@ -0,0 +1 @@
+Object Styler

src/Styler.ts

@@ -0,0 +1,202 @@
+/// <reference path="stringFunctions.ts"/>
+
+module ObjectStyler {
+    /**
+     * Style type
+     * 	name : name of style
+     * 	className : class names to add to styled things
+     *
+     * @type {Object}
+     */
+    export type Style = {name:string, className: string};
+    export type HTML = string;
+    export interface EssentialStyles {
+        endLine : string,
+        punctuation : string,
+        blockIndent : string
+    }
+    /**
+     * style discripton to discribe how to style object
+     * 		it is an object with the same keys as object to discribe the object keys
+     *   styleDiscription {
+     *   	key : StyleActivation,
+     *   	otherKey : StyleActivation}
+     */
+    export type StyleDiscription = Object;
+    export interface StyleActivation {
+        k?:string[] | string,
+        v?:string[] | string | StyleDiscription
+    }
+
+    export class Styler {
+
+        styles: Style[];
+        punctuationStyleName : string;
+        endlStyleName : string;
+        blockIndentStyleName:string;
+
+        constructor(essentialStyles : EssentialStyles, styles : Style[]) {
+            this.styles = styles;
+
+            this.punctuationStyleName = essentialStyles.punctuation;
+            this.endlStyleName = essentialStyles.endLine;
+            this.blockIndentStyleName = essentialStyles.blockIndent;
+        }
+
+        style(object: Object, styleDisc: StyleDiscription) : HTML {
+            return this.styleObject(object,styleDisc);
+        }
+
+        private styleValue(value : string|boolean|number, activatedSyls: string[]) {
+            var html = "";
+            if(typeof value === "string") {
+                html += this.styleSpan("\"", [this.punctuationStyleName] );
+
+                html += this.styleSpan(parseStringValue(value),activatedSyls);
+
+                html += this.styleSpan("\"", [this.punctuationStyleName]);
+            } else {
+                html += this.styleSpan(value.toString(),activatedSyls);
+            }
+            return html;
+        }
+        private styleArray(array: any[], activatedStyles: string[]) : HTML {
+            var htmlResult = this.styleSpan("[", [this.punctuationStyleName]);
+            for(var i = 0 ; i < array.length ; i++) {
+                if(i !== 0) {
+                    htmlResult += this.styleSpan(", ", [this.punctuationStyleName]);
+                }
+                if(array[i] instanceof Array) {
+                    htmlResult += this.styleArray(array[i], activatedStyles);
+                } else if (typeof array[i] === "object" ) {
+                    htmlResult += this.styleObject(array[i], {});
+                } else {
+                    htmlResult += this.styleValue(array[i], activatedStyles);
+                }
+            }
+            htmlResult += this.styleSpan("]", [this.punctuationStyleName]);
+            return htmlResult;
+        }
+        private styleObject(object:Object, styleDisc:StyleDiscription) : HTML {
+            var html = "";
+            // {
+            html += this.styleSpan("{", [this.punctuationStyleName]);
+            //
+            html += this.indentDiv(this.styleObjectHelper(object, styleDisc))
+            // }
+            html += this.styleSpan("}", [this.punctuationStyleName]);
+
+            return html;
+        }
+        private styleObjectHelper(object: Object, styleDisc:StyleDiscription) : HTML{
+            function getKeyActiveStyles(styleActivation: StyleActivation) : string[] {
+                var syls : string[];
+
+                if(styleActivation && styleActivation.k) {
+                    var kSyl = styleActivation.k;
+                    if(typeof kSyl === 'string') {
+                        syls = [kSyl];
+                    } else if(kSyl instanceof Array) {
+                        syls = kSyl;
+                    }
+                } else {
+                    syls = [];
+                }
+                return syls;
+            }
+            function getValueActiveStyles(styleActivation: StyleActivation,
+                    defaultReturn : string[] | StyleDiscription)  : string[] | StyleDiscription {
+
+                if(styleActivation && styleActivation.v) {
+                    if(typeof styleActivation.v === 'string') {
+                        return [styleActivation.v]
+                    } else  {
+                        return styleActivation.v;
+                    }
+                } else {
+                    return defaultReturn;
+                }
+            }
+
+            var html = "";
+            //
+            for(var key in object) {
+                if(object.hasOwnProperty(key)) {
+
+                    // key
+                    var keySyls = getKeyActiveStyles(styleDisc[key]);
+                    html += this.styleSpan(key,keySyls);
+
+                    // :
+                    html += this.styleSpan(" : ",[this.punctuationStyleName]);
+
+                    // value
+                    if(object[key] instanceof Array) {
+
+                        var arraySyls = getValueActiveStyles(styleDisc[key],[]);
+                        if(arraySyls instanceof Array) {
+                            html += this.styleArray(object[key],arraySyls);
+                        } else {
+                            html += this.styleArray(object[key],[]);
+                        }
+
+                    } else if(typeof object[key] === "object") {
+
+                        var objectSyl = getValueActiveStyles(styleDisc[key],{});
+                        if(objectSyl instanceof Array) {
+                            html += this.styleObject(object[key],{});
+                        } else {
+                            html += this.styleObject(object[key],objectSyl);
+                        }
+
+                    } else {
+
+                        var valueSyl = getValueActiveStyles(styleDisc[key],[]);
+                        if(valueSyl instanceof Array) {
+                            html += this.styleValue(object[key], valueSyl);
+                        }
+
+                    }
+                    // end comma
+
+                    html += this.styleSpan(",",[this.punctuationStyleName, this.endlStyleName]);
+                }
+            }
+            return html;
+        }
+        /////// HTML functions
+        /**
+        adds proper classes to spans
+        styleByDefault : if a style is not in activatedStyles, style span by the defaultClassName for it
+        */
+        private styleSpan(content:HTML, activatedStyles:string[]) {
+            var classString = "";
+
+            for(var i = 0 ; i < this.styles.length ; i++) {
+                var syl = this.styles[i];
+                var isActivated = activatedStyles.some((v)=>{
+                    return v ===  syl.name;
+                });
+                if(isActivated) {
+                    classString += " " + syl.className;
+                }
+            }
+
+            if(classString.trim().length ===0) {
+                return '<span>' + content + '</span>';
+            } else {
+                return '<span class=\"' + classString.trim() + '">' + content + '</span>';
+            }
+        }
+        private indentDiv(content: HTML) {
+            var searchStyle = this.styles.filter((v) => v.name === this.blockIndentStyleName);
+            if(searchStyle.length !== 0 ) {
+                return '<div class="' + searchStyle[0].className + '">' + content + '</div>';
+            } else {
+                return '<div>' + content + '</div>';
+            }
+
+
+        }
+    }
+}

src/stringFunctions.ts

@@ -0,0 +1,39 @@
+
+module ObjectStyler {
+    var initializer = "!!";
+    var separater = ",,";
+    function evaluate(funcName : string, args : string[], text : string) : string {
+        switch(funcName) {
+            case "link" :
+                var href = args[0];
+                if(href === undefined) href = text;
+
+                return '<a href="'+href+'">'+text+'</a>';
+
+                break;
+            default :
+                return "ERROR ("+ funcName +") string function does not exist"
+                break;
+        }
+    }
+    export function parseStringValue(strValue : string) : string {
+        // !!func,, [arg,,..],, text
+
+        if(strValue.substring(0,2) !== initializer) {
+            return strValue;
+        }
+
+        // split and clean
+        var callList = strValue.substring(2).split(separater);
+        for(var i = 0 ; i < callList.length ; i++){
+            callList[i] = callList[i].trim();
+        }
+
+        // evaluate
+        var funcName = callList[0];
+        var args = callList.slice(1,callList.length-1);
+        var text = callList[callList.length-1];
+
+        return evaluate(funcName, args, text);
+    }
+}

tests/simple.html

@@ -0,0 +1,60 @@
+<html>
+<style>
+.grey {
+    color:grey;
+}
+.red {
+    color:red;
+}
+.green {
+    color:green;
+}
+.big {
+    font-size:18pt;
+}
+.endl:after {
+    content:"\000A";
+    white-space: pre;
+}
+.indentedBlock {
+    padding-left:40px;
+}
+</style>
+<body>
+    <script src="../build/objectStyler.js"></script>
+    <script>
+        var styler = new ObjectStyler.Styler({punctuation: "codeSyl", blockIndent : "indentedSyl", endLine: "endLineSyl"}, [
+            {name: "codeSyl", className: "grey"},
+            {name: "greenSyl", className: "green"},
+            {name: "redSyl", className: "red"},
+            {name: "endLineSyl", className: "endl"},
+            {name: "bigSyl", className: "big"},
+            {name: "indentedSyl", className: "indentedBlock"},
+            {name: "fancy", className: "big red"},
+        ]);
+
+        var obj = {
+            key1 : "value",
+            key2 : 234,
+            obj1 : {
+                obj1Key1 : "AAA",
+                obj1Key2 : "!!link,, LINK_URL,, Link Title"
+            },
+            numberArray : [23,"dfdf",3434],
+            objectArray : [34, {key1:"v1"}, {key2:34}, 22]
+        }
+
+        var style = {
+            key2 : {k:'redSyl',v:'bigSyl'},
+            key1 : {v:'fancy'},
+            obj1 : {k:'greenSyl', v: {
+                obj1Key1 : {k:'redSyl', v:'fancy'}
+            }},
+            numberArray : {k:['bigSyl', 'greenSyl'], v: ['bigSyl', 'codeSyl']}
+        }
+
+        document.body.innerHTML = styler.style(obj,style);
+
+    </script>
+</body>
+</html>