WikiContent using easy-markdown-editor
This commit is contained in:
		@ -4,13 +4,14 @@ class WikiPages {
 | 
			
		||||
    /*
 | 
			
		||||
    * The container is the <ul> for the navigation panel
 | 
			
		||||
    */
 | 
			
		||||
    constructor(container) {
 | 
			
		||||
    constructor(container, onClickLoadPage) {
 | 
			
		||||
        this.ul = container;
 | 
			
		||||
        this.wikiId = null;
 | 
			
		||||
        this._onClickLoadPage = onClickLoadPage;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    clear() {
 | 
			
		||||
        this.ul.querySelectorAll('[data-wiki-id]').forEach( x=>x.remove() );
 | 
			
		||||
        this.wikiId = null;
 | 
			
		||||
        this.ul.querySelectorAll('[data-page-id]').forEach( x=>x.remove() );
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    getWikiId() {
 | 
			
		||||
@ -20,9 +21,8 @@ class WikiPages {
 | 
			
		||||
    load(wikiId) {
 | 
			
		||||
        const self = this;
 | 
			
		||||
        console.info('JDG :: Loading wiki', self.getWikiId() );
 | 
			
		||||
        this.wikiId = null;
 | 
			
		||||
        this.clear();
 | 
			
		||||
        if (wikiId<=0) {
 | 
			
		||||
            this.clear();
 | 
			
		||||
            return;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
@ -43,12 +43,7 @@ class WikiPages {
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    draw(pages, lvl=0, pid=0) {
 | 
			
		||||
        let self=this;
 | 
			
		||||
        if (lvl==0) {
 | 
			
		||||
            this.clear();
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        // pages = [{"id":880,"pid":0,"title":"WikiTest","sort":1},...]
 | 
			
		||||
        const self=this;
 | 
			
		||||
        pages
 | 
			
		||||
            .filter( x=>x.pid==pid )
 | 
			
		||||
            .sort( (a,b)=>a.sort - b.sort )
 | 
			
		||||
@ -56,43 +51,52 @@ class WikiPages {
 | 
			
		||||
                self.treeAdd(x.pid, x.id, x.title);
 | 
			
		||||
                self.draw(pages, lvl+1, x.id);
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        if (lvl==0) {
 | 
			
		||||
            this.ul.querySelectorAll('button[data-id="add"]').forEach(x => x.addEventListener('click', e=>self.onClickAdd(e)) );
 | 
			
		||||
            this.ul.querySelectorAll('button[data-id="delete"]').forEach(x => x.addEventListener('click', e=>self.onClickDelete(e)) );
 | 
			
		||||
            this.ul.querySelectorAll('button[data-id="rename"]').forEach(x => x.addEventListener('click', e=>self.onClickEdit(e)) );
 | 
			
		||||
            this.ul.querySelectorAll('.icon-close').forEach(x => x.addEventListener('click', e=>self.onClickClose(e)) );
 | 
			
		||||
            this.ul.querySelectorAll('.icon-checkmark').forEach(x => x.addEventListener('click', e=>self.onClickRename(e)) );
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // -----------------------------------------------------------------------------------------
 | 
			
		||||
    addListener(root) {
 | 
			
		||||
        const self = this;
 | 
			
		||||
        root.querySelectorAll('a[data-id="page"]').forEach(x => x.addEventListener('click', e=>self.onClickLoadPage(e)) );
 | 
			
		||||
        root.querySelectorAll('button[data-id="add"]').forEach(x => x.addEventListener('click', e=>self.onClickAdd(e)) );
 | 
			
		||||
        root.querySelectorAll('button[data-id="delete"]').forEach(x => x.addEventListener('click', e=>self.onClickDelete(e)) );
 | 
			
		||||
        root.querySelectorAll('button[data-id="rename"]').forEach(x => x.addEventListener('click', e=>self.onClickEdit(e)) );
 | 
			
		||||
        root.querySelectorAll('.icon-close').forEach(x => x.addEventListener('click', e=>self.onClickClose(e)) );
 | 
			
		||||
        root.querySelectorAll('.icon-checkmark').forEach(x => x.addEventListener('click', e=>self.onClickRename(e)) );
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    onClickLoadPage(e) {
 | 
			
		||||
        const li = e.target.closest("li[data-page-id]");
 | 
			
		||||
        let pageId = li.dataset.pageId;
 | 
			
		||||
        this._onClickLoadPage(this.wikiId, pageId);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    onClickEdit(e) {
 | 
			
		||||
        const li = e.target.closest("li[data-wiki-id]");
 | 
			
		||||
        const li = e.target.closest("li[data-page-id]");
 | 
			
		||||
        li.querySelector("input").value = li.querySelector("a").innerText; 
 | 
			
		||||
        li.classList.add("editing");
 | 
			
		||||
    }
 | 
			
		||||
    onClickClose(e) {
 | 
			
		||||
        const li = e.target.closest("li[data-wiki-id]");
 | 
			
		||||
        const li = e.target.closest("li[data-page-id]");
 | 
			
		||||
        li.classList.remove("editing");
 | 
			
		||||
    }
 | 
			
		||||
    onClickRename(e) {
 | 
			
		||||
        const li = e.target.closest("li[data-wiki-id]");
 | 
			
		||||
        const li = e.target.closest("li[data-page-id]");
 | 
			
		||||
        li.classList.remove("editing");
 | 
			
		||||
 | 
			
		||||
        let pageId = li.dataset.wikiId;
 | 
			
		||||
        let pageId = li.dataset.pageId;
 | 
			
		||||
        let value = li.querySelector('input').value;
 | 
			
		||||
        this.rename(pageId, value);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    onClickAdd(e) {
 | 
			
		||||
        const li = e.target.closest("li[data-wiki-id]");
 | 
			
		||||
        this.newPage(li?li.dataset.wikiId:0);
 | 
			
		||||
        const li = e.target.closest("li[data-page-id]");
 | 
			
		||||
        this.newPage(li?li.dataset.pageId:0);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    onClickDelete(e) {
 | 
			
		||||
        const li = e.target.closest("li[data-wiki-id]");
 | 
			
		||||
        let pageId = li.dataset.wikiId;
 | 
			
		||||
        const self = this;
 | 
			
		||||
        const li = e.target.closest("li[data-page-id]");
 | 
			
		||||
        let pageId = li.dataset.pageId;
 | 
			
		||||
        let pageTitle = li.querySelector('a').innerHTML;
 | 
			
		||||
 | 
			
		||||
        OC.dialogs.confirm( t(appName, 'Delete the wiki page "{title}"?', {title:pageTitle}),
 | 
			
		||||
@ -129,7 +133,7 @@ class WikiPages {
 | 
			
		||||
 | 
			
		||||
    // -----------------------------------------------------------------------------------------
 | 
			
		||||
    treeDelete(pageId) {
 | 
			
		||||
        const x = this.ul.querySelector(`[data-wiki-id="${pageId}"]`);
 | 
			
		||||
        const x = this.ul.querySelector(`[data-page-id="${pageId}"]`);
 | 
			
		||||
        const pid = x.dataset.pid;
 | 
			
		||||
        x.parentNode.remove(x);
 | 
			
		||||
        this.treeDeleteChildren(pageId);
 | 
			
		||||
@ -139,19 +143,19 @@ class WikiPages {
 | 
			
		||||
        this.ul
 | 
			
		||||
            .querySelectorAll(`[data-pid="${pageId}"]`)
 | 
			
		||||
            .forEach(x=>{
 | 
			
		||||
                        self.treeDeleteBranch( x.dataset.wikiId );
 | 
			
		||||
                        self.treeDeleteChildren( x.dataset.pageId );
 | 
			
		||||
                        x.parentNode.remove(x);
 | 
			
		||||
                    }
 | 
			
		||||
                );
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    treeRename(pageId, title) {
 | 
			
		||||
        this.ul.querySelector(`[data-wiki-id="${pageId}"] a`).innerHTML = title;
 | 
			
		||||
        this.ul.querySelector(`[data-page-id="${pageId}"] a`).innerHTML = title;
 | 
			
		||||
    }
 | 
			
		||||
    
 | 
			
		||||
    treeAdd(pid, pageId, title) {
 | 
			
		||||
        let lvl = 0;        
 | 
			
		||||
        let nextNode, lastNode, parent = this.ul.querySelector(`[data-wiki-id="${pid}"]`);
 | 
			
		||||
        let nextNode, lastNode, parent = this.ul.querySelector(`[data-page-id="${pid}"]`);
 | 
			
		||||
        if ( parent===null ) {
 | 
			
		||||
            lastNode = this.ul.lastChild;
 | 
			
		||||
        } else {
 | 
			
		||||
@ -163,14 +167,12 @@ class WikiPages {
 | 
			
		||||
            } while(nextNode && nextNode.dataset.pid!=parent.dataset.pid);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
        const bullet = ' - ';
 | 
			
		||||
        let li = document.createElement("li");
 | 
			
		||||
        // li.classList.add("editing");
 | 
			
		||||
        li.dataset.wikiId = pageId;
 | 
			
		||||
        li.classList.add(`wikiPage-lvl-${lvl}`);
 | 
			
		||||
        li.dataset.pageId = pageId;
 | 
			
		||||
        li.dataset.pid = pid||this.wikiId;
 | 
			
		||||
        li.dataset.lvl = lvl;
 | 
			
		||||
        li.innerHTML = `<a href="#">${bullet.repeat(lvl)} ${title}</a>
 | 
			
		||||
        li.innerHTML = `<a href="#" data-id="page">${title}</a>
 | 
			
		||||
        <div class="app-navigation-entry-utils">
 | 
			
		||||
            <ul>
 | 
			
		||||
                <li class="app-navigation-entry-utils-menu-button">
 | 
			
		||||
@ -202,6 +204,7 @@ class WikiPages {
 | 
			
		||||
		</ul>
 | 
			
		||||
		</div>        
 | 
			
		||||
        `;
 | 
			
		||||
        this.addListener(li);
 | 
			
		||||
 | 
			
		||||
        lastNode.parentNode.insertBefore(li, lastNode.nextSibling)
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										30
									
								
								js/script.js
									
									
									
									
									
								
							
							
						
						
									
										30
									
								
								js/script.js
									
									
									
									
									
								
							@ -34,38 +34,12 @@ var MyWiki = MyWiki || {};
 | 
			
		||||
        appNavigationEntryMenuClose();        
 | 
			
		||||
    })
 | 
			
		||||
    // ------------------------------------------------
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    let wikiPages = new WikiPages(document.querySelector('li[data-id="pages"]').parentNode, onSelectWikiPage);
 | 
			
		||||
    let wikiContent = new WikiContent(document.getElementById('app-content-wrapper'));
 | 
			
		||||
    let wikiPages = new WikiPages(document.querySelector('li[data-id="pages"]').parentNode, (wikiId, pageId)=>wikiContent.load(wikiId, pageId));
 | 
			
		||||
    let wikiNavigation = new WikiNavigation(document.querySelector('li[data-id="wikis"]'), 
 | 
			
		||||
                                wikiId => wikiPages.load(wikiId),
 | 
			
		||||
                                e=>wikiPages.onClickAdd(e)
 | 
			
		||||
                            );
 | 
			
		||||
    
 | 
			
		||||
    function onSelectWikiPage(wikiPageId) {
 | 
			
		||||
        console.info(`JDG :: WikiPage selected ${wikiPageId}` );
 | 
			
		||||
        if ( wikiPageId > 0 ) {
 | 
			
		||||
            // wikiEditor.load(wikiPage.getWikiId(), wikiPageId );
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // ---------------------------------------------------------------------------------
 | 
			
		||||
    $(`#${appName}-test`).on('click',test);
 | 
			
		||||
    function test() {
 | 
			
		||||
        var baseUrl = OC.generateUrl('/apps/mywiki/wikis');
 | 
			
		||||
        $.ajax({
 | 
			
		||||
            url: baseUrl + '/test',
 | 
			
		||||
            type: 'GET',
 | 
			
		||||
            contentType: 'application/json'
 | 
			
		||||
        }).done(function (response) {
 | 
			
		||||
            // handle success
 | 
			
		||||
            $('output').html(response);
 | 
			
		||||
        }).fail(function (response, code) {
 | 
			
		||||
            // handle failure
 | 
			
		||||
            $('output').html('<h2>'+response.statusText+'</h2><code>'+response.responseText+'</code>');
 | 
			
		||||
        });
 | 
			
		||||
    }
 | 
			
		||||
    // ---------------------------------------------------------------------------------
 | 
			
		||||
 | 
			
		||||
})(window, jQuery, MyWiki);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user