Merge pull request #13 from qMRLab/ad/update-chapters

Update the section content

Author: mathieuboudreau

binder/requirements.txt

@@ -4,3 +4,4 @@ nibabel
 pandas
 plotly
 scipy
+tabulate

content/assets/before_after.css

@@ -0,0 +1,50 @@
+.beforeAfter {
+    border-radius: 5px;
+    /* border: 2px solid silver; */
+    position: relative;
+    margin: 0;
+    padding: 0;
+}
+
+.after {
+    height:100%;
+    width:100%;
+    z-index: 1;
+    position: absolute;
+ }
+
+.before {
+    height: 100%;
+    width: 50%;
+    overflow: hidden;
+    border-right: 4px solid silver;
+    z-index: 40;
+    position: absolute;
+}
+
+.middle {
+    top: 45%;
+    left: 48%;
+    z-index: 50;
+    draggable: true;
+    position: absolute;
+}
+
+.middle:before {
+    content: '\f1de';
+    font-family: "Font Awesome 6 Free";
+    font-size: 30pt;
+    font-weight: 900;
+    background-color: silver;
+    border: 1pt solid black;
+    cursor: grab;
+    border-radius: 5pt;
+}
+
+.middle:hover:before {
+    filter: brightness(1.15)
+}
+
+.middle:active:before {
+    cursor: grabbing;
+}

content/assets/before_after.js

@@ -0,0 +1,57 @@
+function beforeAfter() {
+    $(".middle").on("mousedown", function () {
+        $(document).on("mouseup",function() {
+            $(document).unbind("mousemove")
+             $(document).unbind("mouseup")
+             oldX = undefined
+             oldY = undefined
+             })
+        $(document).on("mousemove", function () {
+            adjustSize()
+        })
+    })
+
+    $(".before .modebar").css({'left':'0px', 'position':'absolute'})
+}
+
+window.fetch = new Proxy(window.fetch, {
+    apply(fetch, that, args) {
+        // Forward function call to the original fetch
+        const result = fetch.apply(that, args);
+
+        // Do whatever you want with the resulting Promise
+        result.then((response) => {
+            if (args[0] == '/_dash-update-component') {
+                setTimeout(function() {beforeAfter()}, 500)
+            }})
+        return result
+        }
+    }
+    )
+
+var oldX;
+var oldY;
+function adjustSize() {
+    if (event.screenX != 0) {
+        var clientX = event.clientX
+        var scrollLeft = $(document).scrollLeft()
+        
+        if (oldX && !((parseFloat($('.before').css("width"))+((clientX-scrollLeft)-oldX)) > $('.beforeAfter').width())) {
+            var width = parseFloat($('.before').css("width"))+((clientX-scrollLeft)-oldX)
+            $('.before').css("width", width)
+            $('.middle').css("left", ($('.before').width()/$('.beforeAfter').width()*100)-2 + '%')
+            
+        }
+
+        if (parseFloat($('.middle').css('left'))> $('.beforeAfter').width()) {
+            $('.middle').css("left", '99.5%')
+            $('.before').css("width", $('.beforeAfter').width())
+        }
+    }
+    oldX = clientX-scrollLeft
+    event.target.style.cursor = 'grab';
+}
+
+$(document).ready(function() {
+    setTimeout(function() {beforeAfter()}, 1000)
+})