embed page nearly ready, embed options work

Author: rossengeorgiev

css/main.css

@@ -30,6 +30,10 @@ html, body {
     z-index: 100;
 }
 
+#mapscreen {
+    float: right;
+}
+
 #map img {
     max-width: none;
 }
@@ -101,6 +105,9 @@ header > div {
     height: 100%;
     width: 100%;
 }
+#main {
+    float: left;
+}
 
 .nav {
     list-style: none outside none;
@@ -360,6 +367,9 @@ header > div {
         background: #fff;
         position: relative;
     }
+    #telemetry_graph .holder {
+        border-left: 1px solid #ddd;
+    }
     #telemetry_graph .graph_label {
         position: absolute;
         top: -26px;
@@ -376,15 +386,13 @@ header > div {
         cursor: pointer;
     }
     #map {
-        float: right;
         height: 245px;
         width: 280px;
     }
     #main {
         float: left;
         height: 245px;
         width: 199px;
-        border-right: 1px solid #ddd;
         overflow: hidden;
     }
     #main .data {

embed-preview.html

@@ -63,17 +63,86 @@
 
 var updateCode = function() {
     var prefix = window.location.href.replace("embed-preview.html","");
+    var code = $("#iframe-box").html().trim().replace("index.html?",prefix+"index.html?");
 
-    $("textarea").html($("#iframe-box").html().trim().replace("index.html?",prefix+"index.html?"));
+    var params = "";
+
+    params += "&hidelist=" + ($("#opt_list").prop("checked") ? 0 : 1);
+    params += "&hidegraph=" + ($("#opt_graph").prop("checked") ? 0 : 1);
+    params += "&expandgraph=" + ($("#opt_graph_open").prop("checked") ? 1 : 0);
+
+    console.log(params);
+
+    code = code.replace("&preview", params);
+
+    $("textarea").html(code);
 }
 
 
 $(window).ready(function() {
-    $("#opt_border,#opt_corners").prop("checked",true);
+    // init/reset values (incase browsers try to remember any)
+    $("#opt_border,#opt_corners,#opt_list,#opt_graph").prop("checked",true);
+    $("#opt_graph_open").prop("checked", false);
+
     $("#opt_w,#opt_h").val(400);
 
     // preview update methods
 
+    // vehicle list
+    $("#opt_list").on('change', function() {
+        var elm = $("#opt_list");
+        var p = $("iframe").contents()[0].defaultView;
+
+        if(elm.prop("checked")) {
+            p.embed.vlist = true;
+            elm.prop("checked", true);
+        } else {
+            p.embed.vlist = false;
+            elm.prop("checked", false);
+        }
+
+        p.checkSize();
+        updateCode();
+    });
+
+    // telemetry graph
+    $("#opt_graph").on('change', function() {
+        var elm = $("#opt_graph");
+        var p = $($("iframe").contents()[0]);
+        var box = p.find("#telemetry_graph");
+
+        if(elm.prop("checked")) {
+            box.show();
+            if($("#opt_graph_open").prop("checked")) p.find("#telemetry_graph .graph_label").click();
+            elm.prop("checked", true);
+        } else {
+            if(box.find(".graph_label").hasClass("active")) p.find("#telemetry_graph .graph_label").click();
+            box.hide();
+            elm.prop("checked", false);
+        }
+
+        updateCode();
+    });
+
+    $("#opt_graph_open").on('change', function() {
+        if(!$("#opt_graph").prop('checked')) return;
+
+        var elm = $("#opt_graph_open");
+        var p = $($("iframe").contents()[0]);
+        var box = p.find("#telemetry_graph");
+
+        if(elm.prop("checked")) {
+            if(!box.find(".graph_label").hasClass("active")) p.find("#telemetry_graph .graph_label").click();
+            elm.prop("checked", true);
+        } else {
+            if(box.find(".graph_label").hasClass("active")) p.find("#telemetry_graph .graph_label").click();
+            elm.prop("checked", false);
+        }
+
+        updateCode();
+    });
+
+    // style options
     $("#opt_border").on('change', function() {
         var elm = $("#opt_border");
 
@@ -91,7 +160,7 @@
         var elm = $("#opt_corners");
 
         if(elm.prop("checked")) {
-            $("iframe").css({"border-radius":"25px"});
+            $("iframe").css({"border-radius":"20px"});
             elm.prop("checked", true);
         } else {
             $("iframe").css({"border-radius":0});
@@ -101,16 +170,19 @@
         updateCode();
     });
 
+    // update size as we type
     $("#opt_h").on('keyup', function() {
         var elm = $(this);
-        $("iframe").prop("height", ""+elm.val()+"px");
+        var v = elm.val();
+
+        $("iframe").prop("height", v);
         updateCode();
     });
     $("#opt_w").on('keyup', function() {
         var elm = $(this);
         var v = elm.val();
 
-        $("iframe").prop("width", ""+v+"px");
+        $("iframe").prop("width", v);
         $("#iframe-box").css({"margin-left":"-"+(v/2)});
 
         updateCode();
@@ -132,8 +204,12 @@
         <h1>Embed mobile tracker on your page</h1>
         <h2>1. Options</h1>
         <fieldset>
+            <input type="checkbox" value="1" id="opt_list" />
+            <label for="opt_list">Enable vehicle list</label>
+            <br />
             <input type="checkbox" value="1" id="opt_graph" />
             <label for="opt_graph">Enable telemetry graph</label>
+            <br />
             <input type="checkbox" value="1" id="opt_graph_open" />
             <label for="opt_graph_open">Start telemetry graph expanded</label>
         </fieldset>
@@ -149,12 +225,12 @@ <h2>2. Style</h1>
             <input type="checkbox" value="1" id="opt_corners" checked="checked" />
             <label for="opt_corners">Rounded corners</label>
         </fieldset>
-        <h2>3. Code</h1>
-            <textarea id="embed-code" readonly="readonly"></textarea>
+        <h2>3. HTML code</h1>
+            <textarea id="embed-code" autocomplete="off" readonly="readonly"></textarea>
 
-        <h2>4. Preview</h1>
+        <h2>4. Live preview</h1>
             <div id="iframe-box">
-            <iframe width="400px" height="400px" src="index.html?embed=1&preview" style="border:1px solid #00A3D3;border-radius:25px;"></iframe>
+            <iframe width="400px" height="400px" src="index.html?embed=1&preview" style="border:1px solid #00A3D3;border-radius:20px;"></iframe>
             </div>
     </div>
 </body>

index.html

@@ -15,14 +15,14 @@
         <link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon.png" />
         <link rel="fluid-icon" href="img/fluidicon.png" title="Mobile Tracker" />
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
-        <!--
         <link rel="stylesheet" href="css/base.css"/>
         <link rel="stylesheet" href="css/skeleton.css"/>
         <link rel="stylesheet" href="css/layout.css"/>
         <link rel="stylesheet" href="css/habitat-font.css"/>
         <link rel="stylesheet" href="css/main.css"/>
-        -->
+        <!--
         <link rel="stylesheet" href="css/mobile.css"/>
+        -->
     </head>
     <body>
 
@@ -160,7 +160,13 @@ <h2>Chase car mode</h2>
             </div>
         </div>
     </div>
-    <div id="map" style="dispaly: none" class="main_screen"></div>
+    <div id="mapscreen">
+        <div id="map" style="dispaly: none" class="main_screen"></div>
+        <div id="telemetry_graph" style="display: none">
+            <div class="graph_label">Telemetry Graph</div>
+            <div class="holder" style="height: 200px;width: 50px"></div>
+        </div>
+    </div>
     <div id="main" style="dispaly: none" class="main_screen">
         <div class="scrollwrapper">
             <div class="portrait">
@@ -171,20 +177,16 @@ <h2>Chase car mode</h2>
             </div>
         </div>
     </div>
-    <div id="telemetry_graph" style="display: none">
-        <div class="graph_label">Telemetry Graph</div>
-        <div class="holder" style="height: 200px;width: 50px"></div>
-    </div>
     <script src="http://maps.google.com/maps/api/js?v=3.10&sensor=false&language=en_us&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>
-    <script type="text/javascript" language="javascript" src="js/mobile.js"></script>
 <!--
+    <script type="text/javascript" language="javascript" src="js/mobile.js"></script>
+-->
     <script type="text/javascript" language="javascript" src="js/jquery-1.8.3-min.js"></script>
     <script type="text/javascript" language="javascript" src="js/chasecar.lib.js"></script>
     <script type="text/javascript" language="javascript" src="js/iscroll.js"></script>
     <script type="text/javascript" language="javascript" src="js/nite-overlay.js"></script>
     <script type="text/javascript" language="javascript" src="js/tracker.js"></script>
     <script type="text/javascript" language="javascript" src="js/app.js"></script>
--->
     <script type="text/javascript">
 
       var _gaq = _gaq || [];

js/app.js

@@ -11,6 +11,28 @@ if(
  || navigator.userAgent.match(/BlackBerry/i)
  ) is_mobile = true;
 
+// embed detection
+
+var embed = {
+    enabled: false,
+    vlist: true,
+    graph: true,
+    graph_exapnded: false,
+}
+var params = window.location.search.substring(1).split('&');
+
+for(var idx in params) {
+    var line = params[idx].split('=');
+    if(line.length < 2) continue;
+
+    switch(line[0]) {
+        case "embed": if(line[1] == "1") embed.enabled = true; break;
+        case "hidelist": if(line[1] == "1") embed.vlist = false; break;
+        case "hidegraph": if(line[1] == "1") embed.graph = false; break;
+        case "expandgraph": if(line[1] == "1") embed.graph_expanded = true; break;
+    }
+}
+
 $.ajaxSetup({ cache: true });
 
 // handle cachin events and display a loading bar
@@ -36,9 +58,10 @@ function trackerInit() {
     $('header,#main,#map').show(); // interface elements
 
     if(!is_mobile) {
-        $.getScript("js/ssdv.js");
+        if(!embed.enabled) $.getScript("js/ssdv.js");
+
         $.getScript("js/init_plot.js", function() { checkSize(); if(!map) load(); });
-        $('#telemetry_graph').addClass("main_screen").attr('style','');
+        if(embed.graph) $('#telemetry_graph').addClass("main_screen").attr('style','');
         return;
     }
     checkSize();
@@ -74,7 +97,10 @@ function checkSize() {
     h = $(window).height();
     h = (h < 300) ? 300 :  h; // absolute minimum 320px minus 20px for the iphone bar
     hh = $('header').height();
-    sw = $('#main').width();
+
+    $("#mapscreen").height(h-hh-5);
+
+    sw = (embed.vlist) ? 199 : 0;
 
     $('.container').width(w-20);
 
@@ -86,13 +112,17 @@ function checkSize() {
             $('#map').height(h-hh-5);
         }
         $('body,#loading').height(h);
-        $('#map,#telemetry_graph,#telemetry_graph .holder').width(w-sw-1);
+        $('#mapscreen,#map,#telemetry_graph,#telemetry_graph .holder').width(w-sw);
+        $('#main').width(sw);
     } else { // portrait mode
         if(h < 420) h = 420;
+        var mh = (embed.vlist) ? 180 : 0;
+
         $('body,#loading').height(h);
-        $('#map').height(h-hh-5-180);
-        $('#map').width(w);
-        $('#main').height(180); // 180px is just enough to hold one expanded vehicle
+        $('#map,#mapscreen').height(h-hh-5-mh);
+        $('#map,#mapscreen').width(w);
+        $('#main').height(mh); // 180px is just enough to hold one expanded vehicle
+        $('#main').width(w);
     }
 
     // this should hide the address bar on mobile phones, when possible
@@ -227,6 +257,8 @@ $(window).ready(function() {
         });
     });
 
+    if(embed.graph_expanded) $('#telemetry_graph .graph_label').click();
+
     // confirm dialog when launchnig a native map app with coordinates
     $('#main').on('click', '#launch_mapapp', function() {
         return confirm("Launch your maps app?");
@@ -426,7 +458,7 @@ $(window).ready(function() {
     // The position is displayed in top right corner of the screen
     // This should be very handly for in the field tracking
     //setTimeout(function() {updateCurrentPosition(50.27533, 3.335166);}, 5000);
-    if(navigator.geolocation && is_mobile) {
+    if(navigator.geolocation && is_mobile && !embed.enabled) {
         // if we have geolocation services, show the locate me button
         // the button pants the map to the user current location
         $("#locate-me,.chasecar").show();

js/tracker.js

@@ -79,9 +79,9 @@ function load() {
         rotateControl: false,
         panControl: false,
         scaleControl: false,
-        zoomContro: true,
+        zoomControl: true,
         zoomControlOptions: {
-            style: google.maps.ZoomControlStyle.LARGE
+            style: google.maps.ZoomControlStyle.DEFAULT
         },
         scrollwheel: true
     });