dom-render 1.0.67 → 1.0.68

package/events/EventManager.d.ts

@@ -23,7 +23,7 @@ export declare class EventManager {
     changeVar(obj: any, elements: Set<Element> | Set<ChildNode>, varName?: string): void;
     addDrEvents(obj: any, eventName: string, elements: Set<Element> | Set<ChildNode>, config?: Config): void;
     addDrEventPram(obj: any, attr: string, elements: Set<ChildNode> | Set<Element>, config?: Config): void;
-    procAttr<T extends Element = Element>(elements: Set<ChildNode> | Set<Element> | undefined, attrName: string, callBack: (h: T, value: string, attributes: any) => void): void;
+    procAttr<T extends Element = Element>(elements: Set<Element> | Set<ChildNode> | undefined, attrName: string, callBack: (h: T, value: string, attributes: any) => void): void;
     getValue<T = any>(obj: any, name: string, bindObj?: any): T;
     setValue(obj: any, name: string, value?: any): void;
     isUsingThisVar(raws: string | null | undefined, varName: string | null | undefined): boolean;

package/events/EventManager.js

@@ -1,38 +1,11 @@
 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.eventManager = exports.EventManager = void 0;
 var ScriptUtils_1 = require("../utils/script/ScriptUtils");
 var DomUtils_1 = require("../utils/dom/DomUtils");
 var Range_1 = require("../iterators/Range");
 var Types_1 = require("../types/Types");
-var EventManager = (function () {
+var EventManager = /** @class */ (function () {
     function EventManager() {
         var _this = this;
         this.attrPrefix = 'dr-';
@@ -82,8 +55,14 @@ var EventManager = (function () {
             });
         }
     }
+    // // 순환참조때문에 우선 여기에 뺴놓는다.
+    // public DomrenderProxyFinal(obj: any) {
+    //     (obj as any)._DomRender_isFinal = true;
+    //     return obj;
+    // }
     EventManager.prototype.findAttrElements = function (fragment, config) {
         var _a, _b;
+        // const datas: {name: string, value: string | null, element: Element}[] = [];
         var elements = new Set();
         var addAttributes = (_b = (_a = config === null || config === void 0 ? void 0 : config.applyEvents) === null || _a === void 0 ? void 0 : _a.map(function (it) { return it.attrName; })) !== null && _b !== void 0 ? _b : [];
         addAttributes.concat(this.attrNames).forEach(function (attrName) {
@@ -93,12 +72,22 @@ var EventManager = (function () {
         });
         return elements;
     };
+    // eslint-disable-next-line no-undef
     EventManager.prototype.applyEvent = function (obj, childNodes, config) {
         var _this = this;
+        // console.log('eventManager applyEvent==>', obj, childNodes, config)
+        // Node.ELEMENT_NODE = 1
+        // event
+        // childNodes.forEach(it => {
+        //     if (it instanceof Element) {
+        //         it.setAttribute('dr-thieVariableName', 'this')
+        //     }
+        // })
         this.eventNames.forEach(function (it) {
             _this.addDrEvents(obj, it, childNodes, config);
         });
         this.addDrEventPram(obj, this.eventParam, childNodes, config);
+        // value
         this.procAttr(childNodes, this.attrPrefix + 'value', function (it, attribute) {
             var script = attribute;
             if (script) {
@@ -108,11 +97,13 @@ var EventManager = (function () {
                 }
             }
         });
+        // window event
         EventManager.WINDOW_EVENTS.forEach(function (it) {
             _this.procAttr(childNodes, _this.attrPrefix + 'window-event-' + it, function (it, attribute) {
                 it.obj = obj;
             });
         });
+        // on-init event
         this.procAttr(childNodes, this.attrPrefix + 'on-init', function (it, attribute) {
             var script = attribute;
             if (script) {
@@ -124,8 +115,15 @@ var EventManager = (function () {
                         element: it
                     })
                 }));
+                // console.log('onInit--->', obj, varName, it)
+                // if (typeof this.getValue(obj, varName) === 'function') {
+                //     this.getValue(obj, varName)(it);
+                // } else {
+                //     this.setValue(obj, varName, it);
+                // }
             }
         });
+        // value-link event
         this.procAttr(childNodes, this.attrPrefix + 'value-link', function (it, varName) {
             if (varName) {
                 var ownerVariablePathName = it.getAttribute(EventManager.ownerVariablePathAttrName);
@@ -156,14 +154,18 @@ var EventManager = (function () {
             }
         });
         this.changeVar(obj, childNodes, undefined);
+        // console.log('eventManager-applyEvent-->', config?.applyEvents)
         var elements = Array.from(childNodes).filter(function (it) { return it.nodeType === 1; }).map(function (it) { return it; });
         elements.forEach(function (it) {
             var _a;
             (_a = config === null || config === void 0 ? void 0 : config.applyEvents) === null || _a === void 0 ? void 0 : _a.filter(function (ta) { return it.getAttribute(ta.attrName); }).forEach(function (ta) { return ta.callBack(it, it.getAttribute(ta.attrName), obj); });
         });
     };
+    // eslint-disable-next-line no-undef
     EventManager.prototype.changeVar = function (obj, elements, varName) {
         var _this = this;
+        // console.log('-changeVar-->', obj, elements, varName)
+        // value-link event
         this.procAttr(elements, this.attrPrefix + 'value-link', function (it, attribute) {
             var ownerVariablePathName = it.getAttribute(EventManager.ownerVariablePathAttrName);
             var bindObj = obj;
@@ -182,8 +184,8 @@ var EventManager = (function () {
                 }
             }
         });
+        // attribute
         this.procAttr(elements, this.attrPrefix + 'attr', function (it, attribute) {
-            var e_1, _a;
             var script = attribute;
             if (script) {
                 script = 'return ' + script;
@@ -196,7 +198,7 @@ var EventManager = (function () {
                 }));
                 if (typeof data === 'string') {
                     data.split(',').forEach(function (sit) {
-                        var _a = __read(sit.split('='), 2), key = _a[0], value = _a[1];
+                        var _a = sit.split('='), key = _a[0], value = _a[1];
                         var s = value.trim();
                         var k = key.trim();
                         if (s === 'null') {
@@ -209,7 +211,7 @@ var EventManager = (function () {
                 }
                 else if (Array.isArray(data)) {
                     data.forEach(function (sit) {
-                        var _a = __read(sit.split('='), 2), key = _a[0], value = _a[1];
+                        var _a = sit.split('='), key = _a[0], value = _a[1];
                         var s = value.trim();
                         var k = key.trim();
                         if (s === 'null') {
@@ -221,29 +223,20 @@ var EventManager = (function () {
                     });
                 }
                 else {
-                    try {
-                        for (var _b = __values(Object.entries(data)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                            var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
-                            if (value === null) {
-                                it.removeAttribute(key);
-                            }
-                            else {
-                                it.setAttribute(key, String(value));
-                            }
+                    for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
+                        var _b = _a[_i], key = _b[0], value = _b[1];
+                        if (value === null) {
+                            it.removeAttribute(key);
                         }
-                    }
-                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                    finally {
-                        try {
-                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                        else {
+                            it.setAttribute(key, String(value));
                         }
-                        finally { if (e_1) throw e_1.error; }
                     }
                 }
             }
         });
+        // style
         this.procAttr(elements, this.attrPrefix + 'style', function (it, attribute) {
-            var e_2, _a;
             var script = attribute;
             if (script) {
                 script = 'return ' + script;
@@ -261,26 +254,17 @@ var EventManager = (function () {
                     it.setAttribute('style', data.join(';'));
                 }
                 else {
-                    try {
-                        for (var _b = __values(Object.entries(data)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                            var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
-                            if (it instanceof HTMLElement) {
-                                it.style[key] = String(value);
-                            }
-                        }
-                    }
-                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                    finally {
-                        try {
-                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
+                        var _b = _a[_i], key = _b[0], value = _b[1];
+                        if (it instanceof HTMLElement) {
+                            it.style[key] = String(value);
                         }
-                        finally { if (e_2) throw e_2.error; }
                     }
                 }
             }
         });
+        // class
         this.procAttr(elements, this.attrPrefix + 'class', function (it, attribute) {
-            var e_3, _a;
             var script = attribute;
             if (script) {
                 script = 'return ' + script;
@@ -298,30 +282,22 @@ var EventManager = (function () {
                     it.setAttribute('class', data.join(' '));
                 }
                 else {
-                    try {
-                        for (var _b = __values(Object.entries(data)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                            var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
-                            if (it instanceof HTMLElement) {
-                                if (value) {
-                                    it.classList.add(key);
-                                }
-                                else {
-                                    it.classList.remove(key);
-                                }
+                    for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
+                        var _b = _a[_i], key = _b[0], value = _b[1];
+                        if (it instanceof HTMLElement) {
+                            if (value) {
+                                it.classList.add(key);
+                            }
+                            else {
+                                it.classList.remove(key);
                             }
                         }
                     }
-                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
-                    finally {
-                        try {
-                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                        }
-                        finally { if (e_3) throw e_3.error; }
-                    }
                 }
             }
         });
     };
+    // eslint-disable-next-line no-undef
     EventManager.prototype.addDrEvents = function (obj, eventName, elements, config) {
         var _this = this;
         var attr = this.attrPrefix + 'event-' + eventName;
@@ -357,10 +333,10 @@ var EventManager = (function () {
                 var params_1 = {};
                 var prefix_1 = attr + ':';
                 Object.entries(attributes).filter(function (_a) {
-                    var _b = __read(_a, 2), k = _b[0], v = _b[1];
+                    var k = _a[0], v = _a[1];
                     return k.startsWith(prefix_1);
                 }).forEach(function (_a) {
-                    var _b = __read(_a, 2), k = _b[0], v = _b[1];
+                    var k = _a[0], v = _a[1];
                     params_1[k.slice(prefix_1.length)] = v;
                 });
                 bind.split(',').forEach(function (eventName) {
@@ -380,13 +356,16 @@ var EventManager = (function () {
             }
         });
     };
+    // eslint-disable-next-line no-undef
     EventManager.prototype.procAttr = function (elements, attrName, callBack) {
         if (elements === void 0) { elements = new Set(); }
         var sets = new Set();
         elements.forEach(function (it) {
+            // console.log('--->type', it, it.nodeType)
             if (!it) {
                 return;
             }
+            // Node.ELEMENT_NODE = 1
             if (it.nodeType === 1) {
                 var e = it;
                 sets.add(e);
@@ -404,6 +383,7 @@ var EventManager = (function () {
         });
     };
     EventManager.prototype.getValue = function (obj, name, bindObj) {
+        // let r = obj[name];
         var r = ScriptUtils_1.ScriptUtils.evalReturn(name, obj);
         if (typeof r === 'function') {
             r = r.bind(bindObj !== null && bindObj !== void 0 ? bindObj : obj);
@@ -412,17 +392,20 @@ var EventManager = (function () {
     };
     EventManager.prototype.setValue = function (obj, name, value) {
         name = name.replaceAll('this.', 'this.this.');
-        ScriptUtils_1.ScriptUtils.eval("".concat(name, " = this.value"), {
+        ScriptUtils_1.ScriptUtils.eval("".concat(name, " = this.value;"), {
             this: obj,
             value: value
         });
     };
     EventManager.prototype.isUsingThisVar = function (raws, varName) {
+        // console.log('isUsingV', raws)
+        // console.log('isUsingV', raws, varName, ScriptUtils.getVariablePaths(raws ?? ''))
         if (varName && raws) {
             if (varName.startsWith('this.')) {
                 varName = varName.replace(/this\./, '');
             }
             EventManager.VARNAMES.forEach(function (it) {
+                // raws = raws!.replace(RegExp(it.replace('$', '\\$'), 'g'), `this?.___${it}`);
                 raws = raws.replace(RegExp(it.replace('$', '\\$'), 'g'), "this.___".concat(it));
             });
             var variablePaths = ScriptUtils_1.ScriptUtils.getVariablePaths(raws !== null && raws !== void 0 ? raws : '');
@@ -431,23 +414,14 @@ var EventManager = (function () {
         return false;
     };
     EventManager.setBindProperty = function (scripts, obj) {
-        var e_4, _a;
         if (scripts) {
+            // const newScripts = Object.assign({}, scripts)
             var newScripts = Object.assign({}, scripts);
-            try {
-                for (var _b = __values(Object.entries(newScripts)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
-                    if (typeof value === 'function') {
-                        newScripts[key] = value.bind(obj);
-                    }
-                }
-            }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            for (var _i = 0, _a = Object.entries(newScripts); _i < _a.length; _i++) {
+                var _b = _a[_i], key = _b[0], value = _b[1];
+                if (typeof value === 'function') {
+                    newScripts[key] = value.bind(obj);
                 }
-                finally { if (e_4) throw e_4.error; }
             }
             return newScripts;
         }

package/iterators/Range.d.ts

@@ -19,5 +19,4 @@ export declare class Range implements Iterable<number> {
     constructor(first: number, last: number, step?: number);
     [Symbol.iterator](): Iterator<number>;
     static range(first: number | string, last?: number, step?: number): Range;
-    toArray(): number[];
 }

package/iterators/Range.js

@@ -1,32 +1,9 @@
 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Range = exports.RangeIterator = exports.RangeResult = void 0;
-var RangeResult = (function () {
+// within rangeResult.ts
+// @ts-ignore
+var RangeResult = /** @class */ (function () {
     function RangeResult(value, done) {
         this.done = done;
         this.value = value !== null && value !== void 0 ? value : 0;
@@ -34,7 +11,7 @@ var RangeResult = (function () {
     return RangeResult;
 }());
 exports.RangeResult = RangeResult;
-var RangeIterator = (function () {
+var RangeIterator = /** @class */ (function () {
     function RangeIterator(first, last, step) {
         this._current = this._first = first;
         this._last = last;
@@ -58,7 +35,7 @@ var RangeIterator = (function () {
     return RangeIterator;
 }());
 exports.RangeIterator = RangeIterator;
-var Range = (function () {
+var Range = /** @class */ (function () {
     function Range(first, last, step) {
         if (step === void 0) { step = 1; }
         this.first = first;
@@ -75,17 +52,14 @@ var Range = (function () {
             return new Range(0, first, step);
         }
         else if (typeof first === 'string') {
-            var _a = __read(first.split('..'), 2), _first = _a[0], _b = _a[1], _last = _b === void 0 ? '0' : _b;
-            var _c = __read(_last.split(','), 2), __last = _c[0], _d = _c[1], _step = _d === void 0 ? '1' : _d;
+            var _a = first.split('..'), _first = _a[0], _b = _a[1], _last = _b === void 0 ? '0' : _b;
+            var _c = _last.split(','), __last = _c[0], _d = _c[1], _step = _d === void 0 ? '1' : _d;
             return new Range(Number(_first.trim()), Number(__last.trim()), Number(_step.trim()));
         }
         else {
             return new Range(first, last !== null && last !== void 0 ? last : 0, step);
         }
     };
-    Range.prototype.toArray = function () {
-        return __spreadArray([], __read(this), false);
-    };
     return Range;
 }());
 exports.Range = Range;

package/managers/RenderManager.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderManager = void 0;
-var RenderManager = (function () {
+var RenderManager = /** @class */ (function () {
     function RenderManager() {
     }
     RenderManager.render = function (obj, target) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-render",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "main": "DomRender.js",
   "license": "MIT",
   "description": "dom-render",
@@ -54,7 +54,7 @@
     "bundle:watch": "rollup -c -w",
     "dev:start": "npm run start --workspace=dev",
     "dev:serve": "npm run serve --workspace=dev",
-    "npm-build": "npm run build && cp package.json dist && cp .npmignore dist && cp README.MD dist",
+    "npm-build": "npm run build && cp package.json dist && cp .npmignore dist && cp README.MD dist && rm -rf dist/dist/bundle.js.map",
     "npm-publish": "npm run npm-build && npm publish ./dist",
     "tsc": "tsc",
     "setting:root-dist": "rm -rf ../dist-dom-render && mkdirp ../dist-dom-render && cp package-root-dist.json ../dist-dom-render/package.json",
@@ -65,28 +65,28 @@
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-replace": "^2.4.2",
+    "@rollup/plugin-typescript": "^8.3.0",
     "@types/jest": "^26.0.22",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
-    "eslint": "^7.21.0",
-    "eslint-config-standard": "^16.0.2",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
     "jest": "^26.6.3",
     "mkdirp": "^1.0.4",
-    "rollup": "^2.52.8",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup": "^2.60.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-html": "^0.2.1",
     "rollup-plugin-import-css": "^3.0.2",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "rollup-plugin-typescript2": "^0.30.0",
     "rollup-watch": "^3.2.2",
     "supertest": "^6.1.3",
     "ts-jest": "^26.5.4",

package/types/Types.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DomRenderFinalProxy = exports.Shield = void 0;
-var Shield = (function () {
+var Shield = /** @class */ (function () {
     function Shield() {
     }
     return Shield;
 }());
 exports.Shield = Shield;
-var DomRenderFinalProxy = (function () {
+var DomRenderFinalProxy = /** @class */ (function () {
     function DomRenderFinalProxy() {
     }
     DomRenderFinalProxy.prototype.set = function (target, p, value, receiver) {

package/utils/clipboard/ClipBoardUtils.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClipBoardUtils = void 0;
-var ClipBoardUtils = (function () {
+var ClipBoardUtils = /** @class */ (function () {
     function ClipBoardUtils() {
     }
     ClipBoardUtils.readText = function (clipboard) {

package/utils/dom/DomUtils.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DomUtils = void 0;
-var DomUtils = (function () {
+var DomUtils = /** @class */ (function () {
     function DomUtils() {
     }
     DomUtils.selectorElements = function (selector, element) {

package/utils/location/LocationUtils.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LocationUtils = void 0;
-var LocationUtils = (function () {
+var LocationUtils = /** @class */ (function () {
     function LocationUtils() {
     }
     LocationUtils.hash = function (window) {

package/utils/node/NodeUtils.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NodeUtils = void 0;
-var NodeUtils = (function () {
+var NodeUtils = /** @class */ (function () {
     function NodeUtils() {
     }
+    // https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
     NodeUtils.removeAllChildNode = function (node) {
         while (node === null || node === void 0 ? void 0 : node.firstChild) {
             node.firstChild.remove();
@@ -14,6 +15,7 @@ var NodeUtils = (function () {
     };
     NodeUtils.replaceNode = function (targetNode, newNode) {
         var _a;
+        // console.log('repalceNode', targetNode, newNode, targetNode.parentNode)
         return (_a = targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, targetNode);
     };
     NodeUtils.addNode = function (targetNode, newNode) {

package/utils/random/RandomUtils.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RandomUtils = void 0;
 var ValidUtils_1 = require("../valid/ValidUtils");
-var RandomUtils = (function () {
+var RandomUtils = /** @class */ (function () {
     function RandomUtils() {
     }
     RandomUtils.random = function (min, max) {
@@ -32,6 +32,7 @@ var RandomUtils = (function () {
         }
         return color;
     };
+    // (Math.random().toString(36)+'00000000000000000').slice(2, 10) + Date.now()
     RandomUtils.getRandomString = function (len) {
         var letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
         var color = '';