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:
parent
215f644d11
commit
6f1b0564e2
5 changed files with 105 additions and 90 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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();
|
||||
},
|
||||
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue