Update Compodoc

frontend/documentation/js/libs/EventDispatcher.js

@@ -2,4 +2,95 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-var EventDispatcher=function(){};Object.assign(EventDispatcher.prototype,{addEventListener:function(i,t){void 0===this._listeners&&(this._listeners={});var e=this._listeners;void 0===e[i]&&(e[i]=[]),-1===e[i].indexOf(t)&&e[i].push(t)},hasEventListener:function(i,t){if(void 0===this._listeners)return!1;var e=this._listeners;return void 0!==e[i]&&-1!==e[i].indexOf(t)},removeEventListener:function(i,t){if(void 0!==this._listeners){var e=this._listeners[i];if(void 0!==e){var s=e.indexOf(t);-1!==s&&e.splice(s,1)}}},dispatchEvent:function(i){if(void 0!==this._listeners){var t=this._listeners[i.type];if(void 0!==t){i.target=this;var e=[],s=0,n=t.length;for(s=0;s<n;s++)e[s]=t[s];for(s=0;s<n;s++)e[s].call(this,i)}}}});
+var EventDispatcher = function () {};
+
+Object.assign( EventDispatcher.prototype, {
+
+	addEventListener: function ( type, listener ) {
+
+		if ( this._listeners === undefined ) this._listeners = {};
+
+		var listeners = this._listeners;
+
+		if ( listeners[ type ] === undefined ) {
+
+			listeners[ type ] = [];
+
+		}
+
+		if ( listeners[ type ].indexOf( listener ) === - 1 ) {
+
+			listeners[ type ].push( listener );
+
+		}
+
+	},
+
+	hasEventListener: function ( type, listener ) {
+
+		if ( this._listeners === undefined ) return false;
+
+		var listeners = this._listeners;
+
+		if ( listeners[ type ] !== undefined && listeners[ type ].indexOf( listener ) !== - 1 ) {
+
+			return true;
+
+		}
+
+		return false;
+
+	},
+
+	removeEventListener: function ( type, listener ) {
+
+		if ( this._listeners === undefined ) return;
+
+		var listeners = this._listeners;
+		var listenerArray = listeners[ type ];
+
+		if ( listenerArray !== undefined ) {
+
+			var index = listenerArray.indexOf( listener );
+
+			if ( index !== - 1 ) {
+
+				listenerArray.splice( index, 1 );
+
+			}
+
+		}
+
+	},
+
+	dispatchEvent: function ( event ) {
+
+		if ( this._listeners === undefined ) return;
+
+		var listeners = this._listeners;
+		var listenerArray = listeners[ event.type ];
+
+		if ( listenerArray !== undefined ) {
+
+			event.target = this;
+
+			var array = [], i = 0;
+			var length = listenerArray.length;
+
+			for ( i = 0; i < length; i ++ ) {
+
+				array[ i ] = listenerArray[ i ];
+
+			}
+
+			for ( i = 0; i < length; i ++ ) {
+
+				array[ i ].call( this, event );
+
+			}
+
+		}
+
+	}
+
+} );

frontend/documentation/js/libs/highlightjs-line-numbers.min.js

@@ -0,0 +1 @@
+!function(e){"use strict";function t(){"complete"===document.readyState?n():e.addEventListener("DOMContentLoaded",n)}function n(){try{var e=document.querySelectorAll("code.hljs:not(.bash)");for(var t in e)e.hasOwnProperty(t)&&r(e[t])}catch(n){console.error("LineNumbers error: ",n)}}function r(e){if("object"==typeof e){var t=e.parentNode,n=o(t.outerText);if(n>1){for(var r="",c=0;n>c;c++)r+=c+1+"\n";var l=document.createElement("code");l.className="hljs hljs-line-numbers",l.style["float"]="left",l.textContent=r,t.insertBefore(l,e)}}}function o(e){if(0===e.length)return 0;var t=/\r\n|\r|\n/g,n=e.match(t);return n=n?n.length:0,e[e.length-1].match(t)||(n+=1),n}"undefined"==typeof e.hljs?console.error("highlight.js not detected!"):(e.hljs.initLineNumbersOnLoad=t,e.hljs.lineNumbersBlock=r)}(window);

frontend/documentation/js/menu.js

@@ -1,321 +1,56 @@
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', function() {
     var menuCollapsed = false,
         mobileMenu = document.getElementById('mobile-menu');
+    document.getElementById('btn-menu').addEventListener('click', function() {
+        if (menuCollapsed) {
+            mobileMenu.style.display = 'none';
+        } else {
+            mobileMenu.style.display = 'block';
+            document.getElementsByTagName('body')[0].style['overflow-y'] = 'hidden';
+        }
+        menuCollapsed = !menuCollapsed;
+    });
 
-    var localContextInUrl = '';
+    // collapse menu
+    var classnameMenuToggler = document.getElementsByClassName('menu-toggler'),
+        faAngleUpClass = 'fa-angle-up',
+        faAngleDownClass = 'fa-angle-down',
+        toggleItemMenu = function(e) {
+            e.preventDefault();
+            var element = $(e.target);
+            if (element.hasClass(faAngleUpClass)) {
+                element.addClass(faAngleDownClass);
+                element.removeClass(faAngleUpClass);
+            } else {
+                element.addClass(faAngleUpClass);
+                element.removeClass(faAngleDownClass);
+            }
+        };
 
-    if (COMPODOC_CURRENT_PAGE_CONTEXT !== '') {
-        switch (COMPODOC_CURRENT_PAGE_CONTEXT) {
-            case 'additional-page':
-                localContextInUrl = 'additional-documentation';
-                break;
-            case 'class':
-                localContextInUrl = 'classes';
-                break;
-            case 'miscellaneous-functions':
-            case 'miscellaneous-variables':
-            case 'miscellaneous-typealiases':
-            case 'miscellaneous-enumerations':
-                localContextInUrl = 'miscellaneous';
-            default:
-                break;
+    for (var i = 0; i < classnameMenuToggler.length; i++) {
+        classnameMenuToggler[i].addEventListener('click', toggleItemMenu, false);
+    }
+
+    // Scroll to active link
+    var menus = document.querySelectorAll('.menu'),
+        i = 0,
+        len = menus.length,
+        activeMenu,
+        activeMenuClass,
+        activeLink;
+
+    for (i; i<len; i++) {
+        if (getComputedStyle(menus[i]).display != 'none') {
+            activeMenu = menus[i];
+            activeMenuClass = activeMenu.getAttribute('class').split(' ')[0];
         }
     }
 
-    function hasClass(el, cls) {
-        return el.className && new RegExp('(\\s|^)' + cls + '(\\s|$)').test(el.className);
+    if (activeMenu) {
+        activeLink = document.querySelector('.' + activeMenuClass + ' .active');
+        activeMenu.scrollTop = activeLink.offsetTop;
+        if (activeLink.innerHTML.toLowerCase().indexOf('readme') != -1 || activeLink.innerHTML.toLowerCase().indexOf('overview') != -1) {
+            activeMenu.scrollTop = 0;
+        }
     }
-
-    var processLink = function (link, url) {
-        if (url.charAt(0) !== '.') {
-            var prefix = '';
-            switch (COMPODOC_CURRENT_PAGE_DEPTH) {
-                case 5:
-                    prefix = '../../../../../';
-                    break;
-                case 4:
-                    prefix = '../../../../';
-                    break;
-                case 3:
-                    prefix = '../../../';
-                    break;
-                case 2:
-                    prefix = '../../';
-                    break;
-                case 1:
-                    prefix = '../';
-                    break;
-                case 0:
-                    prefix = './';
-                    break;
-            }
-            link.setAttribute('href', prefix + url);
-        }
-    };
-
-    var processMenuLinks = function (links, dontAddClass) {
-        for (var i = 0; i < links.length; i++) {
-            var link = links[i];
-            var linkHref = link.getAttribute('href');
-            if (linkHref) {
-                var linkHrefFile = linkHref.substr(linkHref.lastIndexOf('/') + 1, linkHref.length);
-                if (
-                    linkHrefFile.toLowerCase() === COMPODOC_CURRENT_PAGE_URL.toLowerCase() &&
-                    link.innerHTML.indexOf('Getting started') == -1 &&
-                    !dontAddClass &&
-                    linkHref.toLowerCase().indexOf(localContextInUrl.toLowerCase()) !== -1
-                ) {
-                    link.classList.add('active');
-                }
-                processLink(link, linkHref);
-            }
-        }
-    };
-    var chapterLinks = document.querySelectorAll('[data-type="chapter-link"]');
-    processMenuLinks(chapterLinks);
-    var entityLinks = document.querySelectorAll('[data-type="entity-link"]');
-    processMenuLinks(entityLinks);
-    var indexLinks = document.querySelectorAll('[data-type="index-link"]');
-    processMenuLinks(indexLinks, true);
-    var compodocLogos = document.querySelectorAll('[data-type="compodoc-logo"]');
-    var customLogo = document.querySelectorAll('[data-type="custom-logo"]');
-    var processLogos = function (entityLogos) {
-        for (var i = 0; i < entityLogos.length; i++) {
-            var entityLogo = entityLogos[i];
-            if (entityLogo) {
-                var url = entityLogo.getAttribute('data-src');
-                // Dark mode + logo
-                let isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                if (isDarkMode && url.indexOf('compodoc') !== -1) {
-                    url = 'images/compodoc-vectorise-inverted.png';
-                }
-                if (url.charAt(0) !== '.') {
-                    var prefix = '';
-                    switch (COMPODOC_CURRENT_PAGE_DEPTH) {
-                        case 5:
-                            prefix = '../../../../../';
-                            break;
-                        case 4:
-                            prefix = '../../../../';
-                            break;
-                        case 3:
-                            prefix = '../../../';
-                            break;
-                        case 2:
-                            prefix = '../../';
-                            break;
-                        case 1:
-                            prefix = '../';
-                            break;
-                        case 0:
-                            prefix = './';
-                            break;
-                    }
-                    entityLogo.src = prefix + url;
-                }
-            }
-        }
-    };
-    processLogos(compodocLogos);
-    processLogos(customLogo);
-
-    setTimeout(function () {
-        document.getElementById('btn-menu').addEventListener('click', function () {
-            if (menuCollapsed) {
-                mobileMenu.style.display = 'none';
-            } else {
-                mobileMenu.style.display = 'block';
-                document.getElementsByTagName('body')[0].style['overflow-y'] = 'hidden';
-            }
-            menuCollapsed = !menuCollapsed;
-        });
-
-        /**
-         * Native bootstrap doesn't wait DOMContentLoaded event to start his job, re do it here
-         */
-        var Collapses = document.querySelectorAll('[data-toggle="collapse"]');
-        for (var o = 0, cll = Collapses.length; o < cll; o++) {
-            var collapse = Collapses[o],
-                options = {};
-            options.duration = collapse.getAttribute('data-duration');
-            var c = new Collapse(collapse, options);
-        }
-
-        // collapse menu
-        var classnameMenuToggler = document.getElementsByClassName('menu-toggler'),
-            faAngleUpClass = 'ion-ios-arrow-up',
-            faAngleDownClass = 'ion-ios-arrow-down',
-            toggleItemMenu = function (e) {
-                var element = $(e.target),
-                    parent = element[0].parentNode,
-                    parentLink,
-                    elementIconChild;
-                if (parent) {
-                    if (!$(parent).hasClass('linked')) {
-                        e.preventDefault();
-                    } else {
-                        parentLink = parent.parentNode;
-                        if (parentLink && element.hasClass('link-name')) {
-                            $(parentLink).trigger('click');
-                        }
-                    }
-                    elementIconChild = parent.getElementsByClassName(faAngleUpClass)[0];
-                    if (!elementIconChild) {
-                        elementIconChild = parent.getElementsByClassName(faAngleDownClass)[0];
-                    }
-                    if (elementIconChild) {
-                        elementIconChild = $(elementIconChild);
-                        if (elementIconChild.hasClass(faAngleUpClass)) {
-                            elementIconChild.addClass(faAngleDownClass);
-                            elementIconChild.removeClass(faAngleUpClass);
-                        } else {
-                            elementIconChild.addClass(faAngleUpClass);
-                            elementIconChild.removeClass(faAngleDownClass);
-                        }
-                    }
-                }
-            };
-
-        for (var i = 0; i < classnameMenuToggler.length; i++) {
-            classnameMenuToggler[i].addEventListener('click', toggleItemMenu, false);
-        }
-
-        // Scroll to active link
-        var menus = document.querySelectorAll('.menu'),
-            i = 0,
-            len = menus.length,
-            activeMenu,
-            activeMenuClass,
-            activeLink;
-
-        for (i; i < len; i++) {
-            if (getComputedStyle(menus[i]).display != 'none') {
-                activeMenu = menus[i];
-                activeMenuClass = activeMenu.getAttribute('class').split(' ')[0];
-            }
-        }
-
-        if (activeMenu) {
-            activeLink = document.querySelector('.' + activeMenuClass + ' .active');
-            if (activeLink) {
-                var linkType = activeLink.getAttribute('data-type');
-                var linkContext = activeLink.getAttribute('data-context');
-                if (linkType === 'entity-link') {
-                    var parentLi = activeLink.parentNode,
-                        parentUl,
-                        parentChapterMenu;
-                    if (parentLi) {
-                        parentUl = parentLi.parentNode;
-                        if (parentUl) {
-                            parentChapterMenu = parentUl.parentNode;
-                            if (parentChapterMenu) {
-                                var toggler = parentChapterMenu.querySelector('.menu-toggler'),
-                                    elementIconChild =
-                                        toggler.getElementsByClassName(faAngleUpClass)[0];
-                                if (toggler && !elementIconChild) {
-                                    toggler.click();
-                                }
-                            }
-                        }
-                    }
-                    if (linkContext && linkContext === 'sub-entity') {
-                        // Toggle also the master parent menu
-                        var linkContextId = activeLink.getAttribute('data-context-id');
-                        var toggler = activeMenu.querySelector(
-                            '.chapter.' + linkContextId + ' a .menu-toggler'
-                        );
-                        if (toggler) {
-                            toggler.click();
-                        }
-                        if (linkContextId === 'additional') {
-                            var mainToggler = activeMenu.querySelector(
-                                '.chapter.' + linkContextId + ' div.menu-toggler'
-                            );
-                            if (mainToggler) {
-                                mainToggler.click();
-                            }
-                        }
-                    }
-                } else if (linkType === 'chapter-link') {
-                    var linkContextId = activeLink.getAttribute('data-context-id');
-                    var toggler = activeLink.querySelector('.menu-toggler');
-                    if (toggler) {
-                        toggler.click();
-                    }
-                    if (linkContextId === 'additional') {
-                        var mainToggler = activeMenu.querySelector(
-                            '.chapter.' + linkContextId + ' div.menu-toggler'
-                        );
-                        if (mainToggler) {
-                            mainToggler.click();
-                        }
-                    }
-                }
-                setTimeout(function () {
-                    activeMenu.scrollTop = activeLink.offsetTop;
-                    if (
-                        activeLink.innerHTML.toLowerCase().indexOf('readme') != -1 ||
-                        activeLink.innerHTML.toLowerCase().indexOf('overview') != -1
-                    ) {
-                        activeMenu.scrollTop = 0;
-                    }
-                }, 300);
-            }
-        }
-        // Dark mode toggle button
-        var useDark = window.matchMedia('(prefers-color-scheme: dark)');
-        var darkModeState = useDark.matches;
-        var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
-        var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
-        var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
-
-        function checkToggle(check) {
-            for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
-                $darkModeToggleSwitchers[i].checked = check;
-            }
-        }
-
-        function toggleDarkMode(state) {
-            if (window.localStorage) {
-                localStorage.setItem('compodoc_darkmode-state', state);
-            }
-
-            checkToggle(state);
-
-            const hasClass = document.body.classList.contains('dark');
-
-            if (state) {
-                for (var i = 0; i < $darkModeToggles.length; i++) {
-                    $darkModeToggles[i].classList.add('dark');
-                }
-                if (!hasClass) {
-                    document.body.classList.add('dark');
-                }
-            } else {
-                for (var i = 0; i < $darkModeToggles.length; i++) {
-                    $darkModeToggles[i].classList.remove('dark');
-                }
-                if (hasClass) {
-                    document.body.classList.remove('dark');
-                }
-            }
-        }
-
-        useDark.addEventListener('change', function (evt) {
-            toggleDarkMode(evt.matches);
-        });
-        if (darkModeStateLocal) {
-            darkModeState = darkModeStateLocal === 'true';
-        }
-        toggleDarkMode(darkModeState);
-
-        if ($darkModeToggles.length > 0) {
-            for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
-                $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
-                    darkModeState = !darkModeState;
-                    toggleDarkMode(darkModeState);
-                });
-            }
-        }
-    }, 0);
 });

frontend/documentation/js/search/search-engine.js

@@ -0,0 +1,43 @@
+(function(compodoc) {
+    var engine      = null;
+    var initialized = false;
+
+    function setEngine(Engine) {
+        initialized = false;
+        engine      = new Engine();
+
+        init();
+    }
+
+    function init() {
+        if (!engine) throw new Error('No engine set for research. Set an engine using compodoc.search.setEngine(Engine).');
+
+        return engine.init()
+        .then(function() {
+            initialized = true;
+            compodoc.dispatchEvent({
+                type: compodoc.EVENTS.SEARCH_READY
+            });
+        });
+    }
+
+    function query(q, offset, length) {
+        if (!initialized) throw new Error('Search has not been initialized');
+        return engine.search(q, offset, length);
+    }
+
+    function getEngine() {
+        return engine? engine.name : null;
+    }
+
+    function isInitialized() {
+        return initialized;
+    }
+
+    compodoc.search = {
+        setEngine:     setEngine,
+        getEngine:     getEngine,
+        query:         query,
+        isInitialized: isInitialized
+    };
+})(compodoc);

frontend/documentation/js/search/search-lunr.js

@@ -1,7 +1,7 @@
 (function(compodoc) {
 
     function LunrSearchEngine() {
-        this.index = undefined;
+        this.index = null;
         this.store = {};
         this.name = 'LunrSearchEngine';
     }
@@ -23,7 +23,7 @@
             d = new promise.Promise();
 
         if (this.index) {
-            results = $.map(this.index.search('*' + q + '*'), function(result) {
+            results = $.map(this.index.search(q), function(result) {
                 var doc = that.store[result.ref];
 
                 return {
@@ -36,7 +36,7 @@
 
         d.done({
             query: q,
-            results: length === 0 ? results : results.slice(0, length),
+            results: results.slice(0, length),
             count: results.length
         });
 
@@ -44,9 +44,19 @@
     };
 
     compodoc.addEventListener(compodoc.EVENTS.READY, function(event) {
+        console.log('compodoc ready');
+
         var engine = new LunrSearchEngine(),
             initialized = false;
 
+        engine.init()
+        .then(function() {
+            initialized = true;
+            compodoc.dispatchEvent({
+                type: compodoc.EVENTS.SEARCH_READY
+            });
+        });
+
         function query(q, offset, length) {
             if (!initialized) throw new Error('Search has not been initialized');
             return engine.search(q, offset, length);
@@ -55,13 +65,5 @@
         compodoc.search = {
             query: query
         };
-
-        engine.init()
-        .then(function() {
-            initialized = true;
-            compodoc.dispatchEvent({
-                type: compodoc.EVENTS.SEARCH_READY
-            });
-        });
     });
 })(compodoc);

frontend/documentation/js/search/search.js

@@ -1,5 +1,8 @@
 (function(compodoc) {
-    var usePushState = (typeof history.pushState !== 'undefined'),
+    var MAX_RESULTS = 15,
+        MAX_DESCRIPTION_SIZE = 500,
+
+        usePushState = (typeof history.pushState !== 'undefined'),
 
     // DOM Elements
         $body = $('body'),
@@ -20,7 +23,7 @@
             var ctx = this, args = arguments;
             if (!timeout) {
                 timeout = setTimeout(function() {
-                    timeout = undefined;
+                    timeout = null;
                     fn.apply(ctx, args);
                 }, wait);
             }
@@ -29,7 +32,6 @@
 
     function displayResults(res) {
         var noResults = res.count == 0;
-        var groups = {};
         $searchResults.toggleClass('no-results', noResults);
 
         // Clear old results
@@ -39,74 +41,30 @@
         $searchResultsCount.text(res.count);
         $searchQuery.text(res.query);
 
-        // Group result by context
+        // Create an <li> element for each result
         res.results.forEach(function(res) {
-            var context = res.title.split(' - ')[0];
-            if (typeof groups[context] === 'undefined') {
-                groups[context] = {
-                    results: [res]
-                }
-            } else {
-                groups[context].results.push(res)
-            }
-        });
-
-        var sortedGroups = Object.keys(groups).sort();
-
-        for (var i = 0; i < sortedGroups.length; i++) {
-            var property = sortedGroups[i];
-            
             var $li = $('<li>', {
-                'class': 'search-results-group'
+                'class': 'search-results-item'
             });
-            var finalPropertyLabel = '';
-            var propertyLabels = property.split('-');
-            
-            if (propertyLabels.length === 2 && propertyLabels[0] !== 'miscellaneous' && propertyLabels[0] !== 'additional') {
-                finalPropertyLabel = propertyLabels[0].charAt(0).toUpperCase() + propertyLabels[0].substring(1) + ' - ' + propertyLabels[1].charAt(0).toUpperCase() + propertyLabels[1].substring(1) + ' (' + groups[property].results.length + ')';
-            } else if (propertyLabels[0] === 'additional') {
-                finalPropertyLabel = 'Additional pages' + ' (' + groups[property].results.length + ')'
-            } else {
-                finalPropertyLabel = propertyLabels[0].charAt(0).toUpperCase() + propertyLabels[0].substring(1) + ' (' + groups[property].results.length + ')'
+
+            var $title = $('<h3>');
+
+            var $link = $('<a>', {
+                'href': res.url,
+                'text': res.title
+            });
+
+            var content = res.body.trim();
+            if (content.length > MAX_DESCRIPTION_SIZE) {
+                content = content.slice(0, MAX_DESCRIPTION_SIZE).trim()+'...';
             }
-            var $groupTitle = $('<h3>', {
-                'text': finalPropertyLabel
-            });
-            $groupTitle.appendTo($li);
-
-            var $ulResults = $('<ul>', {
-                'class': 'search-results-list'
-            })
-
-            groups[property].results.forEach(function(res) {
-                var link = '';
-                var $liResult = $('<li>', {
-                    'class': 'search-results-item'
-                });
-                switch (COMPODOC_CURRENT_PAGE_DEPTH) {
-                    case 0:
-                        link = './';
-                        break;
-                    case 1:
-                    case 2:
-                    case 3:
-                    case 4:
-                    case 5:
-                        link = '../'.repeat(COMPODOC_CURRENT_PAGE_DEPTH);
-                        break;
-                };
-                var finalResLabel = res.title.split(' - ')[1].charAt(0).toUpperCase() + res.title.split(' - ')[1].substring(1);
-                var $link = $('<a>', {
-                    'href': link + res.url,
-                    'text': finalResLabel
-                });
-                $link.appendTo($liResult);
-                $liResult.appendTo($ulResults);
-            });
-            $ulResults.appendTo($li);
+            var $content = $('<p>').html(content);
 
+            $link.appendTo($title);
+            $title.appendTo($li);
+            $content.appendTo($li);
             $li.appendTo($searchList);
-        }
+        });
     }
 
     function launchSearch(q) {
@@ -117,7 +75,7 @@
             $mainContainer.css('margin-top', '100px');
         }
 
-        throttle(compodoc.search.query(q, 0, MAX_SEARCH_RESULTS)
+        throttle(compodoc.search.query(q, 0, MAX_RESULTS)
         .then(function(results) {
             displayResults(results);
         }), 1000);
@@ -163,7 +121,6 @@
 
             if (q.length == 0) {
                 closeSearch();
-                window.location.href = window.location.href.replace(window.location.search, '');
             } else {
                 launchSearch(q);
             }
@@ -195,9 +152,7 @@
                 // Update history state
                 if (usePushState) {
                     var uri = updateQueryString('q', $(this).val());
-                    if ($(this).val() !== '') {
-                        history.pushState({ path: uri }, null, uri);
-                    }
+                    history.pushState({ path: uri }, null, uri);
                 }
             });
         });

frontend/documentation/js/svg-pan-zoom.controls.js

@@ -1,53 +1,23 @@
-document.addEventListener('DOMContentLoaded', function() {
-    if (document.getElementById('module-graph-svg')) {
-        panZoom = svgPanZoom(document.getElementById('module-graph-svg').querySelector('svg'), {
-            zoomEnabled: true,
-            minZoom: 1,
-            maxZoom: 5
-        });
-    
-        document.getElementById('zoom-in').addEventListener('click', function(ev) {
-            ev.preventDefault();
-            panZoom.zoomIn();
-        });
-    
-        document.getElementById('zoom-out').addEventListener('click', function(ev) {
-            ev.preventDefault();
-            panZoom.zoomOut();
-        });
-    
-        document.getElementById('reset').addEventListener('click', function(ev) {
-            ev.preventDefault();
-            panZoom.resetZoom();
-            panZoom.resetPan();
-        });
-    
-        var overviewFullscreen = false,
-            originalOverviewHeight;
-    
-        document.getElementById('fullscreen').addEventListener('click', function(ev) {
-            if (overviewFullscreen) {
-                document.getElementById('module-graph-svg').style.height = originalOverviewHeight;
-                overviewFullscreen = false;
-                if (ev.target) {
-                    ev.target.classList.remove('ion-md-close');
-                    ev.target.classList.add('ion-ios-resize');
-                }
-            } else {
-                originalOverviewHeight = document.getElementById('module-graph-svg').style.height;
-                document.getElementById('module-graph-svg').style.height = '85vh';
-                overviewFullscreen = true;
-                if (ev.target) {
-                    ev.target.classList.remove('ion-ios-resize');
-                    ev.target.classList.add('ion-md-close');
-                }
-            }
-            document.getElementById('module-graph-svg').querySelector('svg').style.height = document.getElementById('module-graph-svg').clientHeight;
-            setTimeout(function() {
-                panZoom.resize();
-                panZoom.fit();
-                panZoom.center();
-            }, 0)
-        });
-    }
+document.getElementById('demo-svg').addEventListener('load', function() {
+    panZoom = svgPanZoom('#demo-svg', {
+        zoomEnabled: true,
+        minZoom: 1,
+        maxZoom: 5
+    });
+
+    document.getElementById('zoom-in').addEventListener('click', function(ev) {
+        ev.preventDefault()
+        panZoom.zoomIn()
+    });
+
+    document.getElementById('zoom-out').addEventListener('click', function(ev) {
+        ev.preventDefault()
+        panZoom.zoomOut()
+    });
+
+    document.getElementById('reset').addEventListener('click', function(ev) {
+        ev.preventDefault()
+        panZoom.resetZoom();
+        panZoom.resetPan();
+    });
 });