Merge branch 'dev' into yarn

Gulpfile.js

@@ -126,8 +126,7 @@ function jsPackages() {
 function js() {
   return gulp.src([
     // Used by other scripts, must be first
-    'assets/js/modal.js',
-    'assets/js/tooltips.js',
+    'assets/js/common/*.js',
     // All the scripts
     'assets/js/*.js'
   ], { base: '.', sourcemaps: true })

assets/js/common/ajax.js

@@ -0,0 +1,55 @@
+/**
+ * ZDS ajax library
+ * This library was created to reduce code duplication when we use ajax and ease up the JQuery removal
+ * We use fetch API
+ */
+class ZDSAjax {
+  constructor() {
+    this._crsf = document.querySelector("input[name='csrfmiddlewaretoken']").getAttribute('value')
+  }
+
+  get(url, dataCallback, errorCallback = (error) => console.error(error)) {
+    const headers = new Headers()
+    headers.append('Accept', 'application/json')
+    headers.append('X-CSRFToken', this._crsf)
+    headers.append('X-REQUESTED-WITH', 'XMLHttpRequest')
+    const init = {
+      method: 'GET',
+      headers: headers,
+      mode: 'cors',
+      cache: 'default'
+    }
+    fetch(new Request(url, init), init).then(response => {
+      if (response.ok) {
+        return Promise.resolve(response.json())
+      }
+      throw response.error()
+    }).then(dataCallback).catch(errorCallback)
+  }
+
+  put(url, jsonOrFormData, dataCallback, errorCallback) {
+    return this._sendRequestWithData(jsonOrFormData, 'PUT', url, dataCallback, errorCallback)
+  }
+
+  post(url, jsonOrFormData, dataCallback, errorCallback) {
+    return this._sendRequestWithData(jsonOrFormData, 'POST', url, dataCallback, errorCallback)
+  }
+
+  _sendRequestWithData(jsonOrFormData, method, url, dataCallback, errorCallback) {
+    const headers = new Headers()
+    headers.append('Accept', 'application/json')
+    headers.append('X-CSRFToken', this._crsf)
+    headers.append('X-REQUESTED-WITH', 'XMLHttpRequest')
+    const init = {
+      method: method,
+      headers: headers,
+      mode: 'cors',
+      cache: 'default',
+      body: jsonOrFormData
+    }
+    return fetch(url, init).then(response => {
+      return Promise.resolve(response.json())
+    }).then(dataCallback).catch(errorCallback)
+  }
+}
+window.ajax = new ZDSAjax()

assets/js/content-helps.js

@@ -1,37 +1,34 @@
-(function($) {
-  function changeHelpButtonState($helpButton, state) {
-    const helpButtonClasses = $helpButton[0].classList
+(function(ajax) {
+  function changeHelpButtonState(helpButton, state) {
+    const helpButtonClasses = helpButton.classList
 
     helpButtonClasses.toggle('selected', state)
     helpButtonClasses.toggle('ico-after', state)
     helpButtonClasses.toggle('tick', state)
     helpButtonClasses.toggle('green', state)
 
-    $helpButton.attr('data-activated', state.toString())
-    $helpButton.blur()
+    helpButton.setAttribute('data-activated', state.toString())
 
-    $helpButton.parent().find('input[name="activated"]').val((!state).toString())
+    helpButton.parentNode.querySelector('input[name="activated"]')
+      .setAttribute('value', (!state).toString())
   }
 
-  $('.help-toggle').click((e) => {
-    e.preventDefault()
+  document.querySelectorAll('.help-toggle')
+    .forEach((element) => element.addEventListener('click', e => {
+      const current = e.target
 
-    const $current = $(e.target)
-    const $form = $current.parent()
-    const data = $form.serialize()
-    const newActivation = $current.attr('data-activated') !== 'true'
+      const form = current.parentElement
+      const data = new FormData(form)
+      const newActivation = current.getAttribute('data-activated') !== 'true'
+      // Change status before request for instant feeling.
+      // Will be changed back on error.
+      changeHelpButtonState(current, newActivation)
+      e.preventDefault()
+      e.stopPropagation()
 
-    // Change status before request for instant feeling.
-    // Will be changed back on error.
-    // This update the form so serialize must be called before/
-    changeHelpButtonState($current, newActivation)
-
-    $.ajax($form.attr('action'), {
-      method: 'POST',
-      data,
-      success: resultData => changeHelpButtonState($current,
-        resultData.help_wanted),
-      error: () => changeHelpButtonState($current, !newActivation)
-    })
-  })
-})(jQuery)
+      ajax.post(form.getAttribute('action'), data,
+        (result) => changeHelpButtonState(current, result.help_wanted),
+        () => changeHelpButtonState(current, !newActivation)
+      )
+    }))
+})(window.ajax)

assets/scss/components/_editor-new.scss

@@ -8,23 +8,31 @@
 
         .editor-toolbar {
             border: 0;
+            background-color: $color-body-background;
 
+            /* Let the toolbar stay on screen when writing long texts */
+            /* Disabled on mobile or when the editor is fullscreen */
             @include tablet {
-                position: sticky;
-                top: 0;
-                z-index: 2;
-                background-color: $color-body-background;
-                border-bottom: $length-1 solid $grey-200;
-
-                @at-root body.has-top-banner & {
-                    top: $length-24;
-                }
+                &:not(.fullscreen) {
+                    position: sticky;
+                    z-index: 2;
+
+                    top: 0;
+                    @at-root body.has-top-banner & {
+                        top: $length-24;
+                    }
 
-                ~ .CodeMirror {
-                    border-top: 0;
+                    border-bottom: $length-1 solid $grey-200;
+                    ~ .CodeMirror {
+                        border-top: 0;
+                    }
                 }
             }
 
+            &.fullscreen {
+                z-index: 22; /* needs to be above #very-top-banner (_very-top-banner.scss) */
+            }
+
             &.disabled-for-textarea-mode {
                 button {
                     &.disable-for-textarea-mode {

assets/scss/components/_very-top-banner.scss

@@ -20,7 +20,7 @@
     border-color: var(--very-top-banner-border-color);
     color: var(--very-top-banner-color);
 
-    z-index: 21;
+    z-index: 21; /* needs to be below .editor-toolbar (_editor-new.scss) */
 
     span {
         flex: 12;

doc/source/front-end/helpers-js.rst

@@ -32,3 +32,31 @@ Cette fonction retourne un objet ``Karma`` qui permet de manipuler et mettre à
 ``$("#p42").karma().vote("like")`` permet par exemple d'ajouter (ou de l'enlever si l'utilisateur a déjà voté) un +1 sur le post n°42 sur la page.
 
 L'API complète de l'objet ``Karma`` est documentée dans le fichier ``assets/js/karma.js``.
+
+
+``window.ajax``
+===============
+
+Afin de faciliter la migration du code JS du site pour ne plus utiliser JQuery,
+nous avons créé un helper ajax qui vous permettra de manipuler rapidement les
+requêtes vers les fonctionnalités du site qui prennent un formulaire ou du json en entrée
+et retournent un json en réponse.
+
+Cet objet est défini dans  ``assets/js/common/ajax.js``. Il vous permet d'appeler nativement
+les méthodes get/post/put et sera vu par django comme un appel ajax.
+Vous pourrez à chaque fois définir une méthode à appeler en cas de succès de la **communication**
+(c'est-à-dire si la requête a pu être envoyée au serveur et obtenir un retour au format json, peu importe son code de retour)
+et en cas d'erreur.
+
+La première méthode prend en argument un objet issu de la désérialisation du JSON.
+
+Exemple: 
+
+.. sourcecode:: javascript
+
+	const form = document.querySelector('.monFormulaire')
+    const data = new FormData(form)
+    ajax.post(form.getAttribute('action'), data,
+      result) => maFonctionEnCasDeSucces(result.une_valeur_retournee_par_le_serveur),
+      () => maFonctionEnCasDEchec()
+    )

templates/pages/about.html

@@ -26,8 +26,8 @@ <h1>{% trans "À propos" %}</h1>
 {% block content %}
     {% set app.site.literal_name as site_name %}
     <p>
-        {% blocktrans with repository=app.site.repository.url %}
-            Si vous vous intéressez à tout cela, vous devriez songer à <a href="{{ repository }}">contribuer au développement du site</a> !
+        {% blocktrans %}
+            Si vous vous intéressez à tout cela, vous devriez songer à <a href="{{ default_repository_url }}">contribuer au développement du site</a> !
         {% endblocktrans %}
     </p>
 

zds/pages/views.py

@@ -17,6 +17,7 @@
 from zds.pages.models import GroupContact
 from zds.searchv2.forms import SearchForm
 from zds.tutorialv2.models.database import PublishableContent, PublishedContent
+from zds.utils.context_processor import get_repository_url
 from zds.utils.models import Alert, CommentEdit, Comment
 
 
@@ -58,7 +59,15 @@ def index(request):
 
 def about(request):
     """Display many informations about the website."""
-    return render(request, "pages/about.html")
+    return render(
+        request,
+        "pages/about.html",
+        {
+            "default_repository_url": get_repository_url(
+                settings.ZDS_APP["github_projects"]["default_repository"], "base_url"
+            ),
+        },
+    )
 
 
 def association(request):

zmd/package.json

@@ -9,7 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "zmarkdown": "10.1.1"
+    "zmarkdown": "10.1.2"
   },
   "engines": {
     "node": ">=8.0.0"