diff --git a/inquirer.js b/inquirer.js index 2191cfa..aac0e02 100644 --- a/inquirer.js +++ b/inquirer.js @@ -1,6 +1,8 @@ var inquirer = inquirer || new function () { - var icon = "data:image/gif;base64,R0lGODlhIAAgAKECADIyMjMzM////////yH5BAEKAAIALAAAAAAgACAAAAJulI8Zke2PFoC0LlZzW7qf633XGGHeiJqcaKWgsQov5JLvTNeYq+kM36vBUJNgaujDiVDIpLK58ylIiiU0NjWVZscHgAuUUXPOpfbhjD1bwmFIrHsvv+3Qrd4Byzda7N7h9zclmEOIFmgolgj4VgAAOw=="; + var icon = "data:image/gif;base64,R0lGODlhIAAgAKECADIyMjMzM////////yH5BAEKAAIALAAAAAAgACAAAAJulI8Zke2PFoC0LlZzW7qf633XGGHeiJqcaKWgsQov5JLvTNeYq+kM36vBUJNgaujDiVDIpLK58ylIiiU0NjWVZscHgAuUUXPOpfbhjD1bwmFIrHsvv+3Qrd4Byzda7N7h9zclmEOIFmgolgj4VgAAOw==", + bugico = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAWlBMVEUkJSMuMC01NzQ+Pz1HSEZPUU5YWldfYV5pa2h6e3iOkI2YmpeipKGpq6ifwFWqxma4urezzHa50YHJy8jC1pLL3aLS4K3a3NnZ5rvo6+fn8NXv8+L19/D9//y9fxQqAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+EBBAwFN28edE4AAABVaVRYdENvbW1lbnQAAAAAAENvcHlyaWdodCBJTkNPUlMgR21iSCAod3d3Lmljb25leHBlcmllbmNlLmNvbSkgLSBVbmxpY2Vuc2VkIHByZXZpZXcgaW1hZ2VYrophAAAC6UlEQVRYw+2X2barIAxA0U5qK2jFAor//5uXSUUS2q5z1n07vNhC2JCYSbL8cpA/wAeAGswQPwc0xI3qO4BWcPVs95/gvNYQIAhpgGBtATcw3RLSpgBtRYdU8oLeQNhZlQCUnazDny7YrfM2uK8Hh+fDTopUBavuOfwuH+4xlB5QdP5vEU69xdfaAMOONT8fQg012UY1CNGuV1HxraK3UGw6XEhm+BveYw0igNWh3OyJD6fD1WqF+EG7glUeYJdFEWsQe6I1WTG8BdjVMn6JB8DNvXTjY12R2X9HnDMCqNPqSxmCebl6UWatFHgwmdtdl4XzoGcyrHav3rp3IXLRqEq9SEqf5qQq3X8xao+UjstyEvlwNgZglNLePMX9FJ1e203cLDEn9CYfvKgdTLqgaWsDKa6NM4xkbol/SCheyiBek4+8zh04yz4sUP0WMNN9sHHywrNk0bR8C+jpYbDcXBZAEWGWTM5vAHMiSzGAzAH8i4aAdM46GgSI7lrAw5zJKdSrvLRJSmtc9tWprNUXm6z3akH29N0sE5CdELsYI7hse90BPvt1OABOjiFlXFeA338WNpCgxSGAL9qnzUo7gK+ANp+Cl0BfC0J9bmXTEEioHi4fc+S2GUAgNAZQ7zWJI7cN8QkAPrvfDGDYaxrHZMcMwFW4u7VBV3fBKaBs/wZgNrZJLEB1WUavTDBN3wFeWcD8HUDmwxkDPCkWYWg4KyjMQEKyhtVoYVGnFhoBA0hTdwQEmLJUwYTA0BzRuDKVAEzRNS2M/AwYF20KX6HTjBQcugc5jYELtD74j4C1b5kBAGaIQ0dHou7ihnhjCuBrAiqOABHqPwiIWSNePEQ6kEgDhYTUNCNRoEmaVF3jsvXEcSmU0zG97D10GQOcBu3eJjAMwOZjt9ylAIEF9ktiMWg9IbTmZLvT/dirhI08ZLTx2BaYNqxKHAl+2EgbWtyatJcafAyJbz555rHvOePTb77atP77cv3/gH8Wkk7NciByTQAAAABJRU5ErkJggg=="; + // Locals @@ -19,29 +21,45 @@ title: "Error", width: 400, height: 250, - content: [merger.ui.label("Lerror", { - top: 10, - left: 10, - text: "---" + content: [merger.ui.picture("Iico", { + src: bugico, + top: 0, + left: 0, + width: 32, + height: 32, + }), + merger.ui.label("Lerror", { + top: 0, + left: 37, + width: 400 - 37, + height: 32, + text: "", + }), + merger.ui.label("Tinfo", { + top: 37, + left: -5, + width: 410, + height: 250 - 37 - 25 - 10, + multiple: true, + style: { + whiteSpace: "pre", + fontFamily: "Lucida Console, Monospace", + border: "0", + overflow: "scroll", + background: "#EEE", + padding:"5px", + }, }), merger.ui.button("Bok", { - top: 200, - left: 355, + top: 250 - 20, + left: 400 - 35, + width: 35, + height: 20, text: "Ok", onClick: function (e) { this.getWindow().close(); } }), - merger.ui.textbox("Tinfo", { - top: 25, - left: 10, - width: 340, - height: 190, - multiple: true, - style: { - whiteSpace: "pre", - } - }) ], onClose: function () { merger.leave(); diff --git a/merger/core.js b/merger/core.js index 112a170..270621a 100644 --- a/merger/core.js +++ b/merger/core.js @@ -14,9 +14,10 @@ if (!Object.prototype.merge) Object.defineProperty(Object.prototype, "merge", { writable: true, value: function (src) { - if (src != undefined) - for (var key in src) - this[key] = src[key]; + if (!src) + return this; + for (var key in src) + this[key] = src[key]; return this; } }); @@ -68,6 +69,15 @@ controller.check(); } + /** + * Function to merge control definition preserving style + */ + function mkDefinition(a, b) { + if (a.style) + b.style = a.style.merge(b.style); + return a.merge(b); + } + // ---- UI implementation // ---------------------- @@ -210,23 +220,31 @@ c.getApp = function () { return this.getWindow().parent; } - var settings = {}; - for (var key in def) { - var mdata = def[key]; - if (typeof mdata == "function") - c[key] = def[key]; - else { - var fname = "set" + key[0].toUpperCase() + key.substring(1); - var fnc = c[fname]; - if (fnc && typeof fnc == "function") - settings[key] = { f: fnc.bind(c), d: mdata }; + c.merge = function (src) { + var settings = {}; + for (var key in def) { + var mdata = def[key]; + if (typeof mdata == "function") + c[key] = def[key]; + else { + var fname = "set" + key[0].toUpperCase() + key.substring(1); + var fnc = c[fname]; + settings[key] = { + f: (fnc && typeof fnc == "function") ? fnc.bind(this) : null, d: mdata + }; + } + for (var key in settings) { + var o = settings[key]; + if (o.f) + o.f(o.d); + else + this[key] = o.d; + } } } - // What hapens with value W/O setters? - for (var key in settings) { - var o = settings[key]; - o.f(o.d); - } + c.merge({ + anchor: { top: true, right: false, bottom: false, left: true }, + }.merge(def)); if (c.onControlCreate) c.onControlCreate(); return c; @@ -257,39 +275,48 @@ def.left = (document.body.clientWidth - def.width) / 2; if (!def.content) def.content = []; - var w; + var w, dw = def.width, dh = def.height; + delete (def.width); + delete (def.height); + if (dw == undefined) + dw = 300; + if (dh == undefined) + dh = 200; // Window Title var wt = control("windowtitle", "windowtitle", { visible: !def.hideTitle, style: { - borderBottom: "1px solid black", - textAlign: "center", - height: "18px", + textAlign: "right", + height: "20px", boxSizing: "border-box", fontFamily: "Chicago, Verdana", - fontSize: "12px", - fontWeight: "bold", - backgroundColor: "#F0F0F6", + fontSize: "13px", + lineHeight: "20px", position: "relative", - boxShadow: "0 0 1px #A5A5D6 inset", - paddingTop: "1px", + paddingRight: "7px", }, content: [ control("windowclosebutton", "closeButton", { visible: !def.hideCloseButton, style: { - top: "2px", - left: "6px", - width: "9px", - height: "9px", - border: "2px groove #EFEFEF", - backgroundColor: "#DFDFEF", + top: "0", + left: "0", + width: "25px", + height: "20px", + lineHeight: "20px", + border: "0", + backgroundColor: "teal", padding: 0, boxSizing: "content-box", + color: "white", + }, + setText: function (text) { + this.innerText = text; }, onclick: function () { w.close(); }, + text: "X", }, document.createElement("button")) ], setTitle: function (title) { @@ -303,18 +330,22 @@ // Window client var wc = control("windowclient", "client", { content: def.content, - style: { position: "relative" } + style: { position: "relative", margin:"5px" }, + width: dw, + height: dh, }); def.content = [wt, wc]; // Window root w = control("window", id, { + width: dw + 10, + height: dh + 30, setTitle: function (title) { wt.setTitle(title); }, style: { backgroundColor: def.bg == undefined ? "white" : def.bg, - border: "1px solid black", - boxShadow: "1px 1px 0px rgba(0,0,0,0.5)", + border: "1px solid teal", + boxShadow: "0px 0px 3px rgba(0,0,0,0.5)", overflow: "hidden", }, close: function () { @@ -323,7 +354,7 @@ close = this.onClose(); if (close) this.hide(); - } + }, }.merge(def)); ui.dsk.appendChild(w); ui.w[id] = w; @@ -334,18 +365,23 @@ * Picture control creation */ function picture(id, def) { - + var c = control("picture", id, mkDefinition({ + setSrc: function (src) { + this.src = src; + } + }, def), mkTag("img")); + return c; } /** * Label control creation */ function label(id, def) { - var c = control("label", id, { + var c = control("label", id, mkDefinition({ setText: function (text) { this.innerText = text; } - }.merge(def)); + }, def)); if (def.text !== undefined) c.setText(def.text); return c; @@ -355,15 +391,15 @@ * TextBox control creation */ function textbox(id, def) { - def.style = { - fontSize: "10px", - fontFamily: "Lucida Console, Monospace" - }.merge(def.style); - var c = control("textbox", id, { + var c = control("textbox", id, mkDefinition({ setText: function (value) { this.value = value; + }, + style: { + fontSize: "10px", + border: "1px solid teal", } - }.merge(def), mkTag(def.multiple ? "textarea" : "input")); + }, def), mkTag(def.multiple ? "textarea" : "input")); return c; } @@ -371,10 +407,18 @@ * Button control creation */ function button(id, def) { - var c = control("button", id, def, mkTag("button")); - c.setText = function (text) { - this.innerText = text; - } + var c = control("button", id, mkDefinition({ + setText: function (text) { + this.innerText = text; + }, + style: { + border: "0", + borderRadius: "7px", + background: "teal", + color: "white", + height: "20px", + }, + }, def), mkTag("button")); c.setText(def.text); c.addEventListener("click", function () { if (this.onClick) this.onClick.apply(this, arguments) }, false); return c; @@ -478,6 +522,7 @@ label: label, textbox: textbox, button: button, + picture: picture, } });