Sync version

template/README.md

@@ -87,7 +87,7 @@ Custom user model, forms and admin.
 
 Modern ECMAScript and SASS build pipeline with Rollup.
 
-Add `components/index.js` and `components/my-component` Web Compoenent sample. Result Javascript and CSS compiled to the configured Django `static/` directory
+Add `components/index.js` and `components/my-component` Web Component sample. Result Javascript and CSS compiled to the configured Django `static/` directory
 
 ```
 $ npm run build # dev and minified build

tox.ini

@@ -23,6 +23,7 @@ deps =
   django-reversion==3.0.9
   django-polymodels==1.6.0
   django-allauth==0.44.0
+  dash==2.0.0
 
   # developement
   django-environ==0.4.5
@@ -39,6 +40,7 @@ deps =
   django_sendmail_backend==0.1.2
   selenium==3.141.0
   html5lib==1.1
+  numpy==1.21.2
 
   # packaging
   pyc-wheel==1.2.4

viewflow/components/vf-card/index.js

@@ -1,7 +1,6 @@
 /* eslint-env browser */
 import './index.scss';
 
-import Turbolinks from 'turbolinks';
 import {menu} from 'material-components-web';
 
 export class VCardMenu extends HTMLElement {
@@ -29,8 +28,8 @@ export class VCardMenu extends HTMLElement {
     event.preventDefault();
     const itemData = event.detail.item.dataset;
     if (itemData.cardMenuHref) {
-      if (Turbolinks) {
-        Turbolinks.visit(itemData.cardMenuHref);
+      if (window.Turbo) {
+        window.Turbo.visit(itemData.cardMenuHref);
       } else {
         window.location = itemData.cardMenuHref;
       }

viewflow/components/vf-page-profile/index.js

@@ -1,7 +1,5 @@
 /* eslint-env browser, node */
-import Turbolinks from 'turbolinks';
 import './index.scss';
-import smartcrop from 'smartcrop';
 
 
 export class VPageProfileAvatar extends HTMLElement {
@@ -17,7 +15,9 @@ export class VPageProfileAvatar extends HTMLElement {
     this._uploadButtonEl.removeEventListener('change', this.onChangeAvatarClick);
   }
 
-  onChangeAvatarClick = (event) => {
+  onChangeAvatarClick = async (event) => {
+    this._uploadButtonEl.classList.toggle('vf-page-profile__avatar-change--disabled');
+
     const files = event.target.files;
     if (files.length === 0 || files[0].type.indexOf('image') === -1) {
       this.showError('No images selected');
@@ -44,7 +44,7 @@ export class VPageProfileAvatar extends HTMLElement {
       width: 256,
       height: 256,
     };
-    return smartcrop.crop(image, options).then((result) => {
+    return window.smartcrop.crop(image, options).then((result) => {
       const cropCanvas = document.createElement('canvas');
       cropCanvas.width = 256;
       cropCanvas.height = 256;
@@ -57,47 +57,14 @@ export class VPageProfileAvatar extends HTMLElement {
     });
   }
 
-  _upload(canvas) {
-    this._uploadButtonEl.classList.toggle('vf-page-profile__avatar-change--disabled');
-
-    const xhr = new XMLHttpRequest();
-    xhr.open('POST', window.location.search, true);
-    xhr.setRequestHeader('Turbolinks-Referrer', window.location);
-
-    xhr.onload = (event) => {
-      const Snapshot = Turbolinks.controller.view.getSnapshot().constructor;
-      const Location = Turbolinks.controller.view.getSnapshot().getRootLocation().constructor;
-
-      let location = xhr.getResponseHeader('turbolinks-location');
-      const snapshot = Snapshot.wrap(xhr.response);
-
-      if (!location) {
-        location = window.location.href;
-      }
+  async _upload(canvas) {
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve));
+    const file = new File([blob], 'avatar.jpg', {type: 'image/jpeg', lastModified: new Date().getTime()});
+    const container = new DataTransfer();
+    container.items.add(file);
 
-      Turbolinks.controller.adapter.hideProgressBar();
-      Turbolinks.controller.cache.put(new Location(location), snapshot);
-      Turbolinks.visit(location, {action: 'restore'});
-      Turbolinks.clearCache();
-
-      if (xhr.status > 299) {
-        Turbolinks.controller.disable();
-      }
-    };
-
-    xhr.onerror = (event) => {
-      Turbolinks.controller.adapter.hideProgressBar();
-      this.uploadButton_.classList.toggle('vf-profile-avatar__change--disabled');
-      this.showError('Request error');
-    };
-
-    Turbolinks.controller.adapter.showProgressBarAfterDelay();
-
-    canvas.toBlob((blob) => {
-      const formData = new FormData(this._formEl);
-      formData.append('avatar', blob, 'avatar.jpg');
-      xhr.send(formData);
-    });
+    this._formEl.querySelector('input[type=file]').files = container.files;
+    this._formEl.querySelector('button').click();
   }
 
   _showError(message, timeout=2000) {

viewflow/components/vf-page/index.js

@@ -1,7 +1,6 @@
 /* eslint-env browser */
 import './index.scss';
 
-import Turbolinks from 'turbolinks';
 import {drawer, topAppBar} from 'material-components-web';
 import {div} from '../vf-field/jhtml';
 
@@ -128,10 +127,13 @@ export class VPageMenuNavigation extends HTMLElement {
   }
 
   activate = () => {
+    // TODO: try to perform this on visit complete, to get current path without currentVisit trick
+    const Turbo = window.Turbo;
     let currentPath = window.location.pathname;
-    if (Turbolinks.controller.currentVisit && Turbolinks.controller.currentVisit.redirectedToLocation) {
-      currentPath = Turbolinks.controller.currentVisit
-          .redirectedToLocation.absoluteURL.substring(
+
+    if (Turbo.navigator.currentVisit && Turbo.navigator.currentVisit.redirectedToLocation) {
+      currentPath = Turbo.navigator.currentVisit
+          .redirectedToLocation.href.substring(
               window.location.origin.length,
           );
     }

viewflow/components/vf-snackbar/index.js

@@ -1,7 +1,6 @@
 /* eslint-env browser */
 
 import {snackbar} from 'material-components-web';
-// import Turbolinks from 'turbolinks';
 import {div, a} from '../vf-field/jhtml';
 
 export class VSnackbar extends HTMLElement {
@@ -55,13 +54,6 @@ export class VSnackbar extends HTMLElement {
     const link = this.querySelector('a');
     if (link && window.location.href !== link.href) {
       actionText = link.textContent;
-      // actionHandler = () => {
-      //   if (Turbolinks) {
-      //     Turbolinks.visit(link.href);
-      //   } else {
-      //     window.location = link.href;
-      //   }
-      // };
     }
 
     if (message) {

viewflow/contrib/admin.py

@@ -33,7 +33,7 @@ class Admin(Application):
 
     title = _("Administration")
     icon = Icon("build")
-    turbolinks_disabled = True
+    turbo_disabled = True
 
     def __init__(self, *, admin_site=None, **kwargs):
         self.admin_site = admin_site or admin.site

viewflow/contrib/auth.py

@@ -79,7 +79,11 @@ class AvatarForm(forms.Form):
             cache.delete(key)
             messages.add_message(self.request, messages.SUCCESS, random.choice(GREETINGS), fail_silently=True)
         else:
-            messages.add_message(self.request, messages.ERROR, form.errors(), fail_silently=True)
+            message = ''.join(
+                f"{field}: " + ''.join(error['message'] for error in errors)
+                for field, errors in form.errors.get_json_data(escape_html=True).items()
+            )
+            messages.add_message(self.request, messages.ERROR, message, fail_silently=True)
         return self.get(request, *args, **kwargs)
 
 

viewflow/middleware.py

@@ -58,32 +58,14 @@ def process_template_response(self, request, response):
         return response
 
 
-class TurbolinksMiddleware(object):
-    """
-    Send the `Turbolinks-Location` header in response to a visit that was redirected,
-    and Turbolinks will replace the browser’s topmost history entry .
-    """
-
-    def __init__(self, get_response):
-        self.get_response = get_response
-
-    def __call__(self, request):
-        response = self.get_response(request)
-
-        is_turbolinks = request.META.get('HTTP_TURBOLINKS_REFERRER')
-        is_response_redirect = response.has_header('Location')
-
-        if is_turbolinks:
-            if is_response_redirect:
-                location = response['Location']
-                prev_location = request.session.pop('_turbolinks_redirect_to', None)
-                if prev_location is not None:
-                    # relative subsequent redirect
-                    if location.startswith('.'):
-                        location = prev_location.split('?')[0] + location
-                request.session['_turbolinks_redirect_to'] = location
-            else:
-                if request.session.get('_turbolinks_redirect_to'):
-                    location = request.session.pop('_turbolinks_redirect_to')
-                    response['Turbolinks-Location'] = location
+def HotwireTurboMiddleware(get_response):
+    def middleware(request):
+        response = get_response(request)
+        if request.method == 'POST' and request.META.get('HTTP_X_REQUEST_FRAMEWORK') == 'Turbo':
+            if response.status_code == 200:
+                response.status_code = 422
+            elif response.status_code == 301:
+                response.status_code = 303
         return response
+
+    return middleware

viewflow/templates/registration/profile.html

@@ -5,13 +5,7 @@
 
 {% block js %}
 {{ block.super }}
-{% if not debug %}
-<link href="{% static 'viewflow/css/viewflow-page-profile.min.css' %}" rel="stylesheet">
-<script src="{% static 'viewflow/js/viewflow-page-profile.min.js' %}"></script>
-{% else %}
-<link href="{% static 'viewflow/css/viewflow-page-profile.css' %}" rel="stylesheet">
-<script src="{% static 'viewflow/js/viewflow-page-profile.js' %}"></script>
-{% endif %}
+<script src="{% static 'viewflow/js/smartcrop.js' %}"></script>
 {% endblock js %}
 
 {% block page-title %}{% trans 'Profile' %}{% endblock %}
@@ -77,9 +71,14 @@ <h2 class="mdc-typography--subtitle2">[email protected]</h2>
             <div class="mdc-button mdc-button--raised mdc-card__action vf-page-profile__avatar-change">
               Change
               <input type="file">
+
             </div>
         </section>
-        <form method="POST" enctype="multipart/form-data">{% csrf_token %}</form>
+        <form method="POST" enctype="multipart/form-data">
+            {% csrf_token %}
+            <input type="file" name="avatar" style="display:none">
+            <button type="submit" style="display:none">Submit</button>
+        </form>
       </vf-page-profile-avatar>
     </div>
   </div>

viewflow/templates/viewflow/base.html

@@ -6,7 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {% block favicon %}<link rel="icon" href="{% static 'viewflow/img/favicon.png' %}" type="image/png" />{% endblock %}
-    {% block turbolinks-cache-control %}<meta name="turbolinks-cache-control" content="no-cache">{% endblock %}
+    {% block turbo-cache-control %}<meta name="turbo-cache-control" content="no-cache">{% endblock %}
     <title>{% block title %}{{ site.title|default:"Django Material" }}{% endblock %}</title>
     {% block css %}
       {% include 'viewflow/includes/viewflow_css.html' %}
@@ -26,7 +26,7 @@
         }
         </style>{% endif %}
     {% endblock %}
-    <vf-turbolinks></vf-turbolinks>
+    <vf-turbo></vf-turbo>
     {% block body %}{% endblock %}
     {% include 'viewflow/includes/snackbar.html' %}
   </body>

viewflow/templates/viewflow/base_page.html

@@ -39,8 +39,8 @@
         {% block page-menu-primary %}
         <div class="vf-page__menu-primary">
           {% block page-menu-app %}
-            {% if app %}{% include app.menu_template_name with app=app %}{% endif %}
-            {% if site %}{% include site.menu_template_name with site=site user=request.user only %}{% endif %}
+            {% if app and app.menu_template_name %}{% include app.menu_template_name with app=app %}{% endif %}
+            {% if site and site.menu_template_name %}{% include site.menu_template_name with site=site user=request.user only %}{% endif %}
           {% endblock %}
         </div>
         {% endblock page-menu-primary %}
@@ -77,7 +77,7 @@
     <header class="mdc-top-app-bar vf-page__body-toolbar">
       <div class="mdc-top-app-bar__row">
         <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-          <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button vf-page__menu-toggle" aria-label="Open navigation menu" data-turbolinks="false">menu</button>
+          <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button vf-page__menu-toggle" aria-label="Open navigation menu" data-turbo="false">menu</button>
           <span class="mdc-top-app-bar__title">
             {% block page-title %}{{ app.title|default:site.title|default:"Django Material" }}{% endblock %}
           </span>

viewflow/templates/viewflow/includes/app_menu.html

@@ -10,7 +10,7 @@ <h3 class="vf-page__menu-subheader mdc-list-group__subheader">{{ app.title }}</h
     {% endif %}
     {% empty %}
     <div class="mdc-list-item" style="height:auto; color: red">
-    <small>No viewsets found. Please point`.menu_template_name` attribute of the Application class to custom menu template</small>
+    <small>No viewsets found. Please point `.menu_template_name` attribute of the Application class to custom menu template, or set `menu_template_name=None`</small>
     </div>
     {% endfor %}{% endblock %}
     {% block additional_links %}{% endblock %}

viewflow/templates/viewflow/includes/site_menu.html

@@ -9,7 +9,7 @@ <h3 class="vf-page__menu-subheader mdc-list-group__subheader">{% trans 'Applicat
     {% endif %}{% endwith %}{% endblock %}
     {% block app_links %}{% for app in site.menu_items %}{% if app|has_perm:user %}
     {% reverse app 'index' as index_url %}
-    <a class="mdc-list-item vf-page__menu-list-item" href="{{ index_url }}"{% if app.turbolinks_disabled %} data-turbolinks="false"{% endif %}>
+    <a class="mdc-list-item vf-page__menu-list-item" href="{{ index_url }}"{% if app.turbo_disabled %} data-turbo="false"{% endif %}>
       {{ app.icon }}{{ app.title }}
     </a>
     {% endif %}{% empty %}