backbone_uml_ui_clean.html

/old/backbone_uml_ui_clean.html

https://bitbucket.org/jdpalmer/bluepy
HTML | 220 lines | 203 code | 17 blank | 0 comment | 0 complexity | dc145c1b7da33f84c88f733c75adc7ba MD5 | raw file

<!DOCTYPE html>
<html>
<head>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/jquery-ui.js" type="text/javascript"></script>
	<script src="js/jsrender.js" type="text/javascript"></script>
	<script src="js/underscore.js" type="text/javascript"></script>
	<script src="js/backbone.js" type="text/javascript"></script>
	<link href="css/uml.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h3>Backbone Render</h3>

<div id="classList"></div>

<script id="classTemplate" type="text/x-jquery-tmpl">
	<div class="class" id={{=name}}>
		<div class="class_name">
			{{=name}}
			<span class="delete_hover"></span>
			<span class="delete"></span>
		</div>
		<div class="var_list">
			{{#each variables}}
				<div class="variable" id={{=permission}}_{{=name}}_{{=type}}>
					{{=permission}} {{=name}} : {{=type}}
					<span class="delete_hover"></span>
					<span class="delete"></span>
				</div>
			{{/each}}
		</div>
		<div class="func_list">
			{{#each functions}}
				<div class="function" id={{=permission}}_{{=name}}_{{=rtype}}>
					{{=permission}} {{=name}}(
						{{#each params}}
							{{=type}} {{=name}}, 
						{{/each}}
					) : 
					{{#if rtype}}
						{{=rtype}}
					{{else}}
						void
					{{/if}}
					<span class="delete_hover"></span>
					<span class="delete"></span>
				</div>
			{{/each}}
		</div>
	</div>
</script> <!-- end classTemplate -->

<script id="classTemplateWrapper" type="text/x-jquery-tmpl">
	<div class="class" id={{=name}}
		<div class="class_name">
			{{=name}}
			<span class="delete_hover"></span>
			<span class="delete"></span>
		</div>
		{{tmpl "#classTemplate"}}
	</div>
</script>

<script type="text/javascript">
	//********************
	//***START BACKBONE***
	//********************

	//Class model
	Class = Backbone.Model.extend({
		defaults: function() {
			return {
				name: "New Class",
				variables : new Array(),
            	functions : new Array(),
            	inheritances: new Array()
			}
		},
        initialize: function() {
        },
        addVariable: function(permission, type, name) {
        	var variables = this.get("variables");
    		variables.push({permission: permission, type : type, name : name});
    		this.set({variables : variables});
        },
        addFunction: function(permission, rtype, name, params) {
        	var functions = this.get("functions");
        	functions.push({permission: permission, rtype : rtype, name : name, params: params});
        	this.set({functions : functions});
        },
        addInheritance: function(name) {
			var inheritances = this.get("inheritances");
    		inheritances.push({name: name});
    		this.set({inheritances : inheritances});
        },
        removeVariable: function(permission, type, name) {
        	var variables = _.flatten(this.get("variables"));
        	var tempVar = {permission: permission, type : type, name : name};

        	var j;
    		for(i=0;i<variables.length;i++) {
    			if(_.isEqual(variables[i], tempVar)) {
    				j = i;
    			}
    		}
    		variables = _.difference(variables, variables[j]);
    		this.set({variables : variables});
        },
        removeFunction: function(permission, rtype, name, params) {
        	var functions = this.get("functions");
        	var tempFunc = {permission: permission, rtype : rtype, name : name, params: params};

        	var j;
    		for(i=0;i<functions.length;i++) {
    			if(_.isEqual(functions[i], tempFunc)) {
    				j = i;
    			}
    		}
    		functions = _.difference(functions, functions[j]);
    		this.set({functions : functions});
        },
        removeInheritance: function(name) {
        	var inheritances = this.get("inheritances");
    		var tempInheritance = {name: name};

    		var j;
    		for(i=0;i<inheritances.length;i++) {
    			if(_.isEqual(inheritances[i], tempInheritance)) {
    				j = i;
    			}
    		}
    		inheritances = _.difference(inheritances, inheritances[j]);
    		this.set({inheritances : inheritances});
        }
    });

	//Classes collection
	Classes = Backbone.Collection.extend({
		model : Class,
		removeClass : function(name) {
			var j;
			for(i = 0; i < this.length; i++) {
				var aClass = this.at(i);
				if(name == aClass.get("name")) {
					j = i;
				}
			}
			this.remove(j);
		}
	});
	//******************
	//***END BACKBONE***
	//******************

	//Class array
	var classes = new Classes();
	var classes2 = new Array();

	//Sample data
    var person = new Class({name: "Person"});
    person.cid = "person";
    person.addVariable("+", "int", "age");
    person.addVariable("-", "float", "annualIncome");
    person.addFunction("+", "int", "getAge");
    person.addFunction("-", "float", "getAnnualIncome");
    person.addFunction("-", "", "setName", [{type : "String", name: "name"}]);
    person.addFunction("-", "", "doSomething", []);
    classes.add(person);

    var student = new Class({name: "Student"});
    student.cid = "student";
    student.addVariable("-", "float", "GPA");
    student.addFunction("+", "", "addGrade", [{type : "String", name: "className"}, {type : "int", name : "Grade"}]);
    student.addFunction("-", "float", "getGPA");
    student.addInheritance("person");
    classes.add(student);

    //The render function
	//*	Make each class draggable, contain to the #classList, change cursor while
	//	moving, "snap" to the #classList
	//*	Allow users to delete things, re-render when they do
	function render() {
		$("#classList").html( $.render( classes.toJSON(), "#classTemplate" ));
		$("div.class").draggable( {
			containment: '#classList',
			cursor: 'move',
			handle: 'div.class_name',
			stack: 'div.class'
		});
		$("span.delete").click(function() {
			var toDelete = $(this).parent().text().trim();
			var parent_class = $(this).parent().attr('class');
			var parent_id = $(this ).parent().parent().parent().attr('id').toLowerCase();

			if(parent_class == "variable") {
				toDelete = toDelete.replace(": ", "");
				var split = toDelete.split(" ");
				console.log(split);
				var classToDeleteFrom = classes.getByCid(parent_id);
				classToDeleteFrom.removeVariable(split[0], split[2], split[1]);
				console.log(classToDeleteFrom);
			}
			else if(parent_class == "function") {
			}
			else if(parent_class == "class_name") {
				toDelete = toDelete.toLowerCase();
				classes = classes.remove(classes.getByCid(toDelete));
				console.log(classes);
			}
			
			render();
		});
	}
	//Call it for initial rendering
	render();
</script>

</body>
</html>