diff --git a/css/style.css b/css/style.css
index 9c2baefade036003749fc92b1c49e80be4fce66d..b6664c72464f5626ca1d9b3e77afb22ad4388f55 100644
--- a/css/style.css
+++ b/css/style.css
@@ -633,22 +633,6 @@ input.add-target {
right: 0;
}
- .row-offcanvas-right
- .sidebar-offcanvas {
- right: calc(-100% - 30px);
- display : none ;
- }
-
- .row-offcanvas-right.active
- .sidebar-offcanvas {
- right: calc(-100% - 30px);
- display : block ;
- }
-
- .row-offcanvas-right.active {
- right: calc(100% + 60px) ;
- }
-
.sidebar-offcanvas {
position: absolute ;
top: 0;
diff --git a/explorer.php b/explorer.php
index 3358a94f448fe4a8a1c8f903c42fedb586876e39..3b5528f809aa282fb6aff3b5e017f5d6231eb387 100644
--- a/explorer.php
+++ b/explorer.php
@@ -740,6 +740,7 @@
<!--{{{ program-->
<div class="col-xs-12 col-sm-8">
<div class="panel panel-default pgm" id="pgm">
+ <!--{{{ algorithm-->
<div class="panel-heading">
<h3 class="panel-title pull-left" id="pgm-title">Programme</h3>
<div class="btn-group pull-right" role="group">
@@ -782,6 +783,7 @@
<span class="glyphicon glyphicon-plus"></span>
</li>
</ul>
+ <!--}}}-->
<!--{{{ mobile toolbar-->
<div class="btn-toolbar hidden" role="toolbar" id="phone-toolbar">
<div class="btn-group" role="group">
diff --git a/fixed_move_test.html b/fixed_move_test.html
new file mode 100644
index 0000000000000000000000000000000000000000..f8375d6501242b4f755dfeb4b5d9c90d085f7d76
--- /dev/null
+++ b/fixed_move_test.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <style>
+ .trigger {
+ width : 220px ;
+ border : 1px solid #000 ;
+ display : inline-block ;
+ }
+ .container {
+ position : relative ;
+ width : 20px ;
+ height : 20px ;
+ left : 0px ;
+ background : #aaa ;
+ transition : all .25s ease-out ;
+ }
+ .trigger:hover .container{
+ left : 200px ;
+ }
+ .child {
+ position : fixed ;
+ width : 20px ;
+ height : 20px ;
+ background : #aaa ;
+ top : 80px ;
+ }
+ </style>
+ </head>
+ <body>
+ Your brother has the bug : <span id='bug-status'></span><br/>
+ <div class="trigger">
+ <span>Reference</span><br/>
+ <div class="container">
+ <div class="child">
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="trigger" id="trigger">
+ <span>Fixed</span><br/>
+ <div class="container" id="container">
+ <div class="child" id="child">
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ var trigger = document.getElementById('trigger') ;
+ var container = document.getElementById('container') ;
+ var child = document.getElementById('child') ;
+ function from_and_back(evt) {
+ if(container.children.length) {
+ container.removeChild(child) ;
+ setTimeout(function() {container.appendChild(child) ;}, 300) ;
+ }
+ }
+ trigger.addEventListener('mouseenter', from_and_back) ;
+ trigger.addEventListener('mouseleave', from_and_back) ;
+
+ var bug_status = document.getElementById('bug-status') ;
+ bug_status.innerText = (function() {
+ var abs = document.createElement('div') ;
+ abs.style.position = 'relative' ;
+ abs.style.left = '0px' ;
+
+ var fix = document.createElement('div') ;
+ fix.style.position = 'fixed' ;
+
+ abs.appendChild(fix) ;
+ document.body.appendChild(abs) ;
+
+ fix.getBoundingClientRect() ;
+ abs.style.left = '20px' ;
+
+ var fix_left = fix.getBoundingClientRect().left ;
+ var abs_left = abs.getBoundingClientRect().left ;
+ document.body.removeChild(abs) ;
+
+ return abs_left !== fix_left ;
+ })() ;
+ </script>
+</html>
+
diff --git a/js/pgm_construction.js b/js/pgm_construction.js
index 6993c557cc1b69d46306c2951f1e7e13c60bcee1..554deb123dfb6724e2f2f06437ca16fd1f36da0f 100644
--- a/js/pgm_construction.js
+++ b/js/pgm_construction.js
@@ -33,6 +33,29 @@ function removeClass(el,c) {
Pgm.removeClass = removeClass ;
+var has_absolute_fixed_bug = (function() {
+ var container = document.createElement('div') ;
+ container.style.position = 'relative' ;
+ container.style.left = '0px' ;
+
+ var child = document.createElement('div') ;
+ child.style.position = 'fixed' ;
+
+ container.appendChild(child) ;
+ document.body.appendChild(container) ;
+
+ child.getBoundingClientRect() ;
+ container.style.left = '20px' ;
+
+ var child_left = child.getBoundingClientRect().left ;
+ var container_left = container.getBoundingClientRect().left ;
+ document.body.removeChild(container) ;
+
+ return child_left !== container_left;
+})() ;
+
+console.log(has_absolute_fixed_bug) ;
+
/*}}}*/
/* {{{ Load and save ======================================================== */
@@ -524,6 +547,8 @@ function unpin_library() {
}
function desktop_activate_library() {
+ //reset the library placement
+ library.style.top = '' ;
//locate the library groups in the DOM and activate them
var libraryGroups = document.getElementsByClassName("library-group") ;
[].forEach.call(libraryGroups, function (el) {
@@ -815,7 +840,8 @@ function insert_chosen(evt) {
/* Library activation : all items are clickable for addition */
function mobile_activate_library() {
- //get the library element
+ //reset the library placement
+ library.style.top = '' ;
//the commands are clickable for addition
var library_cmds = library.getElementsByClassName("pgm-command") ;
for(var i = 0; i < library_cmds.length; ++i) {
@@ -826,6 +852,9 @@ function mobile_activate_library() {
for(var i = 0; i < library_blocks.length; ++i) {
library_blocks[i].addEventListener("click", insert_chosen) ;
}
+ if(is_mobile_forced()) {
+ pin_library() ;
+ }
}
function mobile_deactivate_library() {
@@ -840,6 +869,7 @@ function mobile_deactivate_library() {
for(var i = 0; i < library_blocks.length; ++i) {
library_blocks[i].removeEventListener("click", insert_chosen) ;
}
+ unpin_library() ;
}
/* Input click : first click focuses, second triggers addition */
@@ -962,6 +992,11 @@ function is_mobile() {
return getComputedStyle(test_el ,null).display !== "none" ;
}
+function is_mobile_forced() {
+ var mobile_switch = document.getElementById("desktop-ui-phone") ;
+ return mobile_switch.className.match(/active/)
+}
+
function phone_tools_set(id) {
var btns = phone_toolbar.getElementsByTagName("button") ;
for(var i = 0; i < btns.length; ++i) {
@@ -1010,6 +1045,14 @@ function phone_tools_get() {
}
}
+function phone_tools_update() {
+ var child = phone_toolbar.children[0] ;
+ if(child) {
+ phone_toolbar.removeChild(child) ;
+ setTimeout(function() {phone_toolbar.appendChild(child);}, 250) ;
+ }
+}
+
function phone_tools_fixed_switch() {
if(pgm.getBoundingClientRect().top < 10) {
addClass(phone_toolbar.children[0], 'fixed-bottom') ;
@@ -1029,19 +1072,23 @@ function unpin_phone_toolbar() {
var toolbar_right = 0 ;
function open_library() {
- var elem = document.getElementById("program") ;
- addClass(elem, "active") ;
- var test_el = document.getElementById("mobile-tester") ;
- if(getComputedStyle(test_el ,null).display !== "none") {
+ if(!is_mobile_forced()) {
+ var elem = document.getElementById("program") ;
+ addClass(elem, "active") ;
+ var test_el = document.getElementById("mobile-tester") ;
var scroll = pgm.getBoundingClientRect().top ;
var topval = Math.max(0, 10 - scroll) ;
library.style.top = topval + 'px' ;
+ phone_tools_update() ;
}
}
function close_library() {
- var elem = document.getElementById("program") ;
- removeClass(elem, "active") ;
+ if(!is_mobile_forced()) {
+ var elem = document.getElementById("program") ;
+ removeClass(elem, "active") ;
+ phone_tools_update() ;
+ }
}
function mobile_activate_program() {