added refactor of the hydrolearn modules plugin to load the different…

… placeholders as well as the cards

backend/settings.py

@@ -80,6 +80,7 @@
     "djangocms_frontend.contrib.tabs",
     "djangocms_frontend.contrib.utilities",
     "zotero_publications_app",
+    "hydrolearn_modules_app",
 ]
 
 MIDDLEWARE = [

backend/urls.py

@@ -7,6 +7,7 @@
 urlpatterns = [
     path("admin/", admin.site.urls),
     path("zotero_publications_app/", include("zotero_publications_app.urls")),
+    path("hydrolearn_modules_app/", include("hydrolearn_modules_app.urls")),
 ]
 
 # if settings.DEBUG:

hydrolearn_modules_app/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

hydrolearn_modules_app/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class HydrolearnModulesAppConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'hydrolearn_modules_app'

hydrolearn_modules_app/cms_plugins.py

@@ -0,0 +1,22 @@
+from cms.plugin_base import CMSPluginBase
+from cms.plugin_pool import plugin_pool
+from django.utils.translation import gettext_lazy as _
+from .models import (
+    HydroLearnModulesList,
+)
+
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+@plugin_pool.register_plugin
+class HydroLearnModulesPlugin(CMSPluginBase):
+    model = HydroLearnModulesList
+    name = _("HydroLearn Modules Plugin")
+    render_template = "hydrolearn-modules.html"
+    cache = False
+
+    def render(self, context, instance, placeholder):
+        context = super().render(context, instance, placeholder)
+        return context

hydrolearn_modules_app/migrations/0001_initial.py

@@ -0,0 +1,29 @@
+# Generated by Django 3.2 on 2024-03-19 18:31
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('cms', '0022_auto_20180620_1551'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='HydroLearnModulesList',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, related_name='hydrolearn_modules_app_hydrolearnmoduleslist', serialize=False, to='cms.cmsplugin')),
+                ('organization', models.CharField(blank=True, default='', max_length=200)),
+                ('placeholder_image', models.CharField(default='https://placehold.co/200', max_length=200)),
+                ('modules', models.JSONField(default=dict, editable=False)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+    ]

hydrolearn_modules_app/models.py

@@ -0,0 +1,13 @@
+from cms.models.pluginmodel import CMSPlugin
+from django.db import models
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+class HydroLearnModulesList(CMSPlugin):
+    organization = models.CharField(max_length=200, default="", blank=True)
+    placeholder_image = models.CharField(
+        max_length=200, default="https://placehold.co/200"
+    )
+    modules = models.JSONField(editable=False, default=dict)

hydrolearn_modules_app/static/css/hydrolearn-modules.css

@@ -0,0 +1,103 @@
+
+.img-tile{
+  object-fit: cover;
+}
+
+.name{
+  height: 150px;
+  cursor: pointer;
+}
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+.name::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.name {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+
+.hydrolearn_module{
+  box-shadow: 0 1px 10px 0 rgba(0,0,0,0.125), inset 0 0 0 1px rgba(255,255,255,0.75);
+  border-color: white;
+  border-bottom: 3px solid #255f9c;
+}
+.hydrolearn_module:hover,
+.hydrolearn_module:focus {
+  background: #f5f5f5;
+  border-color: #bebebe;
+  box-shadow: 0 1px 4px 0 rgba(0,117,180,0.4);
+}
+.cover-image {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.cover-image img {
+  display: block;
+  width: 100%;
+  transition: filter 0.5s ease; /* Smooth transition for the filter */
+}
+
+.learn-more {
+  position: absolute;
+  color: white;
+  padding: 5px 10px;
+  visibility: hidden;
+  transition: visibility 0s, opacity 0.5s linear; /* Smooth transition for visibility and opacity */
+  opacity: 0;
+  border-color: #255f9c;
+  border-radius: 3px;
+  background: #255f9c;
+}
+
+.cover-image:hover .learn-more {
+  visibility: visible;
+  opacity: 1; /* Make it fully opaque on hover */
+}
+
+.cover-image:hover img {
+  filter: brightness(50%); /* Darken the image */
+}
+.learn-more > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.hidden {
+  display: none;
+}
+
+
+@keyframes placeHolderShimmer{
+  0%{
+      background-position: -800px 0
+  }
+  100%{
+      background-position: 800px 0
+  }
+}
+
+
+
+.animated-background {
+  animation-duration: 7s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeHolderShimmer;
+  animation-timing-function: linear;
+}
+.titles-loading-background{
+  background: #cbcbcb;
+  background: linear-gradient(to right, #cbcbcb 8%, #bbbbbb 18%, #cbcbcb 33%);
+}
+.descriptions-background{
+  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
+}

hydrolearn_modules_app/static/js/hydrolearn-modules.js

@@ -0,0 +1,153 @@
+
+
+const getCSRFToken = () => {
+    // Attempt to retrieve the CSRF token from the meta tag
+    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+    return token;
+}        
+
+const fetchLearningModules = () => {
+    // Assuming your Django server is running on localhost:8000
+    // Update the URL if your setup is different or if you are using a production server
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': getCSRFToken(), // Include the CSRF token in the request headers
+        },
+        body: JSON.stringify(requestData),
+    })
+        .then(response => {
+            console.log(response);
+            document.getElementById('placeholder-hydrolearn-modules').classList.add('hidden'); 
+            document.getElementById('hydrolearn-modules-plugin').classList.remove('hidden'); 
+
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+            return response.json(); // Assuming the response is JSON
+        })
+        .then(data => {
+            console.log(data);
+
+            let modulesHTML = ``
+            data['modules'].forEach(module => {
+                modulesHTML += `
+                <div class="hydrolearn_module card mb-3 w-100 card-height" >
+                <div class="row g-0">
+                    <div class="col-12 col-sm-6 col-md-4 col-lg-4 d-flex justify-content-center justify-content-md-end justify-content-lg-end align-items-center align-items-lg-center align-items-md-center" >`
+                if (module.course_url){
+                    modulesHTML += `
+                    <header class="course-image">
+                        <div class="cover-image">
+                            <a href="${module.course_url}">
+                                <img src="${module.course_image_url}" class="img-tile img-fluid rounded-start" alt="..." >
+                            </a> 
+                            <div class="learn-more" aria-hidden="true">
+                                <a href="${module.course_url}">OPEN MODULE</a>
+                            </div>
+                        
+                        </div>
+                    </header>
+                </div>`
+
+                }
+                else{
+                    modulesHTML += `
+                    <header class="course-image">
+                        <div class="cover-image">
+                            <a href='javascript:void(0)' class='portfolio-link'>
+                                <img src="${module.course_image_url}" class="img-tile img-fluid rounded-start h-100" alt="..." >
+                            </a>
+                            <div class="learn-more" aria-hidden="true">
+                                <a href="https://edx.hydrolearn.org/courses">OPEN MODULE</a>
+                            </div>
+                            
+                        </div>
+                    </header>
+                    </div>`
+                }
+                modulesHTML += `
+                    <div class="col-12 col-sm-6 col-md-8 col-lg-8 border-light">
+                        <div class="card-body">
+                            <div class="d-flex align-items-baseline gap-2 justify-content-center justify-content-lg-start justify-content-md-start">
+                                <h5 class="card-title card-h5">${module.course_title}</h5>
+                            </div>
+                                <div class="row g-0">
+                                    <div class="col col-md-6 col-lg-6 col-xl-6 text-start">
+                                        <p class="card-subtitle mb-2 text-muted" style="font-size:12px;">`
+                if ( module.course_organization){
+                    modulesHTML +=`<span class="text-muted">${module.course_organization}</span>`
+
+                }
+                modulesHTML += `</p></div>`               
+                modulesHTML += `
+                                <div class="col col-md-6 col-lg-6 col-xl-6 text-end">
+                                        <p class="card-subtitle mb-2 text-muted" style="font-size:12px">`
+                if(module.course_code){
+                    modulesHTML += `<span class="text-muted">${module.course_code }</span>`
+                }
+                modulesHTML += `</p></div></div>`
+
+                if (module.course_weekly_effort){
+                    modulesHTML +=`<p class="card-subtitle mb-2 text-muted fst-italic" style="font-size:12px;">Effort: ${module.course_weekly_effort}</p>`
+                }
+                modulesHTML +=`
+                <div class="d-flex flex-column justify-content-center justify-content-lg-start justify-content-md-start text-center text-lg-start text-md-start">
+                                <p class="name w-100 mb-3 overflow-auto">
+                                    ${module.course_description_content}
+                                </p>
+                </div>`
+                modulesHTML += `</div></div></div></div>`
+
+            });
+
+            document.getElementById('hydrolearn-modules-plugin').innerHTML = modulesHTML;
+
+        // For example, you could iterate over the data and append it to an element in your HTML
+        })
+        .catch(error => {
+            console.error('There was a problem with the fetch operation:', error);
+        });
+    }
+const create_placeholders = () => {
+    let placeholdersHtmlElement = document.getElementById('placeholder-hydrolearn-modules');
+    let htmlPlaceholders = '';
+    for(var i = 0; i < 10; i++){
+        htmlPlaceholders+=`
+        <div class="card mb-3 w-100 card-height" >
+        <div class="row g-0">
+            <div class="animated-background descriptions-background col-12 col-sm-6 col-md-4 col-lg-4 d-flex justify-content-center justify-content-md-end justify-content-lg-end align-items-center align-items-lg-center align-items-md-center" >
+
+                <header class="course-image">
+                    <div class="cover-image">
+
+                    
+                    </div>
+                </header>
+
+            </div>
+            <div class="col-12 col-sm-6 col-md-8 col-lg-8 border-light">
+                <div class="card-body" style="background:white;">
+                    <div class="d-flex align-items-baseline gap-2 justify-content-center justify-content-lg-start justify-content-md-start">
+                        <h5 class="card-title card-h5 animated-background titles-loading-background" style="width: 50%; height:20px;" ></h5>
+                    </div>
+  
+                    <p class="animated-background titles-loading-background card-subtitle mb-2 text-muted fst-italic" style="height:20px; width:25%;"></p>
+
+                    <div class="animated-background descriptions-background d-flex flex-column justify-content-center justify-content-lg-start justify-content-md-start text-center text-lg-start text-md-start">
+                        <p class="name w-100 mb-3 overflow-auto">
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+            
+        `
+    }
+    placeholdersHtmlElement.innerHTML = htmlPlaceholders;            
+}
+
+create_placeholders();
+fetchLearningModules();

hydrolearn_modules_app/templates/hydrolearn-modules-base.html

@@ -0,0 +1,16 @@
+{% extends CMS_TEMPLATE %}
+
+{% load sekizai_tags static cms_tags %}
+
+{% addtoblock "js" %}
+
+{% endaddtoblock %}
+
+{% addtoblock "css" %}
+
+
+{% endaddtoblock %}
+
+{% block content %}
+
+{% endblock %}