[OpenLayers-Users] Full-screen toggle

[Slawomir Messner]

Hi,
this is our control. It uses jQuery for animation and has a pin map function, when a user doesn't want to pan or zoom. I shorten the comments I hope it's self-explaining.

OpenLayers.Control.MinimizeMaximizeMapControl = OpenLayers.Class(OpenLayers.Control,
{
     EVENT_TYPES: ["minimizedMap","maximizedMap","pinned","unpinned"],
     minimizeDiv:null,
     maximizeDiv:null,
     pinMapDiv:null,
     mapPinned:false,
     initialize:function  (options) {
         this.EVENT_TYPES =
             OpenLayers.Control.MinimizeMaximizeMapControl.prototype.EVENT_TYPES.concat(
             OpenLayers.Control.prototype.EVENT_TYPES);
         OpenLayers.Control.prototype.initialize.apply(this, [options]);
     },
     destroy:function  () {
         OpenLayers.Event.stopObservingElement(this.minimizeDiv);
         OpenLayers.Event.stopObservingElement(this.maximizeDiv);
         OpenLayers.Control.prototype.destroy.apply(this, arguments);
     },
     draw:function  () {
         var  div = OpenLayers.Control.prototype.draw.apply(this, arguments);
         div.style.top ="0px";
         div.style.right ="0px";
         div.style.width ="81px";
         div.style.height ="24px";
         this.maximizeDiv = document.createElement("div");
         this.minimizeDiv = document.createElement("div");
         this.pinMapDiv = document.createElement("div");

         this.maximizeDiv.className ="maximizeDiv";
         this.minimizeDiv.className ="minimizeDiv";
         this.pinMapDiv.className ="pinDiv";

         this.maximizeDiv.title ="Karte maximieren";
         this.minimizeDiv.title ="Karte minimieren";
         this.pinMapDiv.title ="Karte festhalten";
         OpenLayers.Event.observe(this.pinMapDiv,"click", OpenLayers.Function.bindAsEventListener(this.pinMap,this));
         OpenLayers.Event.observe(this.pinMapDiv,"mouseup", OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
         OpenLayers.Event.observe(this.pinMapDiv,"mousedown", OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
         div.appendChild(this.pinMapDiv);
         OpenLayers.Event.observe(this.minimizeDiv,"click", OpenLayers.Function.bindAsEventListener(this.minimizeWindow,this));
         OpenLayers.Event.observe(this.minimizeDiv,"mouseup", OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
         OpenLayers.Event.observe(this.minimizeDiv,"mousedown", OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
         div.appendChild(this.minimizeDiv);
         OpenLayers.Event.observe(this.maximizeDiv,"click", OpenLayers.Function.bindAsEventListener(this.maximizeWindow,this));
         OpenLayers.Event.observe(this.maximizeDiv,"mouseup", OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
         OpenLayers.Event.observe(this.maximizeDiv,"mousedown", OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
         div.appendChild(this.maximizeDiv);
         return  div;
     },
     pinMap:function  (evt) {
         this.mapPinned = !this.mapPinned;
         this.setNavigationControls();
         this.events.triggerEvent(this.mapPinned ?"pinned"  :"unpinned");
     },
     setNavigationControls:function  () {
         var  movecontrols =this.map.getControlsByClass("OpenLayers.Control.Navigation").concat(
         this.map.getControlsByClass("OpenLayers.Control.PanZoom"),
         this.map.getControlsByClass("OpenLayers.Control.PanZoomBar"),
         this.map.getControlsByClass("OpenLayers.Control.PanPanel"),
         this.map.getControlsByClass("OpenLayers.Control.NavToolbar"),
         this.map.getControlsByClass("OpenLayers.Control.ZoomBox"),
         this.map.getControlsByClass("OpenLayers.Control.ZoomPanel"));
         for  (var  i = 0; i<  movecontrols.length; i++) {
             if  (this.mapPinned) {
                 movecontrols[i].deactivate();
             }else  {
                 movecontrols[i].activate();
             }
         }
         this.pinMapDiv.className =this.mapPinned ?"pinPinnedDiv"  :"pinDiv";
     },
     minimizeWindow:function  (evt) {
         if  (!this.mapPinned) {
             jQuery("#mapOpenLayer").animate({ height:"400px", width:"958px"  }, 600);
             jQuery("#wrapheader").animate({ height:"100px"  },"slow");
             jQuery(".sitelogo").animate({ height:"90px"  },"slow");
             jQuery(".adw").animate({ height:"80px"  },"slow");
             jQuery(".AspNet-Menu-Horizontal").animate({ width:"960px"  },"slow");
             jQuery("#wrapwebsite").animate({ width:"960px"  },"slow");
             tempMap =this.map;
             setTimeout("tempMap.updateSize()", 700);
             this.events.triggerEvent("minimizedMap");
             if  (evt !=null) {
                 OpenLayers.Event.stop(evt);
             }
         }
     },
     maximizeWindow:function  (evt) {
         if  (!this.mapPinned) {
             jQuery("#mapOpenLayer").animate({ height: (jQuery(window).height() - 85) +"px", width: Math.max(960, (jQuery(window).width() - 220)) +"px"  }, 600);
             jQuery("#wrapheader").animate({ height:"0px"  },"slow");
             jQuery(".sitelogo").animate({ height:"0px"  },"slow");
             jQuery(".adw").animate({ height:"0px"  },"slow");
             jQuery(".AspNet-Menu-Horizontal").animate({ width: Math.max(960, (jQuery(window).width() - 220)) +"px"  },"slow");
             jQuery("#wrapwebsite").animate({ width: Math.max(960, (jQuery(window).width() - 220)) +"px"  },"slow");
             tempMap =this.map;
             setTimeout("tempMap.updateSize()", 700);
             this.events.triggerEvent("maximizedMap");
             if  (evt !=null) {
                 OpenLayers.Event.stop(evt);
             }
         }
     },
     CLASS_NAME:"OpenLayers.Control.MinimizeMaximizeMapControl"
});

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20110504/ee3492fc/attachment-0001.html