Examples: Add switch compilation level tool.

examples/accessible.html

@@ -61,6 +61,7 @@
 
     <script src="loader.js?id=accessible" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/animation.html

@@ -64,6 +64,7 @@
 
     <script src="loader.js?id=animation" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/bind-input.html

@@ -89,6 +89,7 @@
 
     <script src="loader.js?id=bind-input" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/bing-maps.html

@@ -58,6 +58,7 @@
     <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=bing-maps" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/brightness-contrast.html

@@ -74,6 +74,7 @@
 
     <script src="loader.js?id=brightness-contrast" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/canvas-tiles.html

@@ -52,6 +52,7 @@
 
     <script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/custom-controls.html

@@ -90,6 +90,7 @@
 
     <script src="loader.js?id=custom-controls" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 

examples/device-orientation.html

@@ -58,6 +58,7 @@
 
     <script src="loader.js?id=device-orientation" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/drag-rotate-and-zoom.html

@@ -52,6 +52,7 @@
 
     <script src="loader.js?id=drag-rotate-and-zoom" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/epsg-4326.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=epsg-4326" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/export-map.html

@@ -57,6 +57,7 @@
 
     <script src="loader.js?id=export-map" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/full-screen-drag-rotate-and-zoom.html

@@ -64,6 +64,7 @@
 
     <script src="loader.js?id=full-screen-drag-rotate-and-zoom" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/full-screen.html

@@ -64,6 +64,7 @@
 
     <script src="loader.js?id=full-screen" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/geolocation.html

@@ -72,6 +72,7 @@
     <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="loader.js?id=geolocation" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/getfeatureinfo.html

@@ -56,6 +56,7 @@
 
     <script src="loader.js?id=getfeatureinfo" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/gml.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=gml" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/gpx.html

@@ -55,6 +55,7 @@
 
     <script src="loader.js?id=gpx" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/hue-saturation.html

@@ -74,6 +74,7 @@
 
     <script src="loader.js?id=hue-saturation" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/icon.html

@@ -63,6 +63,7 @@
     <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="loader.js?id=icon" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/kml-earthquakes.html

@@ -76,6 +76,7 @@
     <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="loader.js?id=kml-earthquakes" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/kml-timezones.html

@@ -64,6 +64,7 @@
     <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="loader.js?id=kml-timezones" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/kml.html

@@ -56,6 +56,7 @@
 
     <script src="loader.js?id=kml" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/layer-group.html

@@ -126,6 +126,7 @@
     <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=layer-group" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/localized-openstreetmap.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=localized-openstreetmap" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/mapquest.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=mapquest" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/mouse-position.html

@@ -59,6 +59,7 @@
 
     <script src="loader.js?id=mouse-position" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/moveend.html

@@ -54,6 +54,7 @@
 
     <script src="loader.js?id=moveend" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/navigation-controls.html

@@ -56,6 +56,7 @@
 
     <script src="loader.js?id=navigation-controls" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/overlay.html

@@ -74,6 +74,7 @@
     <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="loader.js?id=overlay" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/popup.html

@@ -106,6 +106,7 @@
 
     <script src="loader.js?id=popup" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/preload.html

@@ -55,6 +55,7 @@
 
     <script src="loader.js?id=preload" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/rotation.html

@@ -52,6 +52,7 @@
 
     <script src="loader.js?id=rotation" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/scale-line.html

@@ -56,6 +56,7 @@
 
     <script src="loader.js?id=scale-line" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/select-features.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=select-features" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/semi-transparent-layer.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=semi-transparent-layer" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/side-by-side.html

@@ -63,6 +63,7 @@
 
     <script src="loader.js?id=side-by-side" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/simple.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=simple" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/stamen.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=stamen" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/style-rules.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=style-rules" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/teleport.html

@@ -61,6 +61,7 @@
 
     <script src="loader.js?id=teleport" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/ten-thousand-points.html

@@ -55,6 +55,7 @@
 
     <script src="loader.js?id=ten-thousand-points" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/tilejson.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=tilejson" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/topojson.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=topojson" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/vector-layer.html

@@ -56,6 +56,7 @@
 
     <script src="loader.js?id=vector-layer" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/wms-capabilities.html

@@ -49,6 +49,7 @@
 
     <script src="loader.js?id=wms-capabilities" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/wms-custom-proj.html

@@ -53,6 +53,7 @@
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/defs/EPSG21781.js" type="text/javascript"></script>
     <script src="loader.js?id=wms-custom-proj" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/wms-image-custom-proj.html

@@ -54,6 +54,7 @@
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/defs/EPSG21781.js" type="text/javascript"></script>
     <script src="loader.js?id=wms-image-custom-proj" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/wms-image.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=wms-image" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/wms-no-proj.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=wms-no-proj" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/wms-tiled.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=wms-tiled" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/wmts-capabilities.html

@@ -50,6 +50,7 @@
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script>
     <script src="loader.js?id=wmts-capabilities" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/wmts-from-capabilities.html

@@ -52,6 +52,7 @@
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script>
     <script src="loader.js?id=wmts-from-capabilities" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/wmts-ign.html

@@ -60,6 +60,7 @@
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script>
     <script src="loader.js?id=wmts-ign" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/wmts.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=wmts" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/xyz-esri.html

@@ -51,6 +51,7 @@
 
     <script src="loader.js?id=xyz-esri" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/xyz-seturl.html

@@ -57,6 +57,7 @@
     <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=xyz-seturl" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/zoomslider.html

@@ -115,6 +115,7 @@
 
     <script src="loader.js?id=zoomslider" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 

resources/example-behaviour.js

@@ -0,0 +1,61 @@
+;(function(){
+  var container = document.querySelector('.navbar ul.pull-right'),
+      li = document.createElement('li'),
+      div = document.createElement('div'),
+      select = document.createElement('select'),
+      possibleModes = {
+        'raw' : 'Development',
+        'compiled': 'Production'
+      },
+      urlMode = window.location.href.match(/mode=([a-z0-9\-]+)\&?/i),
+      curMode = urlMode ? urlMode[1] : 'compiled',
+      option,
+      modeIdx,
+      mode,
+      modeTxt,
+      modeChangedMethod;
+
+  modeChangedMethod = function() {
+    var newMode = this.value,
+        search = window.location.search.substring(1),
+        baseUrl = window.location.href.split('?')[0],
+        chunks = search ? search.split('&') : [],
+        pairs = [],
+        i,
+        pair,
+        adjusted;
+    for (i = chunks.length - 1; i >= 0; --i) {
+      pair = chunks[i].split('=');
+      if (pair[0].toLowerCase() === 'mode') {
+        pair[1] = newMode;
+      }
+      adjusted = encodeURIComponent(pair[0]);
+      if (typeof pair[1] !== undefined) {
+        adjusted += '=' + encodeURIComponent(pair[1] || '');
+      }
+      pairs.push(adjusted);
+    }
+    location.href = baseUrl + '?' + pairs.join('&');
+  };
+
+  for (mode in possibleModes) {
+    if ( possibleModes.hasOwnProperty(mode) ) {
+      option = document.createElement('option');
+      modeTxt = possibleModes[mode];
+      option.value = mode;
+      option.innerHTML = modeTxt;
+      option.selected = curMode === mode;
+      select.appendChild(option);
+    }
+  }
+
+  select.addEventListener('change', modeChangedMethod);
+  select.className = 'input-medium';
+  
+  div.className = 'input-prepend';
+  div.innerHTML = '<span class="add-on"><i class="icon-refresh"></i></span>';
+  div.appendChild(select);
+
+  li.appendChild(div);
+  container.appendChild(li);
+})();