From: Jérémy Fabre <Jeremy@iMac-de-Jeremy.local>
Date: Mon, 26 Sep 2016 16:30:10 +0000 (+0200)
Subject: Menu vous êtes
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=6c0582ec0c890a0fa4bfd2540b714ba7482f4596;p=mezzo.git

Menu vous êtes
---

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index 9c5f49b0..37b62677 100644
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -2,6 +2,7 @@
 // Require all the modules
 //
 var LangSelector = require('./modules/lang-selector');
+var RoleSelector = require('./modules/role-selector');
 var NavHeader = require('./modules/nav-header');
 var OpenButton = require('./modules/open-button');
 var CloseButton = require('./modules/close-button');
@@ -19,6 +20,7 @@ var Audio = require('./modules/audio');
 // Init all the modules
 //
 window[LangSelector] = new LangSelector();
+window[RoleSelector] = new RoleSelector();
 window[NavHeader] = new NavHeader();
 window[OpenButton] = new OpenButton();
 window[CloseButton] = new CloseButton();
diff --git a/app/static/src/js/modules/role-selector.js b/app/static/src/js/modules/role-selector.js
new file mode 100644
index 00000000..ba3af956
--- /dev/null
+++ b/app/static/src/js/modules/role-selector.js
@@ -0,0 +1,55 @@
+var RoleSelector = function() {
+
+    this.$element = null;
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+RoleSelector.prototype.init = function() {
+
+    var that = this;
+
+    that.$element = $('.role-switcher');
+
+    console.log('init la');
+
+    console.log(that.$element.find('li:first-child a').text());
+    that.$element.find('li:first-child a').click(function(e) {
+
+        e.preventDefault();
+
+        that.$element.toggleClass('open');
+
+        if(that.$element.hasClass('open')) {
+
+            that.$element.one('mouseleave', function() {
+                that.$element.removeClass('open');
+            })
+
+        }
+
+        return false;
+
+    });
+
+    that.$element.find('li:not(:first-child) a').click(function(e) {
+
+        e.preventDefault();
+        that.changeUrl($(this).attr('data-url'));
+        return false;
+
+    });
+
+};
+
+RoleSelector.prototype.changeUrl = function(lang) {
+
+    window.location.href = lang;
+
+}
+
+module.exports = RoleSelector;
diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index cefe9f5e..ed2511ba 100755
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -25,6 +25,7 @@
 
 // Specific modules
 @import 'lang-switcher';
+@import 'role-switcher';
 @import 'search';
 @import 'pattern';
 @import 'tag';
diff --git a/app/static/src/sass/modules/_role-switcher.scss b/app/static/src/sass/modules/_role-switcher.scss
new file mode 100644
index 00000000..2247ea67
--- /dev/null
+++ b/app/static/src/sass/modules/_role-switcher.scss
@@ -0,0 +1,100 @@
+$module: ".role-switcher";
+
+#{$module} {
+
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    @include padding-right(.5);
+
+    position: relative;
+    z-index: 2;
+
+    &__item {
+
+        @include font-size(m);
+        @include line-height($header-pre-height);
+        @include typeface(sans-serif);
+
+        @include padding(0 .5);
+        width: 120px;
+        margin-left: -30px;
+        position: absolute;
+
+        display: none;
+
+        >a {
+            color: white;
+        }
+
+        &.active {
+            display: block;
+        }
+
+        &:first-child {
+            margin-left: 0px;
+            width: auto;
+            position: static;
+            @include padding(0);
+
+            &:after {
+                display: block;
+                content: '\f107';
+                color: white;
+                position: absolute;
+                top: 2px;
+                right: -13px;
+
+                font-family: FontAwesome;
+                font-size: 0.8em;
+
+                @include line-height($header-pre-height);
+                @include margin-right(.5);
+                @include transition(all 0.2s ease-in-out);
+            }
+        }
+
+        &:nth-child(2) {
+            top: $header-pre-height;
+        }
+        &:nth-child(3) {
+            top: $header-pre-height*2;
+        }
+        &:nth-child(4) {
+            top: $header-pre-height*3;
+        }
+        &:nth-child(5) {
+            top: $header-pre-height*4;
+        }
+        &:nth-child(6) {
+            top: $header-pre-height*5;
+        }
+        &:nth-child(7) {
+            top: $header-pre-height*6;
+        }
+        &:nth-child(8) {
+            top: $header-pre-height*7;
+        }
+
+    }
+
+    &.open {
+
+        #{$module}__item {
+
+            display: block;
+            background: $color-black;
+
+            &:first-child {
+                &:after {
+                    @include transform(rotate(180deg));
+                }
+            }
+
+        }
+
+    }
+
+
+
+}
diff --git a/app/templates/pages/menus/action.html b/app/templates/pages/menus/action.html
index edc571e8..d9571e6a 100644
--- a/app/templates/pages/menus/action.html
+++ b/app/templates/pages/menus/action.html
@@ -18,8 +18,10 @@
         {% endif %}
         {% if page.is_primary %}
             {% if forloop.last %}
-            {% page_menu "pages/menus/vous_etes.html" %}
-            </ul>
+                <li class="nav-actions__item">
+                    {% page_menu "pages/menus/vous_etes.html" %}
+                </li>
+                </ul>
             {% endif %}
         {% endif %}
     {% endfor %}
diff --git a/app/templates/pages/menus/vous_etes.html b/app/templates/pages/menus/vous_etes.html
index 6551d9bf..b9f5a902 100644
--- a/app/templates/pages/menus/vous_etes.html
+++ b/app/templates/pages/menus/vous_etes.html
@@ -1,6 +1,8 @@
-{% load pages_tags i18n %}
+{% load pages_tags mezzanine_tags i18n %}
+
 {% if page_branch_in_menu %}
-    <select>
+    {% nevercache %}
+    <select style="display:none;">
         <option value="">{% trans "You are" %}</option>
         {% for page in page_branch %}
             {% if page.in_menu %}
@@ -8,4 +10,17 @@
             {% endif %}
         {% endfor %}
     </select>
+    <ul class="role-switcher">
+        <li class="role-switcher__item active">
+            <a href="#">{% trans "You are" %}</a>
+        </li>
+        {% for page in page_branch %}
+            {% if page.in_menu %}
+                <li class="role-switcher__item">
+                    <a href="#" data-url="{{ page.get_absolute_url }}">{{ page.title }}</a>
+                </li>
+            {% endif %}
+        {% endfor %}
+    </ul>
+    {% endnevercache %}
 {% endif %}