1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-19 13:19:43 +02:00

improved TOC/page jumps

This commit is contained in:
Harvey Kandola 2017-12-14 16:48:12 +00:00
parent 215f644d11
commit 6f1b0564e2
5 changed files with 105 additions and 90 deletions

View file

@ -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);
}
}
}
});

View file

@ -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();
},

View file

@ -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();
});

View file

@ -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);
}
});

View file

@ -4,23 +4,23 @@
<div class="row">
<div class="col-12 mb-5">
{{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')}}
</div>
</div>
<div class="row">
<div class="col-12">
{{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')}}
</div>
</div>
<div class="row">
<div class="col-12">
{{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')}}
</div>
</div>
@ -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}}
</div>
</div>