Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added new contol buttons and new functionality

  • Loading branch information...
commit 642bf1d011a483a098a4917f1dfa8e5cb47f083a 1 parent ea7c648
@faziore1 authored
View
234 src/css/style.css
@@ -1,113 +1,133 @@
-body, html{
- margin : 0;
- padding : 0;
- overflow : hidden;
-}
-#canvas{
- background-color : white;
-}
-#overlay{
- position: absolute;
- background : url("../images/trans.gif");
- z-index : 1000;
- cursor: pointer;
-}
-
-#controls{
- width : 100%;
- height : 40px;
- background-color : #dcdcdc;
- border-top : none;
- border-left : none;
- border-right : none;
- border-bottom : 1px solid #999;
-}
-
-.btn{
- padding: 17px 8px 13px 8px;
- height : 10px;
- margin: 0px 0px 0px 2px;
- float : left;
- cursor : pointer;
- font-family: Georgia, serif;
- font-size : 12px;
- background-color : #efefef;
-}
-
-#logo{
- position : relative;
- float : left;
- font-family : Georgia, serif;
- font-size : 20px;
- color : black;
- padding-left : 5px;
- margin : 10px;
-}
-
-#openWin{
- position : absolute;
- top : 60px;
- left : 20px;
- width : 250px;
- height : 510px;
- background-color : #dcdcdc;
- z-index : 6000;
- display : none;
-}
-
-#files{
- position : relative;
- margin : 10px;
-
- background-color : white;
- width : 230px;
- height : 450px;
- overflow : auto;
-}
-
-#fileTitle{
- font-family : Georgia, serif;
- font-style : italic;
- margin-left : 10px;
- margin-top : 10px;
-}
-form{
- padding :0;
- margin : 0;
-}
-input{
- border : 1px solid gray;
- color : gray;
- padding : 4px;
-}
-#saveForm{
- position : relative;
- float : left;
- font-family : Georgia, serif;
- font-size : 12px;
- padding : 10px 0px 0px 18px;
+body, html {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+#canvas {
+ background-color: white;
+}
+#overlay {
+ position: absolute;
+ background: url("../images/trans.gif");
+ z-index: 1000;
+ cursor: pointer;
+}
+#controls {
+ width: 100%;
+ height: 40px;
+ background-color: #dcdcdc;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ border-bottom: 1px solid #999;
+}
+.btn {
+ padding: 17px 8px 13px 8px;
+ height: 10px;
+ margin: 0px 0px 0px 2px;
+ float: left;
+ cursor: pointer;
+ font-family: Georgia, serif;
+ font-size: 12px;
+ background-color: #efefef;
+}
+#logo {
+ position: relative;
+ float: left;
+ font-family: Georgia, serif;
+ font-size: 20px;
+ color: black;
+ padding-left: 5px;
+ margin: 10px;
+}
+#openWin {
+ position: absolute;
+ top: 60px;
+ left: 20px;
+ width: 250px;
+ height: 510px;
+ background-color: #dcdcdc;
+ z-index: 6000;
+ display: none;
+}
+#openComp {
+ position: absolute;
+ top: 60px;
+ left: 20px;
+ width: 250px;
+ height: 510px;
+ background-color: #dcdcdc;
+ z-index: 6000;
+ display: none;
+}
+#files {
+ position: relative;
+ margin: 10px;
+ background-color: white;
+ width: 230px;
+ height: 450px;
+ overflow: auto;
+}
+#classNames {
+ position: relative;
+ margin: 10px;
+ background-color: white;
+ width: 230px;
+ height: 450px;
+ overflow: auto;
+}
+#fileTitle {
+ font-family: Georgia, serif;
+ font-style: italic;
+ margin-left: 10px;
+ margin-top: 10px;
+}
+form {
+ padding: 0;
+ margin: 0;
+}
+input {
+ border: 1px solid gray;
+ color: gray;
+ padding: 4px;
+}
+#saveForm {
+ position: relative;
+ float: left;
+ font-family: Georgia, serif;
+ font-size: 12px;
+ padding: 10px 0px 0px 18px;
}
/* related to NodeGraph & li/ul */
-ul{
- padding : 0;
- margin : 0;
- background-color : white;
+ul {
+ padding: 0;
+ margin: 0;
+ background-color: white;
}
-
-li{
- list-style : none;
+li {
+ list-style: none;
}
-
li, .file {
- font-size : 12px;
- margin: 0;
- cursor : pointer;
- background-color : white;
- font-family : Georgia, serif;
- border-bottom : 1px solid #cccccc;
- padding : 5px 10px 5px 10px;
-}
-
-textarea, input{
- outline:none;
+ font-size: 12px;
+ margin: 0;
+ cursor: pointer;
+ background-color: white;
+ font-family: Georgia, serif;
+ border-bottom: 1px solid #cccccc;
+ padding: 5px 10px 5px 10px;
+}
+.className {
+ font-size: 12px;
+ margin: 0;
+ cursor: pointer;
+ background-color: white;
+ font-family: Georgia, serif;
+ border-bottom: 1px solid #cccccc;
+ padding: 5px 10px 5px 10px;
+}
+textarea, input {
+ outline: none;
+}
+.highlight {
+ background-color: #FFFF88;
}
View
16 src/index.html
@@ -11,6 +11,7 @@
<script type="text/javascript" src="js/libs/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="js/znode/nodegraph.js"></script>
<script type="text/javascript" src="js/znode/ui.js"></script>
+ <script type="text/javascript" src="js/libs/jquery.highlight.js"></script>
</head>
<body>
<div id="openWin">
@@ -19,6 +20,12 @@
</div>
<div id="files"></div>
</div>
+ <div id="openComp">
+ <div id="fileTitle">
+ Please select a class name:
+ </div>
+ <div id="classNames"></div>
+ </div>
<div id="overlay"></div>
<div id="controls">
<div id="logo" >
@@ -33,6 +40,15 @@
<div id="clear" class="btn">
Clear All
</div>
+ <div id="inheritance" class="btn">
+ Inheritance
+ </div>
+ <div id="composition" class="btn">
+ Composition
+ </div>
+ <div id="resources" class="btn">
+ Resources
+ </div>
<div id="help" class="btn">
Help
</div>
View
45 src/js/znode/nodegraph.js
@@ -24,7 +24,6 @@ function NodeGraph() {
paper.setSize(win.width(), win.height() - topHeight);
}
-
win.resize(resizePaper);
resizePaper();
@@ -40,7 +39,7 @@ function NodeGraph() {
});
menu.hide();
- canvas.append("<ul id='vsmenu'><li>Inheritance<\/li><li>Composition<\/li><li>Global<\/li><li>Functions<\/li><li>Resources<\/li><li>Exit<\/li><\/ul>");
+ canvas.append("<ul id='vsmenu'><li>Global<\/li><li>Functions<\/li><li>Exit<\/li><\/ul>");
var vsmenu = $("#vsmenu");
vsmenu.css({
"position" : "absolute",
@@ -98,7 +97,7 @@ function NodeGraph() {
// jQuery code goes here.
viewName = viewName.toLowerCase();
if (viewName == 'inheritance'){
- // add parsed data
+ // add parsed data buildInher...
$('#inher').dialog({
autoOpen: true,
show: "blind",
@@ -113,10 +112,23 @@ function NodeGraph() {
});
}
if (viewName == 'global'){
+ var textArea = $('textarea');
+ var content = "";
+ textArea.each(function(){
+ content = $(this).val();
+ //$('#global').append("<p>" + content + "</p>");
+ $.each(content.split(/[\r\n]+/), function(i, line) {
+ $('<p>').text(line).appendTo('#global') })
+ });
+ //$('#global').text(content); // copy textarea context to dialog
+ $('#global').highlight(g_selText); // highlight the selected text.
$('#global').dialog({
autoOpen: true,
show: "blind",
- hide: "explode"
+ hide: "explode",
+ close: function (event, ui) {
+ $('#global').text("");
+ }
});
}
if (viewName == 'functions'){
@@ -399,14 +411,16 @@ function NodeGraph() {
"top" : yp,
"width" : w,
"height" : h,
- "border" : "1px solid gray",
- "background-color" : "white"
+ "border" : "1px solid black",
+ //"background-color" : "white"
+ "background" : "-webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036))",
+ "-webkit-border-radius" : "10px"
});
n.css("z-index", zindex++);
n.mouseup(function(){
- var selText = GetSelectedText();
- if (selText.length != 0){
+ g_selText = GetSelectedText();
+ if (g_selText.length != 0){
vsmenu.css({"left":mouseX - 10, "top":mouseY});
vsmenu.show();
}
@@ -437,7 +451,8 @@ function NodeGraph() {
"padding" : "0",
"margin" : "0",
"font-size" : "9px",
- "cursor" : "pointer"
+ "cursor" : "pointer",
+ "-webkit-border-radius" : "10px"
});
if(!noDelete) {
@@ -455,6 +470,7 @@ function NodeGraph() {
"cursor" : "pointer",
"font-size" : "7px",
"background-color" : "gray",
+ "-webkit-border-radius" : "10px",
"z-index" : 100
});
ex.hover(function() {
@@ -476,11 +492,13 @@ function NodeGraph() {
txt.css({
"width" : nodeWidth - 5,
"height" : nodeHeight - bar.height() - 5,
- "resize" : "none",
- "overflow" : "hidden",
+ "resize" : "auto",
+ "overflow" : "auto",
"font-size" : "12px",
"font-family" : "sans-serif",
"border" : "none",
+ "background" : "-webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036))",
+ "-webkit-border-radius" : "10px",
"z-index" : 4
});
@@ -496,10 +514,11 @@ function NodeGraph() {
"height" : "10px",
"left" : nodeWidth - 11,
"top" : nodeHeight - 11,
- "background-color" : "white",
+ "background-color" : "#F2F291",
"font-size" : "1px",
"border" : "1px solid gray",
- "cursor" : "pointer"
+ "cursor" : "pointer",
+ "-webkit-border-radius" : "3px"
});
n.append("<div class='left'>");
View
224 src/js/znode/ui.js
@@ -1,90 +1,142 @@
-$(function(){
-
- var graph = new NodeGraph(); // composition view
-
- // consider moving to NodeGraph
- $("#canvas").mouseup(function(e){
- if (openWin.css("display") == "none"){
- var children = $(e.target).children();
- if (children.length > 0){
- var type = children[0].tagName;
- if (type == "desc" || type == "SPAN"){
- graph.addNodeAtMouse();
- }
- }
- }
- });
-
- // ui code
- var openWin = $("#openWin");
- openWin.hide();
-
- $(".btn").mouseenter(function(){
- $(this).animate({"backgroundColor" : "white"}, 200);
- }).mouseleave(function(){
- $(this).animate({"backgroundColor" : "#efefef"});
- });
- $("#clear").click(function(){
- graph.clearAll();
- });
- $("#help").click(function(){
- window.open("http://www.zreference.com/znode", "_blank");
- });
-
- $("#save").click(saveFile);
-
- function saveFile(){
- var name = filename.val();
- if (name == "" || name == nameMessage){
- alert("Please Name Your File");
- filename[0].focus();
- return;
- }
- $.post("json/save.php", {data:graph.toJSON(), name:name}, function(data){
- alert("Your file was saved.");
+$(function() {
+
+ var graph = new NodeGraph();
+ // composition view
+
+ // consider moving to NodeGraph
+ $("#canvas").mouseup(function(e) {
+ if((openWin.css("display") == "none") && (openComp.css("display") == "none")) {
+ var children = $(e.target).children();
+ if(children.length > 0) {
+ var type = children[0].tagName;
+ if(type == "desc" || type == "SPAN") {
+ graph.addNodeAtMouse();
+ }
+ }
+ }
});
- }
-
- $("#canvas").mousedown(function(){
- openWin.fadeOut();
- });
-
- $("#open").click(function(){
- var fileList = $("#files");
- fileList.html("<div>loading...<\/div>");
- openWin.fadeIn();
- fileList.load("json/files.php?"+Math.random()*1000000);
- });
-
- var nameMessage = "Enter your file name";
- var filename = $("#filename").val(nameMessage);
+ // ui code
+ var openWin = $("#openWin");
+ openWin.hide();
+
+ var openComp = $('#openComp');
+ openComp.hide();
- filename.focus(function(){
- if ($(this).val() == nameMessage){
- $(this).val("");
- }
- }).blur(function(){
- if ($(this).val() == ""){
- $(this).val(nameMessage);
+ $(".btn").mouseenter(function() {
+ $(this).animate({
+ "backgroundColor" : "white"
+ }, 200);
+ }).mouseleave(function() {
+ $(this).animate({
+ "backgroundColor" : "#efefef"
+ });
+ });
+ $("#clear").click(function() {
+ graph.clearAll();
+ });
+ $("#help").click(function() {
+ window.open("http://www.zreference.com/znode", "_blank");
+ });
+ $('#inheritance').click(function() {
+ // open up a menu with class names
+ alert("Open a menu with list of class name.");
+ });
+ $('#resources').click(function() {
+ $('#res').dialog({
+ autoOpen : true,
+ show : "blind",
+ hide : "explode"
+ });
+ });
+ $('#composition').click(function() {
+ var classNames = $('#classNames');
+ classNames.html('');
+ openComp.fadeIn();
+ classNames.append("<div class='className'>Class Name 1<\/div>");
+ classNames.append("<div class='className'>Class Name 2<\/div>");
+ classNames.append("<div class='className'>Class Name 3<\/div>");
+
+ });
+
+ $("#save").click(saveFile);
+
+ function saveFile() {
+ var name = filename.val();
+ if(name == "" || name == nameMessage) {
+ alert("Please Name Your File");
+ filename[0].focus();
+ return;
+ }
+ $.post("json/save.php", {
+ data : graph.toJSON(),
+ name : name
+ }, function(data) {
+ alert("Your file was saved.");
+ });
}
- });
-
- $("#nameForm").submit(function(e){
- e.preventDefault();
- saveFile();
- });
-
- $(".file").live('click', function() {
- var name = $(this).text();
- $.getJSON("files/" + name + ".json", {n:Math.random()}, function(data){
- graph.fromJSON(data);
-
- filename.val(name);
+
+
+ $("#canvas").mousedown(function() {
+ openWin.fadeOut();
+ openComp.fadeOut();
+ });
+
+ $("#open").click(function() {
+ var fileList = $("#files");
+ fileList.html("<div>loading...<\/div>");
+ openWin.fadeIn();
+ fileList.load("json/files.php?" + Math.random() * 1000000);
+ });
+ var nameMessage = "Enter your file name";
+ var filename = $("#filename").val(nameMessage);
+
+ filename.focus(function() {
+ if($(this).val() == nameMessage) {
+ $(this).val("");
+ }
+ }).blur(function() {
+ if($(this).val() == "") {
+ $(this).val(nameMessage);
+ }
+ });
+
+ $("#nameForm").submit(function(e) {
+ e.preventDefault();
+ saveFile();
+ });
+
+ $(".file").live('click', function() {
+ var name = $(this).text();
+ $.getJSON("files/" + name + ".json", {
+ n : Math.random()
+ }, function(data) {
+ graph.fromJSON(data);
+
+ filename.val(name);
+ });
+ }).live('mouseover', function() {
+ $(this).css({
+ "background-color" : "#ededed"
+ });
+ }).live("mouseout", function() {
+ $(this).css({
+ "background-color" : "white"
+ });
+ });
+
+ $('.className').live('click', function() {
+ $('#comp').dialog({
+ autoOpen : true,
+ show : "blind",
+ hide : "explode"
+ });
+ }).live('mouseover', function() {
+ $(this).css({
+ "background-color" : "#ededed"
+ });
+ }).live('mouseout', function() {
+ $(this).css({
+ "background-color" : "white"
+ });
});
- }).live('mouseover', function(){
- $(this).css({"background-color": "#ededed"});
- }).live("mouseout", function(){
- $(this).css({"background-color": "white"});
- });
-
-});
+});
Please sign in to comment.
Something went wrong with that request. Please try again.