Projet

Général

Profil

0001-add-back-top-component-45145.patch

Thomas Jund, 17 août 2020 17:41

Télécharger (7,83 ko)

Voir les différences: 

Subject: [PATCH 1/2] add back-top component (#45145)


 static/includes/_back-top.scss     | 140 +++++++++++++++++++++++++++++
 static/includes/_publik.scss       |   1 +
 static/montpellier/style.scss      |   1 +
 templates/combo/page_template.html |   4 +
 templates/includes/back-top.html   |  38 ++++++++
 templates/theme.html               |   6 +-
 6 files changed, 188 insertions(+), 2 deletions(-)
 create mode 100644 static/includes/_back-top.scss
 create mode 100644 templates/includes/back-top.html
static/includes/_back-top.scss
1 
// Back to top link
2 
$back-top-display: none !default; // `mobile-only || block || inline || none`
3 
$back-top-icon-character: "\f102" !default; // any content CSS property values, default: fontawesome angle-double-up
4 
$back-top-icon-size: 2.5em !default;
5 
$back-top-icon-label-space: .33em;
6 
$back-top-layout-direction: vertical !default; // horizontal || vertical
7 
// layout position
8 
// 	values: `static (options) || fixed (options)`
9 
// 	static options values: `left: length || right: length`
10 
//	fixed options values: one or more of
11 
//		`left: length || right: length || top: length || bottom: length`
12 
//		separated by comma
13 
//	examples: `static (left: 2em)`, `fixed (right: 0, bottom: 20px)`
14 
$back-top-layout-position: [static (right)] !default;
15 

  		




  
  16
  
    
// display options

  		




  
  17
  
    
.back-top {

  		




  
  18
  
    
	@if $back-top-display == none {

  		




  
  19
  
    
		@include sr-only();

  		




  
  20
  
    
	} @else if $back-top-display == mobile-only {

  		




  
  21
  
    
		@extend .mobile-only;

  		




  
  22
  
    
	} @else {

  		




  
  23
  
    
		display: $back-top-display;

  		




  
  24
  
    
	}

  		




  
  25
  
    
}

  		




  
  26
  
    

  		




  
  27
  
    
// Default link styles

  		




  
  28
  
    
.back-top--link {

  		




  
  29
  
    
	display: inline-flex;

  		




  
  30
  
    
	align-items: center;

  		




  
  31
  
    
	// icon

  		




  
  32
  
    
	&::before {

  		




  
  33
  
    
		content: $back-top-icon-character;

  		




  
  34
  
    
		font-family: fontawesome, sans-serif;

  		




  
  35
  
    
		font-size: $back-top-icon-size;

  		




  
  36
  
    
	}

  		




  
  37
  
    
}

  		




  
  38
  
    

  		




  
  39
  
    
//

  		




  
  40
  
    
// Layout options

  		




  
  41
  
    
//

  		




  
  42
  
    

  		




  
  43
  
    
// Layout direction

  		




  
  44
  
    
@if ($back-top-layout-direction == vertical) {

  		




  
  45
  
    
	.back-top--link-label {

  		




  
  46
  
    
		margin-left: $back-top-icon-label-space;

  		




  
  47
  
    
		margin-right: $back-top-icon-label-space;

  		




  
  48
  
    
	}

  		




  
  49
  
    
} @else if ($back-top-layout-direction == horizontal) {

  		




  
  50
  
    
	.back-top--link-label {

  		




  
  51
  
    
		margin-top: $back-top-icon-label-space;

  		




  
  52
  
    
		margin-bottom: $back-top-icon-label-space;

  		




  
  53
  
    
	}

  		




  
  54
  
    
	.back-top--link {

  		




  
  55
  
    
		flex-direction: column;

  		




  
  56
  
    
	}

  		




  
  57
  
    
}

  		




  
  58
  
    

  		




  
  59
  
    
// Layout Position

  		




  
  60
  
    
// refere to CSS position property (static or fixed)

  		




  
  61
  
    
$back-top-layout-position-type: nth($back-top-layout-position, 1);

  		




  
  62
  
    
$back-top-layout-position-datas: false;

  		




  
  63
  
    
@if (length($back-top-layout-position) > 1) {

  		




  
  64
  
    
	$back-top-layout-position-datas: nth($back-top-layout-position, 2);

  		




  
  65
  
    
}

  		




  
  66
  
    

  		




  
  67
  
    
.back-top--link {

  		




  
  68
  
    
	position: $back-top-layout-position-type;

  		




  
  69
  
    
	z-index: 1000;

  		




  
  70
  
    
}

  		




  
  71
  
    

  		




  
  72
  
    
@if ($back-top-layout-position-type == static) {

  		




  
  73
  
    
	.back-top {

  		




  
  74
  
    
		@if (type-of($back-top-layout-position-datas) == map) {

  		




  
  75
  
    
			@each $text-align, $padding-value in $back-top-layout-position-datas {

  		




  
  76
  
    
				text-align: $text-align;

  		




  
  77
  
    
				padding-#{$text-align}: $padding-value;

  		




  
  78
  
    
			}

  		




  
  79
  
    
		} @else if {

  		




  
  80
  
    
			text-align: $back-top-layout-position-datas;

  		




  
  81
  
    
		}

  		




  
  82
  
    
	}

  		




  
  83
  
    
}

  		




  
  84
  
    

  		




  
  85
  
    
@if ($back-top-layout-position-type == fixed) {

  		




  
  86
  
    
	.back-top--link {

  		




  
  87
  
    
		@if (type-of($back-top-layout-position-datas) == map) {

  		




  
  88
  
    
			@each $property, $value in $back-top-layout-position-datas {

  		




  
  89
  
    
				#{$property}: $value;

  		




  
  90
  
    
			}

  		




  
  91
  
    
		} @else if (

  		




  
  92
  
    
			type-of($back-top-layout-position-datas) == list or

  		




  
  93
  
    
			type-of($back-top-layout-position-datas) == string

  		




  
  94
  
    
		) {

  		




  
  95
  
    
			@each $property in $back-top-layout-position-datas {

  		




  
  96
  
    
				#{$property}: 0;

  		




  
  97
  
    
			}

  		




  
  98
  
    
		}

  		




  
  99
  
    
	}

  		




  
  100
  
    
}

  		




  
  101
  
    

  		




  
  102
  
    
// Show/hide animation

  		




  
  103
  
    
// $back-top-layout-position-type == fixed, JS add .back-top-scroll-Y class

  		




  
  104
  
    
// and a .[below | above]-scroll-position to component (when scroll goes a custom limit)

  		




  
  105
  
    
@keyframes back-top-show {

  		




  
  106
  
    
	0% {

  		




  
  107
  
    
		opacity: 0;

  		




  
  108
  
    
		z-index: -1;

  		




  
  109
  
    
	}

  		




  
  110
  
    
	1% {

  		




  
  111
  
    
		z-index: 1000;

  		




  
  112
  
    
	}

  		




  
  113
  
    
	100% {

  		




  
  114
  
    
		opacity: 1;

  		




  
  115
  
    
		z-index: 1000;

  		




  
  116
  
    
	}

  		




  
  117
  
    
}

  		




  
  118
  
    
@keyframes back-top-hide {

  		




  
  119
  
    
	0% {

  		




  
  120
  
    
		opacity: 1;

  		




  
  121
  
    
		z-index: 1000;

  		




  
  122
  
    
	}

  		




  
  123
  
    
	99% {

  		




  
  124
  
    
		z-index: -1;

  		




  
  125
  
    
	}

  		




  
  126
  
    
	100% {

  		




  
  127
  
    
		opacity: 0;

  		




  
  128
  
    
		z-index: -1;

  		




  
  129
  
    
	}

  		




  
  130
  
    
}

  		




  
  131
  
    
.back-top-scrollY {

  		




  
  132
  
    
	animation-fill-mode: both;

  		




  
  133
  
    
	animation-duration: 600ms;

  		




  
  134
  
    
	&.below-scroll-limit  {

  		




  
  135
  
    
		animation-name: back-top-show;

  		




  
  136
  
    
	}

  		




  
  137
  
    
	&.above-scroll-limit {

  		




  
  138
  
    
		animation-name: back-top-hide;

  		




  
  139
  
    
	}

  		




  
  140
  
    
}

  		












  

    
      static/includes/_publik.scss
    
  





  12
  12
  
    
@import 'misc';

  		




  13
  13
  
    
@import 'a11y';

  		




  14
  14
  
    
@import 'carrousel';

  		




  
  15
  
    
@import 'back-top';

  		




  15
  16
  
    
@import 'library';

  		












  

    
      static/montpellier/style.scss
    
  





  13
  13
  
    
@import '../includes/misc';

  		




  14
  14
  
    
@import '../includes/a11y';

  		




  15
  15
  
    
@import '../includes/transitions/_ball_running_dots';

  		




  
  16
  
    
@import '../includes/back-top';

  		




  16
  17
  
    
@import 'custom';

  		












  

    
      templates/combo/page_template.html
    
  





  143
  143
  
    
{% end_skeleton_extra_placeholder %}

  		




  144
  144
  
    
{% endblock %}

  		




  145
  145
  
    

  		




  
  146
  
    
{% block back-top %}

  		




  
  147
  
    
  {% include 'includes/back-top.html' %}

  		




  
  148
  
    
{% endblock %}

  		




  
  149
  
    

  		




  146
  150
  
    
{% block body-bottom %}

  		




  147
  151
  
    
{% skeleton_extra_placeholder service-worker %}

  		




  148
  152
  
    
{% if page.pk %}  {# limit this to concrete pages on combo (ex: not 404) #}

  		












  

    
      templates/includes/back-top.html
    
  





  
  1
  
    
<div class="back-top">

  		




  
  2
  
    
  <a class="back-top--link" href="#nav-skip" accesskey="t" aria-label="Retour en haut de page">

  		




  
  3
  
    
    <span class="back-top--link-label">

  		




  
  4
  
    
      {% block back-top-label %}

  		




  
  5
  
    
        Retour

  		




  
  6
  
    
      {% endblock %}

  		




  
  7
  
    
    </span>

  		




  
  8
  
    
  </a>

  		




  
  9
  
    
</div>

  		




  
  10
  
    

  		




  
  11
  
    
{% block back-top-script %}

  		




  
  12
  
    
<script>

  		




  
  13
  
    
  var back_top_scrollY;

  		




  
  14
  
    
  $(function(){

  		




  
  15
  
    
    var back_top_link = document.querySelector('.back-top--link');

  		




  
  16
  
    
    var is_fixed = getComputedStyle(back_top_link, null).getPropertyValue("position") === "fixed";

  		




  
  17
  
    
    console.log(is_fixed);

  		




  
  18
  
    
    if (is_fixed) {

  		




  
  19
  
    
      back_top_link.classList.add('back-top-scrollY');

  		




  
  20
  
    
      back_top_scroll_Y = new ComboScrollY({

  		




  
  21
  
    
        limit: {% block back-top-scrollY-limit %}200{% endblock %},

  		




  
  22
  
    
        below: function(){

  		




  
  23
  
    
          {% block back-top-scrollY-below-callback %}

  		




  
  24
  
    
          back_top_link.classList.add('below-scroll-limit');

  		




  
  25
  
    
          back_top_link.classList.remove('above-scroll-limit');

  		




  
  26
  
    
          {% endblock %}

  		




  
  27
  
    
        },

  		




  
  28
  
    
        above: function(){

  		




  
  29
  
    
          {% block back-top-scrollY-above-callback %}

  		




  
  30
  
    
          back_top_link.classList.add('above-scroll-limit');

  		




  
  31
  
    
          back_top_link.classList.remove('below-scroll-limit');

  		




  
  32
  
    
          {% endblock %}

  		




  
  33
  
    
        }

  		




  
  34
  
    
      });

  		




  
  35
  
    
    }

  		




  
  36
  
    
  });

  		




  
  37
  
    
</script>

  		




  
  38
  
    
{% endblock %}

  		












  

    
      templates/theme.html
    
  





  146
  146
  
    
      {% block footer %}

  		




  147
  147
  
    
      <p id="legal">Copyright © 2005-2016 Entr'ouvert</p>

  		




  148
  148
  
    
      {% endblock %}

  		




  149
  
  
    
      {% block footer-bottom %}{% endblock %}

  		




  
  149
  
    
      {% block footer-bottom %}

  		




  
  150
  
    
          {% block back-top %}

  		




  
  151
  
    
          {% endblock %}

  		




  
  152
  
    
      {% endblock %}

  		




  150
  153
  
    
    </div>

  		




  151
  154
  
    
    </div>

  		




  152
  155
  
    
    {% block footer-post %}{% endblock %}

  		




  153
  156
  
    
   </footer>

  		




  154
  157
  
    
   </div> <!-- #page -->

  		




  155
  158
  
    
   {% if environment_label %}<span id="environment-label">{{ environment_label }}</span>{% endif %}

  		




  156
  
  
    
   <a style="display: none" href="#" accesskey="t">Retour en haut de page</a>

  		




  157
  159
  
    
   {% include "includes/tracking.html" %}

  		




  158
  160
  
    
   {% block body-bottom %}

  		




  159
  161
  
    
   {% endblock %}

  		




  160
  
  
    
-