From 6f1b0564e2008f50cd6cb5cd2ec97a8ccbdcfac7 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Thu, 14 Dec 2017 16:48:12 +0000 Subject: [PATCH] improved TOC/page jumps --- gui/app/components/document/document-toc.js | 35 +++--- gui/app/components/document/view-content.js | 15 ++- gui/app/pods/document/index/controller.js | 117 +++++++++++--------- gui/app/pods/document/index/route.js | 10 ++ gui/app/pods/document/index/template.hbs | 18 +-- 5 files changed, 105 insertions(+), 90 deletions(-) diff --git a/gui/app/components/document/document-toc.js b/gui/app/components/document/document-toc.js index 910614df..3fb10a29 100644 --- a/gui/app/components/document/document-toc.js +++ b/gui/app/components/document/document-toc.js @@ -10,16 +10,18 @@ // https://documize.com import { computed } from '@ember/object'; -import { schedule } from '@ember/runloop'; +import { schedule } from '@ember/runloop' +import { inject as service } from '@ember/service'; import Component from '@ember/component'; import tocUtil from '../../utils/toc'; import NotifierMixin from '../../mixins/notifier'; export default Component.extend(NotifierMixin, { + documentService: service('document'), document: {}, folder: {}, pages: [], - currentPageId: "", + currentPageId: '', state: { actionablePage: false, upDisabled: true, @@ -40,6 +42,8 @@ export default Component.extend(NotifierMixin, { if (is.not.null(this.get('currentPageId'))) { this.send('onEntryClick', this.get('currentPageId')); } + + this.setState(this.get('currentPageId')); }, didInsertElement() { @@ -49,11 +53,6 @@ export default Component.extend(NotifierMixin, { this.eventBus.subscribe('documentPageAdded', this, 'onDocumentPageAdded'); this.eventBus.subscribe('resized', this, 'onResize'); - - schedule('afterRender', () => { - // let dg = $('#doc-toc').draggabilly({}); - // this.set('dg', dg); - }); }, willDestroyElement() { @@ -190,9 +189,6 @@ export default Component.extend(NotifierMixin, { if (pendingChanges.length > 0) { this.attrs.onPageSequenceChange(pendingChanges); - - this.send('onEntryClick', this.get('currentPageId')); - this.showNotification("Moved up"); } }, @@ -209,9 +205,6 @@ export default Component.extend(NotifierMixin, { if (pendingChanges.length > 0) { this.attrs.onPageSequenceChange(pendingChanges); - - this.send('onEntryClick', this.get('currentPageId')); - this.showNotification("Moved down"); } }, @@ -228,9 +221,6 @@ export default Component.extend(NotifierMixin, { if (pendingChanges.length > 0) { this.attrs.onPageLevelChange(pendingChanges); - - this.showNotification("Indent"); - this.send('onEntryClick', this.get('currentPageId')); } }, @@ -247,15 +237,18 @@ export default Component.extend(NotifierMixin, { if (pendingChanges.length > 0) { this.attrs.onPageLevelChange(pendingChanges); - - this.showNotification("Outdent"); - this.send('onEntryClick', this.get('currentPageId')); } }, onEntryClick(id) { - this.setState(id); - this.attrs.onGotoPage(id); + if (id !== '') { + let jumpTo = "#page-" + id; + + if (!$(jumpTo).inView()) { + $(jumpTo).velocity("scroll", { duration: 250, offset: -100 }); + } + this.setState(id); + } } } }); diff --git a/gui/app/components/document/view-content.js b/gui/app/components/document/view-content.js index 4ba7aa96..e94bf55f 100644 --- a/gui/app/components/document/view-content.js +++ b/gui/app/components/document/view-content.js @@ -32,12 +32,12 @@ export default Component.extend(NotifierMixin, TooltipMixin, { this._super(...arguments); this.loadBlocks(); - schedule('afterRender', () => { - let jumpTo = "#page-" + this.get('pageId'); - if (!$(jumpTo).inView()) { - $(jumpTo).velocity("scroll", { duration: 250, offset: -100 }); - } - }); + // schedule('afterRender', () => { + // let jumpTo = "#page-" + this.get('pageId'); + // if (!$(jumpTo).inView()) { + // $(jumpTo).velocity("scroll", { duration: 250, offset: -100 }); + // } + // }); }, didRender() { @@ -49,6 +49,9 @@ export default Component.extend(NotifierMixin, TooltipMixin, { this._super(...arguments); this.setupAddWizard(); + console.log(this.get('pageId')); + this.attrs.onGotoPage(this.get('pageId')); + this.renderTooltips(); }, diff --git a/gui/app/pods/document/index/controller.js b/gui/app/pods/document/index/controller.js index 42853cdc..8c2d6e08 100644 --- a/gui/app/pods/document/index/controller.js +++ b/gui/app/pods/document/index/controller.js @@ -19,9 +19,6 @@ export default Controller.extend(TooltipMixin, { templateService: service('template'), sectionService: service('section'), linkService: service('link'), - folder: {}, - pages: [], - toggled: false, queryParams: ['pageId', 'tab'], pageId: '', tab: 'content', @@ -39,7 +36,7 @@ export default Controller.extend(TooltipMixin, { }, onCopyPage(pageId, targetDocumentId) { - let documentId = this.get('model.document.id'); + let documentId = this.get('document.id'); this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => { // refresh data if copied to same document @@ -47,15 +44,15 @@ export default Controller.extend(TooltipMixin, { this.set('pageId', ''); this.get('target._routerMicrolib').refresh(); - this.get('linkService').getDocumentLinks(this.get('model.document.id')).then((links) => { - this.set('model.links', links); + this.get('linkService').getDocumentLinks(this.get('document.id')).then((links) => { + this.set('links', links); }); } }); }, onMovePage(pageId, targetDocumentId) { - let documentId = this.get('model.document.id'); + let documentId = this.get('document.id'); this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => { this.send('onPageDeleted', { id: pageId, children: false }); @@ -63,7 +60,7 @@ export default Controller.extend(TooltipMixin, { }, onSavePage(page, meta) { - let documentId = this.get('model.document.id'); + let documentId = this.get('document.id'); let model = { page: page.toJSON({ includeId: true }), meta: meta.toJSON({ includeId: true }) @@ -72,15 +69,15 @@ export default Controller.extend(TooltipMixin, { this.get('documentService').updatePage(documentId, page.get('id'), model).then((up) => { page = up; this.set('pageId', page.get('id')); - this.get('linkService').getDocumentLinks(this.get('model.document.id')).then((links) => { - this.set('model.links', links); + this.get('linkService').getDocumentLinks(this.get('document.id')).then((links) => { + this.set('links', links); }); }); }, onPageDeleted(deletePage) { - let documentId = this.get('model.document.id'); - let pages = this.get('model.pages'); + let documentId = this.get('document.id'); + let pages = this.get('pages'); let deleteId = deletePage.id; let deleteChildren = deletePage.children; let page = _.findWhere(pages, { @@ -113,18 +110,18 @@ export default Controller.extend(TooltipMixin, { // update our models so we don't have to reload from db for (var i = 0; i < pendingChanges.length; i++) { let pageId = pendingChanges[i].pageId; - this.set('model.pages', _.reject(pages, function (p) { //jshint ignore: line + this.set('pages', _.reject(pages, function (p) { //jshint ignore: line return p.get('id') === pageId; })); } - this.set('model.pages', _.sortBy(pages, "sequence")); + this.set('pages', _.sortBy(pages, "sequence")); this.get('target._routerMicrolib').refresh(); }); } else { // page delete followed by re-leveling child pages this.get('documentService').deletePage(documentId, deleteId).then(() => { - this.set('model.pages', _.reject(pages, function (p) { + this.set('pages', _.reject(pages, function (p) { return p.get('id') === deleteId; })); @@ -135,20 +132,20 @@ export default Controller.extend(TooltipMixin, { onInsertSection(data) { return new EmberPromise((resolve) => { - this.get('documentService').addPage(this.get('model.document.id'), data).then((newPage) => { + this.get('documentService').addPage(this.get('document.id'), data).then((newPage) => { let data = this.get('store').normalize('page', newPage); this.get('store').push(data); this.set('pageId', newPage.id); - this.get('documentService').getPages(this.get('model.document.id')).then((pages) => { - this.set('model.pages', pages); + this.get('documentService').getPages(this.get('document.id')).then((pages) => { + this.set('pages', pages); if (newPage.pageType === 'tab') { this.transitionToRoute('document.section', - this.get('model.folder.id'), - this.get('model.folder.slug'), - this.get('model.document.id'), - this.get('model.document.slug'), + this.get('folder.id'), + this.get('folder.slug'), + this.get('document.id'), + this.get('document.slug'), newPage.id); } else { resolve(newPage.id); @@ -175,66 +172,78 @@ export default Controller.extend(TooltipMixin, { }, onDocumentDelete() { - this.get('documentService').deleteDocument(this.get('model.document.id')).then(() => { - this.transitionToRoute('folder', this.get('model.folder.id'), this.get('model.folder.slug')); + this.get('documentService').deleteDocument(this.get('document.id')).then(() => { + this.transitionToRoute('folder', this.get('folder.id'), this.get('folder.slug')); }); }, onSaveTemplate(name, desc) { - this.get('templateService').saveAsTemplate(this.get('model.document.id'), name, desc).then(function () {}); + this.get('templateService').saveAsTemplate(this.get('document.id'), name, desc).then(function () {}); }, onPageSequenceChange(changes) { - this.get('documentService').changePageSequence(this.get('model.document.id'), changes).then(() => { - _.each(changes, (change) => { - let pageContent = _.findWhere(this.get('model.pages'), { - id: change.pageId - }); - - if (is.not.undefined(pageContent)) { - pageContent.set('sequence', change.sequence); - } + this.get('documentService').changePageSequence(this.get('document.id'), changes).then(() => { + this.get('documentService').getPages(this.get('document.id')).then( (pages) => { + this.set('pages', pages); }); + // _.each(changes, (change) => { + // let pageContent = _.findWhere(this.get('pages'), { + // id: change.pageId + // }); - this.set('model.pages', this.get('model.pages').sortBy('sequence')); - this.get('target._routerMicrolib').refresh(); + // if (is.not.undefined(pageContent)) { + // pageContent.set('sequence', change.sequence); + // } + // }); + + // this.set('pages', this.get('pages').sortBy('sequence')); + // this.get('target._routerMicrolib').refresh(); }); }, onPageLevelChange(changes) { - this.get('documentService').changePageLevel(this.get('model.document.id'), changes).then(() => { - _.each(changes, (change) => { - let pageContent = _.findWhere(this.get('model.pages'), { - id: change.pageId - }); - - if (is.not.undefined(pageContent)) { - pageContent.set('level', change.level); - } + this.get('documentService').changePageLevel(this.get('document.id'), changes).then(() => { + this.get('documentService').getPages(this.get('document.id')).then( (pages) => { + this.set('pages', pages); }); + // _.each(changes, (change) => { + // let pageContent = _.findWhere(this.get('pages'), { + // id: change.pageId + // }); - let pages = this.get('model.pages'); - pages = pages.sortBy('sequence'); - this.set('model.pages', []); - this.set('model.pages', pages); - this.get('target._routerMicrolib').refresh(); + // if (is.not.undefined(pageContent)) { + // pageContent.set('level', change.level); + // } + // }); + + // let pages = this.get('pages'); + // pages = pages.sortBy('sequence'); + + // this.set('pages', []); + // this.set('pages', pages); + // this.get('target._routerMicrolib').refresh(); }); }, onGotoPage(id) { - if (this.get('pageId') !== id && id !== '') { + if (id !== '') { this.set('pageId', id); - } + + let jumpTo = "#page-" + id; + if (!$(jumpTo).inView()) { + $(jumpTo).velocity("scroll", { duration: 250, offset: -100 }); + } + } }, onTagChange(tags) { - let doc = this.get('model.document'); + let doc = this.get('document'); doc.set('tags', tags); this.get('documentService').save(doc); }, onRollback(pageId, revisionId) { - this.get('documentService').rollbackPage(this.get('model.document.id'), pageId, revisionId).then(() => { + this.get('documentService').rollbackPage(this.get('document.id'), pageId, revisionId).then(() => { this.set('tab', 'content'); this.get('target._routerMicrolib').refresh(); }); diff --git a/gui/app/pods/document/index/route.js b/gui/app/pods/document/index/route.js index 412a1855..6d9b3b35 100644 --- a/gui/app/pods/document/index/route.js +++ b/gui/app/pods/document/index/route.js @@ -34,5 +34,15 @@ export default Route.extend(AuthenticatedRouteMixin, { sections: this.modelFor('document').sections, permissions: this.modelFor('document').permissions }); + }, + + setupController(controller, model) { + controller.set('folders', model.folders); + controller.set('folder', model.folder); + controller.set('document', model.document); + controller.set('pages', model.pages); + controller.set('links', model.links); + controller.set('sections', model.sections); + controller.set('permissions', model.permissions); } }); diff --git a/gui/app/pods/document/index/template.hbs b/gui/app/pods/document/index/template.hbs index 08bd5325..b56d1008 100644 --- a/gui/app/pods/document/index/template.hbs +++ b/gui/app/pods/document/index/template.hbs @@ -4,23 +4,23 @@
- {{toolbar/for-document document=model.document spaces=model.folders space=model.folder permissions=model.permissions + {{toolbar/for-document document=document spaces=folders space=folder permissions=permissions onDocumentDelete=(action 'onDocumentDelete') onSaveTemplate=(action 'onSaveTemplate')}}
- {{document/document-heading document=model.document permissions=model.permissions + {{document/document-heading document=document permissions=permissions onSaveDocument=(action 'onSaveDocument')}} - {{document/document-meta document=model.document folder=model.folder folders=model.folders permissions=model.permissions + {{document/document-meta document=document folder=folder folders=folders permissions=permissions onSaveDocument=(action 'onSaveDocument')}}
- {{document/document-toc document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions + {{document/document-toc document=document folder=folder pages=pages page=page permissions=permissions currentPageId=pageId onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange') onGotoPage=(action 'onGotoPage')}}
@@ -38,23 +38,23 @@ {{#if (eq tab 'content')}} {{document/view-content - document=model.document links=model.links pages=model.pages - folder=model.folder folders=model.folders sections=model.sections permissions=model.permissions pageId=pageId + document=document links=links pages=pages + folder=folder folders=folders sections=sections permissions=permissions pageId=pageId onSavePage=(action 'onSavePage') onInsertSection=(action 'onInsertSection') onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') onGotoPage=(action 'onGotoPage') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}} {{/if}} {{#if (eq tab 'attachment')}} - {{document/view-attachment document=model.document permissions=model.permissions}} + {{document/view-attachment document=document permissions=permissions}} {{/if}} {{#if (eq tab 'activity')}} - {{document/view-activity document=model.document pages=model.pages permissions=model.permissions}} + {{document/view-activity document=document pages=pages permissions=permissions}} {{/if}} {{#if (eq tab 'revision')}} - {{document/view-revision document=model.document folder=model.folder pages=model.pages onRollback=(action 'onRollback')}} + {{document/view-revision document=document folder=folder pages=pages onRollback=(action 'onRollback')}} {{/if}}