[OpenLayers-Trac] [OpenLayers] #1534: Drop Shadow for FramedCloud popup

[OpenLayers]

#1534: Drop Shadow for FramedCloud popup
------------------------+---------------------------------------------------
 Reporter:  openlayers  |       Owner:  euzuro
     Type:  feature     |      Status:  new   
 Priority:  minor       |   Milestone:        
Component:  Popup       |     Version:  2.6   
 Keywords:              |       State:        
------------------------+---------------------------------------------------
 The current implementation of the FramedCloud poup does not use a drop
 shadow.  It would be a great enhancement to have a drop showdow on the
 poup.

 We have updated the cloud-popup-relative.png sprite and added drop shadow
 and attached it to this ticket.

 In addition to updating the image, the sprite positioning code
 (positionBlocks object) in the FramedCloud.js file was updated so that it
 worked within our application.  The numbers may need to be tweaked a bit
 more to suit more generic content and the square close box (our test was
 round and it fits).  The modified numbers are as follows:

     positionBlocks: {
         "tl": {
             'offset': new OpenLayers.Pixel(44, 27),
             'padding': new OpenLayers.Bounds(8, 60, 20, 9),
             'blocks': [
                 { // top-left
                     size: new OpenLayers.Size('auto', 'auto'),
                     anchor: new OpenLayers.Bounds(0, 72, 39, 0),
                     position: new OpenLayers.Pixel(0, 0)
                 },
                 { //top-right
                     size: new OpenLayers.Size(39, 'auto'),
                     anchor: new OpenLayers.Bounds(null, 72, 0, 0),
                     position: new OpenLayers.Pixel(-621, 0)
                 },
                 { //bottom-left
                     size: new OpenLayers.Size('auto', 38),
                     anchor: new OpenLayers.Bounds(0, 34, 39, null),
                     position: new OpenLayers.Pixel(0, -611)
                 },
                 { //bottom-right
                     size: new OpenLayers.Size(39, 38),
                     anchor: new OpenLayers.Bounds(null, 34, 0, null),
                     position: new OpenLayers.Pixel(-621, -611)
                 },
                 { // stem
                     size: new OpenLayers.Size(81, 54),
                     anchor: new OpenLayers.Bounds(null, 0, 0, null),
                     position: new OpenLayers.Pixel(0, -685)
                 }
             ]
         },
         "tr": {
             'offset': new OpenLayers.Pixel(-40, 27),
             'padding': new OpenLayers.Bounds(8, 60, 20, 9),
             'blocks': [
                 { // top-left
                      size: new OpenLayers.Size('auto', 'auto'),
                     anchor: new OpenLayers.Bounds(0, 72, 39, 0),
                     position: new OpenLayers.Pixel(0, 0)
                 },
                 { //top-right
                     size: new OpenLayers.Size(39, 'auto'),
                     anchor: new OpenLayers.Bounds(null, 72, 0, 0),
                     position: new OpenLayers.Pixel(-621, 0)
                 },
                 { //bottom-left
                     size: new OpenLayers.Size('auto', 38),
                     anchor: new OpenLayers.Bounds(0, 34, 39, null),
                     position: new OpenLayers.Pixel(0, -611)
                 },
                 { //bottom-right
                     size: new OpenLayers.Size(39, 38),
                     anchor: new OpenLayers.Bounds(null, 34, 0, null),
                     position: new OpenLayers.Pixel(-621, -611)
                 },
                 { // stem
                     size: new OpenLayers.Size(81, 54),
                     anchor: new OpenLayers.Bounds(0, 0, null, null),
                     position: new OpenLayers.Pixel(-225, -685)
                 }
             ]
         },
         "bl": {
             'offset': new OpenLayers.Pixel(45, -30),
             'padding': new OpenLayers.Bounds(8, 29, 20, 40),
             'blocks': [
                 { // top-left
                     size: new OpenLayers.Size('auto', 'auto'),
                     anchor: new OpenLayers.Bounds(0, 38, 39, 32),
                     position: new OpenLayers.Pixel(0, 0)
                 },
                 { //top-right
                     size: new OpenLayers.Size(39, 'auto'),
                     anchor: new OpenLayers.Bounds(null, 38, 0, 32),
                     position: new OpenLayers.Pixel(-621, 0)
                 },
                 { //bottom-left
                     size: new OpenLayers.Size('auto', 55),
                     anchor: new OpenLayers.Bounds(0, -17, 39, null),
                     position: new OpenLayers.Pixel(0, -611)
                 },
                 { //bottom-right
                     size: new OpenLayers.Size(39, 55),
                     anchor: new OpenLayers.Bounds(null, -17, 0, null),
                     position: new OpenLayers.Pixel(-621, -611)
                 },
                 { // stem
                     size: new OpenLayers.Size(81, 37),
                     anchor: new OpenLayers.Bounds(null, null, 0, 0),
                     position: new OpenLayers.Pixel(-101, -674)
                 }
             ]
         },
         "br": {
             'offset': new OpenLayers.Pixel(-27, -30),
             'padding': new OpenLayers.Bounds(8, 29, 20, 40),
             'blocks': [
                 { // top-left
                     size: new OpenLayers.Size('auto', 'auto'),
                     anchor: new OpenLayers.Bounds(0, 38, 39, 32),
                     position: new OpenLayers.Pixel(0, 0)
                 },
                 { //top-right
                     size: new OpenLayers.Size(39, 'auto'),
                     anchor: new OpenLayers.Bounds(null, 38, 0, 32),
                     position: new OpenLayers.Pixel(-621, 0)
                 },
                 { //bottom-left
                     size: new OpenLayers.Size('auto', 55),
                     anchor: new OpenLayers.Bounds(0, -17, 39, null),
                     position: new OpenLayers.Pixel(0, -611)
                 },
                 { //bottom-right
                     size: new OpenLayers.Size(39, 55),
                     anchor: new OpenLayers.Bounds(null, -17, 0, null),
                     position: new OpenLayers.Pixel(-621, -611)
                 },
                 { // stem
                     size: new OpenLayers.Size(81, 37),
                     anchor: new OpenLayers.Bounds(0, null, null, 0),
                     position: new OpenLayers.Pixel(-328, -674)
                 }
             ]
         }
     }

-- 
Ticket URL: <http://trac.openlayers.org/ticket/1534>
OpenLayers <http://openlayers.org/>
A free AJAX map viewer