modals for the properties, and tiles are showing properly, and are be…

…ing cancelled properly when the background overlay is clicked.

plone/app/deco/resources/src/deco.css

@@ -78,3 +78,33 @@
   height: 58px;
   width: 258px;
 }
+
+
+
+
+div.modal div.row {
+  margin-left: 0px;
+}
+
+div.modal div.field input[type='text'],
+div.modal div.field textarea
+{
+    width: 95%;
+}
+
+div.modal div.field input[type='text'].datetime-field {
+    width: auto;
+}
+
+div.modal fieldset {
+    margin-left: 5px;
+}
+
+div.modal .formControls {
+    margin-left: 5px;
+    margin-bottom: 5px;
+}
+
+div.modal #form-buttons-cancel {
+    margin-left: 5px;
+}

plone/app/deco/resources/src/deco.js

@@ -119,7 +119,33 @@ $.deco.dropTile = function(e, dd) {
     // if we drag from tile from toolbar we should open add_tile form in an
     // overlay. when sucessfully saved it should create new tile in deco grid
     // and remove preview_tile.
-    if (dragging_from_toolbar) {
+    if(dragging_from_toolbar) {
+      var modal = $(dd.drag).data('patternModal');
+      if(typeof(modal) !== "undefined") {
+        modal.on('shown', function(ev) {
+          $.iframe.stretch();
+        });
+        modal.on('hidden', function(ev) {
+          preview_tile.remove();
+          $.deco.getColumns(window.parent.document, function(col) {
+            col.removeColumnInfo();
+            col.addColumnInfo();
+          });
+        });
+        $(document).ajaxSuccess(function(event, xhr, settings){
+          if(typeof modal.$modal !== "function" && settings.url == $('#add_form', modal.$modal).attr('action')) {
+            // blah
+          }
+        });
+        modal.show();
+        modal.on('after-ajax', function(ev) {
+            $('#add_tile', modal.$modal).ajaxForm({
+            //  target: '#output',
+              delegation: true
+            });
+        });
+      }
+      /*
       $('<div/>').ploneOverlay({
         show: true,
         el: $(dd.drag).parents('form').attr('action') + '/' +
@@ -166,6 +192,7 @@ $.deco.dropTile = function(e, dd) {
             })
         }
       });
+      */
 
     } else {
 
@@ -780,7 +807,7 @@ $.deco.Toolbar.prototype = {
       drop: function(e, dd){},
       last_sel: 'last-child'
     }, options);
-  
+
     var type = options.type;
     var css = options.placeholdercss;
     var halfcondition = options.halfcondition;
@@ -910,7 +937,7 @@ $.deco.Toolbar.prototype = {
               biggestSize = width;
             }
         });
-        
+
         // decrease size of biggest column
         if (totalSize >= NUM_GRID_COLUMNS) {
             var lastDrop = $(window.document).data('deco-last-drop');
@@ -920,7 +947,7 @@ $.deco.Toolbar.prototype = {
                 decoCol.setWidth(width - 1);
             }
         }
-        
+
         if (side === "after") {
           newColumn.insertAfter($(dd.drop));
         } else {
@@ -1045,3 +1072,6 @@ $.each(['Toolbar','Panel','Row','Column','Tile'], function(i, name) {
 });
 
 }(jQuery));
+
+
+

plone/app/deco/resources/src/plone.deco.js

@@ -184,6 +184,33 @@ $(document).on('deco.toolbar.show', function(e, decoToolbar) {
     }
   });
 
+  $('#deco-toolbar-properties').click(function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    var modal = $(e.target).data('patternModal');
+    modal.on('after-ajax', function(ev) {
+      var hidechrome = function() {
+          $('#portal-top', modal.$modal).hide();
+          $('#portal-footer-wrapper', modal.$modal).hide();
+          $('#viewlet-above-content', modal.$modal).hide();
+          $('#viewlet-below-content', modal.$modal).hide();
+          $('#edit-bar' , modal.$modal).hide();
+          $('h1.documentFirstHeading' , modal.$modal).hide();
+          $('p.discreet' , modal.$modal).hide();
+      };
+
+      hidechrome();
+
+      $(document).ajaxSuccess(function(event, xhr, settings){
+        if(typeof modal.$modal !== "function" && settings.url == $('#form', modal.$modal).attr('action')) {
+          // blah
+        }
+      });
+    });
+  });
+
+
   // load mask
   // $.mask.load();
 
@@ -210,6 +237,25 @@ $(document).ready(function() {
     });
   }
 
+  require(['jquery', 'js/patterns/modal.js'], function($) {
+    $('#deco-toolbar-properties').modal();
+    /*$('.module #from').ajaxForm({
+      delegation: true
+    });
+    */
+
+    $('#deco-toolbar div.plone-tiletype').each(function(i, el) {
+      var elidsel = '#' + $(el).attr('id');
+      var aurl = $(el).parents('form').attr('action')
+                  + '/' + $('input[name="tiletype"]', el).attr('value');
+      $(elidsel).modal({ajaxUrl:aurl});
+    });
+    /*$('.module #add_form').ajaxForm({
+      delegation: true
+    });
+    */
+  });
+
   // $('#deco-toolbar-properties').ploneOverlay({
   //   onShow: function() {
   //     $(this).dropdown('toggle');