diff --git a/Images/bonhomme.png b/Images/bonhomme.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac7efbb02404be874c02f27a2e647c54fdeb187e
Binary files /dev/null and b/Images/bonhomme.png differ
diff --git a/css/style.css b/css/style.css
index b4c4d84c662d993e258814f33c9f6148518cb8bc..ed5237673bcd10dead409c4eb58b686b54a911d6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -214,12 +214,30 @@ body {
#tile_left_container,
#tile_right_container,
#tile_bottom_container {
- -webkit-box-shadow: 0px 0px 10px #000;
- box-shadow: 0px 0px 10px #000;
+ -webkit-box-shadow: 0px 0px 3px #555;
+ box-shadow: 0px 0px 3px #555;
background-color: #000 ;
width : 100% ;
height : 100% ;
z-index: 0 ;
+ box-sizing : content-box ;
+ border : 1px solid #555 ;
+}
+
+#tile_top_container {
+ border-bottom : 0 ;
+}
+
+#tile_left_container {
+ border-right : 0 ;
+}
+
+#tile_bottom_container {
+ border-top : 0 ;
+}
+
+#tile_right_container {
+ border-left : 0 ;
}
#tile_center_container {
@@ -263,7 +281,7 @@ body {
margin : auto ;
width: 25% ;
height: 25% ;
- box-shadow: 0px 0px 10px #000;
+ box-shadow: 0px 0px 3px #000;
z-index: 2 ;
display : inline-block ;
vertical-align : middle ;
@@ -285,7 +303,7 @@ body {
border-radius: 50% ;
width: 100% ;
padding-bottom : 100% ;
- box-shadow: 0px 0px 10px #000;
+ box-shadow: 0px 0px 3px #000;
background-size : contain ;
vertical-align : middle ;
}
@@ -460,26 +478,54 @@ body {
border-bottom : 0 ;
}
-.nav-tabs a {
+.nav-tabs a, .navbar a {
outline : 0 ;
}
+#tab_mv,
+#tab_var,
+#tab_draw,
+#tab_ctrl,
+#tab_test,
+#tab_arth,
+#tab_str
+{
+ padding-left : 7px ;
+ padding-right : 7px ;
+}
+
+@media(min-width:340px){
+ #tab_mv,
+ #tab_var,
+ #tab_draw,
+ #tab_ctrl,
+ #tab_test,
+ #tab_arth,
+ #tab_str
+ {
+ padding-left : 9px ;
+ padding-right : 9px ;
+ }
+}
+
@media(min-width:768px){
#tab_mv,
#tab_var,
+ #tab_draw,
#tab_ctrl,
#tab_test,
#tab_arth,
#tab_str
{
- padding-left : 10px ;
- padding-right : 10px ;
+ padding-left : 9px ;
+ padding-right : 9px ;
}
}
@media(min-width:992px){
#tab_mv,
#tab_var,
+ #tab_draw,
#tab_ctrl,
#tab_test,
#tab_arth,
@@ -493,6 +539,7 @@ body {
@media(min-width:1200px){
#tab_mv,
#tab_var,
+ #tab_draw,
#tab_ctrl,
#tab_test,
#tab_arth,
@@ -503,6 +550,13 @@ body {
}
}
+.panel {
+ margin-bottom : 15px ;
+}
+
+.navbar {
+ margin-bottom : 15px ;
+}
.no-top-border-lists > .list-group > .list-group-item:first-child {
border-top : 0 ;
diff --git a/explorer.php b/explorer.php
index 298db62d97a6b5237871db89e1a07415cd3b427a..39ce3b292ed17a79a60d14c7168beab3576541f7 100644
--- a/explorer.php
+++ b/explorer.php
@@ -349,7 +349,7 @@
<!--}}}-->
<div class="row" id="map">
<!--{{{ map -->
- <div class="col-sm-8 col-md-9">
+ <div class="col-sm-12 col-md-9">
<div class="panel panel-default">
<ul class="Map">
<li>
@@ -446,7 +446,7 @@
</div>
<!--}}}-->
<!--{{{ notes -->
- <div class="col-sm-4 col-md-3">
+ <div class="col-sm-6 col-md-3">
<div class="panel panel-default" id="local-notes-panel">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left">Notes locales</h3>
@@ -462,6 +462,8 @@
<textarea class="note" id="local_notes"></textarea>
</div>
</div>
+ </div>
+ <div class="col-sm-6 col-md-3">
<div class="panel panel-default" id="local-notes-panel">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left">Notes globales</h3>
diff --git a/js/draw.js b/js/draw.js
index 014d8e0856705f20206dd451d46196cdc02f9069..0fe13097b4d035d4613a5f7d4eef79f1d4aa8bac 100644
--- a/js/draw.js
+++ b/js/draw.js
@@ -9,10 +9,18 @@
factory(window["Explosurf"]["draw"]) ;
})(function(Draw) { //namespace Explosurf.draw
+/* local storage prefix */
+var storage_prefix = 'Explosurf:'
+ + document.getElementById('planet-name').innerHTML.toLowerCase().replace(/\s+/mg, '')
+ + ':draw'
+ ;
+
var area = document.getElementById("draw-area") ;
var ctx = area.getContext("2d") ;
var center_img = document.getElementById("tile_center") ;
var cursor = document.createElement('img') ;
+cursor.loading = true ;
+cursor.onload = function() {cursor.loading = false ;} ;
cursor.src = window.location.href.split('/').slice(0, -2).join('/') + '/Images/bonhomme.png' ;
var pad = {
@@ -29,9 +37,53 @@ var pad = {
},
}
+function local_save() {
+ var data = JSON.stringify(
+ pad,
+ function(key, value) {
+ if(key === 'tiles') {
+ var paths = {} ;
+ for(var entry in value) {
+ var fname = value[entry].src.split('/').pop() ;
+ paths[entry] = fname ;
+ }
+ return paths ;
+ }
+ return value ;
+ }) ;
+ localStorage.setItem(storage_prefix, data) ;
+}
+
+function loading_image(path) {
+ var img = new Image() ;
+ img.loading = true ;
+ img.onload = function() {img.loading = false ;} ;
+ img.src = path ;
+ return img ;
+}
+
+function local_load() {
+ var data = JSON.parse(
+ localStorage.getItem(storage_prefix),
+ function(key, value) {
+ if(key === 'tiles') {
+ var imgs = {} ;
+ for(var entry in value) {
+ var path = window.location.href + value[entry] ;
+ imgs[entry] = loading_image(path) ;
+ }
+ return imgs ;
+ }
+ return value ;
+ }) ;
+ if(data) {
+ pad = data ;
+ }
+}
+
function recompute_minmax() {
var initialized = false ;
- for(key in pad.tiles) {
+ for(var key in pad.tiles) {
var pen = JSON.parse(key) ;
if(! initialized) {
pad.xmin = pen.x ;
@@ -48,16 +100,19 @@ function recompute_minmax() {
}
}
-function draw_when_loaded(img, x, y, sx, sy) {
- if(img.loading) {
- setTimeout(function() {draw_when_loaded(img, x, y, sx, sy) ;}, 100) ;
+function draw_when_loaded(img, x, y, sx, sy, other) {
+ if(img.loading || (other && other.loading)) {
+ if(other) {
+ setTimeout(function() {draw_when_loaded(img, x, y, sx, sy, other) ;}, 100) ;
+ } else {
+ setTimeout(function() {draw_when_loaded(img, x, y, sx, sy, other) ;}, 50) ;
+ }
} else {
ctx.drawImage(img, x, y, sx, sy) ;
}
}
function redraw() {
- console.log('redraw') ;
ctx.clearRect(0,0,area.width, area.height) ;
var xmin = pad.pen.x < pad.xmin ? pad.pen.x : pad.xmin ;
@@ -77,26 +132,24 @@ function redraw() {
var ox = Math.floor(area.width / 2 - (xmin + wx / 2)*s) ;
var oy = Math.floor(area.height / 2 - (ymin + wy / 2)*s) ;
- for(key in pad.tiles) {
+ for(var key in pad.tiles) {
var img = pad.tiles[key] ;
var pen = JSON.parse(key) ;
draw_when_loaded(img, ox + pen.x * s, oy + pen.y * s, s, s) ;
}
var cs = s / 3 ;
- ctx.drawImage(cursor, ox + pad.pen.x * s + cs, oy + pad.pen.y * s + cs, cs, cs) ;
+ var cursor_tile = pad.tiles[JSON.stringify(pad.pen)] ;
+ draw_when_loaded(cursor, ox + pad.pen.x * s + cs, oy + pad.pen.y * s + cs, cs, cs, cursor_tile) ;
+
+ local_save() ;
}
Draw.redraw = redraw ;
function stamp() {
var key = JSON.stringify(pad.pen) ;
- var src = center_img.src.split('/').pop() ;
- var img = new Image() ;
- img.loading = true ;
- img.onload = function() {img.loading = false ;} ;
- img.src = center_img.src ;
- pad.tiles[key] = img ;
+ pad.tiles[key] = loading_image(center_img.src) ;
pad.xmax = pad.xmax < pad.pen.x ? pad.pen.x : pad.xmax ;
pad.xmin = pad.xmin > pad.pen.x ? pad.pen.x : pad.xmin ;
@@ -170,7 +223,9 @@ document.getElementById('draw-stamp').addEventListener(
function() {stamp() ; redraw() ;}
) ;
-
-redraw() ;
+document.addEventListener("DOMContentLoaded", function(event) {
+ local_load() ;
+ redraw() ;
+}) ;
})//end of namespace Explosurf.draw
diff --git a/js/pgm_construction.js b/js/pgm_construction.js
index 8b6607d64d4be87108c26b8f6cec6bc39d3e1dea..625dc87472ae5b493f13622ed7d24eb53ce15e43 100644
--- a/js/pgm_construction.js
+++ b/js/pgm_construction.js
@@ -1047,10 +1047,16 @@ function phone_tools_update() {
}
function phone_tools_fixed_switch() {
- if(pgm.getBoundingClientRect().top < 10) {
- addClass(phone_toolbar.children[0], 'fixed-bottom') ;
+ if(phone_toolbar.children[0]) {
+ if(pgm.getBoundingClientRect().top < 10) {
+ addClass(phone_toolbar.children[0], 'fixed-bottom') ;
+ } else {
+ removeClass(phone_toolbar.children[0], 'fixed-bottom') ;
+ }
} else {
- removeClass(phone_toolbar.children[0], 'fixed-bottom') ;
+ //defer, because of collapse animation
+ //errors only in browser web dev mode
+ setTimeout(phone_tools_fixed_switch, 100) ;
}
}