libreqda 1.2.0__py3-none-any.whl

taguette/static/js/polling-event.js

@@ -0,0 +1,145 @@
+/*
+ * Long polling
+ */
+
+let lastPoll = null;
+let polling = true;
+let windowLastActive = new Date();
+
+if (document.hasFocus()) {
+    windowLastActive = null; // Focused now
+}
+
+window.addEventListener('focus', function () {
+    // We are active as long as we have the focus
+    windowLastActive = null;
+    maybeResumePolling();
+});
+window.addEventListener('mousemove', function () {
+    if (windowLastActive !== null) {
+        // If the mouse moved over the window, and we're not focused, refresh timer
+        windowLastActive = new Date();
+        maybeResumePolling();
+    }
+});
+window.addEventListener('blur', function () {
+    // We lost focus, start timer
+    windowLastActive = new Date();
+});
+
+function maybeResumePolling() {
+    if (!polling) {
+        longPollForEvents();
+    }
+}
+
+function longPollForEvents() {
+    // If we've been inactive for 10min, pause polling for now
+    if (windowLastActive !== null && (new Date() - windowLastActive > 600000)) {
+        log("Browser window inactive, stop polling");
+        polling = false;
+        return;
+    }
+
+    polling = true;
+    lastPoll = Date.now();
+    getJSON(
+        `/api/project/${project_id}/events`,
+        {version: version, from: last_event}
+    )
+        .then(function (result) {
+            if (result.reload) {
+                log("Server sent signal to reload");
+                window.location.reload();
+                return;
+            }
+            for (let i = 0; i < result.events.length; ++i) {
+                const event = result.events[i];
+                if (event.type === 'project_meta') {
+                    setProjectMetadata({
+                        project_name: event.project_name,
+                        description: event.description
+                    });
+                } else if (event.type === 'document_add') {
+                    addDocument({
+                        id: event.document_id,
+                        name: event.document_name,
+                        description: event.description,
+                        favorite: event.favorite,
+                        text_direction: event.text_direction,
+                        collections: event.collections
+                    });
+                } else if (event.type === 'document_delete') {
+                    deleteDocument(event.document_id);
+                } else if (event.type === 'highlight_add') {
+                    addHighlight({
+                        id: event.highlight_id,
+                        start_offset: event.start_offset,
+                        end_offset: event.end_offset,
+                        snippet: event.snippet,
+                        tags: event.tags
+                    }, event.document_id);
+                } else if (event.type === 'highlight_delete') {
+                    removeHighlight(event.highlight_id, event.document_id);
+                } else if (event.type === 'tag_add') {
+                    addTag({
+                        id: event.tag_id,
+                        path: event.tag_path,
+                        description: event.description,
+                        color: event.tag_color,
+                        parent: event.tag_parent
+                    });
+                } else if (event.type === 'tag_delete') {
+                    removeTag(event.tag_id);
+                } else if (event.type === 'tag_merge') {
+                    mergeTags(event.src_tag_id, event.dest_tag_id);
+                } else if (event.type === 'member_add') {
+                    addMember(event.member, event.privileges);
+                } else if (event.type === 'member_remove') {
+                    removeMember(event.member);
+                } else if (event.type === 'collection_add') {
+                    addCollection({
+                        id: event.collection_id,
+                        name: event.collection_name,
+                        description: event.description,
+                        parent_id: event.parent_id,
+                        document_ids: event.document_ids
+                    });
+                } else if (event.type === 'collection_delete') {
+                    removeCollection(event.collection_id);
+                } else if (event.type === 'collection_update') {
+                    updateCollection({
+                        id: event.collection_id,
+                        name: event.collection_name,
+                        description: event.description,
+                        parent_id: event.parent_id,
+                        document_ids: event.document_ids
+                    });
+                }
+
+                if ('tag_count_changes' in event) {
+                    updateTagCount(event.tag_count_changes)
+                }
+                last_event = event.id;
+            }
+
+            // Re-open connection
+            setTimeout(longPollForEvents, 1);
+        }, function (error) {
+            log("Polling failed", 'error', {error})
+            if (error instanceof ApiError && error.status === 403) {
+                showAlert(gettext("It appears that you have been logged out."));
+                window.location = '/';
+            } else if (error instanceof ApiError && error.status === 404) {
+                showAlert(gettext("You can no longer access this project."));
+                window.location = '/';
+            } else {
+                setTimeout(longPollForEvents, Math.max(1, 5000 + lastPoll - Date.now()));
+            }
+        })
+        .catch(function (error) {
+            log("Polling function error", 'error', {error})
+        });
+}
+
+longPollForEvents();

taguette/static/js/project/intro.js

@@ -0,0 +1,524 @@
+if((demo_highlights_location.length < 3)) {
+    demo_highlights_location = [[],[],[]]; //Default empty value
+}
+
+$(document).ready(function() {
+    let demoElement = null,
+        introjs_selection = null,
+        current_step = 0,
+        home_intro = introJs().setOptions({
+            exitOnOverlayClick: true,
+            exitOnEsc: true,
+            steps: [
+                {
+                    title: gettext('Welcome to LibreQDA, a qualitative data analysis software (QDA) developed by the Plateforme en humanités numériques (PHuN) at Université de Sherbrooke.'),
+                    intro: gettext('<p>Visit our <a href="https://gitlab.com/bin-cirst/libreqda/libre-qda" target="_blank">Gitlab repository</a></p>'),
+                },
+                {
+                    element: document.querySelector('#intro-documentation'),
+                    intro: gettext('<p>To consult the documentation</p>'),
+                    position: 'bottom'
+                },
+                {
+                    element: $('#demo-project-container .col:first')[0],
+                    intro: gettext('<p>A demo project has been added to your home page.</p>'),
+                    position: 'top',
+                    doAction: 'create-demo-project'
+                },
+            ]
+        }).
+        setOption('disableInteraction', true).
+        setOption("nextLabel", gettext('Next')).
+        setOption("prevLabel", gettext('Back')).
+        setOption("doneLabel", gettext('Continue')).
+        onbeforechange(function (targetElement) {
+            if(this._introItems[this._currentStep].doAction) {
+                switch (this._introItems[this._currentStep].doAction) {
+                    case 'create-demo-project':
+                        if(demoElement === null) {
+                            createDemoProject();
+                        }
+                        break;
+                }
+            }
+        }).
+        onafterchange(function(targetElement) {
+            if(this._introItems[this._currentStep].doAction) {
+                switch (this._introItems[this._currentStep].doAction) {
+                    case 'create-demo-project':
+                        setTimeout(function(){
+                            repositionIntroJS('right');
+                        }, 500);
+                        break;
+                }
+            }
+        }).
+        oncomplete(function () {
+            if(demoElement !== null) {
+                demoElement.trigger('click');
+            }
+        }),
+        project_intro = introJs().setOptions({
+            showProgress: true,
+            exitOnOverlayClick: true,
+            exitOnEsc: true,
+            hidePrev: true,
+            keyboardNavigation: false,
+            showBullets: false,
+            steps: [
+                {
+                    element: document.querySelector("#right-panel"),
+                    title: gettext('Your documents'),
+                    intro: gettext('<p>Use this tab to load files and go through them.</p>'),
+                    position: 'right',
+                },
+                { // #1
+                    element: document.querySelector("#left-panel"),
+                    title: gettext('Codebook'),
+                    intro: gettext('<p>This tab lists all the codes that have been defined. Add new codes with the button dedicated to that purpose.</p><br><p>The total number of uses is indicated by the number on the right, and the number of documents on the left.</p>'),
+                    position: 'right'
+                },
+                { // #2
+                    element: document.querySelector("#treeview-tags"),
+                    title: gettext('Parent codes'),
+                    intro: gettext('<p>You can define codes that include child codes under them.</p>'),
+                    position: 'right'
+                },
+                { // #3
+                    element: $("[data-nodeid='1']")[0],
+                    title: gettext('Child codes'),
+                    intro: gettext('<p>These can be expanded or collapsed.</p>'),
+                    position: 'right',
+                    doAction: 'expand-tag-childrens'
+                },
+                { // #4
+                    element: $(".document-link:first")[0],
+                    title: gettext('Consulting documents'),
+                    intro: gettext('<p>Click on a document to view its contents. Use the star to save your bookmarks.</p>'),
+                    position: 'left',
+                    doAction: 'expand-first-collection'
+                },
+                { // #5
+                    element: document.querySelector("#document-highlight"), // This element doesn't exist
+                    title: gettext('Coding'),
+                    intro: gettext('<p>Select a portion of text with your cursor. Two buttons will appear to assign a code to the selection.</p>'),
+                    position: 'bottom',
+                    highlight: (typeof(demo_highlights_location[0][0]) !== 'undefined') ? demo_highlights_location[0][0] : [0,0],
+                    nodes: [null, null],
+                    highlight_context: [0, 0],
+                    doAction: 'document-highlight' // Action to create wrapper for introjs
+                },
+                { // #6
+                    element: document.querySelector("#highlight-add-form"),
+                    title: gettext("Selecting a code"),
+                    intro: gettext('<p>From the menu, select one or more codes that correspond to the content of the selection and save the changes. In this case, the selection refers to reinforcing social relationships.</p>'),
+                    position: 'left',
+                    tagPosition: [3],
+                    doAction: 'document-selecttag' // Action to create wrapper for introjs
+                },
+                { //#14
+                    element: document.querySelector("#left-panel"),
+                    title: gettext('Exploring the codes'),
+                    intro: gettext('<p>You can explore the text selections tagged with each code at any time during or after the coding process.</p><br><p> Show all of the selections tagged with a code from the codebook by clicking on it.</p>'),
+                    position: 'right',
+                },
+                { //#15
+                    element: document.querySelector("#document-view"),
+                    title: gettext('Narrowing your search'),
+                    intro: gettext('<p>If there are a large number of selections shown, you can refine the results with an advanced search.</p>'),
+                    position: 'left',
+                    doAction: 'exploration-mode'
+                },
+                { //#16
+                    element: document.querySelector(".context-menu-root"),
+                    title: gettext('Conditional selections'),
+                    intro: gettext('<p>By right-clicking, you can specify conditions to either add or exclude additional codes.</p>'),
+                    position: 'left',
+                    which: 2,
+                    doAction: 'select-condition'
+                },
+                { //#17
+                    element: document.querySelector("#document-view"),
+                    title: gettext('Exploring the list'),
+                    intro: gettext('<p>The labels shown with this query indicate that the selections must necessarily include the codes <i>barriers</i> and <i>skills development</i>.</p>'),
+                    position: 'left',
+                    doAction: 'apply-condition'
+                },
+                { //#18
+                    element: $('#document-contents .highlight-entry:first .badge')[0],
+                    title: gettext('Navigating to documents'),
+                    intro: gettext('<p>By clicking on the name of the document, you can return to the context.</p>'),
+                    position: 'top',
+                    doAction: 'select-badge'
+                },
+                { //#19
+                    element: document.querySelector('#tag-selection-return'),
+                    title: gettext('Returning to the selections'),
+                    intro: gettext('<p>After consulting the context, you can return to the list of selections previously identified using the advanced search.</p>'),
+                    position: 'right',
+                    doAction: 'reposition-after-scroll'
+                },
+                { //#20
+                    element: document.querySelector('#document-dropdown-export'),
+                    title: gettext('Exporting'),
+                    intro: gettext('<p>You can choose to download these selections to your computer, as needed.</p>'),
+                    position: 'left',
+                },
+                { //#22
+                    title: gettext('Time to code!'),
+                    intro: gettext('<p>Use LibreQDA however you wish, knowing that your data is always saved to your personal account. Feel free to further familiarize yourself with these functions by continuing to code and explore these fictional interviews about board games.</p>'),
+                    position: 'left',
+                    doAction: 'last'
+                },
+            ]
+        }).
+        setOption('disableInteraction', true).
+        setOption('scrollTo', 'tooltip').
+        setOption("nextLabel", gettext('Next')).
+        setOption("prevLabel", gettext('Back')).
+        setOption("doneLabel", gettext('Done')).
+        onbeforechange(function(targetElement) {
+            if(this._introItems[this._currentStep] &&
+               this._introItems[this._currentStep].doAction === 'document-highlight') {
+                let dh_start = this._introItems[this._currentStep].highlight[0],
+                    dh_end   = this._introItems[this._currentStep].highlight[1],
+                    hlContainer = document.getElementById('highlight-content');
+
+                if (hlContainer && typeof collectTextNodes === 'function') {
+                    try {
+                        const textNodes = collectTextNodes(hlContainer);
+                        const { fullText, charMap } = buildCharMap(textNodes);
+                        const startChar = getCharIndexFromUTF8Index(fullText, dh_start);
+                        const endChar   = getCharIndexFromUTF8Index(fullText, dh_end);
+                        const startEntry = charMap[Math.max(0, startChar)];
+                        const endEntry   = charMap[Math.min(charMap.length - 1, Math.max(0, endChar - 1))];
+
+                        if (startEntry && endEntry) {
+                            this._introItems[this._currentStep].nodes = [startEntry.node, endEntry.node];
+                            this._introItems[this._currentStep].highlight_context = [startEntry.offset, endEntry.offset + 1];
+                            const startBlock = startEntry.node.parentElement.closest('p, li, h1, h2, h3, h4, h5, h6, .document-chunk') || hlContainer;
+                            $(startBlock).addClass('intro-js-highlight');
+                        }
+                    } catch(e) {
+                        log('document-highlight action failed:', 'warn', e);
+                    }
+                }
+
+                $(".intro-js-highlight").wrapAll("<div id='document-highlight' />");
+                this._introItems[this._currentStep].element = $("#document-highlight")[0] ||
+                    hlContainer ||
+                    document.getElementById('document-contents');
+                targetElement = this._introItems[this._currentStep].element;
+            }
+
+            if(targetElement) {
+                // Always submit previous step before continuing
+                if($("#highlight-add-modal").hasClass('show')) {
+                    $("#highlight-add-form").submit();
+                    introjs_selection = null;
+                }
+                if($("#tag-add-modal").hasClass('show')) {
+                    $("#tag-add-form button[type='submit']").trigger('click');
+                }
+
+                switch(targetElement.id) {
+                    case 'tag-selection-return':
+                        $('#document-contents .highlight-entry:first .badge')[0].click();
+                        this._introItems[this._currentStep].element = $("#tag-selection-return")[0];
+                        break;
+
+                    case 'document-dropdown-export':
+                        window.scrollTo({
+                            top: 0,
+                            behavior: 'instant'
+                        });
+                        $("#tag-selection-return a").click();
+                        break;
+                }
+                if(this._introItems[this._currentStep].doAction) {
+                    switch(this._introItems[this._currentStep].doAction) {
+                        case 'expand-tag-childrens':
+                            $("[data-nodeid='1'] .expand-icon").trigger('click');
+                            for(let i=1; i<=3; i++) {
+                                $("[data-nodeid='" + i + "']").addClass('intro-js-tags-child')
+                            }
+                            $( ".intro-js-tags-child" ).wrapAll( "<div id='intro-js-wrapped' />");
+                            // Fix duplicate elements
+                            $("#intro-js-wrapped > li:eq(3)").remove();
+                            // Force refresh dynamic element
+                            this._introItems[this._currentStep].element = $("#intro-js-wrapped")[0];
+                            break;
+                        case 'expand-first-collection':
+                            // Expand the first collection node to reveal documents
+                            if(typeof treeview_documents !== 'undefined' && treeview_documents.length) {
+                                try {
+                                    // Get the first node (should be a collection) and expand it
+                                    const allNodes = treeview_documents.treeview('getEnabled');
+                                    if(allNodes && allNodes.length > 0) {
+                                        const firstNode = allNodes[0];
+                                        if(firstNode && !firstNode.state.expanded) {
+                                            treeview_documents.treeview('expandNode', [firstNode.nodeId, {silent: false}]);
+                                        }
+                                    }
+                                } catch(e) {
+                                    // Fallback to clicking expand icon
+                                    $("#treeview-documents .expand-icon:first").trigger('click');
+                                }
+                            }
+                            // Force refresh dynamic element after expansion
+                            this._introItems[this._currentStep].element = $(".document-link:first")[0];
+                            const firstDocLink = $(".document-link:first");
+                            if (firstDocLink.length) {
+                                const introDocId = parseInt(firstDocLink.attr('data-document-id'));
+                                if (introDocId && typeof loadDocument === 'function') {
+                                    loadDocument(introDocId);
+                                }
+                            }
+                            break;
+
+                        case 'document-selecttag':
+                            let tag_position = this._introItems[this._currentStep].tagPosition;
+                            if(typeof tag_position === "undefined") {
+                                tag_position = [0];
+                            }
+                            $(window).trigger('click');
+                            $('#highlight-add-modal').removeClass('fade');
+
+                            if (!introjs_selection) {
+                                const hlStep = this._introItems[this._currentStep - 1];
+                                if (hlStep && hlStep.nodes && hlStep.nodes[0]) {
+                                    selectRange(hlStep.nodes, hlStep.highlight_context);
+                                }
+                            }
+                            if (introjs_selection) {
+                                createHighlight(introjs_selection);
+                                for(let i in tag_position) {
+                                    $("#highlight-add-form li[data-nodeid='" + tag_position[i] + "']").trigger('click');
+                                }
+                            }
+
+                            $(window).unbind('click');
+                            break;
+                        case 'exploration-mode':
+                            $("[data-nodeid='0']:not(.node-selected)").click();
+                            // Reposition
+                            setTimeout(function() {
+                                window.scrollTo({
+                                    top: 0,
+                                    behavior: 'instant'
+                                });
+                                $('.introjs-tooltipReferenceLayer').css('height', $(targetElement).outerHeight())
+                                $('.introjs-helperLayer').css('height', $(targetElement).outerHeight())
+                                $('.introjs-disableInteraction').css('height', $(targetElement).outerHeight())
+                            }, 500);
+                            break;
+                        case 'select-condition':
+                            let i = this._introItems[this._currentStep].which;
+                            if(isNaN(i)) {
+                                i = 0;
+                            }
+                            window.scrollTo({
+                                top: 0,
+                                behavior: 'instant'
+                            });
+                            if(!$("[data-nodeid='2']").is(':visible')) {
+                                $("[data-nodeid='1'] .expand-icon").trigger('click');
+                            }
+                            $("[data-nodeid='2']").trigger( "contextmenu" );
+                            $(".context-menu-root li:nth(" + i + ")").addClass('context-menu-hover context-menu-visible');
+                            $(".context-menu-root li:nth(" + i + ") > ul").css('left', $(".context-menu-root").width() + 'px');
+                            $(".context-menu-root li:nth(" + i + ") > ul > li:first").addClass('context-menu-hover context-menu-visible');
+                            this._introItems[this._currentStep].element = $(".context-menu-root")[0];
+                            break;
+                        case 'apply-condition':
+                            $(".context-menu-root li.context-menu-visible > ul > li.context-menu-hover").trigger('mouseup');
+                            break;
+                        case 'select-badge':
+                            this._introItems[this._currentStep].element = $('#document-contents .highlight-entry:first .badge')[0];
+                            break;
+                        case 'reposition-after-scroll':
+                            setTimeout(function() {
+                                //Force scroll to bottom of page
+                                window.scrollTo({
+                                    top: document.body.scrollHeight,
+                                    behavior: 'instant'
+                                });
+
+                                let elems = ['.introjs-helperLayer', '.introjs-tooltipReferenceLayer', '.introjs-disableInteraction'],
+                                    offset = $('#tag-selection-return').offset().top - $('.introjs-tooltipReferenceLayer').offset().top;
+
+                                for (let i in elems) {
+                                    $(elems[i]).css('top', (parseFloat($(elems[i]).css('top')) + offset) + 'px');
+                                }
+                            }, 500);
+                            break;
+                        case 'last':
+                            $('#project-sidebar').css('width', 0);
+                            break;
+                    }
+                }
+                //Scroll to top if new document to prevent position problem with introjs
+                if(targetElement.classList.contains('document-link')) {
+                    window.scrollTo({
+                        top: 0,
+                        behavior: 'instant'
+                    });
+                }
+            }
+        }).
+        onchange(function (targetElement) {
+            current_step = this._currentStep;
+        }).
+        onafterchange(function(targetElement) {
+            switch(targetElement.id) {
+                case 'document-highlight':
+                    $(".intro-js-highlight").unwrap().removeClass('intro-js-highlight');
+                    let node_start = this._introItems[this._currentStep].nodes[0],
+                        node_end = this._introItems[this._currentStep].nodes[1],
+                        text_start = this._introItems[this._currentStep].highlight_context[0],
+                        text_end = this._introItems[this._currentStep].highlight_context[1];
+                    console.log([[node_start, node_end], [text_start, text_end]])
+                    setTimeout(function(){
+                        selectRange([node_start, node_end], [text_start, text_end]);
+                        repositionIntroJS('top');
+                    }, 500);
+                    //Force reselection of text is unselected
+                    $(window).bind('click', function(e) {
+                        selectRange([node_start, node_end], [text_start, text_end]);
+                    });
+                    break;
+
+                case 'document-dropdown-export':
+                    setTimeout(function(){
+                        $("#document-dropdown-export").click()
+                        $('.introjs-helperLayer').css('width', $('#document-export-dropdown-menu').outerWidth() + 10)
+                        $('.introjs-helperLayer').css('height', $('#document-export-dropdown-menu').outerHeight() + $('.introjs-helperLayer').outerHeight())
+                        $('.introjs-disableInteraction').css('width', $('#document-export-dropdown-menu').outerWidth() + 10)
+                        $('.introjs-disableInteraction').css('height', $('#document-export-dropdown-menu').outerHeight() + $('.introjs-helperLayer').outerHeight())
+                    }, 500);
+                    break;
+            }
+            if(this._introItems[this._currentStep].doAction) {
+                switch(this._introItems[this._currentStep].doAction) {
+                    case 'expand-first-collection':
+                        setTimeout(function(){
+                            repositionIntroJS('left');
+                        }, 300);
+                        break;
+                    case 'select-condition':
+                        setTimeout(function(){
+                            repositionIntroJS('right', 275);
+                        }, 500);
+                        break;
+                    case 'select-badge':
+                        setTimeout(function(){
+                            repositionIntroJS('right', 15);
+                        }, 500);
+                        break;
+                }
+            }
+        }).
+        oncomplete(function (){
+            $("#start-tutorial").remove();
+        }).
+        onexit(function () {
+            is_demo = true;
+            //Make sure everything is back as it was
+            $( ".intro-js-tags-child" ).unwrap();
+            $( ".intro-js-highlight" ).unwrap();
+            $( ".document-highlight" ).unwrap();
+            $(window).unbind('click');
+        });
+
+    function createDemoProject() {
+        log('Create demo project');
+        let postData = {'_xsrf': getCookie('_xsrf')};
+        postJSON('/api/create_demo_project', postData)
+            .then(function (result) {
+                if (result.html) {
+                    $('#demo-project-container').prepend(result.html);
+                    demoElement = $('#demo-project-container .project:first .project-card');
+                    $('#demo-project-container .project.empty').remove();
+                }
+            })
+    }
+
+    let repositionIntroJS = (where='top', offset=0) => {
+            //Remove position classes from tooltip
+            let cls = $('.introjs-arrow').attr("class").split(/\s+/);
+            for(let c in cls) {
+                if(cls[c] !== 'introjs-arrow') {
+                    $('.introjs-arrow').removeClass(cls[c]);
+                }
+            }
+            cls = $('.introjs-tooltip').attr("class").split(/\s+/);
+            for(let c in cls) {
+                if(cls[c] !== 'introjs-tooltip') {
+                    $('.introjs-tooltip').removeClass(cls[c]);
+                }
+            }
+
+            //set new position
+            switch(where) {
+                case 'top':
+                    let newtop = -$('.introjs-tooltip').outerHeight() + offset;
+                    $('.introjs-tooltip')
+                        .addClass('introjs-top-middle-aligned')
+                        .css('top', newtop + 'px')
+                        .css('margin-top', '-10px');
+                    $('.introjs-arrow').css('display', 'inherit').addClass('bottom-middle');
+                    break;
+                case 'left':
+                    $('.introjs-tooltip')
+                        .addClass('introjs-left-middle-aligned')
+                        .css('left', -$('.introjs-tooltip').outerWidth() + 'px')
+                        .css('margin-right', -offset + 'px');
+                    $('.introjs-arrow').css('display', 'inherit').addClass('right');
+                    break;
+                case 'right':
+                    $('.introjs-tooltip')
+                        .addClass('introjs-right-middle-aligned')
+                        .css('left', $('.introjs-helperLayer').outerWidth() + 'px')
+                        .css('margin-left', offset + 'px');
+                    $('.introjs-arrow').css('display', 'inherit').addClass('left');
+                    $('.introjs-disableInteraction').css('width', ($('.introjs-tooltip').offset().left - $('.introjs-disableInteraction').offset().left) + 'px');
+                    break;
+            }
+        },
+        showHomeIntro = () => {
+            home_intro.start();
+        },
+        selectRange = (nodes, positions) => {
+            let range=document.createRange(),
+                selection = window.getSelection();
+            range.setStart(nodes[0], positions[0]);
+            range.setEnd(nodes[1], positions[1]);
+            selection.removeAllRanges();
+            selection.addRange(range);
+
+            introjs_selection = describeSelection();
+        },
+        showProjectIntro = (step=1) => {
+            project_intro.start();
+            if(step && !isNaN(step) && step > 0) {
+                log(`IntroJS : Go to step: ${step}`)
+                project_intro.goToStepNumber(step);
+            }
+        }
+
+    $("#a-start-demo").click(function(){
+        showHomeIntro();
+    });
+
+    $("#start-tutorial").click(function(){
+        showProjectIntro(current_step+1);
+    });
+
+    if($("#a-start-demo").length && is_demo) {
+        // In index.html template
+        showHomeIntro();
+    } else if(is_demo) {
+        // In project.html template
+        showProjectIntro();
+    }
+});