[Bps-public-commit] r12705 - in pie/branches/named-params: lib/PIE pieplate/PIE-Plate/lib/PIE/Plate pieplate/PIE-Plate/lib/PIE/Plate/Action pieplate/PIE-Plate/share/web/static/css

jesse at bestpractical.com jesse at bestpractical.com
Tue May 27 18:43:54 EDT 2008


Author: jesse
Date: Tue May 27 18:43:53 2008
New Revision: 12705

Modified:
   pie/branches/named-params/lib/PIE/Builder.pm
   pie/branches/named-params/pieplate/PIE-Plate/lib/PIE/Plate/Action/RunL.pm
   pie/branches/named-params/pieplate/PIE-Plate/lib/PIE/Plate/View.pm
   pie/branches/named-params/pieplate/PIE-Plate/share/web/static/css/app.css
   pie/branches/named-params/pieplate/PIE-Plate/share/web/static/js/pieui.js

Log:
* this wants clkao to play with it

Modified: pie/branches/named-params/lib/PIE/Builder.pm
==============================================================================
--- pie/branches/named-params/lib/PIE/Builder.pm	(original)
+++ pie/branches/named-params/lib/PIE/Builder.pm	Tue May 27 18:43:53 2008
@@ -9,7 +9,8 @@
 
 sub build_op_expression {
     my ($self, $name, $args) = @_;
-    my $class = "PIE::Expression::$name";
+    $name = "PIE::Expression::$name" unless ($name =~ /^PIE::Expression/);
+    my $class = $name;
     $class->require;
     $class = "PIE::Expression" unless $class->can('meta');
 

Modified: pie/branches/named-params/pieplate/PIE-Plate/lib/PIE/Plate/Action/RunL.pm
==============================================================================
--- pie/branches/named-params/pieplate/PIE-Plate/lib/PIE/Plate/Action/RunL.pm	(original)
+++ pie/branches/named-params/pieplate/PIE-Plate/lib/PIE/Plate/Action/RunL.pm	Tue May 27 18:43:53 2008
@@ -35,8 +35,10 @@
 $eval->set_global_symbol( 'match-regexp' => $MATCH_REGEX );
 
 
-    my $script  = $builder->defun( ops => $tree, signature => {});
-    eval { $eval->apply_script($script, {} )};
+    eval { 
+            my $script  = $builder->defun( ops => $tree, signature => {});
+
+            $eval->apply_script($script, {} )};
     if (my $msg = $@) { 
         $self->result->error($msg);
     }else {

Modified: pie/branches/named-params/pieplate/PIE-Plate/lib/PIE/Plate/View.pm
==============================================================================
--- pie/branches/named-params/pieplate/PIE-Plate/lib/PIE/Plate/View.pm	(original)
+++ pie/branches/named-params/pieplate/PIE-Plate/lib/PIE/Plate/View.pm	Tue May 27 18:43:53 2008
@@ -8,7 +8,11 @@
 template 'lorzy' => page { 
     div { { id is 'result' }};
     div { { id is 'wrapper' } };
-    div { { class is 'library' } };
+    div { { class is 'library' } 
+    
+        h2 {  'Function library'};
+    
+    };
  outs_raw('<style>#wrapper div { padding-left:1em;} </style>');
 my $ops = [
             {   name => 'IfThen',

Modified: pie/branches/named-params/pieplate/PIE-Plate/share/web/static/css/app.css
==============================================================================
--- pie/branches/named-params/pieplate/PIE-Plate/share/web/static/css/app.css	(original)
+++ pie/branches/named-params/pieplate/PIE-Plate/share/web/static/css/app.css	Tue May 27 18:43:53 2008
@@ -1,43 +1,86 @@
+*, body, p, div, span, a, h1, h2, h3 {
+    font-family: Helvetica, Arial, Sans-serif;
+}
 
-#trashy {
-    display: block;
+
+#lightbox {
+position: fixed; 
+height: 100%; 
+width: 100%; 
+top:0; 
+left: 0; 
+background-color: #ccc; 
+z-index: 999; 
+    filter:alpha(opacity=90);
+    -moz-opacity:0.9;
+    -khtml-opacity: 0.9;
+    opacity: 0.9;
+}
+
+#lightbox-docs {
     position: fixed;
-    top: 2em;
-    right:2em;
-    padding: 3em;
-    width: 5em;
-    border: 3px solid red;
-    -moz-border-radius: 0.5em;
+    background: #fff;
+    padding: 0.25em;
+    text-align: center;
+    text-color: #000;
+    bottom: 0;
+    width: 100%;
+    z-index: 1001;
+    border-top: 2px solid #666;
+}
+
+
+#lightbox-content {
+    position: fixed; top: 5em; 
+    padding: 2em;
+    left: 5em; 
+    right: 5em; 
+    bottom: 5em; 
+    border: 5px solid yellow;
+    z-index: 1000;
+    background: #ffc;
+    overflow: auto;
 }
 
 
+#wrapper {
+    width: 20em; 
+
+}
+
+.lorzy-expression {
+    padding: 0.5em;
+     min-height: 1em;
+    border: 2px solid #ccc;
+}
 
 
 .lorzy-expression, .lorzy-target {
-        min-height: 1em;
-       border: 2px solid #fff;
-        padding-top: 0.25em;
-        padding-bottom: 0.25em;
+    -moz-border-radius: 5px;
+     margin-top: 0.25em;
+     margin-bottom: 0.25em;
+    border: 2px solid #fff;
 }
+.lorzy-target { height: 1em; 
+}
+.lorzy-target.droppable-active { height: 1em; content: "Add an expression here!"; }
+
+
 
 .droppable-active {
     border: 2px solid green;
-        background: #eee;
+     background: #eee;
 }
 
-.droppable-hover {
+.droppable-hover{
     background: yellow;
 }
 
 
-draggable-active {
-        color: #66f;
-}
+#wrapper {
+    position: relative;
+    left: 15em;
 
-.lorzy-expression {
-    border: 2px solid #666;
-    background-color: #fff;
-    
 }
 
 #wrapper div.lorzy-code>.name:before {
@@ -45,48 +88,107 @@
 
 }
     
-#wrapper div.lorzy-code-arg {
-    
+div.lorzy-code-arg {
   color: green;
 }
 
-#wrapper div.lorzy-code-arg>.name:before{
+div.lorzy-code-arg>.name:before {
     content: 'arg: ';
 }
 
-#wrapper span.lorzy-const {
+.lorzy-const {
   color: black;
 }
-
-#wrapper span.lorzy-const:before {
+.lorzy-const:before {
     content: "constant: ";
 }
 
 
-#wrapper div {
+
+.lorzy-code {
+  color: blue;
+}
+
+/* .droppable-hover .lorzy-expression { color: #000; background-color: #fff; filter:alpha(opacity=20); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.2; } */
+
+
+.library  {
+    position: fixed;
+    top: 5em;
+    left: 1em;
+    bottom: 5em;
+    width: 12em;
+}
+
+.library .lorzy-expression { 
+    border: 2px solid blue;
+    background-color: #ddd;
+    -moz-border-radius: 0.5em;
     padding: 0.25em;
-    -moz-border-radius: 5px;
- /*border: 1px solid #ffffff; */
+
+
 }
 
-#wrapper div.selected {
-   background: #cca;
+.library .lorzy-expression .lorzy-expression { 
+        display: none; 
 }
 
-#wrapper div.hover {
-    background: #ffc;
+.library .draggable-active {
+    position: absolute;
 }
 
-#wrapper div.lorzy-code {
-  width: 300px;
-  color: blue;
+
+.lorzy-drop-targets {
+    position: fixed;
+    left: 35em;
+    bottom: 2em;
+    font-size: 1.2em;
+
+}
+
+.lorzy-tools {
+    position: fixed;
+    left: 35em;
+    top: 4em;
+    font-size: 1.2em;
+}
+.lorzy-tools div, .lorzy-drop-targets div {
+    padding: 1em;
+    width: 5em;
+    border: 3px solid #ccc;
+    -moz-border-radius: 0.5em;
+}
+
+#trashy {
+    background-color: red;
+    color: #fff;
+    border: 3px solid red;
+}
+
+
+#trashy.droppable-active {
+    border: 2px solid green;
+    background-color: #e33;
 }
-.droppable-hover .lorzy-expression {
-        color: #000;
-        background-color: #fff;
-    filter:alpha(opacity=20);
-    -moz-opacity:0.2;
-    -khtml-opacity: 0.2;
-    opacity: 0.2;
+
+#trashy.droppable-hover {
+    border: 2px solid yellow;
+    background-color: #f11;
+}
+
+input.lorzy-const {
+    font-size: 100%;
+    background: #ffc;
+    display: block;
+    width: 12em;
+}
+
+
+.draggable-active {
+    color: #66f;
+    filter:alpha(opacity=60);
+    -moz-opacity:0.6;
+    -khtml-opacity: 0.6;
+    opacity: 0.6;
 }
 

Modified: pie/branches/named-params/pieplate/PIE-Plate/share/web/static/js/pieui.js
==============================================================================
--- pie/branches/named-params/pieplate/PIE-Plate/share/web/static/js/pieui.js	(original)
+++ pie/branches/named-params/pieplate/PIE-Plate/share/web/static/js/pieui.js	Tue May 27 18:43:53 2008
@@ -1,29 +1,65 @@
+function ghetto_lightbox (content) {
+	var background = jQuery('<div id="lightbox"></div>');
+	jQuery('body').append(background).fadeIn(750);
+	var baa = jQuery('<div id="lightbox-content">'+content+'</div>');
+	var boxdox = jQuery('<div id="lightbox-docs">(Double-click to close)</div>');
+	background.append(baa);
+	background.append(boxdox);
+	jQuery('body').bind('dblclick', function (x) {
+	jQuery('#lightbox').fadeOut(750);
+	jQuery('#lightbox').replaceWith('');
+	
+});
 
-     var lorzy_draggable_opts = { revert: true, activeClass: 'draggable-active', opacity: '0.80'};
-var droppable_args = {
-            accept: '#wrapper .lorzy-expression',
+}
+
+
+function lorzy_remove_ast_node(node) {
+                   var target_after =  jQuery(node).next('.lorzy-target')[0];
+                    if(target_after) {
+                        target_after.remove();
+                    }
+
+                    
+                   var target_before =  jQuery(node).prev('.lorzy-target')[0];
+                    if(target_before) {
+                        target_before.remove();
+                    }
+
+                    node.replaceWith(lorzy_make_empty_drop_target());
+}
+
+
+var lorzy_draggable_opts = { revert: true, activeClass: 'draggable-active', opacity: '0.6'};
+var lorzy_droppable_opts = {
+            accept: '.lorzy-expression, .lorzy-expression-proto',
             greedy: 'true',
-            hover: 'pointer',
             activeClass: 'droppable-active',
             hoverClass: 'droppable-hover',
             tolerance: 'pointer',
             drop: function(ev, ui) { 
-                    var newitem = jQuery(ui.draggable).clone();
                       var orig = jQuery(ui.draggable); 
-                      if (!orig.parent().hasClass('library')) {
-                    orig.replaceWith(lorzy_make_empty_drop_target());
-                    orig.droppable(droppable_args);
-
-                    }
-                    newitem.draggable(lorzy_draggable_opts);
-                    newitem.droppable(lorzy_draggable_opts);
+                    var newitem = jQuery(ui.draggable).clone();
+                    newitem.removeClass('lorzy-expression-proto');
                     newitem.attr({style: 'display: block'});
+                    newitem.draggable(lorzy_draggable_opts);
+                    newitem.droppable(lorzy_droppable_opts);
                     newitem.insertAfter(this);
-                   lorzy_wrap_in_drop_targets(newitem);
-}};
 
+                      if (!orig.parent().hasClass('library')) {
+                        lorzy_remove_ast_node(orig);
 
+                         jQuery(this).replaceWith('');
+                    }
 
+                   lorzy_wrap_in_drop_targets(newitem);
+                    // These are way too loose. once i know how to say 'all children of this element matching this selector it will get cleaner
+                    jQuery('#wrapper .lorzy-expression').droppable(lorzy_droppable_opts);
+                    jQuery('#wrapper .lorzy-target').droppable(lorzy_droppable_opts);
+	                    make_elements_editable(jQuery('#wrapper .lorzy-expression.lorzy-const.string'));
+                return true;
+
+}};
 
 var trashable_args = {
             accept: '#wrapper .lorzy-expression',
@@ -35,8 +71,7 @@
             drop: function(ev, ui) { 
                       var orig = jQuery(ui.draggable); 
                       if (!orig.parent().hasClass('library')) {
-                    orig.replaceWith(lorzy_make_empty_drop_target());
-                    orig.droppable(droppable_args);
+                        lorzy_remove_ast_node(orig);
                    } 
                     }
 };
@@ -48,23 +83,20 @@
 
 
 function lorzy_make_empty_drop_target (){
-
       var x =  jQuery('<div class="lorzy-target"></div>');
-      x.droppable(droppable_args);
-    return(x);
+      x.droppable(lorzy_droppable_opts);
+      return(x);
 }
-function lorzy_wrap_in_drop_targets(after) {
-    
-    if(jQuery(after).parent().hasClass('lorzy-target')){
-        jQuery(parent).remove(after);
-    }
-    if(!jQuery(after).prev().hasClass('lorzy-target')){
+function lorzy_wrap_in_drop_targets(node) {
+   
+    var myNode = jQuery(node);
 
-        jQuery(lorzy_make_empty_drop_target()).insertBefore(after);
+    if(! myNode.prev().hasClass('lorzy-target')){
+        jQuery(lorzy_make_empty_drop_target()).insertBefore(node);
         } 
 
-    if(!jQuery(after).next().hasClass('lorzy-target')){
-         jQuery(lorzy_make_empty_drop_target()).insertAfter(after);
+    if(!myNode.next().hasClass('lorzy-target')){
+         jQuery(lorzy_make_empty_drop_target()).insertAfter(node);
     }
 }
 
@@ -72,73 +104,89 @@
 
 
 function lorzy_show_expression_str(str, parent) {
-    
-    var string = jQuery('<div class="lorzy-expression lorzy-const string">'+str+'</div>');
-    jQuery(parent).replaceWith(string);
+    jQuery(parent).replaceWith(lorzy_make_expression_str(str));
+}
+
+function lorzy_make_expression_str(str) {
+    var string =  jQuery('<div class="lorzy-expression lorzy-const string">'+str+'</div>');
+    return string;
 
 }
 
-function lorzy_show_expression(parent, add_event) {
+function lorzy_show_exression_progn(expr, parent) {
+        jQuery.each(expr.nodes, function () { lorzy_show_expression(parent) });
 
-    if( this.name == 'progn') {
-        jQuery.each(this.nodes, function () { lorzy_show_expression(parent) });
+}
 
+function lorzy_show_expression(parent, add_event) {
+    if( this.name == 'progn') {
+        lorzy_show_expression_progn(this, parent);
         return;
     }
 
-    
-    
-
     var ret = parent.createAppend('div', { className: this.name });
     ret.addClass('lorzy-expression')
     ret.addClass('lorzy-code');
     lorzy_wrap_in_drop_targets(ret);
     var that = this;
     jQuery(ret).createAppend('div', { className: 'name'} , [this.name]);
-    var codeargs = jQuery(ret).createAppend('div', { className: 'lorzy-code-args'});
 
-    jQuery.each(this.args, function(name, exp) {
-        var entry = codeargs.createAppend('div', { className: that.name+' '+name });
-        entry.addClass('lorzy-code-arg');
+
+    var codeargs = lorzy_show_expression_args(this.args);
+    jQuery(ret).append(codeargs);
+
+    };
+
+    function lorzy_show_expression_args(args) {
+        var codeargs = jQuery('<div class="lorzy-code-args">');
+        
+
+    jQuery.each(args, function(name, exp) {
+        var entry = codeargs.createAppend('div', { className: 'lorzy-code-arg' });
         entry.createAppend('div', { className: 'name'}, [ name]);
         var value = entry.createAppend('div', { className: 'value'});
         
-        if (!exp)
-            return;
         if (typeof(exp) == 'string') {
-        var valcontent= value.createAppend('div', { className: 'lorzy-expression'});
+            var valcontent= value.createAppend('div', { className: 'lorzy-expression'});
             lorzy_wrap_in_drop_targets(valcontent);
             lorzy_show_expression_str(exp, valcontent);
-            return;
-        } else {
-
-        //var progn = valcontent.createAppend('div', { className: 'lorzy-progn'});
+        } else if (exp) {
+            lorzy_show_expression.apply(exp, [value]); //[entry]);
+        } 
 
-        lorzy_show_expression.apply(exp, [value]); //[entry]);
 
-        }
     });
 
+    return codeargs;
 }
 
 
 function lorzy_show_symbols(struct) {
-        jQuery.each(struct, function(item, index) {
+        jQuery.each(struct, function(item, arg_list) {
 
-        var expression = jQuery('.library').createAppend('div', {className: 'lorzy-expression lorzy-expression-proto'});
+        var expression = jQuery('.library').createAppend('div', {className: 'lorzy-code lorzy-expression lorzy-expression-proto'});
         expression.createAppend('div',{className: 'name'},[item]);
+        if(arg_list) {
         var args_hook = expression.createAppend('div',{className: 'lorzy-code-args'});
-        args_hook.createAppend('div', {className: 'lorzy-code-arg'});
 
-        //var args = item;
-        jQuery.each(index, function(arg, attr)  { 
-                    args_hook.createAppend('div', {className: 'name'}, [arg]);
-                    args_hook.createAppend('div', {className: 'type'}, [attr.type]);
+
+        jQuery.each(arg_list, function(attr)  { 
+                    var arg = args_hook.createAppend('div', {className: 'lorzy-code-arg'});
+                    arg.createAppend('div', {className: 'name'}, [attr]);
+                    var value = arg.createAppend('div', {className: 'value'});
+                   if (arg_list[attr].type == 'PIE::Expression') {
+                        value.append( lorzy_make_empty_drop_target() );
+                    } if (arg_list[attr].type == 'Str') {
+                        value.append(lorzy_make_expression_str('(click me to edit)'));
+                    } else {
+                        value.append('What should I do with '+arg_list[attr].type);
+                    }
+                    //args_hook.createAppend('div', {className: 'type'}, [attr.type]);
                  
         
         });
 
-
+        }
     });
     jQuery('.library .lorzy-expression').draggable(lorzy_draggable_opts);
 }
@@ -149,31 +197,37 @@
             lorzy_show_expression.apply(this, [jQuery('#wrapper'), true]);
             
         });
-       var tree = lorzy_generate_struct(jQuery('#wrapper'));
-        console.log(tree.toJSON());
 
 
     jQuery('.lorzy-expression .lorzy-expression').draggable(lorzy_draggable_opts);
 
-    jQuery('#wrapper').after(jQuery('<a>Remove</a>').attr('id', 'remove-entry'));
-    jQuery('#wrapper').after(jQuery('<a>Add If</a>').attr('id', 'add-entry-if'));
-    jQuery('#wrapper').after(jQuery('<a>Traverse</a>').attr('id', 'clicky'));
-    jQuery('#wrapper').after(jQuery('<a>Test</a>').attr('id', 'testy'));
+    var tools = jQuery('<div class="lorzy-tools"></div>');
+    jQuery('#wrapper').after(tools);
+
+
+
+
+    tools.createAppend('div', { id: 'clicky'}, ['Serialize']);
+    tools.createAppend('div', { id: 'testy'}, ['Run on server']);
+    jQuery('#wrapper .lorzy-expression').droppable(lorzy_droppable_opts);
+    jQuery('#wrapper .lorzy-target').droppable(lorzy_droppable_opts);
 
-    jQuery('#wrapper').after(jQuery('<div>Trash</div>').attr('id', 'trashy'));
-jQuery('#wrapper .lorzy-expression, #wrapper .lorzy-target').droppable(droppable_args);
 
+    var drop_targets = jQuery('<div class="lorzy-drop-targets"></div>');
+    jQuery('#wrapper').after(drop_targets);
+    drop_targets.createAppend('div', { id: 'trashy'} , ['Trash']);
     jQuery('#trashy').droppable(trashable_args);
 
 
 
     jQuery('#testy').click(function () {
         jQuery.ajax({
-    'url': '/=/action/Pie.Plate.Action.RunL.xml',
-    'datatype': 'text/xml',
+    'url': '/=/action/Pie.Plate.Action.RunL.json',
+    'datatype': 'text/json',
     'type': 'post',
-    'success': function(xml) { 
-            jQuery('#result').append(jQuery(xml).text())
+    'success': function(json) { 
+            json = json.split(",").join(",\n");
+            ghetto_lightbox('<pre>'+json+'</pre>');
 }, 
     'data': 'struct='+lorzy_generate_struct(jQuery('#wrapper')).toJSON()
 })
@@ -206,13 +260,57 @@
   
  
     var x =  lorzy_generate_struct(jQuery('#wrapper'));
-    
-    console.log(x.toJSON());
+            x = x.toJSON().split(",").join(",\n");
+        ghetto_lightbox('<pre>'+x+'</pre>');
    
    });
 
+	make_elements_editable(jQuery('#wrapper .lorzy-expression.lorzy-const.string'));
+    return true;
 };
 
+function make_elements_editable (elements) {
+        elements.bind('dblclick', function (x) { make_editable.apply(x.target)});
+
+
+
+    
+    
+    function make_editable() {
+                var noneditable = this;
+                var content = jQuery(noneditable).html();
+                var editable =  jQuery('<input type="text" class="lorzy-const lorzy-expression editable" value="'+content+'"/>');
+                 function blur_edit () {
+                    jQuery(noneditable).text( this.value); 
+                    jQuery(noneditable).bind('dblclick', function(x) { make_editable.apply(x.target)});
+                    jQuery(this).replaceWith(noneditable);
+                    }
+
+                editable.bind('blur', blur_edit)
+                        
+                        .bind('keypress', 
+                    
+                                // xxx icky. code duplication
+                                function (event) { if(event.keyCode == '13') { 
+                    jQuery(noneditable).text( this.value); 
+                    jQuery(noneditable).bind('dblclick', function(x) { make_editable.apply(x.target)});
+                    jQuery(this).replaceWith(noneditable);
+                            event.stopPropagation (true);
+                        }
+
+                        }
+                        );
+                        
+                    
+                
+                jQuery(this).replaceWith( editable);
+                
+            };
+
+}
+
+
+
 function lorzy_generate_struct(parent) {
 
       var ops = jQuery(parent).children();



More information about the Bps-public-commit mailing list