django-custom-modal-admin 1.0.0
Your project description goes here
License: MIT
Keywords: django-custom-modal-admin

=============================
Django custom modal admin
=============================

.. image:: https://badge.fury.io/py/django-custom-modal-admin.svg/?style=flat-square
    :target: https://badge.fury.io/py/django-custom-modal-admin

.. image:: https://readthedocs.org/projects/pip/badge/?version=latest&style=flat-square
    :target: https://django-custom-modal-admin.readthedocs.io/en/latest/

.. image:: https://img.shields.io/coveralls/github/frankhood/django-custom-modal-admin/main?style=flat-square
    :target: https://coveralls.io/github/frankhood/django-custom-modal-admin?branch=main
    :alt: Coverage Status

Your project description goes here

Documentation
-------------

The full documentation is at https://django-custom-modal-admin.readthedocs.io.

Quickstart
----------

Install Django custom modal admin::

    pip install django-custom-modal-admin

Add it to your `INSTALLED_APPS`:

.. code-block:: python

    INSTALLED_APPS = (
        ...
        'custom_modal_admin',
        ...
    )

Override CustomModalAdmin in your model admin:

.. code-block:: python

    @admin.register(ExampleModel)
    class ExampleModelAdmin(CustomModalAdmin, admin.ModelAdmin):
        list_display = ("title", "subtitle", "description",)

        fieldsets = (
            (None, {"fields": (
                ("title", "subtitle", "description")
            )}),
        )

This admin add to your class Media this dependencies:

.. code-block:: python

    class Media:
        js = [
            'https://code.jquery.com/jquery-2.2.4.min.js',
            'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js',
            'js/custom_modal_admin.js',
        ]
        css = {
            'all': (
                'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css',
            ),
        }

take care of this media when override Media class.

To display the modal insert in your templates a target html tag, using django admin or adding it in template or wherever you want, for example:

.. code-block:: html

    <input 
        class='js-django-admin-custom-modal' // this class is required
        data-target-name='load-template-modal' // this target name is required
        type='button' 
        value='Click to show modal'
    >

and the template of your modal with custom content:

.. code-block:: html

    <div data-django-admin-custom-modal="load-template-modal" style="display:none;">
        <span>This is a modal</span>
    </div>

Now you can insert whatever you want in that modal.

You can also insert in the same block or display_field the admin and the button, for example:

.. code-block:: html

    <input 
        class='js-django-admin-custom-modal' 
        type='button' 
        data-target-name='load-template-modal' 
        value='Click to show modal' 
    >
    <div data-django-admin-custom-modal="load-template-modal" style="display:none;">
        <span>This is a modal</span>
    </div>

If you need to insert a modal for all your site, you can override base_site.html and insert in the extrastyle block
the required css.

.. code-block:: html

    {% block extrastyle %}
    {{ block.super }}
        <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    {% endblock %}

And the required js into extrahead block:

.. code-block:: html

    {% block extrahead %}
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" defer></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" defer></script>
        <script src="{% static 'js/custom_modal_admin.js' %}" defer></script>
    {% endblock %}


With this last implementation you can avoid to inerith CustomModalAdmin in all yours admin.


Credits
-------

Tools used in rendering this package:

*  Cookiecutter_
*  `cookiecutter-djangopackage`_

.. _Cookiecutter: https://github.com/audreyr/cookiecutter
.. _`cookiecutter-djangopackage`: https://github.com/pydanny/cookiecutter-djangopackage




History
_______

0.2.0 (2021-11-22)
__________________

* First release on PyPI.