summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorondras <none@none>2011-09-21 15:51:55 +0200
committerondras <none@none>2011-09-21 15:51:55 +0200
commit45d6a9111fa16abc12044436032dfa731aea54d9 (patch)
treed3df7fcd240684c425aa58b7b697bf1db1908e2e
parent8a659daa006d21d1740976f877b4ee35fdc1a0cf (diff)
downloadwwwsqldesigner-45d6a9111fa16abc12044436032dfa731aea54d9.zip
wwwsqldesigner-45d6a9111fa16abc12044436032dfa731aea54d9.tar.gz
wwwsqldesigner-45d6a9111fa16abc12044436032dfa731aea54d9.tar.bz2
version; support for visible datatypes; vml removed; rounded corners
Diffstat
-rw-r--r--index.html13
-rw-r--r--js/wwwsqldesigner.js204
-rw-r--r--locale/cs.xml1
-rw-r--r--locale/en.xml1
-rw-r--r--styles/style.css31
5 files changed, 145 insertions, 105 deletions
diff --git a/index.html b/index.html
index 43e49bc..8ae345f 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
WWW SQL Designer, (C) 2005-2011 Ondrej Zara, ondras@zarovi.cz
- Version: 2.5
+ Version: 2.6
See license.txt for licencing information.
-->
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
+<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WWW SQL Designer</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1" />
- <meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="styles/style.css" media="all" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="styles/ie6.css" /><![endif]-->
@@ -127,6 +126,14 @@
<input type="checkbox" id="optionshowsize" />
</td>
</tr>
+ <tr>
+ <td>
+ * <label id="showtype" for="optionshowtype"></label>
+ </td>
+ <td>
+ <input type="checkbox" id="optionshowtype" />
+ </td>
+ </tr>
</tbody>
</table>
diff --git a/js/wwwsqldesigner.js b/js/wwwsqldesigner.js
index 3bf19f9..2cbae9c 100644
--- a/js/wwwsqldesigner.js
+++ b/js/wwwsqldesigner.js
@@ -17,9 +17,8 @@ SQL.Visual.prototype.init = function() {
SQL.Visual.prototype._init = function() {
this.dom = {
- container:OZ.DOM.elm("div"),
- content:OZ.DOM.elm("div"),
- title:OZ.DOM.elm("div",{className:"title"})
+ container: null,
+ title: null
};
this.data = {
title:""
@@ -76,20 +75,26 @@ SQL.Row.prototype.init = function(owner, title, data) {
}
SQL.Row.prototype._build = function() {
- this.dom.container.className = "row";
- this.dom.content.style.display = "none";
+ this.dom.container = OZ.DOM.elm("tbody");
+
+ this.dom.content = OZ.DOM.elm("tr");
+ this.dom.selected = OZ.DOM.elm("div", {className:"selected",innerHTML:"&raquo;&nbsp;"});
+ this.dom.title = OZ.DOM.elm("div", {className:"title"});
+ var td1 = OZ.DOM.elm("td");
+ var td2 = OZ.DOM.elm("td", {className:"typehint"});
+ this.dom.typehint = td2;
+
+ OZ.DOM.append(
+ [this.dom.container, this.dom.content],
+ [this.dom.content, td1, td2],
+ [td1, this.dom.selected, this.dom.title]
+ );
this.enter = this.bind(this.enter);
this.changeComment = this.bind(this.changeComment);
-
- this.dom.selected = OZ.DOM.elm("span",{className:"row_selected"});
- this.dom.selected.innerHTML = "&raquo;&nbsp;";
-
- OZ.DOM.append([this.dom.container,this.dom.selected,this.dom.title,this.dom.content]);
- OZ.Event.add(this.dom.container,"click",this.bind(this.click));
- OZ.Event.add(this.dom.container,"dblclick",this.bind(this.dblclick));
- OZ.Event.add(this.dom.container,"mousedown",this.bind(this.mousedown));
+ OZ.Event.add(this.dom.container, "click",this.bind(this.click));
+ OZ.Event.add(this.dom.container, "dblclick",this.bind(this.dblclick));
}
SQL.Row.prototype.select = function() {
@@ -120,8 +125,7 @@ SQL.Row.prototype.setTitle = function(t) {
}
SQL.Row.prototype.click = function(e) { /* clicked on row */
- OZ.Event.stop(e);
- this.dispatch("rowclick",this);
+ this.dispatch("rowclick", this);
this.owner.owner.rowManager.select(this);
}
@@ -131,11 +135,6 @@ SQL.Row.prototype.dblclick = function(e) { /* dblclicked on row */
this.expand();
}
-SQL.Row.prototype.mousedown = function(e) {
- OZ.Event.stop(e);
- this.owner.owner.tableManager.select(this.owner);
-}
-
SQL.Row.prototype.update = function(data) { /* update subset of row data */
var des = SQL.Designer;
if (data.nll && data.def && data.def.match(/^null$/i)) { data.def = null; }
@@ -171,7 +170,9 @@ SQL.Row.prototype.down = function() { /* shift down */
this.redraw();
}
-SQL.Row.prototype.buildContent = function() {
+SQL.Row.prototype.buildEdit = function() {
+ OZ.DOM.clear(this.dom.container);
+
var elms = [];
this.dom.name = OZ.DOM.elm("input");
this.dom.name.type = "text";
@@ -197,6 +198,9 @@ SQL.Row.prototype.buildContent = function() {
this.dom.nll.type = "checkbox";
elms.push(["null",this.dom.nll]);
+ this.dom.comment = OZ.DOM.elm("span",{className:"comment"});
+ this.dom.comment.innerHTML = this.data.comment;
+
this.dom.commentbtn = OZ.DOM.elm("input");
this.dom.commentbtn.type = "button";
this.dom.commentbtn.value = _("comment");
@@ -205,17 +209,27 @@ SQL.Row.prototype.buildContent = function() {
for (var i=0;i<elms.length;i++) {
var row = elms[i];
+ var tr = OZ.DOM.elm("tr");
+ var td1 = OZ.DOM.elm("td");
+ var td2 = OZ.DOM.elm("td");
var l = OZ.DOM.text(_(row[0])+": ");
- this.dom.content.appendChild(l);
- this.dom.content.appendChild(row[1]);
- this.dom.content.appendChild(OZ.DOM.elm("br"));
+ OZ.DOM.append(
+ [tr, td1, td2],
+ [td1, l],
+ [td2, row[1]]
+ );
+ this.dom.container.appendChild(tr);
}
- this.dom.comment = OZ.DOM.elm("span",{className:"comment"});
- this.dom.comment.innerHTML = this.data.comment;
-
- this.dom.content.appendChild(this.dom.comment);
- this.dom.content.appendChild(this.dom.commentbtn);
+ var tr = OZ.DOM.elm("tr");
+ var td1 = OZ.DOM.elm("td");
+ var td2 = OZ.DOM.elm("td");
+ OZ.DOM.append(
+ [tr, td1, td2],
+ [td1, this.dom.comment],
+ [td2, this.dom.commentbtn]
+ );
+ this.dom.container.appendChild(tr);
}
SQL.Row.prototype.changeComment = function(e) {
@@ -228,9 +242,7 @@ SQL.Row.prototype.changeComment = function(e) {
SQL.Row.prototype.expand = function() {
if (this.expanded) { return; }
this.expanded = true;
- this.dom.title.style.display = "none";
- this.dom.content.style.display = "block";
- this.buildContent();
+ this.buildEdit();
this.load();
this.redraw();
this.dom.name.focus();
@@ -248,15 +260,12 @@ SQL.Row.prototype.collapse = function() {
nll: this.dom.nll.checked,
ai: this.dom.ai.checked
}
+
+ OZ.DOM.clear(this.dom.container);
+ this.dom.container.appendChild(this.dom.content);
- OZ.DOM.clear(this.dom.content);
- this.dom.content.style.display = "none";
- this.dom.title.style.display = "block";
this.update(data);
this.setTitle(this.dom.name.value);
- /* gecko hack */
- this.owner.moveBy(1,1);
- this.owner.moveBy(-1,-1);
}
SQL.Row.prototype.load = function() { /* put data to expanded form */
@@ -273,12 +282,20 @@ SQL.Row.prototype.load = function() { /* put data to expanded form */
SQL.Row.prototype.redraw = function() {
var color = this.getColor();
this.dom.container.style.backgroundColor = color;
- OZ.DOM.removeClass(this.dom.container,"primary");
- OZ.DOM.removeClass(this.dom.container,"key");
- if (this.isPrimary()) { OZ.DOM.addClass(this.dom.container,"primary"); }
- if (this.isKey()) { OZ.DOM.addClass(this.dom.container,"key"); }
+ OZ.DOM.removeClass(this.dom.title, "primary");
+ OZ.DOM.removeClass(this.dom.title, "key");
+ if (this.isPrimary()) { OZ.DOM.addClass(this.dom.title, "primary"); }
+ if (this.isKey()) { OZ.DOM.addClass(this.dom.title, "key"); }
this.dom.selected.style.display = (this.selected ? "" : "none");
this.dom.container.title = this.data.comment;
+
+ if (this.owner.owner.getOption("showtype")) {
+ var elm = this.getDataType();
+ var t = elm.getAttribute("sql");
+ if (this.data.size.length) { t += "("+this.data.size+")"; }
+ this.dom.typehint.innerHTML = t;
+ }
+
this.owner.redraw();
this.owner.owner.rowManager.redraw();
}
@@ -480,34 +497,23 @@ SQL.Relation.prototype.init = function(owner, row1, row2) {
var color = "#000";
}
- if (this.owner.vector == "svg") {
+ if (this.owner.vector) {
var path = document.createElementNS(this.owner.svgNS, "path");
path.setAttribute("stroke", color);
path.setAttribute("stroke-width", CONFIG.RELATION_THICKNESS);
path.setAttribute("fill", "none");
this.owner.dom.svg.appendChild(path);
this.dom.push(path);
- } else if (this.owner.vector == "vml") {
- var curve = OZ.DOM.elm("v:curve");
- curve.strokeweight = CONFIG.RELATION_THICKNESS+"px";
- curve.from = "0 0";
- curve.to = "0 0";
- curve.control1 = "10 10";
- curve.control2 = "100 300";
- curve.strokecolor = color;
- curve.filled = false;
- this.owner.dom.content.appendChild(curve);
- this.dom.push(curve);
} else {
for (var i=0;i<3;i++) {
- var div = OZ.DOM.elm("div",{position:"absolute",className:"relation"});
+ var div = OZ.DOM.elm("div",{position:"absolute",className:"relation",backgroundColor:color});
this.dom.push(div);
if (i & 1) { /* middle */
OZ.Style.set(div,{width:CONFIG.RELATION_THICKNESS+"px"});
} else { /* first & last */
OZ.Style.set(div,{height:CONFIG.RELATION_THICKNESS+"px"});
}
- this.owner.dom.content.appendChild(div);
+ this.owner.dom.container.appendChild(div);
}
}
@@ -529,15 +535,10 @@ SQL.Relation.prototype.hide = function() {
}
SQL.Relation.prototype.redrawNormal = function(p1, p2, half) {
- if (this.owner.vector == "svg") {
+ if (this.owner.vector) {
var str = "M "+p1[0]+" "+p1[1]+" C "+(p1[0] + half)+" "+p1[1]+" ";
str += (p2[0]-half)+" "+p2[1]+" "+p2[0]+" "+p2[1];
this.dom[0].setAttribute("d",str);
- } else if (this.owner.vector == "vml") {
- this.dom[0].from = p1[0]+" "+p1[1];
- this.dom[0].to = p2[0]+" "+p2[1];
- this.dom[0].control1 = (p1[0]+half)+" "+p1[1];
- this.dom[0].control2 = (p2[0]-half)+" "+p2[1];
} else {
this.dom[0].style.left = p1[0]+"px";
this.dom[0].style.top = p1[1]+"px";
@@ -554,15 +555,10 @@ SQL.Relation.prototype.redrawNormal = function(p1, p2, half) {
}
SQL.Relation.prototype.redrawSide = function(p1, p2, x) {
- if (this.owner.vector == "svg") {
+ if (this.owner.vector) {
var str = "M "+p1[0]+" "+p1[1]+" C "+x+" "+p1[1]+" ";
str += x+" "+p2[1]+" "+p2[0]+" "+p2[1];
this.dom[0].setAttribute("d",str);
- } else if (this.owner.vector == "vml") {
- this.dom[0].from = p1[0]+" "+p1[1];
- this.dom[0].to = p2[0]+" "+p2[1];
- this.dom[0].control1 = x+" "+p1[1];
- this.dom[0].control2 = x+" "+p2[1];
} else {
this.dom[0].style.left = Math.min(x,p1[0])+"px";
this.dom[0].style.top = p1[1]+"px";
@@ -646,7 +642,6 @@ SQL.Table.prototype.init = function(owner, name, x, y, z) {
SQL.Visual.prototype.init.apply(this);
this.data.comment = "";
- this.dom.container.className = "table";
this.setTitle(name);
this.x = x || 0;
this.y = y || 0;
@@ -655,12 +650,21 @@ SQL.Table.prototype.init = function(owner, name, x, y, z) {
}
SQL.Table.prototype._build = function() {
- this.dom.mini = OZ.DOM.elm("div",{className:"mini"});
-
- this.dom.title.className = "table_title";
-
- OZ.DOM.append([this.dom.container,this.dom.title,this.dom.content]);
- this.owner.map.dom.content.appendChild(this.dom.mini);
+ this.dom.container = OZ.DOM.elm("div", {className:"table"});
+ this.dom.content = OZ.DOM.elm("table");
+ var thead = OZ.DOM.elm("thead");
+ var tr = OZ.DOM.elm("tr");
+ this.dom.title = OZ.DOM.elm("td", {className:"title", colSpan:2});
+
+ OZ.DOM.append(
+ [this.dom.container, this.dom.content],
+ [this.dom.content, thead],
+ [thead, tr],
+ [tr, this.dom.title]
+ );
+
+ this.dom.mini = OZ.DOM.elm("div", {className:"mini"});
+ this.owner.map.dom.container.appendChild(this.dom.mini);
this._ec.push(OZ.Event.add(this.dom.container, "click", this.bind(this.click)));
this._ec.push(OZ.Event.add(this.dom.container, "dblclick", this.bind(this.dblclick)));
@@ -707,27 +711,33 @@ SQL.Table.prototype.hideRelations = function() {
SQL.Table.prototype.click = function(e) {
OZ.Event.stop(e);
+ var t = OZ.Event.target(e);
+ this.owner.tableManager.select(this);
+
+ if (t != this.dom.title) { return; } /* click on row */
+
this.dispatch("tableclick",this);
this.owner.rowManager.select(false);
}
-SQL.Table.prototype.dblclick = function() {
- this.owner.tableManager.edit();
+SQL.Table.prototype.dblclick = function(e) {
+ var t = OZ.Event.target(e);
+ if (t == this.dom.title) { this.owner.tableManager.edit(); }
}
SQL.Table.prototype.select = function() {
if (this.selected) { return; }
this.selected = true;
- OZ.DOM.addClass(this.dom.container,"table_selected");
- OZ.DOM.addClass(this.dom.mini,"mini_selected");
+ OZ.DOM.addClass(this.dom.container, "selected");
+ OZ.DOM.addClass(this.dom.mini, "mini_selected");
this.redraw();
}
SQL.Table.prototype.deselect = function() {
if (!this.selected) { return; }
this.selected = false;
- OZ.DOM.removeClass(this.dom.container,"table_selected");
- OZ.DOM.removeClass(this.dom.mini,"mini_selected");
+ OZ.DOM.removeClass(this.dom.container, "selected");
+ OZ.DOM.removeClass(this.dom.mini, "mini_selected");
this.redraw();
}
@@ -813,6 +823,8 @@ SQL.Table.prototype.snap = function() {
SQL.Table.prototype.down = function(e) { /* mousedown - start drag */
OZ.Event.stop(e);
+ var t = OZ.Event.target(e);
+ if (t != this.dom.title) { return; } /* on a row */
/* touch? */
if (e.type == "touchstart") {
@@ -1057,7 +1069,7 @@ SQL.Rubberband = OZ.Class().extend(SQL.Visual);
SQL.Rubberband.prototype.init = function(owner) {
this.owner = owner;
SQL.Visual.prototype.init.apply(this);
- this.dom.container = this.dom.content = OZ.$("rubberband");
+ this.dom.container = OZ.$("rubberband");
OZ.Event.add("area", "mousedown", this.bind(this.down));
}
@@ -1107,7 +1119,7 @@ SQL.Map = OZ.Class().extend(SQL.Visual);
SQL.Map.prototype.init = function(owner) {
this.owner = owner;
SQL.Visual.prototype.init.apply(this);
- this.dom.container = this.dom.content = OZ.$("minimap");
+ this.dom.container = OZ.$("minimap");
this.width = this.dom.container.offsetWidth - 2;
this.height = this.dom.container.offsetHeight - 2;
@@ -2192,8 +2204,9 @@ SQL.Options.prototype.build = function() {
this.dom.optionhide = OZ.$("optionhide");
this.dom.optionvector = OZ.$("optionvector");
this.dom.optionshowsize = OZ.$("optionshowsize");
+ this.dom.optionshowtype = OZ.$("optionshowtype");
- var ids = ["language","db","snap","pattern","hide","vector","showsize","optionsnapnotice","optionpatternnotice","optionsnotice","optionshowsize"];
+ var ids = ["language","db","snap","pattern","hide","vector","showsize","showtype","optionsnapnotice","optionpatternnotice","optionsnotice"];
for (var i=0;i<ids.length;i++) {
var id = ids[i];
var elm = OZ.$(id);
@@ -2232,6 +2245,7 @@ SQL.Options.prototype.save = function() {
this.owner.setOption("hide",this.dom.optionhide.checked ? "1" : "");
this.owner.setOption("vector",this.dom.optionvector.checked ? "1" : "");
this.owner.setOption("showsize",this.dom.optionshowsize.checked ? "1" : "");
+ this.owner.setOption("showtype",this.dom.optionshowtype.checked ? "1" : "");
}
SQL.Options.prototype.click = function() {
@@ -2241,6 +2255,7 @@ SQL.Options.prototype.click = function() {
this.dom.optionhide.checked = this.owner.getOption("hide");
this.dom.optionvector.checked = this.owner.getOption("vector");
this.dom.optionshowsize.checked = this.owner.getOption("showsize");
+ this.dom.optionshowtype.checked = this.owner.getOption("showtype");
}
/* ------------------ minimize/restore bar ----------- */
@@ -2286,7 +2301,7 @@ SQL.Designer.prototype.init = function() {
SQL.Visual.prototype.init.apply(this);
new SQL.Toggle(OZ.$("toggle"));
- this.dom.container = this.dom.content = OZ.$("area");
+ this.dom.container = OZ.$("area");
this.minSize = [
this.dom.container.offsetWidth,
this.dom.container.offsetHeight
@@ -2297,15 +2312,11 @@ SQL.Designer.prototype.init = function() {
this.typeIndex = false;
this.fkTypeFor = false;
- this.vector = this.getOption("vector") && (OZ.gecko || OZ.opera || OZ.webkit || OZ.ie);
+ this.vector = this.getOption("vector") && document.createElementNS;
if (this.vector) {
- this.vector = "svg";
- if (OZ.ie) { this.vector = "vml"; }
- }
- if (this.vector == "svg") {
this.svgNS = "http://www.w3.org/2000/svg";
this.dom.svg = document.createElementNS(this.svgNS, "svg");
- this.dom.content.appendChild(this.dom.svg);
+ this.dom.container.appendChild(this.dom.svg);
}
this.flag = 2;
@@ -2327,7 +2338,7 @@ SQL.Designer.prototype.sync = function() {
this.height = h;
this.map.sync();
- if (this.vector == "svg") {
+ if (this.vector) {
this.dom.svg.setAttribute("width", this.width);
this.dom.svg.setAttribute("height", this.height);
}
@@ -2406,8 +2417,7 @@ SQL.Designer.prototype.addTable = function(name, x, y) {
var max = this.getMaxZ();
var t = new SQL.Table(this, name, x, y, max+1);
this.tables.push(t);
- this.dom.content.appendChild(t.dom.container);
- t.redraw();
+ this.dom.container.appendChild(t.dom.container);
return t;
}
@@ -2465,6 +2475,7 @@ SQL.Designer.prototype.getOption = function(name) {
case "xhrpath": return CONFIG.XHR_PATH || "";
case "snap": return 0;
case "showsize": return 0;
+ case "showtype": return 0;
case "pattern": return "%R_%T";
case "hide": return false;
case "vector": return true;
@@ -2563,6 +2574,11 @@ SQL.Designer.prototype.fromXML = function(node) {
t.fromXML(tables[i]);
}
+ for (var i=0;i<this.tables.length;i++) { /* ff one-pixel shift hack */
+ this.tables[i].select();
+ this.tables[i].deselect();
+ }
+
/* relations */
var rs = node.getElementsByTagName("relation");
for (var i=0;i<rs.length;i++) {
diff --git a/locale/cs.xml b/locale/cs.xml
index 923a24e..ddaef32 100644
--- a/locale/cs.xml
+++ b/locale/cs.xml
@@ -54,6 +54,7 @@
<string name="hide">Schovat spojovníky při tažení tabulkou?</string>
<string name="vector">Vykreslovat oblé spojovníky (pakliže to prohlížeč podporuje)?</string>
<string name="showsize">Zobrazovat velikost polí v tabulce?</string>
+ <string name="showtype">Zobrazovat datový typ polí v tabulce?</string>
<!-- keys -->
<string name="tablekeys">Klíče</string>
diff --git a/locale/en.xml b/locale/en.xml
index f254645..d65ca04 100644
--- a/locale/en.xml
+++ b/locale/en.xml
@@ -54,6 +54,7 @@
<string name="hide">Hide connectors on table drag?</string>
<string name="vector">Draw smooth connectors (if supported by browser)?</string>
<string name="showsize">Show field size in table design?</string>
+ <string name="showtype">Show field datatype in table design?</string>
<!-- keys -->
<string name="tablekeys">Keys</string>
diff --git a/styles/style.css b/styles/style.css
index 6c07a34..875f7e3 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -105,27 +105,38 @@ body {
box-shadow: 4px 4px 8px #888; /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#888888'); /* IE 6, IE 7 */
-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#888888'); /* IE 8 */
+ border-radius: 3px;
}
-.table_selected {
+.table table {
+ border-collapse: collapse;
+}
+
+.table.selected {
border: 2px solid #000;
}
-.table_title {
- margin: 0px 30px;
+.table thead .title {
text-align: center;
- padding: 3px 0px;
+ padding: 3px 30px;
}
-.row {
+.table tbody {
border-top: 1px dotted #888;
+}
+
+.table tbody td {
padding: 3px;
}
-.row_selected {
+.table tbody .selected {
font-weight: bold;
color: #f00;
- float: left;
+ display: inline-block;
+}
+
+.table tbody .title {
+ display: inline-block;
}
.primary {
@@ -140,6 +151,11 @@ body {
font-style: normal;
}
+.typehint {
+ font-size: 80%;
+ color: gray;
+}
+
.comment {
font-size: 80%;
font-weight: normal;
@@ -151,7 +167,6 @@ body {
}
.relation {
- background-color: #000;
overflow: hidden;
}
generated by cgit v1.1 at 2025-05-11 23:26:59 +0000