jekyll-theme-noesya 1.0.7 → 1.0.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4bba107870a975179f0bf2f5e11a9e383456686424bdd2beead5b05226d348aa
-  data.tar.gz: e21a2ad13e13eeca5e1106a8e0c159780c83f0a20b4437ccccd5a3ff5ab95923
+  metadata.gz: d179bf5ee168ad5034116eca3f81c39efb5fb28a3e2b6cf67d27524f7430d247
+  data.tar.gz: 9912412822b88d371e1e40f5c0474433e613ad7df235aa14ffac338d95e173eb
 SHA512:
-  metadata.gz: 6bf51a77bca8c106d4c8318b3a80b19f990700011b6922860a353bce8270c4d81294ad1d754c2053777cc5c36cde0ca70c4dcee4ef52c38cbd9023afc3400fd8
-  data.tar.gz: d4536e37ca9b0009601431374d911aa8d2299be7624b74704ccc961f9f4ab69f1c2e5dba2fc397f058ec71f7a177cf9608a45a5f472dcea3ca23e7becd644efe
+  metadata.gz: 9061be45e3889749dbc045c5751f3b93cda733982e1b109d86d4bccdbce12705f48b10e921067cb9b35cfd49f3c46357ef95d677e7e94d17d6635cb52d782cf8
+  data.tar.gz: '0867a5260a14801d15f190002a415544834e718c66ff31c3d8e842d27052e8f57ccaefd76a06d14dcae6b4dc0e5155d79e74e101bf37d92d00d682c91ac19da7'

data/README.md

@@ -1,2 +1,12 @@
 ## Gem
 https://rubygems.org/gems/jekyll-theme-noesya
+
+### Options
+```
+options:
+  menu_burger: true # For desktop
+  notes: false # Needed to use notes in sections-with-notes includes
+  paragraphs_index: false # Needed to add index to paragraphs
+  hover_navigation_links: false # Needed to use nav-between-pages
+  no_js: false
+```

data/_includes/header.html

@@ -1,4 +1,4 @@
-<header id="header">
+<header id="header"{% unless site.options.menu_burger %} class="menu_burger_only_mobile"{% endunless %}>
   <a href="/">
     <img src="https://assets.noesya.coop/images/logos/logo-noesya.svg" alt="{{ site.title }}" width="100" height="26">
   </a>

data/_includes/js/hover-navigation-links.js

@@ -0,0 +1,32 @@
+window.hoverLinks = {
+    timeout: null,
+    init: function () {
+        'use strict';
+        var i = 0,
+            links = document.querySelectorAll('[data-link-delay]');
+
+        for (i = 0; i < links.length; i += 1) {
+            this.bind(links[i]);
+        }
+    },
+    bind: function (link) {
+        'use strict';
+        var a = link.querySelector('a'),
+            delay = link.getAttribute('data-link-delay');
+
+        link.addEventListener('mouseenter', function () {
+            this.timeout = setTimeout(this.click.bind(this, a), delay * 1000);
+        }.bind(this));
+
+        link.addEventListener('mouseleave', function () {
+            clearTimeout(this.timeout);
+        }.bind(this));
+    },
+    click: function (element) {
+        'use strict';
+        var event = new MouseEvent('click');
+        element.dispatchEvent(event);
+    }
+};
+
+window.hoverLinks.init();

data/_includes/js/{menu.js → menu-burger.js}

@@ -10,6 +10,7 @@ window.menu = {
 
         setTimeout(function () {
             document.body.classList.remove('is-loading');
+            window.addEventListener('resize', this.resize.bind(this));
         }.bind(this), 100);
     },
     bind: function () {
@@ -37,6 +38,11 @@ window.menu = {
         }
 
         this.y = y;
+    },
+    resize: function () {
+        'use strict';
+        document.documentElement.classList.remove('is-menu-opened');
+        this.dom.classList.remove('is-hidden');
     }
 };
 

data/_includes/js/notes.js

@@ -0,0 +1,188 @@
+window.notes = window.notes || {};
+window.notes.Item = window.notes.Item || {};
+window.notes.manager = window.notes.manager || {};
+
+window.notes.Item = function (dom, previous) {
+    'use strict';
+    this.dom = dom;
+    this.parent = dom.parentNode;
+    this.y = 0;
+    this.previous = previous || null;
+    this.anchor = document.querySelector('a[href="#' + dom.id + '"]');
+    this.isVisible = false;
+    this.verticalOffset = 6;
+    setTimeout(function () {
+        this.dom.classList.add('is-handled');
+    }.bind(this), 1);
+    this.replace();
+    this.ready();
+};
+window.notes.Item.prototype.ready = function () {
+    'use strict';
+    this.anchor.addEventListener('mouseenter', function () {
+        this.dom.classList.add('is-hovered');
+    }.bind(this));
+    this.anchor.addEventListener('mouseleave', function () {
+        this.dom.classList.remove('is-hovered');
+    }.bind(this));
+};
+
+window.notes.Item.prototype.replace = function () {
+    'use strict';
+
+    if (window.notes.manager.isFixed) {
+        this.dom.classList.add('is-fixed');
+        this.dom.style.top = '';
+    } else {
+        this.dom.classList.remove('is-fixed');
+        this.updatePosition();
+    }
+
+    this.updateVisibility();
+};
+
+window.notes.Item.prototype.updateVisibility = function () {
+    'use strict';
+    var anchorTop = this.anchor.getBoundingClientRect().top,
+        offset = window.innerHeight * 0.5;
+
+    this.isVisible = anchorTop > 0 && anchorTop < offset;
+};
+
+window.notes.Item.prototype.updatePosition = function () {
+    'use strict';
+    this.y = this.getTop(this.anchor) - this.getTop(this.parent);
+
+    if (this.previous) {
+        this.preventOverlap();
+    }
+
+    this.preventTitleOverlap();
+
+    this.y += this.verticalOffset;
+
+    this.dom.style.top = this.y + 'px';
+};
+
+window.notes.Item.prototype.preventOverlap = function () {
+    'use strict';
+    var distance = this.previous.bottom() - this.y;
+    this.y = Math.max(this.y, this.y + distance);
+};
+
+window.notes.Item.prototype.preventTitleOverlap = function () {
+    'use strict';
+    var titles = document.querySelectorAll('h2'),
+        i;
+
+    for (i = 0; i < titles.length; i += 1) {
+        this.testTitleOverlap(titles[i]);
+    }
+};
+
+window.notes.Item.prototype.testTitleOverlap = function (title) {
+    'use strict';
+    var top = this.getTop(title) - this.getTop(this.parent),
+        safer = 10,
+        bottom = top + title.offsetHeight,
+        offset = Math.max(bottom - this.y, window.notes.manager.lineHeight);
+
+    if (this.y >= top - safer && this.y <= bottom + safer) {
+        this.y += offset;
+    }
+};
+
+window.notes.Item.prototype.getTop = function (element) {
+    'use strict';
+    return element.getBoundingClientRect().top + window.scrollY;
+};
+
+window.notes.Item.prototype.bottom = function () {
+    'use strict';
+    return this.y + this.dom.offsetHeight;
+};
+
+window.notes.manager = {
+    breakpoint: 768,
+    isFixed: false,
+    pool: [],
+    nearest: null,
+    lineHeight: 45,
+    init: function () {
+        'use strict';
+        var i,
+            elements = document.querySelectorAll('.js-note');
+
+        if (elements.length === 0) {
+            return;
+        }
+
+        this.setMode();
+
+        for (i = 0; i < elements.length; i += 1) {
+            this.generate(elements[i], i);
+        }
+
+        this.resize();
+        this.listen();
+
+        setTimeout(this.resize.bind(this), 100);
+    },
+
+    generate: function (element, i) {
+        'use strict';
+        var previous = this.pool[i - 1] || null;
+        this.pool.push(new window.notes.Item(element, previous));
+    },
+
+    listen: function () {
+        'use strict';
+        window.addEventListener('scroll', this.scroll.bind(this));
+        window.addEventListener('resize', this.resize.bind(this));
+        window.addEventListener('load', this.resize.bind(this));
+        window.addEventListener('DOMContentLoaded', this.resize.bind(this));
+    },
+
+    resize: function () {
+        'use strict';
+        this.lineHeight = getComputedStyle(document.querySelector('section > p')).lineHeight;
+        this.lineHeight = parseInt(this.lineHeight.replace('px', ''), 10);
+        this.setMode();
+        this.update();
+    },
+
+    setMode: function () {
+        'use strict';
+        var isFixed = window.innerWidth < this.breakpoint;
+        this.isFixed = isFixed;
+    },
+
+    scroll: function () {
+        'use strict';
+        var nearest = null,
+            i;
+
+        if (this.isFixed) {
+            this.update();
+        }
+
+        for (i = this.pool.length - 1; i >= 0; i -= 1) {
+            if (this.pool[i].isVisible && (!nearest || !this.isFixed)) {
+                nearest = this.pool[i];
+                nearest.dom.classList.add('is-visible');
+            } else {
+                this.pool[i].dom.classList.remove('is-visible');
+            }
+        }
+    },
+
+    update: function () {
+        'use strict';
+        var i;
+        for (i = 0; i < this.pool.length; i += 1) {
+            this.pool[i].replace();
+        }
+    }
+};
+
+window.notes.manager.init();

data/_includes/js/paragraphs-index.js

@@ -0,0 +1,12 @@
+(function () {
+    'use strict';
+    var paragraphs = document.querySelectorAll('.js-p-index > p'),
+        i,
+        index;
+
+    for (i = 0; i < paragraphs.length; i += 1) {
+        index = document.createElement('small');
+        index.innerText = '§' + (i + 1);
+        paragraphs[i].prepend(index);
+    }
+}());

data/_includes/navigation-between-pages.html

@@ -0,0 +1,18 @@
+{% if page.nav %}
+  <nav>
+    <ul>
+      <li data-link-delay="3">
+        <a href="{{page.nav.previous.url}}">
+          <span>{{page.nav.previous.title}}</span><br>
+          {{- page.nav.previous.text -}}
+        </a>
+      </li>
+      <li  data-link-delay="3">
+        <a href="{{page.nav.next.url}}">
+          <span>{{page.nav.next.title}}</span><br>
+          {{- page.nav.next.text -}}
+        </a>
+      </li>
+    </ul>
+  </nav>
+{% endif %}

data/_includes/note.html

@@ -0,0 +1,15 @@
+
+{% capture index %}
+  {{ note_index }}.
+{% endcapture %}
+
+{% capture note_content %}
+  {{index}} Voir {% if note.url %}<a href="{{ note.url }}" target="_blank" rel="noreferrer">{% endif %}{{ note.title }}{% if note.url %}</a>{% endif %}
+{% endcapture %}
+
+<aside class="js-note" id="note-{{ note_index }}">
+  {% if note.image %}
+    {% picture note "{{ note.image }}" --img alt="{{ note.title }}" title="{{ note.title }}" loading="lazy" %}
+  {% endif %}
+  {{ note_content | markdownify | correct_punctuation }}
+</aside>

data/_includes/sections-with-notes.html

@@ -0,0 +1,16 @@
+<section {% if page.layout == "member" %} class="js-p-index" {% endif %}>
+  {% for section in page.sections %}
+    {% if section.title %}
+      <h2>{{section.title}}</h2>
+    {% endif %}
+    {{section.content | markdownify | correct_punctuation}}
+  {% endfor %}
+
+  {% assign note_index = 0 %}
+    {% for section in page.sections %}
+      {% for note in section.notes %}
+      {% assign note_index = note_index | plus: 1 %}
+      {% include note.html note=note index=note_index %}
+    {% endfor %}
+  {% endfor %}
+</section>

data/_layouts/default.html

@@ -20,6 +20,9 @@
       {{ content }}
     </main>
     {% include footer.html %}
-    <script src="/assets/js/main.js" async defer></script>
+
+    {% unless site.options.no_js %}
+      <script src="/assets/js/main.js" async defer></script>
+    {% endunless %}
   </body>
 </html>

data/_sass/commons/darkmode.sass

@@ -71,22 +71,6 @@
                 &:hover
                     color: $white
 
-    main > nav
-        background-color: $bg-secondary-color-reverse
-        span
-            color: $secondary-reverse
-        li+li::after
-            background: $border-color-reverse
-        @include media-breakpoint-down(md)
-            ul li:first-child
-                border-bottom-color: $border-color-reverse
-        @include media-breakpoint-up(md)
-            .is-menu-opened &
-                background-color: $bg-secondary-color
-            span
-                .is-menu-opened &
-                    color: $secondary
-
     body > footer
         background-color: $white
         color: $primary

data/_sass/commons/header.sass

@@ -1,5 +1,7 @@
 body > header
     @include container
+    align-items: center
+    display: flex
     left: 0
     padding-top: $grid-sm-margin * 2
     position: fixed
@@ -16,12 +18,14 @@ body > header
             margin-left: -2px
     > a
         display: inline-block
+        flex-shrink: 0
         position: relative
         transition: filter .3s ease
         vertical-align: middle
         z-index: 1
         & + em
             display: inline-block
+            flex-shrink: 0
             font-size: px2rem(25)
             margin-left: $grid-gutter
             margin-top: -2px

data/_sass/commons/icon.sass

@@ -1,4 +1,4 @@
-$icons: ("link-blank": "\e900", "link": "\e901", "download": "\e902", "document": "\e903", "ecologique-thin": "\e905", "economique-thin": "\e907", "ethique-thin": "\e908", "juridique-thin": "\e906", "strategique-thin": "\e904", "ecologique": "\e909", "economique": "\e90a", "ethique": "\e90b", "juridique": "\e90c", "strategique": "\e90d")
+$icons: ("link-blank": "\e90a", "link": "\e90b", "download": "\e90c", "document": "\e90d", "ecologique-thin": "\e900", "economique-thin": "\e902", "ethique-thin": "\e904", "juridique-thin": "\e906", "strategique-thin": "\e908", "ecologique": "\e901", "economique": "\e903", "ethique": "\e905", "juridique": "\e907", "strategique": "\e909")
 
 @mixin icon
     -moz-osx-font-smoothing: grayscale

data/_sass/components/menu.sass

@@ -31,6 +31,9 @@
     @include media-breakpoint-up(md)
         right: 35px
         top: 35px
+    @include media-breakpoint-up(lg)
+        .menu_burger_only_mobile &
+            display: none
     i, &::after, &::before
         background: $primary
         content: ''
@@ -38,7 +41,7 @@
         left: 15px
         position: absolute
         transform-origin: center
-        transition: transform 0.38s 0.3s $easeInOutQuad
+        transition: transform 0.28s 0.2s $easeInOutQuad
         width: 20px
     &::after
         transform: translateY(-9px)
@@ -52,7 +55,7 @@
             left: 15px
             position: absolute
             transform-origin: center
-            transition: transform 0.38s $easeInOutQuad
+            transition: transform 0.28s $easeInOutQuad
             width: 20px
         &::after
             transform: rotate(-45deg) scaleX(0)
@@ -60,11 +63,11 @@
             transform: rotate(45deg) scaleX(0)
     &:hover
         &::after
-            animation: 0.5s 0.2s menu-hovered $easeInOutQuad
+            animation: 0.3s 0.14s menu-hovered $easeInOutQuad
         i
-            animation: 0.5s 0.1s menu-hovered $easeInOutQuad
+            animation: 0.3s 0.07s menu-hovered $easeInOutQuad
         &::before
-            animation: 0.5s 0s menu-hovered $easeInOutQuad
+            animation: 0.3s 0s menu-hovered $easeInOutQuad
 
 .menu
     backface-visibility: hidden
@@ -84,6 +87,33 @@
         width: calc(50vw + min(1040px, calc(100vw - 390px)) / 2)
     @include media-breakpoint-up(lg)
         width: calc(50vw + min(1010px, calc((100vw - 100px) * (10/12) - 110px)) / 2)
+        .menu_burger_only_mobile &
+            background: transparent
+            margin-left: auto
+            padding-top: 0
+            position: static
+            transform: none
+            transition: none
+            width: auto
+            ul
+                display: flex
+                margin: 0
+                &:hover
+                    a
+                        color: $primary
+            li
+                font-size: px2rem(25)
+                margin-bottom: 0
+                &:not(:first-child)
+                    margin-left: $grid-gutter
+            a
+                &:hover
+                    text-decoration: underline
+    @include media-breakpoint-up(lg)
+        .menu_burger_only_mobile &
+            li:not(:first-child)
+                margin-left: $grid-gutter * 2
+
     ul
         height: 100%
         margin: 0 $grid-sm-margin * 2
@@ -114,14 +144,14 @@
         span
             &::after
                 transform: rotate(-45deg) scaleX(1)
-                transition-delay: 0.25s
+                transition-delay: 0.15s
             &::before
                 transform: rotate(45deg) scaleX(1)
-                transition-delay: 0.35s
+                transition-delay: 0.25s
 
         &::before
             transform: translateY(9px) scaleX(0)
-            transition-delay: 0.2s
+            transition-delay: 0.15s
         i
             transform: scaleX(0)
             transition-delay: 0s

data/_sass/components/nav-between.sass

@@ -0,0 +1,79 @@
+main > nav
+    background-color: $bg-secondary-color
+    overflow-x: hidden
+    ul
+        li
+            @include media-breakpoint-down(md)
+                @include container
+                &:first-child
+                    border-bottom: 1px solid $border-color
+    a
+        @extend h2
+        display: block
+        font-family: $font-family-sans-serif
+        margin-bottom: 0
+        padding-bottom: $grid-gutter * 2
+        padding-top: $grid-gutter * 2
+        text-decoration: none
+    span
+        color: $secondary-on-gray
+
+    @include media-breakpoint-up(md)
+        transition: background .3s ease
+        .is-menu-opened &
+            background-color: $bg-secondary-color-reverse
+        ul
+            @include container
+            @include grid(2)
+            > li
+                border-bottom: none
+        a
+            padding-bottom: $grid-gutter * 4
+            padding-top: $grid-gutter * 4
+            position: relative
+            z-index: 1
+        span
+            transition: color .3s ease
+            .is-menu-opened &
+                color: $secondary-reverse
+        li
+            position: relative
+            &::before
+                background: $white
+                content: ''
+                cursor: pointer
+                height: 100%
+                left: calc((max(50vw, #{$grid-width/2}) - #{$grid-width / 2 - $grid-gutter * 2}) * -1)
+                mix-blend-mode: exclusion
+                position: absolute
+                top: 0
+                transition: width 0.35s $easeInOutQuad
+                width: 0
+                z-index: 2
+            &:hover
+                &::before
+                    transition: width 3s $easeInOutQuad
+                    width: 50vw
+        li + li
+            @include border-line
+                left: -#{$grid-gutter}
+            padding-left: $grid-gutter
+            &::before
+                left: -$grid-gutter
+                right: auto
+
+    @media (prefers-color-scheme: dark)
+        background-color: $bg-secondary-color-reverse
+        span
+            color: $secondary-reverse
+        li+li::after
+            background: $border-color-reverse
+        @include media-breakpoint-down(md)
+            ul li:first-child
+                border-bottom-color: $border-color-reverse
+        @include media-breakpoint-up(md)
+            .is-menu-opened &
+                background-color: $bg-secondary-color
+            span
+                .is-menu-opened &
+                    color: $secondary

data/_sass/components/notes.sass

@@ -0,0 +1,61 @@
+aside
+    grid-column: 5/13
+    padding-bottom: $grid-gutter
+    &:hover
+        z-index: 2
+    img
+        border: 1px solid rgba(0, 0, 0, 0.05)
+        display: block
+        margin: $grid-gutter/2 0
+        max-width: 124px
+    p
+        margin-bottom: 0
+    &.is-fixed
+        background: $bg-secondary-color
+        bottom: 0
+        left: 0
+        padding: 5px 15px 10px 10px
+        padding-bottom: env(safe-area-inset-bottom, 10px)
+        position: fixed
+        transform: translateY(100%)
+        width: 100%
+        z-index: 3
+        &.is-handled
+            transition: 0.25s $easeInOutQuad
+            img
+                transition: 0.33s $easeInOutQuad
+
+        &.is-visible
+            &, img
+                transform: translateY(0)
+        img
+            bottom: 12px
+            margin: 0
+            max-width: 100px
+            position: absolute
+            right: 12px
+            transform: translateY(100%)
+        picture + p
+            padding-right: 120px
+
+    &.is-handled:not(.is-fixed)
+        display: flex
+        flex-direction: column-reverse
+        grid-column: 1/5
+        padding-bottom: 0
+        position: absolute
+        img
+            filter: grayscale(1)
+            margin-bottom: $grid-gutter/2
+            opacity: 0.9
+            transition: 0.33s $easeInOutQuad
+        &:hover, &.is-hovered
+            img
+                filter: grayscale(0)
+                opacity: 1
+    &:hover, &.is-hovered
+        a
+            text-decoration-color: black
+        img
+            filter: grayscale(0)
+            opacity: 1

data/assets/js/main.js

@@ -2,4 +2,16 @@
 layout:
 ---
 
-{% include js/menu.js %}
+{% include js/menu-burger.js %}
+
+{%- if site.options.notes -%}
+    {% include js/notes.js %}
+{%- endif -%}
+
+{%- if site.options.paragraphs_index -%}
+    {% include js/paragraphs-index.js %}
+{%- endif -%}
+
+{%- if site.options.hover_navigation_links -%}
+    {% include js/hover-navigation-links.js %}
+{%- endif -%}

metadata

@@ -1,15 +1,16 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-noesya
 version: !ruby/object:Gem::Version
-  version: 1.0.7
+  version: 1.0.13
 platform: ruby
 authors:
 - Sébastien Moulène
 - Arnaud Levy
+- Alexis BENOIT
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-11-03 00:00:00.000000000 Z
+date: 2021-11-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -85,6 +86,7 @@ description:
 email:
 - sebousan@gmail.com
 - contact@arnaudlevy.com
+- alexis.benoit@noesya.coop
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -93,11 +95,17 @@ files:
 - README.md
 - _includes/footer.html
 - _includes/header.html
-- _includes/js/menu.js
+- _includes/js/hover-navigation-links.js
+- _includes/js/menu-burger.js
+- _includes/js/notes.js
+- _includes/js/paragraphs-index.js
 - _includes/nav/contacts.html
 - _includes/nav/ecosystem.html
 - _includes/nav/legal.html
 - _includes/nav/primary.html
+- _includes/navigation-between-pages.html
+- _includes/note.html
+- _includes/sections-with-notes.html
 - _includes/seo.html
 - _layouts/default.html
 - _layouts/page.html
@@ -112,6 +120,8 @@ files:
 - _sass/commons/typography.sass
 - _sass/components/header.sass
 - _sass/components/menu.sass
+- _sass/components/nav-between.sass
+- _sass/components/notes.sass
 - _sass/layouts/legal.sass
 - _sass/layouts/page.sass
 - _sass/main.sass
@@ -146,7 +156,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.6
+rubygems_version: 3.1.4
 signing_key:
 specification_version: 4
 summary: Noesya theme for Jekyll.