Skip to content

Commit 345ff00

Browse files
rossengeorgievrossengeorgiev
committed
Merge branch 'embed'
Conflicts: js/app.js Just remove the conflict markup. Both pieces of code in it are needed.
2 parents 371c9c1 + 0a08b58 commit 345ff00

File tree

6 files changed

+379
-35
lines changed

6 files changed

+379
-35
lines changed

‎css/main.css‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ i.right {
4343
z-index: 100;
4444
}
4545

46+
#mapscreen {
47+
float: right;
48+
}
49+
4650
#map img {
4751
max-width: none;
4852
}
@@ -82,6 +86,9 @@ i.right {
8286
}
8387

8488
header {
89+
position: fixed;
90+
top: 0;
91+
left; 0;
8592
padding: 0;
8693
margin: 0;
8794
height: 50px;
@@ -91,7 +98,6 @@ header {
9198
border-bottom: 5px solid #33b5e5;
9299
box-shadow: 0px 1px 3px #555;
93100
z-index: 5;
94-
position: relative;
95101
}
96102
#app_name {
97103
line-height: normal;
@@ -103,6 +109,11 @@ header > div {
103109
position: relative;
104110
height: 50px;
105111
}
112+
113+
#mapscreen {
114+
margin-top: 55px;
115+
}
116+
106117
#map,
107118
#main {
108119
position: relative;
@@ -114,6 +125,9 @@ header > div {
114125
height: 100%;
115126
width: 100%;
116127
}
128+
#main {
129+
float: left;
130+
}
117131

118132
.nav {
119133
list-style: none outside none;
@@ -281,8 +295,9 @@ header > div {
281295
color: #00A3D3;
282296
}
283297

284-
#chasecarbox,
285-
#aboutbox {
298+
.flatpage {
299+
margin-top: 55px;
300+
overflow: auto;
286301
position: absolute;
287302
width: 100%;
288303
z-index: 4;
@@ -299,9 +314,9 @@ header > div {
299314
margin: 0;
300315
}
301316
.slimContainer {
317+
position: relative;
302318
margin: 20px auto;
303319
width: 300px;
304-
height: 100%;
305320
}
306321
.slimContainer hr {
307322
margin-bottom: 10px;
@@ -424,6 +439,9 @@ header > div {
424439
background: #fff;
425440
position: relative;
426441
}
442+
#telemetry_graph .holder {
443+
border-left: 1px solid #ddd;
444+
}
427445
#telemetry_graph .graph_label {
428446
position: absolute;
429447
top: -26px;
@@ -440,16 +458,15 @@ header > div {
440458
cursor: pointer;
441459
}
442460
#map {
443-
float: right;
444461
height: 245px;
445462
width: 280px;
446463
}
447464
#main {
448465
float: left;
449466
height: 245px;
450467
width: 199px;
451-
border-right: 1px solid #ddd;
452468
overflow: hidden;
469+
margin-top: 55px;
453470
}
454471
#main .data {
455472
height: 100%;

‎embed-preview.html‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
<html>
2+
<head>
3+
<title>Preview of embedded mobile tracker</title>
4+
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
5+
<style>
6+
html, body {
7+
border: 0;
8+
padding: 0;
9+
margin: 0;
10+
height: 100%;
11+
width: 100%;
12+
}
13+
fieldset {
14+
border:0;
15+
margin:0;
16+
padding:0;
17+
padding-left: 15px;
18+
}
19+
body {
20+
font-family: "Roboto", Helvetica, Arial, sans-serif;
21+
}
22+
23+
h1 {
24+
text-align: center;
25+
font-size: 24px;
26+
margin-top: 10px;
27+
margin-bottom: 20px;
28+
}
29+
30+
h2 {
31+
border-bottom: 1px solid #00A3D3;
32+
font-size: 18px;
33+
margin-bottom: 15px;
34+
margin-top: 15px;
35+
padding-left: 5px;
36+
}
37+
38+
39+
#box {
40+
width: 400px;
41+
position: absolute;
42+
left: 50%;
43+
margin-left: -250px;
44+
}
45+
46+
#iframe-box {
47+
position: absolute;
48+
left: 50%;
49+
margin-left: -200px;
50+
}
51+
52+
iframe {
53+
margin-bottom: 50px;
54+
}
55+
56+
textarea {
57+
width: 100%;
58+
height: 100px;
59+
}
60+
</style>
61+
<script type="text/javascript" language="javascript" src="js/jquery-1.8.3-min.js"></script>
62+
<script>
63+
64+
var updateCode = function() {
65+
var prefix = window.location.href.replace("embed-preview.html","");
66+
var code = $("#iframe-box").html().trim().replace("index.html?",prefix+"index.html?");
67+
68+
var params = "";
69+
70+
params += "&amp;hidelist=" + ($("#opt_list").prop("checked") ? 0 : 1);
71+
params += "&amp;hidegraph=" + ($("#opt_graph").prop("checked") ? 0 : 1);
72+
params += "&amp;expandgraph=" + ($("#opt_graph_open").prop("checked") ? 1 : 0);
73+
params += "&amp;filter=" + encodeURIComponent($("#opt_filter").val());
74+
75+
code = code.replace("&amp;preview", params);
76+
77+
$("textarea").html(code);
78+
79+
// center followed vehicle
80+
var p = $("iframe").contents()[0].defaultView;
81+
if('panTo' in p) setTimeout( function() { p.panTo(p.follow_vehicle); }, 300);
82+
}
83+
84+
85+
$(window).ready(function() {
86+
// init/reset values (incase browsers try to remember any)
87+
$("#opt_border,#opt_corners,#opt_list,#opt_graph").prop("checked",true);
88+
$("#opt_graph_open").prop("checked", false);
89+
90+
$("#opt_w,#opt_h").val(400);
91+
92+
// preview update methods
93+
94+
// filter
95+
$("#opt_filter").on('keyup', function() {
96+
updateCode();
97+
});
98+
99+
// vehicle list
100+
$("#opt_list").on('change', function() {
101+
var elm = $("#opt_list");
102+
var p = $("iframe").contents()[0].defaultView;
103+
104+
if(elm.prop("checked")) {
105+
p.embed.vlist = true;
106+
elm.prop("checked", true);
107+
} else {
108+
p.embed.vlist = false;
109+
elm.prop("checked", false);
110+
}
111+
112+
p.checkSize();
113+
updateCode();
114+
});
115+
116+
// telemetry graph
117+
$("#opt_graph").on('change', function() {
118+
var elm = $("#opt_graph");
119+
var p = $($("iframe").contents()[0]);
120+
var box = p.find("#telemetry_graph");
121+
122+
if(elm.prop("checked")) {
123+
box.show();
124+
if($("#opt_graph_open").prop("checked")) p.find("#telemetry_graph .graph_label").click();
125+
elm.prop("checked", true);
126+
} else {
127+
if(box.find(".graph_label").hasClass("active")) p.find("#telemetry_graph .graph_label").click();
128+
box.hide();
129+
elm.prop("checked", false);
130+
}
131+
132+
updateCode();
133+
});
134+
135+
$("#opt_graph_open").on('change', function() {
136+
if(!$("#opt_graph").prop('checked')) return;
137+
138+
var elm = $("#opt_graph_open");
139+
var p = $($("iframe").contents()[0]);
140+
var box = p.find("#telemetry_graph");
141+
142+
if(elm.prop("checked")) {
143+
if(!box.find(".graph_label").hasClass("active")) p.find("#telemetry_graph .graph_label").click();
144+
elm.prop("checked", true);
145+
} else {
146+
if(box.find(".graph_label").hasClass("active")) p.find("#telemetry_graph .graph_label").click();
147+
elm.prop("checked", false);
148+
}
149+
150+
updateCode();
151+
});
152+
153+
// style options
154+
$("#opt_border").on('change', function() {
155+
var elm = $("#opt_border");
156+
157+
if(elm.prop("checked")) {
158+
$("iframe").css({"border":"1px solid #00A3D3"});
159+
elm.prop("checked", true);
160+
} else {
161+
$("iframe").css({"border":0});
162+
elm.prop("checked", false);
163+
}
164+
165+
updateCode();
166+
});
167+
$("#opt_corners").on('change', function() {
168+
var elm = $("#opt_corners");
169+
170+
if(elm.prop("checked")) {
171+
$("iframe").css({"border-radius":"20px"});
172+
elm.prop("checked", true);
173+
} else {
174+
$("iframe").css({"border-radius":0});
175+
elm.prop("checked", false);
176+
}
177+
178+
updateCode();
179+
});
180+
181+
// update size as we type
182+
$("#opt_h").on('keyup', function() {
183+
var elm = $(this);
184+
var v = elm.val();
185+
186+
$("iframe").prop("height", v);
187+
updateCode();
188+
});
189+
$("#opt_w").on('keyup', function() {
190+
var elm = $(this);
191+
var v = elm.val();
192+
193+
$("iframe").prop("width", v);
194+
$("#iframe-box").css({"margin-left":"-"+(v/2)});
195+
196+
updateCode();
197+
});
198+
199+
// autoselect all text on focusing textarea
200+
201+
$("textarea").on("click", function() {
202+
this.select();
203+
});
204+
205+
// init complete, refresh the text box
206+
updateCode();
207+
});
208+
</script>
209+
</head>
210+
<body>
211+
<div id="box">
212+
<h1>Embed mobile tracker on your page</h1>
213+
<h2>1. Options</h1>
214+
<fieldset>
215+
<label for="opt_filter">Vehicle filter (;)</label>
216+
<input type="input" value="" id="opt_filter" size="40" />
217+
<br />
218+
<input type="checkbox" value="1" id="opt_list" />
219+
<label for="opt_list">Enable vehicle list</label>
220+
<br />
221+
<input type="checkbox" value="1" id="opt_graph" />
222+
<label for="opt_graph">Enable telemetry graph</label>
223+
<br />
224+
<input type="checkbox" value="1" id="opt_graph_open" />
225+
<label for="opt_graph_open">Start telemetry graph expanded</label>
226+
</fieldset>
227+
<h2>2. Style</h1>
228+
<fieldset>
229+
<label for="opt_w">Width:</label>
230+
<input type="text" value="500" id="opt_w" />
231+
<input type="checkbox" value="1" id="opt_border" checked="checked" />
232+
<label for="opt_border">Border</label>
233+
<br />
234+
<label for="opt_h">Height:</label>
235+
<input type="text" value="500" id="opt_h" />
236+
<input type="checkbox" value="1" id="opt_corners" checked="checked" />
237+
<label for="opt_corners">Rounded corners</label>
238+
</fieldset>
239+
<h2>3. HTML code</h1>
240+
<textarea id="embed-code" autocomplete="off" readonly="readonly"></textarea>
241+
242+
<h2>4. Live preview</h1>
243+
<div id="iframe-box">
244+
<iframe width="400px" height="400px" src="index.html?embed=1&preview" style="border:1px solid #00A3D3;border-radius:20px;"></iframe>
245+
</div>
246+
</div>
247+
</body>
248+
</html>

‎glyphs/icon-code.svg‎

Lines changed: 14 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)