How to add custom html pages to the (old) Ampersand prototype frontend

[Michiel-s]

Add custom pages to (old) Ampersand prototype frontend

Make sure the content of the customizations folder is copied to the correct location before gulp build-project is called in the Dockerfile

A javascript file to manage the routing

Save as .js file in the right location, e.g. in customizations/public/app/project/custom.js

angular.module('AmpersandApp')
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/home', // route path in url after '#' (i.e. https://localhost/#/home)
            {
                templateUrl: 'app/project/home.html', // path to custom html file to route to, relative to the `public` directory
            })
        .when('/another/route/path',
            {
                templateUrl: "app/project/subfolder/other-page.html",
            });
}]);

A html file

Save as .html file in the right location, e.g. customizations/public/app/project/subfolder/other-page.html

<div>
    Content here
</div>

Note! all html files in public/app/project/ are packed into the javascript bundle to speed up the loading of the application. Changes in the html files need to be bundled again before the change is visible. Rebuilding the image using Docker, that trigger the gulp build-project is sufficient.

[stefjoosten]

This works great! Thanks!

I do have one small issue left: the "inside" functionality. My imagemap contains:

<img src="app/images/test2.svg" width="2133" height="1159" border="0" usemap="#map"/>

<map name="map">
    <!-- #$-:Image map file created by GIMP Image Map plug-in -->
    <!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
    <!-- #$-:Please do not edit lines starting with "#$" -->
    <!-- #$VERSION:2.3 -->
    <!-- #$AUTHOR:Stef Joosten   -->
    <area shape="rect" coords="335,131,1063,302" href="#/Bedrijfsfuncties" />
    <area shape="rect" coords="464,189,801,243" href="#/gegevens" />
</map>

The rectangle for gegevens is inside Bedrijfsfuncties.
According to the HTML image map documentation, when I click in the rectangle for gegevens I should be directed to "#/gegevens". However, I am redirected to "#/Bedrijfsfuncties" instead. I have tried reversing the order of these statements, but that doesn't help. Web documentation suggests this should work, so is anything happening in the front-end framework that might explain this behavior?

[Michiel-s]

I think your map is incorrect.

If I translate the image and 2 map areas to an SVG. You clearly see that the two overlap.

<svg width="2133" height="1159">
    <rect x="335", y="131" width="728" height="171" href="#/Bedrijfsfuncties" style="fill:yellow"/>
    <rect x="464", y="189" width="337" height="54" href="#/gegevens" style="fill:blue"/>
</svg>