Skip to content

Commit

Permalink
adding tree view, edit, delete
Browse files Browse the repository at this point in the history
  • Loading branch information
= committed Mar 1, 2012
1 parent d6043dd commit bf2eaf8
Show file tree
Hide file tree
Showing 31 changed files with 677 additions and 40 deletions.
51 changes: 50 additions & 1 deletion css/custom.css
View file
@@ -1,4 +1,53 @@
/* CSS Document */

a.icon i{margin:2px 4px 0 0;}
form{margin:8px 0 10px 0;}
form{margin:8px 0 10px 0;}
.formTitle{text-transform:capitalize;}

/* tree */
.placeholder {
background-color: #cfcfcf;
height:34px;
border-radius: 3px;
}

.ui-nestedSortable-error {
background:#fbe3e4;
color:#8a1f11;
}

ol {
margin: 0;
padding: 0;
padding-left: 30px;
}

ol.sortable, ol.sortable ol {
margin: 0 0 0 25px;
padding: 0;
list-style-type: none;
}

ol.sortable {
margin: 0;
}

.sortable li {
margin: 0 0 7px 0;
padding: 0;
}
.sortable li ol li{
margin: 7px 0 0 0;
}
.sortable li div {
border: 1px solid #cccccc;
border-radius:3px;
padding: 3px 3px 3px 8px;
margin: 0;
cursor: move;
height:28px;
line-height:28px;
color: #333;
}

.sortable li div .btn-group{float:right;padding:0;border:0;margin:0;}
24 changes: 18 additions & 6 deletions index.html
View file
Expand Up @@ -2,7 +2,7 @@
<html xmlns:ng="http://angularjs.org" ng:app="formDrop">
<head>
<meta charset="utf-8">
<title>Test</title>
<title>FormDrop, Beta</title>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
Expand Down Expand Up @@ -53,16 +53,28 @@
</ul>
<!-- main view -->
<ng:view></ng:view>
<h2>Output</h2>
<pre id="code" class="prettyprint linenums" >&lt;?php
<div class="row">
<div class="span6">
<h2>Output</h2>
<pre id="code" class="prettyprint linenums" >&lt;?php
//Empty form :(
?&gt;</pre>

</div>
<div class="span6">
<h2>Form</h2>
<div id="tree">

</div>
<em>Drag to re-arrange form elements</em>
</div>
</div>
</div>
<script src="js/libs/underscore-min.js" type="text/javascript"></script>
<script src="js/libs/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/libs/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/libs/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="js/libs/jquery/jquery.ui.nestedSortable.js" type="text/javascript"></script>
<script src="js/libs/bootstrap.min.js" type="text/javascript"></script>
<script src="js/libs/prettify.js" type="text/javascript"></script>
<script src="js/libs/prettify/prettify.js" type="text/javascript"></script>
<script src="js/libs/angular-0.10.7.js" type="text/javascript"></script>
<script src="js/util.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
Expand Down
2 changes: 2 additions & 0 deletions js/app.js
View file
Expand Up @@ -7,6 +7,8 @@ run(['$route', '$window', '$rootScope', function($route, $window, $rootScope) {

// define routes
$route.when("/add/:elementId", {template:'views/elementForm.html', controller:ElementFormCtrl});
$route.when("/edit/:elementId", {template:'views/elementForm.html', controller:ElementFormCtrl});
$route.when("/remove/:elementId", {template:'views/confirmRemove.html', controller:RemoveFormCtrl});
$route.when("/about", {template:'views/about.html', controller:AboutCtrl});
$route.when("/help", {template:'views/help.html', controller:HelpCtrl});
$route.otherwise({redirectTo: '/'});
Expand Down
81 changes: 59 additions & 22 deletions js/controllers.js
View file
Expand Up @@ -4,42 +4,79 @@
function AppCtrl($route, $scope, $browser, FormService, ElementService) {
//vars
var elements = $scope.elements = ElementService.query({elementId:'elements'}),
code = $scope.code = "";
code = $scope.code = "",
tree = $scope.tree = "";

$scope.$on("render",function(){
code = ""
code = ""
tree = "";
if(FormService.drupalForm.length){
code += _.map(FormService.drupalForm, function(value){return toPHP(value,[]);}).join("\n\n");
tree += "<ol class=\"sortable\">" + _.map(FormService.drupalForm, function(value){return toEditList(value);}).join("\n") + "</ol>";
}else{
code = "//Empty form :(";
tree = "<ul></ul>";
}
$('#code').html("");
$('#code').text("<?php\n\n" + code + "\n\n?>");
$('#code').text("<?php\n\n" + code + "\n\n?>");
$('#tree').html(tree)
$('#tree ol').nestedSortable({
disableNesting: 'no-nest',
forcePlaceholderSize: true,
handle: 'div',
helper: 'clone',
items: 'li',
opacity: .6,
placeholder: 'placeholder',
revert: 250,
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '> div',
update: function(event, ui) {
alert("drag and drop doesn't currently work, but it probably will soon.");
}
});
prettyPrint();
});
}

/**
* Remove Form Controller (Confirmation)
*/
function RemoveFormCtrl($scope, $route, $location, $rootScope, FormService){
$scope.confirmRemove = function(){
FormService.remove($route.current.params.elementId);
$rootScope.$broadcast("render");
$location.path("/");
};
}

/**
* Element Form Controller
*/
function ElementFormCtrl(ElementService, FormService, $route, $location, $browser, $scope, $rootScope){
//set this form up
var form = $scope.form = {attributes: [],
element: {},
label: "",
children: []}
function ElementFormCtrl(ElementService, FormService, $routeParams, $location, $browser, $scope, $rootScope){
//set this form up
var form = $scope.form;
var element = $scope.element = {},
mode = $scope.mode = $location.$$path.split("/")[1];

if(mode == "edit"){
$scope.form = form = FormService.getById($routeParams.elementId);
$scope.element = element = form.element;
}else if(mode == "add"){
//When adding a new element, initialize the form
$scope.element = element = ElementService.get({elementId: $routeParams.elementId}, function(element) {
$scope.form = form = FormService.newForm(element);
//add default attributes
for(var i = 0; i < element.attributes.length; i++){
if(element.attributes[i].typical){
form.attributes.push({"attribute":element.attributes[i],"value":element.attributes[i].value});
}
}
});
}

//get the element details
var element = $scope.element = ElementService.get({elementId: $route.current.params.elementId}, function(element) {
form.element = element;
form.label = element.id;
//add default attributes
for(var i = 0; i < element.attributes.length; i++){
if(element.attributes[i].typical){
form.attributes.push({"attribute":element.attributes[i],"value":element.attributes[i].value});
}
}
});


$scope.addAttribute = function(){
form.attributes.push({"attribute":element.attributes[0],"value":""});
Expand All @@ -50,12 +87,12 @@ function ElementFormCtrl(ElementService, FormService, $route, $location, $browse
}

$scope.save = function(){
FormService.drupalForm.push(angular.copy(form));
FormService.save(form);
$rootScope.$broadcast("render");
$location.path("/");
}
}
ElementFormCtrl.$inject = ['ElementService','FormService','$route','$location','$browser','$scope','$rootScope'];
ElementFormCtrl.$inject = ['ElementService','FormService','$routeParams','$location','$browser','$scope','$rootScope'];

//not sure if I'll even need these
function AboutCtrl(){
Expand Down
0 js/libs/jquery-1.7.1.min.js → js/libs/jquery/jquery-1.7.1.min.js
View file
File renamed without changes.

0 comments on commit bf2eaf8

Please sign in to comment.