- Adding custom apps to gn project

src/mad_geonode4/settings.py

@@ -56,6 +56,8 @@
 # http://www.i18nguy.com/unicode/language-identifiers.html
 LANGUAGE_CODE = os.getenv('LANGUAGE_CODE', "en")
 
+INSTALLED_APPS += ('partenaire', 'oca')
+# INSTALLED_APPS += ('oca',)
 if PROJECT_NAME not in INSTALLED_APPS:
     INSTALLED_APPS += (PROJECT_NAME,)
 

src/oca/README.md

@@ -0,0 +1,26 @@
+### To integrate OCA app inside a geonode-project (3.x), follow the steps below
+
+- Add the oca app in geonodes installed apps as shown below
+```
+INSTALLED_APPS += ([... other_apps], 'oca')
+```
+
+- Create a route for the OCA index page
+```
+from django.conf.urls import url, include
+from django.views.generic import TemplateView
+
+from geonode.urls import urlpatterns
+from oca import HomePage
+
+urlpatterns += [
+## include your urls here
+
+]
+
+urlpatterns = [
+   url(r'^/?$', HomePage.as_view(), name='home'),
+ ] + urlpatterns
+```
+
+>**Note**: The home page template (`mad_geonode/templates/site_index.html`) generated during the creation of the geonode project should be renamed/deleted to prevent a conflict with a template of similar naming in the OCA Django app.

src/oca/__init__.py

@@ -0,0 +1,2 @@
+from oca.views import *
+from oca.models import *

src/oca/admin.py

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

src/oca/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class OcaConfig(AppConfig):
+    name = 'oca'

src/oca/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

src/oca/static/oca/accordeon.css

@@ -0,0 +1,90 @@
+
+/* Remove focus ring as all screen readers tested on, add their own focus ring */
+:focus{
+  outline: 0;
+}
+
+/* ---------------------------------
+
+		A C C O R D I A N
+
+--------------------------------- */
+
+.accordion{
+	border-radius: 3px;
+	overflow: hidden;
+	border: 1px solid #6495ED;
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+.accordion-panel__heading{
+	position: relative;
+	padding: 20px;
+	display: block;
+	text-decoration: none;
+	color: #6495ED;
+	background: #0072c5;
+	font-size: 20px !important;
+	font-weight: 600;
+	transition: all .2s;
+	cursor:pointer;
+}
+.accordion-panel__heading:not(:last-child){
+  border-bottom: 1px solid #6495ED;
+}
+.accordion-panel__heading:before{
+	transition: all .2s ease;
+	content: "";
+	border: 0px #6495ED solid;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 0;
+	height: 100%;
+}
+.accordion-panel__heading.active:before{
+	transition: all .2s;
+	border-left: 8px #0072c5 solid;
+}
+.accordion-panel__heading:hover{
+	color: #6495ED !important;
+	background: #f1f1f1;
+	transition: all .2s;
+}
+.accordion-panel__heading.active:hover,
+.accordion-panel__heading.active {
+  transition: all .2s;
+  color: #0072c5;
+  background: #fff;
+  border-bottom: 0;
+  padding: 10px 10px 10px 20px;
+}
+.accordion-panel__content{
+  transition: all .2s;
+  position: relative;
+  padding: 0 20px 0 20px;
+  background: #f1f1f1;
+  max-height: 0;
+  overflow: hidden;
+}
+.accordion-panel__content:before{
+  transition: all .2s ease;
+  content: "";
+  border: 0px #6495ED solid;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+}
+.accordion-panel__content.active:before{
+  transition: all .2s;
+  border-left: 8px #0072c5 solid;
+}
+.accordion-panel__content.active {
+  transition: all .2s;
+  max-height: 500px;
+  background: #92B5F3;
+  padding: 10px 20px 15px 30px;
+  color:#fff;
+}

src/oca/static/oca/accordeon.js

@@ -0,0 +1,119 @@
+
+var myAPP = myAPP || {};
+
+/*
+See the README.md for more info
+@Author: Ben Bowes - [email protected]
+*/
+
+myAPP.Accordion = function ( panelSelectorsObj ) { // e.g. function ({ heading: <String>, content: <String>})
+
+    this.panels = []; // Master list of collapsable panels. Accessible publically e.g myAPP.accordionContainer.panels[0].select();
+    this.panelSelectors = panelSelectorsObj; // an obj containing the panel selectors - { heading: <String>, content: <String>}
+    this.accordionPanels = document.querySelectorAll( this.panelSelectors['heading'] );
+
+    for (i = 0; i < this.accordionPanels.length; i++) {
+        this.makePanel( this.accordionPanels[i], i );
+    }
+};
+
+myAPP.Accordion.prototype = {
+
+    // resetPanels() - used for unselecting/collapsing AccordionPanels
+    resetPanels: function () {
+        this.panels.forEach( function ( v ) {
+            v.unselect();
+        });
+    },
+    // makePanel( <HTMLElement>, <position index used for naming> ) - Spawns a new AccordionPanel and pushes it into the master list of AccordionPanels controlled by Accordian
+    makePanel: function ( panelElement, index ) {
+        var panel = new myAPP.AccordionPanel( panelElement, this, index );
+        this.panels.push( panel );
+    }
+};
+
+myAPP.AccordionPanel = function ( headingEl, panelHolder, index ) {
+    // The AccordionPanel Class controls each of the collapsable panels spawned from Accordion Class
+    var self = this;
+
+    this.panelHolder = panelHolder;
+    this.index = index;
+    this.headingEl = headingEl; // this is the clickable heading
+    this.contentEl = headingEl.nextElementSibling;//headingEl.querySelector( this.panelHolder.panelSelectors['content'] );
+    this.isSelected = false;
+
+    this.setupAccessibility();
+
+    this.headingEl.addEventListener( "click", function () {
+
+        if (self.isSelected){
+            self.unselect(); // already open, presume user wants it closed
+        }
+        else {
+            self.panelHolder.resetPanels(); // close all panels
+            self.select(); // then open desired panel
+        }
+
+    });
+
+    return this;
+};
+
+myAPP.AccordionPanel.prototype = {
+
+    setupAccessibility: function(){
+        this.headingEl.setAttribute( 'role', 'tab' );
+        this.headingEl.setAttribute( 'aria-selected', 'false' );
+        this.headingEl.setAttribute( 'id', 'accordionHeading_' + this.index );
+        this.headingEl.setAttribute( 'aria-controls', 'accordionContent_' + this.index );
+        this.headingEl.setAttribute( 'tabindex', '0' );
+        this.headingEl.setAttribute( 'aria-expanded', 'false' ); // dynamic html attribute
+
+        this.contentEl.setAttribute( 'id', 'accordionContent_' + this.index );
+        this.contentEl.setAttribute( 'aria-labelledby', 'accordionHeading_' + this.index );
+        this.contentEl.setAttribute( 'role', 'tabpanel' );
+        this.contentEl.setAttribute( 'tabindex', '0' );
+        this.contentEl.setAttribute( 'aria-hidden', 'true' ); // dynamic html attribute
+    },
+    select: function () {
+        var self = this;
+        this.isSelected = true;
+
+        this.headingEl.classList.add('active');
+        this.headingEl.setAttribute( 'aria-expanded', 'true' );
+        this.headingEl.setAttribute( 'aria-selected', 'true' );
+
+        this.contentEl.classList.add('active');
+        this.contentEl.setAttribute( 'aria-hidden', 'false' );
+        setTimeout(function(){
+            self.contentEl.focus();
+        }, 1000); // wait for animation to finish before shifting focus (Don't need to - just looks nicer)
+
+    },
+    unselect: function () {
+        this.isSelected = false;
+
+        this.headingEl.classList.remove('active');
+        this.headingEl.setAttribute( 'aria-expanded', 'false' );
+        this.headingEl.setAttribute( 'aria-selected', 'false' );
+
+        this.contentEl.classList.remove('active');
+        this.contentEl.setAttribute( 'aria-hidden', 'true' );
+    }
+};
+
+myAPP.init = function () {
+
+    // Create Accordian instance and turn all elements with class '.accordion-panel' into AccordianPanel Class intances.
+    this.accordionContainer = new myAPP.Accordion({
+        heading:    '.accordion-panel__heading',
+        content:    '.accordion-panel__content'
+    }); //  store the panel selectors in Accordian Class - Accordion( { heading: <String>, content: <String>} )
+
+    // Select second panel
+   //this.accordionContainer.panels[1].select(); // or myAPP.accordionContainer.panels[0].select();
+};
+
+window.onload = function () {
+    myAPP.init();
+};

src/oca/static/oca/adr_table.txt

@@ -0,0 +1 @@
+https://divtable.com/table-styler/