Skip to content

Commit

Permalink
Replace JQuery with vanillaJS
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuxiaoy1 @miguelgrinberg
yuxiaoy1 authored and miguelgrinberg committed Jun 8, 2021
1 parent 3d690e9 commit 3ab7850
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 164 deletions.
89 changes: 67 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ Flask-Moment

[![Build Status](https://travis-ci.org/miguelgrinberg/Flask-Moment.svg?branch=master)](https://travis-ci.org/miguelgrinberg/Flask-Moment)

This extension enhances Jinja2 templates with formatting of dates and times using [moment.js](http://momentjs.com/).
This extension enhances Jinja2 templates with formatting of dates and times
using [moment.js](http://momentjs.com/).

Quick Start
-----------
Expand All @@ -16,11 +17,12 @@ Step 1: Initialize the extension:
Step 2: In your `<head>` section of your base template add the following code:

<head>
{{ moment.include_jquery() }}
{{ moment.include_moment() }}
</head>

This extension also supports the [Flask application factory pattern](http://flask.pocoo.org/docs/latest/patterns/appfactories/) by allowing you to create a Moment object and then separately initialize it for an app:
This extension also supports the [Flask application factory pattern](http://flask.pocoo.org/docs/latest/patterns/appfactories/)
by allowing you to create a Moment object and then separately initialize it
for an app:

moment = Moment()

Expand All @@ -32,23 +34,39 @@ This extension also supports the [Flask application factory pattern](http://flas

app = create_app(prod_config)

Note that jQuery is required. If you are already including it on your own then you can remove the `include_jquery()` line. Secure HTTP is always used to request the external js files..
Note that older versions of this extension required jQuery, but this library
isn't needed anymore. The `include_jquery()` function that existed in older
releases has now been removed.

The `include_jquery()` and `include_moment()` methods take some optional arguments. If you pass a `version` argument to any of these two calls, then the requested version will be loaded from the default CDN. If you pass `local_js`, then the given local path will be used to load the library. The `include_moment()` argument takes a third argument `no_js` that when set to `True` will assume that the Moment JavaScript library is already loaded and will only add the JavaScript code that supports this extension.
The `include_moment()` methods take some optional arguments. If you pass a
`version` argument to any of these two calls, then the requested version will
be loaded from the default CDN. If you pass `local_js`, then the given local
path will be used to load the library. The `include_moment()` argument takes a
third argument `no_js` that when set to `True` will assume that the Moment
JavaScript library is already loaded and will only add the JavaScript code
that supports this extension.

Step 3: Render timestamps in your template. For example:

<p>The current date and time is: {{ moment().format('MMMM Do YYYY, h:mm:ss a') }}.</p>
<p>Something happened {{ moment(then).fromTime(now) }}.</p>
<p>{{ moment(then).calendar() }}.</p>

In the second and third examples template variables `then` and `now` are used. These must be instances of Python's `datetime` class, and <u>must be "naive" objects</u>. See the [documentation](http://docs.python.org/2/library/datetime.html) for a discussion of naive date and time objects. As an example, `now` can be set as follows:
In the second and third examples template variables `then` and `now` are used.
These must be instances of Python's `datetime` class, and <u>must be "naive"
objects</u>. See the [documentation](http://docs.python.org/2/library/datetime.html)
for a discussion of naive date and time objects. As an example, `now` can be
set as follows:

now = datetime.utcnow()

By default the timestamps will be converted from UTC to the local time in each client's machine before rendering. To disable the conversion to local time pass `local=True`.
By default the timestamps will be converted from UTC to the local time in each
client's machine before rendering. To disable the conversion to local time
pass `local=True`.

Note that even though the timestamps are provided in UTC the rendered dates and times will be in the local time of the client computer, so each users will always see their local time regardless of where they are located.
Note that even though the timestamps are provided in UTC the rendered dates
and times will be in the local time of the client computer, so each users will
always see their local time regardless of where they are located.

Function Reference
------------------
Expand All @@ -65,26 +83,38 @@ The supported list of display functions is shown below:
- `moment(timestamp=None, local=False).unix()`
- `moment(timestamp=None, local=False).diff(another_timesatmp, units='days')`

Consult the [moment.js documentation](http://momentjs.com/) for details on these functions.
Consult the [moment.js documentation](http://momentjs.com/) for details on
these functions.

Auto-Refresh
------------

All the display functions take an optional `refresh` argument that when set to `True` will re-render timestamps every minute. This can be useful for relative time formats such as the one returned by the `fromNow()` or `fromTime()` functions. By default refreshing is disabled.
All the display functions take an optional `refresh` argument that when set to
`True` will re-render timestamps every minute. This can be useful for relative
time formats such as the one returned by the `fromNow()` or `fromTime()`
functions. By default refreshing is disabled.

Default Format
--------------

The `format()` function can be invoked without arguments, in which case a default format of ISO8601 defined by the moment.js library is used. If you want to set a different default, you can set the `MOMENT_DEFAULT_FORMAT` variable in the Flask configuration. Consult the [moment.js format documentation](http://momentjs.com/docs/#/displaying/format/) for a list of accepted tokens.
The `format()` function can be invoked without arguments, in which case a
default format of ISO8601 defined by the moment.js library is used. If you
want to set a different default, you can set the `MOMENT_DEFAULT_FORMAT`
variable in the Flask configuration. Consult the [moment.js format documentation](http://momentjs.com/docs/#/displaying/format/)
for a list of accepted tokens.

Internationalization
--------------------

By default dates and times are rendered in English. To change to a different language add the following line in the `<head>` section after the `include_moment()` line:
By default dates and times are rendered in English. To change to a different
language add the following line in the `<head>` section after the
`include_moment()` line:

{{ moment.locale("es") }}

The above example sets the language to Spanish. Moment.js supports a large number of languages, consult the documentation for the list of languages and their two letter codes.
The above example sets the language to Spanish. Moment.js supports a large
number of languages, consult the documentation for the list of languages and
their two letter codes.

The extension also supports auto-detection of the client's browser language:

Expand All @@ -94,31 +124,46 @@ Custom locales can also be included as a dictionary:

{{ moment.locale(customizations={ ... }) }}

See the [Moment.js locale customizations](https://momentjs.com/docs/#/i18n/changing-locale/) documentation for details on how to define a custom locale.
See the [Moment.js locale customizations](https://momentjs.com/docs/#/i18n/changing-locale/)
documentation for details on how to define a custom locale.

Ajax Support
------------

It is also possible to create Flask-Moment timestamps in Python code, for cases where a template is not used. This is the syntax:
It is also possible to create Flask-Moment timestamps in Python code, for
cases where a template is not used. This is the syntax:

timestamp = moment.create(datetime.utcnow()).calendar()

The `moment` variable is the `Moment` instance that was created at initialization time.
The `moment` variable is the `Moment` instance that was created at
initialization time.

A timestamp created in this way is an HTML string that can be returned as part of a response. For example, here is how a timestamp can be returned in a JSON object:
A timestamp created in this way is an HTML string that can be returned as part
of a response. For example, here is how a timestamp can be returned in a JSON
object:

return jsonify({ 'timestamp': moment.create(datetime.utcnow()).format('L') })

The Ajax callback in the browser needs to call `flask_moment_render_all()` each time an element containing a timestamp is added to the DOM. The included application demonstrates how this is done.
The Ajax callback in the browser needs to call `flask_moment_render_all()`
each time an element containing a timestamp is added to the DOM. The included
application demonstrates how this is done.

Subresource Integrity(SRI)
-----------
[SRI ](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) is a security feature that enables browsers to verify that resources they fetch are not maliciously manipulated. To do so a cryptographic hash is provided that proves integrity.
[SRI ](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
is a security feature that enables browsers to verify that resources they
fetch are not maliciously manipulated. To do so a cryptographic hash is
provided that proves integrity.

SRI is enabled by default. If you wish to use another version or want to host your own javascript, a [separate hash ](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#Tools_for_generating_SRI_hashes) can be provided.
Just add `sri=<YOUR-HASH>` when calling either `moment.include_moment()` or `moment.include_jquery()`. If no sri hash is provided and you choose to use a non default version of javascript, no sri hash will be added.
SRI is enabled by default. If you wish to use another version or want to host
your own javascript, a [separate hash ](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#Tools_for_generating_SRI_hashes)
can be provided.

You can always choose to disable sri. To do so just set `sri=False`.
Just add `sri=<YOUR-HASH>` when calling `moment.include_moment()`. If no SRI
hash is provided and you choose to use a non default version of javascript, no
SRI hash will be added.

You can always choose to disable SRI. To do so just set `sri=False`.


Development
Expand Down
19 changes: 11 additions & 8 deletions example/templates/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
<html>
<head>
<title>Flask-Moment example app</title>
{{ moment.include_jquery() }}
{{ moment.include_moment() }}
<script>
function load_ajax_timestamp() {
$.ajax({
url: '{{ url_for('ajax') }}',
dataType: 'json'
}).done(function(response) {
$('#ajax').append('<p>' + response.timestamp + '</p>');
flask_moment_render_all();
});
fetch('{{ url_for("ajax") }}')
.then(function(res) {
return res.json();
})
.then(function(data) {
const ajaxElem = document.getElementById('ajax');
const childElem = document.createElement('p');
childElem.innerHTML = data.timestamp;
ajaxElem.appendChild(childElem);
flask_moment_render_all();
})
}
</script>
</head>
Expand Down
75 changes: 25 additions & 50 deletions flask_moment.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,6 @@
from markupsafe import Markup
from flask import current_app

# //code.jquery.com/jquery-3.5.1.min.js
default_jquery_version = '3.5.1'
default_jquery_sri = ('sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn'
'/6Z/hRTt8+pR6L4N2')

# //cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment-with-locales.min.js
default_moment_version = '2.29.1'
default_moment_sri = ('sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0'
Expand Down Expand Up @@ -39,12 +34,12 @@ def include_moment(version=default_moment_version, local_js=None,
js_filename = 'moment.min.js'

if not sri:
js = ('<script src="https://cdnjs.cloudflare.com/ajax/libs/'
'moment.js/{}/{}"></script>\n').format(
js = ('<script src="https://cdnjs.cloudflare.com/ajax/'
'libs/moment.js/{}/{}"></script>\n').format(
version, js_filename)
else:
js = ('<script src="https://cdnjs.cloudflare.com/ajax/libs/'
'moment.js/{}/{}" integrity="{}" '
js = ('<script src="https://cdnjs.cloudflare.com/ajax/'
'libs/moment.js/{}/{}" integrity="{}" '
'crossorigin="anonymous"></script>\n').format(
version, js_filename, sri)

Expand All @@ -55,13 +50,13 @@ def include_moment(version=default_moment_version, local_js=None,
return Markup('''{}<script>
moment.locale("en");{}
function flask_moment_render(elem) {{
timestamp = moment($(elem).data('timestamp'));
func = $(elem).data('function');
format = $(elem).data('format');
timestamp2 = $(elem).data('timestamp2');
no_suffix = $(elem).data('nosuffix');
units = $(elem).data('units');
args = [];
const timestamp = moment(elem.dataset.timestamp);
const func = elem.dataset.function;
const format = elem.dataset.format;
const timestamp2 = elem.dataset.timestamp2;
const no_suffix = elem.dataset.nosuffix;
const units = elem.dataset.units;
let args = [];
if (format)
args.push(format);
if (timestamp2)
Expand All @@ -70,47 +65,27 @@ def include_moment(version=default_moment_version, local_js=None,
args.push(no_suffix);
if (units)
args.push(units);
$(elem).text(timestamp[func].apply(timestamp, args));
$(elem).removeClass('flask-moment').show();
elem.textContent = timestamp[func].apply(timestamp, args);
elem.classList.remove('flask-moment');
elem.style.display = "";
}}
function flask_moment_render_all() {{
$('.flask-moment').each(function() {{
flask_moment_render(this);
if ($(this).data('refresh')) {{
(function(elem, interval) {{ setInterval(function() {{ flask_moment_render(elem) }}, interval); }})(this, $(this).data('refresh'));
const moments = document.querySelectorAll('.flask-moment');
moments.forEach(function(moment) {{
flask_moment_render(moment);
const refresh = moment.dataset.refresh;
if (refresh) {{
(function(elem, interval) {{
setInterval(function() {{
flask_moment_render(elem);
}}, interval);
}})(moment, refresh);
}}
}})
}}
$(document).ready(function() {{
flask_moment_render_all();
}});
document.addEventListener("DOMContentLoaded", flask_moment_render_all);
</script>'''.format(js, default_format)) # noqa: E501

@staticmethod
def include_jquery(version=default_jquery_version, local_js=None,
sri=None):
js = ''
if sri is None and version == default_jquery_version and \
local_js is None:
sri = default_jquery_sri
if local_js is not None:
if not sri:
js = '<script src="{}"></script>\n'.format(local_js)
else:
js = ('<script src="{}" integrity="{}" '
'crossorigin="anonymous"></script>\n').format(
local_js, sri)

else:
if not sri:
js = ('<script src="https://code.jquery.com/' +
'jquery-{}.min.js"></script>').format(version)
else:
js = ('<script src="https://code.jquery.com/jquery-{}.min.js" '
'integrity="{}" crossorigin="anonymous">'
'</script>').format(version, sri)
return Markup(js)

@staticmethod
def locale(language='en', auto_detect=False, customization=None):
if auto_detect:
Expand Down
Loading

0 comments on commit 3ab7850

Please sign in to comment.