Skip to content

Commit

Permalink
Remove turbo.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@deb17
deb17 committed Sep 7, 2021
1 parent 3179976 commit a0cfd7b
Show file tree
Hide file tree
Showing 13 changed files with 310 additions and 485 deletions.
44 changes: 19 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ JavaScript. Normal form submission in modals has its own problems.

This Flask extension eases the process of using forms in Bootstrap modals.
Bootstrap versions 4 and 5 are supported. No JavaScript coding is required on
your part. The ajax calls are handled behind the scenes with html-over-the-wire
[Turbo](https://turbo.hotwire.dev/) library. You can code in pure Python -
flashing messages and rendering templates.
your part. The JavaScript is handled behind the scenes and uses
html-over-the-wire. You can code in pure Python - flashing messages and rendering
templates.

### Installation

Expand Down Expand Up @@ -62,9 +62,7 @@ pip install Flask-Modals

You only need to import the function `render_template_modal` in your `routes.py`
file. Use it instead of `render_template` in the route handler for the page with
the modal form. It takes as arguments `modal` (the modal `id`), and optionally
`turbo` and `redirect` (discussed next), in addition to the arguments passed to
`render_template`.
the modal form. It takes an extra argument - `modal` (the modal `id`).

Example route handler:

Expand All @@ -74,31 +72,32 @@ from flask_modals import render_template_modal
@app.route('/', methods=['GET', 'POST'])
def index():

# Following code is standard in any application
form = LoginForm()
if form.validate_on_submit():
if form.username.data != 'test' or form.password.data != 'pass':
flash('Invalid username or password', 'danger')
# You can use `render_template_modal` here
return redirect(url_for('index'))

login_user(user, remember=form.remember_me.data)

flash('You have logged in!', 'success')
return redirect(url_for('home'))

# Following line is new
return render_template_modal('index.html', form=form, modal='modal-form')
```

### Other usage

1. If you want to redirect to the same page outside the modal, use Flask's
`session` proxy and the `turbo` argument as follows:
`session` proxy:

```Python
@app.route('/', methods=['GET', 'POST'])
def index():

flag = session.pop('flag', True)
flag = session.pop('flag', False)

form = LoginForm()
if form.validate_on_submit():
Expand All @@ -109,15 +108,14 @@ def index():
login_user(user, remember=form.remember_me.data)

flash('You have logged in!', 'success')
session['flag'] = False
session['flag'] = True
return redirect(url_for('index'))

return render_template_modal('index.html', form=form,
modal='modal-form', turbo=flag)
modal = None if flag else 'modal-form'
return render_template_modal('index.html', form=form, modal=modal)
```
<br>
2. If you want to render a template and not redirect, then use the `turbo` and
`redirect` arguments as follows:
2. If you want to render a template and not redirect:

```Python
@app.route('/', methods=['GET', 'POST'])
Expand All @@ -127,17 +125,14 @@ def index():
if form.validate_on_submit():
if form.username.data != 'test' or form.password.data != 'pass':
flash('Invalid username or password', 'danger')
return render_template_modal('index.html', form=form,
modal='modal-form', redirect=False)
return render_template_modal('index.html', form=form, modal='modal-form')

login_user(user, remember=form.remember_me.data)

flash('You have logged in!', 'success')
return render_template_modal('index.html', form=form, turbo=False,
modal='modal-form', redirect=False)
return render_template_modal('index.html', form=form, modal=None)

return render_template_modal('index.html', form=form,
modal='modal-form', redirect=False)
return render_template_modal('index.html', form=form, modal='modal-form')
```
If the above looks verbose, you can use the `response` decorator and
return a context dictionary, like so:
Expand All @@ -150,17 +145,16 @@ def index():
def index():
...
...
return {'form': form, 'modal': 'modal-form', 'redirect': False}
return {'form': form, 'modal': 'modal-form'}
```
<br>
3. If you want to reload the page on form submit (for example, to refresh the
`head` tag), you can use `redirect_to` function in the modal route and
`render_template_redirect` function in the target route. They take in the same
arguments as Flask's `redirect` and `render_template` functions respectively.

### Note

1. See the examples folder in the repo for more details.

2. The extension loads the NProgress js library to display a progress bar during
form submission.

3. If you have custom javascript which has global constants, you need to wrap it
in an IIFE. Otherwise, there could be redeclaration errors.
70 changes: 12 additions & 58 deletions examples/bootstrap4/app/routes.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
from flask import redirect, url_for, flash, session, render_template
from flask_login import login_user, logout_user
from flask_modals import (render_template_modal, render_template_redirect,
redirect_to, response)
from flask_modals import render_template_modal, response

from app import app, user
from app.forms import LoginForm, NewsletterForm
Expand All @@ -12,19 +11,13 @@ def index():
'''This index route handles the login form as well. The login form
is present in a modal.
`render_template_modal` takes 3 extra arguments - `modal` (the id of
modal), `turbo` (whether modal should be displayed. Set to True
by default) and `redirect` (which should be False if you are not
redirecting). Only the `modal` argument is required and is used
below. See the commented out code below for usage of `turbo` and
`redirect`.
`render_template_modal` takes the modal id as an argument apart
from the `render_template` arguments.
'''

form = LoginForm()
if form.validate_on_submit():
if form.username.data != 'test' or form.password.data != 'pass':
flash('Invalid username or password', 'danger')
# You can use `render_template_modal` here
return redirect(url_for('index'))

login_user(user, remember=form.remember_me.data)
Expand All @@ -35,35 +28,14 @@ def index():
return render_template_modal('index.html', title='Index page', form=form,
modal='modal-form')

# @app.route('/', methods=['GET', 'POST'])
# def index():
# '''Use `redirect_to` function if you want a full page reload. Pair
# it with `render_template_redirect` function if the target route
# has no modal forms.
# '''

# form = LoginForm()
# if form.validate_on_submit():
# if form.username.data != 'test' or form.password.data != 'pass':
# flash('Invalid username or password', 'danger')
# # You can use `render_template_modal` here
# return redirect(url_for('index'))

# login_user(user, remember=form.remember_me.data)

# flash('You have logged in!', 'success')
# return redirect_to(url_for('home'))

# return render_template_modal('index.html', title='Index page', form=form,
# modal='modal-form')

# Use the following code if you want to redirect to the same page that
# contained the modal.
#
# @app.route('/', methods=['GET', 'POST'])
# def index():

# flag = session.pop('flag', True)
# modal = session.pop('modal', 'modal-form')

# form = LoginForm()
# if form.validate_on_submit():
Expand All @@ -74,11 +46,11 @@ def index():
# login_user(user, remember=form.remember_me.data)

# flash('You have logged in!', 'success')
# session['flag'] = False
# session['modal'] = None
# return redirect(url_for('index'))

# return render_template_modal('index.html', title='Index page', form=form,
# modal='modal-form', turbo=flag)
# modal=modal)

# Use the following code if you want to render a template instead of
# redirecting.
Expand All @@ -91,18 +63,16 @@ def index():
# if form.username.data != 'test' or form.password.data != 'pass':
# flash('Invalid username or password', 'danger')
# return render_template_modal('index.html', title='Index page',
# form=form, modal='modal-form',
# redirect=False)
# form=form, modal='modal-form')

# login_user(user, remember=form.remember_me.data)

# flash('You have logged in!', 'success')
# return render_template_modal('index.html', title='Index page',
# form=form, turbo=False,
# modal='modal-form', redirect=False)
# form=form, modal=None)

# return render_template_modal('index.html', title='Index page', form=form,
# modal='modal-form', redirect=False)
# modal='modal-form')

# Use the following code if you want to render a template instead of
# redirecting and make the code less verbose.
Expand All @@ -116,16 +86,14 @@ def index():
# if form.username.data != 'test' or form.password.data != 'pass':
# flash('Invalid username or password', 'danger')
# return {'title': 'Index page', 'form': form,
# 'modal': 'modal-form', 'redirect': False}
# 'modal': 'modal-form'}

# login_user(user, remember=form.remember_me.data)

# flash('You have logged in!', 'success')
# return {'title': 'Index page', 'form': form, 'turbo': False,
# 'modal': 'modal-form', 'redirect': False}
# return {'title': 'Index page', 'form': form, 'modal': None}

# return {'title': 'Index page', 'form': form, 'modal': 'modal-form',
# 'redirect': False}
# return {'title': 'Index page', 'form': form, 'modal': 'modal-form'}


@app.route('/home', methods=['GET', 'POST'])
Expand All @@ -140,20 +108,6 @@ def home():

return render_template('home.html', title='Home page', form=form)

# @app.route('/home', methods=['GET', 'POST'])
# def home():
# '''To do a full page reload, call `render_template_redirect`
# here with the same arguments as `render_template`.
# '''

# form = NewsletterForm()

# if form.validate_on_submit():
# flash('You have subscribed to the newsletter!', 'success')
# return redirect(url_for('home'))

# return render_template_redirect('home.html', title='Home page', form=form)


@app.route('/logout')
def logout():
Expand Down
Loading

0 comments on commit a0cfd7b

Please sign in to comment.