mirror of
https://github.com/documize/community.git
synced 2025-07-24 07:39:43 +02:00
WIP content linker UX
This commit is contained in:
parent
531e9c88d7
commit
db1b3aef8c
11 changed files with 338 additions and 325 deletions
|
@ -10,43 +10,23 @@
|
|||
// https://documize.com
|
||||
|
||||
import { empty } from '@ember/object/computed';
|
||||
|
||||
import { computed } from '@ember/object';
|
||||
import TooltipMixin from '../../mixins/tooltip';
|
||||
import ModalMixin from '../../mixins/modal';
|
||||
import Component from '@ember/component';
|
||||
|
||||
|
||||
export default Component.extend({
|
||||
drop: null,
|
||||
export default Component.extend(TooltipMixin, ModalMixin, {
|
||||
busy: false,
|
||||
mousetrap: null,
|
||||
showLinkModal: false,
|
||||
hasNameError: empty('page.title'),
|
||||
containerId: computed('page', function () {
|
||||
let page = this.get('page');
|
||||
return `base-editor-inline-container-${page.id}`;
|
||||
}),
|
||||
pageId: computed('page', function () {
|
||||
let page = this.get('page');
|
||||
return `page-editor-${page.id}`;
|
||||
}),
|
||||
cancelId: computed('page', function () {
|
||||
let page = this.get('page');
|
||||
return `cancel-edits-button-${page.id}`;
|
||||
}),
|
||||
dialogId: computed('page', function () {
|
||||
let page = this.get('page');
|
||||
return `discard-edits-dialog-${page.id}`;
|
||||
}),
|
||||
contentLinkerButtonId: computed('page', function () {
|
||||
let page = this.get('page');
|
||||
return `content-linker-button-${page.id}`;
|
||||
}),
|
||||
previewButtonId: computed('page', function () {
|
||||
let page = this.get('page');
|
||||
return `content-preview-button-${page.id}`;
|
||||
}),
|
||||
|
||||
didRender() {
|
||||
let msContainer = document.getElementById(this.get('containerId'));
|
||||
let msContainer = document.getElementById('section-editor-' + this.get('containerId'));
|
||||
let mousetrap = this.get('mousetrap');
|
||||
|
||||
if (is.null(mousetrap)) {
|
||||
|
@ -67,13 +47,14 @@ export default Component.extend({
|
|||
$('#' + this.get('pageId')).focus(function() {
|
||||
$(this).select();
|
||||
});
|
||||
|
||||
this.renderTooltips();
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
let drop = this.get('drop');
|
||||
if (is.not.null(drop)) {
|
||||
drop.destroy();
|
||||
}
|
||||
this._super(...arguments);
|
||||
|
||||
this.removeTooltips();
|
||||
|
||||
let mousetrap = this.get('mousetrap');
|
||||
if (is.not.null(mousetrap)) {
|
||||
|
@ -83,33 +64,6 @@ export default Component.extend({
|
|||
},
|
||||
|
||||
actions: {
|
||||
onCancel() {
|
||||
if (this.attrs.isDirty() !== null && this.attrs.isDirty()) {
|
||||
$('#' + this.get('dialogId')).css("display", "block");
|
||||
|
||||
let drop = new Drop({
|
||||
target: $('#' + this.get('cancelId'))[0],
|
||||
content: $('#' + this.get('dialogId'))[0],
|
||||
classes: 'drop-theme-basic',
|
||||
position: "bottom right",
|
||||
openOn: "always",
|
||||
constrainToWindow: true,
|
||||
constrainToScrollParent: false,
|
||||
tetherOptions: {
|
||||
offset: "5px 0",
|
||||
targetOffset: "10px 0"
|
||||
},
|
||||
remove: false
|
||||
});
|
||||
|
||||
this.set('drop', drop);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.attrs.onCancel();
|
||||
},
|
||||
|
||||
onAction() {
|
||||
if (this.get('busy') || is.empty(this.get('page.title'))) {
|
||||
return;
|
||||
|
@ -122,21 +76,31 @@ export default Component.extend({
|
|||
this.attrs.onAction(this.get('page.title'));
|
||||
},
|
||||
|
||||
keepEditing() {
|
||||
let drop = this.get('drop');
|
||||
drop.close();
|
||||
},
|
||||
onCancel() {
|
||||
if (this.attrs.isDirty() !== null && this.attrs.isDirty()) {
|
||||
this.modalOpen('#discard-modal-' + this.get('page.id'), {show: true});
|
||||
return;
|
||||
}
|
||||
|
||||
discardEdits() {
|
||||
this.attrs.onCancel();
|
||||
},
|
||||
|
||||
onInsertLink(selection) {
|
||||
return this.get('onInsertLink')(selection);
|
||||
},
|
||||
onDiscard() {
|
||||
this.modalClose('#discard-modal-' + this.get('page.id'));
|
||||
this.attrs.onCancel();
|
||||
},
|
||||
|
||||
onPreview() {
|
||||
return this.get('onPreview')();
|
||||
},
|
||||
},
|
||||
|
||||
onShowLinkModal() {
|
||||
this.set('showLinkModal', true);
|
||||
},
|
||||
|
||||
onInsertLink(selection) {
|
||||
this.set('showLinkModal', false);
|
||||
return this.get('onInsertLink')(selection);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue