Merge pull request #69 from lemonsaurus/lemon/bulma_modal

Add a bulma-modal extension to handle modal events.

Author: lemonsaurus

README.md

@@ -2,7 +2,7 @@ django-simple-bulma
 ===================
 `django-simple-bulma` is a Django application that makes [Bulma](https://bulma.io) and [Bulma-Extensions](https://wikiki.github.io/) available to use in your Django project with as little setup as possible. The goal of this project is to make it as easy as possible to use Bulma with Django.
 
-This project currently uses **Bulma v0.9.1**, and is automatically updated with every new release. If a new version has come out with features you'd like to make use of, please [create an issue](https://github.com/python-discord/django-simple-bulma/issues), and we will be happy to make a release to update it.
+This project currently uses **Bulma v0.9.2**, and is automatically updated with every new release. If a new version has come out with features you'd like to make use of, please [create an issue](https://github.com/python-discord/django-simple-bulma/issues), and we will be happy to make a release to update it.
 
 Installation
 ------------
@@ -122,6 +122,7 @@ For your convenience, we also give you the option to add other quality of life i
 * `bulma-navbar-burger` will hook up your `navbar-burger`s and `navbar-menu`s automatically, to provide a toggle for mobile users. We use a slightly updated version of [the example from Bulma's documentation](https://bulma.io/documentation/components/navbar/#navbarJsExample) - simply add a `data-target` attribute to your `navbar-burger` that refers to the `id` of the `navbar-menu` that should be expanded and collapsed by the button.
 * `bulma-notifications` will allow you to close [notifications](https://bulma.io/documentation/elements/notification/) by clicking on the X button.
 * `bulma-dropdown` will open/close dropdowns using the `is-active` class. It mimics how the dropdowns function on the [documentation page](https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable).
+* `bulma-modal` will handle opening and closing modals. Just assign the `modal-button` class to a `<button>`, and make sure it has a `data-target` attribute that matches the `id` of the modal that you want to open. See [the example code from Bulma's documentation](https://bulma.io/documentation/components/modal/) for modal element code.
 
 Compiling additional SCSS
 ------------------------

django_simple_bulma/extensions/bulma-modal/dist/js/bulma-modal.js

@@ -0,0 +1,76 @@
+'use strict';
+
+/*
+How to use this script
+
+First, create a modal like this
+<div class="modal" id="my-unique-modal-identifier">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <!-- Any other Bulma elements you want -->
+  </div>
+  <button class="modal-close is-large" aria-label="close"></button>
+</div>
+
+The div class has a unique ID to identify this particular modal.
+
+Next, you create a button (or some other element that you can interact with) like this:
+<button class="button modal-button" data-target="my-unique-modal-identifier">
+  Open the modal!
+</button>
+
+See how the `data-target` matches the id of the modal we want to open? This is important.
+
+Once this is set up and this script is loaded, the button should open the modal!
+*/
+
+document.addEventListener('DOMContentLoaded', function () {
+  var rootEl = document.documentElement;
+  var $modals = _getAll('.modal');
+  var $modalButtons = _getAll('.modal-button');
+  var $modalCloses = _getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
+
+  // Add click event listeners to all the modal buttons,
+  // which are buttons with the .modal-button class.
+  if ($modalButtons.length > 0) {
+    $modalButtons.forEach(function ($el) {
+      $el.addEventListener('click', function () {
+        var target = $el.dataset.target;
+        var $target = document.getElementById(target);
+        rootEl.classList.add('is-clipped');
+        $target.classList.add('is-active');
+      });
+    });
+  }
+
+  // Add click event listeners to all close icons, like an X
+  // icon in the top right corner of the modal window.
+  if ($modalCloses.length > 0) {
+    $modalCloses.forEach(function ($el) {
+      $el.addEventListener('click', function () {
+        closeModals();
+      });
+    });
+  }
+
+  // Close the modal if the user hits the escape key
+  document.addEventListener('keydown', function (event) {
+    var e = event || window.event;
+    if (e.keyCode === 27) {
+      closeModals();
+    }
+  });
+
+  // Model closing logics
+  function closeModals() {
+    rootEl.classList.remove('is-clipped');
+    $modals.forEach(function ($el) {
+      $el.classList.remove('is-active');
+    });
+  }
+
+  // Helper function to fetch all elements with certain classes.
+  function _getAll(selector) {
+    return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
+  }
+});

django_simple_bulma/finders.py

@@ -45,7 +45,7 @@ def __init__(self):
         self.storage = FileSystemStorage(simple_bulma_path)
 
     def _get_extension_imports(self) -> str:
-        """Return a string that, in SASS, imports all enabled extensions"""
+        """Return a string that, in SASS, imports all enabled extensions."""
         scss_imports = ""
 
         for ext in (simple_bulma_path / "extensions").iterdir():
@@ -57,7 +57,7 @@ def _get_extension_imports(self) -> str:
         return scss_imports
 
     def _unpack_variables(self, variables: dict) -> str:
-        """Unpacks SASS variables from a dictionary to a compilable string"""
+        """Unpacks SASS variables from a dictionary to a compilable string."""
         scss_string = ""
         for var, value in variables.items():
             scss_string += f"${var}: {value};\n"

django_simple_bulma/utils.py

@@ -43,7 +43,7 @@
 
 
 def is_enabled(extension: Union[Path, str]) -> bool:
-    """Return whether an extension is enabled or not"""
+    """Return whether an extension is enabled or not."""
     if isinstance(extension, Path):
         return extensions == "all" or extension.name in extensions
     return extensions == "all" or extension in extensions
@@ -69,7 +69,7 @@ def get_js_files() -> Generator[str, None, None]:
 
 
 def get_sass_files(ext: Path) -> List[Path]:
-    """Given the path to an extension, find and yield all files that should be imported"""
+    """Given the path to an extension, find and yield all files that should be imported."""
     for rel_path, glob in sass_files_searches:
         src_files = list((ext / rel_path).rglob(glob))
 

setup.py

@@ -9,7 +9,7 @@
 
 setup(
     name="django-simple-bulma",
-    version="2.1.0",
+    version="2.2.0",
     description="Django application to add the Bulma CSS framework and its extensions",
     long_description=open("README.md").read(),
     long_description_content_type="text/markdown",