https://www.bribus.nl/StudioB/Features/Configurator/Scripts/ConfiguratorController.js?fp=639265518795467082

1ngApp.controller('ConfiguratorController', ['$scope', '$http', '$location', '$anchorScroll', function ($scope, $http, $location, $anchorScroll) {
2
3    $scope.state = {
4        initted: false,
5        loading: false,
6        validating: false,
7        loaderText: "Aan het laden",
8        hasError: false,
9        error: "Er is een fout opgetreden.",
10        pageValidaded: false
11    };
12
13    // Keep track of the pages.
14    $scope.pages = [];
15    $scope.numberOfPages = 0;
16    $scope.page =   null;
17
18    /**
19     * Allows to add a page.
20     * @param {any} index The index of the page, used for navigation
21     * @param {any} viewLocation The location of the page (loaded as ng-include).
22     */
23    $scope.addPage = (container) => {
24        let index = $scope.pages.length;
25        container.index = index;
26        $scope.pages.push(container);
27    }
28
29    /**
30     * Called after pages are set.
31     * */
32    $scope.initPages = async (index = 0) => {
33        $scope.pages.forEach((p, i) => {
34            p.previousPageIndex = (p.index - 1 < 0 ? 0 : (p.index - 1));
35            p.nextPageIndex = (p.index + 1 > ($scope.pages.length - 1) ? ($scope.pages.length - 1) : (p.index + 1));
36        });
37
38        // Calculate nr of pages.
39        $scope.numberOfPages = $scope.pages.length;
40
41        //Check
42        const url = new URL(window.location.href);
43        if (url.searchParams.has("page")) index = parseInt(url.searchParams.get("page")) - 1;
44
45        // Set the active page again since our models have changed.
46        await $scope.setActivePage(index);
47    }
48
49    addEventListener('popstate', event => {
50        $scope.initPages();
51    });
52
53    /**
54     * Sets the active page
55     * @param {any} index
56     */
57    $scope.setActivePage = async (index) => {
58        // Call cancel method
59        // Enable loader.
60        $scope.enableLoader();
61
62        if ($scope.page) 
63            await $scope.page.onClose();
64
65        // Change active page.
66        $scope.page = $scope.pages.find(p => p.index == index);
67
68        // Re-enable for the loader text.
69        $scope.enableLoader($scope.page.loaderText);
70        $scope.$apply();
71
72        // Call init method
73        if (!$scope.page.initialized)
74            await $scope.page.onInitialize();
75
76        $scope.page.initialized = true; // Set initialized to true.
77        await $scope.page.onOpen();
78
79        //Push history item
80        const url = new URL(window.location.href);
81        if ((index + 1 != 1 || url.searchParams.has("page")) && url.searchParams.get("page") != String(index + 1)) {
82            url.searchParams.set("page", index + 1);
83            window.history.pushState(null, "", url.href)
84        }
85
86        // Call scope apply since we have changed some data which affects the UI
87        $scope.disableLoader();
88        $scope.$apply();
89    }
90
91    $scope.previousPage = async () => {
92        jQuery('html, body').animate({ scrollTop: 0 }, 'linear');
93
94        let i = $scope.pages.find(p => p.index == $scope.page.previousPageIndex).index;
95        $scope.setActivePage(i);
96    }
97    $scope.nextPage = async function() {
98        // Validate current page, but only on next page.
99        if ($scope.state.validating)
100            return;
101
102        if ($scope.page) {
103            $scope.state.validating = true;
104            let valid = true;
105            await $scope.page.validate(arguments).catch(e => {
106                console.log("Page error:", e.message);
107                valid = false;
108            });
109            $scope.state.validating = false;
110            $scope.state.pageValidaded = !valid;
111            if (!valid) {
112                return;
113            }
114        }
115
116        jQuery('html, body').animate({ scrollTop: 0 }, 'linear');
117
118        let i = $scope.pages.find(p => p.index == $scope.page.nextPageIndex).index;
119        $scope.setActivePage(i);
120    }
121
122    $scope.enableLoader = (txt) => {
123        $scope.state.loaderText = txt;
124        $scope.state.loading = true;
125        if ($scope.page)
126            $scope.page.loading = true;
127    };
128    $scope.disableLoader = () => {
129        $scope.state.loading = false;
130        if ($scope.page)
131            $scope.page.loading = false;
132    };
133
134    //scroll to an anchor by ID
135    $scope.scrollToAnchor = function (anchor) {
136        let top = jQuery("#" + anchor).offset().top;
137        window.scroll(0, top - 300);
138    }
139}]);
140
141class ConfiguratorPage {
142    constructor(name, viewLocation, loaderText) {
143        this.initialized = false;
144        this.name = name;
145        this.loading = false;
146        this.loaderText = loaderText || "";
147        this.viewLocation = viewLocation;
148        this.index = 0;
149        this.previousPageIndex = 0;
150        this.nextPageIndex = 0;
151    }
152
153    /* Events */
154    /**
155     * This is triggered when the page is loaded.
156     * */
157    async onInitialize() {
158        // Just some time for smooth changing
159        await new Promise(resolve => setTimeout(resolve, 1500));
160    };
161    async onOpen() { };
162    async onClose() { };
163    async validate() { };
164}