Permalink
Browse files

adding tree view, edit, delete

  • Loading branch information...
1 parent d6043dd commit bf2eaf88ec442eb6ecf1a2c2603255379f36f20e = committed Mar 1, 2012
View
@@ -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;}
View
@@ -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>
@@ -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>
View
@@ -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: '/'});
View
@@ -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":""});
@@ -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(){
File renamed without changes.
Oops, something went wrong.

0 comments on commit bf2eaf8

Please sign in to comment.