diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index c5a75cff54..d6f118f30a 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -2234,7 +2234,7 @@ celerity_register_resource_map(array( ), 'javelin-behavior-pholio-mock-edit' => array( - 'uri' => '/res/34a066b1/rsrc/js/application/pholio/behavior-pholio-mock-edit.js', + 'uri' => '/res/ad171300/rsrc/js/application/pholio/behavior-pholio-mock-edit.js', 'type' => 'js', 'requires' => array( @@ -3744,7 +3744,7 @@ celerity_register_resource_map(array( ), 'pholio-edit-css' => array( - 'uri' => '/res/56034479/rsrc/css/application/pholio/pholio-edit.css', + 'uri' => '/res/89db9291/rsrc/css/application/pholio/pholio-edit.css', 'type' => 'css', 'requires' => array( diff --git a/src/applications/pholio/controller/PholioMockEditController.php b/src/applications/pholio/controller/PholioMockEditController.php index c64d7bbfea..28e0cb4cfc 100644 --- a/src/applications/pholio/controller/PholioMockEditController.php +++ b/src/applications/pholio/controller/PholioMockEditController.php @@ -233,6 +233,8 @@ final class PholioMockEditController extends PholioController { 'pht' => array( 'uploading' => pht('Uploading Image...'), 'uploaded' => pht('Upload Complete...'), + 'undo' => pht('Undo'), + 'removed' => pht('This image will be removed from the mock.'), ), )); diff --git a/webroot/rsrc/css/application/pholio/pholio-edit.css b/webroot/rsrc/css/application/pholio/pholio-edit.css index 9819310c8a..3d4c15f779 100644 --- a/webroot/rsrc/css/application/pholio/pholio-edit.css +++ b/webroot/rsrc/css/application/pholio/pholio-edit.css @@ -104,4 +104,18 @@ border: 1px solid #bbbbbb; background: #fcfcfc; color: #666666; + margin-bottom: 12px; +} + +.pholio-drop-undo { + padding: 8px; + margin-bottom: 12px; + text-align: center; + color: #333333; + border: 1px solid {$yellow}; + background-color: {$lightyellow}; +} + +.pholio-drop-undo a { + font-weight: bold; } diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-edit.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-edit.js index 2c63418cc6..d6213be13c 100644 --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-edit.js +++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-edit.js @@ -29,10 +29,7 @@ JX.behavior('pholio-mock-edit', function(config) { }); drop.listen('willUpload', function(file) { - var node = JX.$N( - 'div', - {className: 'pholio-drop-uploading'}, - pht('uploading')); + var node = render_uploading(); uploading.push({node: node, file: file}); nodes.list.appendChild(node); }); @@ -61,11 +58,46 @@ JX.behavior('pholio-mock-edit', function(config) { /* -( Deleting Images )---------------------------------------------------- */ - // TODO: It would be nice to replace this with an "image will be removed, - // click to undo" kind of thing. + + // When the user clicks the "X" on an image, we replace it with a "click to + // undo" element. If they click to undo, we put the original node back in the + // DOM. JX.Stratcom.listen('click', 'pholio-drop-remove', function(e) { e.kill(); - JX.DOM.remove(e.getNode('pholio-drop-image')); + + var node = e.getNode('pholio-drop-image'); + var undo = render_undo(); + + JX.DOM.listen(undo, 'click', 'pholio-drop-undo', function(e) { + e.kill(); + JX.DOM.replace(undo, node); + }); + + JX.DOM.replace(node, undo); }); + +/* -( Rendering )---------------------------------------------------------- */ + + + var render_uploading = function() { + return JX.$N( + 'div', + {className: 'pholio-drop-uploading'}, + pht('uploading')); + }; + + var render_undo = function() { + var link = JX.$N( + 'a', + {href: '#', sigil: 'pholio-drop-undo'}, + pht('undo')); + + return JX.$N( + 'div', + {className: 'pholio-drop-undo'}, + [pht('removed'), ' ', link]); + }; + + });