Add responsive functionnality to Sticky-kit

diff --git a/app/static/src/js/modules/sticky-kit-init.js b/app/static/src/js/modules/sticky-kit-init.js
index ea6b3b09319b1a989dfe70f90e78f650fe9bdbb9..8521305011197115e3680e569d51bbaae35972f5 100644 (file)
--- a/app/static/src/js/modules/sticky-kit-init.js
+++ b/app/static/src/js/modules/sticky-kit-init.js
@@ -1,5 +1,7 @@
 var StickyKitInit = function() {
 
+    this.elements = [];
+
     //
     // Init
     //
@@ -11,21 +13,90 @@ StickyKitInit.prototype.init = function() {
 
     var that = this,
         options = {},
-        data;
+        data, element, $element;
 
     $('[data-sticky]').each(function(i) {
 
+        $element = $(this);
         data = $(this).data();
+
         if(data.stickyOffset) {
             options.offset_top = data.stickyOffset;
         }
         if(data.stickyParent) {
             options.parent = '.' + data.stickyParent;
         }
-        $(this).stick_in_parent(options);
+
+        element = {
+            $element: $(this),
+            options: options,
+            data: $(this).data(),
+            attached: false
+        };
+        that.elements.push(element);
+        that.attach(element);
 
     });
 
+    $(window).resize(that.windowResize.bind(that));
+
+};
+
+StickyKitInit.prototype.windowResize = function(e) {
+
+    var that = this,
+        windowWidth = $(window).width();
+
+    for(var i=0; i<that.elements.length; i++) {
+
+        if(that.elements[i].data.stickyDetachAt) {
+
+            if(windowWidth > that.elements[i].data.stickyDetachAt && !that.elements[i].attached) {
+                that.attach(that.elements[i]);
+            }
+
+            if(windowWidth <= that.elements[i].data.stickyDetachAt && that.elements[i].attached) {
+                that.detach(that.elements[i]);
+            }
+
+        }
+
+    }
+
+};
+
+StickyKitInit.prototype.attach = function(element) {
+
+    var that = this;
+
+    if(element.data.stickyDetachAt) {
+
+        var $window = $(window);
+
+        //
+        // Attach if window width is larger
+        //
+        if($window.width() > element.data.stickyDetachAt) {
+
+            element.$element.stick_in_parent(element.options);
+            element.attached = true;
+
+        }
+
+    } else {
+
+        element.$element.stick_in_parent(element.options);
+        element.attached = true;
+
+    }
+
+};
+
+StickyKitInit.prototype.detach = function(element) {
+
+    element.$element.trigger("sticky_kit:detach");
+    element.attached = false;
+
 };
 
 module.exports = StickyKitInit;

diff --git a/app/templates/pages/basicpage.html b/app/templates/pages/basicpage.html
index d361c34fca7fa149ef999a2f1a249795c982af71..24d805abbab256e6b47072d86ba1ab02d28f8262 100644 (file)
--- a/app/templates/pages/basicpage.html
+++ b/app/templates/pages/basicpage.html
@@ -28,7 +28,7 @@
 {% block main %}
 
     <div class="row">
-        <div class="col-lg-8 col-md-push-2">
+        <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
             {% editable page.basicpage.title %}
                 <h1 class="dotted">{{ page.basicpage.title }}</h1>
             {% endeditable %}
@@ -36,10 +36,10 @@
     </div>
 
     <div class="row">
-        <div class="col-lg-2">
+        <div class="col-sm-3 col-lg-2">
             {% page_menu "pages/menus/current_tree.html" %}
         </div>
-        <div class="col-lg-8">
+        <div class="col-sm-9 col-lg-8">
             {% editable page.basicpage.content %}
                 {{ page.basicpage.content|richtext_filters|safe }}
             {% endeditable %}

diff --git a/app/templates/pages/menus/current_tree.html b/app/templates/pages/menus/current_tree.html
index b14372567e51e8ab24c8afc332fcc8394003d727..244275c088f624e69113d19e6eeae97a00e6f358 100644 (file)
--- a/app/templates/pages/menus/current_tree.html
+++ b/app/templates/pages/menus/current_tree.html
@@ -6,7 +6,7 @@
         {% for page in page_branch %}
             {% if page.in_menu and page.has_children_in_menu %}
                 {% if page.is_primary and page.is_current_or_ascendant %}
-                <ul class="nav-tree nav-tree--level-{{ branch_level }}" data-sticky data-sticky-parent="row" data-sticky-offset="100">
+                <ul class="nav-tree nav-tree--level-{{ branch_level }}" data-sticky data-sticky-parent="row" data-sticky-offset="100" data-sticky-detach-at="971">
                     <li class="nav-tree__item">
                         <a class="nav-tree__link{% if page.is_current %} active{% endif %}" href="{{ page.get_absolute_url }}">Accueil</a>
                     </li>